@thewhatmatters/wmds 0.2.0

package/docs/patterns/components-chart--unit-grid-composition.tsx

@@ -0,0 +1,22 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — 100-unit composition
+// Storybook: Components/Chart → Pattern — 100-unit composition (?path=/story/components-chart--unit-grid-composition)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Chart, chartSeriesConfigFromKeys } from "@thewhatmatters/wmds";
+
+const config = chartSeriesConfigFromKeys([
+  { key: "women", label: "Women" },
+  { key: "men", label: "Men" },
+  { key: "unspecified", label: "Not specified" },
+]);
+
+<Chart.UnitGrid
+  aria-label="Audience gender: 68% women, 30% men, 2% not specified"
+  config={config}
+  parts={[
+    { key: "women", value: 68 },
+    { key: "men", value: 30 },
+    { key: "unspecified", value: 2 },
+  ]}
+  minHeight={240}
+/>

package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx

@@ -0,0 +1,25 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — Q&A with reply
+// Storybook: Components/ChatQa → Pattern — Q&A with reply (?path=/story/components-chatqa--pattern-qa-with-reply)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { ChatQa } from "@thewhatmatters/wmds";
+
+const pairs = [
+  { question: "What are you shipping next?", answer: "A new feature" },
+  { question: "Which platforms does it need to cover?", answer: "Web, Chrome extension" },
+  {
+    question: "Rank WhatMatters most for this launch",
+    answer: "Ranked: 1. Speed to ship, 2. Polish, 3. Marketing readiness, 4. Test coverage",
+  },
+];
+
+export function IntakeAnswersInThread() {
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-6">
+      <ChatQa pairs={pairs} />
+      <p className="type-body text-fg">
+        That&apos;s the full loop — shipping surface, platforms, and what to optimize for first. Next we would sketch the feature path, then pin the Chrome extension shell so the web cut and the extension stay on one system.
+      </p>
+    </div>
+  );
+}

package/docs/patterns/components-checkbox-checkbox--default.tsx

@@ -0,0 +1,17 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — default
+// Storybook: Components/Checkbox/Checkbox → Pattern — default (?path=/story/components-checkbox-checkbox--default)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Checkbox } from "@thewhatmatters/wmds";
+
+export function TermsCheckbox() {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      label="Accept terms and conditions"
+      checked={checked}
+      onChange={(event) => setChecked(event.target.checked)}
+    />
+  );
+}

package/docs/patterns/components-checkbox-checkbox--with-description.tsx

@@ -0,0 +1,18 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — with description
+// Storybook: Components/Checkbox/Checkbox → Pattern — with description (?path=/story/components-checkbox-checkbox--with-description)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Checkbox } from "@thewhatmatters/wmds";
+
+export function NewsletterCheckbox() {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      label="Subscribe to newsletter"
+      description="Receive weekly updates about new features and announcements."
+      checked={checked}
+      onChange={(event) => setChecked(event.target.checked)}
+    />
+  );
+}

package/docs/patterns/components-checkbox-checkboxgroup--default.tsx

@@ -0,0 +1,21 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — default
+// Storybook: Components/Checkbox/CheckboxGroup → Pattern — default (?path=/story/components-checkbox-checkboxgroup--default)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { CheckboxGroup } from "@thewhatmatters/wmds";
+
+export function AlertPreferences() {
+  const [values, setValues] = useState(["email"]);
+  return (
+    <CheckboxGroup
+      label="Alert type"
+      values={values}
+      onValuesChange={setValues}
+    >
+      <CheckboxGroup.Item value="email" label="Email alerts" />
+      <CheckboxGroup.Item value="push" label="Push notifications" />
+      <CheckboxGroup.Item value="weekly" label="Weekly summary" />
+    </CheckboxGroup>
+  );
+}

package/docs/patterns/components-dialog--alert-dialog-destructive.tsx

@@ -0,0 +1,28 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — alert dialog (destructive)
+// Storybook: Components/Dialog → Pattern — alert dialog (destructive) (?path=/story/components-dialog--alert-dialog-destructive)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { AlertDialog, Button } from "@thewhatmatters/wmds";
+
+export function DeleteProjectAlert() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button role="destructive" onClick={() => setOpen(true)}>
+        Delete project
+      </Button>
+      <AlertDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Delete this project?"
+        description="This removes all tasks and history. You cannot undo this action."
+        cancelLabel="Keep project"
+        confirmLabel="Delete project"
+        confirmRole="destructive"
+        onConfirm={() => setOpen(false)}
+      />
+    </>
+  );
+}

package/docs/patterns/components-dialog--default-dialog.tsx

