feat: Marketing site

2026-07-22 16:50:13 +01:00
parent 7a3b8cb700
commit 693d59a3e2
51 changed files with 10656 additions and 12 deletions
@@ -0,0 +1,76 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Logo } from "@/components/Logo";
+import { NAV_LINKS } from "@/components/nav-links";
+import { ThemeToggle } from "@/components/ThemeToggle";
+
+export function Nav() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+
+  // A route change should never leave the drawer hanging open behind the new page.
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname]);
+
+  function current(href: string) {
+    return pathname === href || pathname === `${href}/` ? "page" : undefined;
+  }
+
+  return (
+    <>
+      <header className="nav">
+        <div className="rail nav__in">
+          <Link className="brand" href="/">
+            <Logo />
+            <b>Vantage</b>
+          </Link>
+
+          <nav className="nav__links" aria-label="Main">
+            {NAV_LINKS.map((link) => (
+              <Link key={link.href} href={link.href} aria-current={current(link.href)}>
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+
+          <ThemeToggle />
+
+          <button
+            type="button"
+            className="icon-btn nav__menu"
+            aria-expanded={open}
+            aria-controls="nav-drawer"
+            onClick={() => setOpen((v) => !v)}
+          >
+            {open ? "Close" : "Menu"}
+          </button>
+
+          <Link className="btn btn--solid btn--sm nav__cta" href="/start">
+            Create organisation
+          </Link>
+        </div>
+      </header>
+
+      {open && (
+        <div className="drawer" id="nav-drawer">
+          <div className="rail">
+            <nav aria-label="Main, mobile">
+              {NAV_LINKS.map((link) => (
+                <Link key={link.href} href={link.href} aria-current={current(link.href)}>
+                  {link.label}
+                </Link>
+              ))}
+              <Link className="btn btn--solid" href="/start">
+                Create organisation
+              </Link>
+            </nav>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}