{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-footer",
  "type": "registry:block",
  "title": "Hover footer",
  "description": "Hover footer",
  "files": [
    {
      "path": "components/usages/hoverfooterusage.tsx",
      "content": "import HoverFooter from \"@/registry/open-source/hover-footer\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"relative w-full h-screen flex items-center justify-center\">\n\t\t\t<HoverFooter />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/hoverfooterusage.tsx",
      "content": "import HoverFooter from \"@/registry/open-source/hover-footer\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"relative w-full h-screen flex items-center justify-center\">\n\t\t\t<HoverFooter />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/hover-footer.tsx",
      "content": "import React from \"react\";\n\nimport {\n\tDribbble,\n\tFacebook,\n\tGlobe,\n\tInstagram,\n\tMail,\n\tMapPin,\n\tPhone,\n\tTwitter,\n} from \"lucide-react\";\n\nimport { TextHoverEffect } from \"./text-hover\";\n\n// Credit:\n// https://nurui.vercel.app/docs/hover-footer\n\nfunction HoverFooter() {\n\treturn (\n\t\t<footer className=\"bg-[#0F0F11]/10 relative h-fit rounded-3xl overflow-hidden m-8\">\n\t\t\t<div className=\"max-w-7xl mx-auto p-14 z-40 relative\">\n\t\t\t\t{/* Main grid for the footer content */}\n\n\t\t\t\t<div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 md:gap-8 lg:gap-16 pb-12\">\n\t\t\t\t\t{/* Section 1: Pollen brand and description */}\n\n\t\t\t\t\t<div className=\"flex flex-col space-y-4\">\n\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t<span className=\"text-[#3ca2fa] text-3xl font-extrabold\">\n\t\t\t\t\t\t\t\t&hearts;\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span className=\"text-white text-3xl font-bold\">\n\t\t\t\t\t\t\t\tNur/ui\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<p className=\"text-sm leading-relaxed\">\n\t\t\t\t\t\t\tNur UI is a modern React and Next.js based UI component\n\t\t\t\t\t\t\tlibrary.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Section 2: About Us links */}\n\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h4 className=\"text-white text-lg font-semibold mb-6\">\n\t\t\t\t\t\t\tAbout Us\n\t\t\t\t\t\t</h4>\n\n\t\t\t\t\t\t<ul className=\"space-y-3\">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tCompany History\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tMeet the Team\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tEmployee Handbook\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tCareers\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Section 3: Helpful Links */}\n\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h4 className=\"text-white text-lg font-semibold mb-6\">\n\t\t\t\t\t\t\tHelpful Links\n\t\t\t\t\t\t</h4>\n\n\t\t\t\t\t\t<ul className=\"space-y-3\">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tFAQs\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tSupport\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors relative\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tLive Chat\n\t\t\t\t\t\t\t\t\t<span className=\"absolute top-0 right-[-10px] w-2 h-2 rounded-full bg-[#3ca2fa] animate-pulse\"></span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Section 4: Contact Us */}\n\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h4 className=\"text-white text-lg font-semibold mb-6\">\n\t\t\t\t\t\t\tContact Us\n\t\t\t\t\t\t</h4>\n\n\t\t\t\t\t\t<ul className=\"space-y-4\">\n\t\t\t\t\t\t\t<li className=\"flex items-center space-x-3\">\n\t\t\t\t\t\t\t\t<Mail size={18} className=\"text-[#3ca2fa]\" />\n\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"mailto:hello@Pollen.com\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\thello@nurui.com\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li className=\"flex items-center space-x-3\">\n\t\t\t\t\t\t\t\t<Phone size={18} className=\"text-[#3ca2fa]\" />\n\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"tel:+918637373116\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t+91 86373 73116\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li className=\"flex items-center space-x-3\">\n\t\t\t\t\t\t\t\t<MapPin size={18} className=\"text-[#3ca2fa]\" />\n\n\t\t\t\t\t\t\t\t<span className=\"hover:text-[#3ca2fa] transition-colors\">\n\t\t\t\t\t\t\t\t\tSylhet, Bangladesh\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Separator line */}\n\n\t\t\t\t<hr className=\"border-t border-gray-700 my-8\" />\n\n\t\t\t\t{/* Bottom section: social media and copyright */}\n\n\t\t\t\t<div className=\"flex flex-col md:flex-row justify-between items-center text-sm space-y-4 md:space-y-0\">\n\t\t\t\t\t{/* Social Media Icons */}\n\n\t\t\t\t\t<div className=\"flex space-x-6 text-gray-400\">\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\taria-label=\"Facebook\"\n\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors relative\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Facebook size={20} />\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\taria-label=\"Instagram\"\n\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Instagram size={20} />\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\taria-label=\"Twitter\"\n\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Twitter size={20} />\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\taria-label=\"Dribbble\"\n\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Dribbble size={20} />\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\taria-label=\"Globe\"\n\t\t\t\t\t\t\tclassName=\"hover:text-[#3ca2fa] transition-colors\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Globe size={20} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Copyright text */}\n\n\t\t\t\t\t<div className=\"text-center md:text-left\">\n\t\t\t\t\t\t<p>&copy; 2025 Nurui. All rights reserved.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"lg:flex hidden h-120 -mt-52 -mb-36\">\n\t\t\t\t<TextHoverEffect text=\"Drive Components\" />\n\t\t\t</div>\n\t\t</footer>\n\t);\n}\n\nexport default HoverFooter;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/text-hover.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { motion } from \"motion/react\";\n\nexport const TextHoverEffect = ({\n\ttext,\n\tduration,\n}: {\n\ttext: string;\n\tduration?: number;\n\tautomatic?: boolean;\n}) => {\n\tconst svgRef = useRef<SVGSVGElement>(null);\n\tconst [cursor, setCursor] = useState({ x: 0, y: 0 });\n\tconst [hovered, setHovered] = useState(false);\n\tconst [maskPosition, setMaskPosition] = useState({ cx: \"50%\", cy: \"50%\" });\n\n\tuseEffect(() => {\n\t\tif (svgRef.current && cursor.x !== null && cursor.y !== null) {\n\t\t\tconst svgRect = svgRef.current.getBoundingClientRect();\n\t\t\tconst cxPercentage = ((cursor.x - svgRect.left) / svgRect.width) * 100;\n\t\t\tconst cyPercentage = ((cursor.y - svgRect.top) / svgRect.height) * 100;\n\t\t\tsetMaskPosition({\n\t\t\t\tcx: `${cxPercentage}%`,\n\t\t\t\tcy: `${cyPercentage}%`,\n\t\t\t});\n\t\t}\n\t}, [cursor]);\n\n\treturn (\n\t\t<section className=\"group relative h-full\">\n\t\t\t<span className=\"absolute inset-0 transition-all justify-self-center content-center opacity-100 group-hover:opacity-0 pointer-events-none\">\n\t\t\t\tHover here to see the effect\n\t\t\t</span>\n\t\t\t<svg\n\t\t\t\tref={svgRef}\n\t\t\t\twidth=\"100%\"\n\t\t\t\theight=\"100%\"\n\t\t\t\tviewBox=\"0 0 300 100\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseMove={(e) => setCursor({ x: e.clientX, y: e.clientY })}\n\t\t\t\tclassName=\"select-none z-0\"\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient\n\t\t\t\t\t\tid=\"textGradient\"\n\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\t\tr=\"25%\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{hovered && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<stop offset=\"0%\" stopColor={\"var(--yellow-500)\"} />\n\t\t\t\t\t\t\t\t<stop offset=\"25%\" stopColor={\"var(--red-500)\"} />\n\t\t\t\t\t\t\t\t<stop offset=\"50%\" stopColor={\"var(--blue-500)\"} />\n\t\t\t\t\t\t\t\t<stop offset=\"75%\" stopColor={\"var(--cyan-500)\"} />\n\t\t\t\t\t\t\t\t<stop offset=\"100%\" stopColor={\"var(--violet-500)\"} />\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</linearGradient>\n\n\t\t\t\t\t<motion.radialGradient\n\t\t\t\t\t\tid=\"revealMask\"\n\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\tr=\"20%\"\n\t\t\t\t\t\tanimate={maskPosition}\n\t\t\t\t\t\ttransition={{ duration: duration ?? 0, ease: \"easeOut\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<stop offset=\"0%\" stopColor=\"white\" />\n\t\t\t\t\t\t<stop offset=\"100%\" stopColor=\"black\" />\n\t\t\t\t\t</motion.radialGradient>\n\t\t\t\t\t<mask id=\"textMask\">\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tx=\"0\"\n\t\t\t\t\t\t\ty=\"0\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\tfill=\"url(#revealMask)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</mask>\n\t\t\t\t</defs>\n\t\t\t\t<text\n\t\t\t\t\tx=\"50%\"\n\t\t\t\t\ty=\"50%\"\n\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\tdominantBaseline=\"middle\"\n\t\t\t\t\tstroke=\"url(#textGradient)\"\n\t\t\t\t\tstrokeWidth=\"0.3\"\n\t\t\t\t\tmask=\"url(#textMask)\"\n\t\t\t\t\tclassName=\"font-[helvetica] font-bold fill-transparent text-4xl pointer-events-none\"\n\t\t\t\t>\n\t\t\t\t\t{text}\n\t\t\t\t</text>\n\t\t\t</svg>\n\t\t</section>\n\t);\n};\n",
      "type": "registry:ui"
    }
  ]
}