From a18deea05de4c3f0dbfd7cc082b13a06501466f2 Mon Sep 17 00:00:00 2001
From: Aashish Raj <113645205+aashishrajdev@users.noreply.github.com>
Date: Thu, 10 Sep 2026 03:59:22 +0530
Subject: [PATCH] feat(web): interactive landing page overhaul

- Add Lenis smooth scrolling site-wide
- Make hero mockup a working demo: book a slot, send a message,
  multi-select and archive inbox rows
- Add interactive feature cards: linked scheduling demo, live spam
  scoring stream, expanding email theme previews, sortable forms table
- Add animated week card with 1D/7D toggle, crosshair tooltip, and
  count-up stats
- Convert FAQ to an accordion and fold pricing FAQs into it
- Fold /features page into the homepage and drop the route
- Restyle section labels with a center-glow effect; smooth and animate
  the hero spotlight; polish CTA arrow hover
- Make docs header brand link back to the homepage
- Point GitHub links at zeroaxiis/halomail
---
 apps/docs/index.html                          |   4 +-
 apps/docs/integrate.html                      |   4 +-
 apps/web/app/(marketing)/features/page.tsx    |  82 ---
 apps/web/app/(marketing)/page.tsx             | 470 +++++++-----------
 apps/web/app/(marketing)/pricing/page.tsx     |  22 +-
 apps/web/app/globals.css                      |  46 +-
 apps/web/app/layout.tsx                       |   3 +-
 apps/web/components/marketing/faq-list.tsx    |  45 ++
 .../components/marketing/forms-table-card.tsx |  90 ++++
 .../web/components/marketing/hero-preview.tsx | 232 +++++++++
 .../components/marketing/scheduling-demo.tsx  |  88 ++++
 apps/web/components/marketing/spam-demo.tsx   |  79 +++
 .../components/marketing/theme-showcase.tsx   | 125 +++++
 apps/web/components/marketing/week-card.tsx   | 242 +++++++++
 apps/web/components/site-footer.tsx           |   4 +-
 apps/web/components/site-header.tsx           |   1 -
 apps/web/components/smooth-scroll.tsx         |  18 +
 apps/web/components/ui/button.tsx             |   2 +-
 apps/web/package.json                         |   1 +
 pnpm-lock.yaml                                |  21 +
 20 files changed, 1182 insertions(+), 397 deletions(-)
 delete mode 100644 apps/web/app/(marketing)/features/page.tsx
 create mode 100644 apps/web/components/marketing/faq-list.tsx
 create mode 100644 apps/web/components/marketing/forms-table-card.tsx
 create mode 100644 apps/web/components/marketing/hero-preview.tsx
 create mode 100644 apps/web/components/marketing/scheduling-demo.tsx
 create mode 100644 apps/web/components/marketing/spam-demo.tsx
 create mode 100644 apps/web/components/marketing/theme-showcase.tsx
 create mode 100644 apps/web/components/marketing/week-card.tsx
 create mode 100644 apps/web/components/smooth-scroll.tsx
diff --git a/apps/docs/index.html b/apps/docs/index.html
index d372cb0..9a3d3b2 100644
--- a/apps/docs/index.html
+++ b/apps/docs/index.html
@@ -38,7 +38,7 @@
     padding: 14px 28px; background: color-mix(in srgb, var(--bg) 80%, transparent);
     backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
   }
-  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; }
+  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; color: inherit; text-decoration: none; }
   .dot { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #b69bff); }
   .nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 14px; }
   .nav a:hover { color: var(--text); }
@@ -125,7 +125,7 @@
 </head>
 <body>
 <header>
-  <div class="brand"><span class="dot"></span> HaloMail <span class="muted" style="font-weight:400">docs</span></div>
+  <a class="brand" href="/" title="Back to HaloMail home"><span class="dot"></span> HaloMail <span class="muted" style="font-weight:400">docs</span></a>
   <nav class="nav">
     <a href="#quickstart">Quickstart</a>
     <a href="integrate.html">Add to your site</a>
diff --git a/apps/docs/integrate.html b/apps/docs/integrate.html
index 8a2011b..d3a81f0 100644
--- a/apps/docs/integrate.html
+++ b/apps/docs/integrate.html
@@ -37,7 +37,7 @@
     padding: 14px 28px; background: color-mix(in srgb, var(--bg) 80%, transparent);
     backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
   }
-  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; }
+  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; color: inherit; text-decoration: none; }
   .dot { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #b69bff); }
   .nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 14px; }
   .nav a:hover { color: var(--text); }
@@ -132,7 +132,7 @@
 </head>
 <body>
 <header>
-  <div class="brand"><span class="dot"></span> HaloMail <span class="muted" style="font-weight:400">docs</span></div>
+  <a class="brand" href="/" title="Back to HaloMail home"><span class="dot"></span> HaloMail <span class="muted" style="font-weight:400">docs</span></a>
   <nav class="nav">
     <a href="index.html">Docs</a>
     <a href="#contact-form">Contact form</a>