@@ -0,0 +1,39 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — dialog
+// Storybook: Components/Dialog → Pattern — dialog (?path=/story/components-dialog--default-dialog)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Button, Dialog } from "@thewhatmatters/wmds";
+import { dialogFooterActionsClasses } from "@thewhatmatters/wmds";
+
+export function NotificationSettingsDialog() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button role="primary" onClick={() => setOpen(true)}>
+        Open settings
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog.Content
+          title="Notification settings"
+          description="Choose how WhatMatters reaches you."
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button size="sm" role="primary" onClick={() => setOpen(false)}>
+                Save
+              </Button>
+            </div>
+          }
+        >
+          <p className="text-muted">
+            Email digests and push alerts can be configured in your account preferences.
+          </p>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+}

package/docs/patterns/components-dialog--form-dialog.tsx

@@ -0,0 +1,41 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — form dialog
+// Storybook: Components/Dialog → Pattern — form dialog (?path=/story/components-dialog--form-dialog)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Button, Dialog, Input } from "@thewhatmatters/wmds";
+import { dialogFooterActionsClasses } from "@thewhatmatters/wmds";
+
+export function InviteDialog() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button role="secondary" onClick={() => setOpen(true)}>
+        Invite teammate
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog.Content
+          size="lg"
+          title="Invite teammate"
+          description="Send an email invite to join this workspace."
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button size="sm" role="primary" onClick={() => setOpen(false)}>
+                Send invite
+              </Button>
+            </div>
+          }
+        >
+          <div className="flex flex-col gap-4 pb-2">
+            <Input label="Email address" placeholder="name@company.com" />
+            <Input label="Role" placeholder="Editor" />
+          </div>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+}

package/docs/patterns/components-displaycontrols--page-utilities.tsx

@@ -0,0 +1,36 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — page display controls
+// Storybook: Components/DisplayControls → Pattern — page display controls (?path=/story/components-displaycontrols--page-utilities)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import {
+  DisplayControls,
+  GridOverlay,
+  type DisplayControlThemeMode,
+} from "@thewhatmatters/wmds";
+
+export function Page() {
+  const [gridVisible, setGridVisible] = useState(false);
+  const [theme, setTheme] = useState<DisplayControlThemeMode>("auto");
+
+  return (
+    <div data-theme={theme === "auto" ? undefined : theme} className="relative">
+      <main className="grid-page">
+        <GridOverlay
+          visible={gridVisible}
+          onVisibleChange={setGridVisible}
+          keyboardShortcut={false}
+        />
+        <div className="band">{/* page content */}</div>
+      </main>
+
+      <DisplayControls
+        className="fixed bottom-4 right-4"
+        gridVisible={gridVisible}
+        onGridVisibleChange={setGridVisible}
+        theme={theme}
+        onThemeChange={setTheme}
+      />
+    </div>
+  );
+}

package/docs/patterns/components-field--horizontal-input.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — horizontal input
+// Storybook: Components/Field → Pattern — horizontal input (?path=/story/components-field--horizontal-input)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Field, Input } from "@thewhatmatters/wmds";
+
+<Field label="ZIP code" description="5-digit US ZIP." orientation="horizontal">
+  <Input placeholder="97201" aria-label="ZIP code" />
+</Field>

package/docs/patterns/components-field--horizontal-text-area.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — horizontal textarea
+// Storybook: Components/Field → Pattern — horizontal textarea (?path=/story/components-field--horizontal-text-area)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Field, TextArea } from "@thewhatmatters/wmds";
+
+<Field label="Notes" description="Visible to admins only." orientation="horizontal">
+  <TextArea placeholder="Add context…" aria-label="Notes" rows={3} />
+</Field>

package/docs/patterns/components-field--multi-control.tsx

@@ -0,0 +1,10 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — multi-control
+// Storybook: Components/Field → Pattern — multi-control (?path=/story/components-field--multi-control)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Field, Input, Search } from "@thewhatmatters/wmds";
+
+<Field label="Location" description="City or ZIP — search updates the map.">
+  <Search placeholder="ZIP or city" aria-label="Location" actionLabel="GO" />
+  <Input placeholder="Unit / suite (optional)" aria-label="Unit or suite" />
+</Field>

package/docs/patterns/components-footerreveal--marketing-hero-pattern.tsx

