| 'use client' | |
| import { motion } from 'framer-motion' | |
| import { cn } from '@/lib/utils' | |
| interface BentoCardProps { | |
| children: React.ReactNode | |
| className?: string | |
| delay?: number | |
| } | |
| export default function BentoCard({ children, className, delay = 0 }: BentoCardProps) { | |
| return ( | |
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.5, delay, ease: "easeOut" }} | |
| whileHover={{ scale: 1.01, transition: { duration: 0.2 } }} | |
| className={cn( | |
| "relative overflow-hidden rounded-2xl bg-white/60 p-6 shadow-xl shadow-slate-200/50 backdrop-blur-xl border border-white/20", | |
| "hover:shadow-2xl hover:shadow-indigo-500/10 hover:border-indigo-500/20 transition-all", | |
| className | |
| )} | |
| > | |
| {children} | |
| </motion.div> | |
| ) | |
| } | |