aura-ui-library 1.0.24 → 1.0.26

package/dist/index.js

@@ -257,569 +257,355 @@ var import_react_router_dom2 = require("react-router-dom");
 var import_gsap2 = require("gsap");
 var import_fi = require("react-icons/fi");
 var Navbar = ({
-  logoText = "Aura",
+  logoText = "AURA",
   links = [
+    { label: "Home", path: "/" },
     { label: "Products", path: "/products" },
-    { label: "Solutions", path: "/solutions" },
-    { label: "Resources", path: "/resources" },
+    { label: "Workspace", path: "/workspace" },
     { label: "Pricing", path: "/pricing" }
   ],
+  socials = [
+    { label: "Twitter", icon: /* @__PURE__ */ import_react2.default.createElement(import_fi.FiTwitter, null), path: "#" },
+    { label: "GitHub", icon: /* @__PURE__ */ import_react2.default.createElement(import_fi.FiGithub, null), path: "#" },
+    { label: "LinkedIn", icon: /* @__PURE__ */ import_react2.default.createElement(import_fi.FiLinkedin, null), path: "#" }
+  ],
+  contact = {
+    title: "Get in touch",
+    email: "hello@aura-ui.dev",
+    address: "123 Innovation Drive, SF"
+  },
   accentColor = "#6366f1",
-  theme = "light",
+  theme = "dark",
   // "dark" | "light"
   style = {},
-  height = "80px",
-  animationDuration = 1.6,
-  easing = "expo.out"
+  animationDuration = 1.2,
+  easing = "expo.inOut"
 }) => {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [isScrolled, setIsScrolled] = (0, import_react2.useState)(false);
   const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react2.useState)(false);
-  const [activeDropdown, setActiveDropdown] = (0, import_react2.useState)(null);
-  const navRef = (0, import_react2.useRef)(null);
-  const logoRef = (0, import_react2.useRef)(null);
-  const linksRef = (0, import_react2.useRef)([]);
-  const buttonRef = (0, import_react2.useRef)(null);
-  const menuOverlayRef = (0, import_react2.useRef)(null);
-  const containerRef = (0, import_react2.useRef)(null);
-  const menuButtonRef = (0, import_react2.useRef)(null);
-  const firstMobileLinkRef = (0, import_react2.useRef)(null);
+  const [hoverIndex, setHoverIndex] = (0, import_react2.useState)(null);
   const inRouter = (0, import_react_router_dom2.useInRouterContext)();
   const navigate = inRouter ? (0, import_react_router_dom2.useNavigate)() : null;
+  const location = inRouter ? (0, import_react_router_dom2.useLocation)() : { pathname: "/" };
+  const overlayRef = (0, import_react2.useRef)(null);
+  const linksContainerRef = (0, import_react2.useRef)(null);
+  const infoContainerRef = (0, import_react2.useRef)(null);
   const isLight2 = theme === "light";
