Card Hover Animation

import { motion } from 'framer-motion';

export default function AnimatedCard() {
  return (
    <motion.div
      className="group cursor-pointer"
      whileHover={{ y: -8, scale: 1.05 }}
      transition={{ type: "spring", stiffness: 400, damping: 25 }}
    >
      <div className="relative overflow-hidden bg-card rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300">
        <motion.div 
          className="absolute inset-0 bg-gradient-primary"
          initial={{ opacity: 0 }}
          whileHover={{ opacity: 0.1 }}
          transition={{ duration: 0.3 }}
        />
        <div className="p-6">
          <motion.div 
            className="w-12 h-12 bg-gradient-primary rounded-xl mb-4"
            whileHover={{ scale: 1.1 }}
            transition={{ duration: 0.3 }}
          />
          <h3 className="font-bold text-lg text-card-foreground mb-2">Animated Card</h3>
          <p className="text-muted-foreground">Hover to see the magic happen with smooth animations.</p>
        </div>
      </div>
    </motion.div>
  );
}