'use client';/** * @author: @nuelst * @description: Card Flip - MVP Development Theme * @version: 1.1.0 * @date: 2025-01-14 * @license: MIT * @website: https://nueslt.vercel.app * @github: https://github.com/nuelst */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[];}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', ],}: CardFlipProps) { const [isFlipped, setIsFlipped] = useState(false); return ( <div className="group relative h-[360px] w-full max-w-[300px] [perspective:2000px]" onMouseEnter={() => setIsFlipped(true)} onMouseLeave={() => setIsFlipped(false)} > <div className={cn( 'relative h-full w-full', '[transform-style:preserve-3d]', 'transition-all duration-700', isFlipped ? '[transform:rotateY(180deg)]' : '[transform:rotateY(0deg)]', )} > {/* Front of card */} <div className={cn( 'absolute inset-0 h-full w-full', '[transform:rotateY(0deg)] [backface-visibility:hidden]', 'overflow-hidden rounded-2xl', 'bg-gradient-to-br from-white via-slate-50 to-slate-100', 'dark:from-zinc-900 dark:via-zinc-900/95 dark:to-zinc-800', 'border border-slate-200 dark:border-zinc-800/50', 'shadow-lg dark:shadow-xl', 'transition-all duration-700', 'group-hover:shadow-xl dark:group-hover:shadow-2xl', 'group-hover:border-primary/20 dark:group-hover:border-primary/30', isFlipped ? 'opacity-0' : 'opacity-100', )} > {/* Background gradient effect */} <div className="from-primary/5 dark:from-primary/10 absolute inset-0 bg-gradient-to-br via-transparent to-blue-500/5 dark:to-blue-500/10" /> {/* Animated code blocks */} <div className="absolute inset-0 flex items-center justify-center pt-20"> <div className="relative flex h-[100px] w-[200px] flex-col items-center justify-center gap-2"> {/* Code blocks animation */} {[...Array(6)].map((_, i) => ( <div key={i} className={cn( 'h-3 w-full rounded-sm', 'from-primary/20 via-primary/30 to-primary/20 bg-gradient-to-r', 'animate-[slideIn_2s_ease-in-out_infinite]', 'opacity-0', )} style={{ width: `${60 + Math.random() * 40}%`, animationDelay: `${i * 0.2}s`, marginLeft: `${Math.random() * 20}%`, }} /> ))} {/* Central rocket icon */} <div className="absolute inset-0 flex items-center justify-center"> <div className={cn( 'h-12 w-12 rounded-xl', 'from-primary via-primary/90 to-primary/80 bg-gradient-to-br', 'flex items-center justify-center', 'shadow-primary/25 shadow-lg', 'animate-pulse', 'transition-all duration-500 group-hover:scale-110 group-hover:rotate-12', )} > <Rocket className="h-6 w-6 text-white" /> </div> </div> </div> </div> {/* Bottom content */} <div className="absolute right-0 bottom-0 left-0 p-5"> <div className="flex items-center justify-between gap-3"> <div className="space-y-1.5"> <h3 className="text-lg leading-snug font-semibold tracking-tight text-zinc-900 transition-all duration-500 ease-out group-hover:translate-y-[-4px] dark:text-white"> {title} </h3> <p className="line-clamp-2 text-sm tracking-tight text-zinc-600 transition-all delay-[50ms] duration-500 ease-out group-hover:translate-y-[-4px] dark:text-zinc-300"> {subtitle} </p> </div> <div className="group/icon relative"> <div className={cn( 'absolute inset-[-8px] rounded-lg transition-opacity duration-300', 'from-primary/20 via-primary/10 bg-gradient-to-br to-transparent', 'opacity-0 group-hover/icon:opacity-100', )} /> <Zap className="text-primary relative z-10 h-5 w-5 transition-all duration-300 group-hover/icon:scale-110 group-hover/icon:rotate-12" /> </div> </div> </div> </div> {/* Back of card */} <div className={cn( 'absolute inset-0 h-full w-full', '[transform:rotateY(180deg)] [backface-visibility:hidden]', 'rounded-2xl p-5', 'bg-gradient-to-br from-white via-slate-50 to-slate-100', 'dark:from-zinc-900 dark:via-zinc-900/95 dark:to-zinc-800', 'border border-slate-200 dark:border-zinc-800', 'shadow-lg dark:shadow-xl', 'flex flex-col', 'transition-all duration-700', 'group-hover:shadow-xl dark:group-hover:shadow-2xl', 'group-hover:border-primary/20 dark:group-hover:border-primary/30', !isFlipped ? 'opacity-0' : 'opacity-100', )} > {/* Background gradient */} <div className="from-primary/5 dark:from-primary/10 absolute inset-0 rounded-2xl bg-gradient-to-br via-transparent to-blue-500/5 dark:to-blue-500/10" /> <div className="relative z-10 flex-1 space-y-5"> <div className="space-y-2"> <div className="mb-2 flex items-center gap-2"> <div className="from-primary via-primary/90 to-primary/80 flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br"> <Code2 className="h-4 w-4 text-white" /> </div> <h3 className="text-lg leading-snug font-semibold tracking-tight text-zinc-900 transition-all duration-500 ease-out group-hover:translate-y-[-2px] dark:text-white"> {title} </h3> </div> <p className="line-clamp-2 text-sm tracking-tight text-zinc-600 transition-all duration-500 ease-out group-hover:translate-y-[-2px] dark:text-zinc-400"> {description} </p> </div> <div className="space-y-2.5"> {features.map((feature, index) => { const icons = [Copy, Code2, Rocket, Zap]; const IconComponent = icons[index % icons.length]; return ( <div key={feature} className="flex items-center gap-3 text-sm text-zinc-700 transition-all duration-500 dark:text-zinc-300" style={{ transform: isFlipped ? 'translateX(0)' : 'translateX(-10px)', opacity: isFlipped ? 1 : 0, transitionDelay: `${index * 100 + 200}ms`, }} > <div className="bg-primary/10 dark:bg-primary/20 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"> <IconComponent className="text-primary h-3 w-3" /> </div> <span className="font-medium">{feature}</span> </div> ); })} </div> </div> <div className="relative z-10 mt-auto border-t border-slate-200 pt-4 dark:border-zinc-800"> <div className={cn( 'group/start relative', 'flex items-center justify-between', 'rounded-lg p-2.5', 'transition-all duration-300', 'bg-gradient-to-r from-slate-100 via-slate-100 to-slate-100', 'dark:from-zinc-800 dark:via-zinc-800 dark:to-zinc-800', 'hover:from-primary/10 hover:via-primary/5 hover:to-transparent', 'dark:hover:from-primary/20 dark:hover:via-primary/10 dark:hover:to-transparent', 'hover:scale-[1.02] hover:cursor-pointer', 'hover:border-primary/20 border border-transparent', )} > <span className="group-hover/start:text-primary text-sm font-semibold text-zinc-900 transition-colors duration-300 dark:text-white"> Start Building </span> <div className="group/icon relative"> <div className={cn( 'absolute inset-[-6px] rounded-lg transition-all duration-300', 'from-primary/20 via-primary/10 bg-gradient-to-br to-transparent', 'scale-90 opacity-0 group-hover/start:scale-100 group-hover/start:opacity-100', )} /> <ArrowRight className="text-primary relative z-10 h-4 w-4 transition-all duration-300 group-hover/start:translate-x-1 group-hover/start:scale-110" /> </div> </div> </div> </div> </div> <style jsx>{` @keyframes slideIn { 0% { transform: translateX(-100px); opacity: 0; } 50% { transform: translateX(0); opacity: 0.8; } 100% { transform: translateX(100px); opacity: 0; } } `}</style> </div> );}
