diff --git a/.claude/hooks/format-lint.sh b/.claude/hooks/format-lint.sh
index 1bc7db4..c56b623 100755
--- a/.claude/hooks/format-lint.sh
+++ b/.claude/hooks/format-lint.sh
@@ -65,15 +65,16 @@ lint() {
 }
 
 case "${file##*.}" in
-  ts | tsx | js | jsx | mjs | cjs | json | jsonc | json5 | css)
+  ts | tsx | js | jsx | mjs | cjs | json | jsonc | json5)
     # Without --ignore-path, oxfmt also reads .prettierignore, which excludes
     # every extension oxfmt owns.
     run oxfmt --ignore-path .gitignore "$file" >/dev/null
     lint oxlint --type-aware "$file"
     ;;
   # oxfmt's directory scan formats these too, so `pnpm check` fails on an unformatted one —
-  # but oxlint has no rules for them, so they are formatted and not linted.
-  yaml | yml | toml)
+  # but oxlint has no rules for them, so they are formatted and not linted. Passing one to
+  # oxlint is not a no-op: it reports "No files found to lint" and exits non-zero.
+  css | yaml | yml | toml)
     run oxfmt --ignore-path .gitignore "$file" >/dev/null
     ;;
   astro)
diff --git a/AGENTS.md b/AGENTS.md
index 9ae5f20..07e562e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -20,11 +20,12 @@ Pages. **Zero client-side framework runtime** — `.astro` components and plain
 
 ## Toolchain ownership
 
-| Extensions                            | Linter                                         | Formatter |
-| ------------------------------------- | ---------------------------------------------- | --------- |
-| `.ts .js .mjs .cjs .json .jsonc .css` | oxlint (type-aware, vendored nkzw + anti-slop) | oxfmt     |
-| `.astro`                              | ESLint (typed, jsx-a11y-strict)                | Prettier  |
-| `.md`                                 | —                                              | Prettier  |
+| Extensions                       | Linter                                         | Formatter |
+| -------------------------------- | ---------------------------------------------- | --------- |
+| `.ts .js .mjs .cjs .json .jsonc` | oxlint (type-aware, vendored nkzw + anti-slop) | oxfmt     |
+| `.css`                           | — (oxlint has no CSS rules)                    | oxfmt     |
+| `.astro`                         | ESLint (typed, jsx-a11y-strict)                | Prettier  |
+| `.md`                            | —                                              | Prettier  |
 
 The Claude Code hook in `.claude/hooks/format-lint.sh` runs the right pair on every file you
 edit, and feeds lint failures back to you. Do not reach for the other toolchain by hand.
diff --git a/plan/06-homepage.md b/plan/06-homepage.md
index 7ce8157..956f659 100644
--- a/plan/06-homepage.md
+++ b/plan/06-homepage.md
@@ -44,10 +44,74 @@ Built from primitives; these are the reusable section vocabulary for all later p
 
 ## Acceptance criteria
 
-- [ ] Homepage copy parity with legacy (diff the visible text; intentional omissions listed in PR).
-- [ ] All sections built from `ui/` + `ui/primitives/` — zero one-off styling that bypasses tokens.
-- [ ] Sponsors render from the collection; deactivating a sponsor file removes it without code changes.
-- [ ] Zero client JS except the video poster/in-view script and nav toggle; reduced-motion shows poster.
-- [ ] Lighthouse A11y = 100, SEO = 100 (mobile) on the preview.
+- [x] Homepage copy parity with legacy (diff the visible text; intentional omissions listed in PR).
+      Every legacy string is present. Changes, all listed under "Notes and deviations": the hero
+      heading became the page's `h1`; two section headings were added where legacy had none
+      ("Our programs", "Our sponsors"); "highschool" → "high school"; "Contact us!" moved from the
+      closing heading into its paragraph so the tagline could take that heading.
+- [x] All sections built from `ui/` + `ui/primitives/` — zero one-off styling that bypasses tokens.
+- [x] Sponsors render from the collection; deactivating a sponsor file removes it without code
+      changes — the three `active: false` records (Fives, VFW, Wellspan) are already absent.
+- [x] Zero client JS except the nav toggle. The homepage hero is a photograph, not a video (see
+      below), so it ships no script at all; the whole page's only `<script>` is the shell's sheet
+      toggle.
+- [x] Lighthouse A11y = 100, SEO = 100 (mobile) on the production preview — with Best Practices
+      100 as well. Trace on Slow 4G + 4× CPU: **LCP 1369 ms, CLS 0.00**.
 - [ ] ⛔ **Owner conformance sign-off recorded; any DESIGN.md amendments merged via §11 process.**