@@ -0,0 +1,94 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — marketing hero
+// Storybook: Components/FooterReveal → Pattern — marketing hero (?path=/story/components-footerreveal--marketing-hero-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+import { Sparkles } from "lucide-react";
+import { Badge, Button, FooterReveal, GridOverlay, HeroIntro, HeroTileStack, ScrollHorizontal, SiteNav, footerRevealFieldClasses } from "@thewhatmatters/wmds";
+
+const socialLinks = [
+  { label: "Contra", href: "#contra-TODO" },
+  { label: "Instagram", href: "https://www.instagram.com/thewhatmatters" },
+  { label: "LinkedIn", href: "https://www.linkedin.com/in/randymdaniel" },
+  { label: "X", href: "#x-TODO" },
+] as const;
+
+const tiles = [
+  { src: "/hero-tiles/plan.svg", alt: "Weekly plan on a lime tile" },
+  { src: "/hero-tiles/focus.svg", alt: "Blue focus card" },
+  { src: "/hero-tiles/week.svg", alt: "Abstract shapes for the week" },
+  { src: "/hero-tiles/note.svg", alt: "A pale note about what matters" },
+];
+
+const projects = [
+  { id: "project-one", label: "Project One", color: "var(--color-brand)" },
+  { id: "project-two", label: "Project Two", color: "var(--color-brand-soft)" },
+  { id: "project-three", label: "Project Three", color: "var(--color-primary)" },
+  { id: "project-four", label: "Project Four", color: "var(--color-info-muted)" },
+  { id: "project-five", label: "Project Five", color: "var(--color-accent)" },
+];
+
+// Opens the multi-step project form. There is no /start route.
+function openProjectModal() {}
+
+export function MarketingHeroPage() {
+  return (
+    <FooterReveal>
+      <FooterReveal.Content>
+        <SiteNav
+          start={<SiteNav.Brand href="/" aria-label="WhatMatters" icon={<Sparkles strokeWidth={2} />} />}
+          middle={
+            <SiteNav.Links>
+              <SiteNav.Link href="/product" current>Product</SiteNav.Link>
+              <SiteNav.Link href="/pricing">Pricing</SiteNav.Link>
+              <SiteNav.Link href="/customers">Customers</SiteNav.Link>
+            </SiteNav.Links>
+          }
+          end={
+            <>
+              <Button role="ghost" size="sm" render={<a href="/signin" />} className="whitespace-nowrap">Sign in</Button>
+              <Button role="primary" size="sm" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+            </>
+          }
+          mobile={
+            <>
+              <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+            </>
+          }
+        />
+        <section className="flex min-h-[calc(100svh-var(--site-nav-height))] w-full shrink-0 flex-col items-center justify-center-safe overflow-x-clip overflow-y-visible bg-body py-16 text-center">
+          <div className="flex w-full flex-col items-center gap-6">
+          <HeroIntro lead="We're a design and product studio based in Austin, Texas.">
+            We help brands stand out{" "}
+            <Badge variant="info" size="md" emphasis="muted" className="align-middle" avatar={{ src: "/hero-badges/globe.svg", alt: "" }}>online</Badge>
+            {" "}with bold ideas, fresh approaches, and products people actually love to use.
+          </HeroIntro>
+            <div className="w-full px-[var(--grid-margin)]">
+            <HeroTileStack tiles={tiles} />
+            </div>
+          </div>
+        </section>
+        <ScrollHorizontal
+          items={projects}
+          heading={<h2 className="type-heading-2 text-fg">Selected work</h2>}
+          expandLast
+        />
+        <main className="grid-page bg-body !py-0">
+          <GridOverlay visible keyboardShortcut={false} />
+        </main>
+      </FooterReveal.Content>
+      <FooterReveal.Footer className={footerRevealFieldClasses}>
+        <FooterReveal.Brand
+          headline="We Build WhatMatters"
+          ctaLabel="Start a project"
+          onCtaClick={openProjectModal}
+          wordmark="WHATMATTERS"
+          socialLinks={socialLinks}
+        />
+      </FooterReveal.Footer>
+    </FooterReveal>
+  );
+}

package/docs/patterns/components-footerreveal--marketing-hero-ruled-pattern.tsx

