Merge pull request #91 from afsar-dev/dev

hover footer added

Author: afsar-dev

public/r/hover-footer.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-footer",
+  "type": "registry:component",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "lucide-react",
+    "motion"
+  ],
+  "devDependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "./src/components/nurui/hover-footer.tsx",
+      "content": "import React from \"react\";\nimport {\n  Mail,\n  Phone,\n  MapPin,\n  Facebook,\n  Instagram,\n  Twitter,\n  Dribbble,\n  Globe,\n} from \"lucide-react\";\nimport FooterBackgroundGradient from \"./footer-background-gradient\";\nimport { TextHoverEffect } from \"./text-hover-effect\";\n\nfunction HoverFooter() {\n  return (\n    <footer className=\"bg-[#0F0F11]/10 relative h-fit rounded-3xl overflow-hidden m-8\">\n      <div className=\"max-w-7xl mx-auto p-14 z-40 relative\">\n        {/* Main grid for the footer content */}\n\n        <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          {/* Section 1: Pollen brand and description */}\n\n          <div className=\"flex flex-col space-y-4\">\n            <div className=\"flex items-center space-x-2\">\n              <span className=\"text-[#3ca2fa] text-3xl font-extrabold\">\n                &hearts;\n              </span>\n\n              <span className=\"text-white text-3xl font-bold\">Nur/ui</span>\n            </div>\n\n            <p className=\"text-sm leading-relaxed\">\n              Nur UI is a modern React and Next.js based UI component library.\n            </p>\n          </div>\n\n          {/* Section 2: About Us links */}\n\n          <div>\n            <h4 className=\"text-white text-lg font-semibold mb-6\">About Us</h4>\n\n            <ul className=\"space-y-3\">\n              <li>\n                <a href=\"#\" className=\"hover:text-[#3ca2fa] transition-colors\">\n                  Company History\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" className=\"hover:text-[#3ca2fa] transition-colors\">\n                  Meet the Team\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" className=\"hover:text-[#3ca2fa] transition-colors\">\n                  Employee Handbook\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" className=\"hover:text-[#3ca2fa] transition-colors\">\n                  Careers\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          {/* Section 3: Helpful Links */}\n\n          <div>\n            <h4 className=\"text-white text-lg font-semibold mb-6\">\n              Helpful Links\n            </h4>\n\n            <ul className=\"space-y-3\">\n              <li>\n                <a href=\"#\" className=\"hover:text-[#3ca2fa] transition-colors\">\n                  FAQs\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" className=\"hover:text-[#3ca2fa] transition-colors\">\n                  Support\n                </a>\n              </li>\n\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"hover:text-[#3ca2fa] transition-colors relative\"\n                >\n                  Live Chat\n                  <span className=\"absolute top-0 right-[-10px] w-2 h-2 rounded-full bg-[#3ca2fa] animate-pulse\"></span>\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          {/* Section 4: Contact Us */}\n\n          <div>\n            <h4 className=\"text-white text-lg font-semibold mb-6\">\n              Contact Us\n            </h4>\n\n            <ul className=\"space-y-4\">\n              <li className=\"flex items-center space-x-3\">\n                <Mail size={18} className=\"text-[#3ca2fa]\" />\n\n                <a\n                  href=\"mailto:[email protected]\"\n                  className=\"hover:text-[#3ca2fa] transition-colors\"\n                >\n                  [email protected]\n                </a>\n              </li>\n\n              <li className=\"flex items-center space-x-3\">\n                <Phone size={18} className=\"text-[#3ca2fa]\" />\n\n                <a\n                  href=\"tel:+918637373116\"\n                  className=\"hover:text-[#3ca2fa] transition-colors\"\n                >\n                  +91 86373 73116\n                </a>\n              </li>\n\n              <li className=\"flex items-center space-x-3\">\n                <MapPin size={18} className=\"text-[#3ca2fa]\" />\n\n                <span className=\"hover:text-[#3ca2fa] transition-colors\">\n                  Sylhet, Bangladesh\n                </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        {/* Separator line */}\n\n        <hr className=\"border-t border-gray-700 my-8\" />\n\n        {/* Bottom section: social media and copyright */}\n\n        <div className=\"flex flex-col md:flex-row justify-between items-center text-sm space-y-4 md:space-y-0\">\n          {/* Social Media Icons */}\n\n          <div className=\"flex space-x-6 text-gray-400\">\n            <a\n              href=\"#\"\n              aria-label=\"Facebook\"\n              className=\"hover:text-[#3ca2fa] transition-colors relative\"\n            >\n              <Facebook size={20} />\n            </a>\n\n            <a\n              href=\"#\"\n              aria-label=\"Instagram\"\n              className=\"hover:text-[#3ca2fa] transition-colors\"\n            >\n              <Instagram size={20} />\n            </a>\n\n            <a\n              href=\"#\"\n              aria-label=\"Twitter\"\n              className=\"hover:text-[#3ca2fa] transition-colors\"\n            >\n              <Twitter size={20} />\n            </a>\n\n            <a\n              href=\"#\"\n              aria-label=\"Dribbble\"\n              className=\"hover:text-[#3ca2fa] transition-colors\"\n            >\n              <Dribbble size={20} />\n            </a>\n\n            <a\n              href=\"#\"\n              aria-label=\"Globe\"\n              className=\"hover:text-[#3ca2fa] transition-colors\"\n            >\n              <Globe size={20} />\n            </a>\n          </div>\n\n          {/* Copyright text */}\n\n          <div className=\"text-center md:text-left\">\n            <p>&copy; 2025 Nurui. All rights reserved.</p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"lg:flex hidden h-[30rem] -mt-52 -mb-36\">\n        <TextHoverEffect text=\"Nurui\" className=\"z-50\" />\n      </div>\n\n      <FooterBackgroundGradient />\n    </footer>\n  );\n}\n\nexport default HoverFooter;\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "./src/components/nurui/text-hover-effect.tsx",
+      "content": "\"use client\";\nimport React, { useRef, useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const TextHoverEffect = ({\n  text,\n  duration,\n  className,\n}: {\n  text: string;\n  duration?: number;\n  automatic?: boolean;\n  className?: string;\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const [cursor, setCursor] = useState({ x: 0, y: 0 });\n  const [hovered, setHovered] = useState(false);\n  const [maskPosition, setMaskPosition] = useState({ cx: \"50%\", cy: \"50%\" });\n\n  useEffect(() => {\n    if (svgRef.current && cursor.x !== null && cursor.y !== null) {\n      const svgRect = svgRef.current.getBoundingClientRect();\n      const cxPercentage = ((cursor.x - svgRect.left) / svgRect.width) * 100;\n      const cyPercentage = ((cursor.y - svgRect.top) / svgRect.height) * 100;\n      setMaskPosition({\n        cx: `${cxPercentage}%`,\n        cy: `${cyPercentage}%`,\n      });\n    }\n  }, [cursor]);\n\n  return (\n    <svg\n      ref={svgRef}\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 300 100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onMouseMove={(e) => setCursor({ x: e.clientX, y: e.clientY })}\n      className={cn(\"select-none uppercase cursor-pointer\", className)}\n    >\n      <defs>\n        <linearGradient\n          id=\"textGradient\"\n          gradientUnits=\"userSpaceOnUse\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"25%\"\n        >\n          {hovered && (\n            <>\n              <stop offset=\"0%\" stopColor=\"#eab308\" />\n              <stop offset=\"25%\" stopColor=\"#ef4444\" />\n              <stop offset=\"50%\" stopColor=\"#80eeb4\" />\n              <stop offset=\"75%\" stopColor=\"#06b6d4\" />\n              <stop offset=\"100%\" stopColor=\"#8b5cf6\" />\n            </>\n          )}\n        </linearGradient>\n\n        <motion.radialGradient\n          id=\"revealMask\"\n          gradientUnits=\"userSpaceOnUse\"\n          r=\"20%\"\n          initial={{ cx: \"50%\", cy: \"50%\" }}\n          animate={maskPosition}\n          transition={{ duration: duration ?? 0, ease: \"easeOut\" }}\n        >\n          <stop offset=\"0%\" stopColor=\"white\" />\n          <stop offset=\"100%\" stopColor=\"black\" />\n        </motion.radialGradient>\n        <mask id=\"textMask\">\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            fill=\"url(#revealMask)\"\n          />\n        </mask>\n      </defs>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        strokeWidth=\"0.3\"\n        className=\"fill-transparent stroke-neutral-200 font-[helvetica] text-7xl font-bold dark:stroke-neutral-800\"\n        style={{ opacity: hovered ? 0.7 : 0 }}\n      >\n        {text}\n      </text>\n      <motion.text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        strokeWidth=\"0.3\"\n        className=\"fill-transparent stroke-[#3ca2fa] font-[helvetica] text-7xl font-bold \n        dark:stroke-[#3ca2fa99]\"\n        initial={{ strokeDashoffset: 1000, strokeDasharray: 1000 }}\n        animate={{\n          strokeDashoffset: 0,\n          strokeDasharray: 1000,\n        }}\n        transition={{\n          duration: 4,\n          ease: \"easeInOut\",\n        }}\n      >\n        {text}\n      </motion.text>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        stroke=\"url(#textGradient)\"\n        strokeWidth=\"0.3\"\n        mask=\"url(#textMask)\"\n        className=\"fill-transparent font-[helvetica] text-7xl font-bold\"\n      >\n        {text}\n      </text>\n    </svg>\n  );\n};\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "./src/components/nurui/footer-background-gradient.tsx",
+      "content": "import React from \"react\";\n\nconst FooterBackgroundGradient = () => {\n  return (\n    <div\n      className=\"absolute inset-0 z-0\"\n      style={{\n        background:\n          \"radial-gradient(125% 125% at 50% 10%, #0F0F1166 50%, #3ca2fa33 100%)\",\n      }}\n    />\n  );\n};\n\nexport default FooterBackgroundGradient;\n",
+      "type": "registry:component"
+    }
+  ]
+}

