feat(web): marketing Button, Nav (with mobile menu) and Footer from Figma, test-first

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014SdXCbrN5PtGExkpvMaMHx
2026-10-12 15:00:38 +00:00
parent e314819629
commit 913d7a8832
16 changed files with 471 additions and 1 deletions
@@ -0,0 +1,72 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { BrandMark } from './BrandMark.tsx';
+import { Button } from './Button.tsx';
+import { NAV_LINKS, ROUTES } from './content.ts';
+import { Icon } from './Icon.tsx';
+
+export function Nav() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  return (
+    <header className="nav">
+      <div className="nav-bar">
+        <Link href="/" className="nav-brand" onClick={() => setOpen(false)}>
+          <BrandMark />
+          <span className="t-title-s">Wursor</span>
+        </Link>
+
+        <nav aria-label="Primary" className="nav-links t-body-m">
+          {NAV_LINKS.map((l) => (
+            <Link key={l.href} href={l.href}>
+              {l.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="nav-actions">
+          <Link href={ROUTES.signIn} className="nav-signin t-label-m">
+            Sign in
+          </Link>
+          <Button href={ROUTES.signUp} size="md" className="nav-cta">
+            Get started
+          </Button>
+          <button
+            type="button"
+            className="nav-menu-button"
+            aria-label={open ? 'Close menu' : 'Open menu'}
+            aria-expanded={open}
+            aria-controls="mobile-menu"
+            onClick={() => setOpen((v) => !v)}
+          >
+            <Icon name="menu" />
+          </button>
+        </div>
+      </div>
+
+      {open && (
+        <nav id="mobile-menu" aria-label="Mobile" className="nav-menu">
+          {NAV_LINKS.map((l) => (
+            <Link key={l.href} href={l.href} className="t-title-m" onClick={() => setOpen(false)}>
+              {l.mobileLabel ?? l.label}
+            </Link>
+          ))}
+          <Button href={ROUTES.signUp} size="lg" className="nav-menu-cta" >
+            Get started
+          </Button>
+        </nav>
+      )}
+    </header>
+  );
+}