{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-lift-motion",
  "type": "registry:component",
  "description": "A Card component with lift animation on hover.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/app/components/animatedComponents/cards/card-lift/CardLiftMotion.tsx",
      "content": "\"use client\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { motion } from \"framer-motion\";\r\n\r\nconst cards = [\r\n  {\r\n    title: \"Mountain View\",\r\n    copy: \"Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains\",\r\n    button: \"View Trips\",\r\n    img: \"https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80&auto=format&fit=crop\",\r\n  },\r\n  {\r\n    title: \"To The Beach\",\r\n    copy: \"Plan your next beach trip with these fabulous destinations\",\r\n    button: \"View Trips\",\r\n    img: \"https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&q=80&auto=format&fit=crop\",\r\n  },\r\n  {\r\n    title: \"Desert Destinations\",\r\n    copy: \"It's the desert you've always dreamed of\",\r\n    button: \"Book Now\",\r\n    img: \"https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80&auto=format&fit=crop\",\r\n  },\r\n  {\r\n    title: \"Explore The Galaxy\",\r\n    copy: \"Seriously, straight up, just blast off into outer space today\",\r\n    button: \"Book Now\",\r\n    img: \"https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?w=800&q=80&auto=format&fit=crop\",\r\n  },\r\n];\r\n\r\nexport default function CardLiftMotion() {\r\n  return (\r\n    <main className=\"page-content grid gap-4 p-4 max-w-6xl mx-auto font-sans sm:grid-cols-2 lg:grid-cols-4\">\r\n      {cards.map((card, i) => (\r\n        <motion.div\r\n          key={i}\r\n          className=\"relative flex items-end overflow-hidden rounded-lg shadow-lg h-[350px] group cursor-pointer\"\r\n          whileHover=\"hover\"\r\n          initial=\"rest\"\r\n          animate=\"rest\"\r\n        >\r\n          {/* Background image */}\r\n          <motion.div\r\n            className=\"absolute inset-0 bg-cover bg-center\"\r\n            style={{ backgroundImage: `url(${card.img})` }}\r\n            variants={{\r\n              rest: { scale: 1 },\r\n              hover: { scale: 1.05 },\r\n            }}\r\n            transition={{ duration: 0.6, ease: \"easeOut\" }}\r\n          />\r\n\r\n          {/* Gradient overlay */}\r\n          <div className=\"absolute inset-0 bg-gradient-to-b from-transparent via-black/40 to-black/70 opacity-90\" />\r\n\r\n          {/* Content */}\r\n          <motion.div\r\n            className=\"relative flex flex-col items-center text-center text-white p-4 w-full\"\r\n            variants={{\r\n              rest: { y: \"60%\", transition: { duration: 0.4, ease: \"easeOut\" } },\r\n              hover: { y: \"0%\", transition: { duration: 0.4, ease: \"easeOut\" } },\r\n            }}\r\n          >\r\n\r\n            <h3 className=\"text-lg font-bold mb-4 add-font-family\">{card.title}</h3>\r\n            <motion.p\r\n              className=\"mt-3 text-sm italic opacity-0 group-hover:opacity-100 text-white\"\r\n              variants={{\r\n                rest: { opacity: 0, y: 20 },\r\n                hover: { opacity: 1, y: 0 },\r\n              }}\r\n              transition={{ duration: 0.3, delay: 0.1 }}\r\n            >\r\n              {card.copy}\r\n            </motion.p>\r\n            <Button asChild >\r\n            <motion.button\r\n              className=\"mt-4 \"\r\n              variants={{\r\n                rest: { opacity: 0, y: 20 },\r\n                hover: { opacity: 1, y: 0 },\r\n              }}\r\n              transition={{ duration: 0.3, delay: 0.2 }}\r\n            >\r\n              <h3 className=\"text-sm font-medium add-font-family\">{card.button}</h3>\r\n            </motion.button>\r\n            </Button>\r\n          </motion.div>\r\n        </motion.div>\r\n      ))}\r\n    </main>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/cards/card-lift/CardLiftMotion.tsx"
    }
  ]
}