@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/components/navBars/navbar.tsx

@@ -1,311 +1,311 @@
-"use client";
-
-import Link from "next/link";
-import Image from "next/image";
-import { cn } from "@/lib/utils";
-import { usePathname } from "next/navigation";
-import { useState, useRef, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { Facebook } from "lucide-react";
-
-const Navbar = () => {
-  const pathname = usePathname();
-  const [isOpen, setIsOpen] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const menuRef = useRef(null);
-
-  const leftLinks = [
-    { href: "/", label: "Home" },
-    { href: "/about", label: "About" },
-    { href: "/contact", label: "Contact" },
-  ];
-
-  const rightLinks = [
-    { href: "/gallery", label: "Gallery" },
-    { href: "/schedule", label: "Schedule & Rates" },
-    //testing
-  ];
-
-  const mobileLinks = [
-    ...leftLinks,
-    ...rightLinks,
-    { href: "/faq", label: "FAQ" },
-  ];
-
-  const menuVariants = {
-    closed: { x: "100%" },
-    open: {
-      x: 0,
-      transition: { type: "spring", stiffness: 100, damping: 20 },
-    },
-  };
-
-  const hamburgerLine = `h-1 w-8 transition-all duration-300 ease-in-out`;
-
-  useEffect(() => {
-    const handleModalStateChange = (e: Event) => {
-      const customEvent = e as CustomEvent<{ isOpen: boolean }>;
-      setIsModalOpen(customEvent.detail.isOpen);
-    };
-
-    window.addEventListener("modalStateChange", handleModalStateChange);
-
-    return () => {
-      window.removeEventListener("modalStateChange", handleModalStateChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        menuRef.current &&
-        !(menuRef.current as HTMLElement).contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-
-  return (
-    <nav
-      className="fixed top-0 z-[1100] w-full bg-[#2D2D2D]/80 border-b-2 border-gray-800/50 shadow-lg py-6 transition-transform duration-300 ease-in-out"
-      style={{
-        transform: isModalOpen && !isOpen ? "translateY(-100%)" : "translateY(0)",
-      }}
-    >
-      <style jsx>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #F7F7F7;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --exuberant-blue: #FF69B4;
-        }
-
-        * {
-          font-family: "Inter", sans-serif;
-        }
-
-        .gradient-text {
-          background: linear-gradient(90deg, var(--jubilee), --exuberant-blue));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-        }
-
-        @media (max-width: 360px) {
-          .mobile-menu-link {
-            font-size: 1.25rem;
-          }
-          .mobile-menu-button {
-            font-size: 1rem;
-            padding: 0.5rem 1rem;
-          }
-        }
-      `}</style>
-
-      <div className="w-full px-8 relative">
-        {/* Desktop View */}
-        <div className="hidden 2xl:flex h-28 items-center justify-center gap-8">
-          <div className="flex items-center space-x-4">
-            {leftLinks.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className={cn(
-                  "relative text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all duration-300 px-4",
-                  pathname === link.href
-                    ? "text-white"
-                    : "text-gray-300 hover:text-blue-400 hover:scale-105",
-                  "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
-                  pathname === link.href
-                    ? "after:w-full"
-                    : "after:w-0 hover:after:w-full"
-                )}
-              >
-                {link.label}
-              </Link>
-            ))}
-          </div>
-
-          <Link href="/" className="flex items-center relative group">
-            <Image
-              src="/images/test.png"
-              alt="DevVista Kit Logo"
-              width={192}
-              height={192}
-              className="h-40 w-40 rounded-full transition-transform group-hover:scale-110 shadow-2xl"
-            />
-            <div className="absolute -inset-4 bg-blue-500/30 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
-          </Link>
-
-          <div className="flex items-center space-x-4">
-            {rightLinks.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className={cn(
-                  "relative text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all duration-300 px-4",
-                  pathname === link.href
-                    ? "text-white"
-                    : "text-gray-300 hover:text-blue-400 hover:scale-105",
-                  "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
-                  pathname === link.href
-                    ? "after:w-full"
-                    : "after:w-0 hover:after:w-full"
-                )}
-              >
-                {link.label}
-              </Link>
-            ))}
-          </div>
-        </div>
-
-        {/* Mobile View */}
-        <div className="2xl:hidden flex h-20 items-center justify-between">
-          <Link href="/" className="flex items-center relative group">
-            <Image
-              src="/images/test.png"
-              alt="DevVista Kit Logo"
-              width={120}
-              height={120}
-              className="h-30 w-30 rounded-full transition-transform group-hover:scale-110 shadow-2xl"
-            />
-            <div className="absolute -inset-4 bg-gray-500/30 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
-          </Link>
-
-          <button
-            className="flex flex-col space-y-2 p-4 relative z-[1200]"
-            onClick={() => setIsOpen(!isOpen)}
-            aria-label="Toggle menu"
-          >
-            <span
-              className={cn(
-                hamburgerLine,
-                isOpen ? "rotate-45 translate-y-3 bg-white" : "bg-blue-500"
-              )}
-            />
-            <span
-              className={cn(hamburgerLine, isOpen ? "opacity-0" : "bg-blue-500")}
-            />
-            <span
-              className={cn(
-                hamburgerLine,
-                isOpen ? "-rotate-45 -translate-y-3 bg-white" : "bg-blue-500"
-              )}
-            />
-          </button>
-        </div>
-
-        {/* Social Links */}
-        <div className="absolute bottom-4 right-8 flex items-center space-x-6 pr-16">
-          <a
-            href="https://www.facebook.com/"
-            className="flex items-center justify-center text-gray-300 hover:text-blue-400 transition-all text-lg sm:text-xl font-bold uppercase hover:scale-105"
-            aria-label="Visit our Facebook page"
-            role="link"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Facebook className="ml-3 h-6 w-6 max-[1535px]:hidden" />
-          </a>
-          <div className="hidden 2xl:block">
-            <Link
-              href="/faq"
-              className={cn(
-                "relative text-lg sm:text-xl font-bold uppercase tracking-wider transition-all",
-                pathname === "/faq"
-                  ? "text-white"
-                  : "text-gray-300 hover:text-blue-400 hover:scale-105",
-                "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
-                pathname === "/faq"
-                  ? "after:w-full"
-                  : "after:w-0 hover:after:w-full"
-              )}
-            >
-              FAQ
-            </Link>
-          </div>
-        </div>
-
-        {/* Mobile Menu */}
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              ref={menuRef}
-              variants={menuVariants}
-              initial="closed"
-              animate="open"
-              exit="closed"
-              className="fixed top-0 right-0 h-screen w-3/4 max-w-[280px] min-w-[200px] 2xl:hidden pt-24 px-4 shadow-2xl border-l-2 border-gray-700 bg-[#2D2D2D] z-[1200] overflow-y-auto"
-            >
-              <button
-                className="absolute top-6 right-6 text-gray-300 hover:text-blue-400 transition-all z-[1210]"
-                onClick={() => setIsOpen(false)}
-                aria-label="Close menu"
-              >
-                <svg
-                  className="w-8 h-8"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-
-              <div className="flex flex-col space-y-6">
-                {mobileLinks.map((link) => (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                    onClick={() => setIsOpen(false)}
-                    className={cn(
-                      "text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all mobile-menu-link",
-                      pathname === link.href
-                        ? "text-white"
-                        : "text-gray-300 hover:text-blue-400 hover:scale-105"
-                    )}
-                  >
-                    {link.label}
-                  </Link>
-                ))}
-                <Link
-                  href="https://www.facebook.com/"
-                  className="text-xl sm:text-2xl font-extrabold uppercase tracking-wider text-gray-300 hover:text-blue-400 transition-all hover:scale-105 mobile-menu-link"
-                  aria-label="Visit our Facebook page"
-                  role="link"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={() => setIsOpen(false)}
-                >
-                  Facebook
-                </Link>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </nav>
-  );
-};
-
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+import { usePathname } from "next/navigation";
+import { useState, useRef, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Facebook } from "lucide-react";
+
+const Navbar = () => {
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  const leftLinks = [
+    { href: "/", label: "Home" },
+    { href: "/about", label: "About" },
+    { href: "/contact", label: "Contact" },
+  ];
+
+  const rightLinks = [
+    { href: "/gallery", label: "Gallery" },
+    { href: "/schedule", label: "Schedule & Rates" },
+    //testing
+  ];
+
+  const mobileLinks = [
+    ...leftLinks,
+    ...rightLinks,
+    { href: "/faq", label: "FAQ" },
+  ];
+
+  const menuVariants = {
+    closed: { x: "100%" },
+    open: {
+      x: 0,
+      transition: { type: "spring", stiffness: 100, damping: 20 },
+    },
+  };
+
+  const hamburgerLine = `h-1 w-8 transition-all duration-300 ease-in-out`;
+
+  useEffect(() => {
+    const handleModalStateChange = (e: Event) => {
+      const customEvent = e as CustomEvent<{ isOpen: boolean }>;
+      setIsModalOpen(customEvent.detail.isOpen);
+    };
+
+    window.addEventListener("modalStateChange", handleModalStateChange);
+
+    return () => {
+      window.removeEventListener("modalStateChange", handleModalStateChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        !(menuRef.current as HTMLElement).contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <nav
+      className="fixed top-0 z-[1100] w-full bg-[#2D2D2D]/80 border-b-2 border-gray-800/50 shadow-lg py-6 transition-transform duration-300 ease-in-out"
+      style={{
+        transform: isModalOpen && !isOpen ? "translateY(-100%)" : "translateY(0)",
+      }}
+    >
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF69B4;
+        }
+
+        * {
+          font-family: "Inter", sans-serif;
+        }
+
+        .gradient-text {
+          background: linear-gradient(90deg, var(--jubilee), --exuberant-blue));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+
+        @media (max-width: 360px) {
+          .mobile-menu-link {
+            font-size: 1.25rem;
+          }
+          .mobile-menu-button {
+            font-size: 1rem;
+            padding: 0.5rem 1rem;
+          }
+        }
+      `}</style>
+
+      <div className="w-full px-8 relative">
+        {/* Desktop View */}
+        <div className="hidden 2xl:flex h-28 items-center justify-center gap-8">
+          <div className="flex items-center space-x-4">
+            {leftLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "relative text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all duration-300 px-4",
+                  pathname === link.href
+                    ? "text-white"
+                    : "text-gray-300 hover:text-blue-400 hover:scale-105",
+                  "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
+                  pathname === link.href
+                    ? "after:w-full"
+                    : "after:w-0 hover:after:w-full"
+                )}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          <Link href="/" className="flex items-center relative group">
+            <Image
+              src="/images/test.png"
+              alt="DevVista Kit Logo"
+              width={192}
+              height={192}
+              className="h-40 w-40 rounded-full transition-transform group-hover:scale-110 shadow-2xl"
+            />
+            <div className="absolute -inset-4 bg-blue-500/30 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
+          </Link>
+
+          <div className="flex items-center space-x-4">
+            {rightLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "relative text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all duration-300 px-4",
+                  pathname === link.href
+                    ? "text-white"
+                    : "text-gray-300 hover:text-blue-400 hover:scale-105",
+                  "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
+                  pathname === link.href
+                    ? "after:w-full"
+                    : "after:w-0 hover:after:w-full"
+                )}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Mobile View */}
+        <div className="2xl:hidden flex h-20 items-center justify-between">
+          <Link href="/" className="flex items-center relative group">
+            <Image
+              src="/images/test.png"
+              alt="DevVista Kit Logo"
+              width={120}
+              height={120}
+              className="h-30 w-30 rounded-full transition-transform group-hover:scale-110 shadow-2xl"
+            />
+            <div className="absolute -inset-4 bg-gray-500/30 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
+          </Link>
+
+          <button
+            className="flex flex-col space-y-2 p-4 relative z-[1200]"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle menu"
+          >
+            <span
+              className={cn(
+                hamburgerLine,
+                isOpen ? "rotate-45 translate-y-3 bg-white" : "bg-blue-500"
+              )}
+            />
+            <span
+              className={cn(hamburgerLine, isOpen ? "opacity-0" : "bg-blue-500")}
+            />
+            <span
+              className={cn(
+                hamburgerLine,
+                isOpen ? "-rotate-45 -translate-y-3 bg-white" : "bg-blue-500"
+              )}
+            />
+          </button>
+        </div>
+
+        {/* Social Links */}
+        <div className="absolute bottom-4 right-8 flex items-center space-x-6 pr-16">
+          <a
+            href="https://www.facebook.com/"
+            className="flex items-center justify-center text-gray-300 hover:text-blue-400 transition-all text-lg sm:text-xl font-bold uppercase hover:scale-105"
+            aria-label="Visit our Facebook page"
+            role="link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Facebook className="ml-3 h-6 w-6 max-[1535px]:hidden" />
+          </a>
+          <div className="hidden 2xl:block">
+            <Link
+              href="/faq"
+              className={cn(
+                "relative text-lg sm:text-xl font-bold uppercase tracking-wider transition-all",
+                pathname === "/faq"
+                  ? "text-white"
+                  : "text-gray-300 hover:text-blue-400 hover:scale-105",
+                "after:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-300",
+                pathname === "/faq"
+                  ? "after:w-full"
+                  : "after:w-0 hover:after:w-full"
+              )}
+            >
+              FAQ
+            </Link>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              ref={menuRef}
+              variants={menuVariants}
+              initial="closed"
+              animate="open"
+              exit="closed"
+              className="fixed top-0 right-0 h-screen w-3/4 max-w-[280px] min-w-[200px] 2xl:hidden pt-24 px-4 shadow-2xl border-l-2 border-gray-700 bg-[#2D2D2D] z-[1200] overflow-y-auto"
+            >
+              <button
+                className="absolute top-6 right-6 text-gray-300 hover:text-blue-400 transition-all z-[1210]"
+                onClick={() => setIsOpen(false)}
+                aria-label="Close menu"
+              >
+                <svg
+                  className="w-8 h-8"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+
+              <div className="flex flex-col space-y-6">
+                {mobileLinks.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setIsOpen(false)}
+                    className={cn(
+                      "text-xl sm:text-2xl font-extrabold uppercase tracking-wider transition-all mobile-menu-link",
+                      pathname === link.href
+                        ? "text-white"
+                        : "text-gray-300 hover:text-blue-400 hover:scale-105"
+                    )}
+                  >
+                    {link.label}
+                  </Link>
+                ))}
+                <Link
+                  href="https://www.facebook.com/"
+                  className="text-xl sm:text-2xl font-extrabold uppercase tracking-wider text-gray-300 hover:text-blue-400 transition-all hover:scale-105 mobile-menu-link"
+                  aria-label="Visit our Facebook page"
+                  role="link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => setIsOpen(false)}
+                >
+                  Facebook
+                </Link>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </nav>
+  );
+};
+
 export default Navbar;