{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-card-motion",
  "type": "registry:component",
  "description": "A Card component with flip animation.",
  "dependencies": [
    "framer-motion",
    "@iconify/react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/animatedComponents/cards/filp-card/FlipCardMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport { Card } from \"@/components/ui/card\";\r\nimport { Icon } from \"@iconify/react/dist/iconify.js\";\r\nimport { motion } from \"framer-motion\";\r\nimport Image from \"next/image\";\r\n\r\nexport default function FlipCardMotion() {\r\n  return (\r\n    <Card className=\"p-0 overflow-hidden\" >\r\n    <motion.div\r\n      whileHover={{ y: -8, scale: 1 }}\r\n      transition={{ type: \"spring\", stiffness: 200, damping: 20 }}\r\n      className=\"relative\"\r\n    >\r\n      <div className=\"relative\">\r\n        <motion.div\r\n          whileHover={{ scale: 1 }}\r\n          transition={{ duration: 0.5 }}\r\n          className=\"w-full h-56\"\r\n        >\r\n          <Image\r\n            src=\"/images/blog/blog-img1.jpg\"\r\n            alt=\"Blog thumbnail\"\r\n            width={400}\r\n            height={224}\r\n            className=\"h-full w-full object-cover\"\r\n          />\r\n        </motion.div>\r\n\r\n        <span className=\"absolute bottom-2 right-2 rounded-md bg-white/90 px-2 py-1 text-xs font-semibold text-gray-800 shadow\">\r\n          2 min Read\r\n        </span>\r\n\r\n        <motion.div\r\n          animate={{ y: [0, -8, 0] }}\r\n          transition={{ duration: 3, repeat: Infinity }}\r\n          className=\"absolute -bottom-4 left-4 z-20\"\r\n        >\r\n          <Image\r\n            src=\"/images/avatar/avatar-1.svg\"\r\n            alt=\"Profile\"\r\n            width={40}\r\n            height={40}\r\n            className=\"rounded-full border-2 border-border shadow\"\r\n          />\r\n        </motion.div>\r\n      </div>\r\n\r\n      <div className=\"space-y-3 p-4 mt-1\">\r\n        <span className=\"rounded-md bg-gray-100 dark:bg-white/10 px-2 py-1 text-xs font-medium text-gray-600 dark:text-white/60\">\r\n          Social\r\n        </span>\r\n\r\n        <motion.a\r\n          whileHover={{ color: \"#2563eb\" }} \r\n          href=\"#\"\r\n          className=\"block text-lg font-semibold text-gray-800 dark:!text-white transition-colors\"\r\n        >\r\n          As yen tumbles, gadget-loving Japan goes for secondhand iPhones\r\n        </motion.a>\r\n\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 10 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          viewport={{ once: true }}\r\n          transition={{ duration: 0.6 }}\r\n          className=\"flex items-center gap-6 text-sm text-gray-600 dark:text-white/60\"\r\n        >\r\n          <div className=\"flex items-center gap-1\">\r\n            <Icon icon=\"mingcute:eye-2-line\" width={16} height={16} /> 9,125\r\n          </div>\r\n          <div className=\"flex items-center gap-1\">\r\n            <Icon icon=\"tabler:message\" width={16} height={16} />  3\r\n          </div>\r\n          <div className=\"ml-auto flex items-center gap-1\">\r\n            <Icon icon=\"fontisto:date\" width={16} height={16} />  Mon, Dec 19\r\n          </div>\r\n        </motion.div>\r\n      </div>\r\n    </motion.div>\r\n    </Card>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/cards/flip-card/FlipCardMotion.tsx"
    }
  ]
}