{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-links",
  "title": "Hover Links",
  "description": "A collection of links with hover effects",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/hover-links.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { useRef } from \"react\"\nimport { motion, useMotionValue, useSpring, useTransform } from \"framer-motion\"\nimport { FiArrowRight } from \"react-icons/fi\"\n\ninterface LinkProps {\n  heading: string\n  subheading: string\n  imgSrc: string\n  href: string\n}\n\ninterface UniqueHoverImageLinksProps {\n  links: LinkProps[]\n  className?: string\n}\n\nexport const HoverImageLinks: React.FC<UniqueHoverImageLinksProps> = ({ links, className = \"\" }) => {\n  return (\n    <section className={`bg-gradient-to-br from-purple-900 to-indigo-900 p-8 ${className}`}>\n      <div className=\"mx-auto max-w-5xl\">\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n          {links.map((link, index) => (\n            <Link key={index} {...link} />\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nconst Link: React.FC<LinkProps> = ({ heading, imgSrc, subheading, href }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const mouseXSpring = useSpring(x)\n  const mouseYSpring = useSpring(y)\n\n  const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], [\"17.5deg\", \"-17.5deg\"])\n  const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], [\"-17.5deg\", \"17.5deg\"])\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!ref.current) return\n\n    const rect = ref.current.getBoundingClientRect()\n\n    const width = rect.width\n    const height = rect.height\n\n    const mouseX = e.clientX - rect.left\n    const mouseY = e.clientY - rect.top\n\n    const xPct = mouseX / width - 0.5\n    const yPct = mouseY / height - 0.5\n\n    x.set(xPct)\n    y.set(yPct)\n  }\n\n  return (\n    <motion.div\n      ref={ref}\n      onMouseMove={handleMouseMove}\n      initial=\"initial\"\n      whileHover=\"whileHover\"\n      style={{\n        rotateX,\n        rotateY,\n        transformStyle: \"preserve-3d\",\n      }}\n      className=\"group relative h-96 w-full rounded-xl bg-gradient-to-br from-neutral-900 to-neutral-800 shadow-xl transition-all duration-300 hover:shadow-2xl\"\n    >\n      <div className=\"absolute inset-0 overflow-hidden rounded-xl\">\n        <motion.img\n          variants={{\n            initial: { scale: 1.5, rotate: \"0deg\" },\n            whileHover: { scale: 1, rotate: \"3deg\" },\n          }}\n          transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n          src={imgSrc}\n          alt={`Background for ${heading}`}\n          className=\"h-full w-full object-cover opacity-50 transition-opacity duration-300 group-hover:opacity-75\"\n        />\n      </div>\n      <div className=\"absolute inset-0 flex flex-col justify-between p-6 text-white\">\n        <div\n          style={{\n            transform: \"translateZ(50px)\",\n          }}\n        >\n          <motion.h2\n            variants={{\n              initial: { y: 20, opacity: 0 },\n              whileHover: { y: 0, opacity: 1 },\n            }}\n            transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n            className=\"text-3xl font-bold mb-2\"\n          >\n            {heading}\n          </motion.h2>\n          <motion.p\n            variants={{\n              initial: { y: 20, opacity: 0 },\n              whileHover: { y: 0, opacity: 1 },\n            }}\n            transition={{ type: \"spring\", stiffness: 400, damping: 30, delay: 0.1 }}\n            className=\"text-lg text-neutral-300\"\n          >\n            {subheading}\n          </motion.p>\n        </div>\n        <motion.a\n          href={href}\n          variants={{\n            initial: { x: -20, opacity: 0 },\n            whileHover: { x: 0, opacity: 1 },\n          }}\n          transition={{ type: \"spring\", stiffness: 400, damping: 30, delay: 0.2 }}\n          className=\"flex items-center space-x-2 text-lg font-semibold\"\n          style={{\n            transform: \"translateZ(75px)\",\n          }}\n        >\n          <span>Learn More</span>\n          <FiArrowRight />\n        </motion.a>\n      </div>\n    </motion.div>\n  )\n}\n\n",
      "type": "registry:ui",
      "target": "components/pioneerui/hover-links.tsx"
    }
  ],
  "type": "registry:ui"
}