-  const navBg = isLight2 ? "rgba(255, 255, 255, 0.8)" : "rgba(10, 10, 10, 0.7)";
-  const navText = isLight2 ? "#1e293b" : "#e2e8f0";
-  const navPrimary = isLight2 ? "#0f172a" : "#ffffff";
-  const navBorder = isLight2 ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.06)";
-  const mobileMenuBg = isLight2 ? "#ffffff" : "#0f0f0f";
+  const bgMain = isLight2 ? "#ffffff" : "#050505";
+  const textMain = isLight2 ? "#0f172a" : "#ffffff";
+  const textMuted = isLight2 ? "rgba(15, 23, 42, 0.5)" : "rgba(255, 255, 255, 0.4)";
+  const borderCol = isLight2 ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.08)";
+  const headerBg = isLight2 ? "rgba(255, 255, 255, 0.85)" : "rgba(5, 5, 5, 0.85)";
+  const headerShadow = isLight2 ? "0 4px 30px rgba(0,0,0,0.05)" : "0 4px 30px rgba(0,0,0,0.3)";
   const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   (0, import_react2.useEffect)(() => {
-    const handleResize = () => {
-      const mobile = window.innerWidth <= 1024;
-      setIsMobile(mobile);
-      if (!mobile && isMenuOpen) setIsMenuOpen(false);
-    };
+    const handleResize = () => setIsMobile(window.innerWidth < 1024);
+    const handleScroll = () => setIsScrolled(window.scrollY > 50);
     handleResize();
     window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [isMenuOpen]);
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
   (0, import_react2.useEffect)(() => {
-    const ctx = import_gsap2.gsap.context(() => {
-      const tl = import_gsap2.gsap.timeline({
-        defaults: {
-          ease: easing,
-          duration: prefersReducedMotion ? 0.01 : animationDuration
-        }
+    if (prefersReducedMotion) return;
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      const tl = import_gsap2.gsap.timeline();
+      tl.to(overlayRef.current, {
+        clipPath: "circle(150% at 95% 40px)",
+        pointerEvents: "auto",
+        duration: animationDuration,
+        ease: easing
       });
-      tl.fromTo(
-        navRef.current,
-        { yPercent: -100, opacity: 0 },
-        {
-          yPercent: 0,
-          opacity: 1,
-          duration: prefersReducedMotion ? 0.01 : 1.2
-        }
-      ).fromTo(
-        logoRef.current,
-        { x: -30, opacity: 0, filter: "blur(5px)" },
-        { x: 0, opacity: 1, filter: "blur(0px)" },
-        "-=0.9"
-      );
-      if (!isMobile) {
+      if (linksContainerRef.current) {
         tl.fromTo(
-          linksRef.current,
-          { y: 20, opacity: 0, rotateX: -20, transformPerspective: 500 },
-          {
-            y: 0,
-            opacity: 1,
-            rotateX: 0,
-            stagger: 0.08,
-            duration: prefersReducedMotion ? 0.01 : 1
-          },
-          "-=1.1"
-        ).fromTo(
-          buttonRef.current,
-          { scale: 0.9, opacity: 0, filter: "blur(5px)" },
-          {
-            scale: 1,
-            opacity: 1,
-            filter: "blur(0px)",
-            duration: prefersReducedMotion ? 0.01 : 1,
-            ease: "elastic.out(1, 0.5)"
-          },
-          "-=0.9"
+          linksContainerRef.current.children,
+          { y: 60, opacity: 0, rotateX: -15, transformPerspective: 800 },
+          { y: 0, opacity: 1, rotateX: 0, stagger: 0.08, duration: 1, ease: "power3.out" },
+          "-=0.8"
         );
       }
-    }, containerRef);
-    return () => ctx.revert();
-  }, [easing, animationDuration, isMobile, prefersReducedMotion]);
-  (0, import_react2.useEffect)(() => {
-    if (isMobile && menuOverlayRef.current) {
-      if (isMenuOpen) {
-        import_gsap2.gsap.fromTo(
-          menuOverlayRef.current,
-          { clipPath: "circle(0% at 100% 0%)", opacity: 0 },
-          {
-            clipPath: "circle(150% at 100% 0%)",
-            opacity: 1,
-            duration: prefersReducedMotion ? 0.01 : 0.8,
-            ease: "expo.inOut"
-          }
-        );
-        const mmLinks = menuOverlayRef.current.querySelectorAll(".mobile-link");
-        import_gsap2.gsap.fromTo(
-          mmLinks,
-          { y: 40, opacity: 0 },
-          {
-            y: 0,
-            opacity: 1,
-            stagger: 0.1,
-            duration: prefersReducedMotion ? 0.01 : 0.6,
-            ease: "power3.out",
-            delay: prefersReducedMotion ? 0 : 0.3
-          }
+      if (infoContainerRef.current) {
+        tl.fromTo(
+          infoContainerRef.current.children,
+          { opacity: 0, x: 20 },
+          { opacity: 1, x: 0, stagger: 0.1, duration: 0.8, ease: "power2.out" },
+          "-=0.9"
         );
-      } else {
-        import_gsap2.gsap.to(menuOverlayRef.current, {
-          clipPath: "circle(0% at 100% 0%)",
-          opacity: 0,
-          duration: prefersReducedMotion ? 0.01 : 0.6,
-          ease: "expo.inOut"
-        });
       }
+    } else {
+      document.body.style.overflow = "";
+      const tl = import_gsap2.gsap.timeline();
+      tl.to(overlayRef.current, {
+        clipPath: "circle(0% at 95% 40px)",
+        pointerEvents: "none",
+        duration: animationDuration * 0.7,
+        ease: "expo.inOut"
+      });
     }
-  }, [isMenuOpen, isMobile, prefersReducedMotion]);
-  (0, import_react2.useEffect)(() => {
-    if (!isMobile) return;
-    const onKeyDown = (event) => {
-      var _a;
-      if (event.key === "Escape" && isMenuOpen) {
-        setIsMenuOpen(false);
-        (_a = menuButtonRef.current) == null ? void 0 : _a.focus();
-      }
+    return () => {
+      document.body.style.overflow = "";
     };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [isMobile, isMenuOpen]);
-  (0, import_react2.useEffect)(() => {
-    var _a;
-    if (isMenuOpen) {
-      (_a = firstMobileLinkRef.current) == null ? void 0 : _a.focus();
+  }, [isOpen, animationDuration, easing, prefersReducedMotion]);
+  const handleNavigation = (path, e) => {
+    e.preventDefault();
+    if (location.pathname === path) {
+      setIsOpen(false);
+      return;
     }
-  }, [isMenuOpen]);
-  const handleMouseEnter = (e) => {
-    import_gsap2.gsap.to(e.currentTarget, {
-      scale: 1.05,
-      color: accentColor,
-      duration: 0.4,
-      ease: "power2.out"
-    });
-  };
-  const handleMouseMove = (e) => {
-    if (isMobile) return;
-    const { clientX, clientY, currentTarget } = e;
-    const { left, top, width, height: height2 } = currentTarget.getBoundingClientRect();
-    const x = (clientX - (left + width / 2)) * 0.4;
-    const y = (clientY - (top + height2 / 2)) * 0.4;
-    import_gsap2.gsap.to(currentTarget, {
-      x,
-      y,
-      duration: 0.5,
-      ease: "power3.out"
-    });
-  };
-  const handleMouseLeave = (e) => {
-    import_gsap2.gsap.to(e.currentTarget, {
-      x: 0,
-      y: 0,
-      scale: 1,
-      color: navText,
-      duration: 0.8,
-      ease: "elastic.out(1.2, 0.3)"
-    });
-  };
-  const handleButtonClick = (e) => {
-    import_gsap2.gsap.to(e.currentTarget, {
-      scale: 0.92,
-      duration: 0.15,
-      yoyo: true,
-      repeat: 1,
-      ease: "power1.inOut"
-    });
+    setIsOpen(false);
+    setTimeout(() => {
+      if (navigate) {
+        navigate(path);
+        window.scrollTo(0, 0);
+      } else {
+        window.location.href = path;
+      }
+    }, animationDuration * 0.7 * 1e3);
   };
   const styles = {
-    container: {
+    header: {
       position: "fixed",
       top: 0,
       left: 0,
       width: "100%",
-      height,
-      backgroundColor: navBg,
-      backdropFilter: "blur(20px)",
-      WebkitBackdropFilter: "blur(20px)",
       display: "flex",
-      alignItems: "center",
       justifyContent: "space-between",
-      padding: "0 4%",
+      alignItems: "center",
       zIndex: 1e3,
-      borderBottom: `1px solid ${navBorder}`,
-      boxSizing: "border-box",
       fontFamily: '"Inter", -apple-system, sans-serif',
-      transition: "background-color 0.4s ease, border-color 0.4s ease",
+      boxSizing: "border-box",
+      padding: isScrolled ? "15px 5%" : "30px 5%",
+      backgroundColor: isScrolled ? headerBg : "transparent",
+      backdropFilter: isScrolled ? "blur(20px)" : "none",
+      boxShadow: isScrolled ? headerShadow : "none",
+      transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
       ...style
     },
     logo: {
-      fontSize: "24px",
-      fontWeight: "900",
-      color: navPrimary,
-      textDecoration: "none",
-      letterSpacing: "-1px",
       display: "flex",
       alignItems: "center",
       gap: "10px",
-      cursor: "pointer"
+      fontSize: "22px",
+      fontWeight: "900",
+      letterSpacing: "1px",
+      textDecoration: "none",
+      color: isOpen ? textMain : textMain,
+      // Text logic handles contrast
+      zIndex: 1001,
+      cursor: "pointer",
+      mixBlendMode: isOpen ? "normal" : "difference",
+      // Only difference when closed over unpredictable content
+      willChange: "transform",
+      transition: "transform 0.3s ease"
     },
     logoDot: {
-      width: "10px",
-      height: "10px",
+      width: "8px",
+      height: "8px",
       borderRadius: "50%",
       backgroundColor: accentColor,
-      boxShadow: isLight2 ? `0 4px 10px ${accentColor}66` : `0 0 16px ${accentColor}`
-    },
-    navLinks: {
-      display: isMobile ? "none" : "flex",
-      gap: "36px",
-      alignItems: "center"
+      boxShadow: `0 0 15px ${accentColor}88`
     },
-    link: {
-      fontSize: "15px",
-      fontWeight: "600",
-      color: navText,
-      textDecoration: "none",
-      cursor: "pointer",
-      display: "inline-block",
+    hamburgerBtn: {
       position: "relative",
-      transformOrigin: "center"
-    },
-    actions: {
-      display: "flex",
-      alignItems: "center",
-      gap: "24px"
-    },
-    cta: {
-      padding: "12px 28px",
-      backgroundColor: navPrimary,
-      color: isLight2 ? "#ffffff" : "#000000",
-      borderRadius: "100px",
-      border: "none",
-      fontWeight: "700",
-      fontSize: "14px",
-      cursor: "pointer",
+      width: "48px",
+      height: "48px",
+      borderRadius: "50%",
+      backgroundColor: isOpen ? borderCol : "transparent",
       display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
       alignItems: "center",
-      gap: "8px",
-      boxShadow: isLight2 ? "0 8px 20px rgba(0,0,0,0.1)" : "0 8px 20px rgba(255,255,255,0.05)",
-      outline: "none",
-      willChange: "transform",
-      transition: "background-color 0.3s ease"
-    },
-    menuToggle: {
-      display: isMobile ? "flex" : "none",
-      width: "40px",
-      height: "40px",
+      gap: "6px",
       cursor: "pointer",
-      alignItems: "center",
-      justifyContent: "center",
       zIndex: 1001,
-      position: "relative"
+      border: `1px solid ${isOpen ? borderCol : "transparent"}`,
+      transition: "all 0.4s ease",
+      mixBlendMode: isOpen ? "normal" : "difference"
     },
-    hamburgerLine: {
-      position: "absolute",
-      width: "24px",
+    line: {
+      width: "22px",
       height: "2px",
-      backgroundColor: navPrimary,
-      transition: "all 0.4s cubic-bezier(0.19, 1, 0.22, 1)"
-    },
-    dropdown: {
-      position: "absolute",
-      top: "100%",
-      left: "50%",
-      transform: "translateX(-50%)",
-      backgroundColor: mobileMenuBg,
-      minWidth: "220px",
-      borderRadius: "16px",
-      padding: "12px",
-      border: `1px solid ${navBorder}`,
-      boxShadow: "0 20px 40px rgba(0,0,0,0.15)",
-      opacity: 0,
-      visibility: "hidden",
-      zIndex: 1100,
-      display: "flex",
-      flexDirection: "column",
-      gap: "4px"
-    },
-    dropdownItem: {
-      padding: "10px 16px",
-      borderRadius: "8px",
-      fontSize: "14px",
-      fontWeight: "500",
-      color: navText,
-      textDecoration: "none",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      transition: "background-color 0.2s ease, color 0.2s ease"
+      backgroundColor: isOpen ? textMain : textMain,
+      // In difference mode, white behaves properly
+      borderRadius: "2px",
+      transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
+      transformOrigin: "center"
     },
-    mobileOverlay: {
+    overlay: {
       position: "fixed",
       top: 0,
       left: 0,
       width: "100vw",
       height: "100vh",
-      backgroundColor: mobileMenuBg,
+      backgroundColor: bgMain,
       zIndex: 999,
+      clipPath: "circle(0% at 95% 40px)",
+      pointerEvents: "none",
+      display: "flex",
+      // Switch to flex for bulletproof layout
+      flexDirection: isMobile ? "column" : "row",
+      justifyContent: isMobile ? "flex-start" : "space-between",
+      alignItems: isMobile ? "flex-start" : "center",
+      padding: isMobile ? "120px 8% 60px" : "100px 10%",
+      boxSizing: "border-box",
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      overflowY: isMobile ? "auto" : "hidden"
+      // Allow scroll on mobile if items overflow
+    },
+    linksArea: {
       display: "flex",
       flexDirection: "column",
-      justifyContent: "center",
+      gap: "10px",
+      width: isMobile ? "100%" : "60%",
+      marginBottom: isMobile ? "60px" : "0"
+    },
+    linkItem: {
+      display: "flex",
       alignItems: "center",
+      gap: "20px",
+      textDecoration: "none",
+      padding: "10px 0",
+      cursor: "pointer",
+      willChange: "transform, opacity, color"
+    },
+    linkText: {
+      fontSize: "clamp(42px, 7vw, 100px)",
+      fontWeight: "900",
+      letterSpacing: "-2px",
+      textTransform: "uppercase",
+      lineHeight: "1"
+    },
+    infoArea: {
+      display: "flex",
+      flexDirection: "column",
       gap: "40px",
-      pointerEvents: isMenuOpen ? "auto" : "none"
+      width: isMobile ? "100%" : "30%",
+      paddingLeft: isMobile ? "0" : "5%",
+      borderLeft: isMobile ? "none" : `1px solid ${borderCol}`
+    },
+    infoBlock: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px"
+    },
+    infoLabel: {
+      fontSize: "12px",
+      textTransform: "uppercase",
+      letterSpacing: "2px",
+      fontWeight: "700",
+      color: accentColor
+    },
+    infoText: {
+      fontSize: "16px",
+      fontWeight: "500",
+      color: textMain,
+      lineHeight: "1.5"
+    },
+    socialGrid: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "12px"
+    },
+    socialLink: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "12px 20px",
+      borderRadius: "100px",
+      border: `1px solid ${borderCol}`,
+      color: textMain,
+      textDecoration: "none",
+      fontSize: "14px",
+      fontWeight: "600",
+      transition: "all 0.3s ease"
     }
   };
-  return /* @__PURE__ */ import_react2.default.createElement("div", { ref: containerRef }, /* @__PURE__ */ import_react2.default.createElement(
-    "nav",
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("header", { style: styles.header }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText), /* @__PURE__ */ import_react2.default.createElement(
+    "div",
     {
-      ref: navRef,
-      style: styles.container,
-      role: "navigation",
-      "aria-label": "Primary navigation"
-    },
-    /* @__PURE__ */ import_react2.default.createElement(
-      "div",
-      {
-        ref: logoRef,
-        style: styles.logo,
-        onMouseEnter: (e) => import_gsap2.gsap.to(e.currentTarget, {
-          scale: 1.05,
-          duration: 0.4,
-          ease: "back.out(1.5)"
-        }),
-        onMouseLeave: (e) => import_gsap2.gsap.to(e.currentTarget, {
-          scale: 1,
-          duration: 0.4,
-          ease: "power2.out"
-        })
-      },
-      inRouter ? /* @__PURE__ */ import_react2.default.createElement(import_react_router_dom2.Link, { to: "/", style: { ...styles.logo, color: "inherit" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText) : /* @__PURE__ */ import_react2.default.createElement("a", { href: "/", style: { ...styles.logo, color: "inherit" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText)
-    ),
-    /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.navLinks }, links.map((link, i) => {
-      const hasDropdown = link.children && link.children.length > 0;
-      const dropdownRef = (el) => linksRef.current[`drop-${i}`] = el;
-      const linkProps = {
-        ref: (el) => linksRef.current[i] = el,
-        onMouseEnter: (e) => {
-          handleMouseEnter(e);
-          if (hasDropdown) {
-            setActiveDropdown(i);
-            import_gsap2.gsap.to(linksRef.current[`drop-${i}`], {
-              opacity: 1,
-              visibility: "visible",
-              y: 10,
-              duration: 0.4,
-              ease: "expo.out"
-            });
-          }
-        },
-        onMouseMove: handleMouseMove,
-        onMouseLeave: (e) => {
-          handleMouseLeave(e);
-          if (hasDropdown) {
-            import_gsap2.gsap.to(linksRef.current[`drop-${i}`], {
-              opacity: 0,
-              visibility: "hidden",
-              y: 0,
-              duration: 0.3,
-              ease: "power2.in",
-              onComplete: () => setActiveDropdown(null)
-            });
-          }
-        },
-        key: link.path || `link-${i}`
-      };
-      return /* @__PURE__ */ import_react2.default.createElement(
-        "div",
-        {
-          key: link.path || i,
-          style: { position: "relative", display: "flex", alignItems: "center" },
-          onMouseLeave: linkProps.onMouseLeave
-        },
-        inRouter ? /* @__PURE__ */ import_react2.default.createElement(
-          import_react_router_dom2.NavLink,
-          {
-            to: link.path || "#",
-            ...linkProps,
-            onMouseLeave: void 0,
-            style: ({ isActive }) => ({
-              ...styles.link,
-              color: isActive ? accentColor : navText,
-              display: "flex",
-              alignItems: "center",
-              gap: "4px"
-            })
-          },
-          link.label,
-          hasDropdown && /* @__PURE__ */ import_react2.default.createElement(import_fi.FiArrowDown, { size: 14, style: { opacity: 0.5 } })
-        ) : /* @__PURE__ */ import_react2.default.createElement("a", { href: link.path || "#", ...linkProps, onMouseLeave: void 0, style: styles.link }, link.label, hasDropdown && /* @__PURE__ */ import_react2.default.createElement(import_fi.FiArrowDown, { size: 14, style: { opacity: 0.5 } })),
-        hasDropdown && /* @__PURE__ */ import_react2.default.createElement(
-          "div",
-          {
-            ref: dropdownRef,
-            style: styles.dropdown,
-            onMouseEnter: () => {
-              setActiveDropdown(i);
-              import_gsap2.gsap.to(linksRef.current[`drop-${i}`], {
-                opacity: 1,
-                visibility: "visible",
-                y: 10,
-                duration: 0.4,
-                ease: "expo.out"
-              });
-            }
-          },
-          link.children.map((child, ci) => inRouter ? /* @__PURE__ */ import_react2.default.createElement(
-            import_react_router_dom2.Link,
-            {
-              key: child.path,
-              to: child.path,
-              style: styles.dropdownItem,
-              className: "aura-dropdown-item",
-              onMouseEnter: (e) => {
-                import_gsap2.gsap.to(e.currentTarget, { backgroundColor: isLight2 ? "rgba(0,0,0,0.03)" : "rgba(255,255,255,0.05)", x: 4, duration: 0.3 });
-              },
-              onMouseLeave: (e) => {
-                import_gsap2.gsap.to(e.currentTarget, { backgroundColor: "transparent", x: 0, duration: 0.3 });
-              }
-            },
-            child.label,
-            /* @__PURE__ */ import_react2.default.createElement(import_fi.FiArrowUpRight, { size: 14, style: { opacity: 0 }, className: "arrow-icon" })
-          ) : /* @__PURE__ */ import_react2.default.createElement("a", { key: child.path, href: child.path, style: styles.dropdownItem }, child.label))
-        )
-      );
-    })),
-    /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.actions }, !isMobile && /* @__PURE__ */ import_react2.default.createElement(
-      "button",
-      {
-        ref: buttonRef,
-        style: styles.cta,
-        onMouseEnter: (e) => import_gsap2.gsap.to(e.currentTarget, {
-          y: -3,
-          scale: 1.05,
-          backgroundColor: accentColor,
-          color: "#fff",
-          boxShadow: `0 15px 30px ${accentColor}40`,
-          duration: 0.4,
-          ease: "expo.out"
-        }),
-        onMouseLeave: (e) => import_gsap2.gsap.to(e.currentTarget, {
-          y: 0,
-          scale: 1,
-          backgroundColor: navPrimary,
-          color: isLight2 ? "#ffffff" : "#000000",
-          boxShadow: isLight2 ? "0 8px 20px rgba(0,0,0,0.1)" : "0 8px 20px rgba(255,255,255,0.05)",
-          duration: 0.6,
-          ease: "elastic.out(1, 0.4)"
-        }),
-        onClick: handleButtonClick
+      style: styles.hamburgerBtn,
+      onClick: () => setIsOpen(!isOpen),
+      onMouseEnter: (e) => {
+        if (!isOpen) {
+          e.currentTarget.children[0].style.transform = "translateY(-2px)";
+          e.currentTarget.children[1].style.transform = "translateY(2px)";
+        }
       },
-      "Start Building",
-      /* @__PURE__ */ import_react2.default.createElement(import_fi.FiArrowUpRight, { size: 18 })
-    ), /* @__PURE__ */ import_react2.default.createElement(
-      "button",
+      onMouseLeave: (e) => {
+        if (!isOpen) {
+          e.currentTarget.children[0].style.transform = "none";
+          e.currentTarget.children[1].style.transform = "none";
+        }
+      }
+    },
+    /* @__PURE__ */ import_react2.default.createElement("div", { style: {
+      ...styles.line,
+      transform: isOpen ? "translateY(4px) rotate(45deg)" : "none"
+    } }),
+    /* @__PURE__ */ import_react2.default.createElement("div", { style: {
+      ...styles.line,
+      transform: isOpen ? "translateY(-4px) rotate(-45deg)" : "none"
+    } })
+  )), /* @__PURE__ */ import_react2.default.createElement("div", { ref: overlayRef, style: styles.overlay }, /* @__PURE__ */ import_react2.default.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
+    const isHovered = hoverIndex === idx;
+    const isAnyHovered = hoverIndex !== null;
+    const isActiveRoute = location.pathname === link.path;
+    return /* @__PURE__ */ import_react2.default.createElement(
+      "a",
       {
-        ref: menuButtonRef,
-        type: "button",
-        style: styles.menuToggle,
-        onClick: () => setIsMenuOpen(!isMenuOpen),
-        "aria-label": isMenuOpen ? "Close menu" : "Open menu"
+        key: idx,
+        href: link.path,
+        onClick: (e) => handleNavigation(link.path, e),
+        onMouseEnter: () => setHoverIndex(idx),
+        onMouseLeave: () => setHoverIndex(null),
+        style: styles.linkItem
       },
-      /* @__PURE__ */ import_react2.default.createElement("div", { style: {
-        ...styles.hamburgerLine,
-        transform: isMenuOpen ? "rotate(45deg)" : "translateY(-8px)"
-      } }),
-      /* @__PURE__ */ import_react2.default.createElement("div", { style: {
-        ...styles.hamburgerLine,
-        opacity: isMenuOpen ? 0 : 1,
-        transform: isMenuOpen ? "translateX(20px)" : "none"
-      } }),
-      /* @__PURE__ */ import_react2.default.createElement("div", { style: {
-        ...styles.hamburgerLine,
-        transform: isMenuOpen ? "rotate(-45deg)" : "translateY(8px)"
-      } })
-    ))
-  ), isMobile && /* @__PURE__ */ import_react2.default.createElement(
-    "div",
-    {
-      ref: menuOverlayRef,
-      style: styles.mobileOverlay,
-      id: "aura-mobile-menu",
-      "aria-hidden": !isMenuOpen
-    },
-    links.map(
-      (link, idx) => inRouter ? /* @__PURE__ */ import_react2.default.createElement(
-        import_react_router_dom2.Link,
+      /* @__PURE__ */ import_react2.default.createElement("span", { style: {
+        ...styles.linkText,
+        color: isHovered || isActiveRoute ? accentColor : textMain,
+        opacity: isAnyHovered && !isHovered ? 0.3 : 1,
+        transform: isHovered || isActiveRoute ? "translateX(20px)" : "translateX(0px)",
+        transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
+      } }, link.label),
+      /* @__PURE__ */ import_react2.default.createElement(
+        import_fi.FiArrowUpRight,
         {
-          key: link.path,
-          to: link.path,
-          className: "mobile-link",
-          ref: idx === 0 ? firstMobileLinkRef : null,
-          onClick: () => setIsMenuOpen(false),
           style: {
-            fontSize: "36px",
-            fontWeight: "900",
-            color: navPrimary,
-            textDecoration: "none",
-            letterSpacing: "-1.5px"
+            fontSize: "clamp(30px, 4vw, 60px)",
+            color: accentColor,
+            opacity: isHovered || isActiveRoute ? 1 : 0,
+            transform: isHovered || isActiveRoute ? "translate(0px, 0px)" : "translate(-20px, 20px)",
+            transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
           }
-        },
-        link.label
-      ) : /* @__PURE__ */ import_react2.default.createElement(
-        "a",
-        {
-          key: link.path,
-          href: link.path,
-          className: "mobile-link",
-          ref: idx === 0 ? firstMobileLinkRef : null,
-          onClick: () => setIsMenuOpen(false),
-          style: {
-            fontSize: "36px",
-            fontWeight: "900",
-            color: navPrimary,
-            textDecoration: "none",
-            letterSpacing: "-1.5px"
-          }
-        },
-        link.label
+        }
       )
-    ),
-    /* @__PURE__ */ import_react2.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: "mobile-link",
-        style: {
-          ...styles.cta,
-          marginTop: "20px",
-          padding: "18px 48px",
-          fontSize: "18px",
-          backgroundColor: accentColor,
-          color: "#fff"
-        },
-        onClick: () => setIsMenuOpen(false),
-        "aria-label": "Get started"
+    );
+  })), /* @__PURE__ */ import_react2.default.createElement("div", { ref: infoContainerRef, style: styles.infoArea }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoLabel }, contact.title), /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoText }, contact.email), /* @__PURE__ */ import_react2.default.createElement("span", { style: { ...styles.infoText, color: textMuted } }, contact.address)), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoLabel }, "Socials"), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.socialGrid }, socials.map((social, idx) => /* @__PURE__ */ import_react2.default.createElement(
+    "a",
+    {
+      key: idx,
+      href: social.path,
+      style: styles.socialLink,
+      onMouseEnter: (e) => {
+        e.currentTarget.style.borderColor = accentColor;
+        e.currentTarget.style.backgroundColor = `${accentColor}11`;
+        e.currentTarget.style.color = accentColor;
       },
-      "Get Started ",
-      /* @__PURE__ */ import_react2.default.createElement(import_fi.FiArrowRight, null)
-    )
-  ));
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = borderCol;
+        e.currentTarget.style.backgroundColor = "transparent";
+        e.currentTarget.style.color = textMain;
+      }
+    },
+    social.icon,
+    " ",
+    social.label
+  )))))));
 };
 
 // src/components/Spotlight/Spotlight.jsx