Hover Expand Card

'use client'

import { motion } from 'framer-motion'

export function HoverExpandCard() {
  return (
    <motion.div
      whileHover={{ y: -8, scale: 1.02 }}
      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
      className="w-80 rounded-2xl border  bg-[var(--card-bg)] p-6 shadow-lg transition-shadow hover:shadow-2xl"
    >
      <div className="mb-4 h-40 rounded-lg bg-gradient-to-br from-slate-400 to-blue-500" />
      <h3 className="mb-2 text-xl font-bold">Beautiful Card</h3>
      <p className="text-sm text-[var(--foreground)]/70">
        Hover over this card to see it lift and expand with a smooth spring
        animation.
      </p>
    </motion.div>
  )
}