project setup

2025-11-02 10:00:53 +01:00
parent 75bd171804
commit 7cb4c5345e
51 changed files with 3616 additions and 0 deletions
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { usePathname } from "next/navigation";
+import { Menu, X } from "lucide-react";
+
+import NavLinks from "@/components/navigation/NavLinks";
+import SiteLogo from "@/components/navigation/SiteLogo";
+import GetStartedButton from "@/components/navigation/GetStartedButton";
+
+const Navbar = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const pathname = usePathname();
+
+  const isGetStartedPage = pathname === "/get-started";
+  const isHeroOrAboutPage = pathname === "/" || pathname === "/about";
+  const isAboutPage = pathname === "/about";
+
+  return (
+    <header
+      className={`relative z-50 ${
+        isHeroOrAboutPage ? "bg-transparent" : "bg-[var(--color-1)]"
+      }`}
+    >
+      <nav className="flex items-center h-[75px] px-6 md:px-12 relative">
+        <div className="flex-shrink-0" onClick={() => setMenuOpen(false)}>
+          <SiteLogo />
+        </div>
+
+        <div className="hidden min-[828px]:flex min-[870px]:hidden items-center gap-6 ml-auto">
+          <NavLinks mobile={true} onLinkClick={() => setMenuOpen(false)} />
+          {!isGetStartedPage && <GetStartedButton />}
+        </div>
+
+        <div
+          className={`hidden min-[870px]:flex ${
+            isGetStartedPage
+              ? "absolute left-1/2 transform -translate-x-1/2"
+              : "flex-1 justify-center transform -translate-x-[7.5%]"
+          }`}
+        >
+          <NavLinks onLinkClick={() => setMenuOpen(false)} />
+        </div>
+
+        <div className="hidden min-[870px]:flex flex-shrink-0">
+          {!isGetStartedPage && <GetStartedButton />}
+        </div>
+
+        <button
+          onClick={() => setMenuOpen(!menuOpen)}
+          className="min-[828px]:hidden absolute right-6 top-1/2 transform -translate-y-1/2 p-2 text-[var(--color-8)]"
+          aria-label="Toggle menu"
+        >
+          {menuOpen ? <X size={26} /> : <Menu size={26} />}
+        </button>
+      </nav>
+
+      {menuOpen && (
+        <div className="min-[828px]:hidden bg-[var(--color-1)] border-t border-[var(--color-2)]">
+          <div className="flex flex-col items-center py-4 space-y-4">
+            <NavLinks mobile={true} onLinkClick={() => setMenuOpen(false)} />
+          </div>
+        </div>
+      )}
+
+      <div
+        className="absolute left-0 right-0 h-[3px] mx-auto w-[87.5%]"
+        style={{
+          background: `${
+            isAboutPage
+              ? "color-mix(in srgb, var(--color-2) 50%, transparent)"
+              : "var(--color-2)"
+          }`,
+        }}
+      />
+    </header>
+  );
+};
+
+export default Navbar;