'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' const items = [ { title: 'Design', description: 'Clean, accessible components that make your product feel modern and easy to use.', image: 'https://images.unsplash.com/photo-1631125915800-4008fc1072ec?q=80&w=1133&auto=format&fit=crop', }, { title: 'Components', description: 'Pre-built blocks you can drop into any layout. Customize once, reuse everywhere.', image: 'https://images.unsplash.com/photo-1517705008128-361805f42e86?q=80&w=1202&auto=format&fit=crop', }, { title: 'Developer Experience', description: 'Built with TypeScript, clear APIs, and documentation that gets you shipping faster.', image: 'https://images.unsplash.com/photo-1579326882518-21eaa7893b02?q=80&w=1241&auto=format&fit=crop', }, { title: 'Customization', description: 'Themes, variants, and overrides. Make it look and behave exactly how you need.', image: 'https://images.unsplash.com/photo-1544816155-12df9643f363?q=80&w=1062&auto=format&fit=crop', }, { title: 'Performance', description: 'Optimized for speed and accessibility. Less bundle size, smoother interactions.', image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?q=80&w=1212&auto=format&fit=crop', }, ] export function Feature01() { const [selectedIndex, setSelectedIndex] = useState(0) return (

{items.map((item, index) => { const isSelected = index === selectedIndex return ( ) })}

{items.map((item, index) => ( {item.title}

))}

) }