@@ -0,0 +1,121 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — marketing hero ruled grid
+// Storybook: Components/FooterReveal → Pattern — marketing hero ruled grid (?path=/story/components-footerreveal--marketing-hero-ruled-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+// npm install @rive-app/react-canvas gsap @gsap/react
+// Copy public/rive/interactive-icon-set.riv so the app serves /rive/interactive-icon-set.riv.
+// Hand art: CC BY 4.0, Silvia Sguotti and Gabriele Montinaro.
+
+import { Sparkles } from "lucide-react";
+import { Button, FooterReveal, GridOverlay, HeroIntro, HeroTileStack, RiveHand, ScrollHorizontal, SiteNav, TextSequence, footerRevealRuledFieldClasses } from "@thewhatmatters/wmds";
+
+const tiles = [
+  { src: "/hero-tiles/plan.svg", alt: "Weekly plan on a lime tile" },
+  { src: "/hero-tiles/focus.svg", alt: "Blue focus card" },
+  { src: "/hero-tiles/week.svg", alt: "Abstract shapes for the week" },
+  { src: "/hero-tiles/note.svg", alt: "A pale note about what matters" },
+];
+
+const projects = [
+  { id: "project-one", label: "Project One", color: "var(--color-brand)" },
+  { id: "project-two", label: "Project Two", color: "var(--color-brand-soft)" },
+  { id: "project-three", label: "Project Three", color: "var(--color-primary)" },
+  { id: "project-four", label: "Project Four", color: "var(--color-info-muted)" },
+  { id: "project-five", label: "Project Five", color: "var(--color-accent)" },
+];
+
+// Opens the multi-step project form. There is no /start route.
+function openProjectModal() {}
+
+export function MarketingHeroRuledPage() {
+  return (
+    <FooterReveal>
+      <FooterReveal.Content>
+        <SiteNav
+          start={<SiteNav.Brand href="/" aria-label="WhatMatters" icon={<Sparkles strokeWidth={2} />} />}
+          middle={
+            <SiteNav.Links>
+              <SiteNav.Link href="/product" current>Product</SiteNav.Link>
+              <SiteNav.Link href="/pricing">Pricing</SiteNav.Link>
+              <SiteNav.Link href="/customers">Customers</SiteNav.Link>
+            </SiteNav.Links>
+          }
+          end={
+            <>
+              <Button role="ghost" size="sm" render={<a href="/signin" />} className="whitespace-nowrap">Sign in</Button>
+              <Button role="primary" size="sm" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+            </>
+          }
+          mobile={
+            <>
+              <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+            </>
+          }
+        />
+        <section className="flex min-h-[calc(100svh-var(--site-nav-height))] w-full shrink-0 flex-col items-center justify-center-safe overflow-x-clip overflow-y-visible bg-body py-12 text-center">
+          <div className="flex w-full flex-col items-center gap-6">
+          <HeroIntro
+            step="display"
+            lead={
+              <TextSequence idle emphasis="none" stagger={0.07}>
+                {"An "}
+                <span className="whitespace-nowrap">
+                  Austin,&nbsp;TX{" "}
+                  <RiveHand hand="rock" inline idle entrance="none" aria-hidden />
+                  {" "}
+                </span>
+                {"studio specializing in brand and product design."}
+              </TextSequence>
+            }
+          />
+            <div className="w-full px-[var(--grid-margin)]">
+            <HeroTileStack tiles={tiles} />
+            </div>
+          </div>
+        </section>
+        <ScrollHorizontal
+          items={projects}
+          expandLast
+          intro={
+            <ScrollHorizontal.Intro
+              eyebrow="SELECTED WORK"
+              statement={
+                <>
+                  {"Every screen"}
+                  <TextSequence.Shape variant="asterisk" />
+                  {" is a first impression "}
+                  <RiveHand hand="point" inline idle entrance="none" aria-hidden />
+                  {" and we make yours"}
+                  <TextSequence.Shape variant="diamond" tone="accent" />
+                  {" the one they remember."}
+                </>
+              }
+              action={{ label: "Start a project", onClick: openProjectModal }}
+            />
+          }
+        />
+        <main className="grid-page bg-body !py-0">
+          <GridOverlay visible keyboardShortcut={false} />
+        </main>
+      </FooterReveal.Content>
+      <FooterReveal.Footer className={footerRevealRuledFieldClasses}>
+        <FooterReveal.Ruled
+          wordmark="WhatMatters"
+          mark="WM"
+          copyright="WhatMatters © 2026"
+          links={[
+            { label: "Services", href: "/services" },
+            { label: "Resources", href: "/resources" },
+            { label: "About", href: "/about" },
+          ]}
+          email="randy@whatmatters.so"
+          credit="Created by WhatMatters 2024–2026"
+        />
+      </FooterReveal.Footer>
+    </FooterReveal>
+  );
+}

package/docs/patterns/components-footerreveal--marketing-hero-with-gallery-intro.tsx

