feat: restyle the docs site to match the marketing site with light as the default theme and a neutral dark theme, replace the section tabs with a header dropdown that switches between Guides, Learn, API reference and Self-hosting from any page, start the docs on Getting started, keep the sidebar scroll position when moving between pages, and render the theme script without a React warning

docs/components/shared/provider.tsx

@@ -0,0 +1,17 @@
+'use client';
+import type { ReactNode } from 'react';
+import { RootProvider } from 'fumadocs-ui/provider/next';
+
+// next-themes renders its no-flash script inside a component. The server copy runs
+// on load; on the client it is marked a data block so React has nothing to warn about.
+const scriptProps = { type: typeof window === 'undefined' ? 'text/javascript' : 'text/plain' };
+
+export function Provider({ children }: { children: ReactNode }) {
+  return (
+    // `type: 'static'` pairs with the staticGET search route so search runs
+    // client-side from a prebuilt index (works on a static build).
+    <RootProvider search={{ options: { type: 'static' } }} theme={{ defaultTheme: 'light', scriptProps }}>
+      {children}
+    </RootProvider>
+  );
+}

docs/components/shared/redirect.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { useEffect } from 'react';
+
+// Client half of the root redirect; the page's meta refresh covers loads without JS.
+export function Redirect({ to }: { to: string }) {
+  useEffect(() => {
+    location.replace(to);
+  }, [to]);
+  return null;
+}

docs/components/shared/section-switcher.tsx

@@ -0,0 +1,61 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import { BookOpen, Check, ChevronsUpDown, Code2, GraduationCap, Server } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from 'fumadocs-ui/components/ui/popover';
+import { cn } from '@/lib/cn';
+
+// The four doc sections; the header switcher moves between them from any page.
+const SECTIONS = [
+  { prefix: '/guides', href: '/guides/', name: 'Guides', text: 'Using the product, step by step', icon: BookOpen },
+  { prefix: '/learn', href: '/learn/email-warmup/', name: 'Learn', text: 'Cold email and deliverability basics', icon: GraduationCap },
+  { prefix: '/api', href: '/api/', name: 'API reference', text: 'REST API, SDKs, webhooks, CLI and MCP', icon: Code2 },
+  { prefix: '/development', href: '/development/install/', name: 'Self-hosting', text: 'Install and run your own instance', icon: Server },
+];
+
+export function SectionSwitcher() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const current = SECTIONS.find((s) => pathname.startsWith(s.prefix)) ?? SECTIONS[0];
+  const Icon = current.icon;
+
+  return (
+    <div className="flex items-center">
+      <span aria-hidden="true" className="mx-3 h-5 w-px rotate-12 bg-fd-border" />
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger className="inline-flex h-8 items-center gap-2 rounded-md px-2 text-[14px] font-medium text-fd-foreground transition-colors hover:bg-fd-accent">
+          <Icon className="size-4 text-fd-muted-foreground" />
+          {current.name}
+          <ChevronsUpDown className="size-3.5 text-fd-muted-foreground" />
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-72 p-1.5">
+          {SECTIONS.map((s) => {
+            const active = s === current;
+            const ItemIcon = s.icon;
+            return (
+              <Link
+                key={s.prefix}
+                href={s.href}
+                onClick={() => setOpen(false)}
+                className={cn(
+                  'flex items-start gap-3 rounded-md px-2.5 py-2 transition-colors hover:bg-fd-accent',
+                  active && 'bg-fd-accent',
+                )}
+              >
+                <span className="mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-fd-border bg-fd-background text-fd-foreground">
+                  <ItemIcon className="size-3.5" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-[13.5px] font-medium text-fd-foreground">{s.name}</span>
+                  <span className="block text-[12.5px] text-fd-muted-foreground">{s.text}</span>
+                </span>
+                {active && <Check className="mt-1 size-3.5 text-fd-foreground" />}
+              </Link>
+            );
+          })}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

docs/components/shared/sidebar-scroll-keeper.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+
+// Clicking a page in the sidebar keeps the sidebar where it was. Fumadocs scrolls
+// the new active item into view, which moves a list you were just reading. The
+// position is kept for a moment in session storage, so it also survives a full
+// page load on a static host.
+const KEY = 'wd-sidebar-scroll';
+const FRESH_MS = 5000;
+
+function viewport(): HTMLElement | null {
+  const root = document.getElementById('nd-sidebar');
+  if (!root) return null;
+  for (const el of root.querySelectorAll<HTMLElement>('*')) {
+    const y = getComputedStyle(el).overflowY;
+    if ((y === 'auto' || y === 'scroll') && el.scrollHeight > el.clientHeight) return el;
+  }
+  return null;
+}
+
+export function SidebarScrollKeeper() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const remember = (e: MouseEvent) => {
+      const link = (e.target as Element | null)?.closest('#nd-sidebar a[href]');
+      const el = link && viewport();
+      if (el) sessionStorage.setItem(KEY, JSON.stringify({ top: el.scrollTop, at: Date.now() }));
+    };
+    document.addEventListener('click', remember, true);
+    return () => document.removeEventListener('click', remember, true);
+  }, []);
+
+  useEffect(() => {
+    let saved: { top: number; at: number } | null = null;
+    try {
+      saved = JSON.parse(sessionStorage.getItem(KEY) ?? 'null');
+    } catch {}
+    if (!saved || Date.now() - saved.at > FRESH_MS) return;
+    // The active item scrolls itself into view after this render; put the list back after it.
+    const restore = () => {
+      const el = viewport();
+      if (el && saved) el.scrollTop = saved.top;
+    };
+    restore();
+    const frame = requestAnimationFrame(restore);
+    const late = window.setTimeout(restore, 80);
+    const done = window.setTimeout(() => sessionStorage.removeItem(KEY), 400);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.clearTimeout(late);
+      window.clearTimeout(done);
+    };
+  }, [pathname]);
+
+  return null;
+}