'use client'; import { cn } from '@/lib/utils'; import { ArrowRight, Code2, Copy, Rocket, Zap } from 'lucide-react'; import { useState } from 'react'; export interface CardFlipProps { title?: string; subtitle?: string; description?: string; features?: string[]; color?: string; } export default function CardFlip({ title = 'Build MVPs Fast', subtitle = 'Launch your idea in record time', description = 'Copy, paste, customize—and launch your MVP faster than ever with our developer-first component library.', features = [ 'Copy & Paste Ready', 'Developer-First', 'MVP Optimized', 'Zero Setup Required', ], color = '#ff2e88' }: CardFlipProps) { const [isFlipped, setIsFlipped] = useState(false); return (

setIsFlipped(true)} onMouseLeave={() => setIsFlipped(false)} >

{/* Front of card */}

{/* Background gradient effect */}

{/* Animated code blocks */}

{/* Code blocks animation */} {[...Array(6)].map((_, i) => (

))} {/* Central rocket icon */}

{/* Bottom content */}

{title}

{subtitle}

{/* Back of card */}

{/* Background gradient */}

{title}

{description}

{features.map((feature, index) => { const icons = [Copy, Code2, Rocket, Zap]; const IconComponent = icons[index % icons.length]; return (

{feature}

); })}

Start Building

); }