diff --git a/apps/web/app/(marketing)/features/page.tsx b/apps/web/app/(marketing)/features/page.tsx
deleted file mode 100644
index 9c45c48..0000000
--- a/apps/web/app/(marketing)/features/page.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { CalendarClock, Code2, Inbox, Palette } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
-
-export const metadata = { title: "Features" };
-
-const sections = [
-  {
-    icon: <CalendarClock />,
-    title: "Meeting scheduling",
-    points: [
-      "A public booking page for every user at /book/{handle}",
-      "Weekly availability rules + per-date overrides",
-      "Timezone-aware slot computation with buffers",
-      "Google Calendar and Outlook sync via OAuth",
-      "Confirmation, reschedule, and cancel links",
-    ],
-  },
-  {
-    icon: <Inbox />,
-    title: "Contact form infrastructure",
-    points: [
-      "Embeddable widget — one <script> tag",
-      "REST API and generated SDK",
-      "Honeypot + heuristic spam scoring",
-      "Per-IP and per-form rate limiting",
-      "Message storage and email forwarding",
-    ],
-  },
-  {
-    icon: <Palette />,
-    title: "Email designer",
-    points: [
-      "Five built-in themes: Minimal, Apple, Notion, Glass, Terminal",
-      "Custom HTML templates with {{variables}}",
-      "Live preview rendering",
-      "XSS-safe variable substitution",
-    ],
-  },
-  {
-    icon: <Code2 />,
-    title: "Developer surface",
-    points: [
-      "Scoped API keys",
-      "HMAC-signed webhooks with retries",
-      "Generated TypeScript SDK",
-      "OpenAPI documentation",
-      "Audit logs for every sensitive action",
-    ],
-  },
-];
-
-export default function FeaturesPage() {
-  return (
-    <div className="container py-20">
-      <div className="mx-auto max-w-2xl text-center">
-        <Badge variant="brand" className="mb-4">Features</Badge>
-        <h1 className="text-4xl font-semibold tracking-tight">Everything you need, nothing you don't</h1>
-        <p className="mt-3 text-muted-foreground">One typed API powers the dashboard, the SDK, and your own integrations.</p>
-      </div>
-
-      <div className="mx-auto mt-12 grid max-w-4xl gap-6 md:grid-cols-2">
-        {sections.map((s) => (
-          <Card key={s.title} className="p-6">
-            <div className="mb-4 inline-flex size-9 items-center justify-center rounded-lg bg-secondary [&_svg]:size-5">
-              {s.icon}
-            </div>
-            <h2 className="mb-3 text-lg font-medium">{s.title}</h2>
-            <ul className="space-y-2 text-sm text-muted-foreground">
-              {s.points.map((p) => (
-                <li key={p} className="flex gap-2">
-                  <span className="mt-2 size-1 shrink-0 rounded-full bg-brand" />
-                  {p}
-                </li>
-              ))}
-            </ul>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 0d7babf..a5826ec 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -9,11 +9,17 @@ import {
   Mail,
   Palette,
   ShieldCheck,
-  Sparkles,
   Webhook,
   Zap,
 } from "lucide-react";
 import Link from "next/link";
+import { FaqList } from "@/components/marketing/faq-list";
+import { FormsTableCard } from "@/components/marketing/forms-table-card";
+import { HeroPreview } from "@/components/marketing/hero-preview";
+import { SchedulingDemo } from "@/components/marketing/scheduling-demo";
+import { SpamDemo } from "@/components/marketing/spam-demo";
+import { ThemeShowcase } from "@/components/marketing/theme-showcase";
+import { WeekCard } from "@/components/marketing/week-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -28,6 +34,7 @@ export default function LandingPage() {
       <FormsTable />
       <HowItWorks />
       <Integrate />
+      <FeatureDetail />
       <Stats />
       <Faq />
       <FinalCta />
@@ -42,9 +49,11 @@ export default function LandingPage() {
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex justify-center">
-      <Badge variant="outline" className="bg-card/60 px-3 py-1 font-normal text-muted-foreground backdrop-blur">
-        {children}
-      </Badge>
+      <span className="rounded-full border border-border bg-card/60 px-4 py-1.5 backdrop-blur">
+        <span className="section-label text-sm font-medium uppercase tracking-[0.25em]">
+          {children}
+        </span>
+      </span>
     </div>
   );
 }
@@ -81,18 +90,13 @@ function Hero() {
       />
 
       <div className="container relative flex flex-col items-center py-24 text-center md:py-32">
-        <Badge variant="outline" className="mb-6 animate-fade-up gap-1.5 bg-card/60 py-1 pl-2 pr-3 backdrop-blur">
-          <Sparkles className="size-3.5 text-brand" />
-          <span className="font-normal text-muted-foreground">API-first · open source · MIT</span>
-        </Badge>
-
         <h1 className="max-w-4xl animate-fade-up text-4xl font-semibold leading-[1.08] tracking-tight md:text-6xl">
           Scheduling and contact forms,
           <br className="hidden md:block" /> behind one clean API.
         </h1>
 
         <p className="mt-6 max-w-xl animate-fade-up text-balance text-lg text-muted-foreground">
-          Give every user a public booking page and an embeddable contact form — backed by
+          Give every user a public booking page and an embeddable contact form, backed by
           typed ConnectRPC, a generated SDK, signed webhooks, and a dashboard you don&apos;t
           have to build.
         </p>
@@ -121,83 +125,6 @@ function Hero() {
   );
 }
 
-/** A compact, believable product shot: booking picker beside a live submission. */
-function HeroPreview() {
-  return (
-    <div className="relative mt-16 w-full max-w-4xl animate-fade-up">
-      <Card className="glass overflow-hidden p-2 shadow-2xl">
-        <div className="rounded-md border border-border bg-background">
-          <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
-            <span className="size-2.5 rounded-full bg-destructive/60" />
-            <span className="size-2.5 rounded-full bg-yellow-500/60" />
-            <span className="size-2.5 rounded-full bg-emerald-500/60" />
-            <span className="ml-3 font-mono text-[11px] text-muted-foreground">
-              halomail.app/book/grace-hopper
-            </span>
-          </div>
-
-          <div className="grid gap-4 p-4 text-left sm:grid-cols-2">
-            <div className="rounded-lg border border-border p-4">
-              <p className="text-xs text-muted-foreground">Intro Call · 30 min</p>
-              <p className="mt-1 font-medium">Pick a time</p>
-              <div className="mt-3 flex gap-1.5">
-                {["Mon", "Tue", "Wed", "Thu"].map((d, i) => (
-                  <div
-                    key={d}
-                    className={`flex-1 rounded-md border px-2 py-2 text-center text-[11px] ${
-                      i === 1
-                        ? "border-foreground/30 bg-secondary font-medium"
-                        : "border-border text-muted-foreground"
-                    }`}
-                  >
-                    {d}
-                  </div>
-                ))}
-              </div>
-              <div className="mt-3 space-y-1.5">
-                {["09:00", "09:30", "10:00"].map((t, i) => (
-                  <div
-                    key={t}
-                    className={`rounded-md border px-3 py-2 font-mono text-xs ${
-                      i === 0
-                        ? "border-brand/40 bg-brand/10 text-brand"
-                        : "border-border text-muted-foreground"
-                    }`}
-                  >
-                    {t}
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            <div className="rounded-lg border border-border p-4">
-              <div className="flex items-center justify-between">
-                <p className="text-xs text-muted-foreground">Inbox</p>
-                <Badge variant="success" className="px-1.5 py-0 text-[10px]">live</Badge>
-              </div>
-              <div className="mt-3 space-y-2">
-                {[
-                  { n: "Jane Visitor", m: "Saw your portfolio — can we talk?" },
-                  { n: "Marc Dev", m: "Question about the API pricing" },
-                  { n: "Priya S.", m: "Booking rescheduled to Thursday" },
-                ].map((row) => (
-                  <div key={row.n} className="rounded-md border border-border px-3 py-2">
-                    <p className="text-xs font-medium">{row.n}</p>
-                    <p className="truncate text-[11px] text-muted-foreground">{row.m}</p>
-                  </div>
-                ))}
-              </div>
-              <p className="mt-3 font-mono text-[10px] text-muted-foreground">
-                POST /SubmitMessage · 200 OK
-              </p>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-}
-
 /* -------------------------------------------------------------------------- */
 /* Logo strip                                                                 */
 /* -------------------------------------------------------------------------- */
@@ -222,11 +149,11 @@ function LogoStrip() {
       </h2>
 
       <div className="relative mt-8 overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]">
-        <div className="flex w-max animate-marquee gap-3">
+        <div className="flex w-max animate-marquee">
           {[...STACK, ...STACK].map((name, i) => (
             <div
               key={`${name}-${i}`}
-              className="flex h-14 min-w-[180px] items-center justify-center rounded-lg border border-border bg-card px-6 text-sm text-muted-foreground"
+              className="mr-3 flex h-14 min-w-[180px] items-center justify-center rounded-lg border border-border bg-card px-6 text-sm text-muted-foreground"
             >
               {name}
             </div>
@@ -243,7 +170,7 @@ function LogoStrip() {
 
 function Features() {
   return (
-    <section className="container py-20 md:py-28">
+    <section id="features" className="container scroll-mt-24 py-20 md:py-28">
       <SectionHead
         label="Features"
         title="Everything a booking link needs, and nothing it doesn't"
@@ -256,51 +183,9 @@ function Features() {
           <FeatureHead
             icon={<CalendarClock />}
             title="Scheduling that respects timezones"
-            desc="Weekly availability rules, date overrides, Google and Outlook sync, reschedule and cancel flows — slots are computed server-side so two people never book the same minute."
+            desc="Weekly availability rules, date overrides, Google and Outlook sync, reschedule and cancel flows. Slots are computed server-side so two people never book the same minute."
           />
-          <div className="mt-6 grid gap-3 sm:grid-cols-2">
-            <div className="rounded-lg border border-border bg-background p-4">
-              <p className="text-xs text-muted-foreground">Weekly rules</p>
-              <div className="mt-3 space-y-2">
-                {[
-                  ["Mon – Fri", "09:00 – 17:00"],
-                  ["Saturday", "Unavailable"],
-                ].map(([d, t]) => (
-                  <div key={d} className="flex items-center justify-between text-xs">
-                    <span className="text-muted-foreground">{d}</span>
-                    <span className="font-mono">{t}</span>
-                  </div>
-                ))}
-              </div>
-              <div className="mt-4 flex h-16 items-end gap-1">
-                {[40, 65, 30, 80, 55, 20, 70].map((h, i) => (
-                  <div
-                    key={i}
-                    style={{ height: `${h}%` }}
-                    className={`flex-1 rounded-sm ${i === 3 ? "bg-brand/70" : "bg-secondary"}`}
-                  />
-                ))}
-              </div>
-            </div>
-            <div className="rounded-lg border border-border bg-background p-4">
-              <p className="text-xs text-muted-foreground">Next bookings</p>
-              <div className="mt-3 space-y-2">
-                {[
-                  ["Intro Call", "Tue 09:00"],
-                  ["Design Review", "Wed 14:30"],
-                  ["Pairing", "Thu 11:00"],
-                ].map(([t, w]) => (
-                  <div
-                    key={t}
-                    className="flex items-center justify-between rounded-md border border-border px-3 py-2"
-                  >
-                    <span className="text-xs font-medium">{t}</span>
-                    <span className="font-mono text-[11px] text-muted-foreground">{w}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
+          <SchedulingDemo />
         </Card>
 
         {/* Spam */}
@@ -310,57 +195,21 @@ function Features() {
             title="Spam-proof by default"
             desc="Honeypot fields, per-IP rate limiting, and a spam score on every submission."
           />
-          <div className="mt-6 space-y-2">
-            {[
-              { label: "jane@example.com", score: "0.02", spam: false },
-              { label: "winner@lottery.biz", score: "0.97", spam: true },
-              { label: "marc@studio.dev", score: "0.05", spam: false },
-            ].map((r) => (
-              <div
-                key={r.label}
-                className="flex items-center justify-between rounded-md border border-border bg-background px-3 py-2"
-              >
-                <span className="truncate text-xs text-muted-foreground">{r.label}</span>
-                <Badge variant={r.spam ? "danger" : "success"} className="ml-2 px-1.5 py-0 text-[10px]">
-                  {r.score}
-                </Badge>
-              </div>
-            ))}
-          </div>
-        </Card>
-
-        {/* Email designer */}
-        <Card className="bg-card p-6">
-          <FeatureHead
-            icon={<Palette />}
-            title="Emails that don't look templated"
-            desc="Five built-in themes plus custom HTML, with live preview before you send."
-          />
-          <div className="mt-6 grid grid-cols-5 gap-2">
-            {["Minimal", "Apple", "Notion", "Glass", "Terminal"].map((t, i) => (
-              <div
-                key={t}
-                className={`rounded-md border p-2 text-center text-[10px] ${
-                  i === 2 ? "border-brand/40 bg-brand/10 text-brand" : "border-border text-muted-foreground"
-                }`}
-              >
-                <div className="mb-1.5 h-8 rounded bg-secondary" />
-                {t}
-              </div>
-            ))}
-          </div>
+          <SpamDemo />
         </Card>
 
-        {/* Developer — wide */}
-        <Card className="bg-card overflow-hidden p-6 lg:col-span-2">
+        {/* Developer */}
+        <Card className="bg-card overflow-hidden p-6">
           <FeatureHead
             icon={<Code2 />}
             title="Typed end to end"
             desc="Protobuf definitions generate both the Go server and the TypeScript SDK, so a renamed field breaks the build instead of production."
           />
-          <div className="mt-6 overflow-x-auto rounded-lg border border-border bg-background p-4">
-            <pre className="font-mono text-[12px] leading-relaxed text-muted-foreground">
-              <code>{`const halo = new HaloMail({ apiUrl: process.env.API_URL });
+          <div className="mt-6 rounded-lg border border-border bg-background p-4">
+            <pre className="whitespace-pre-wrap break-words font-mono text-[12px] leading-relaxed text-muted-foreground">
+              <code>{`const halo = new HaloMail({
+  apiUrl: process.env.API_URL,
+});
 
 await halo.contact.submitMessage({
   formSlug:    "portfolio",
@@ -371,6 +220,16 @@ await halo.contact.submitMessage({
             </pre>
           </div>
         </Card>
+
+        {/* Email designer — wide so the theme previews get room */}
+        <Card className="bg-card p-6 lg:col-span-2">
+          <FeatureHead
+            icon={<Palette />}
+            title="Emails that don't look templated"
+            desc="Five built-in themes plus custom HTML, with live preview before you send."
+          />
+          <ThemeShowcase />
+        </Card>
       </div>
     </section>
   );
@@ -410,7 +269,7 @@ function Dashboard() {
           </h2>
           <p className="mt-5 max-w-md text-muted-foreground">
             Every booking, every form submission, every API key and webhook delivery in a
-            single place — with an audit log that records who changed what.
+            single place, with an audit log that records who changed what.
           </p>
           <ul className="mt-7 space-y-3">
             {[
@@ -431,62 +290,7 @@ function Dashboard() {
           </Button>
         </div>
 
-        <Card className="bg-card overflow-hidden p-5">
-          <div className="flex items-center justify-between">
-            <p className="text-sm font-medium">This week</p>
-            <div className="flex gap-1">
-              {["1D", "7D"].map((t, i) => (
-                <span
-                  key={t}
-                  className={`rounded-md border px-2 py-0.5 text-[11px] ${
-                    i === 1 ? "border-foreground/25 bg-secondary" : "border-border text-muted-foreground"
-                  }`}
-                >
-                  {t}
-                </span>
-              ))}
-            </div>
-          </div>
-
-          <div className="mt-4 grid grid-cols-3 gap-3">
-            {[
-              ["Bookings", "34"],
-              ["Messages", "128"],
-              ["Show rate", "92%"],
-            ].map(([k, v]) => (
-              <div key={k} className="rounded-lg border border-border bg-background p-3">
-                <p className="text-[11px] text-muted-foreground">{k}</p>
-                <p className="mt-1 text-xl font-semibold tracking-tight">{v}</p>
-              </div>
-            ))}
-          </div>
-
-          <div className="mt-4 rounded-lg border border-border bg-background p-4">
-            <svg viewBox="0 0 320 90" className="h-24 w-full" role="img" aria-label="Weekly volume">
-              <polyline
-                points="0,70 45,58 90,64 135,38 180,44 225,22 270,30 320,12"
-                fill="none"
-                stroke="hsl(var(--brand))"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <polyline
-                points="0,80 45,74 90,78 135,66 180,70 225,58 270,62 320,52"
-                fill="none"
-                stroke="hsl(var(--muted-foreground))"
-                strokeWidth="1.5"
-                strokeDasharray="3 3"
-                opacity="0.5"
-              />
-            </svg>
-            <div className="mt-2 flex justify-between font-mono text-[10px] text-muted-foreground">
-              {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((d) => (
-                <span key={d}>{d}</span>
-              ))}
-            </div>
-          </div>
-        </Card>
+        <WeekCard />
       </div>
     </section>
   );
@@ -496,40 +300,11 @@ function Dashboard() {
 /* Forms table split                                                          */
 /* -------------------------------------------------------------------------- */
 
-const FORMS = [
-  ["portfolio", "142", "0.4%", "2m ago"],
-  ["hire-me", "38", "1.1%", "1h ago"],
-  ["support", "512", "3.8%", "4m ago"],
-  ["newsletter", "96", "0.9%", "22m ago"],
-  ["feedback", "27", "0.0%", "3h ago"],
-];
-
 function FormsTable() {
   return (
     <section className="container py-20 md:py-28">
       <div className="grid items-center gap-12 lg:grid-cols-2">
-        <Card className="bg-card order-2 overflow-hidden p-0 lg:order-1">
-          <div className="grid grid-cols-4 border-b border-border px-5 py-3 text-[11px] uppercase tracking-wide text-muted-foreground">
-            <span className="col-span-1">Form</span>
-            <span className="text-right">Messages</span>
-            <span className="text-right">Spam</span>
-            <span className="text-right">Last</span>
-          </div>
-          {FORMS.map(([slug, msgs, spam, last]) => (
-            <div
-              key={slug}
-              className="grid grid-cols-4 items-center border-b border-border px-5 py-3.5 text-sm last:border-0"
-            >
-              <span className="flex items-center gap-2 font-mono text-xs">
-                <Inbox className="size-3.5 text-muted-foreground" />
-                {slug}
-              </span>
-              <span className="text-right font-medium">{msgs}</span>
-              <span className="text-right text-muted-foreground">{spam}</span>
-              <span className="text-right text-xs text-muted-foreground">{last}</span>
-            </div>
-          ))}
-        </Card>
+        <FormsTableCard />
 
         <div className="order-1 lg:order-2">
           <h2 className="max-w-md text-3xl font-semibold tracking-tight md:text-4xl">
@@ -537,7 +312,7 @@ function FormsTable() {
           </h2>
           <p className="mt-5 max-w-md text-muted-foreground">
             One form per page, per campaign, per client. Each gets its own slug, target
-            address, field schema, and redirect — and shares the same two-line embed.
+            address, field schema, and redirect, and shares the same two-line embed.
           </p>
           <Button asChild variant="outline" size="lg" className="mt-8">
             <a href="/docs/integrate.html">
@@ -556,19 +331,22 @@ function FormsTable() {
 
 const STEPS = [
   {
-    n: "01",
+    n: "1",
     title: "Create a form or event type",
     desc: "From the dashboard or one API call. You get a slug and a public booking handle.",
+    example: "halomail.app/book/you",
   },
   {
-    n: "02",
+    n: "2",
     title: "Paste two lines into your site",
     desc: "A script tag and a data-halomail attribute on the form you already designed.",
+    example: '<form data-halomail="portfolio">',
   },
   {
-    n: "03",
-    title: "Watch messages and bookings land",
+    n: "3",
+    title: "Messages and bookings land",
     desc: "Stored, forwarded to your inbox, and pushed to your endpoints as signed webhooks.",
+    example: "POST /SubmitMessage · 200 OK",
   },
 ];
 
@@ -576,14 +354,33 @@ function HowItWorks() {
   return (
     <section className="border-y border-border bg-card/30 py-20 md:py-28">
       <div className="container">
-        <SectionHead label="How it works" title="Live on your site in three steps" />
-        <div className="grid gap-4 md:grid-cols-3">
-          {STEPS.map((s) => (
-            <Card key={s.n} className="bg-card p-6">
-              <span className="font-mono text-sm text-brand">{s.n}</span>
-              <h3 className="mt-3 font-medium tracking-tight">{s.title}</h3>
-              <p className="mt-2 text-sm text-muted-foreground">{s.desc}</p>
-            </Card>
+        <SectionHead
+          label="How it works"
+          title="Live on your site in three steps"
+          desc="No SDK required for the basics: a slug, two lines of HTML, and you're receiving."
+        />
+        <div className="relative grid gap-4 md:grid-cols-3">
+          {STEPS.map((s, i) => (
+            <div key={s.n} className="relative">
+              <Card className="bg-card h-full p-6">
+                <div className="flex items-center gap-3">
+                  <span className="flex size-7 items-center justify-center rounded-full border border-brand/40 bg-brand/10 font-mono text-sm text-brand">
+                    {s.n}
+                  </span>
+                  <h3 className="font-medium tracking-tight">{s.title}</h3>
+                </div>
+                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{s.desc}</p>
+                <p className="mt-4 truncate rounded-md border border-border bg-background px-3 py-2 font-mono text-[11px] text-muted-foreground">
+                  {s.example}
+                </p>
+              </Card>
+              {i < STEPS.length - 1 ? (
+                <ArrowRight
+                  aria-hidden
+                  className="absolute -right-4 top-1/2 z-10 hidden size-4 -translate-y-1/2 text-muted-foreground md:block"
+                />
+              ) : null}
+            </div>
           ))}
         </div>
       </div>
@@ -648,7 +445,7 @@ function CodeCard({ title, children }: { title: string; children: string }) {
         <span className="size-2.5 rounded-full bg-emerald-500/60" />
         <span className="ml-2 font-mono text-[11px] text-muted-foreground">{title}</span>
       </div>
-      <pre className="overflow-x-auto p-5 font-mono text-[12.5px] leading-relaxed">
+      <pre className="whitespace-pre-wrap break-words p-5 font-mono text-[12.5px] leading-relaxed">
         <code>{children}</code>
       </pre>
     </Card>
@@ -664,6 +461,86 @@ function Mini({ icon, label }: { icon: React.ReactNode; label: string }) {
   );
 }
 
+/* -------------------------------------------------------------------------- */
+/* Feature detail — the full surface, folded in from the old /features page   */
+/* -------------------------------------------------------------------------- */
+
+const DETAIL = [
+  {
+    icon: <CalendarClock />,
+    title: "Scheduling",
+    tagline: "A Calendly-style booking page for every user.",
+    points: [
+      "Availability rules with per-date overrides",
+      "Google and Outlook calendar sync",
+      "Reschedule and cancel links built in",
+    ],
+  },
+  {
+    icon: <Inbox />,
+    title: "Contact forms",
+    tagline: "One script tag turns any form into an inbox.",
+    points: [
+      "Spam scoring plus rate limiting",
+      "Stored, searchable submissions",
+      "Email forwarding to your inbox",
+    ],
+  },
+  {
+    icon: <Palette />,
+    title: "Email designer",
+    tagline: "Notification emails that match your brand.",
+    points: [
+      "Five built-in themes, custom HTML too",
+      "Template variables, safely substituted",
+      "Live preview before you send",
+    ],
+  },
+  {
+    icon: <Code2 />,
+    title: "Developer surface",
+    tagline: "Everything is an API before it's a screen.",
+    points: [
+      "Scoped keys and signed webhooks",
+      "Generated TypeScript SDK",
+      "Audit logs on sensitive actions",
+    ],
+  },
+];
+
+function FeatureDetail() {
+  return (
+    <section className="border-t border-border bg-card/30 py-20 md:py-28">
+      <div className="container">
+        <SectionHead
+          label="The full surface"
+          title="Everything you need, nothing you don't"
+          desc="One typed API powers the dashboard, the SDK, and your own integrations."
+        />
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {DETAIL.map((s) => (
+            <Card key={s.title} className="bg-card p-6">
+              <div className="mb-4 inline-flex size-9 items-center justify-center rounded-lg border border-border bg-secondary [&_svg]:size-4">
+                {s.icon}
+              </div>
+              <h3 className="font-medium tracking-tight">{s.title}</h3>
+              <p className="mt-1.5 text-sm text-muted-foreground">{s.tagline}</p>
+              <ul className="mt-4 space-y-2 border-t border-border pt-4 text-[13px] text-muted-foreground">
+                {s.points.map((p) => (
+                  <li key={p} className="flex gap-2">
+                    <span className="mt-[7px] size-1 shrink-0 rounded-full bg-brand" />
+                    {p}
+                  </li>
+                ))}
+              </ul>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
 /* -------------------------------------------------------------------------- */
 /* Stats                                                                      */
 /* -------------------------------------------------------------------------- */
@@ -705,7 +582,7 @@ const FAQS = [
   },
   {
     q: "Do I need a database?",
-    a: "PostgreSQL, yes — a free Neon project is plenty to start. Redis is optional: without it, rate limiting falls back to an in-memory limiter, which is correct for a single instance.",
+    a: "PostgreSQL, yes. A free Neon project is plenty to start. Redis is optional: without it, rate limiting falls back to an in-memory limiter, which is correct for a single instance.",
   },
   {
     q: "Can I use my own domain for emails?",
@@ -719,6 +596,26 @@ const FAQS = [
     q: "How do I keep the API off the public internet?",
     a: "Every write endpoint except form submission and booking requires a bearer token. Deploy the gateway behind your own proxy if you want the rest locked down further.",
   },
+  {
+    q: "Is the free tier crippled?",
+    a: "No. Self-hosting gives you every feature in the codebase. There is no enterprise edition and no license key. You are paying for operations when you choose hosted, not for features.",
+  },
+  {
+    q: "What does the $5 hosted plan actually cover?",
+    a: "A managed Postgres with daily backups, automatic deploys of new versions, configured email delivery, and someone to email when something breaks.",
+  },
+  {
+    q: "Can I move between hosted and self-hosted?",
+    a: "In both directions. It is the same schema and the same API, so a database dump moves your data either way. No export fees, no lock-in.",
+  },
+  {
+    q: "Do you charge per seat?",
+    a: "No. One price covers your whole team, however many people that is.",
+  },
+  {
+    q: "Is there a trial or a refund?",
+    a: "Self-hosting is the trial: run the exact same software for as long as you like before paying anything. Cancel hosted whenever; billing stops at the end of the period.",
+  },
 ];
 
 function Faq() {
@@ -732,7 +629,7 @@ function Faq() {
         </div>
         <div className="flex flex-col items-start gap-5">
           <p className="max-w-md text-muted-foreground">
-            Confused or curious? The docs cover the whole surface — from the first embed to
+            Confused or curious? The docs cover the whole surface, from the first embed to
             self-hosting the stack on your own infrastructure.
           </p>
           <Button asChild variant="outline">
@@ -743,14 +640,7 @@ function Faq() {
         </div>
       </div>
 
-      <div className="mt-14 grid gap-x-10 gap-y-8 border-t border-border pt-10 md:grid-cols-2">
-        {FAQS.map((f) => (
-          <div key={f.q}>
-            <h3 className="font-medium tracking-tight">{f.q}</h3>
-            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{f.a}</p>
-          </div>
-        ))}
-      </div>
+      <FaqList items={FAQS} />
     </section>
   );
 }
@@ -780,7 +670,7 @@ function FinalCta() {
               </Link>
             </Button>
             <Button asChild size="lg" variant="outline">
-              <a href="https://github.com/aashishrajdev/halomail" target="_blank" rel="noreferrer">
+              <a href="https://github.com/zeroaxiis/halomail" target="_blank" rel="noreferrer">
                 View on GitHub
               </a>
             </Button>
diff --git a/apps/web/app/(marketing)/pricing/page.tsx b/apps/web/app/(marketing)/pricing/page.tsx
index 2572f06..cbb6faf 100644
--- a/apps/web/app/(marketing)/pricing/page.tsx
+++ b/apps/web/app/(marketing)/pricing/page.tsx
@@ -20,12 +20,12 @@ const TIERS = [
     href: "/docs/integrate.html",
     featured: false,
     features: [
-      "Every feature — nothing gated",
+      "Every feature, nothing gated",
       "Unlimited users, forms, and bookings",
       "Google & Outlook calendar sync",
       "Signed webhooks and scoped API keys",
       "Your database, your data, your domain",
-      "MIT licensed — fork it if you like",
+      "MIT licensed, fork it if you like",
     ],
   },
   {
@@ -73,7 +73,7 @@ const COMPARE: [string, string | boolean, string | boolean][] = [
 const FAQS = [
   {
     q: "Is the free tier crippled?",
-    a: "No. Self-hosting gives you every feature in the codebase — there is no enterprise edition and no license key. You are paying for operations when you choose hosted, not for features.",
+    a: "No. Self-hosting gives you every feature in the codebase. There is no enterprise edition and no license key. You are paying for operations when you choose hosted, not for features.",
   },
   {
     q: "What does $5 actually cover?",
@@ -85,7 +85,7 @@ const FAQS = [
   },
   {
     q: "What does self-hosting really cost?",
-    a: "In monolith mode it fits the free tiers of a container host plus a managed Postgres — genuinely $0 at small scale. An always-on instance with more headroom runs roughly $5–10/month.",
+    a: "In monolith mode it fits the free tiers of a container host plus a managed Postgres, genuinely $0 at small scale. An always-on instance with more headroom runs roughly $5–10/month.",
   },
   {
     q: "Do you charge per seat?",
@@ -93,7 +93,7 @@ const FAQS = [
   },
   {
     q: "Is there a trial or a refund?",
-    a: "Self-hosting is the trial — run the exact same software for as long as you like before paying anything. Cancel hosted whenever; billing stops at the end of the period.",
+    a: "Self-hosting is the trial: run the exact same software for as long as you like before paying anything. Cancel hosted whenever; billing stops at the end of the period.",
   },
 ];
 
@@ -121,7 +121,7 @@ export default function PricingPage() {
             </h1>
             <p className="mt-5 text-balance text-lg text-muted-foreground">
               Every feature is in the open-source build. The paid plan buys operations —
-              backups, updates, uptime — not unlocked functionality.
+              backups, updates, uptime, not unlocked functionality.
             </p>
           </div>
 
@@ -235,7 +235,7 @@ export default function PricingPage() {
             </h2>
             <p className="mt-5 max-w-md text-muted-foreground">
               In monolith mode HaloMail is one container plus a Postgres database. At
-              portfolio scale that fits inside free tiers — the guide walks through the
+              portfolio scale that fits inside free tiers. The guide walks through the
               exact providers and settings.
             </p>
             <Button asChild variant="outline" size="lg" className="mt-8">
@@ -247,9 +247,9 @@ export default function PricingPage() {
 
           <Card className="overflow-hidden p-0">
             {[
-              ["Hobby — free tiers, monolith", "$0"],
-              ["Small — always-on 256 MB + managed Postgres", "$5–10"],
-              ["Growth — services scaled independently", "per service"],
+              ["Hobby · free tiers, monolith", "$0"],
+              ["Small · always-on 256 MB + managed Postgres", "$5–10"],
+              ["Growth · services scaled independently", "per service"],
             ].map(([label, cost], i) => (
               <div
                 key={label}
@@ -303,7 +303,7 @@ export default function PricingPage() {
               Start free. Upgrade only if you get tired of ops.
             </h2>
             <p className="max-w-md text-muted-foreground">
-              Same software either way — moving between them is a database dump.
+              Same software either way. Moving between them is a database dump.
             </p>
             <div className="mt-2 flex flex-wrap items-center justify-center gap-3">
               <Button asChild size="lg">
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index a1505d7..3898fb7 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -35,7 +35,7 @@
     --secondary: 0 0% 11%;
     --secondary-foreground: 0 0% 93%;
     --muted: 0 0% 11%;
-    --muted-foreground: 0 0% 56%;
+    --muted-foreground: 0 0% 62%;
     --accent: 0 0% 13%;
     --accent-foreground: 0 0% 93%;
     --destructive: 0 62% 46%;
@@ -67,14 +67,36 @@
    events pass through.
    --------------------------------------------------------------------------- */
 
-/* Spotlight behind the hero headline. */
+/* Spotlight behind the hero headline. Extra stops keep the falloff smooth
+   (no visible banding), and the whole light breathes slowly. */
 .bg-spotlight {
   background: radial-gradient(
     60% 50% at 50% 0%,
     hsl(var(--foreground) / 0.10) 0%,
-    hsl(var(--foreground) / 0.04) 35%,
-    transparent 70%
+    hsl(var(--foreground) / 0.07) 20%,
+    hsl(var(--foreground) / 0.04) 40%,
+    hsl(var(--foreground) / 0.02) 55%,
+    hsl(var(--foreground) / 0.008) 70%,
+    transparent 85%
   );
+  transform-origin: 50% 0%;
+  animation: spotlight-breathe 9s ease-in-out infinite;
+}
+@keyframes spotlight-breathe {
+  0%,
+  100% {
+    opacity: 0.8;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.08);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bg-spotlight {
+    animation: none;
+  }
 }
 
 /* Wide, faint horizon curve separating the hero from the page. */
@@ -85,7 +107,21 @@
     hsl(var(--foreground) / 0.07) 0%,
     transparent 60%
   );
-  box-shadow: inset 0 1px 0 hsl(var(--foreground) / 0.12);
+}
+
+/* Section labels — text lit from the center, fading toward both ends. */
+.section-label {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--foreground) / 0.45) 0%,
+    hsl(var(--foreground)) 40%,
+    hsl(var(--foreground)) 60%,
+    hsl(var(--foreground) / 0.45) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 0 10px hsl(var(--brand) / 0.45));
 }
 
 /* Card sheen — a diagonal highlight so dark panels read as glass, not flat. */
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 5cf59f1..3618c01 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,6 +2,7 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
+import { SmoothScroll } from "@/components/smooth-scroll";
 import { ThemeProvider } from "@/components/theme-provider";
 
 export const metadata: Metadata = {
@@ -18,7 +19,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en" suppressHydrationWarning className={`${GeistSans.variable} ${GeistMono.variable}`}>
       <body className="min-h-screen font-sans">
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
-          {children}
+          <SmoothScroll>{children}</SmoothScroll>
         </ThemeProvider>
       </body>
     </html>
diff --git a/apps/web/components/marketing/faq-list.tsx b/apps/web/components/marketing/faq-list.tsx
new file mode 100644
index 0000000..1149772
--- /dev/null
+++ b/apps/web/components/marketing/faq-list.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+/** Accordion FAQ — one item open at a time, animated with grid-template-rows. */
+export function FaqList({ items }: { items: { q: string; a: string }[] }) {
+  const [open, setOpen] = useState<number | null>(0);
+
+  return (
+    <div className="mt-14 border-t border-border">
+      {items.map((f, i) => {
+        const isOpen = open === i;
+        return (
+          <div key={f.q} className="border-b border-border">
+            <button
+              type="button"
+              aria-expanded={isOpen}
+              onClick={() => setOpen(isOpen ? null : i)}
+              className="flex w-full items-center justify-between gap-4 py-5 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              <span className="font-medium tracking-tight">{f.q}</span>
+              <ChevronDown
+                className={`size-4 shrink-0 text-muted-foreground transition-transform duration-300 ${
+                  isOpen ? "rotate-180" : ""
+                }`}
+              />
+            </button>
+            <div
+              className={`grid transition-[grid-template-rows] duration-300 ease-out ${
+                isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              }`}
+            >
+              <div className="overflow-hidden">
+                <p className="max-w-3xl pb-5 text-sm leading-relaxed text-muted-foreground">
+                  {f.a}
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/forms-table-card.tsx b/apps/web/components/marketing/forms-table-card.tsx
new file mode 100644
index 0000000..a8be1eb
--- /dev/null
+++ b/apps/web/components/marketing/forms-table-card.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { ArrowDown, ArrowUp, Inbox } from "lucide-react";
+import { useState } from "react";
+import { Card } from "@/components/ui/card";
+
+type Row = { slug: string; messages: number; spam: number; lastMin: number };
+
+const ROWS: Row[] = [
+  { slug: "portfolio", messages: 142, spam: 0.4, lastMin: 2 },
+  { slug: "hire-me", messages: 38, spam: 1.1, lastMin: 60 },
+  { slug: "support", messages: 512, spam: 3.8, lastMin: 4 },
+  { slug: "newsletter", messages: 96, spam: 0.9, lastMin: 22 },
+  { slug: "feedback", messages: 27, spam: 0.0, lastMin: 180 },
+];
+
+const COLUMNS: { key: SortKey; label: string; align: string }[] = [
+  { key: "slug", label: "Form", align: "text-left" },
+  { key: "messages", label: "Messages", align: "text-right" },
+  { key: "spam", label: "Spam", align: "text-right" },
+  { key: "lastMin", label: "Last", align: "text-right" },
+];
+
+type SortKey = "slug" | "messages" | "spam" | "lastMin";
+
+function ago(min: number) {
+  return min < 60 ? `${min}m ago` : `${Math.round(min / 60)}h ago`;
+}
+
+/** Demo forms table: sortable columns, hover + selectable rows. */
+export function FormsTableCard() {
+  const [sort, setSort] = useState<{ key: SortKey; dir: 1 | -1 }>({ key: "messages", dir: -1 });
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const rows = [...ROWS].sort((a, b) => {
+    const va = a[sort.key];
+    const vb = b[sort.key];
+    const cmp = typeof va === "string" ? va.localeCompare(vb as string) : (va as number) - (vb as number);
+    return cmp * sort.dir;
+  });
+
+  const toggleSort = (key: SortKey) =>
+    setSort((s) => (s.key === key ? { key, dir: s.dir === 1 ? -1 : 1 } : { key, dir: key === "slug" ? 1 : -1 }));
+
+  return (
+    <Card className="bg-card order-2 overflow-hidden p-0 lg:order-1">
+      <div className="grid grid-cols-4 border-b border-border px-5 py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
+        {COLUMNS.map((c) => (
+          <button
+            key={c.key}
+            type="button"
+            onClick={() => toggleSort(c.key)}
+            aria-label={`Sort by ${c.label}`}
+            className={`flex items-center gap-1 py-1 uppercase tracking-wide transition-colors hover:text-foreground focus-visible:outline-none focus-visible:text-foreground ${
+              c.align === "text-right" ? "justify-end" : ""
+            }`}
+          >
+            {c.label}
+            {sort.key === c.key ? (
+              sort.dir === 1 ? (
+                <ArrowUp className="size-3" />
+              ) : (
+                <ArrowDown className="size-3" />
+              )
+            ) : null}
+          </button>
+        ))}
+      </div>
+      {rows.map((r) => (
+        <button
+          key={r.slug}
+          type="button"
+          onClick={() => setSelected(selected === r.slug ? null : r.slug)}
+          aria-pressed={selected === r.slug}
+          className={`grid w-full grid-cols-4 items-center border-b border-border px-5 py-3.5 text-left text-sm transition-colors last:border-0 focus-visible:outline-none ${
+            selected === r.slug ? "bg-brand/10" : "hover:bg-secondary/50"
+          }`}
+        >
+          <span className="flex items-center gap-2 font-mono text-xs">
+            <Inbox className="size-3.5 text-muted-foreground" />
+            {r.slug}
+          </span>
+          <span className="text-right font-medium">{r.messages}</span>
+          <span className="text-right text-muted-foreground">{r.spam.toFixed(1)}%</span>
+          <span className="text-right text-xs text-muted-foreground">{ago(r.lastMin)}</span>
+        </button>
+      ))}
+    </Card>
+  );
+}
diff --git a/apps/web/components/marketing/hero-preview.tsx b/apps/web/components/marketing/hero-preview.tsx
new file mode 100644
index 0000000..d07886c
--- /dev/null
+++ b/apps/web/components/marketing/hero-preview.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+
+const DAYS = [
+  { day: "Mon", slots: ["10:00", "11:30", "15:00"] },
+  { day: "Tue", slots: ["09:00", "09:30", "10:00"] },
+  { day: "Wed", slots: ["13:00", "14:30", "16:00"] },
+  { day: "Thu", slots: ["09:30", "11:00", "15:30"] },
+];
+
+type Row = { id: string; n: string; m: string; fresh?: boolean; booking?: boolean };
+
+const INBOX: Row[] = [
+  { id: "seed-1", n: "Jane Visitor", m: "Saw your portfolio, can we talk?" },
+  { id: "seed-2", n: "Marc Dev", m: "Question about the API pricing" },
+  { id: "seed-3", n: "Priya S.", m: "Booking rescheduled to Thursday" },
+];
+
+let rowId = 0;
+
+/**
+ * Working product shot. Left: pick a day and slot to book. Right: a live
+ * inbox — send it a message yourself. Both flows land as rows with the
+ * matching API call shown underneath.
+ */
+export function HeroPreview() {
+  const [day, setDay] = useState(1);
+  const [slot, setSlot] = useState<number | null>(0);
+  const [feed, setFeed] = useState<Row[]>(INBOX);
+  const [draft, setDraft] = useState("");
+  const [lastCall, setLastCall] = useState("/SubmitMessage");
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const toggleSelect = (id: string) =>
+    setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
+
+  const archiveSelected = () => {
+    setFeed((f) => f.filter((r) => !selected.includes(r.id)));
+    setSelected([]);
+    setLastCall("/ArchiveMessages");
+  };
+
+  const pickDay = (i: number) => {
+    setDay(i);
+    setSlot(null);
+  };
+
+  const pickSlot = (i: number) => {
+    setSlot(i);
+    setFeed((f) => [
+      {
+        id: `row-${rowId++}`,
+        n: "Grace Hopper",
+        m: `Intro Call confirmed · ${DAYS[day].day} ${DAYS[day].slots[i]}`,
+        fresh: true,
+        booking: true,
+      },
+      // A rebooking replaces the previous confirmation instead of stacking up.
+      ...f.filter((r) => !r.booking).map((r) => ({ ...r, fresh: false })),
+    ]);
+    setLastCall("/CreateBooking");
+  };
+
+  const sendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    const text = draft.trim();
+    if (!text) return;
+    setFeed((f) => [
+      { id: `row-${rowId++}`, n: "You", m: text, fresh: true },
+      ...f.map((r) => ({ ...r, fresh: false })),
+    ]);
+    setDraft("");
+    setLastCall("/SubmitMessage");
+  };
+
+  return (
+    <div className="relative mt-16 w-full max-w-4xl animate-fade-up">
+      <Card className="glass overflow-hidden p-2 shadow-2xl">
+        <div className="rounded-md border border-border bg-background">
+          <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
+            <span className="size-2.5 rounded-full bg-destructive/60" />
+            <span className="size-2.5 rounded-full bg-yellow-500/60" />
+            <span className="size-2.5 rounded-full bg-emerald-500/60" />
+            <span className="ml-3 font-mono text-[11px] text-muted-foreground">
+              halomail.app/book/grace-hopper
+            </span>
+          </div>
+
+          <div className="grid gap-4 p-4 text-left sm:grid-cols-2">
+            <div className="rounded-lg border border-border p-4">
+              <p className="text-xs text-muted-foreground">Intro Call · 30 min</p>
+              <p className="mt-1 font-medium">Pick a time</p>
+              <div className="mt-3 flex gap-1.5">
+                {DAYS.map((d, i) => (
+                  <button
+                    key={d.day}
+                    type="button"
+                    aria-pressed={i === day}
+                    onClick={() => pickDay(i)}
+                    className={`flex-1 rounded-md border px-2 py-2 text-center text-[11px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+                      i === day
+                        ? "border-foreground/30 bg-secondary font-medium"
+                        : "border-border text-muted-foreground hover:bg-secondary/50"
+                    }`}
+                  >
+                    {d.day}
+                  </button>
+                ))}
+              </div>
+              <div className="mt-3 space-y-1.5">
+                {DAYS[day].slots.map((t, i) => (
+                  <button
+                    key={t}
+                    type="button"
+                    aria-pressed={i === slot}
+                    onClick={() => pickSlot(i)}
+                    className={`block w-full rounded-md border px-3 py-2 text-left font-mono text-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+                      i === slot
+                        ? "border-brand/40 bg-brand/10 text-brand"
+                        : "border-border text-muted-foreground hover:border-brand/30 hover:text-foreground"
+                    }`}
+                  >
+                    {t}
+                    {i === slot ? <span className="float-right">✓ booked</span> : null}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-border p-4">
+              <div className="flex items-center justify-between">
+                <p className="text-xs text-muted-foreground">Inbox</p>
+                <Badge variant="success" className="px-1.5 py-0 text-[10px]">live</Badge>
+              </div>
+              <div className="mt-3 space-y-2">
+                {feed.length === 0 ? (
+                  <p className="rounded-md border border-dashed border-border px-3 py-4 text-center text-[11px] text-muted-foreground">
+                    Inbox zero 🎉
+                  </p>
+                ) : null}
+                {feed.slice(0, 3).map((row) => {
+                  const isSelected = selected.includes(row.id);
+                  return (
+                    <button
+                      key={row.id}
+                      type="button"
+                      role="checkbox"
+                      aria-checked={isSelected}
+                      onClick={() => toggleSelect(row.id)}
+                      className={`block w-full rounded-md border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+                        isSelected
+                          ? "border-brand/60 bg-brand/10"
+                          : row.fresh
+                            ? "animate-fade-up border-brand/40 bg-brand/5"
+                            : "border-border hover:bg-secondary/40"
+                      }`}
+                    >
+                      <p className="flex items-center gap-1.5 text-xs font-medium">
+                        <span
+                          className={`flex size-3 items-center justify-center rounded-sm border text-[8px] leading-none ${
+                            isSelected
+                              ? "border-brand bg-brand text-white"
+                              : "border-border text-transparent"
+                          }`}
+                        >
+                          ✓
+                        </span>
+                        {row.n}
+                        {row.fresh && !isSelected ? (
+                          <span className="size-1.5 rounded-full bg-brand" />
+                        ) : null}
+                      </p>
+                      <p className="truncate pl-[18px] text-[11px] text-muted-foreground">{row.m}</p>
+                    </button>
+                  );
+                })}
+              </div>
+
+              {selected.length > 0 ? (
+                <div className="mt-2 flex items-center justify-between rounded-md border border-brand/30 bg-brand/5 px-2.5 py-1.5 text-[11px]">
+                  <span className="text-muted-foreground">
+                    <span className="font-medium text-foreground">{selected.length}</span> selected
+                  </span>
+                  <span className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={() => setSelected([])}
+                      className="text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none"
+                    >
+                      Clear
+                    </button>
+                    <button
+                      type="button"
+                      onClick={archiveSelected}
+                      className="font-medium text-brand transition-colors hover:text-brand/80 focus-visible:outline-none"
+                    >
+                      Archive
+                    </button>
+                  </span>
+                </div>
+              ) : null}
+
+              <form onSubmit={sendMessage} className="mt-3 flex gap-1.5">
+                <input
+                  value={draft}
+                  onChange={(e) => setDraft(e.target.value)}
+                  placeholder="Try it, say hello…"
+                  aria-label="Send a test message"
+                  maxLength={80}
+                  className="h-8 min-w-0 flex-1 rounded-md border border-border bg-background px-2.5 text-xs placeholder:text-muted-foreground/70 focus:outline-none focus:ring-1 focus:ring-ring"
+                />
+                <button
+                  type="submit"
+                  className="h-8 shrink-0 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                >
+                  Send
+                </button>
+              </form>
+
+              <p className="mt-3 font-mono text-[10px] text-muted-foreground">
+                POST {lastCall} · 200 OK
+              </p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/scheduling-demo.tsx b/apps/web/components/marketing/scheduling-demo.tsx
new file mode 100644
index 0000000..d41bd5a
--- /dev/null
+++ b/apps/web/components/marketing/scheduling-demo.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useState } from "react";
+
+const DAYS = [
+  { day: "Mon", booked: 3 },
+  { day: "Tue", booked: 5 },
+  { day: "Wed", booked: 2 },
+  { day: "Thu", booked: 6 },
+  { day: "Fri", booked: 4 },
+  { day: "Sat", booked: 1 },
+  { day: "Sun", booked: 5 },
+];
+const MAX = 8;
+
+const BOOKINGS = [
+  { title: "Intro Call", when: "Tue 09:00", day: 1 },
+  { title: "Design Review", when: "Wed 14:30", day: 2 },
+  { title: "Pairing", when: "Thu 11:00", day: 3 },
+];
+
+const DEFAULT_DAY = 3;
+
+/**
+ * Linked scheduling demo: the booked-hours strip and the bookings list share
+ * one selected day — hover either side and the other follows.
+ */
+export function SchedulingDemo() {
+  const [active, setActive] = useState(DEFAULT_DAY);
+
+  return (
+    <div className="mt-6 grid gap-3 sm:grid-cols-2">
+      <div className="rounded-lg border border-border bg-background p-4">
+        <p className="text-xs text-muted-foreground">Weekly rules</p>
+        <div className="mt-3 space-y-2">
+          {[
+            ["Mon – Fri", "09:00 – 17:00"],
+            ["Saturday", "Unavailable"],
+          ].map(([d, t]) => (
+            <div key={d} className="flex items-center justify-between text-xs">
+              <span className="text-muted-foreground">{d}</span>
+              <span className="font-mono">{t}</span>
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 flex h-16 items-end gap-1" onMouseLeave={() => setActive(DEFAULT_DAY)}>
+          {DAYS.map((d, i) => (
+            <button
+              key={d.day}
+              type="button"
+              aria-label={`${d.day}: ${d.booked} bookings`}
+              onMouseEnter={() => setActive(i)}
+              onFocus={() => setActive(i)}
+              style={{ height: `${(d.booked / MAX) * 100}%` }}
+              className={`flex-1 rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+                i === active ? "bg-brand/70" : "bg-secondary hover:bg-secondary/70"
+              }`}
+            />
+          ))}
+        </div>
+        <p className="mt-2 text-[11px] text-muted-foreground">
+          {DAYS[active].day} ·{" "}
+          <span className="font-medium text-foreground">{DAYS[active].booked} bookings</span>
+        </p>
+      </div>
+
+      <div className="rounded-lg border border-border bg-background p-4">
+        <p className="text-xs text-muted-foreground">Next bookings</p>
+        <div className="mt-3 space-y-2">
+          {BOOKINGS.map((b) => (
+            <div
+              key={b.title}
+              onMouseEnter={() => setActive(b.day)}
+              className={`flex items-center justify-between rounded-md border px-3 py-2 transition-colors ${
+                b.day === active
+                  ? "border-brand/40 bg-brand/10"
+                  : "border-border hover:border-brand/40 hover:bg-brand/5"
+              }`}
+            >
+              <span className="text-xs font-medium">{b.title}</span>
+              <span className="font-mono text-[11px] text-muted-foreground">{b.when}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/spam-demo.tsx b/apps/web/components/marketing/spam-demo.tsx
new file mode 100644
index 0000000..22fd6a3
--- /dev/null
+++ b/apps/web/components/marketing/spam-demo.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+
+type Entry = { email: string; score: number; reason: string };
+
+const POOL: Entry[] = [
+  { email: "jane@example.com", score: 0.02, reason: "Honeypot untouched · normal typing cadence" },
+  { email: "winner@lottery.biz", score: 0.97, reason: "Honeypot filled · burst of 14 requests from one IP" },
+  { email: "marc@studio.dev", score: 0.05, reason: "Known sender · passed all heuristics" },
+  { email: "free-crypto@pump.io", score: 0.99, reason: "Link-stuffed body · disposable domain" },
+  { email: "recruiter@bigco.com", score: 0.11, reason: "First-time sender · clean content" },
+  { email: "seo-guru@backlinks.cc", score: 0.93, reason: "Keyword spam · failed rate limit" },
+  { email: "priya@design.studio", score: 0.03, reason: "Honeypot untouched · verified domain" },
+];
+
+const VISIBLE = 3;
+
+/**
+ * Live spam-scoring demo: submissions stream in and get scored; hovering
+ * pauses the stream and reveals why each one passed or failed.
+ */
+export function SpamDemo() {
+  const [head, setHead] = useState(VISIBLE);
+  const [paused, setPaused] = useState(false);
+  const [hovered, setHovered] = useState<number | null>(null);
+  const reduced = useRef(false);
+
+  useEffect(() => {
+    reduced.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }, []);
+
+  useEffect(() => {
+    if (paused || reduced.current) return;
+    const id = setInterval(() => setHead((h) => h + 1), 2600);
+    return () => clearInterval(id);
+  }, [paused]);
+
+  const rows = Array.from(
+    { length: VISIBLE },
+    (_, i) => POOL[(head - i + POOL.length * 100) % POOL.length],
+  );
+
+  return (
+    <div
+      className="mt-6 space-y-2"
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+    >
+      {rows.map((r, i) => (
+        <div
+          key={`${r.email}-${head - i}`}
+          onMouseEnter={() => setHovered(i)}
+          onMouseLeave={() => setHovered(null)}
+          className={`rounded-md border border-border bg-background px-3 py-2 transition-colors hover:border-foreground/20 ${
+            i === 0 ? "animate-fade-up" : ""
+          }`}
+        >
+          <div className="flex items-center justify-between">
+            <span className="truncate text-xs text-muted-foreground">{r.email}</span>
+            <Badge
+              variant={r.score > 0.5 ? "danger" : "success"}
+              className="ml-2 px-1.5 py-0 text-[10px]"
+            >
+              {r.score.toFixed(2)}
+            </Badge>
+          </div>
+          {hovered === i ? (
+            <p className="mt-1 text-[10px] text-muted-foreground">{r.reason}</p>
+          ) : null}
+        </div>
+      ))}
+      <p className="text-[10px] text-muted-foreground/70">
+        {paused ? "Paused · hover a row for the verdict" : "Scoring live submissions…"}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/theme-showcase.tsx b/apps/web/components/marketing/theme-showcase.tsx
new file mode 100644
index 0000000..2fbba6a
--- /dev/null
+++ b/apps/web/components/marketing/theme-showcase.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState } from "react";
+
+const FEATURED = 2;
+
+const THEMES: { name: string; body: React.ReactNode }[] = [
+  {
+    name: "Minimal",
+    body: (
+      <div className="flex h-full flex-col bg-white p-3.5 text-zinc-900">
+        <p className="text-[12px] font-semibold">Thanks for reaching out</p>
+        <p className="mt-2 text-[9.5px] leading-relaxed text-zinc-500">
+          Hi Jane, got your message about the portfolio. I&apos;ll reply within a day, or grab
+          a slot below.
+        </p>
+        <div className="mt-auto w-max rounded-sm bg-zinc-900 px-2.5 py-1.5 text-[9px] font-medium text-white">
+          Book a call
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: "Apple",
+    body: (
+      <div className="flex h-full items-center justify-center bg-zinc-100 p-3">
+        <div className="w-full max-w-[128px] rounded-2xl bg-white p-3 text-center shadow-sm">
+          <div className="mx-auto flex size-7 items-center justify-center rounded-full bg-zinc-100 text-[12px]">
+            👋
+          </div>
+          <p className="mt-1.5 text-[10px] font-semibold text-zinc-900">You&apos;re booked</p>
+          <p className="mt-0.5 text-[8.5px] text-zinc-400">Tue, 09:00 · Intro Call</p>
+          <div className="mx-auto mt-2.5 w-max rounded-full bg-blue-500 px-2.5 py-1 text-[8.5px] font-medium text-white">
+            Add to Calendar
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: "Notion",
+    body: (
+      <div className="h-full bg-white p-3.5 text-zinc-800">
+        <div className="text-[14px]">✉️</div>
+        <p className="mt-1.5 text-[11px] font-semibold">New message · portfolio</p>
+        <p className="mt-1.5 text-[9.5px] leading-relaxed text-zinc-500">
+          Jane Visitor wrote: &quot;Saw your portfolio, can we talk?&quot;
+        </p>
+        <div className="mt-2.5 space-y-1.5 text-[9px] text-zinc-600">
+          <div className="flex items-center gap-1.5">
+            <span className="flex size-2.5 items-center justify-center rounded-sm bg-zinc-800 text-[7px] text-white">
+              ✓
+            </span>
+            <span>Forwarded to inbox</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="size-2.5 rounded-sm border border-zinc-300" />
+            <span>Reply within 24h</span>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: "Glass",
+    body: (
+      <div className="flex h-full items-center justify-center bg-gradient-to-br from-zinc-200 via-zinc-300 to-zinc-400 p-3">
+        <div className="w-full max-w-[128px] rounded-xl border border-white/60 bg-white/50 p-3 text-zinc-900 shadow-sm backdrop-blur-md">
+          <p className="text-[10px] font-semibold">Meeting confirmed</p>
+          <p className="mt-1 text-[8.5px] text-zinc-600">Wed 14:30 · Design Review</p>
+          <div className="mt-2.5 w-max rounded-md border border-white/70 bg-white/70 px-2.5 py-1 text-[8.5px] font-medium text-zinc-800">
+            Join call
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: "Terminal",
+    body: (
+      <div className="h-full whitespace-nowrap bg-zinc-950 p-3 font-mono text-[9px] leading-relaxed text-emerald-400">
+        <p>$ halomail send</p>
+        <p className="text-emerald-300/70">from: jane@example.com</p>
+        <p className="text-emerald-300/70">subject: let&apos;s talk</p>
+        <p className="mt-1.5 text-emerald-200">delivered · 200 OK</p>
+        <p className="mt-1">▮</p>
+      </div>
+    ),
+  },
+];
+
+/**
+ * Expanding theme previews. The active panel is wide, the rest are slivers;
+ * hovering (or focusing) a panel hands it the focus, and leaving the strip
+ * returns it to the featured theme. State lives in React so it can never
+ * stick to a stale panel.
+ */
+export function ThemeShowcase() {
+  const [active, setActive] = useState(FEATURED);
+
+  return (
+    <div
+      className="mt-6 flex h-64 gap-2"
+      onMouseLeave={() => setActive(FEATURED)}
+    >
+      {THEMES.map((t, i) => (
+        <div
+          key={t.name}
+          onMouseEnter={() => setActive(i)}
+          onFocus={() => setActive(i)}
+          tabIndex={0}
+          role="img"
+          aria-label={`${t.name} email theme preview`}
+          style={{ flexGrow: active === i ? 4 : 1 }}
+          className="relative min-w-0 basis-0 overflow-hidden rounded-md border border-border transition-[flex-grow] duration-500 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        >
+          <div className="h-full w-[200px] min-w-full">{t.body}</div>
+          <span className="absolute bottom-1.5 left-1.5 rounded bg-background/75 px-1.5 py-0.5 text-[10px] text-foreground backdrop-blur">
+            {t.name}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/components/marketing/week-card.tsx b/apps/web/components/marketing/week-card.tsx
new file mode 100644
index 0000000..082da49
--- /dev/null
+++ b/apps/web/components/marketing/week-card.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Card } from "@/components/ui/card";
+
+/** Counts from the previous value to the next one whenever it changes. */
+function AnimatedNumber({ value }: { value: string }) {
+  const target = parseFloat(value);
+  const suffix = value.replace(String(target), "");
+  const [display, setDisplay] = useState(target);
+  const prev = useRef(target);
+
+  useEffect(() => {
+    const from = prev.current;
+    prev.current = target;
+    if (from === target) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setDisplay(target);
+      return;
+    }
+    const start = performance.now();
+    const duration = 600;
+    let raf: number;
+    const tick = (t: number) => {
+      const p = Math.min(1, (t - start) / duration);
+      const eased = 1 - (1 - p) ** 3;
+      setDisplay(Math.round(from + (target - from) * eased));
+      if (p < 1) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target]);
+
+  return (
+    <>
+      {display}
+      {suffix}
+    </>
+  );
+}
+
+type RangeKey = "1D" | "7D";
+
+const CHART = { w: 320, h: 90, top: 10, bottom: 82 };
+
+const RANGES: Record<
+  RangeKey,
+  {
+    stats: [string, string][];
+    labels: string[];
+    current: number[];
+    previous: number[];
+    currentName: string;
+    previousName: string;
+  }
+> = {
+  "1D": {
+    stats: [
+      ["Bookings", "6"],
+      ["Messages", "21"],
+      ["Show rate", "89%"],
+    ],
+    labels: ["9a", "11a", "1p", "3p", "5p", "7p", "9p"],
+    current: [2, 5, 4, 8, 6, 9, 7],
+    previous: [1, 3, 4, 5, 4, 6, 5],
+    currentName: "Today",
+    previousName: "Yesterday",
+  },
+  "7D": {
+    stats: [
+      ["Bookings", "34"],
+      ["Messages", "128"],
+      ["Show rate", "92%"],
+    ],
+    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    current: [8, 14, 11, 24, 21, 32, 38],
+    previous: [5, 9, 7, 14, 11, 18, 22],
+    currentName: "This week",
+    previousName: "Last week",
+  },
+};
+
+function toPoints(values: number[], max: number) {
+  const step = CHART.w / (values.length - 1);
+  return values.map((v, i) => ({
+    x: i * step,
+    y: CHART.bottom - (v / max) * (CHART.bottom - CHART.top),
+  }));
+}
+
+export function WeekCard() {
+  const [range, setRange] = useState<RangeKey>("7D");
+  const [hover, setHover] = useState<number | null>(null);
+
+  const data = RANGES[range];
+  const max = Math.max(...data.current, ...data.previous);
+  const cur = toPoints(data.current, max);
+  const prev = toPoints(data.previous, max);
+  const polyline = (pts: { x: number; y: number }[]) =>
+    pts.map((p) => `${p.x},${p.y}`).join(" ");
+
+  const onMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * CHART.w;
+    const step = CHART.w / (data.labels.length - 1);
+    setHover(Math.min(data.labels.length - 1, Math.max(0, Math.round(x / step))));
+  };
+
+  return (
+    <Card className="bg-card overflow-hidden p-5">
+      <div className="flex items-center justify-between">
+        <p className="text-sm font-medium">{data.currentName}</p>
+        <div className="flex gap-1">
+          {(["1D", "7D"] as const).map((t) => (
+            <button
+              key={t}
+              type="button"
+              aria-pressed={range === t}
+              onClick={() => {
+                setRange(t);
+                setHover(null);
+              }}
+              className={`rounded-md border px-2 py-0.5 text-[11px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+                range === t
+                  ? "border-foreground/25 bg-secondary"
+                  : "border-border text-muted-foreground hover:bg-secondary/60"
+              }`}
+            >
+              {t}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-4 grid grid-cols-3 gap-3">
+        {data.stats.map(([k, v]) => (
+          <div key={k} className="rounded-lg border border-border bg-background p-3">
+            <p className="text-[11px] text-muted-foreground">{k}</p>
+            <p className="mt-1 text-xl font-semibold tracking-tight">
+              <AnimatedNumber value={v} />
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg border border-border bg-background p-4">
+        <div className="relative">
+          <svg
+            viewBox={`0 0 ${CHART.w} ${CHART.h}`}
+            className="h-24 w-full cursor-crosshair"
+            role="img"
+            aria-label={`${data.currentName} volume vs ${data.previousName.toLowerCase()}`}
+            onPointerMove={onMove}
+            onPointerLeave={() => setHover(null)}
+          >
+            {hover !== null ? (
+              <line
+                x1={cur[hover].x}
+                x2={cur[hover].x}
+                y1={CHART.top - 6}
+                y2={CHART.bottom + 4}
+                stroke="hsl(var(--border))"
+                strokeWidth="1"
+              />
+            ) : null}
+            <polyline
+              points={polyline(prev)}
+              fill="none"
+              stroke="hsl(var(--muted-foreground))"
+              strokeWidth="1.5"
+              strokeDasharray="3 3"
+              opacity="0.5"
+            />
+            <polyline
+              points={polyline(cur)}
+              fill="none"
+              stroke="hsl(var(--brand))"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            {hover !== null ? (
+              <>
+                <circle
+                  cx={prev[hover].x}
+                  cy={prev[hover].y}
+                  r="3.5"
+                  fill="hsl(var(--muted-foreground))"
+                  stroke="hsl(var(--background))"
+                  strokeWidth="2"
+                />
+                <circle
+                  cx={cur[hover].x}
+                  cy={cur[hover].y}
+                  r="4"
+                  fill="hsl(var(--brand))"
+                  stroke="hsl(var(--background))"
+                  strokeWidth="2"
+                />
+              </>
+            ) : null}
+          </svg>
+
+          {hover !== null ? (
+            <div
+              className="pointer-events-none absolute top-0 z-10 -translate-y-1 rounded-md border border-border bg-card px-2.5 py-1.5 text-[11px] shadow-md"
+              style={{
+                left: `${(cur[hover].x / CHART.w) * 100}%`,
+                transform: `translateX(${cur[hover].x > CHART.w * 0.7 ? "-100%" : cur[hover].x < CHART.w * 0.15 ? "0" : "-50%"})`,
+              }}
+            >
+              <p className="font-medium text-foreground">{data.labels[hover]}</p>
+              <p className="mt-0.5 whitespace-nowrap text-muted-foreground">
+                {data.currentName}: <span className="font-medium text-foreground">{data.current[hover]}</span>
+              </p>
+              <p className="whitespace-nowrap text-muted-foreground">
+                {data.previousName}: <span className="font-medium text-foreground">{data.previous[hover]}</span>
+              </p>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="mt-2 flex justify-between font-mono text-[10px] text-muted-foreground">
+          {data.labels.map((d) => (
+            <span key={d}>{d}</span>
+          ))}
+        </div>
+
+        <div className="mt-3 flex items-center gap-4 text-[11px] text-muted-foreground">
+          <span className="flex items-center gap-1.5">
+            <span className="h-0.5 w-4 rounded-full bg-brand" />
+            {data.currentName}
+          </span>
+          <span className="flex items-center gap-1.5">
+            <span className="h-px w-4 border-t border-dashed border-muted-foreground" />
+            {data.previousName}
+          </span>
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/apps/web/components/site-footer.tsx b/apps/web/components/site-footer.tsx
index be8b191..e7a0ff4 100644
--- a/apps/web/components/site-footer.tsx
+++ b/apps/web/components/site-footer.tsx
@@ -15,7 +15,7 @@ export function SiteFooter() {
         <FooterCol
           title="Product"
           links={[
-            ["Features", "/features"],
+            ["Features", "/#features"],
             ["Pricing", "/pricing"],
             ["Booking", "/book/demo"],
           ]}
@@ -32,7 +32,7 @@ export function SiteFooter() {
         <FooterCol
           title="Company"
           links={[
-            ["GitHub", "https://github.com/aashishrajdev/halomail"],
+            ["GitHub", "https://github.com/zeroaxiis/halomail"],
             ["Privacy", "#"],
             ["Terms", "#"],
           ]}
diff --git a/apps/web/components/site-header.tsx b/apps/web/components/site-header.tsx
index e73b121..57cde5c 100644
--- a/apps/web/components/site-header.tsx
+++ b/apps/web/components/site-header.tsx
@@ -14,7 +14,6 @@ export function SiteHeader() {
             <Logo />
           </Link>
           <nav className="hidden gap-6 text-sm text-muted-foreground md:flex">
-            <Link href="/features" className="transition-colors hover:text-foreground">Features</Link>
             <Link href="/pricing" className="transition-colors hover:text-foreground">Pricing</Link>
             {/* Static page copied from apps/docs by scripts/copy-docs.mjs, so it
                 is a plain <a>, not a Next route. */}
diff --git a/apps/web/components/smooth-scroll.tsx b/apps/web/components/smooth-scroll.tsx
new file mode 100644
index 0000000..51377d1
--- /dev/null
+++ b/apps/web/components/smooth-scroll.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { ReactLenis } from "lenis/react";
+
+export function SmoothScroll({ children }: { children: React.ReactNode }) {
+  return (
+    <ReactLenis
+      root
+      options={{
+        duration: 1.1,
+        smoothWheel: true,
+        anchors: true,
+      }}
+    >
+      {children}
+    </ReactLenis>
+  );
+}
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 93ea0c4..b6aaf9c 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-200 [&:hover_.lucide-arrow-right]:translate-x-0.5 [&:hover_.lucide-arrow-up-right]:translate-x-0.5 [&:hover_.lucide-arrow-up-right]:-translate-y-0.5",
   {
     variants: {
       variant: {
diff --git a/apps/web/package.json b/apps/web/package.json
index f5f5015..41ba455 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,6 +13,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "geist": "^1.3.1",
+    "lenis": "^1.3.26",
     "lucide-react": "^0.469.0",
     "next": "15.5.23",
     "next-themes": "^0.4.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b502862..953af68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       geist:
         specifier: ^1.3.1
         version: 1.7.2(next@15.5.23(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
+      lenis:
+        specifier: ^1.3.26
+        version: 1.3.26(react@19.0.0)
       lucide-react:
         specifier: ^0.469.0
         version: 0.469.0(react@19.0.0)
@@ -559,6 +562,20 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
+  lenis@1.3.26:
+    resolution: {integrity: sha512-s/xTCZCxTFvHbAN1OzuhNaN5YPJH2ail0XAkctKW1b+RUAG4nUL5UHLXwNko1h8aEeT2jspBXegMgPJd8zcuag==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      react: '>=17.0.0'
+      vue: '>=3.0.0'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      react:
+        optional: true
+      vue:
+        optional: true
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -1178,6 +1195,10 @@ snapshots:
 
   jiti@1.21.7: {}
 
+  lenis@1.3.26(react@19.0.0):
+    optionalDependencies:
+      react: 19.0.0
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
