+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+ );
+}
diff --git a/web/src/marketing/Button.tsx b/web/src/marketing/Button.tsx
new file mode 100644
index 0000000..901fa0c
--- /dev/null
+++ b/web/src/marketing/Button.tsx
@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+
+type Props = {
+ href: string;
+ children: ReactNode;
+ variant?: 'primary' | 'ghost';
+ size?: 'sm' | 'md' | 'lg';
+ className?: string;
+};
+
+/** Figma "Button": primary is the one main action on a screen; secondary and danger are added when a screen needs them. Heights 28, 36, 44. */
+export function Button({ href, children, variant = 'primary', size = 'md', className }: Props) {
+ const classes = ['btn', `btn-${variant}`, `btn-${size}`, className].filter(Boolean).join(' ');
+ return (
+
+ {children}
+
+ );
+}
diff --git a/web/src/marketing/Footer.tsx b/web/src/marketing/Footer.tsx
new file mode 100644
index 0000000..a279c08
--- /dev/null
+++ b/web/src/marketing/Footer.tsx
@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { FOOTER_COLUMNS, TAGLINE } from './content.ts';
+
+export function Footer() {
+ return (
+
+ );
+}
diff --git a/web/src/marketing/Icon.tsx b/web/src/marketing/Icon.tsx
new file mode 100644
index 0000000..d953bd2
--- /dev/null
+++ b/web/src/marketing/Icon.tsx
@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+
+type Props = { name: 'menu' | 'chevron-right'; size?: number; className?: string };
+
+/**
+ * Draws a single-colour Figma icon with a CSS mask so it takes the text colour
+ * of the current theme. The SVG file is the exact export from Figma.
+ */
+export function Icon({ name, size = 16, className }: Props) {
+ const style = {
+ '--icon-src': `url(/marketing/icons/${name}.svg)`,
+ width: size,
+ height: size,
+ } as CSSProperties;
+ return ;
+}
diff --git a/web/src/marketing/Nav.tsx b/web/src/marketing/Nav.tsx
new file mode 100644
index 0000000..d3f5db1
--- /dev/null
+++ b/web/src/marketing/Nav.tsx
@@ -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 (
+