@@ -0,0 +1,114 @@
+// @thewhatmatters/wmds@0.2.0 · Marketing hero with gallery intro
+// Storybook: Components/FooterReveal → Marketing hero with gallery intro (?path=/story/components-footerreveal--marketing-hero-with-gallery-intro)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+// npm install @rive-app/react-canvas
+// Copy public/rive/interactive-icon-set.riv so the app serves /rive/interactive-icon-set.riv.
+// Hand art: CC BY 4.0, Silvia Sguotti and Gabriele Montinaro.
+
+import { Sparkles } from "lucide-react";
+import { Badge, Button, FooterReveal, GridOverlay, HeroIntro, HeroTileStack, RiveHand, ScrollHorizontal, SiteNav, TextSequence, footerRevealFieldClasses } from "@thewhatmatters/wmds";
+
+const socialLinks = [
+  { label: "Contra", href: "#contra-TODO" },
+  { label: "Instagram", href: "https://www.instagram.com/thewhatmatters" },
+  { label: "LinkedIn", href: "https://www.linkedin.com/in/randymdaniel" },
+  { label: "X", href: "#x-TODO" },
+] as const;
+
+const tiles = [
+  { src: "/hero-tiles/plan.svg", alt: "Weekly plan on a lime tile" },
+  { src: "/hero-tiles/focus.svg", alt: "Blue focus card" },
+  { src: "/hero-tiles/week.svg", alt: "Abstract shapes for the week" },
+  { src: "/hero-tiles/note.svg", alt: "A pale note about what matters" },
+];
+
+const projects = [
+  { id: "project-one", label: "Project One", color: "var(--color-brand)" },
+  { id: "project-two", label: "Project Two", color: "var(--color-brand-soft)" },
+  { id: "project-three", label: "Project Three", color: "var(--color-primary)" },
+  { id: "project-four", label: "Project Four", color: "var(--color-info-muted)" },
+  { id: "project-five", label: "Project Five", color: "var(--color-accent)" },
+];
+
+// Opens the multi-step project form. There is no /start route.
+function openProjectModal() {}
+
+export function MarketingHeroWithGalleryIntroPage() {
+  return (
+    <FooterReveal>
+      <FooterReveal.Content>
+        <SiteNav
+          start={<SiteNav.Brand href="/" aria-label="WhatMatters" icon={<Sparkles strokeWidth={2} />} />}
+          middle={
+            <SiteNav.Links>
+              <SiteNav.Link href="/product" current>Product</SiteNav.Link>
+              <SiteNav.Link href="/pricing">Pricing</SiteNav.Link>
+              <SiteNav.Link href="/customers">Customers</SiteNav.Link>
+            </SiteNav.Links>
+          }
+          end={
+            <>
+              <Button role="ghost" size="sm" render={<a href="/signin" />} className="whitespace-nowrap">Sign in</Button>
+              <Button role="primary" size="sm" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+            </>
+          }
+          mobile={
+            <>
+              <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+            </>
+          }
+        />
+        <section className="flex min-h-[calc(100svh-var(--site-nav-height))] w-full shrink-0 flex-col items-center justify-center-safe overflow-x-clip overflow-y-visible bg-body py-16 text-center">
+          <div className="flex w-full flex-col items-center gap-6">
+          <HeroIntro lead="We're a design and product studio based in Austin, Texas.">
+            We help brands stand out{" "}
+            <Badge variant="info" size="md" emphasis="muted" className="align-middle" avatar={{ src: "/hero-badges/globe.svg", alt: "" }}>online</Badge>
+            {" "}with bold ideas, fresh approaches, and products people actually love to use.
+          </HeroIntro>
+            <div className="w-full px-[var(--grid-margin)]">
+            <HeroTileStack tiles={tiles} />
+            </div>
+          </div>
+        </section>
+        <ScrollHorizontal
+          items={projects}
+          expandLast
+          intro={
+            <ScrollHorizontal.Intro
+              eyebrow="SELECTED WORK"
+              statement={
+                <>
+                  {"Every screen"}
+                  <TextSequence.Shape variant="asterisk" />
+                  {" is a first impression "}
+                  <RiveHand hand="point" inline idle entrance="none" aria-hidden />
+                  {" and we make yours"}
+                  <TextSequence.Shape variant="diamond" tone="accent" />
+                  {" the one they remember."}
+                </>
+              }
+              action={{ label: "Start a project" }}
+            />
+          }
+        />
+        <main className="grid-page bg-body !py-0">
+          <GridOverlay visible keyboardShortcut={false} />
+        </main>
+      </FooterReveal.Content>
+      <FooterReveal.Footer className={footerRevealFieldClasses}>
+        <FooterReveal.Brand
+          headline="We Build WhatMatters"
+          ctaLabel="Start a project"
+          onCtaClick={openProjectModal}
+          wordmark="WHATMATTERS"
+          socialLinks={socialLinks}
+        />
+      </FooterReveal.Footer>
+    </FooterReveal>
+  );
+}