feat: initial draft and components creation

components/invite/site-header.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link"
+
+import { Monogram } from "@/components/invite/monogram"
+
+const links = [
+  ["Introduction", "#introduction"],
+  ["Our story", "#story"],
+  ["Details", "#details"],
+  ["Schedule", "#schedule"],
+  ["FAQ", "#faq"],
+  ["RSVP", "#rsvp"],
+] as const
+
+export function SiteHeader() {
+  return (
+    <header className="absolute inset-x-0 top-0 z-20 px-wedding-gutter-mobile py-6 wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop">
+      <div className="flex items-center justify-between">
+        <Link href="#top" aria-label="Back to top">
+          <Monogram light />
+        </Link>
+        <nav aria-label="Invitation sections" className="hidden wedding-layout:block">
+          <ul className="flex items-center gap-6">
+            {links.map(([label, href]) => (
+              <li key={href}>
+                <Link className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white" href={href}>
+                  {label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <details className="group relative wedding-layout:hidden">
+          <summary className="cursor-pointer list-none font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white">
+            Menu <span aria-hidden="true">☰</span>
+          </summary>
+          <nav aria-label="Invitation sections" className="absolute right-0 top-8 w-48 bg-wedding-ivory p-5 shadow-lg">
+            <ul className="space-y-4">
+              {links.map(([label, href]) => (
+                <li key={href}>
+                  <Link className="wedding-text-link" href={href}>{label}</Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </details>
+      </div>
+    </header>
+  )
+}