-- [ ] `pnpm check && pnpm build` green.
+- [x] `pnpm check && pnpm build` green.
+
+## Notes and deviations
+
+- **The hero has no video, because the legacy homepage hero has none.** `legacy/src/app/page.tsx`
+  renders `HeroHeader img="/image/legos.webp"`; the 22 MB `home-video.mp4` belongs to
+  `/programs/frc`. So `Hero.astro` takes its media through a **slot** — the brief's "media slot
+  (video or image)" — and D20's poster/in-view/reduced-motion handling lands with the page that
+  actually has a video (Phase 07), rather than shipping unused here. Only the slotted element
+  changes between the two.
+- **Section carries the atmosphere device, and it is single-valued.** DESIGN.md §2 allows exactly
+  one device per section boundary and says "never stacked", so `atmosphere` is one prop rather
+  than four booleans — two devices on one section is unrepresentable. The page cycles them: ghost
+  numerals 01–03 on the three narrative sections, a tint band on the FIRST interlude, an ambient
+  pool on the video, a ruler divider before the sponsors, and registration marks (§2.8, itself a
+  listed device) on the closing pocket.
+- **The hero emphasizes one phrase, not two.** Legacy highlighted "Robots" *and* underlined "So
+  are we."; §2.1 permits exactly one. The swipe stays on "Robots", and the hand-markup budget goes
+  to the sanctioned tagline in the CTA band — "Real ⬭Skills⬭. Real ⬭Robots⬭. Real ⬭Fun⬭.", three
+  chalk ovals, no two sharing a variant.
+- **Hero height is content-driven** (`min-h-[30rem]` from `md`), not legacy's
+  `calc(101vh - 4rem)`. The mobile layout follows §7: photo on top fading into the ground, copy
+  below on solid ground — so legacy's "Find out more" scroll button has nothing left to solve and
+  is gone with it.
+- **The video is a link-out, not an embed.** Legacy mounted a react-player YouTube embed. A framed
+  poster linking to the video keeps the page at zero third-party JS and zero third-party cookies,
+  which is part of how Best Practices stays at 100. The URL is `site.urls.teamVideo`.
+- **Five join cards are laid out 2 + 3** via `@utility feature-grid-2-3` in `global.css` — DESIGN.md
+  §5's own worked example. It lives in the stylesheet, not in `FeatureGrid.astro`, for the two
+  reasons standing rule 2 names: the spans land on slotted children, and the boundaries read the
+  breakpoint tokens. Legacy reused `IconBooks` on two of the five; the scholarships card now takes
+  `school`.
+- **The FIRST identity is art-directed with `<picture>`.** The spelled-out acronym is illegible
+  below `md`, so the two renditions are a `<source>` swap rather than a `hidden`/`md:hidden` pair
+  (standing rule 5). `<Image>` cannot render into a `<source>`, so `getImage()` supplies the
+  right-sized WebP the raw 2560px PNG would otherwise skip.
+- **`nav.donate` and `nav.sponsors` are named entries** in `src/data/site.ts`, spread into
+  `nav.primary` the way `calendar` already was. The CTA band and the footer both link to them, and
+  standing rule 1 forbids finding a list entry by index or re-typing its href.
+- **`SPONSOR_LEVELS` is now exported from `src/content.config.ts`.** Declaration order is display
+  order, so `SponsorStrip` sorts by index into the schema's own vocabulary instead of restating the
+  ranking.
+- **Images moved out of `public/`** into `src/assets/{fll,frc,sc2,first}/` so astro:assets
+  processes them, and `tools/assets/optimize-sources.mjs --write` re-encoded the seven that
+  qualified (1.33 MB saved). Phase 09 still owns the rest of `public/image` and the per-call-site
+  `widths`/`quality` tuning.
+- **`.claude/hooks/format-lint.sh` blocked every CSS edit.** It routed `.css` to
+  `oxlint --type-aware`, which has no CSS rules and exits 1 with "No files found to lint". CSS now
+  sits in the format-only branch beside YAML and TOML, and `AGENTS.md`'s toolchain table says so.
+
+### Open for the review gate
+
+- **Two sponsor logos ship white backgrounds baked into the PNG** (Manitowoc, Orrstown), so they
+  read as white plates on the dark ground, and `yb-dark.png` is a dark badge that nearly
+  disappears. Both fixes are outside this phase's authority: either transparent-background assets
+  from the sponsors, or a documented plate treatment added to DESIGN.md §8 first (§11). Flagging
+  rather than inventing one, since the sponsors page in Phase 07 needs the same answer.
diff --git a/public/image/first/first-horizontal-acro-dark.png b/public/image/first/first-horizontal-acro-dark.png
deleted file mode 100644
index 0d1c9ad..0000000
Binary files a/public/image/first/first-horizontal-acro-dark.png and /dev/null differ
diff --git a/public/image/frc-driveteam.webp b/public/image/frc-driveteam.webp
deleted file mode 100644
index 5b08cbf..0000000
Binary files a/public/image/frc-driveteam.webp and /dev/null differ
diff --git a/public/image/frc-driveteam2.webp b/public/image/frc-driveteam2.webp
deleted file mode 100644
index d6299ae..0000000
Binary files a/public/image/frc-driveteam2.webp and /dev/null differ
diff --git a/public/image/hands-on-2.webp b/public/image/hands-on-2.webp
deleted file mode 100644
index dd27fcc..0000000
Binary files a/public/image/hands-on-2.webp and /dev/null differ
diff --git a/public/image/leadership-1.webp b/public/image/leadership-1.webp
deleted file mode 100644
index 22ee565..0000000
Binary files a/public/image/leadership-1.webp and /dev/null differ
diff --git a/public/image/lego-robots.webp b/public/image/lego-robots.webp
deleted file mode 100644
index a9f976d..0000000
Binary files a/public/image/lego-robots.webp and /dev/null differ
diff --git a/public/image/legos.webp b/public/image/legos.webp
deleted file mode 100644
index ad0df57..0000000
Binary files a/public/image/legos.webp and /dev/null differ
diff --git a/src/assets/first/first-horizontal-acro-dark.png b/src/assets/first/first-horizontal-acro-dark.png
new file mode 100644
index 0000000..5360f33
Binary files /dev/null and b/src/assets/first/first-horizontal-acro-dark.png differ
diff --git a/public/image/first/first-horizontal-dark.png b/src/assets/first/first-horizontal-dark.png
similarity index 100%
rename from public/image/first/first-horizontal-dark.png
rename to src/assets/first/first-horizontal-dark.png
diff --git a/src/assets/fll/lego-robots.webp b/src/assets/fll/lego-robots.webp
new file mode 100644
index 0000000..7ecc3ed
Binary files /dev/null and b/src/assets/fll/lego-robots.webp differ
diff --git a/src/assets/fll/legos.webp b/src/assets/fll/legos.webp
new file mode 100644
index 0000000..656e3c5
Binary files /dev/null and b/src/assets/fll/legos.webp differ
diff --git a/src/assets/frc/frc-driveteam.webp b/src/assets/frc/frc-driveteam.webp
new file mode 100644
index 0000000..ec66a43
Binary files /dev/null and b/src/assets/frc/frc-driveteam.webp differ
diff --git a/src/assets/frc/frc-driveteam2.webp b/src/assets/frc/frc-driveteam2.webp
new file mode 100644
index 0000000..98e5837
Binary files /dev/null and b/src/assets/frc/frc-driveteam2.webp differ
diff --git a/public/image/award.webp b/src/assets/sc2/award.webp
similarity index 100%
rename from public/image/award.webp
rename to src/assets/sc2/award.webp
diff --git a/public/image/competition-1.webp b/src/assets/sc2/competition-1.webp
similarity index 100%
rename from public/image/competition-1.webp
rename to src/assets/sc2/competition-1.webp
diff --git a/public/image/dean.webp b/src/assets/sc2/dean.webp
similarity index 100%
rename from public/image/dean.webp
rename to src/assets/sc2/dean.webp
diff --git a/src/assets/sc2/hands-on-2.webp b/src/assets/sc2/hands-on-2.webp
new file mode 100644
index 0000000..dd2f046
Binary files /dev/null and b/src/assets/sc2/hands-on-2.webp differ
diff --git a/src/assets/sc2/leadership-1.webp b/src/assets/sc2/leadership-1.webp
new file mode 100644
index 0000000..6c70b12
Binary files /dev/null and b/src/assets/sc2/leadership-1.webp differ
diff --git a/src/components/ui/CtaBanner.astro b/src/components/ui/CtaBanner.astro
new file mode 100644
index 0000000..799ce8d
--- /dev/null
+++ b/src/components/ui/CtaBanner.astro
@@ -0,0 +1,38 @@
+---
+import Card from "@/components/ui/primitives/Card.astro";
+import CardContent from "@/components/ui/primitives/CardContent.astro";
+import RegistrationMarks from "@/components/ui/primitives/RegistrationMarks.astro";
+import { cn } from "@/lib/cn";
+
+/**
+ * The closing "get involved" band — the one feature pocket a view is allowed to crop-mark
+ * (DESIGN.md §2.8).
+ *
+ * Slots: `title` (wrapped in the heading), the default body copy, and `actions`.
+ */
+interface Props {
+  headingLevel?: "h2" | "h3";
+  class?: string;
+}
+
+const { headingLevel: Heading = "h2", class: className } = Astro.props;
+---
+
+<Card class={cn("relative", className)} feature>
+  <RegistrationMarks />
+  <CardContent class="px-6 pt-12 pb-12 text-center md:px-12">
+    <Heading>
+      <slot name="title" />
+    </Heading>
+    <div class="measure text-body-lg mx-auto mt-5">
+      <slot />
+    </div>
+    {
+      Astro.slots.has("actions") && (
+        <div class="mt-8 flex flex-wrap justify-center gap-3">
+          <slot name="actions" />
+        </div>
+      )
+    }
+  </CardContent>
+</Card>
diff --git a/src/components/ui/FeatureCard.astro b/src/components/ui/FeatureCard.astro
new file mode 100644
index 0000000..7871664
--- /dev/null
+++ b/src/components/ui/FeatureCard.astro
@@ -0,0 +1,109 @@
+---
+import type { ImageMetadata } from "astro";
+
+import { Image } from "astro:assets";
+
+import Badge from "@/components/ui/primitives/Badge.astro";
+import Card from "@/components/ui/primitives/Card.astro";
+import CardContent from "@/components/ui/primitives/CardContent.astro";
+import CardFooter from "@/components/ui/primitives/CardFooter.astro";
+import CardHeader from "@/components/ui/primitives/CardHeader.astro";
+import CardTitle from "@/components/ui/primitives/CardTitle.astro";
+import Icon from "@/components/ui/primitives/Icon.astro";
+import { cn } from "@/lib/cn";
+
+/**
+ * The card the section grids are built from (DESIGN.md §8): an accent-tinted icon tile, a title
+ * over the machined 32px rule, body copy, and an optional footer link whose hit area covers the
+ * whole pocket. Replaces `legacy/src/components/cards/FeatureCard.tsx`.
+ *
+ * The photo is inset rather than bled to the pocket's top edge: a full-width image would cover
+ * the inset shadow that makes the card read as machined *into* the page (§2).
+ *
+ * Slots: `title` (so a title carrying markup still works) and the default body.
+ */
+interface Props {
+  /** Tabler icon name for the tile. */
+  icon: string;
+  image?: ImageMetadata;
+  /** Required alongside `image`. */
+  imageAlt?: string;
+  /** A spec chip in the header row — an age range, a season, a tier. */
+  badge?: string;
+  /** Turns the whole pocket into the link's hit area. */
+  href?: string;
+  /** The footer link's text, and therefore its accessible name — make it specific. */
+  cta?: string;
+  /** Renders the grid inside the pocket floor. Feature moments only; dense grids stay plain. */
+  feature?: boolean;
+  class?: string;
+}
+
+const {
+  icon,
+  image,
+  imageAlt,
+  badge,
+  href,
+  cta = "Learn more",
+  feature = false,
+  class: className,
+} = Astro.props;
+
+if (image !== undefined && imageAlt === undefined) {
+  throw new Error("FeatureCard: an `image` needs an `imageAlt`.");
+}
+---
+
+<Card
+  as="article"
+  class={cn("relative flex flex-col", className)}
+  feature={feature}
+  interactive={href !== undefined}
+>
+  {
+    image !== undefined && (
+      <div class="p-4 pb-0">
+        <Image
+          alt={imageAlt ?? ""}
+          class="aspect-16/10 w-full rounded-md object-cover"
+          loading="lazy"
+          sizes="(min-width: 64rem) 30rem, (min-width: 48rem) 45vw, 92vw"
+          src={image}
+          widths={[400, 640, 900]}
+        />
+      </div>
+    )
+  }
+
+  <CardHeader>
+    <div class="flex items-start justify-between gap-4">
+      <span
+        class="bg-primary/12 text-primary-bright grid size-12 shrink-0 place-items-center rounded-sm"
+      >
+        <Icon name={icon} size={24} />
+      </span>
+      {badge !== undefined && <Badge>{badge}</Badge>}
+    </div>
+    <CardTitle rule>
+      <slot name="title" />
+    </CardTitle>
+  </CardHeader>
+
+  <CardContent class="flex-1">
+    <slot />
+  </CardContent>
+
+  {
+    href !== undefined && (
+      <CardFooter>
+        {/* The stretched pseudo-element makes the pocket clickable without nesting the card's
+            content inside the anchor, so the link keeps one short accessible name. */}
+        <a class="ui-link text-small font-medium after:absolute after:inset-0" href={href}>
+          {cta}
+        </a>
+        <Icon class="text-primary-bright" name="arrow-right" size={20} />
+      </CardFooter>
+    )
+  }
+</Card>
diff --git a/src/components/ui/FeatureGrid.astro b/src/components/ui/FeatureGrid.astro
new file mode 100644
index 0000000..213c766
--- /dev/null
+++ b/src/components/ui/FeatureGrid.astro
@@ -0,0 +1,25 @@
+---
+import { cn } from "@/lib/cn";
+
+/**
+ * The grid feature cards sit in. The column counts are a closed set because the layout math is a
+ * design decision rather than a call-site one (DESIGN.md §5: "No orphan rows: plan the math").
+ */
+interface Props {
+  /** `"2+3"` is the sanctioned five-card layout: two wide, then three. */
+  columns: 2 | 3 | "2+3";
+  class?: string;
+}
+
+const { columns, class: className } = Astro.props;
+
+const layouts = {
+  2: "grid gap-6 md:grid-cols-2",
+  3: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
+  "2+3": "feature-grid-2-3",
+} as const;
+---
+
+<div class={cn(layouts[columns], className)}>
+  <slot />
+</div>
diff --git a/src/components/ui/Footer.astro b/src/components/ui/Footer.astro
index c3cfe90..70bcfad 100644
--- a/src/components/ui/Footer.astro
+++ b/src/components/ui/Footer.astro
@@ -24,11 +24,7 @@ const year = new Date().getFullYear();
 const sections = [
   {
     title: "Support us",
-    links: [
-      { label: "Donate", href: "/donate" },
-      { label: "Sponsors", href: "/sponsors" },
-      { label: "Wishlist", href: site.urls.wishlist },
-    ],
+    links: [nav.donate, nav.sponsors, { label: "Wishlist", href: site.urls.wishlist }],
   },
   {
     title: "Programs",
diff --git a/src/components/ui/Hero.astro b/src/components/ui/Hero.astro
new file mode 100644
index 0000000..7dbc45f
--- /dev/null
+++ b/src/components/ui/Hero.astro
@@ -0,0 +1,75 @@
+---
+import { cn } from "@/lib/cn";
+
+/**
+ * The page hero (DESIGN.md §5, §7). The media arrives through a slot, so the same component
+ * carries a photograph here and a looping video on the pages that have one — only the slotted
+ * element changes.
+ *
+ * Two layouts, one image: below `md` the copy sits on solid ground *underneath* the photo, which
+ * fades into the page (§7 — "never gamble on scrims at small sizes"); from `md` up the photo
+ * fills the hero and the copy sits on a scrim built from `background`.
+ *
+ * Slots: `media`, `eyebrow`, `title` (wrapped in the `h1`), the default subhead, and `actions`.
+ */
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<section class={cn("relative", className)}>
+  <div class="hero-media relative aspect-3/2 md:absolute md:inset-0 md:aspect-auto">
+    <slot name="media" />
+    {
+      /* DESIGN.md §7: opaque at the text edge, ~20% at the far one. The desktop stops are placed
+        so the opaque band spans the copy column instead of ending halfway through it. */
+    }
+    <div
+      aria-hidden="true"
+      class="to-background md:from-background md:via-background/75 md:to-background/20 absolute inset-0 bg-linear-to-b from-transparent from-45% md:bg-linear-to-r md:from-35% md:via-65%"
+    >
+    </div>
+  </div>
+
+  <div class="container-page section-y relative md:flex md:min-h-[30rem] md:items-center">
+    <div class="max-w-2xl">
+      {
+        Astro.slots.has("eyebrow") && (
+          <p class="eyebrow text-primary">
+            <slot name="eyebrow" />
+          </p>
+        )
+      }
+      <h1 class="text-display mt-3">
+        <slot name="title" />
+      </h1>
+      <div class="measure text-body-lg text-foreground mt-5">
+        <slot />
+      </div>
+      {
+        Astro.slots.has("actions") && (
+          <div class="mt-8 flex flex-wrap gap-3">
+            <slot name="actions" />
+          </div>
+        )
+      }
+    </div>
+  </div>
+</section>
+
+<hr class="accent-rule" />
+
+<style>
+  /**
+   * The slot takes an `<img>` or a `<video>`, and either has to fill the frame. `:global()`
+   * because the element is authored by the caller, so it carries no `data-astro-cid-*` of this
+   * component and a plain descendant selector would be rewritten to demand one.
+   */
+  .hero-media :global(:is(img, video)) {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+</style>
diff --git a/src/components/ui/Section.astro b/src/components/ui/Section.astro
new file mode 100644
index 0000000..cc0d9c2
--- /dev/null
+++ b/src/components/ui/Section.astro
@@ -0,0 +1,86 @@
+---
+import GhostNumeral from "@/components/ui/primitives/GhostNumeral.astro";
+import RulerDivider from "@/components/ui/primitives/RulerDivider.astro";
+import { cn } from "@/lib/cn";
+
+/**
+ * The vertical rhythm and gutters every page section shares (DESIGN.md §4, §5), plus the one
+ * atmosphere device its boundary carries (§2). Replaces `legacy/src/components/page/Section.tsx`.
+ *
+ * The device is a single-valued prop rather than a set of booleans, because the doc allows
+ * exactly one per boundary and says "never stacked" — so the type is what enforces it.
+ *
+ * Slots: `eyebrow`, `title` (wrapped in the heading), `intro`, and the default body. They are
+ * slots rather than string props so a heading can carry markup, e.g. an italic FIRST®.
+ */
+interface Props {
+  atmosphere?: "none" | "numeral" | "pool" | "pool-neutral" | "ruler" | "tint";
+  /** The ghost numeral's value. Required by, and only read with, `atmosphere="numeral"`. */
+  index?: number;
+  /** Drops to `h3` for a section nested under another section's heading. */
+  headingLevel?: "h2" | "h3";
+  id?: string;
+  class?: string;
+}
+
+const {
+  atmosphere = "none",
+  index,
+  headingLevel: Heading = "h2",
+  id,
+  class: className,
+} = Astro.props;
+
+if (atmosphere === "numeral" && index === undefined) {
+  throw new Error('Section: atmosphere="numeral" needs an `index` for the numeral to show.');
+}
+
+const hasEyebrow = Astro.slots.has("eyebrow");
+const hasHeader = hasEyebrow || Astro.slots.has("title") || Astro.slots.has("intro");
+---
+
+<section
+  class={cn(
+    "section-y relative",
+    atmosphere === "tint" && "bg-section-tint",
+    atmosphere === "pool" && "ambient-pool",
+    atmosphere === "pool-neutral" && "ambient-pool ambient-pool-neutral",
+    className,
+  )}
+  id={id}
+>
+  <div class="container-page">
+    {atmosphere === "ruler" && <RulerDivider class="mb-12" />}
+
+    {
+      hasHeader && (
+        <div class="relative">
+          {atmosphere === "numeral" && index !== undefined && <GhostNumeral value={index} />}
+          {hasEyebrow && (
+            <p class="eyebrow text-primary">
+              <slot name="eyebrow" />
+            </p>
+          )}
+          {Astro.slots.has("title") && (
+            <Heading class={hasEyebrow ? "mt-2" : undefined}>
+              <slot name="title" />
+            </Heading>
+          )}
+          {Astro.slots.has("intro") && (
+            <div class="measure text-body-lg mt-4">
+              <slot name="intro" />
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    {
+      Astro.slots.has("default") && (
+        <div class={hasHeader ? "mt-10" : undefined}>
+          <slot />
+        </div>
+      )
+    }
+  </div>
+</section>
diff --git a/src/components/ui/SponsorStrip.astro b/src/components/ui/SponsorStrip.astro
new file mode 100644
index 0000000..912099d
--- /dev/null
+++ b/src/components/ui/SponsorStrip.astro
@@ -0,0 +1,58 @@
+---
+import type { ImageMetadata } from "astro";
+
+import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
+
+import { SPONSOR_LEVELS } from "@/content.config";
+import { cn } from "@/lib/cn";
+
+/**
+ * The active sponsors' logos, strongest level first. Retiring a sponsor is `active: false` in its
+ * markdown file — the strip needs no code change, and the record stays in git as data.
+ */
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+
+const sponsors = (await getCollection("sponsors", (entry) => entry.data.active)).toSorted(
+  (a, b) => SPONSOR_LEVELS.indexOf(a.data.level) - SPONSOR_LEVELS.indexOf(b.data.level),
+);
+
+/**
+ * Logos render 48px tall, so 96 covers a 2x screen — but never past a logo's own height. Several
+ * of these are small originals, and upscaling one only makes a heavier, blurrier file.
+ */
+const renderHeight = (logo: ImageMetadata): number => Math.min(96, logo.height);
+---
+
+<ul class={cn("flex flex-wrap items-center justify-center gap-x-10 gap-y-8", className)}>
+  {
+    sponsors.map(({ data }) => {
+      const Tag = data.url === undefined ? "span" : "a";
+      return (
+        <li>
+          <Tag
+            class="ui-link block"
+            href={data.url}
+            rel={data.url === undefined ? undefined : "sponsored noopener"}
+          >
+            {data.logo === undefined ? (
+              <span class="text-h4 font-semibold">{data.name}</span>
+            ) : (
+              <Image
+                alt={`${data.name} logo`}
+                class="h-10 w-auto max-w-40 object-contain md:h-12"
+                height={renderHeight(data.logo)}
+                loading="lazy"
+                src={data.logo}
+              />
+            )}
+          </Tag>
+        </li>
+      );
+    })
+  }
+</ul>
diff --git a/src/content.config.ts b/src/content.config.ts
index f89a461..255f669 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -14,8 +14,12 @@ import { PROGRAM_KEYS } from "@/data/site";
  * is why `location` below is two flat fields instead of an object. Schema changes need an ADR.
  */
 
-/** Legacy's `SponsorLevel`, preserved exactly (`legacy/data/sponsors.ts`). */
-const SPONSOR_LEVELS = ["Platinum", "Gold", "Silver", "Bronze", "Friend"] as const;
+/**
+ * Legacy's `SponsorLevel`, preserved exactly (`legacy/data/sponsors.ts`). Declaration order is
+ * also display order, so anything listing sponsors sorts by index here rather than restating the
+ * ranking.
+ */
+export const SPONSOR_LEVELS = ["Platinum", "Gold", "Silver", "Bronze", "Friend"] as const;
 
 const sponsors = defineCollection({
   loader: glob({ base: "src/content/sponsors", pattern: "**/*.md" }),
diff --git a/src/data/site.ts b/src/data/site.ts
index ca87416..45865f6 100644
--- a/src/data/site.ts
+++ b/src/data/site.ts
@@ -70,6 +70,11 @@ export const site = {
       "https://docs.google.com/forms/d/e/1FAIpQLScTjT3LHFAq1mOfKFztgMOpUT8hFWz81dYlaaDa4B8lG6yr2Q/viewform?embedded=true",
     wiki: "https://wiki.scstem.org",
     directions: "https://wiki.scstem.org/workspace/#directions",
+    /** The parent organization every program belongs to. */
+    firstInspires: "https://www.firstinspires.org/",
+    moreThanRobots: "https://info.firstinspires.org/morethanrobots",
+    /** The team's introduction video, linked out rather than embedded (no third-party player). */
+    teamVideo: "https://youtu.be/147CgudTur8",
   },
 
   /** Public Google Calendar IDs, from `legacy/src/app/calendar/[name]/page.tsx`. */
@@ -135,16 +140,18 @@ export const programs = {
  */
 export type ProgramTheme = Exclude<ProgramKey, "sc2">;
 
-/** A disclosure panel's row: the link plus the one-line description under it. */
-interface PanelLink {
+/** A destination and the text that links to it. */
+interface Route {
   readonly href: string;
   readonly label: string;
+}
+
+/** A disclosure panel's row: the link plus the one-line description under it. */
+interface PanelLink extends Route {
   readonly name: string;
 }
 
-export interface NavLink {
-  readonly href: string;
-  readonly label: string;
+export interface NavLink extends Route {
   /** Disclosure panel this entry opens in the header, in addition to being a link. */
   readonly panel?: ReadonlyArray<PanelLink>;
   /**
@@ -156,8 +163,14 @@ export interface NavLink {
   readonly surfaces: ReadonlyArray<"header" | "sheet" | "sheet-cta">;
 }
 
-/** The org calendar, linked from the primary nav, the Programs panel, and the footer. */
+/**
+ * Entries that other surfaces link to by name — the footer's columns, a page's call to action —
+ * are named here and spread into `primary` below, so a link never has to be found by index or
+ * re-typed at the call site.
+ */
 const calendar = { label: "Calendar", href: "/calendar/sc2" } as const;
+const donate = { label: "Donate", href: "/donate" } as const;
+const sponsors = { label: "Sponsors", href: "/sponsors" } as const;
 
 /** The Programs disclosure in the desktop header. */
 const programsPanel = [
@@ -178,19 +191,23 @@ export const nav = {
   primary: [
     { label: "About", href: "/about", surfaces: ["header", "sheet"] },
     { label: "Programs", href: "/programs", surfaces: ["header", "sheet"], panel: programsPanel },
-    { label: "Sponsors", href: "/sponsors", surfaces: ["header", "sheet"] },
+    { ...sponsors, surfaces: ["header", "sheet"] },
     { ...calendar, surfaces: ["sheet"] },
-    { label: "Donate", href: "/donate", surfaces: ["header", "sheet-cta"] },
+    { ...donate, surfaces: ["header", "sheet-cta"] },
   ],
 
   calendar,
+  donate,
+  sponsors,
 
   /** The primary call to action, in the header and at the foot of the mobile sheet. */
   cta: { label: "Get involved", href: "/get-involved" },
 } as const satisfies {
-  calendar: { href: string; label: string };
-  cta: { href: string; label: string };
+  calendar: Route;
+  cta: Route;
+  donate: Route;
   primary: ReadonlyArray<NavLink>;
+  sponsors: Route;
 };
 
 /** @public Consumed by the footer and the app shell. */
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 430eb1d..6300e2f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,25 +1,326 @@
 ---
+import type { ImageMetadata } from "astro";
+
+import { getImage, Image } from "astro:assets";
+
+import collage from "@/assets/events/morethanrobots.webp";
+import firstAcronym from "@/assets/first/first-horizontal-acro-dark.png";
+import firstLockup from "@/assets/first/first-horizontal-dark.png";
+import fllRobots from "@/assets/fll/lego-robots.webp";
+import fllField from "@/assets/fll/legos.webp";
+import driveTeam from "@/assets/frc/frc-driveteam.webp";
+import teamVideoPoster from "@/assets/frc/frc-driveteam2.webp";
+import award from "@/assets/sc2/award.webp";
+import competition from "@/assets/sc2/competition-1.webp";
+import dean from "@/assets/sc2/dean.webp";
+import handsOn from "@/assets/sc2/hands-on-2.webp";
+import leadership from "@/assets/sc2/leadership-1.webp";
 import JsonLd from "@/components/JsonLd.astro";
-import { site } from "@/data/site";
+import CtaBanner from "@/components/ui/CtaBanner.astro";
+import FeatureCard from "@/components/ui/FeatureCard.astro";
+import FeatureGrid from "@/components/ui/FeatureGrid.astro";
+import Hero from "@/components/ui/Hero.astro";
+import Button from "@/components/ui/primitives/Button.astro";
+import Callout from "@/components/ui/primitives/Callout.astro";
+import ChalkOval from "@/components/ui/primitives/ChalkOval.astro";
+import Icon from "@/components/ui/primitives/Icon.astro";
+import Separator from "@/components/ui/primitives/Separator.astro";
+import Section from "@/components/ui/Section.astro";
+import SponsorStrip from "@/components/ui/SponsorStrip.astro";
+import { nav, programs, site } from "@/data/site";
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import { webSite } from "@/lib/jsonld";
+import { breakpoint } from "@/lib/tokens";
+
+/**
+ * The FIRST identity is art-directed — the spelled-out acronym only reads from `md` up — so the
+ * two renditions are a `<source>` swap, which `<Image>` cannot express. `getImage` gives the
+ * `<source>` the same treatment `<Image>` would: the sources are 2560px masters and the widest
+ * slot here is 384 CSS px.
+ */
+const renderAt = async (source: ImageMetadata, width: number) => ({
+  height: Math.round((width * source.height) / source.width),
+  src: (await getImage({ format: "webp", src: source, width })).src,
+  width,
+});
+
+const acronymArt = await renderAt(firstAcronym, 768);
+const lockupArt = await renderAt(firstLockup, 640);
 
 /**
- * Placeholder until Phase 06 ports the homepage. Present so the app shell is visible on the
- * preview URL; never deployed to production.
+ * Copy is legacy's, near-verbatim (D8). What changed is structure: the page now has an `h1`, the
+ * two hand-markup runs are the tagline and the hero's one emphasized phrase, and the sponsors
+ * strip is new — see plan/06-homepage.md for the full list.
  */
 ---
 
 <BaseLayout description={site.description} title="Home">
   <JsonLd data={webSite} slot="head" />
 
-  <section class="section-y ambient-pool container-page">
-    <p class="eyebrow text-primary">Rewrite in progress</p>
-    <h1 class="mt-2">The app shell is in place</h1>
-    <p class="measure text-body-lg mt-4">
-      Header, footer, metadata, and structured data are live. The homepage itself lands in Phase 06;
-      the design system and every primitive are on the{" "}
-      <a href="/styleguide">styleguide</a>.
+  <Hero>
+    <Image
+      alt="Two FIRST LEGO League tables of student-built robots, set up in the SC2 workshop"
+      class="h-full w-full object-cover"
+      fetchpriority="high"
+      loading="eager"
+      sizes="100vw"
+      slot="media"
+      src={fllField}
+      widths={[640, 960, 1280, 1920]}
+    />
+
+    <Fragment slot="title">
+      <span class="highlight-swipe">Robots</span> are in Franklin County. So are we.
+    </Fragment>
+
+    {site.description}
+
+    <Button href={nav.cta.href} size="lg" slot="actions">{nav.cta.label}</Button>
+    <Button href={programs.sc2.href} size="lg" slot="actions" variant="outline">
+      Explore our programs
+    </Button>
+  </Hero>
+
+  <Section atmosphere="numeral" index={1}>
+    <Fragment slot="title">Science, Technology, Engineering, Math, Business, Art, and more</Fragment
+    >
+    <Fragment slot="intro">
+      The South Central STEM Collective (otherwise known as SC2) was created to serve South Central
+      Pennsylvania as &lsquo;STEM Central&rsquo;; inspiring youth aged 9-18 with hands-on education,
+      competitive robotics teams, and community outreach. With three rapidly growing programs and a
+      team of experienced volunteer mentors, SC2 is the perfect place for students to learn real
+      world skills in a fun and competitive atmosphere.
+    </Fragment>
+  </Section>
+
+  <Section atmosphere="numeral" index={2}>
+    <Fragment slot="title">Our programs</Fragment>
+
+    <FeatureGrid columns={2}>
+      <FeatureCard
+        badge={`Ages ${programs.fll.ages}`}
+        cta={`Explore ${programs.fll.name}`}
+        feature
+        href={programs.fll.href}
+        icon="lego"
+        image={fllRobots}
+        imageAlt="LEGO® robots built by South Central STEM Collective students"
+      >
+        <Fragment slot="title"><span class="italic">FIRST®</span> LEGO® League</Fragment>
+        FLL introduces science, technology, engineering, and math (STEM) to children through fun, exciting
+        hands-on learning. Participants gain real-world problem-solving experiences through a guided,
+        global robotics program, helping today&rsquo;s students and teachers build a better future together.
+      </FeatureCard>
+
+      <FeatureCard
+        badge={`Ages ${programs.frc.ages}`}
+        cta={`Explore ${programs.frc.name}`}
+        feature
+        href={programs.frc.href}
+        icon="robot-face"
+        image={driveTeam}
+        imageAlt={`Team 4050 ${programs.frc.teamName}'s drive team standing with their robot at competition`}
+      >
+        <Fragment slot="title"><span class="italic">FIRST®</span> Robotics Competition</Fragment>
+        Under strict rules and limited time and resources, teams of high school students are challenged
+        to build industrial-size robots to play a difficult field game in alliance with other teams, while
+        also fundraising to meet their goals, designing a team &ldquo;brand,&rdquo; and advancing respect
+        and appreciation for STEM within the local community.
+      </FeatureCard>
+    </FeatureGrid>
+  </Section>
+
+  <Section atmosphere="tint">
+    <Fragment slot="title">Who is <span class="italic">FIRST®</span>?</Fragment>
+    <Fragment slot="intro">
+      All of our programs are members of a global organization called <span class="italic"
+        >FIRST®</span
+      >. The mission of <span class="italic">FIRST®</span> is to inspire young people to become leaders
+      in science and technology fields by teaching real-world skills through team work and competition.
+      Each year, a new challenge is presented to teams who, with the help of experienced mentors, must
+      apply their skills to build a functional robot. Once built, the robot is put to the test in a competition
+      setting against teams from around the world.
+    </Fragment>
+
+    <div class="grid items-start gap-10 lg:grid-cols-2">
+      <div>
+        <!-- The acronym line only reads at desktop widths, so it is a `<source>` swap rather than
+             two images toggled with `hidden`: a hidden `<img>` still downloads. -->
+        <picture>
+          <source
+            height={acronymArt.height}
+            media={`(min-width: ${breakpoint("md")})`}
+            srcset={acronymArt.src}
+            width={acronymArt.width}
+          />
+          <img
+            alt="FIRST® — For Inspiration and Recognition of Science and Technology"
+            class="h-auto w-full max-w-sm"
+            height={lockupArt.height}
+            loading="lazy"
+            src={lockupArt.src}
+            width={lockupArt.width}
+          />
+        </picture>
+
+        <Button
+          class="external-link mt-4 -ml-3"
+          href={site.urls.firstInspires}
+          rel="noopener"
+          variant="link"
+        >
+          <span class="italic">FIRST®</span>
+        </Button>
+
+        <Separator class="my-8" />
+
+        <h3>More than robots</h3>
+        <p class="measure mt-3">
+          Although the goal is to build a robot, you do not have to be an engineer. Whether you are
+          a future rocket scientist or an aspiring artist, there is a place here for you and mentors
+          ready to use their real world experience to help you grow.
+        </p>
+        <Button
+          class="external-link mt-4 -ml-3"
+          href={site.urls.moreThanRobots}
+          rel="noopener"
+          variant="link"
+        >
+          More Than Robots
+        </Button>
+      </div>
+
+      <figure>
+        <div class="media-frame">
+          <Image
+            alt="Collage of photos capturing some of the many ways students can get involved including robot design, photography, video, and more."
+            class="w-full"
+            loading="lazy"
+            sizes="(min-width: 64rem) 34rem, 92vw"
+            src={collage}
+            widths={[560, 1120]}
+          />
+        </div>
+        <Callout as="figcaption" class="mt-3" reference="FIG. 01">
+          Design, fabrication, photography, video, and more
+        </Callout>
+      </figure>
+    </div>
+  </Section>
+
+  <Section atmosphere="numeral" index={3}>
+    <Fragment slot="title">Why join?</Fragment>
+
+    <FeatureGrid columns="2+3">
+      <FeatureCard
+        icon="tool"
+        image={handsOn}
+        imageAlt="A student and mentor get hands-on with a robot"
+      >
+        <Fragment slot="title">Learn real-world skills</Fragment>
+        Get hands on with tools and technology under the supervision of experts in their fields in everything
+        from engineering to marketing. Learn not only how the tools work, but how to use them effectively.
+      </FeatureCard>
+
+      <FeatureCard
+        icon="presentation"
+        image={leadership}
+        imageAlt="Two students referencing a whiteboard during a planning meeting"
+      >
+        <Fragment slot="title">Experience leadership and teamwork</Fragment>
+        Build strong relationships with teammates and mentors as you work together throughout the season.
+        Learn how to make decisions as a team and take leadership in your area of expertise.
+      </FeatureCard>
+
+      <FeatureCard icon="books" image={competition} imageAlt="Team members cheering at competition">
+        <Fragment slot="title">Education through competition</Fragment>
+        Prepare to compete against teams from around the world with a limited time-frame, tight budget,
+        and a complex challenge. Learn how to work under pressure and build reliable systems that can
+        handle intense competition.
+      </FeatureCard>
+
+      <FeatureCard
+        icon="school"
+        image={award}
+        imageAlt="Team members receiving an award at competition"
+      >
+        <Fragment slot="title">Scholarships and career opportunities</Fragment>
+        Being a member of a <span class="italic">FIRST®</span> team is more than just building robots
+        and learning about STEM. It opens doors to scholarship and career opportunities that you cannot
+        get anywhere else. Many of our alumni used the skills developed while students to pursue careers
+        in STEM (and related) fields.
+      </FeatureCard>
+
+      <FeatureCard
+        icon="mood-smile"
+        image={dean}
+        imageAlt="Team members sharing a moment with Dean Kamen, the founder of FIRST®"
+      >
+        <Fragment slot="title">Fun</Fragment>
+        Although we take our work seriously, we also have a lot of fun. Whether it&rsquo;s dancing to
+        the YMCA at competition, playing a game of Kahoot during a meeting, or just hanging out with friends
+        as we work on our robots, we always manage to have a lot of fun.
+      </FeatureCard>
+    </FeatureGrid>
+  </Section>
+
+  <Section atmosphere="pool">
+    <Fragment slot="title">
+      Meet our high school team, learn about <span class="italic">FIRST®</span>
+    </Fragment>
+
+    <a
+      aria-label="Watch our team video on YouTube"
+      class="media-frame group relative mx-auto block max-w-3xl"
+      href={site.urls.teamVideo}
+      rel="noopener"
+    >
+      <Image
+        alt=""
+        class="w-full"
+        loading="lazy"
+        sizes="(min-width: 48rem) 48rem, 92vw"
+        src={teamVideoPoster}
+        widths={[640, 1024]}
+      />
+      <span class="bg-background/40 absolute inset-0 grid place-items-center">
+        <span
+          class="bg-primary text-primary-foreground grid size-16 place-items-center rounded-md transition-transform duration-(--duration-micro) group-hover:scale-105"
+        >
+          <Icon name="player-play" size={32} />
+        </span>
+      </span>
+    </a>
+  </Section>
+
+  <Section atmosphere="ruler">
+    <Fragment slot="title">Our sponsors</Fragment>
+    <Fragment slot="intro">
+      We are proud to partner organizations and individuals who want to join us in building the
+      future. This strong support enables our mentors, volunteers, and parents to focus on what
+      really matters.
+    </Fragment>
+
+    <SponsorStrip />
+    <p class="mt-10 text-center">
+      <a href={nav.sponsors.href}>See every sponsor and how to join them</a>
     </p>
-  </section>
+  </Section>
+
+  <Section>
+    <CtaBanner>
+      <Fragment slot="title">
+        Real <ChalkOval variant={1}>Skills</ChalkOval>. Real <ChalkOval variant={2}
+          >Robots</ChalkOval
+        >. Real <ChalkOval variant={3}>Fun</ChalkOval>.
+      </Fragment>
+      Ready to join or find out more? We are always looking for new members, mentors, and sponsors! If
+      you want to find out how you can get plugged in or are looking for more information, please reach
+      out through our <a href={nav.cta.href}>{nav.cta.label} form</a>.
+      <Button href={nav.cta.href} size="lg" slot="actions">{nav.cta.label}</Button>
+      <Button href={nav.donate.href} size="lg" slot="actions" variant="outline">
+        {nav.donate.label}
+      </Button>
+    </CtaBanner>
+  </Section>
 </BaseLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
index df824df..504dd1b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -484,6 +484,40 @@
   }
 }
 
+/**
+ * Five feature cards as a deliberate 2 + 3 (DESIGN.md §5: "No orphan rows: plan the math —
+ * 5 cards = intentional 2+3"). Two columns first, so the odd card widens to fill its row rather
+ * than floating; six columns from `lg`, where 3+3 then 2+2+2 divides evenly.
+ *
+ * Here rather than in `FeatureGrid.astro` for the two reasons a style leaves a component: the
+ * spans land on slotted children, which a scoped style cannot reach, and the boundaries read the
+ * breakpoint tokens.
+ */
+@utility feature-grid-2-3 {
+  display: grid;
+  gap: 1.5rem;
+
+  @media (width >= theme(--breakpoint-md)) {
+    grid-template-columns: repeat(2, 1fr);
+
+    & > *:last-child {
+      grid-column: span 2;
+    }
+  }
+
+  @media (width >= theme(--breakpoint-lg)) {
+    grid-template-columns: repeat(6, 1fr);
+
+    & > *:nth-child(-n + 2) {
+      grid-column: span 3;
+    }
+
+    & > *:nth-child(n + 3) {
+      grid-column: span 2;
+    }
+  }
+}
+
 /* The page container (DESIGN.md §5). One definition, so pages cannot reinvent the gutters. */
 @utility container-page {
   margin-inline: auto;