Loading...
Loading...
An accordion that expands sections on hover instead of click, with smooth reveal animation.
import { useState } from "react";
const items = [
{ title: "Design", desc: "Modern, responsive layouts built with Tailwind CSS utility classes for rapid prototyping." },
{ title: "Development", desc: "Clean React components with TypeScript. No external dependencies beyond React and Tailwind." },
{ title: "Deployment", desc: "Optimized for Vercel, Netlify, and static hosting. Zero configuration needed for deployment." },
{ title: "Analytics", desc: "Built-in analytics integration with privacy-first tracking and real-time dashboard." },
];
export function AccordionHover() {
const [hovered, setHovered] = useState<number>(0);
return (
<div className="max-w-2xl mx-auto py-16 px-4 text-center">
<h2 className="text-3xl font-bold text-gray-900 mb-2">Hover to Explore</h2>
<p className="text-gray-500 mb-10 text-sm">Hover over each item to expand</p>
<div className="flex gap-2 h-80">
{items.map((item, i) => {
const isOpen = hovered === i;
return (
<div
key={i}
className={`relative flex-1 rounded-2xl overflow-hidden cursor-pointer transition-all duration-500 ${isOpen ? 'flex-[3]' : 'flex-1'}`}
onMouseEnter={() => setHovered(i)}
style={{ backgroundColor: isOpen ? '#eef2ff' : '#f8fafc' }}
>
<div className="absolute inset-0 flex items-center justify-center">
<div className={`transition-all duration-500 ${isOpen ? 'scale-100 opacity-100' : 'scale-100 opacity-100'}`}>
<div className={`px-4 transition-all duration-500 ${isOpen ? '' : 'rotate-0'}`}>
{!isOpen && (
<span className="text-sm font-semibold text-gray-700 [writing-mode:vertical-lr] tracking-wider">{item.title}</span>
)}
</div>
{isOpen && (
<div className="p-6 text-left max-w-xs">
<h3 className="text-xl font-bold text-gray-900 mb-3">{item.title}</h3>
<p className="text-gray-600 text-sm leading-relaxed">{item.desc}</p>
</div>
)}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}