registry-cli.json

@@ -113,6 +113,23 @@
         }
       ]
     },
+    {
+      "name": "hover-footer",
+      "type": "registry:component",
+      "devDependencies": [],
+      "dependencies": ["lucide-react", "motion"],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "./src/components/nurui/text-hover-effect.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "./src/components/nurui/footer-background-gradient.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
 
     {
       "name": "project-showcase",

registry.json

@@ -152,6 +152,28 @@
       ]
     },
 
+    {
+      "name": "hover-footer",
+      "type": "registry:component",
+      "devDependencies": [],
+      "dependencies": ["clsx", "tailwind-merge", "lucide-react", "motion"],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "./src/components/nurui/hover-footer.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "./src/components/nurui/text-hover-effect.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "./src/components/nurui/footer-background-gradient.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+
     {
       "name": "project-showcase",
       "type": "registry:component",

src/app/preview/[component]/components-preview-registry.tsx

@@ -42,6 +42,10 @@ export const componentsPreviewRegistry: Record<
   "future-navbar": {
     component: dynamic(() => import("@/components/nurui/futrue-navbar")),
   },
+  // footer
+  "hover-footer": {
+    component: dynamic(() => import("@/components/nurui/hover-footer")),
+  },
   // components
   "project-showcase": {
     component: dynamic(

src/components/nurui/footer-background-gradient.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const FooterBackgroundGradient = () => {
+  return (
+    <div
+      className="absolute inset-0 z-0"
+      style={{
+        background:
+          "radial-gradient(125% 125% at 50% 10%, #0F0F1166 50%, #3ca2fa33 100%)",
+      }}
+    />
+  );
+};
+
+export default FooterBackgroundGradient;

src/components/nurui/hover-footer.tsx

@@ -0,0 +1,211 @@
+import React from "react";
+import {
+  Mail,
+  Phone,
+  MapPin,
+  Facebook,
+  Instagram,
+  Twitter,
+  Dribbble,
+  Globe,
+} from "lucide-react";
+import FooterBackgroundGradient from "./footer-background-gradient";
+import { TextHoverEffect } from "./text-hover-effect";
+
+function HoverFooter() {
+  return (
+    <footer className="bg-[#0F0F11]/10 relative h-fit rounded-3xl overflow-hidden m-8">
+      <div className="max-w-7xl mx-auto p-14 z-40 relative">
+        {/* Main grid for the footer content */}
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 md:gap-8 lg:gap-16 pb-12">
+          {/* Section 1: Pollen brand and description */}
+
+          <div className="flex flex-col space-y-4">
+            <div className="flex items-center space-x-2">
+              <span className="text-[#3ca2fa] text-3xl font-extrabold">
+                &hearts;
+              </span>
+
+              <span className="text-white text-3xl font-bold">Nur/ui</span>
+            </div>
+
+            <p className="text-sm leading-relaxed">
+              Nur UI is a modern React and Next.js based UI component library.
+            </p>
+          </div>
+
+          {/* Section 2: About Us links */}
+
+          <div>
+            <h4 className="text-white text-lg font-semibold mb-6">About Us</h4>
+
+            <ul className="space-y-3">
+              <li>
+                <a href="#" className="hover:text-[#3ca2fa] transition-colors">
+                  Company History
+                </a>
+              </li>
+
+              <li>
+                <a href="#" className="hover:text-[#3ca2fa] transition-colors">
+                  Meet the Team
+                </a>
+              </li>
+
+              <li>
+                <a href="#" className="hover:text-[#3ca2fa] transition-colors">
+                  Employee Handbook
+                </a>
+              </li>
+
+              <li>
+                <a href="#" className="hover:text-[#3ca2fa] transition-colors">
+                  Careers
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Section 3: Helpful Links */}
+
+          <div>
+            <h4 className="text-white text-lg font-semibold mb-6">
+              Helpful Links
+            </h4>
+
+            <ul className="space-y-3">
+              <li>
+                <a href="#" className="hover:text-[#3ca2fa] transition-colors">
+                  FAQs
+                </a>
+              </li>
+
+              <li>
+                <a href="#" className="hover:text-[#3ca2fa] transition-colors">
+                  Support
+                </a>
+              </li>
+
+              <li>
+                <a
+                  href="#"
+                  className="hover:text-[#3ca2fa] transition-colors relative"
+                >
+                  Live Chat
+                  <span className="absolute top-0 right-[-10px] w-2 h-2 rounded-full bg-[#3ca2fa] animate-pulse"></span>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Section 4: Contact Us */}
+
+          <div>
+            <h4 className="text-white text-lg font-semibold mb-6">
+              Contact Us
+            </h4>
+
+            <ul className="space-y-4">
+              <li className="flex items-center space-x-3">
+                <Mail size={18} className="text-[#3ca2fa]" />
+
+                <a
+                  href="mailto:[email protected]"
+                  className="hover:text-[#3ca2fa] transition-colors"
+                >
+                  [email protected]
+                </a>
+              </li>
+
+              <li className="flex items-center space-x-3">
+                <Phone size={18} className="text-[#3ca2fa]" />
+
+                <a
+                  href="tel:+918637373116"
+                  className="hover:text-[#3ca2fa] transition-colors"
+                >
+                  +91 86373 73116
+                </a>
+              </li>
+
+              <li className="flex items-center space-x-3">
+                <MapPin size={18} className="text-[#3ca2fa]" />
+
+                <span className="hover:text-[#3ca2fa] transition-colors">
+                  Sylhet, Bangladesh
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Separator line */}
+
+        <hr className="border-t border-gray-700 my-8" />
+
+        {/* Bottom section: social media and copyright */}
+
+        <div className="flex flex-col md:flex-row justify-between items-center text-sm space-y-4 md:space-y-0">
+          {/* Social Media Icons */}
+
+          <div className="flex space-x-6 text-gray-400">
+            <a
+              href="#"
+              aria-label="Facebook"
+              className="hover:text-[#3ca2fa] transition-colors relative"
+            >
+              <Facebook size={20} />
+            </a>
+
+            <a
+              href="#"
+              aria-label="Instagram"
+              className="hover:text-[#3ca2fa] transition-colors"
+            >
+              <Instagram size={20} />
+            </a>
+
+            <a
+              href="#"
+              aria-label="Twitter"
+              className="hover:text-[#3ca2fa] transition-colors"
+            >
+              <Twitter size={20} />
+            </a>
+
+            <a
+              href="#"
+              aria-label="Dribbble"
+              className="hover:text-[#3ca2fa] transition-colors"
+            >
+              <Dribbble size={20} />
+            </a>
+
+            <a
+              href="#"
+              aria-label="Globe"
+              className="hover:text-[#3ca2fa] transition-colors"
+            >
+              <Globe size={20} />
+            </a>
+          </div>
+
+          {/* Copyright text */}
+
+          <div className="text-center md:text-left">
+            <p>&copy; 2025 Nurui. All rights reserved.</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="lg:flex hidden h-[30rem] -mt-52 -mb-36">
+        <TextHoverEffect text="Nurui" className="z-50" />
+      </div>
+
+      <FooterBackgroundGradient />
+    </footer>
+  );
+}
+
+export default HoverFooter;