Version 1.7 Merge pull request 'Admin-driven front page with event calendar' (#7) from feature/alt-front-page into main

Reviewed-on: #7

server/src/admin-crud.js

@@ -249,6 +249,12 @@ export function normalizeId(entity, id) {
 }
 
 export function createRow(db, entity, payload) {
+  // A singleton's one row comes from its migration. There is no
+  // second one to create, and the CHECK on its id would refuse it.
+  if (entity.singleton) {
+    throw new HttpError(405, "There is only one of these; edit it instead.");
+  }
+
   // idKind "auto": the table assigns the id, so there is nothing to
   // validate, nothing to check for collisions, and nothing for the
   // client to have sent. Timeline entries use this — they have no
@@ -366,6 +372,12 @@ export function updateRow(db, entity, rawId, payload) {
 }
 
 export function deleteRow(db, entity, rawId) {
+  // Deleting a singleton would leave the page it drives with nothing
+  // to read, and the admin with no way to make another.
+  if (entity.singleton) {
+    throw new HttpError(405, "This can't be deleted, only edited.");
+  }
+
   const id = normalizeId(entity, rawId);
   const result = wrapDbErrors(() =>
     db.prepare(`DELETE FROM ${entity.table} WHERE ${entity.idColumn} = ?`).run(id),

server/src/admin-schema.js

@@ -13,6 +13,8 @@
                   value (organizations.kind decides whether a
                   regions or chapters row should exist)
      children     ordered collections, replaced wholesale on save
+     singleton    the one id this entity ever has; the engine
+                  refuses create and delete (see front_page)
 
    Replacing children wholesale is only safe because nothing has a
    foreign key INTO these tables. That is the dividing line, and
@@ -650,7 +652,133 @@ const timeline = {
   ],
 };
 
-export const ENTITIES = { organizations, events, people, teams, awards, timeline };
+/* ── Front page ──────────────────────────────────────────────────
+
+   A singleton: one row, id 'home', created by migration 017 and
+   never by the admin. `singleton` tells the engine to refuse create
+   and delete, and the CHECK on front_page.id is what makes a second
+   row impossible even without it.
+
+   Every collection here is owned by page_id and replaced wholesale.
+   That is safe for the same reason it is for links and blocks —
+   nothing has a foreign key into these tables — and paths carry
+   their actions as a nested collection, the shape content blocks
+   and their items already use. */
+
+const frontPage = {
+  key: "front_page",
+  table: "front_page",
+  idColumn: "id",
+  idKind: "slug",
+  singleton: "home",
+  concurrency: "updated_at",
+
+  list: {
+    columns: ["id", "headline", "hero_mode", "updated_at"],
+    filters: [],
+    search: [],
+    order: "id",
+  },
+
+  columns: [
+    enumeration("hero_mode", ["brand", "photos", "livestream"]),
+    text("eyebrow"),
+    text("headline"),
+    text("subhead"),
+    text("primary_label"),
+    text("primary_url"),
+    text("secondary_label"),
+    text("secondary_url"),
+    int("slide_seconds"),
+    text("livestream_url"),
+    text("livestream_title"),
+    text("countdown_event_id"),
+  ],
+
+  children: [
+    {
+      key: "slides",
+      table: "front_page_slides",
+      owner: { column: "page_id" },
+      order: "sort_order",
+      columns: [
+        text("media", { required: true }),
+        text("alt"),
+        text("caption"),
+        text("link_url"),
+      ],
+    },
+    {
+      key: "sections",
+      table: "front_page_sections",
+      owner: { column: "page_id" },
+      order: "sort_order",
+      columns: [
+        enumeration(
+          "section",
+          ["countdown", "retreats", "calendar", "stats", "timeline", "connect"],
+          { required: true },
+        ),
+        text("title"),
+        text("blurb"),
+        bool("is_hidden"),
+      ],
+    },
+    {
+      key: "stats",
+      table: "front_page_stats",
+      owner: { column: "page_id" },
+      order: "sort_order",
+      columns: [
+        text("label", { required: true }),
+        enumeration("source", [
+          "manual",
+          "years_since",
+          "regions",
+          "chapters",
+          "partners",
+          "events_held",
+          "retreats_held",
+          "people",
+          "awards_given",
+        ]),
+        text("value"),
+        text("suffix"),
+        text("note"),
+      ],
+    },
+    {
+      key: "paths",
+      table: "front_page_paths",
+      owner: { column: "page_id" },
+      order: "sort_order",
+      columns: [text("label", { required: true }), text("icon"), text("blurb")],
+      children: [
+        {
+          key: "actions",
+          table: "front_page_path_actions",
+          owner: { column: "path_id" },
+          order: "sort_order",
+          columns: [
+            text("label", { required: true }),
+            text("description"),
+            text("url", { required: true }),
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const ENTITIES = {
+  organizations,
+  events,
+  people,
+  teams,
+  awards,
+  timeline,
+  front_page: frontPage,
+};
 
 /* ── Options for the form's select inputs ────────────────────── */
 

server/src/index.js

@@ -17,6 +17,7 @@ import { rateLimit } from "./rateLimit.js";
 import content from "./routes/content.js";
 import people from "./routes/people.js";
 import history from "./routes/history.js";
+import home from "./routes/home.js";
 import feedback from "./routes/feedback.js";
 import auth from "./routes/auth.js";
 import admin from "./routes/admin.js";
@@ -56,6 +57,7 @@ app.get("/api/health", (c) =>
 app.route("/api", content);
 app.route("/api", people);
 app.route("/api", history);
+app.route("/api", home);
 
 // Tighter limit on the write path than anything else gets.
 app.use("/api/feedback", rateLimit({ windowMs: 60_000, max: 5 }));

server/src/migrations/017_front_page.sql

@@ -0,0 +1,189 @@
+-- ═══════════════════════════════════════════════════════════════
+-- FRONT PAGE
+--
+-- The home page's editable half. One row in front_page — the CHECK
+-- on id makes a second one impossible — and ordered collections
+-- hanging off it, each replaced wholesale on save the way every
+-- other child collection is. Nothing outside this file has a
+-- foreign key into any of them, which is what makes that safe.
+--
+--   front_page               the hero: its words, its buttons, and
+--                            which mode it's in
+--   front_page_slides        photos the hero cycles through in
+--                            'photos' mode
+--   front_page_sections      which bands the page draws, in what
+--                            order, under what heading
+--   front_page_stats         the numbers band; each one typed in or
+--                            counted from the database
+--   front_page_paths         the connect section's "I want to…"
+--                            choices, each with its actions
+--   front_page_path_actions
+--
+-- What stays in code: how each section looks, and the list of
+-- section keys. A section is a component, so the CHECK on
+-- front_page_sections.section is the list of components that
+-- exist; a row can reorder, retitle or hide one, never invent one.
+--
+-- hero_mode is switched by hand. 'livestream' shows the embed with
+-- a LIVE badge until someone switches it back — no schedule, so no
+-- guessing whose timezone a start time was typed in.
+--
+-- countdown_event_id pins the countdown to one event. Null counts
+-- down to the next upcoming published event, which is what it
+-- should do almost always.
+--
+-- Stats: source says where the number comes from. 'manual' prints
+-- value as typed. 'years_since' reads value as a year and counts up
+-- from it. Everything else is a COUNT the API runs, so the band
+-- never goes stale. Adding a source is this CHECK, the enum in both
+-- descriptor halves, and the query in routes/home.js.
+--
+-- The seed is the page as it ships: every section, the stats that
+-- need no typing, and the Church Center forms that were hardcoded
+-- on the old home page, sorted into paths.
+--
+-- The updated_at trigger is in 018, on its own, so no statement
+-- here sits after a BEGIN...END body.
+-- ═══════════════════════════════════════════════════════════════
+
+CREATE TABLE front_page (
+  id                  TEXT PRIMARY KEY CHECK (id = 'home'),
+
+  hero_mode           TEXT NOT NULL DEFAULT 'brand'
+                        CHECK (hero_mode IN ('brand', 'photos', 'livestream')),
+  eyebrow             TEXT,
+  headline            TEXT NOT NULL DEFAULT 'Next Generation of Unity',
+  subhead             TEXT,
+  primary_label       TEXT,
+  primary_url         TEXT,
+  secondary_label     TEXT,
+  secondary_url       TEXT,
+
+  slide_seconds       INTEGER NOT NULL DEFAULT 7
+                        CHECK (slide_seconds BETWEEN 3 AND 60),
+
+  livestream_url      TEXT,
+  livestream_title    TEXT,
+
+  countdown_event_id  TEXT REFERENCES events (id) ON DELETE SET NULL,
+
+  updated_at          TEXT NOT NULL DEFAULT (datetime('now'))
+) STRICT;
+
+CREATE TABLE front_page_slides (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  page_id     TEXT NOT NULL REFERENCES front_page (id) ON DELETE CASCADE,
+  sort_order  INTEGER NOT NULL DEFAULT 0,
+  media       TEXT NOT NULL,                 -- filename in public/front-page/, or a URL
+  alt         TEXT,
+  caption     TEXT,
+  link_url    TEXT
+) STRICT;
+
+CREATE TABLE front_page_sections (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  page_id     TEXT NOT NULL REFERENCES front_page (id) ON DELETE CASCADE,
+  sort_order  INTEGER NOT NULL DEFAULT 0,
+  section     TEXT NOT NULL
+                CHECK (section IN ('countdown', 'retreats', 'stats', 'timeline', 'connect')),
+  title       TEXT,                          -- null → the section's own heading
+  blurb       TEXT,
+  -- Hidden rather than visible, so a freshly added row with nothing
+  -- ticked is still a blank row the engine can drop.
+  is_hidden   INTEGER NOT NULL DEFAULT 0 CHECK (is_hidden IN (0, 1)),
+  UNIQUE (page_id, section)
+) STRICT;
+
+CREATE TABLE front_page_stats (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  page_id     TEXT NOT NULL REFERENCES front_page (id) ON DELETE CASCADE,
+  sort_order  INTEGER NOT NULL DEFAULT 0,
+  label       TEXT NOT NULL,
+  source      TEXT NOT NULL DEFAULT 'manual'
+                CHECK (source IN ('manual', 'years_since', 'regions', 'chapters',
+                                  'partners', 'events_held', 'retreats_held',
+                                  'people', 'awards_given')),
+  value       TEXT,
+  suffix      TEXT,                          -- '+', 'k', ' states'
+  note        TEXT
+) STRICT;
+
+CREATE TABLE front_page_paths (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  page_id     TEXT NOT NULL REFERENCES front_page (id) ON DELETE CASCADE,
+  sort_order  INTEGER NOT NULL DEFAULT 0,
+  label       TEXT NOT NULL,                 -- 'Attend'
+  icon        TEXT,                          -- one emoji
+  blurb       TEXT
+) STRICT;
+
+CREATE TABLE front_page_path_actions (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  path_id     INTEGER NOT NULL REFERENCES front_page_paths (id) ON DELETE CASCADE,
+  sort_order  INTEGER NOT NULL DEFAULT 0,
+  label       TEXT NOT NULL,
+  description TEXT,
+  url         TEXT NOT NULL
+) STRICT;
+
+CREATE INDEX front_page_path_actions_path_idx ON front_page_path_actions (path_id, sort_order);
+
+-- ── Seed ─────────────────────────────────────────────────────────
+
+INSERT INTO front_page
+  (id, eyebrow, headline, subhead,
+   primary_label, primary_url, secondary_label, secondary_url)
+VALUES
+  ('home',
+   'Young adults of the Unity movement',
+   'Next Generation of Unity',
+   'A community for 18–40 year olds, rooted in spiritual growth, leadership and sacred service.',
+   'Find a retreat', '/retreats',
+   'Find your way in', '#connect');
+
+INSERT INTO front_page_sections (page_id, sort_order, section, title, blurb) VALUES
+  ('home', 0, 'countdown', NULL, NULL),
+  ('home', 1, 'retreats',  'National Retreats', 'Our flagship gatherings, open to young adults across the country.'),
+  ('home', 2, 'stats',     'NGU by the numbers', NULL),
+  ('home', 3, 'timeline',  'Moments that shaped us', 'Highlights from our history.'),
+  ('home', 4, 'connect',   'Find your way in', 'Tell us what you''re looking for.');
+
+INSERT INTO front_page_stats (page_id, sort_order, label, source) VALUES
+  ('home', 0, 'Regions',       'regions'),
+  ('home', 1, 'Chapters',      'chapters'),
+  ('home', 2, 'Retreats held', 'retreats_held'),
+  ('home', 3, 'Awards given',  'awards_given');
+
+INSERT INTO front_page_paths (page_id, sort_order, label, icon, blurb) VALUES
+  ('home', 0, 'Attend',  '🧭', 'Come to a gathering near you or across the country.'),
+  ('home', 1, 'Serve',   '🤲', 'Help create transformative experiences for young adults.'),
+  ('home', 2, 'Belong',  '🌱', 'Make NGU your community.'),
+  ('home', 3, 'Partner', '🤝', 'Bring your ministry or organization alongside us.');
+
+INSERT INTO front_page_path_actions (path_id, sort_order, label, description, url)
+SELECT p.id, a.sort_order, a.label, a.description, a.url
+  FROM front_page_paths p
+  JOIN (
+    SELECT 'Attend' AS path, 0 AS sort_order, 'See upcoming retreats' AS label,
+           'National, regional and partner gatherings.' AS description,
+           '/retreats' AS url
+    UNION ALL SELECT 'Attend', 1, 'NGU calendar',
+           'Everything on the schedule, in one place.',
+           'https://ngu.churchcenter.com/calendar?view=gallery'
+    UNION ALL SELECT 'Serve', 0, 'Volunteer',
+           'Lend a hand at a retreat or event.',
+           'https://ngu.churchcenter.com/people/forms/1176908'
+    UNION ALL SELECT 'Serve', 1, 'Speaker & Musician Directory',
+           'Join our network of speakers, musicians and facilitators.',
+           'https://ngu.churchcenter.com/people/forms/1173181'
+    UNION ALL SELECT 'Belong', 0, 'Become a member',
+           'Join the NGU community officially.',
+           'https://ngu.churchcenter.com/people/forms/1135816'
+    UNION ALL SELECT 'Belong', 1, 'Find your region',
+           'Chapters and regions across the country.',
+           '/community'
+    UNION ALL SELECT 'Partner', 0, 'Affiliation form',
+           'Affiliate your ministry or spiritual organization with NGU.',
+           'https://ngu.churchcenter.com/people/forms/1135750'
+  ) a ON a.path = p.label
+ WHERE p.page_id = 'home';

server/src/migrations/018_front_page_touch.sql

@@ -0,0 +1,16 @@
+-- ═══════════════════════════════════════════════════════════════
+-- FRONT PAGE updated_at
+--
+-- Same rule as the other touch triggers in 002: an UPDATE that
+-- doesn't set updated_at itself gets it set, which is what the
+-- admin engine's optimistic concurrency compares against. On its
+-- own because the migration runner may drop anything that follows
+-- a BEGIN...END body.
+-- ═══════════════════════════════════════════════════════════════
+
+CREATE TRIGGER front_page_touch
+AFTER UPDATE ON front_page
+FOR EACH ROW WHEN new.updated_at = old.updated_at
+BEGIN
+  UPDATE front_page SET updated_at = datetime('now') WHERE id = new.id;
+END;

server/src/migrations/019_front_page_calendar.sql

@@ -0,0 +1,61 @@
+-- ═══════════════════════════════════════════════════════════════
+-- FRONT PAGE: calendar band
+--
+-- Adds 'calendar' to the sections the front page can draw. The key
+-- is a CHECK, and SQLite can't alter a CHECK in place, so the table
+-- is rebuilt: new table, copy, drop, rename.
+--
+-- No PRAGMA foreign_keys dance. front_page_sections only points out
+-- (at front_page); nothing points in, so dropping the old table
+-- cascades into nothing, and the copy keeps every page_id valid.
+--
+-- The new band is inserted straight after the retreats carousel,
+-- where "what's on" reads naturally, by shifting everything below it
+-- down one. If retreats was removed on this box, it goes last.
+--
+-- Adding another section later is the same three steps: this CHECK,
+-- the enum in both descriptor halves, and SECTIONS in Home.tsx.
+--
+-- No BEGIN...END in this file.
+-- ═══════════════════════════════════════════════════════════════
+
+CREATE TABLE front_page_sections_new (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  page_id     TEXT NOT NULL REFERENCES front_page (id) ON DELETE CASCADE,
+  sort_order  INTEGER NOT NULL DEFAULT 0,
+  section     TEXT NOT NULL
+                CHECK (section IN ('countdown', 'retreats', 'calendar', 'stats',
+                                   'timeline', 'connect')),
+  title       TEXT,
+  blurb       TEXT,
+  is_hidden   INTEGER NOT NULL DEFAULT 0 CHECK (is_hidden IN (0, 1)),
+  UNIQUE (page_id, section)
+) STRICT;
+
+INSERT INTO front_page_sections_new (id, page_id, sort_order, section, title, blurb, is_hidden)
+SELECT id, page_id, sort_order, section, title, blurb, is_hidden
+  FROM front_page_sections;
+
+DROP TABLE front_page_sections;
+
+ALTER TABLE front_page_sections_new RENAME TO front_page_sections;
+
+UPDATE front_page_sections
+   SET sort_order = sort_order + 1
+ WHERE page_id = 'home'
+   AND sort_order > COALESCE(
+         (SELECT sort_order FROM front_page_sections
+           WHERE page_id = 'home' AND section = 'retreats'),
+         (SELECT MAX(sort_order) FROM front_page_sections WHERE page_id = 'home'));
+
+INSERT INTO front_page_sections (page_id, sort_order, section, title, blurb)
+SELECT 'home',
+       COALESCE(
+         (SELECT sort_order + 1 FROM front_page_sections
+           WHERE page_id = 'home' AND section = 'retreats'),
+         (SELECT COALESCE(MAX(sort_order), -1) + 1 FROM front_page_sections
+           WHERE page_id = 'home')),
+       'calendar',
+       'What''s on',
+       'Every gathering, class and meeting in one place.'
+ WHERE EXISTS (SELECT 1 FROM front_page WHERE id = 'home');

server/src/routes/content.js

@@ -47,7 +47,14 @@
 
 import { Hono } from "hono";
 
-import { asBool, loadBlocks, loadLinks, paragraphs, splitLinks } from "../shape.js";
+import {
+  asBool,
+  loadBlocks,
+  loadLinks,
+  paragraphs,
+  shapeSeries,
+  splitLinks,
+} from "../shape.js";
 
 const content = new Hono();
 
@@ -108,25 +115,6 @@ function shapeHost(row) {
   };
 }
 
-/* The repeating schedule, or null for a one-off. Weekdays collapse
-   from seven flags to a list of the ticked ones, Sunday first; an
-   empty list means "starts_on's weekday", which the client resolves
-   since it already holds starts_on. Occurrences are not sent — they
-   are derived, and the client derives them against its own today. */
-const SERIES_WEEKDAYS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
-
-function shapeSeries(row) {
-  if (!asBool(row.is_series)) return null;
-  return {
-    frequency: row.series_frequency,
-    interval: row.series_interval,
-    weekdays: SERIES_WEEKDAYS.filter((day) => asBool(row[`series_${day}`])),
-    start_time: row.series_start_time,
-    end_time: row.series_end_time,
-    count: row.series_count,
-  };
-}
-
 function shapeEvent(row, links, cardBlocks, hosts = []) {
   const { actions, instagram } = splitLinks(links);
 

server/src/routes/home.js

@@ -0,0 +1,186 @@
+/* ═══════════════════════════════════════════════════════════════
+   FRONT PAGE ROUTE  —  read-only, mounted under /api
+
+     GET /front-page     the home page's configuration, resolved
+
+   Everything the admin's Front page editor holds, shaped for the
+   page: hidden sections dropped, stats counted, paths carrying
+   their actions, and the countdown's event looked up.
+
+   The retreats carousel and the timeline rail are not in here.
+   They fetch /events and /history themselves, as they do on their
+   own pages, so the rules for which events and entries are public
+   live in one place each. This route only says whether those bands
+   appear and under what heading.
+
+   ── Stats ──
+   A stat's source picks a query from STAT_QUERIES. Each counts
+   exactly what the matching public page shows: published rows, and
+   for awards only public citations to published people. A count
+   that disagreed with the page it summarises would be worse than
+   none. 'manual' and 'years_since' read the row's own value.
+
+   ── Countdown ──
+   The pinned event if it is still published and not over;
+   otherwise the next published, non-cancelled event that hasn't
+   ended. "Hasn't ended" is COALESCE(ends_on, starts_on) >= today,
+   so a running series with a start date in the past still counts.
+   The client works out the next meeting of a series from `series`.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { Hono } from "hono";
+
+import { asBool, shapeSeries } from "../shape.js";
+
+const home = new Hono();
+
+const CACHE = "public, max-age=60, stale-while-revalidate=300";
+
+const json = (c, body) => c.json(body, 200, { "Cache-Control": CACHE });
+
+const PAGE_ID = "home";
+
+const STAT_QUERIES = {
+  regions: `SELECT COUNT(*) AS n FROM organizations WHERE kind = 'region' AND is_published = 1`,
+  chapters: `SELECT COUNT(*) AS n FROM organizations WHERE kind = 'chapter' AND is_published = 1`,
+  partners: `SELECT COUNT(*) AS n FROM organizations WHERE kind = 'partner' AND is_published = 1`,
+  events_held: `SELECT COUNT(*) AS n FROM v_events
+                 WHERE is_published = 1 AND effective_status = 'past'`,
+  retreats_held: `SELECT COUNT(*) AS n FROM v_events
+                   WHERE is_published = 1 AND effective_status = 'past'
+                     AND event_type = 'retreat'`,
+  people: `SELECT COUNT(*) AS n FROM people WHERE is_published = 1`,
+  awards_given: `SELECT COUNT(*) AS n
+                   FROM person_awards pa
+                   JOIN people p ON p.id = pa.person_id AND p.is_published = 1
+                   JOIN awards a ON a.id = pa.award_id  AND a.is_published = 1
+                  WHERE pa.is_public = 1`,
+};
+
+/* The number as a string, or null when there's nothing to print —
+   a manual stat nobody filled in, or a year that isn't one. */
+function statValue(db, row) {
+  if (row.source === "manual") return row.value || null;
+
+  if (row.source === "years_since") {
+    const year = Number.parseInt(row.value ?? "", 10);
+    if (!Number.isInteger(year)) return null;
+    return String(Math.max(0, new Date().getFullYear() - year));
+  }
+
+  const sql = STAT_QUERIES[row.source];
+  return sql ? String(db.prepare(sql).get().n) : null;
+}
+
+function shapeCountdown(row) {
+  if (!row) return null;
+  return {
+    id: row.id,
+    title: row.title,
+    theme: row.theme,
+    starts_on: row.starts_on,
+    ends_on: row.ends_on,
+    date_label: row.date_label,
+    location_label: row.location_label,
+    is_online: asBool(row.is_online),
+    color: row.effective_color,
+    event_logo: row.event_logo,
+    series: shapeSeries(row),
+  };
+}
+
+home.get("/front-page", (c) => {
+  const db = c.get("db");
+
+  const page = db.prepare(`SELECT * FROM front_page WHERE id = ?`).get(PAGE_ID);
+
+  // Migration 017 creates the row and the engine refuses to delete
+  // it, so this is a database that hasn't been migrated. Say so.
+  if (!page) return c.json({ error: "The front page hasn't been set up." }, 500);
+
+  const byOrder = (table) =>
+    db.prepare(`SELECT * FROM ${table} WHERE page_id = ? ORDER BY sort_order`).all(PAGE_ID);
+
+  const sections = byOrder("front_page_sections")
+    .filter((row) => !asBool(row.is_hidden))
+    .map((row) => ({ section: row.section, title: row.title, blurb: row.blurb }));
+
+  const slides = byOrder("front_page_slides").map((row) => ({
+    media: row.media,
+    alt: row.alt,
+    caption: row.caption,
+    link_url: row.link_url,
+  }));
+
+  const stats = byOrder("front_page_stats")
+    .map((row) => ({
+      label: row.label,
+      value: statValue(db, row),
+      suffix: row.suffix,
+      note: row.note,
+    }))
+    .filter((stat) => stat.value !== null);
+
+  const actions = db.prepare(
+    `SELECT label, description, url FROM front_page_path_actions
+      WHERE path_id = ? ORDER BY sort_order`,
+  );
+  const paths = byOrder("front_page_paths")
+    .map((row) => ({
+      label: row.label,
+      icon: row.icon,
+      blurb: row.blurb,
+      actions: actions.all(row.id),
+    }))
+    // A path with nothing to do is a dead tab.
+    .filter((path) => path.actions.length > 0);
+
+  const notOver = `is_published = 1
+                   AND effective_status != 'cancelled'
+                   AND COALESCE(ends_on, starts_on) >= date('now')`;
+
+  const pinned = page.countdown_event_id
+    ? db
+        .prepare(`SELECT * FROM v_events WHERE id = ? AND ${notOver}`)
+        .get(page.countdown_event_id)
+    : null;
+
+  const next =
+    pinned ??
+    db
+      .prepare(
+        `SELECT * FROM v_events
+          WHERE ${notOver}
+          ORDER BY starts_on, sort_order
+          LIMIT 1`,
+      )
+      .get();
+
+  return json(c, {
+    front_page: {
+      hero: {
+        mode: page.hero_mode,
+        eyebrow: page.eyebrow,
+        headline: page.headline,
+        subhead: page.subhead,
+        primary: page.primary_label && page.primary_url
+          ? { label: page.primary_label, url: page.primary_url }
+          : null,
+        secondary: page.secondary_label && page.secondary_url
+          ? { label: page.secondary_label, url: page.secondary_url }
+          : null,
+        slide_seconds: page.slide_seconds,
+        slides,
+        livestream: page.livestream_url
+          ? { url: page.livestream_url, title: page.livestream_title }
+          : null,
+      },
+      sections,
+      stats,
+      paths,
+      countdown: shapeCountdown(next),
+    },
+  });
+});
+
+export default home;

server/src/shape.js

@@ -144,4 +144,26 @@ export function splitLinks(links = []) {
   };
 }
 
+/* ── Event series ──────────────────────────────────────────────
+     The repeating schedule, or null for a one-off. Weekdays
+     collapse from seven flags to a list of the ticked ones, Sunday
+     first; an empty list means "starts_on's weekday", which the
+     client resolves since it already holds starts_on. Occurrences
+     are not sent — they are derived, and the client derives them
+     against its own today. Shared by /events and /front-page.
+   ───────────────────────────────────────────────────────────── */
+const SERIES_WEEKDAYS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+
+export function shapeSeries(row) {
+  if (!asBool(row.is_series)) return null;
+  return {
+    frequency: row.series_frequency,
+    interval: row.series_interval,
+    weekdays: SERIES_WEEKDAYS.filter((day) => asBool(row[`series_${day}`])),
+    start_time: row.series_start_time,
+    end_time: row.series_end_time,
+    count: row.series_count,
+  };
+}
+
 export { asBool };

src/components/DoveMark.tsx

@@ -0,0 +1,30 @@
+/* ═══════════════════════════════════════════════════════════════
+   DOVE MARK
+
+   NGU's dove, lifted from the original home page. The path and its
+   two transforms are the drawing as exported, untouched; only the
+   wrapper changed — sized by the caller, coloured by currentColor,
+   and hidden from screen readers since it's decoration wherever
+   it appears.
+
+   Renders as an <svg> element, so it nests inside another SVG as
+   well as in HTML: pass x, y, width and height to place it in a
+   parent viewBox.
+   ═══════════════════════════════════════════════════════════════ */
+
+import type { SVGProps } from 'react'
+
+const PATH =
+  'm 355.91146,-123.11955 c 3.13369,-1.59928 7.04147,-4.49077 10.29591,-6.33595 3.25443,-1.84519 6.30899,-3.58417 9.61426,-4.20523 2.65302,-0.4889 6.37319,-0.18817 9.07211,0.58357 2.69896,0.77175 5.57299,2.70484 7.16593,3.40762 1.59295,0.70275 2.24655,0.19006 2.82855,-0.77494 0.582,-0.96504 2.81839,-6.05064 3.84362,-8.9293 1.02519,-2.87864 2.26409,-5.72337 4.14553,-7.76121 1.88144,-2.03782 2.31893,-2.07776 4.06202,-3.15865 1.74307,-1.08086 10.24244,-3.71628 14.53403,-5.61581 4.29158,-1.89953 8.11957,-3.58996 12.24067,-5.48028 4.12109,-1.89033 6.08861,-2.79441 7.30709,-3.29554 0.273,0.73801 -0.2034,3.06663 -1.16031,5.22317 -0.95691,2.15654 -2.9569,5.04357 -4.86279,7.26365 -1.90589,2.22009 -4.28775,4.10342 -6.82223,5.66812 -2.53448,1.56467 -4.53981,2.45823 -7.60439,3.71266 -3.06457,1.25446 -11.88915,4.7102 -14.64698,7.12005 -2.75786,2.40984 -4.18313,6.63212 -3.64772,7.60115 0.5354,0.96902 2.51391,-1.48598 3.81084,-2.34867 1.29694,-0.8627 1.95172,-1.05814 3.14897,-1.09198 1.17765,-0.0172 2.77532,0.40067 3.29849,0.63293 1.48441,0.659 3.97438,2.00122 3.54176,3.36038 -0.16368,0.51434 -0.19462,0.56904 -3.05611,1.25841 -2.86151,0.68935 -3.48508,1.29579 -3.81533,3.74861 -0.22097,1.47094 -1.44719,3.88743 -3.13317,5.28015 -1.68596,1.39274 -4.55099,2.93627 -8.41717,3.35482 -3.86617,0.41855 -6.17544,3.97192 -6.93256,5.37259 -0.75713,1.40064 -2.66104,5.90506 -2.99685,6.15238 -0.3358,0.24732 -2.76998,-0.36582 -3.79458,-0.82517 -1.02463,-0.45935 -2.612,-1.39111 -3.63624,-2.16132 -1.02425,-0.7702 -3.457,-2.975 -3.0018,-3.64018 0.45519,-0.66516 1.56543,-1.35445 2.73515,-2.12254 1.16972,-0.76811 3.86984,-2.33631 5.3456,-3.59002 1.47576,-1.25372 2.7334,-2.47754 3.4042,-3.48323 0.67079,-1.00567 0.9358,-2.14286 -0.28206,-2.7388 -1.21786,-0.59597 -1.84092,-0.39835 -4.4486,0.0225 -2.60769,0.42097 -4.8218,1.10142 -8.46858,1.9005 -3.64678,0.79905 -7.82786,2.49393 -10.97221,3.07304 -3.14439,0.5791 -4.3363,0.83756 -8.5197,0.95691 -4.1834,0.11935 -7.15938,-0.35864 -8.95468,-0.91763 -1.7953,-0.55899 -2.64147,-1.55556 -2.60415,-2.17667 3.90737,-1.58574 7.9469,-3.2841 11.38348,-5.04009 z'
+
+export default function DoveMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 72.867699 48.568241" aria-hidden="true" focusable="false" {...props}>
+      <g transform="translate(-70.490069,-117.83965)">
+        <g transform="matrix(0.71532587,0,0,0.71532587,-173.91758,237.73112)">
+          <path d={PATH} fill="currentColor" />
+        </g>
+      </g>
+    </svg>
+  )
+}

src/data/eventData.d.ts

@@ -2,7 +2,7 @@
    server/src/routes/content.js sends them. */
 
 import type { EventType } from "../lib/eventTypes.ts";
-import type { EventListItem } from "../lib/useContent.ts";
+import type { EventListItem, EventSection } from "../lib/useContent.ts";
 
 export type EventFilter = {
   section?: string;
@@ -13,6 +13,8 @@ export type EventFilter = {
 
 export declare function useEvents(filter?: EventFilter): {
   events: EventListItem[];
+  /** event_sections, in scope order. Empty until loaded. */
+  sections: EventSection[];
   loading: boolean;
   error: Error | null;
 };

src/data/eventData.js

@@ -18,6 +18,13 @@
    belongs to, the type is what kind of gathering it is. A regional
    class matches both { section: "regional" } and { type: "class" }.
 
+   The event_sections rows (the scope list) come back alongside, for
+   anything that offers a scope filter.
+
+   No fallback. An empty list on a failed request would read as
+   "nothing scheduled" when the truth is "the server is down", so
+   the error comes back and each caller says so.
+
    Filtering here rather than in the query keeps the endpoint to
    one cached response. At a few dozen events that's the right
    trade; if the list ever runs to hundreds, move the filters into
@@ -28,12 +35,15 @@ import { useMemo } from "react";
 
 import { useResource } from "../lib/useResource.js";
 
-const EMPTY = { events: [] };
+/* One shared empty list, so a memo keyed on `sections` doesn't
+   restart on every render before the data arrives. */
+const NO_SECTIONS = [];
 
 export function useEvents({ section, host, status, type } = {}) {
-  const { data, error, loading } = useResource("/events", { fallback: EMPTY });
+  const { data, error, loading } = useResource("/events");
 
   const all = data?.events;
+  const sections = data?.sections ?? NO_SECTIONS;
 
   /* An array prop is a new identity on every render, which would
      restart the memo each time. Joining it gives the dependency
@@ -55,7 +65,7 @@ export function useEvents({ section, host, status, type } = {}) {
     return list;
   }, [all, section, host, status, typeKey]);
 
-  return { events, loading, error };
+  return { events, sections, loading, error };
 }
 
 /* Past and upcoming, split. `status` arrives already resolved — the

src/lib/adminSchema.d.ts

@@ -94,6 +94,9 @@ export type EntitySpec = {
   idLabel: string;
   /** "auto": the table assigns the id, so the form shows it rather than asking. */
   idKind?: "auto";
+  /** The one id a singleton entity has. The list opens it directly,
+   *  and the editor offers no slug, back link or delete. */
+  singleton?: string;
   /** Field(s) the slug is composed from. Absent when idKind is "auto". */
   slugFrom?: string | string[];
   titleFrom?: string;
@@ -108,7 +111,8 @@ export type AdminEntityKey =
   | "people"
   | "teams"
   | "awards"
-  | "timeline";
+  | "timeline"
+  | "front_page";
 
 /* Indexed by route param as often as by name, so any other string
    reads as possibly missing. */

src/lib/adminSchema.js

@@ -941,7 +941,202 @@ const timeline = {
   ],
 };
 
-export const ADMIN_ENTITIES = { organizations, events, people, teams, awards, timeline };
+/* ── Front page ──────────────────────────────────────────────────
+
+   One record (see the singleton note in server/src/admin-schema.js).
+   The groups are the hero; the collections below are the rest of
+   the page. Photos and the livestream are editable whatever the
+   mode, so either can be ready before the switch is flipped.
+
+   Section keys and stat sources are the CHECK lists in migrations
+   017 and 019. The labels here are what the admin reads; the values are
+   what the page and the API key on. */
+
+const FRONT_PAGE_SECTIONS = [
+  ["countdown", "Countdown to the next event"],
+  ["retreats", "National Retreats carousel"],
+  ["calendar", "Event calendar"],
+  ["stats", "Numbers"],
+  ["timeline", "Featured timeline"],
+  ["connect", "Find your way in"],
+];
+
+const STAT_SOURCES = [
+  ["manual", "Typed in — shows Value"],
+  ["years_since", "Years since — Value is the year"],
+  ["regions", "Count: published regions"],
+  ["chapters", "Count: published chapters"],
+  ["partners", "Count: published partners"],
+  ["events_held", "Count: past events"],
+  ["retreats_held", "Count: past retreats"],
+  ["people", "Count: published people"],
+  ["awards_given", "Count: public awards given"],
+];
+
+const frontPage = {
+  key: "front_page",
+  label: "Front page",
+  singular: "front page",
+  idLabel: "Page",
+  singleton: "home",
+
+  list: { columns: [], filters: [] },
+
+  groups: [
+    {
+      legend: "Hero",
+      note: "The first thing a visitor sees. Blank buttons don't render.",
+      fields: [
+        {
+          path: "hero_mode",
+          label: "Mode",
+          widget: "select",
+          options: [
+            ["brand", "Brand — animated colour, no media"],
+            ["photos", "Photos — cycles through the photos below"],
+            ["livestream", "Livestream — embeds the stream with a LIVE badge"],
+          ],
+          blankLabel: "— brand —",
+          help: "Switch to Livestream when you go live, and back when you're done",
+        },
+        { path: "eyebrow", label: "Eyebrow", help: "Small line above the headline" },
+        { path: "headline", label: "Headline", full: true },
+        { path: "subhead", label: "Subhead", widget: "textarea", full: true },
+        { path: "primary_label", label: "Main button label" },
+        { path: "primary_url", label: "Main button link", help: "/retreats, #connect or a full URL" },
+        { path: "secondary_label", label: "Second button label" },
+        { path: "secondary_url", label: "Second button link" },
+      ],
+    },
+    {
+      legend: "Photos and livestream",
+      fields: [
+        {
+          path: "slide_seconds",
+          label: "Seconds per photo",
+          widget: "number",
+          help: "Photos mode. 3 to 60",
+        },
+        {
+          path: "livestream_url",
+          label: "Livestream link",
+          full: true,
+          help: "A YouTube, Facebook or Vimeo link, or any embed URL",
+        },
+        { path: "livestream_title", label: "Livestream title", full: true },
+      ],
+    },
+    {
+      legend: "Countdown",
+      fields: [
+        {
+          path: "countdown_event_id",
+          label: "Count down to",
+          widget: "select",
+          optionsFrom: "events",
+          blankLabel: "— the next upcoming event —",
+          help: "Leave blank almost always. A pinned event that's over falls back to the next one",
+        },
+      ],
+    },
+  ],
+
+  children: [
+    {
+      key: "sections",
+      label: "Page sections",
+      note: "Drag to reorder. Each section can appear once; leave one out to drop it.",
+      addLabel: "Add section",
+      title: (row) =>
+        FRONT_PAGE_SECTIONS.find(([key]) => key === row.section)?.[1] ?? "New section",
+      blank: { section: "", title: "", blurb: "" },
+      fields: [
+        {
+          path: "section",
+          label: "Section",
+          widget: "select",
+          options: FRONT_PAGE_SECTIONS,
+          required: true,
+        },
+        { path: "title", label: "Heading", help: "Blank for the section's own" },
+        { path: "blurb", label: "Blurb", full: true },
+        { path: "is_hidden", label: "Hidden", widget: "checkbox", help: "Hide for now" },
+      ],
+    },
+    {
+      key: "slides",
+      label: "Hero photos",
+      note: "Shown in Photos mode, in this order.",
+      addLabel: "Add photo",
+      title: (row) => row.caption || row.media || "New photo",
+      blank: { media: "", alt: "", caption: "" },
+      fields: [
+        { path: "media", label: "Photo", required: true, help: "Filename in public/front-page/, or a URL" },
+        { path: "alt", label: "Description", help: "For screen readers" },
+        { path: "caption", label: "Caption", full: true },
+        { path: "link_url", label: "Link", help: "Optional; makes the caption a link" },
+      ],
+    },
+    {
+      key: "stats",
+      label: "Numbers",
+      note: "Counts update themselves. A typed-in number with no value is left out.",
+      addLabel: "Add number",
+      title: (row) => row.label || "New number",
+      blank: { label: "", source: "", value: "" },
+      fields: [
+        { path: "label", label: "Label", required: true },
+        {
+          path: "source",
+          label: "Where it comes from",
+          widget: "select",
+          options: STAT_SOURCES,
+          blankLabel: "— typed in —",
+        },
+        { path: "value", label: "Value", help: "Typed in: the number. Years since: the year" },
+        { path: "suffix", label: "Suffix", help: "+, k, % …" },
+        { path: "note", label: "Note", full: true },
+      ],
+    },
+    {
+      key: "paths",
+      label: "Find your way in",
+      note: "Each path is a choice a visitor can pick; its actions appear when they do.",
+      addLabel: "Add path",
+      title: (row) => [row.icon, row.label].filter(Boolean).join(" ") || "New path",
+      blank: { label: "", icon: "", blurb: "" },
+      fields: [
+        { path: "label", label: "Label", required: true, help: "Attend, Serve…" },
+        { path: "icon", label: "Icon", help: "One emoji" },
+        { path: "blurb", label: "Blurb", full: true },
+      ],
+      children: [
+        {
+          key: "actions",
+          label: "Actions",
+          addLabel: "Add action",
+          title: (row) => row.label || "New action",
+          blank: { label: "", url: "" },
+          fields: [
+            { path: "label", label: "Label", required: true },
+            { path: "url", label: "Link", required: true },
+            { path: "description", label: "Description", full: true },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const ADMIN_ENTITIES = {
+  organizations,
+  events,
+  people,
+  teams,
+  awards,
+  timeline,
+  front_page: frontPage,
+};
 
 export function slugify(value) {
   return String(value ?? "")

src/lib/embeds.ts

@@ -0,0 +1,62 @@
+/* ═══════════════════════════════════════════════════════════════
+   EMBEDS
+
+   Turns the link an admin pastes into the URL an <iframe> can
+   load. People paste the page they're looking at — a YouTube watch
+   or live link, a Facebook video, a Vimeo page — not the embed
+   form, so those are recognised and rewritten. Anything else that
+   is https is assumed to already be an embed URL and passed
+   through; anything that isn't https is refused, so the hero never
+   frames a plain-http or javascript: URL.
+
+   Streams start muted: browsers only autoplay muted video, and a
+   hero that starts shouting is worse than one that asks.
+   ═══════════════════════════════════════════════════════════════ */
+
+function youtubeId(url: URL): string | null {
+  const host = url.hostname.replace(/^www\.|^m\./, '')
+  if (host === 'youtu.be') return url.pathname.slice(1) || null
+  if (host !== 'youtube.com' && host !== 'youtube-nocookie.com') return null
+
+  const v = url.searchParams.get('v')
+  if (v) return v
+
+  // /live/ID, /embed/ID, /shorts/ID
+  const match = url.pathname.match(/^\/(?:live|embed|shorts)\/([\w-]+)/)
+  return match?.[1] ?? null
+}
+
+/** An iframe src for a pasted stream link, or null if it can't be framed. */
+export function livestreamEmbedUrl(raw?: string | null): string | null {
+  if (!raw) return null
+
+  let url: URL
+  try {
+    url = new URL(raw.trim())
+  } catch {
+    return null
+  }
+  if (url.protocol !== 'https:') return null
+
+  const yt = youtubeId(url)
+  if (yt) {
+    return `https://www.youtube-nocookie.com/embed/${encodeURIComponent(yt)}?autoplay=1&mute=1&playsinline=1`
+  }
+
+  const host = url.hostname.replace(/^www\./, '')
+
+  if (host === 'vimeo.com') {
+    const id = url.pathname.match(/^\/(?:event\/)?(\d+)/)?.[1]
+    if (id) {
+      return url.pathname.startsWith('/event/')
+        ? `https://vimeo.com/event/${id}/embed?autoplay=1&muted=1`
+        : `https://player.vimeo.com/video/${id}?autoplay=1&muted=1`
+    }
+  }
+
+  if ((host === 'facebook.com' || host === 'fb.watch') && !url.pathname.startsWith('/plugins/')) {
+    return `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(url.href)}&autoplay=1&mute=1`
+  }
+
+  return url.href
+}

src/lib/eventSeries.ts

@@ -171,6 +171,39 @@ export function upcomingOccurrences(
   return out
 }
 
+/** Every meeting between two dates, inclusive, in order. For a
+ *  calendar page: `from` and `to` are the visible range. */
+export function occurrencesBetween(
+  series: EventSeries | null | undefined,
+  startsOn: string | null | undefined,
+  endsOn: string | null | undefined,
+  from: string,
+  to: string,
+): string[] {
+  if (!series) return []
+  const out: string[] = []
+  for (const date of occurrences(series, startsOn, endsOn)) {
+    if (date > to) break
+    if (date >= from) out.push(date)
+  }
+  return out
+}
+
+/** The first meeting on or after `from`, or null if the series has
+ *  ended by then. */
+export function firstOccurrenceFrom(
+  series: EventSeries | null | undefined,
+  startsOn: string | null | undefined,
+  endsOn: string | null | undefined,
+  from: string,
+): string | null {
+  if (!series) return null
+  for (const date of occurrences(series, startsOn, endsOn)) {
+    if (date >= from) return date
+  }
+  return null
+}
+
 /* ── Words ───────────────────────────────────────────────────── */
 
 const ORDINALS = ['', '1st', '2nd', '3rd', '4th', 'last']

src/lib/media.ts

@@ -31,6 +31,10 @@ export const orgLogo = inDir('/org-logos') //            ⚠ guess
 export const teamLogo = inDir('/team-logos') //          ⚠ guess
 export const awardLogo = inDir('/award-logos') //        ⚠ guess
 
+/* front_page_slides.media — the home page hero's photos. New with
+   the Front page editor, which names the directory in its help. */
+export const heroPhoto = inDir('/front-page')
+
 /* content_blocks.media, which can be an image on any owner's page,
    so it can't share a per-entity directory. */
 export const blockMedia = inDir('/media') //             ⚠ guess

src/lib/useFrontPage.ts

@@ -0,0 +1,95 @@
+/* ═══════════════════════════════════════════════════════════════
+   FRONT PAGE DATA
+
+   GET /front-page, as routes/home.js shapes it: the hero, the
+   visible sections in order, counted stats, paths with actions,
+   and the countdown's event. Edited in the admin under Front page.
+
+   No fallback content. If the request fails the page says so — a
+   plausible default home page would hide a broken server behind
+   something that looks fine.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { useRecord, type Resource } from './useRecord.ts'
+import type { EventSeries } from './eventSeries.ts'
+
+export type HeroMode = 'brand' | 'photos' | 'livestream'
+
+/** The CHECK list on front_page_sections.section. */
+export type FrontPageSectionKey =
+  | 'countdown'
+  | 'retreats'
+  | 'calendar'
+  | 'stats'
+  | 'timeline'
+  | 'connect'
+
+export type HeroButton = { label: string; url: string }
+
+export type HeroSlide = {
+  media: string
+  alt?: string | null
+  caption?: string | null
+  link_url?: string | null
+}
+
+export type Hero = {
+  mode: HeroMode
+  eyebrow?: string | null
+  headline: string
+  subhead?: string | null
+  primary: HeroButton | null
+  secondary: HeroButton | null
+  slide_seconds: number
+  slides: HeroSlide[]
+  livestream: { url: string; title?: string | null } | null
+}
+
+export type FrontPageSection = {
+  section: FrontPageSectionKey
+  /** Null → the section's own heading. */
+  title?: string | null
+  blurb?: string | null
+}
+
+export type FrontPageStat = {
+  label: string
+  /** Already counted or typed; never null — the API drops those. */
+  value: string
+  suffix?: string | null
+  note?: string | null
+}
+
+export type PathAction = { label: string; description?: string | null; url: string }
+
+export type FrontPagePath = {
+  label: string
+  icon?: string | null
+  blurb?: string | null
+  actions: PathAction[]
+}
+
+export type CountdownEvent = {
+  id: string
+  title: string
+  theme?: string | null
+  starts_on?: string | null
+  ends_on?: string | null
+  date_label?: string | null
+  location_label?: string | null
+  is_online: boolean
+  color?: string | null
+  event_logo?: string | null
+  series: EventSeries | null
+}
+
+export type FrontPage = {
+  hero: Hero
+  sections: FrontPageSection[]
+  stats: FrontPageStat[]
+  paths: FrontPagePath[]
+  countdown: CountdownEvent | null
+}
+
+export const useFrontPage = (): Resource<FrontPage> =>
+  useRecord<FrontPage>('/front-page', 'front_page')

src/pages/Home.tsx

@@ -1,485 +1,132 @@
-import { useState, useEffect } from "react";
-import nguLogo from "../assets/NGU_Logo.svg";
-import fallLogo from "../assets/Fall Logo.svg";
-import nguLogo_WhiteBG from "../assets/NGU_Logo_WhiteBG.svg";
+/* ═══════════════════════════════════════════════════════════════
+   HOME  —  /
 
-{/* SVGs */}
-const DoveSVG = ({ className = "" }: { className?: string }) => (
-  <svg className={className} width="72.867699mm" height="48.568241mm" viewBox="0 0 72.867699 48.568241" id="svg1" xmlns="http://www.w3.org/2000/svg">
-    <defs id="defs1" />
-    <g id="layer1" transform="translate(-70.490069,-117.83965)">
-      <g id="g2-5" transform="matrix(0.71532587,0,0,0.71532587,-173.91758,237.73112)" style={{ display: "inline" }}>
-        <path style={{ color: "#000000", display: "inline", fill: "#ffffff", stroke: "none", strokeWidth: 2.284, strokeMiterlimit: 4, strokeDasharray: "none", strokeOpacity: 1}} d="m 355.91146,-123.11955 c 3.13369,-1.59928 7.04147,-4.49077 10.29591,-6.33595 3.25443,-1.84519 6.30899,-3.58417 9.61426,-4.20523 2.65302,-0.4889 6.37319,-0.18817 9.07211,0.58357 2.69896,0.77175 5.57299,2.70484 7.16593,3.40762 1.59295,0.70275 2.24655,0.19006 2.82855,-0.77494 0.582,-0.96504 2.81839,-6.05064 3.84362,-8.9293 1.02519,-2.87864 2.26409,-5.72337 4.14553,-7.76121 1.88144,-2.03782 2.31893,-2.07776 4.06202,-3.15865 1.74307,-1.08086 10.24244,-3.71628 14.53403,-5.61581 4.29158,-1.89953 8.11957,-3.58996 12.24067,-5.48028 4.12109,-1.89033 6.08861,-2.79441 7.30709,-3.29554 0.273,0.73801 -0.2034,3.06663 -1.16031,5.22317 -0.95691,2.15654 -2.9569,5.04357 -4.86279,7.26365 -1.90589,2.22009 -4.28775,4.10342 -6.82223,5.66812 -2.53448,1.56467 -4.53981,2.45823 -7.60439,3.71266 -3.06457,1.25446 -11.88915,4.7102 -14.64698,7.12005 -2.75786,2.40984 -4.18313,6.63212 -3.64772,7.60115 0.5354,0.96902 2.51391,-1.48598 3.81084,-2.34867 1.29694,-0.8627 1.95172,-1.05814 3.14897,-1.09198 1.17765,-0.0172 2.77532,0.40067 3.29849,0.63293 1.48441,0.659 3.97438,2.00122 3.54176,3.36038 -0.16368,0.51434 -0.19462,0.56904 -3.05611,1.25841 -2.86151,0.68935 -3.48508,1.29579 -3.81533,3.74861 -0.22097,1.47094 -1.44719,3.88743 -3.13317,5.28015 -1.68596,1.39274 -4.55099,2.93627 -8.41717,3.35482 -3.86617,0.41855 -6.17544,3.97192 -6.93256,5.37259 -0.75713,1.40064 -2.66104,5.90506 -2.99685,6.15238 -0.3358,0.24732 -2.76998,-0.36582 -3.79458,-0.82517 -1.02463,-0.45935 -2.612,-1.39111 -3.63624,-2.16132 -1.02425,-0.7702 -3.457,-2.975 -3.0018,-3.64018 0.45519,-0.66516 1.56543,-1.35445 2.73515,-2.12254 1.16972,-0.76811 3.86984,-2.33631 5.3456,-3.59002 1.47576,-1.25372 2.7334,-2.47754 3.4042,-3.48323 0.67079,-1.00567 0.9358,-2.14286 -0.28206,-2.7388 -1.21786,-0.59597 -1.84092,-0.39835 -4.4486,0.0225 -2.60769,0.42097 -4.8218,1.10142 -8.46858,1.9005 -3.64678,0.79905 -7.82786,2.49393 -10.97221,3.07304 -3.14439,0.5791 -4.3363,0.83756 -8.5197,0.95691 -4.1834,0.11935 -7.15938,-0.35864 -8.95468,-0.91763 -1.7953,-0.55899 -2.64147,-1.55556 -2.60415,-2.17667 3.90737,-1.58574 7.9469,-3.2841 11.38348,-5.04009 z" id="path1887-1-3-7-7-6-0-1" />
-      </g>
-    </g>
-  </svg>
-);
+   Not a PageShell page: the front page has no title bar, and each
+   band draws its own heading in its own style.
 
-const InstagramIcon = ({ id = "ig-gradient" }) => (
-  <svg viewBox="0 0 24 24" className="w-6 h-6 ig-icon" style={{ "--ig-fill": `url(#${id})` }}>
-    <defs>
-      <linearGradient id={id} x1="0%" y1="100%" x2="100%" y2="0%">
-        <stop offset="0%"   stopColor="#FEDA75" />
-        <stop offset="25%"  stopColor="#FA7E1E" />
-        <stop offset="50%"  stopColor="#D62976" />
-        <stop offset="75%"  stopColor="#962FBF" />
-        <stop offset="100%" stopColor="#4F5BD5" />
-      </linearGradient>
-    </defs>
-    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
-  </svg>
-);
+   Driven by the admin's Front page editor through GET /front-page.
+   The hero comes first, always. After it, the bands in the order
+   the admin dragged them into, minus any they hid. Which component
+   draws a band is decided here, in SECTIONS, keyed on the same list
+   the CHECK in migration 017 holds — the database says "retreats,
+   third, called National Retreats"; this file says what a retreats
+   band looks like.
 
-const FacebookIcon = () => (
-  <svg viewBox="0 0 24 24" className="w-6 h-6 fb-icon" fill="currentColor">
-    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-  </svg>
-);
+   A band with nothing to show draws nothing: the countdown with no
+   upcoming event, the numbers with no numbers, the timeline with
+   nothing featured, the pathfinder with no paths.
 
-const DiscordIcon = () => (
-  <svg viewBox="0 0 24 24" className="w-6 h-6 ds-icon" fill="currentColor">
-    <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057c.001.022.015.04.033.05a19.81 19.81 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
-  </svg>
-);
+   If /front-page fails, the hero still draws (empty) and the error
+   takes the place of the bands, with a retry. There's deliberately
+   no default page to fall back to: it would look fine and hide a
+   broken server.
+   ═══════════════════════════════════════════════════════════════ */
 
-{/* Link Tables */}
-const Social_Links = [
-  { label: "Instagram", href: "https://www.instagram.com/nextgenerationunity/", Icon: InstagramIcon },
-  { label: "Facebook",  href: "https://www.facebook.com/NextGenerationofUnity",    Icon: FacebookIcon },
-  { label: "Discord",   href: "https://discord.com/invite/AtngzpqaX5",    Icon: DiscordIcon },
-]
+import type { ReactNode } from 'react'
 
-const Footer_Links = [
-  { label: "Privacy Policy", href: "#"},
-  { label: "Terms of Service",  href: "#"},
-  { label: "Contact Us",   href: "mailto:info@nextgenerationofunity.org"},
-]
+import HeroStage from './sections/home/HeroStage.tsx'
+import NextEventCountdown from './sections/home/NextEventCountdown.tsx'
+import RetreatsBand from './sections/home/RetreatsBand.tsx'
+import CalendarBand from './sections/home/CalendarBand.tsx'
+import StatsBand from './sections/home/StatsBand.tsx'
+import FeaturedTimelineRail from './sections/home/FeaturedTimelineRail.tsx'
+import Pathfinder from './sections/home/Pathfinder.tsx'
+import {
+  useFrontPage,
+  type FrontPage,
+  type FrontPageSection,
+  type FrontPageSectionKey,
+} from '../lib/useFrontPage.ts'
+import './sections/home/home.css'
 
-const EVENTS = [
-  {
-    id: "spring-2025",
-    title: "Spring Retreat 2026",
-    theme: "Altering Intertia",
-    date: "March/April 2026",
-    location: "Unity Village, MO",
-    image: fallLogo, // e.g. springLogo
-    color: "#f1c2fe",
-    gradient:
-      "linear-gradient(150deg, rgba(240, 224, 254, 1), rgba(255, 255, 255, 0.28))",
-    desc_a:
-      "A weekend of connection, workshops, and community for young adults across the Unity movement.",
-    desc_b: null,
-    status: "past",
-    links: [
-    ],
-  },
-  {
-    id: "fall-retreat-2026",
-    title: "Fall Retreat 2026",
-    theme: "Consciousness Creates",
-    date: "November 12-15th, 2026",
-    location: "Unity Village, MO",
-    image: fallLogo,
-    color: "#b89421",
-    gradient:
-      "linear-gradient(150deg, rgba(178, 150, 42, 0.45), rgba(230, 200, 120, 0.15) 65%, rgba(255, 255, 255, 0.28))",
-    desc_a:
-      "Join us for an exciting opportunity to connect with young adults from across the country through meaningful conversations, creative workshops, and shared artistic expression. All designed to shift your focus to your highest self.",
-    desc_b: "Registration starting at $150, and $75 lodging cost.",
-    status: "upcoming",
-    links: [
-      { label: "Register Now!", link: "https://ngu.churchcenter.com/registrations/events/3761999" },
-      { label: "Scholarship Application", link: "https://ngu.churchcenter.com/people/forms/1261992" },
-      { label: "Volunteer", link: "https://ngu.churchcenter.com/people/forms/1176908" },
-    ],
-  },
-  {
-    id: "spring-recharge-2027",
-    title: "Spring Recharge 2027",
-    theme: "TBD",
-    date: "March 6th, 2027",
-    location: "Online",
-    image: null, // e.g. eventLogo
-    color: "#138ba0",
-    gradient:
-      null,
-    desc_a:
-      "One-day online event to reconnect in the spring.",
-    desc_b: null,
-    status: "upcoming",
-    links: [
-    ],
-  },
-  {
-    id: "spring-service-2027",
-    title: "Service Week 2027",
-    theme: "Leadership & Service",
-    date: "April 4-9th, 2027",
-    location: "Unity Village, MO",
-    image: null, // e.g. eventLogo
-    color: "#138ba0",
-    gradient:
-      null,
-    desc_a:
-      "Join us at beautiful Unity Village for a week of leadership development and service projects.",
-    desc_b: null,
-    status: "upcoming",
-    links: [
-    ],
-  }
-];
-
-const START_INDEX = (() => {
-  const i = EVENTS.findIndex(e => e.status === "upcoming");
-  return i === -1 ? EVENTS.length - 1 : i;
-})();
-
-const TEAL = "#138ba0";
-
-const CARD = "min(48rem, 90vw)";        // the card itself — your original max-w-3xl
-const GAP = "5rem";                   // space between cards ← this is your knob
-const SLIDE = `calc(${CARD} + ${GAP})`;
-const HALF_SLIDE = `calc(${CARD} / 2)`;
-const FADE_DIST = "18rem";
- 
-const EDGE_FADE = `linear-gradient(to right,
-  transparent calc(50% - (${HALF_SLIDE} + ${FADE_DIST})),
-  black calc(50% - ${HALF_SLIDE}),
-  black calc(50% + ${HALF_SLIDE}),
-  transparent calc(50% + (${HALF_SLIDE} + ${FADE_DIST})))`;
-
-{/* Functions */}
-function WaveText({
-  text,
-  baseDelay = 0,
-  step = 0.1,
-}: {
-  text: string;
-  baseDelay?: number;
-  step?: number;
-}) {
-  return (
-    <>
-      {text.split("").map((char, i) => (
-        <span
-          key={i}
-          className="float-anim"
-          style={{ animationDelay: `${-i * step}s` }}
-        >
-          {char === " " ? "\u00A0" : char}
-        </span>
-      ))}
-    </>
-  );
+type BandProps = {
+  page: FrontPage
+  section: FrontPageSection
+  title: string
+  /** Position among the visible bands, 0 = straight after the hero. */
+  position: number
 }
 
-
+/* Default headings for a band the admin didn't title, and how each
+   one renders. The ids are the page anchors — #connect is what the
+   hero's second button points at out of the box. */
+const SECTIONS: Record<
+  FrontPageSectionKey,
+  { title: string; render: (props: BandProps) => ReactNode }
+> = {
+  countdown: {
+    title: 'Next up',
+    render: ({ page, position }) =>
+      page.countdown && <NextEventCountdown event={page.countdown} overlap={position === 0} />,
+  },
+  retreats: {
+    title: 'National Retreats',
+    render: ({ section, title }) => (
+      <RetreatsBand id="retreats" title={title} blurb={section.blurb} />
+    ),
+  },
+  calendar: {
+    title: 'What’s on',
+    render: ({ section, title }) => (
+      <CalendarBand id="calendar" title={title} blurb={section.blurb} />
+    ),
+  },
+  stats: {
+    title: 'By the numbers',
+    render: ({ page, section, title }) =>
+      page.stats.length > 0 && (
+        <StatsBand id="numbers" title={title} blurb={section.blurb} stats={page.stats} />
+      ),
+  },
+  timeline: {
+    title: 'Our story so far',
+    render: ({ section, title }) => (
+      <FeaturedTimelineRail id="story" title={title} blurb={section.blurb} />
+    ),
+  },
+  connect: {
+    title: 'Find your way in',
+    render: ({ page, section, title }) => (
+      <Pathfinder id="connect" title={title} blurb={section.blurb} paths={page.paths} />
+    ),
+  },
+}
 
 export default function Home() {
-  {/* Other useState consts and Functions*/}
-  const [showCalendar, setShowCalendar] = useState(false);
-  const [index, setIndex] = useState(START_INDEX);
+  const { data: page, error, reload } = useFrontPage()
 
-  const event = EVENTS[index];
-  const isPast = event.status === "past";
-  const currentColor = event.color || TEAL;
-
-  const prev = () => setIndex(i => Math.max(0, i - 1));
-  const next = () => setIndex(i => Math.min(EVENTS.length - 1, i + 1));
-
-  const arrowStyle = (enabled: boolean) => ({
-    border: `1px solid ${TEAL}`,
-    background: "rgba(255,255,255,0.6)",
-    color: enabled ? TEAL : "#b8c6c9",
-    cursor: enabled ? "pointer" : "default",
-    opacity: enabled ? 1 : 0.4,
-  });
-
-  {/* Start of Main Content*/}
   return (
     <>
-      {/* ── HERO/ABOUT ─────────────────────────────────────────────── */}
-      <section id="hero" className="relative min-h-screen flex flex-col items-center justify-center text-center overflow-hidden pt-20" style={{ background: "linear-gradient(135deg, #042f3a 0%, #004552 40%, #004c52 70%, #0e7a5a 100%)", opacity: 1 }}>
-          {/* Floating doves */}
-          <div className="absolute top-20 right-16 opacity-30 float-anim"><DoveSVG className="w-20 h-16"/></div>
-          <div className="absolute top-32 right-36 opacity-20 float-anim" style={{ animationDelay: "1s" }}><DoveSVG className="w-10 h-8"/></div>
-          <div className="absolute bottom-32 left-16 opacity-25 float-anim" style={{ animationDelay: "2s" }}><DoveSVG className="w-16 h-12"/></div>
+      <HeroStage hero={page?.hero ?? null} />
 
-          <div className="relative z-10 max-w-4xl mx-auto px-6">
-            <h1 className="text-5xl md:text-7xl font-900 text-white leading-tight mb-4" style={{ fontFamily: "Poppins,sans-serif" }}>
-              Next Generation<br />
-              <span className="grad-hero-text">
-                <WaveText text="of Unity" step={0.1} />
-              </span>  
-            </h1>
-  
-            <p className="text-white/70 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed" style={{ fontFamily: "League Spartan,sans-serif" }}>
-              A young-adult focused community ministy focused on supporting individuals in Unity Ministries from 18-40 years old. Rooted in spiritual growth, leadership development, and sacred service.
-            </p>
-            <p className="text-white/90 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed mb-10" style={{ fontFamily: "League Spartan,sans-serif", fontWeight: "bold"}}>
-              We are the future of the Unity Movement.
-            </p>
-  
-            <div className="flex flex-wrap gap-4 justify-center">
-              <a href="https://www.instagram.com/nextgenerationunity" className="px-8 py-4 rounded-full text-white font-700 text-lg transition-all duration-300 hover:scale-105 hover:shadow-xl shadow-lg" style={{ background: "linear-gradient(135deg, #008fa8, #88b668)", fontFamily: "Poppins,sans-serif" }}>
-                Follow Us on Instagram
-              </a>
-              <a href="#events" className="px-8 py-4 rounded-full font-700 text-lg transition-all duration-300 hover:scale-105" style={{ border: "2px solid rgba(92, 231, 255,0.6)", color: "#5ce7ff", fontFamily: "Poppins,sans-serif" }}>
-                Attend a Retreat
-              </a>
-            </div>
-          </div>
-        </section>
-
-      {/* #About ─────────────────────────────────────── */}
-      <section id="about" className="py-24 px-6" style={{ background: "#f0fcfd" }}>
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="mt-4 text-4xl md:text-5xl font-800 text-[#138ba0]">A Ministry Designed For<br />Young Adults</h2>
-            <p className="mt-4 text-[#0a5260]/70 max-w-2xl mx-auto text-lg leading-relaxed">
-              NGU exists to connect young adults across Unity ministries and create spaces for authentic spiritual exploration, community, and conscious living.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-3 gap-8">
-            {[
-              { title: "Spiritual Community", icon: "🕊️", desc: "We welcome all adults under 40 no matter where you are on your journey. Our community thrives on diversity of thought, background, and belief." },
-              { title: "Conscious Development", icon: "🌱", desc: "Through workshops, retreats, and gatherings, we cultivate minds and spirits ready to engage with life's deepest questions." },
-              { title: "Connected Network", icon: "🌐", desc: "NGU spans regions nationwide. From local chapter small group ministry to regional and national gatherings and retreats, you're never that far away from your people." },
-            ].map((card) => (
-              <div key={card.title} className="p-8 rounded-2xl transition-all duration-300 hover:-translate-y-1 hover:shadow-xl" style={{ background: "white", border: "1px solid rgba(19,139,160,0.15)" }}>
-                <div className="text-4xl mb-4">{card.icon}</div>
-                <h3 className="font-700 text-xl text-[#073d4a] mb-3">{card.title}</h3>
-                <p className="text-[#0a5260]/70 leading-relaxed text-sm">{card.desc}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-      {/* #Events ─────────────────────────────────────────────── */}
-      <section id="events" className="py-24 overflow-hidden" style={{ background: "#eef9fb" }}>
-      <div className="max-w-6xl mx-auto px-6">
-        <div className="text-center mb-16">
-          <h2 className="mt-4 text-4xl md:text-5xl font-800 text-[#138ba0]">
-            {isPast ? "Past Events" : "Upcoming Events"}
-          </h2>
-        </div>
-      </div>
- 
-      {/* Carousel — full-bleed so neighbors can peek in from the screen edges */}
-      <div className="relative mb-6">
-        {/* Masked viewport: everything outside the fade gradient is invisible */}
-        <div
-          className="overflow-hidden"
-          style={{ maskImage: EDGE_FADE, WebkitMaskImage: EDGE_FADE }}
+      {error && (
+        <section className="px-6 py-24 text-center">
+          <p className="text-[#b3261e]">Couldn’t load the front page. {error}</p>
+          <button
+            type="button"
+            onClick={reload}
+            className="mt-4 rounded-full border border-[#138ba0] px-5 py-2 font-semibold text-[#138ba0] hover:bg-[#eef9fb]"
           >
-          {/* Sliding track */}
-          <div
-            className="flex items-stretch transition-transform duration-500 ease-out"
-            style={{
-              transform: `translateX(calc(50% - ${index + 0.5} * ${SLIDE}))`,
-            }}
-          >
-            {EVENTS.map((ev, i) => {
-              const active = i === index;
-              const past = ev.status === "past";
-              const color = ev.color || TEAL;
+            Try again
+          </button>
+        </section>
+      )}
+
+      {page?.sections.map((section, position) => {
+        const band = SECTIONS[section.section]
+        // A key the CHECK has gained since this file was written.
+        if (!band) return null
         return (
-                <div
-                  key={ev.id}
-                  className="shrink-0"
-                  style={{
-                    width: SLIDE,
-                    padding: `0 calc(${GAP} / 2)`,
-                    cursor: active ? "default" : "pointer",
-                  }}
-                  onClick={() => !active && setIndex(i)}
-                  aria-hidden={!active}
-                >
-                  <div
-                    className="rounded-3xl text-black overflow-hidden shadow-2xl h-full"
-                    style={{
-                      border: `1px solid ${color}`,
-                      background: ev.gradient ?? undefined,
-                      filter: past ? "saturate(0.75)" : "none",
-                      pointerEvents: active ? "auto" : "none",
-                    }}
-                  >
-                    <div className="p-10">
-                      <div className="grid grid-cols-1 md:grid-cols-3 mb-4">
-                        <div className="md:col-span-2">
-                          <img
-                            src={nguLogo_WhiteBG}
-                            alt="Next Generation of Unity"
-                            className="h-15 w-auto mb-6"
-                          />
-                          <h3 className="text-4xl font-900">{ev.title}</h3>
-                          {ev.theme && (
-                            <p className="text-2xl font-300 font-bold">"{ev.theme}"</p>
-                          )}
-                          <p className="text-2xl">{ev.date}</p>
-                          <p className="text-2xl">{ev.location}</p>
-                        </div>
-                        <div className="md:col-span-1 flex justify-end items-start">
-                          {ev.image && (
-                            <img src={ev.image} alt={ev.title} className="h-60" />
-                          )}
-                        </div>
-                      </div>
- 
-                      {ev.desc_a && <p className="mb-2 leading-relaxed">{ev.desc_a}</p>}
-                      {ev.desc_b && <p className="leading-relaxed">{ev.desc_b}</p>}
- 
-                      {ev.links.length > 0 ? (
-                        <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mt-8">
-                          {ev.links.map(item => (
-                            <a
-                              key={item.label}
-                              href={item.link}
-                              className="py-2.5 px-3 rounded-xl font-700 transition-all duration-200 hover:scale-105 text-center"
-                              style={{ border: `1px solid ${color}` }}
-                            >
-                              {item.label}
-                            </a>
-                          ))}
-                        </div>
-                      ) : (
-                        past ? (
-                          <p className="mt-8 text-center font-600" style={{ color:TEAL }}>
-                            This event has concluded, thank you to everyone who joined us!
-                          </p>
-                        ) : (
-                          <>
-                            <p className="mt-8 text-center font-600" style={{ color:TEAL }}>
-                              Registration has not opened yet, follow our instagram for more details.
-                            </p>
-                            <a href="https://instagram.com/nextgenerationunity" target="_blank" rel="noopener noreferrer" className="ig-link mt-4 w-fit mx-auto flex items-center justify-center gap-3 py-3 px-4 rounded-xl font-700 transition-all duration-200 hover:scale-[1.02]" style={{ border: `1px solid ${color}`, color }}>
-                              <InstagramIcon id={`ig-${ev.id}`} />
-                              @nextgenerationunity
-                            </a>
-                          </>
-                        )
-                      )}
-                    </div>
-                  </div>
-                </div>
-              );
+          <div key={section.section}>
+            {band.render({
+              page,
+              section,
+              title: section.title || band.title,
+              position,
             })}
           </div>
-        </div>
- 
-        {/* Arrows — outside the masked element so they never fade */}
-        <button
-          onClick={prev}
-          disabled={index === 0}
-          aria-label="Previous event"
-          className="absolute left-2 md:left-6 top-1/2 -translate-y-1/2 z-10 h-12 w-12 rounded-full flex items-center justify-center text-2xl font-700 shadow-lg transition-all duration-200 hover:scale-110 disabled:hover:scale-100"
-          style={arrowStyle(index > 0)}
-        >
-          ‹
-        </button>
-        <button
-          onClick={next}
-          disabled={index === EVENTS.length - 1}
-          aria-label="Next event"
-          className="absolute right-2 md:right-6 top-1/2 -translate-y-1/2 z-10 h-12 w-12 rounded-full flex items-center justify-center text-2xl font-700 shadow-lg transition-all duration-200 hover:scale-110 disabled:hover:scale-100"
-          style={arrowStyle(index < EVENTS.length - 1)}
-        >
-          ›
-        </button>
-      </div>
- 
-      <div className="max-w-6xl mx-auto px-6">
-        {/* Dot indicators */}
-        <div className="flex justify-center gap-2 mb-10">
-          {EVENTS.map((e, i) => (
-            <button
-              key={e.id}
-              onClick={() => setIndex(i)}
-              aria-label={`Go to ${e.title}`}
-              className="h-2.5 rounded-full transition-all duration-200"
-              style={{
-                width: i === index ? "1.5rem" : "0.625rem",
-                background: i === index ? currentColor : "#b8c6c9",
-              }}
-            />
-          ))}
-        </div>
- 
-        <p className="text-center text-[#138ba0] font-600 text-sm">
-          · More events coming soon, stay connected for announcements ·
-        </p>
-       </div>
-      </section>
-      {/* #Connect -------------------------------------------- */}
-      <section id="connect" className="py-24 px-6" style={{ background: "white" }}>
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="mt-4 text-4xl md:text-5xl font-800 text-[#138ba0]" style={{ fontFamily: "Poppins,sans-serif" }}>
-              Ready to Connect?
-            </h2>
-            <p className="mt-4 text-[#0a5260]/70 max-w-xl mx-auto text-xl" style={{ fontFamily: "League Spartan,sans-serif" }}>Find your place in the NGU community</p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
-            {[
-              { label: "Volunteer", desc: "Help create transformative experiences for young adults", link:"https://ngu.churchcenter.com/people/forms/1176908"},
-              { label: "Membership", desc: "Become an official member of the NGU community", link:"https://ngu.churchcenter.com/people/forms/1135816"},
-              { label: "Affiliation Form", desc: "Affiliate your ministry or spiritual organization with NGU", link:"https://ngu.churchcenter.com/people/forms/1135750"},
-              { label: "Speaker & Musician Directory", desc: "Join our network of speakers, musicians, and facilitators", link:"https://ngu.churchcenter.com/people/forms/1173181"},
-            ].map(item => (
-              <a key={item.label} href={item.link} className="flex items-center gap-5 p-6 rounded-2xl text-left transition-all duration-300 hover:-translate-y-1 hover:shadow-xl group" style={{ background: "#073d4a", border: "1px solid rgba(45,200,224,0.2)" }}>
-                <div>
-                  <p className="text-white font-700 mb-1" style={{ fontFamily: "Poppins,sans-serif" }}>{item.label}</p>
-                  <p className="text-white/80 leading-snug" style={{ fontFamily: "League Spartan,sans-serif" }}>{item.desc}</p>
-                </div>
-                {/* Arrow */}
-                <svg className="w-5 h-5 text-[#10d48a] ml-auto flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
-                  <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"/>
-                </svg>
-              </a>
-            ))}
-          </div>
-
-          <div className="mt-10 text-center">
-            <div className="inline-flex flex-wrap justify-center gap-4">
-              <a
-                href="https://ngu.churchcenter.com/calendar?view=gallery"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-white font-700 text-lg transition-all duration-300 hover:scale-105"
-                style={{ background: "linear-gradient(135deg, #138ba0, #10d48a)", fontFamily: "Outfit,sans-serif" }}
-              >
-                📅 View NGU Calendar
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-                  <polyline points="15 3 21 3 21 9" />
-                  <line x1="10" y1="14" x2="21" y2="3" />
-                </svg>
-              </a>
-          
-              <button
-                onClick={() => setShowCalendar(!showCalendar)}
-                className="inline-flex items-center gap-2 px-8 py-4 rounded-full font-700 text-lg transition-all duration-300 hover:scale-105"
-                style={{ border: "2px solid #138ba0", color: "#138ba0", background: "transparent", fontFamily: "Outfit,sans-serif" }}
-              >
-                {showCalendar ? "▲ Hide Calendar" : "▼ Show Calendar Here"}
-              </button>
-            </div>
-          
-            {showCalendar && (
-              <div className="mt-8 mx-auto max-w-4xl rounded-2xl shadow-lg p-6" style={{ border: "2px solid #138ba0" }}>
-                <iframe
-                  src="https://ngu.churchcenter.com/calendar?embed=true&view=month"
-                  title="NGU Calendar"
-                  className="w-full planning-center-calender-embed"
-                  style={{ height: "700px", border: "none" }}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
+        )
+      })}
     </>
-  );
+  )
 }

src/pages/admin/EntityEdit.tsx

@@ -86,6 +86,12 @@ export default function EntityEdit() {
   // references an event has no name of its own.
   const autoId = manifest?.idKind === "auto";
 
+  // A singleton has one row, made by its migration: no slug to show
+  // or type, no list to go back to, nothing to delete. The server
+  // refuses create and delete regardless; this only stops offering
+  // them.
+  const singleton = Boolean(manifest?.singleton);
+
   // Hoisted above the loading guards: the title hook below is a
   // hook, so it can't sit after an early return, and it needs the
   // same paths the heading uses.
@@ -215,7 +221,7 @@ export default function EntityEdit() {
 
   /* ── Heading ───────────────────────────────────────────────── */
 
-  const heading = headingOf(form);
+  const heading = singleton ? manifest.label : headingOf(form);
   const updatedAt = typeof form.updated_at === "string" ? form.updated_at : null;
 
   const children = manifest.children ?? [];
@@ -311,6 +317,7 @@ export default function EntityEdit() {
 
   return (
     <div className="pb-24">
+      {!singleton && (
       <button
         type="button"
         onClick={() => leave(`/admin/${manifest.key}`)}
@@ -318,6 +325,7 @@ export default function EntityEdit() {
       >
         ← {manifest.label}
       </button>
+      )}
 
       <h1 className="mt-2 text-3xl font-bold text-[#138ba0]">
         {isNew ? `New ${manifest.singular}` : heading}
@@ -326,7 +334,13 @@ export default function EntityEdit() {
       {/* Slug. An auto-id entity has nothing to ask for on create, and
           nothing editable afterwards — so it gets a plain line rather
           than a disabled box pretending to be a field. */}
-      {autoId ? (
+      {singleton ? (
+        updatedAt && (
+          <div className="mt-6 rounded-2xl border border-[#138ba0]/20 bg-white p-5">
+            <p className="text-sm text-[#4a6b72]">Last saved {updatedAt}</p>
+          </div>
+        )
+      ) : autoId ? (
         !isNew && (
           <div className="mt-6 rounded-2xl border border-[#138ba0]/20 bg-white p-5">
             <p className="text-sm text-[#4a6b72]">
@@ -425,7 +439,7 @@ export default function EntityEdit() {
               >
                 {saving ? "Saving…" : isNew ? "Create" : "Save changes"}
               </button>
-              {!isNew && canDelete && (
+              {!isNew && !singleton && canDelete && (
                 <button
                   type="button"
                   onClick={remove}

src/pages/admin/EntityList.tsx

@@ -13,7 +13,7 @@
    ═══════════════════════════════════════════════════════════════ */
 
 import { useCallback, useEffect, useState } from "react";
-import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { Link, Navigate, useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import { get, ApiError } from "../../lib/api.js";
 import { isUnauthorized, useAuth } from "../../lib/auth.tsx";
@@ -46,7 +46,7 @@ export default function EntityList() {
   const canWrite = atLeast(user, "editor");
 
   const load = useCallback(async () => {
-    if (!manifest) return;
+    if (!manifest || manifest.singleton) return;
     setLoading(true);
     setError(null);
     try {
@@ -72,6 +72,11 @@ export default function EntityList() {
     return <p className="text-[#4a6b72]">No such thing to edit.</p>;
   }
 
+  // One row, so no list: the tab opens the row.
+  if (manifest.singleton) {
+    return <Navigate to={`/admin/${manifest.key}/${manifest.singleton}`} replace />;
+  }
+
   function setParam(key: string, value: string) {
     const next = new URLSearchParams(params);
     if (value) next.set(key, value);

src/pages/admin/adminNav.js

@@ -64,6 +64,12 @@ export const CMS_NAV = [
     label: "Timeline",
     blurb: "What the history page shows, and the order it shows it in.",
   },
+  // One record, not a list — the tab opens it directly.
+  {
+    to: "/admin/front_page",
+    label: "Front page",
+    blurb: "The hero, its photos or livestream, and which bands the home page draws.",
+  },
 ];
 
 /* Forms are submissions coming in rather than content going out, so

src/pages/sections/EventCalendar.tsx

@@ -0,0 +1,791 @@
+/* ═══════════════════════════════════════════════════════════════
+   EVENT CALENDAR
+
+   Every published event on a month grid, or as a list of the month.
+   Self contained like EventListCards: give it a filter and it
+   fetches, so it can sit on any page.
+
+     <EventCalendar />                          everything
+     <EventCalendar host="northwest" />         one host's calendar
+     <EventCalendar section="national" />       one scope
+     <EventCalendar type={["class", "workshop"]} controls={["search"]} />
+
+   Two layers of filtering, and they answer different questions:
+
+     props      what this page's calendar is about. Pinned; the
+                visitor can't widen them, and the control for a
+                pinned dimension doesn't render.
+     controls   what the visitor can narrow by within that: scope,
+                type, online only, search. All four by default,
+                every one starting at "all".
+
+   What lands on a day:
+
+     one-off    every day from starts_on to ends_on, drawn as one
+                bar across the days it spans, broken at the week
+                edge and marked as continuing
+     series     every meeting the schedule produces in view (see
+                eventSeries.ts), one day each, with its time
+     undated    nowhere — there's no day to put it on. Counted
+                under the grid so it doesn't vanish without a word.
+
+   Bars are laid out per week in lanes, so a long event keeps its
+   row across the days it covers. MAX_LANES rows show; a day with
+   more says "+N more", and clicking any day lists everything on it
+   below the grid.
+
+   Below md the grid would be seven unreadable slivers, so the month
+   view shows the list there instead. The toggle still works; it
+   just has one answer on a phone.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+
+import { typesPresent, useEvents } from '../../data/eventData.js'
+import type { EventFilter } from '../../data/eventData.js'
+import { EVENT_TYPES, eventTypeLabel } from '../../lib/eventTypes.ts'
+import { firstOccurrenceFrom, occurrencesBetween, seriesTimes } from '../../lib/eventSeries.ts'
+import { eventHref } from '../../lib/hrefs.ts'
+import type { EventListItem } from '../../lib/useContent.ts'
+
+export type CalendarControl = 'scope' | 'type' | 'online' | 'search'
+export type CalendarView = 'month' | 'list'
+
+const ALL_CONTROLS: CalendarControl[] = ['scope', 'type', 'online', 'search']
+
+/* Bar rows drawn per week before a day collapses to "+N more". */
+const MAX_LANES = 3
+
+const TEAL = '#138ba0'
+const INK = '#073d4a'
+const BODY = '#4a6b72'
+
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+type EventCalendarProps = EventFilter & {
+  accent?: string
+  /** Which visitor controls render. A pinned prop hides its own. */
+  controls?: CalendarControl[]
+  defaultView?: CalendarView
+}
+
+/* One appearance of an event on the calendar: a whole one-off, or a
+   single meeting of a series. Dates are inclusive 'YYYY-MM-DD'. */
+type Occurrence = {
+  key: string
+  event: EventListItem
+  start: string
+  end: string
+  time: string | null
+}
+
+type Segment = Occurrence & {
+  col: number
+  span: number
+  lane: number
+  continuesBefore: boolean
+  continuesAfter: boolean
+}
+
+/* ── Dates ───────────────────────────────────────────────────── */
+
+const pad = (n: number) => String(n).padStart(2, '0')
+const iso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+
+function parse(date: string): Date {
+  const [y, m, d] = date.split('-').map(Number)
+  return new Date(y, m - 1, d)
+}
+
+const addDays = (date: string, n: number) => {
+  const d = parse(date)
+  d.setDate(d.getDate() + n)
+  return iso(d)
+}
+
+const dayDiff = (a: string, b: string) =>
+  Math.round((parse(b).getTime() - parse(a).getTime()) / 86_400_000)
+
+const monthKey = (date: string) => date.slice(0, 7)
+
+/* The six Sunday-started weeks that cover a month. */
+function gridFor(month: string): string[][] {
+  const first = parse(`${month}-01`)
+  const start = addDays(iso(first), -first.getDay())
+  return Array.from({ length: 6 }, (_, w) =>
+    Array.from({ length: 7 }, (_, d) => addDays(start, w * 7 + d)),
+  )
+}
+
+const monthTitle = (month: string) =>
+  parse(`${month}-01`).toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
+
+const shiftMonth = (month: string, n: number) => {
+  const d = parse(`${month}-01`)
+  d.setMonth(d.getMonth() + n)
+  return monthKey(iso(d))
+}
+
+const longDay = (date: string) =>
+  parse(date).toLocaleDateString(undefined, {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+
+function rangeLabel(start: string, end: string): string {
+  const opts: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' }
+  if (start === end) return parse(start).toLocaleDateString(undefined, opts)
+  return `${parse(start).toLocaleDateString(undefined, opts)} – ${parse(end).toLocaleDateString(undefined, opts)}`
+}
+
+/* ── Occurrences ─────────────────────────────────────────────── */
+
+function occurrencesIn(events: EventListItem[], from: string, to: string): Occurrence[] {
+  const out: Occurrence[] = []
+
+  for (const event of events) {
+    if (!event.starts_on) continue
+
+    if (event.series) {
+      const time = seriesTimes(event.series)
+      for (const date of occurrencesBetween(event.series, event.starts_on, event.ends_on, from, to)) {
+        out.push({ key: `${event.id}@${date}`, event, start: date, end: date, time })
+      }
+      continue
+    }
+
+    const start = event.starts_on
+    const end = event.ends_on && event.ends_on >= start ? event.ends_on : start
+    if (end < from || start > to) continue
+    out.push({ key: event.id, event, start, end, time: null })
+  }
+
+  // Longest first within a day, so multi-day bars claim the top lanes.
+  return out.sort(
+    (a, b) => a.start.localeCompare(b.start) || dayDiff(b.start, b.end) - dayDiff(a.start, a.end),
+  )
+}
+
+/* Greedy lane packing for one week: each segment takes the first
+   lane whose last occupant ended before it starts. */
+function layoutWeek(week: string[], occurrences: Occurrence[]): Segment[] {
+  const first = week[0]
+  const last = week[6]
+  const laneEnds: number[] = []
+  const segments: Segment[] = []
+
+  for (const occ of occurrences) {
+    if (occ.end < first || occ.start > last) continue
+    const start = occ.start < first ? first : occ.start
+    const end = occ.end > last ? last : occ.end
+    const col = dayDiff(first, start)
+    const span = dayDiff(start, end) + 1
+
+    let lane = laneEnds.findIndex((endCol) => endCol < col)
+    if (lane === -1) lane = laneEnds.length
+    laneEnds[lane] = col + span - 1
+
+    segments.push({
+      ...occ,
+      col,
+      span,
+      lane,
+      continuesBefore: occ.start < first,
+      continuesAfter: occ.end > last,
+    })
+  }
+
+  return segments
+}
+
+/* The next date after `after` that any of these events lands on. */
+function nextDateAfter(events: EventListItem[], after: string): string | null {
+  let best: string | null = null
+  const from = addDays(after, 1)
+  for (const event of events) {
+    if (!event.starts_on) continue
+    const date = event.series
+      ? firstOccurrenceFrom(event.series, event.starts_on, event.ends_on, from)
+      : event.starts_on >= from
+        ? event.starts_on
+        : null
+    if (date && (!best || date < best)) best = date
+  }
+  return best
+}
+
+/* ── Component ───────────────────────────────────────────────── */
+
+export default function EventCalendar({
+  section,
+  host,
+  status,
+  type,
+  accent = TEAL,
+  controls = ALL_CONTROLS,
+  defaultView = 'month',
+}: EventCalendarProps) {
+  const { events: pinned, sections, loading, error } = useEvents({ section, host, status, type })
+
+  const today = iso(new Date())
+  const [month, setMonth] = useState(monthKey(today))
+  const [view, setView] = useState<CalendarView>(defaultView)
+  const [selected, setSelected] = useState<string | null>(null)
+
+  const [scope, setScope] = useState('')
+  const [kind, setKind] = useState('')
+  const [onlineOnly, setOnlineOnly] = useState(false)
+  const [query, setQuery] = useState('')
+
+  const show = (control: CalendarControl) => controls.includes(control)
+  const showScope = show('scope') && !section
+  const showType = show('type') && !type
+
+  const types = useMemo(() => typesPresent(pinned, EVENT_TYPES), [pinned])
+  const scopes = useMemo(() => {
+    const present = new Set(pinned.map((e) => e.section_id))
+    return sections.filter((s) => present.has(s.id))
+  }, [pinned, sections])
+
+  const events = useMemo(() => {
+    const needle = query.trim().toLowerCase()
+    return pinned.filter((e) => {
+      if (scope && e.section_id !== scope) return false
+      if (kind && e.event_type !== kind) return false
+      if (onlineOnly && !e.is_online) return false
+      if (needle) {
+        const haystack = [
+          e.title,
+          e.theme,
+          e.location_label,
+          e.locality,
+          ...(e.hosts ?? []).map((h) => h.name),
+        ]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase()
+        if (!haystack.includes(needle)) return false
+      }
+      return true
+    })
+  }, [pinned, scope, kind, onlineOnly, query])
+
+  const weeks = useMemo(() => gridFor(month), [month])
+  const gridFrom = weeks[0][0]
+  const gridTo = weeks[5][6]
+  const monthFrom = `${month}-01`
+  const monthTo = addDays(`${shiftMonth(month, 1)}-01`, -1)
+
+  const occurrences = useMemo(
+    () => occurrencesIn(events, gridFrom, gridTo),
+    [events, gridFrom, gridTo],
+  )
+  const inMonth = occurrences.filter((o) => o.end >= monthFrom && o.start <= monthTo)
+  const undated = events.filter((e) => !e.starts_on).length
+  const filtering = Boolean(scope || kind || onlineOnly || query)
+  const next = inMonth.length === 0 ? nextDateAfter(events, monthTo) : null
+
+  const onDay = (date: string) => occurrences.filter((o) => o.start <= date && o.end >= date)
+
+  const go = (target: string) => {
+    setMonth(target)
+    setSelected(null)
+  }
+
+  const clearFilters = () => {
+    setScope('')
+    setKind('')
+    setOnlineOnly(false)
+    setQuery('')
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-6" style={{ color: INK }}>
+      {/* ── Month navigation and view ── */}
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex items-center gap-2">
+          <NavButton label="Previous month" onClick={() => go(shiftMonth(month, -1))} accent={accent}>
+            ‹
+          </NavButton>
+          <NavButton label="Next month" onClick={() => go(shiftMonth(month, 1))} accent={accent}>
+            ›
+          </NavButton>
+        </div>
+
+        <h3 className="min-w-[11rem] font-display text-2xl font-bold" aria-live="polite">
+          {monthTitle(month)}
+        </h3>
+
+        {month !== monthKey(today) && (
+          <button
+            type="button"
+            onClick={() => go(monthKey(today))}
+            className="rounded-full border px-3 py-1 text-sm font-semibold hover:bg-white"
+            style={{ borderColor: accent, color: accent }}
+          >
+            Today
+          </button>
+        )}
+
+        <div
+          className="ml-auto hidden overflow-hidden rounded-full border md:flex"
+          style={{ borderColor: accent }}
+          role="group"
+          aria-label="Calendar view"
+        >
+          {(['month', 'list'] as const).map((option) => (
+            <button
+              key={option}
+              type="button"
+              onClick={() => setView(option)}
+              aria-pressed={view === option}
+              className="px-4 py-1.5 text-sm font-semibold capitalize transition-colors"
+              style={
+                view === option
+                  ? { background: accent, color: '#ffffff' }
+                  : { color: accent }
+              }
+            >
+              {option}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Filters ── */}
+      {(showScope || showType || show('online') || show('search')) && (
+        <div className="mt-5 flex flex-wrap items-center gap-3">
+          {showScope && scopes.length > 1 && (
+            <FilterSelect
+              label="Scope"
+              value={scope}
+              onChange={setScope}
+              all="All scopes"
+              options={scopes.map((s) => [s.id, s.name])}
+            />
+          )}
+          {showType && types.length > 1 && (
+            <FilterSelect
+              label="Type"
+              value={kind}
+              onChange={setKind}
+              all="All types"
+              options={types.map((t) => [t.id, t.plural])}
+            />
+          )}
+          {show('online') && (
+            <label className="flex cursor-pointer items-center gap-2 rounded-full border border-[#138ba0]/25 bg-white px-4 py-2 text-sm">
+              <input
+                type="checkbox"
+                checked={onlineOnly}
+                onChange={(e) => setOnlineOnly(e.target.checked)}
+                className="h-4 w-4 rounded"
+                style={{ accentColor: accent }}
+              />
+              Online only
+            </label>
+          )}
+          {show('search') && (
+            <input
+              type="search"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search events"
+              aria-label="Search events"
+              className="min-w-[12rem] flex-1 rounded-full border border-[#138ba0]/25 bg-white px-4 py-2 text-sm outline-none focus:border-[#138ba0] md:max-w-xs"
+            />
+          )}
+          {filtering && (
+            <button
+              type="button"
+              onClick={clearFilters}
+              className="text-sm font-semibold hover:underline"
+              style={{ color: accent }}
+            >
+              Clear filters
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* ── Body ── */}
+      <div className="mt-6">
+        {error ? (
+          <p className="rounded-2xl bg-white p-6 text-[#b3261e]">
+            Couldn’t load events. {error.message}
+          </p>
+        ) : loading ? (
+          <div className="h-[32rem] animate-pulse rounded-3xl bg-white/70" aria-hidden="true" />
+        ) : (
+          <>
+            {view === 'month' && (
+              <div className="hidden md:block">
+                <MonthGrid
+                  weeks={weeks}
+                  month={month}
+                  today={today}
+                  occurrences={occurrences}
+                  selected={selected}
+                  onSelect={(date) => setSelected((s) => (s === date ? null : date))}
+                  accent={accent}
+                />
+                {selected && (
+                  <DayPanel
+                    date={selected}
+                    items={onDay(selected)}
+                    accent={accent}
+                    onClose={() => setSelected(null)}
+                  />
+                )}
+              </div>
+            )}
+
+            <div className={view === 'month' ? 'md:hidden' : ''}>
+              <MonthList items={inMonth} monthFrom={monthFrom} accent={accent} />
+            </div>
+
+            {inMonth.length === 0 && (
+              <div className="mt-4 text-center text-sm" style={{ color: BODY }}>
+                {next ? (
+                  <button
+                    type="button"
+                    onClick={() => go(monthKey(next))}
+                    className="font-semibold hover:underline"
+                    style={{ color: accent }}
+                  >
+                    Jump to the next event, {monthTitle(monthKey(next))} →
+                  </button>
+                ) : filtering ? (
+                  'Nothing matches these filters.'
+                ) : null}
+              </div>
+            )}
+
+            {undated > 0 && (
+              <p className="mt-4 text-center text-xs" style={{ color: BODY }}>
+                {undated === 1 ? '1 event has' : `${undated} events have`} no dates yet, so{' '}
+                {undated === 1 ? 'isn’t' : 'aren’t'} on the calendar.
+              </p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/* ── Month grid ──────────────────────────────────────────────── */
+
+type MonthGridProps = {
+  weeks: string[][]
+  month: string
+  today: string
+  occurrences: Occurrence[]
+  selected: string | null
+  onSelect: (date: string) => void
+  accent: string
+}
+
+function MonthGrid({ weeks, month, today, occurrences, selected, onSelect, accent }: MonthGridProps) {
+  return (
+    <div className="overflow-hidden rounded-3xl border border-[#138ba0]/15 bg-white shadow-sm">
+      <div className="grid grid-cols-7 border-b border-[#138ba0]/10 bg-[#f6fbfc]">
+        {WEEKDAYS.map((day) => (
+          <div
+            key={day}
+            className="px-3 py-2 text-xs font-bold uppercase tracking-widest"
+            style={{ color: BODY }}
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {weeks.map((week) => {
+        const segments = layoutWeek(week, occurrences)
+        const visible = segments.filter((s) => s.lane < MAX_LANES)
+        const hiddenOn = (col: number) =>
+          segments.filter((s) => s.lane >= MAX_LANES && s.col <= col && s.col + s.span > col).length
+        const countOn = (col: number) =>
+          segments.filter((s) => s.col <= col && s.col + s.span > col).length
+
+        return (
+          <div key={week[0]} className="relative min-h-[8rem] border-b border-[#138ba0]/10 last:border-b-0">
+            {/* Day cells: the click targets, and the numbers. */}
+            <div className="absolute inset-0 grid grid-cols-7">
+              {week.map((date, col) => {
+                const outside = monthKey(date) !== month
+                const isToday = date === today
+                const isSelected = date === selected
+                const count = countOn(col)
+                const hidden = hiddenOn(col)
+                return (
+                  <button
+                    key={date}
+                    type="button"
+                    onClick={() => onSelect(date)}
+                    aria-pressed={isSelected}
+                    aria-label={`${longDay(date)}${count ? `, ${count} event${count === 1 ? '' : 's'}` : ''}`}
+                    className="relative flex flex-col items-start border-r border-[#138ba0]/10 p-2 text-left transition-colors last:border-r-0 hover:bg-[#f6fbfc]"
+                    style={{
+                      background: isSelected ? `${accent}14` : outside ? '#fbfdfd' : undefined,
+                    }}
+                  >
+                    <span
+                      className="flex h-7 w-7 items-center justify-center rounded-full text-sm font-semibold"
+                      style={
+                        isToday
+                          ? { background: accent, color: '#ffffff' }
+                          : { color: outside ? '#b8c6c9' : INK }
+                      }
+                    >
+                      {Number(date.slice(8))}
+                    </span>
+                    {hidden > 0 && (
+                      <span className="mt-auto text-xs font-semibold" style={{ color: accent }}>
+                        +{hidden} more
+                      </span>
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+
+            {/* Bars, laid over the cells. Only the bars take clicks. */}
+            <div
+              className="pointer-events-none relative grid grid-cols-7 gap-y-1 pb-7 pt-10"
+              style={{ gridTemplateRows: `repeat(${MAX_LANES}, 1.5rem)` }}
+            >
+              {visible.map((seg) => (
+                <Bar key={`${seg.key}-${week[0]}`} seg={seg} accent={accent} />
+              ))}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function Bar({ seg, accent }: { seg: Segment; accent: string }) {
+  const color = seg.event.color || accent
+  const cancelled = seg.event.status === 'cancelled'
+
+  return (
+    <Link
+      to={eventHref(seg.event.id)}
+      title={`${seg.event.title}${seg.time ? ` · ${seg.time}` : ''}`}
+      className={`pointer-events-auto flex items-center gap-1 truncate px-2 text-xs font-semibold text-white transition-[filter] hover:brightness-110 ${
+        seg.continuesBefore ? 'ml-0 rounded-l-none' : 'ml-1 rounded-l-md'
+      } ${seg.continuesAfter ? 'mr-0 rounded-r-none' : 'mr-1 rounded-r-md'} ${
+        cancelled ? 'line-through opacity-60' : ''
+      }`}
+      style={{
+        gridColumn: `${seg.col + 1} / span ${seg.span}`,
+        gridRow: seg.lane + 1,
+        background: color,
+      }}
+    >
+      {seg.continuesBefore && <span aria-hidden="true">←</span>}
+      <span className="truncate">
+        {seg.time && seg.span === 1 && <span className="font-normal opacity-85">{seg.time.split(' – ')[0]} </span>}
+        {seg.event.title}
+      </span>
+      {seg.continuesAfter && (
+        <span className="ml-auto" aria-hidden="true">
+          →
+        </span>
+      )}
+    </Link>
+  )
+}
+
+/* ── The selected day ────────────────────────────────────────── */
+
+function DayPanel({
+  date,
+  items,
+  accent,
+  onClose,
+}: {
+  date: string
+  items: Occurrence[]
+  accent: string
+  onClose: () => void
+}) {
+  return (
+    <div className="mt-4 rounded-3xl border bg-white p-6" style={{ borderColor: `${accent}40` }}>
+      <div className="flex items-center gap-4">
+        <h4 className="font-display text-lg font-bold">{longDay(date)}</h4>
+        <button
+          type="button"
+          onClick={onClose}
+          className="ml-auto text-sm font-semibold hover:underline"
+          style={{ color: accent }}
+        >
+          Close
+        </button>
+      </div>
+      {items.length === 0 ? (
+        <p className="mt-3 text-sm" style={{ color: BODY }}>
+          Nothing on this day.
+        </p>
+      ) : (
+        <ul className="mt-4 space-y-3">
+          {items.map((item) => (
+            <li key={item.key}>
+              <EventLine item={item} accent={accent} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+/* ── List view ───────────────────────────────────────────────── */
+
+/* The month's occurrences by day. An event that began last month
+   files under the 1st, where it's still on. */
+function MonthList({
+  items,
+  monthFrom,
+  accent,
+}: {
+  items: Occurrence[]
+  monthFrom: string
+  accent: string
+}) {
+  if (items.length === 0) {
+    return (
+      <p className="rounded-3xl bg-white p-10 text-center" style={{ color: BODY }}>
+        Nothing on the calendar this month.
+      </p>
+    )
+  }
+
+  const byDay = new Map<string, Occurrence[]>()
+  for (const item of items) {
+    const day = item.start < monthFrom ? monthFrom : item.start
+    const list = byDay.get(day)
+    if (list) list.push(item)
+    else byDay.set(day, [item])
+  }
+
+  return (
+    <ol className="space-y-4">
+      {[...byDay.entries()].map(([day, list]) => {
+        const d = parse(day)
+        return (
+          <li key={day} className="flex gap-5 rounded-3xl bg-white p-5 shadow-sm">
+            <div className="w-14 shrink-0 text-center">
+              <p className="text-xs font-bold uppercase tracking-widest" style={{ color: accent }}>
+                {d.toLocaleDateString(undefined, { weekday: 'short' })}
+              </p>
+              <p className="font-display text-3xl font-extrabold leading-none">{d.getDate()}</p>
+            </div>
+            <ul className="min-w-0 flex-1 space-y-3">
+              {list.map((item) => (
+                <li key={item.key}>
+                  <EventLine item={item} accent={accent} />
+                </li>
+              ))}
+            </ul>
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+/* One occurrence as a line of text, shared by the day panel and the
+   list so the two describe an event the same way. */
+function EventLine({ item, accent }: { item: Occurrence; accent: string }) {
+  const { event } = item
+  const color = event.color || accent
+  const where = event.location_label || (event.is_online ? 'Online' : null)
+  const cancelled = event.status === 'cancelled'
+
+  return (
+    <Link
+      to={eventHref(event.id)}
+      className="group flex items-start gap-3 rounded-xl p-2 transition-colors hover:bg-[#f6fbfc]"
+    >
+      <span className="mt-1.5 h-3 w-3 shrink-0 rounded-full" style={{ background: color }} aria-hidden="true" />
+      <span className="min-w-0">
+        <span className={`block font-semibold group-hover:underline ${cancelled ? 'line-through' : ''}`}>
+          {event.title}
+          {cancelled && <span className="ml-2 text-xs font-bold uppercase text-[#b3261e] no-underline">Cancelled</span>}
+        </span>
+        <span className="block text-sm" style={{ color: BODY }}>
+          {[
+            item.time ?? (item.start !== item.end ? rangeLabel(item.start, item.end) : null),
+            eventTypeLabel(event.event_type),
+            where,
+          ]
+            .filter(Boolean)
+            .join(' · ')}
+        </span>
+      </span>
+    </Link>
+  )
+}
+
+/* ── Controls ────────────────────────────────────────────────── */
+
+function NavButton({
+  label,
+  onClick,
+  accent,
+  children,
+}: {
+  label: string
+  onClick: () => void
+  accent: string
+  children: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className="flex h-10 w-10 items-center justify-center rounded-full border text-xl transition-colors hover:bg-white"
+      style={{ borderColor: accent, color: accent }}
+    >
+      {children}
+    </button>
+  )
+}
+
+function FilterSelect({
+  label,
+  value,
+  onChange,
+  all,
+  options,
+}: {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  all: string
+  options: Array<[string, string]>
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      aria-label={label}
+      className="rounded-full border border-[#138ba0]/25 bg-white px-4 py-2 text-sm outline-none focus:border-[#138ba0]"
+    >
+      <option value="">{all}</option>
+      {options.map(([id, name]) => (
+        <option key={id} value={id}>
+          {name}
+        </option>
+      ))}
+    </select>
+  )
+}

src/pages/sections/home/CalendarBand.tsx

@@ -0,0 +1,28 @@
+/* ═══════════════════════════════════════════════════════════════
+   CALENDAR BAND
+
+   EventCalendar on the front page: every scope and every type, all
+   four visitor filters, starting on this month. The same component
+   can go on any page with a narrower filter — a region's page would
+   pass host, a classes page would pass type — and this file only
+   adds the front page's heading around it.
+   ═══════════════════════════════════════════════════════════════ */
+
+import EventCalendar from '../EventCalendar.tsx'
+
+type CalendarBandProps = { id: string; title: string; blurb?: string | null }
+
+export default function CalendarBand({ id, title, blurb }: CalendarBandProps) {
+  return (
+    <section id={id} className="py-24" style={{ background: '#f6fbfc' }}>
+      <div className="mx-auto mb-10 max-w-6xl px-6">
+        <h2 className="font-display text-4xl font-extrabold text-[#073d4a] md:text-5xl">
+          {title}
+        </h2>
+        {blurb && <p className="mt-3 max-w-xl text-lg text-[#4a6b72]">{blurb}</p>}
+      </div>
+
+      <EventCalendar />
+    </section>
+  )
+}

src/pages/sections/home/FeaturedTimelineRail.tsx

@@ -0,0 +1,250 @@
+/* ═══════════════════════════════════════════════════════════════
+   FEATURED TIMELINE RAIL
+
+   The history page's featured entries, sideways: oldest on the
+   left, so scrolling right moves forward through time. A line runs
+   under the cards with a dot per entry, and a year label wherever
+   the year changes. The last card goes to the full history.
+
+   Featured is the admin's call — timeline_entries.is_featured,
+   "shown large" on the history page. Nothing else is filtered
+   here; /history has already decided what's public.
+
+   Scrolling is native — touch, trackpad, shift-wheel — with
+   scroll-snap so it settles on a card. A mouse can also drag it, and
+   the arrow buttons step one card. A drag that moved more than a few
+   pixels swallows the click it ends in, so letting go over a card
+   doesn't open it.
+
+   Nothing featured, and the section doesn't render at all.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'
+import { Link } from 'react-router-dom'
+
+import HomeLink from './HomeLink.tsx'
+import { useHistory } from '../../../lib/useHistory.ts'
+import { hrefFor, logoSrc } from '../../../lib/timelineRefs.ts'
+import { MONTH_LABELS, type TimelineItem } from '../../../lib/timeline.ts'
+
+const TEAL = '#138ba0'
+const DRAG_SLOP = 6
+
+type RailProps = { id: string; title: string; blurb?: string | null }
+
+export default function FeaturedTimelineRail({ id, title, blurb }: RailProps) {
+  const { items, loading, error, reload } = useHistory()
+  const featured = items
+    .filter((item) => item.featured)
+    .sort((a, b) => a.date.localeCompare(b.date))
+
+  const railRef = useRef<HTMLOListElement>(null)
+  const drag = useRef({ x: 0, left: 0, moved: false, active: false })
+  const [dragging, setDragging] = useState(false)
+
+  if (!loading && !error && featured.length === 0) return null
+
+  const step = (direction: number) => {
+    const rail = railRef.current
+    const card = rail?.querySelector('li')
+    if (!rail || !card) return
+    rail.scrollBy({ left: direction * (card.clientWidth + 24), behavior: 'smooth' })
+  }
+
+  const onPointerDown = (e: ReactPointerEvent<HTMLOListElement>) => {
+    if (e.pointerType !== 'mouse' || !railRef.current) return
+    drag.current = { x: e.clientX, left: railRef.current.scrollLeft, moved: false, active: true }
+  }
+
+  const onPointerMove = (e: ReactPointerEvent<HTMLOListElement>) => {
+    const d = drag.current
+    if (!d.active || !railRef.current) return
+    const dx = e.clientX - d.x
+    if (!d.moved && Math.abs(dx) > DRAG_SLOP) {
+      d.moved = true
+      setDragging(true)
+      railRef.current.setPointerCapture(e.pointerId)
+    }
+    if (d.moved) railRef.current.scrollLeft = d.left - dx
+  }
+
+  const endDrag = () => {
+    drag.current.active = false
+    setDragging(false)
+  }
+
+  return (
+    <section id={id} className="overflow-hidden py-24" style={{ background: '#f4faf7' }}>
+      <div className="mx-auto flex max-w-6xl flex-wrap items-end gap-6 px-6">
+        <div>
+          <h2 className="font-display text-4xl font-extrabold text-[#073d4a] md:text-5xl">
+            {title}
+          </h2>
+          {blurb && <p className="mt-3 max-w-xl text-lg text-[#4a6b72]">{blurb}</p>}
+        </div>
+
+        {featured.length > 1 && (
+          <div className="ml-auto flex gap-2">
+            {[
+              [-1, '‹', 'Earlier'],
+              [1, '›', 'Later'],
+            ].map(([direction, glyph, label]) => (
+              <button
+                key={label}
+                type="button"
+                onClick={() => step(direction as number)}
+                aria-label={label as string}
+                className="flex h-12 w-12 items-center justify-center rounded-full border text-2xl transition-colors hover:bg-white"
+                style={{ borderColor: TEAL, color: TEAL }}
+              >
+                {glyph}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {error ? (
+        <p className="mx-auto mt-10 max-w-6xl px-6 text-[#b3261e]">
+          Couldn’t load the timeline. {error}{' '}
+          <button type="button" onClick={reload} className="underline">
+            Try again
+          </button>
+        </p>
+      ) : loading ? (
+        <div className="mx-auto mt-12 flex max-w-6xl gap-6 px-6" aria-hidden="true">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="h-72 w-80 shrink-0 animate-pulse rounded-3xl bg-white" />
+          ))}
+        </div>
+      ) : (
+        <ol
+          ref={railRef}
+          className={`hp-rail mt-12 flex gap-6 overflow-x-auto px-6 pb-4 md:px-[max(1.5rem,calc((100vw-72rem)/2+1.5rem))] ${
+            dragging ? 'hp-rail--dragging' : ''
+          }`}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={endDrag}
+          onPointerCancel={endDrag}
+          // Links and images are natively draggable, and a native
+          // drag cancels the pointer stream this relies on.
+          onDragStart={(e) => e.preventDefault()}
+          onClickCapture={(e) => {
+            if (drag.current.moved) {
+              e.preventDefault()
+              e.stopPropagation()
+              drag.current.moved = false
+            }
+          }}
+        >
+          {featured.map((item, index) => (
+            <li key={item.id} className="w-[19rem] shrink-0 md:w-[22rem]">
+              <RailCard
+                item={item}
+                showYear={index === 0 || year(item) !== year(featured[index - 1])}
+              />
+            </li>
+          ))}
+
+          <li className="w-[19rem] shrink-0 md:w-[22rem]">
+            <div className="flex h-full flex-col">
+              <div className="h-12" />
+              <Link
+                to="/history"
+                draggable={false}
+                className="flex flex-1 flex-col justify-center rounded-3xl p-8 text-white transition-transform duration-300 hover:-translate-y-1"
+                style={{ background: `linear-gradient(150deg, ${TEAL}, #073d4a)` }}
+              >
+                <span className="font-display text-2xl font-extrabold">The whole story</span>
+                <span className="mt-2 text-white/75">Every year, every milestone.</span>
+                <span className="mt-6 font-semibold">See the full history →</span>
+              </Link>
+            </div>
+          </li>
+        </ol>
+      )}
+    </section>
+  )
+}
+
+const year = (item: TimelineItem) => item.date.slice(0, 4)
+
+/* "June 2014", "2014", "12 June 2014" — only as much as precision
+   says is true. */
+function dateLabel(item: TimelineItem): string {
+  const [y, m, d] = item.date.split('-')
+  const month = m ? MONTH_LABELS[Number(m) - 1] : null
+  if (item.precision === 'day' && d && month) return `${Number(d)} ${month} ${y}`
+  if (item.precision !== 'year' && month) return `${month} ${y}`
+  return y
+}
+
+function RailCard({ item, showYear }: { item: TimelineItem; showYear: boolean }) {
+  const href = hrefFor(item)
+  const logo = logoSrc(item)
+
+  const body = (
+    <>
+      {logo && (
+        <img
+          src={logo}
+          alt=""
+          loading="lazy"
+          draggable={false}
+          className="mb-5 h-14 w-14 object-contain"
+        />
+      )}
+      <p className="text-xs font-bold uppercase tracking-[0.2em]" style={{ color: TEAL }}>
+        {dateLabel(item)}
+      </p>
+      <p className="mt-2 font-display text-xl font-bold leading-snug text-[#073d4a]">
+        {item.title}
+      </p>
+      {item.meta && <p className="mt-1 text-sm text-[#4a6b72]">{item.meta}</p>}
+      {item.blurb && (
+        <p className="mt-3 line-clamp-4 text-sm leading-relaxed text-[#4a6b72]">{item.blurb}</p>
+      )}
+      {href && (
+        <span className="mt-auto pt-5 text-sm font-semibold" style={{ color: TEAL }}>
+          Read more →
+        </span>
+      )}
+    </>
+  )
+
+  const card =
+    'flex flex-1 flex-col rounded-3xl border border-[#138ba0]/15 bg-white p-7 shadow-sm'
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* The line, its dot, and the year where it changes. */}
+      <div className="relative mb-4 h-8">
+        <div className="absolute inset-x-[-1.5rem] top-1/2 h-px bg-[#138ba0]/30" />
+        <span
+          className="absolute left-0 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full border-2 bg-white"
+          style={{ borderColor: TEAL }}
+        />
+        {showYear && (
+          <span
+            className="absolute left-5 top-1/2 -translate-y-1/2 rounded-full px-3 py-0.5 font-display text-sm font-bold text-white"
+            style={{ background: TEAL }}
+          >
+            {year(item)}
+          </span>
+        )}
+      </div>
+
+      {href ? (
+        <HomeLink
+          url={href}
+          className={`${card} transition-all duration-300 hover:-translate-y-1 hover:shadow-xl`}
+        >
+          {body}
+        </HomeLink>
+      ) : (
+        <div className={card}>{body}</div>
+      )}
+    </div>
+  )
+}

src/pages/sections/home/HeroStage.tsx

@@ -0,0 +1,328 @@
+/* ═══════════════════════════════════════════════════════════════
+   HERO STAGE
+
+   The top of the front page, in whichever mode the admin set:
+
+     brand       drifting colour and slow concentric rings — many
+                 circles, one centre — behind the words, with the
+                 dove at that centre
+     photos      the hero photos, crossfading with a slow zoom, a
+                 progress bar per photo and a pause button (anything
+                 that moves on its own for more than five seconds
+                 needs one)
+     livestream  the stream beside the words, with a LIVE badge
+
+   A mode that has nothing to show falls back to brand: photos with
+   no photos, or a livestream link that can't be embedded. A stream
+   link that can't be framed still gets a "Watch live" button, so
+   switching the mode on is never a no-op.
+
+   `hero` is null while the page config loads or when it failed; the
+   stage still draws, empty, so the page doesn't jump when it
+   arrives. The error itself is shown by Home, not here.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { useEffect, useState, type CSSProperties } from 'react'
+
+import HomeLink from './HomeLink.tsx'
+import DoveMark from '../../../components/DoveMark.tsx'
+import { livestreamEmbedUrl } from '../../../lib/embeds.ts'
+import { heroPhoto } from '../../../lib/media.ts'
+import type { Hero, HeroSlide } from '../../../lib/useFrontPage.ts'
+
+const DEEP = '#04262e'
+
+export default function HeroStage({ hero }: { hero: Hero | null }) {
+  const slides = (hero?.slides ?? []).filter((slide) => heroPhoto(slide.media))
+  const embed = livestreamEmbedUrl(hero?.livestream?.url)
+
+  const mode =
+    hero?.mode === 'photos' && slides.length > 0
+      ? 'photos'
+      : hero?.mode === 'livestream' && hero.livestream
+        ? 'livestream'
+        : 'brand'
+
+  return (
+    <section
+      id="hero"
+      className="relative isolate flex min-h-[92vh] items-center overflow-hidden pt-24 pb-16"
+      style={{ background: DEEP }}
+    >
+      {mode === 'photos' ? (
+        <PhotoBackdrop slides={slides} seconds={hero?.slide_seconds ?? 7} />
+      ) : (
+        <BrandBackdrop />
+      )}
+
+      <div className="relative z-10 mx-auto grid w-full max-w-7xl items-center gap-12 px-6 lg:grid-cols-12">
+        <div className={mode === 'livestream' ? 'lg:col-span-5' : 'lg:col-span-8'}>
+          {hero && <Words hero={hero} live={mode === 'livestream'} />}
+        </div>
+
+        {mode === 'livestream' && hero?.livestream && (
+          <div className="lg:col-span-7">
+            <LiveFrame src={embed} url={hero.livestream.url} title={hero.livestream.title} />
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+/* ── The words ───────────────────────────────────────────────── */
+
+function Words({ hero, live }: { hero: Hero; live: boolean }) {
+  const words = hero.headline.split(/\s+/).filter(Boolean)
+
+  return (
+    <div className="text-white">
+      {live ? (
+        <p className="mb-6 inline-flex items-center gap-3 rounded-full bg-white/10 px-4 py-1.5 text-sm font-semibold uppercase tracking-[0.2em] backdrop-blur">
+          <span className="hp-live-dot h-2.5 w-2.5 rounded-full bg-[#ff4d4d]" aria-hidden="true" />
+          Live now
+          {hero.livestream?.title && (
+            <span className="normal-case tracking-normal text-white/75">
+              · {hero.livestream.title}
+            </span>
+          )}
+        </p>
+      ) : (
+        hero.eyebrow && (
+          <p className="mb-6 inline-block rounded-full border border-white/20 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.25em] text-[#9fe7d0]">
+            {hero.eyebrow}
+          </p>
+        )
+      )}
+
+      <h1
+        className={`font-display font-extrabold leading-[0.95] tracking-tight ${
+          live ? 'text-5xl md:text-6xl' : 'text-6xl md:text-8xl'
+        }`}
+      >
+        {words.map((word, index) => (
+          <span key={`${word}-${index}`}>
+            <span
+              className="hp-rise"
+              style={{ animationDelay: `${120 + index * 110}ms` }}
+            >
+              {word}
+            </span>{' '}
+          </span>
+        ))}
+      </h1>
+
+      {hero.subhead && (
+        <p
+          className="hp-rise mt-8 max-w-2xl text-lg leading-relaxed text-white/75 md:text-xl"
+          style={{ animationDelay: `${200 + words.length * 110}ms` }}
+        >
+          {hero.subhead}
+        </p>
+      )}
+
+      {(hero.primary || hero.secondary) && (
+        <div
+          className="hp-rise mt-10 flex flex-wrap gap-4"
+          style={{ animationDelay: `${320 + words.length * 110}ms` }}
+        >
+          {hero.primary && (
+            <HomeLink
+              url={hero.primary.url}
+              className="rounded-full px-8 py-4 text-lg font-bold text-[#04262e] shadow-xl transition-transform duration-300 hover:-translate-y-0.5 hover:scale-[1.03]"
+              style={{ background: 'linear-gradient(120deg, #9fe7d0, #5ce7ff)' }}
+            >
+              {hero.primary.label}
+            </HomeLink>
+          )}
+          {hero.secondary && (
+            <HomeLink
+              url={hero.secondary.url}
+              className="rounded-full border border-white/35 px-8 py-4 text-lg font-semibold text-white transition-colors duration-300 hover:bg-white/10"
+            >
+              {hero.secondary.label} →
+            </HomeLink>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/* ── Brand backdrop ──────────────────────────────────────────── */
+
+function BrandBackdrop() {
+  return (
+    <div className="absolute inset-0 -z-10" aria-hidden="true">
+      <div className="hp-aurora hp-aurora--a" style={blob('#138ba0', '48vw', '-10%', '-10%')} />
+      <div className="hp-aurora hp-aurora--b" style={blob('#10d48a', '38vw', '45%', '20%')} />
+      <div className="hp-aurora hp-aurora--c" style={blob('#d8b64a', '30vw', '70%', '-5%')} />
+
+      <svg
+        className="absolute -right-[20vw] top-1/2 h-[120vw] w-[120vw] -translate-y-1/2 md:-right-[10vw] md:h-[80vw] md:w-[80vw]"
+        viewBox="0 0 400 400"
+      >
+        <defs>
+          <radialGradient id="hp-dove-glow">
+            <stop offset="0%" stopColor="#9fe7d0" stopOpacity="0.35" />
+            <stop offset="100%" stopColor="#9fe7d0" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+
+        {/* The rings are faint; the dove at their centre is not, so
+            the opacity sits on the rings rather than the whole SVG. */}
+        <g opacity="0.16">
+          <g className="hp-rings" fill="none" stroke="#ffffff">
+            {[40, 70, 100, 130, 160, 190].map((r, i) => (
+              <circle key={r} cx="200" cy="200" r={r} strokeWidth={i % 2 ? 0.6 : 1.2} strokeDasharray={i % 2 ? '2 6' : undefined} />
+            ))}
+            <circle cx="390" cy="200" r="4" fill="#9fe7d0" stroke="none" />
+            <circle cx="200" cy="40" r="3" fill="#5ce7ff" stroke="none" />
+          </g>
+          <g className="hp-rings hp-rings--reverse" fill="none" stroke="#9fe7d0">
+            <circle cx="200" cy="200" r="115" strokeWidth="0.8" strokeDasharray="1 10" />
+            <circle cx="85" cy="200" r="3.5" fill="#ffffff" stroke="none" />
+          </g>
+        </g>
+
+        {/* Outside the rotating groups, so it stays upright while the
+            rings turn around it. 64 × 42.7 at the centre fits inside
+            the innermost ring (r 40) with room to float. */}
+        <circle cx="200" cy="200" r="46" fill="url(#hp-dove-glow)" />
+        <g className="hp-dove" style={{ color: '#ffffff' }} opacity="0.9">
+          <DoveMark x="168" y="178.65" width="64" height="42.7" />
+        </g>
+      </svg>
+
+      <div
+        className="absolute inset-x-0 bottom-0 h-40"
+        style={{ background: `linear-gradient(to bottom, transparent, ${DEEP})` }}
+      />
+    </div>
+  )
+}
+
+function blob(color: string, size: string, left: string, top: string): CSSProperties {
+  return { background: color, width: size, height: size, left, top }
+}
+
+/* ── Photo backdrop ──────────────────────────────────────────── */
+
+function PhotoBackdrop({ slides, seconds }: { slides: HeroSlide[]; seconds: number }) {
+  const [index, setIndex] = useState(0)
+  const [paused, setPaused] = useState(false)
+  const ms = Math.max(3, seconds) * 1000
+  const current = slides[index % slides.length]
+
+  useEffect(() => {
+    if (paused || slides.length < 2) return
+    const timer = window.setTimeout(() => setIndex((i) => (i + 1) % slides.length), ms)
+    return () => window.clearTimeout(timer)
+  }, [index, paused, ms, slides.length])
+
+  return (
+    <>
+      <div
+        className="absolute inset-0 -z-10"
+        style={{ '--hp-slide-ms': `${ms}ms` } as CSSProperties}
+      >
+        {slides.map((slide, i) => (
+          <div
+            key={`${slide.media}-${i}`}
+            className={`hp-slide ${i === index ? 'hp-slide--on' : ''}`}
+            aria-hidden={i !== index}
+          >
+            <img src={heroPhoto(slide.media) ?? ''} alt={slide.alt ?? ''} loading={i === 0 ? 'eager' : 'lazy'} />
+          </div>
+        ))}
+        <div
+          className="absolute inset-0"
+          style={{
+            background:
+              'linear-gradient(100deg, rgba(4,38,46,0.92) 0%, rgba(4,38,46,0.65) 45%, rgba(4,38,46,0.15) 100%)',
+          }}
+        />
+      </div>
+
+      <div className="absolute inset-x-0 bottom-6 z-10 mx-auto flex max-w-7xl flex-wrap items-end gap-4 px-6">
+        {current?.caption && (
+          <p className="max-w-md rounded-xl bg-black/35 px-4 py-2 text-sm text-white/90 backdrop-blur">
+            {current.link_url ? (
+              <HomeLink url={current.link_url} className="hover:underline">
+                {current.caption} →
+              </HomeLink>
+            ) : (
+              current.caption
+            )}
+          </p>
+        )}
+
+        {slides.length > 1 && (
+          <div className="ml-auto flex items-center gap-3">
+            <div className="flex gap-1.5">
+              {slides.map((slide, i) => (
+                <button
+                  key={`${slide.media}-${i}`}
+                  type="button"
+                  onClick={() => setIndex(i)}
+                  aria-label={`Show photo ${i + 1} of ${slides.length}`}
+                  aria-current={i === index}
+                  className="h-1.5 w-10 overflow-hidden rounded-full bg-white/25"
+                >
+                  <span
+                    // Re-keyed per index so the fill restarts on every change.
+                    key={`${index}-${i}`}
+                    className={`hp-progress block h-full bg-white ${
+                      i < index ? 'hp-progress--done' : i === index ? 'hp-progress--run' : ''
+                    } ${paused ? 'hp-progress--paused' : ''}`}
+                  />
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              onClick={() => setPaused((p) => !p)}
+              aria-label={paused ? 'Play slideshow' : 'Pause slideshow'}
+              className="flex h-8 w-8 items-center justify-center rounded-full border border-white/40 text-xs text-white hover:bg-white/10"
+            >
+              {paused ? '▶' : '❚❚'}
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+/* ── Livestream ──────────────────────────────────────────────── */
+
+function LiveFrame({ src, url, title }: { src: string | null; url: string; title?: string | null }) {
+  return (
+    <div
+      className="relative overflow-hidden rounded-3xl border border-white/15 bg-black shadow-2xl"
+      style={{ boxShadow: '0 30px 80px -20px rgba(16, 212, 138, 0.35)' }}
+    >
+      <div className="aspect-video w-full">
+        {src ? (
+          <iframe
+            src={src}
+            title={title || 'Livestream'}
+            className="h-full w-full"
+            allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+            allowFullScreen
+          />
+        ) : (
+          <div className="flex h-full w-full flex-col items-center justify-center gap-4 text-white">
+            <span className="hp-live-dot h-4 w-4 rounded-full bg-[#ff4d4d]" aria-hidden="true" />
+            <HomeLink
+              url={url}
+              className="rounded-full bg-white px-6 py-3 font-semibold text-[#04262e] hover:scale-105"
+            >
+              Watch live
+            </HomeLink>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

src/pages/sections/home/HomeLink.tsx

@@ -0,0 +1,45 @@
+/* ═══════════════════════════════════════════════════════════════
+   HOME LINK
+
+   Every link on the front page is typed into the admin, so any of
+   them can be a route (/retreats), an anchor on this page
+   (#connect) or somewhere else entirely. One component decides
+   which element that is, so the hero buttons, photo captions and
+   pathfinder actions can't disagree about it.
+   ═══════════════════════════════════════════════════════════════ */
+
+import type { CSSProperties, ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+
+type HomeLinkProps = {
+  url: string
+  className?: string
+  style?: CSSProperties
+  children: ReactNode
+}
+
+export const isExternal = (url: string) => /^[a-z][a-z0-9+.-]*:/i.test(url)
+
+export default function HomeLink({ url, className, style, children }: HomeLinkProps) {
+  if (url.startsWith('/') && !url.startsWith('//')) {
+    return (
+      <Link to={url} className={className} style={style}>
+        {children}
+      </Link>
+    )
+  }
+
+  // mailto: and tel: open an app, not a tab.
+  const newTab = isExternal(url) && !/^(mailto|tel):/i.test(url)
+
+  return (
+    <a
+      href={url}
+      className={className}
+      style={style}
+      {...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+    >
+      {children}
+    </a>
+  )
+}

src/pages/sections/home/NextEventCountdown.tsx

@@ -0,0 +1,133 @@
+/* ═══════════════════════════════════════════════════════════════
+   NEXT EVENT COUNTDOWN
+
+   A strip under the hero: the next event, and how long until it.
+   The API picks the event (pinned in the admin, or the next one that
+   hasn't ended); this works out the moment to count to.
+
+   For a one-off event that's local midnight on starts_on — dates
+   here are calendar dates with no time attached. For a series it's
+   the next meeting, at the series' start time when it has one, so a
+   weekly class counts down to Tuesday 7pm rather than to a start
+   date months in the past.
+
+   Once the moment passes and the event hasn't ended, the strip says
+   it's happening now instead of counting below zero.
+
+   The strip's heading is the event itself, so the section title and
+   blurb from the admin aren't drawn here.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+
+import { eventHref } from '../../../lib/hrefs.ts'
+import { upcomingOccurrences } from '../../../lib/eventSeries.ts'
+import type { CountdownEvent } from '../../../lib/useFrontPage.ts'
+
+const TEAL = '#138ba0'
+
+/* Local midnight (or HH:MM) on a 'YYYY-MM-DD'. */
+function localMoment(date: string, time?: string | null): Date | null {
+  const [y, m, d] = date.split('-').map(Number)
+  if (!y || !m || !d) return null
+  const [hh, mm] = (time ?? '00:00').split(':').map(Number)
+  return new Date(y, m - 1, d, hh || 0, mm || 0)
+}
+
+function target(event: CountdownEvent): Date | null {
+  if (event.series) {
+    const next = upcomingOccurrences(event.series, event.starts_on, event.ends_on, 1)[0]
+    return next ? localMoment(next, event.series.start_time) : null
+  }
+  return event.starts_on ? localMoment(event.starts_on) : null
+}
+
+function useNow(intervalMs: number) {
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), intervalMs)
+    return () => window.clearInterval(timer)
+  }, [intervalMs])
+  return now
+}
+
+/* `overlap` tucks the strip up over the hero's bottom edge, which
+   only makes sense when it's the first band after the hero. The
+   admin can move it anywhere, so Home decides. */
+export default function NextEventCountdown({
+  event,
+  overlap,
+}: {
+  event: CountdownEvent
+  overlap: boolean
+}) {
+  const now = useNow(1000)
+  const when = target(event)
+  const accent = event.color || TEAL
+
+  const remaining = when ? when.getTime() - now : 0
+  const live = !when || remaining <= 0
+
+  const parts = [
+    ['days', Math.floor(remaining / 86_400_000)],
+    ['hrs', Math.floor(remaining / 3_600_000) % 24],
+    ['min', Math.floor(remaining / 60_000) % 60],
+    ['sec', Math.floor(remaining / 1000) % 60],
+  ] as const
+
+  const where = event.location_label || (event.is_online ? 'Online' : null)
+
+  return (
+    <section
+      aria-label="Next event"
+      className={`relative z-20 px-6 ${overlap ? '-mt-12' : 'py-12'}`}
+    >
+      <Link
+        to={eventHref(event.id)}
+        className="group mx-auto flex max-w-6xl flex-col gap-6 rounded-3xl border bg-white/95 p-6 shadow-2xl backdrop-blur transition-transform duration-300 hover:-translate-y-1 md:flex-row md:items-center md:p-8"
+        style={{ borderColor: `${accent}55` }}
+      >
+        <div className="min-w-0 flex-1">
+          <p className="text-xs font-bold uppercase tracking-[0.25em]" style={{ color: accent }}>
+            {live ? 'Happening now' : 'Next up'}
+          </p>
+          <p className="mt-1 truncate font-display text-2xl font-extrabold text-[#073d4a] md:text-3xl">
+            {event.title}
+          </p>
+          <p className="mt-1 text-sm text-[#4a6b72]">
+            {[event.theme && `“${event.theme}”`, event.date_label, where]
+              .filter(Boolean)
+              .join(' · ')}
+          </p>
+        </div>
+
+        {!live && (
+          <div className="flex gap-2 md:gap-3" role="timer" aria-live="off">
+            {parts.map(([label, value]) => (
+              <div
+                key={label}
+                className="flex w-16 flex-col items-center rounded-2xl py-3 text-white md:w-20"
+                style={{ background: `linear-gradient(160deg, ${accent}, #073d4a)` }}
+              >
+                <span className="font-display text-2xl font-bold tabular-nums md:text-3xl">
+                  {String(value).padStart(2, '0')}
+                </span>
+                <span className="text-[0.65rem] uppercase tracking-widest text-white/75">
+                  {label}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <span
+          className="self-start text-sm font-semibold transition-transform group-hover:translate-x-1 md:self-center"
+          style={{ color: accent }}
+        >
+          Details →
+        </span>
+      </Link>
+    </section>
+  )
+}

src/pages/sections/home/Pathfinder.tsx

@@ -0,0 +1,186 @@
+/* ═══════════════════════════════════════════════════════════════
+   PATHFINDER  —  "Find your way in"
+
+   The connect section as a question rather than a wall of forms:
+   pick what you're here for, and that path's actions arrive. Paths
+   and actions are the admin's (Front page → Find your way in);
+   a path with no actions never reaches this component.
+
+   The choices are a real tablist: arrow keys move between them,
+   Home and End jump to the ends, and only the selected tab is in
+   the tab order. Selection follows focus, which is right when
+   showing a panel costs nothing.
+
+   Re-keying the panel on the selected index is what replays the
+   entrance animation for each choice.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { useId, useRef, useState, type KeyboardEvent } from 'react'
+
+import HomeLink, { isExternal } from './HomeLink.tsx'
+import type { FrontPagePath } from '../../../lib/useFrontPage.ts'
+
+type PathfinderProps = {
+  id: string
+  title: string
+  blurb?: string | null
+  paths: FrontPagePath[]
+}
+
+/* One accent per position, cycling. Paths are data; colour is
+   presentation, so it's assigned here rather than stored. */
+const ACCENTS = ['#138ba0', '#10a36e', '#c7972b', '#7a5ea8', '#d0643c']
+
+export default function Pathfinder({ id, title, blurb, paths }: PathfinderProps) {
+  const [selected, setSelected] = useState(0)
+  const tabs = useRef<Array<HTMLButtonElement | null>>([])
+  const base = useId().replace(/:/g, '')
+
+  if (paths.length === 0) return null
+
+  const path = paths[Math.min(selected, paths.length - 1)]
+  const accent = ACCENTS[selected % ACCENTS.length]
+
+  const focus = (index: number) => {
+    const next = (index + paths.length) % paths.length
+    setSelected(next)
+    tabs.current[next]?.focus()
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const moves: Record<string, number> = {
+      ArrowRight: selected + 1,
+      ArrowDown: selected + 1,
+      ArrowLeft: selected - 1,
+      ArrowUp: selected - 1,
+      Home: 0,
+      End: paths.length - 1,
+    }
+    if (!(e.key in moves)) return
+    e.preventDefault()
+    focus(moves[e.key])
+  }
+
+  return (
+    <section id={id} className="py-24" style={{ background: '#ffffff' }}>
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="grid gap-12 lg:grid-cols-12">
+          <div className="lg:col-span-5">
+            <p className="text-xs font-bold uppercase tracking-[0.3em] text-[#138ba0]">
+              I’m looking to…
+            </p>
+            <h2 className="mt-3 font-display text-4xl font-extrabold text-[#073d4a] md:text-5xl">
+              {title}
+            </h2>
+            {blurb && <p className="mt-4 text-lg text-[#4a6b72]">{blurb}</p>}
+
+            <div
+              role="tablist"
+              aria-label={title}
+              aria-orientation="vertical"
+              className="mt-10 flex flex-col gap-3"
+              onKeyDown={onKeyDown}
+            >
+              {paths.map((option, index) => {
+                const on = index === selected
+                const color = ACCENTS[index % ACCENTS.length]
+                return (
+                  <button
+                    key={`${option.label}-${index}`}
+                    ref={(el) => {
+                      tabs.current[index] = el
+                    }}
+                    id={`${base}-tab-${index}`}
+                    role="tab"
+                    type="button"
+                    aria-selected={on}
+                    aria-controls={`${base}-panel`}
+                    tabIndex={on ? 0 : -1}
+                    onClick={() => setSelected(index)}
+                    className="group flex items-center gap-4 rounded-2xl border-2 px-5 py-4 text-left transition-all duration-300"
+                    style={{
+                      borderColor: on ? color : 'rgba(19,139,160,0.12)',
+                      background: on ? `${color}12` : '#ffffff',
+                      transform: on ? 'translateX(8px)' : undefined,
+                    }}
+                  >
+                    <span
+                      className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl transition-transform duration-300 group-hover:scale-110"
+                      style={{ background: on ? color : `${color}1f` }}
+                      aria-hidden="true"
+                    >
+                      {option.icon || '•'}
+                    </span>
+                    <span className="font-display text-xl font-bold" style={{ color: on ? color : '#073d4a' }}>
+                      {option.label}
+                    </span>
+                    <span
+                      className="ml-auto text-xl transition-opacity"
+                      style={{ color, opacity: on ? 1 : 0 }}
+                      aria-hidden="true"
+                    >
+                      →
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          <div
+            key={selected}
+            id={`${base}-panel`}
+            role="tabpanel"
+            aria-labelledby={`${base}-tab-${selected}`}
+            className="relative overflow-hidden rounded-[2rem] p-8 md:p-10 lg:col-span-7"
+            style={{ background: `linear-gradient(155deg, ${accent}14, ${accent}05 60%, #ffffff)` }}
+          >
+            <span
+              className="pointer-events-none absolute -right-6 -top-10 select-none text-[10rem] leading-none opacity-10"
+              aria-hidden="true"
+            >
+              {path.icon}
+            </span>
+
+            {path.blurb && (
+              <p className="hp-pop relative max-w-md font-display text-2xl font-semibold leading-snug text-[#073d4a]">
+                {path.blurb}
+              </p>
+            )}
+
+            <ul className="relative mt-8 grid gap-4 sm:grid-cols-2">
+              {path.actions.map((action, index) => (
+                <li
+                  key={`${action.url}-${index}`}
+                  className="hp-pop"
+                  style={{ animationDelay: `${120 + index * 90}ms` }}
+                >
+                  <HomeLink
+                    url={action.url}
+                    className="group flex h-full flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+                  >
+                    <span className="flex items-start gap-2 font-display text-lg font-bold text-[#073d4a]">
+                      {action.label}
+                      <span
+                        className="ml-auto transition-transform group-hover:translate-x-1"
+                        style={{ color: accent }}
+                        aria-hidden="true"
+                      >
+                        {isExternal(action.url) ? '↗' : '→'}
+                      </span>
+                    </span>
+                    {action.description && (
+                      <span className="mt-2 text-sm leading-relaxed text-[#4a6b72]">
+                        {action.description}
+                      </span>
+                    )}
+                  </HomeLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/pages/sections/home/RetreatsBand.tsx

@@ -0,0 +1,40 @@
+/* ═══════════════════════════════════════════════════════════════
+   RETREATS BAND
+
+   The National Retreats carousel from the Retreats page, as-is:
+   same component, same filter, so an event edited in the admin
+   shows up identically in both places. This file only adds the
+   front page's heading and a way through to the full page.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { Link } from 'react-router-dom'
+
+import EventListCards from '../EventList-Cards.tsx'
+
+const TEAL = '#138ba0'
+
+type RetreatsBandProps = { id: string; title: string; blurb?: string | null }
+
+export default function RetreatsBand({ id, title, blurb }: RetreatsBandProps) {
+  return (
+    <section id={id} className="overflow-hidden py-24" style={{ background: '#eef9fb' }}>
+      <div className="mx-auto mb-12 flex max-w-6xl flex-wrap items-end gap-6 px-6">
+        <div>
+          <h2 className="font-display text-4xl font-extrabold text-[#073d4a] md:text-5xl">
+            {title}
+          </h2>
+          {blurb && <p className="mt-3 max-w-xl text-lg text-[#4a6b72]">{blurb}</p>}
+        </div>
+        <Link
+          to="/retreats"
+          className="ml-auto rounded-full border px-5 py-2 text-sm font-semibold transition-colors hover:bg-white"
+          style={{ borderColor: TEAL, color: TEAL }}
+        >
+          All retreats →
+        </Link>
+      </div>
+
+      <EventListCards section="national" type="retreat" view="carousel" accent={TEAL} />
+    </section>
+  )
+}

src/pages/sections/home/StatsBand.tsx

@@ -0,0 +1,127 @@
+/* ═══════════════════════════════════════════════════════════════
+   STATS BAND
+
+   The numbers from the admin's Front page editor, counted by the
+   API or typed in. Each one counts up from zero the first time the
+   band scrolls into view; a value that isn't a plain number
+   ("Since 2004", "Coast to coast") just appears.
+
+   Reduced motion skips the count and shows the number.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { useEffect, useRef, useState } from 'react'
+
+import type { FrontPageStat } from '../../../lib/useFrontPage.ts'
+
+const COUNT_MS = 1400
+
+type StatsBandProps = {
+  id: string
+  title: string
+  blurb?: string | null
+  stats: FrontPageStat[]
+}
+
+export default function StatsBand({ id, title, blurb, stats }: StatsBandProps) {
+  const ref = useRef<HTMLElement>(null)
+  const [seen, setSeen] = useState(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el || seen) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setSeen(true)
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.35 },
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [seen])
+
+  return (
+    <section
+      id={id}
+      ref={ref}
+      className="relative overflow-hidden py-24"
+      style={{ background: 'linear-gradient(160deg, #073d4a 0%, #04262e 70%)' }}
+    >
+      <div
+        className="pointer-events-none absolute -left-40 -top-40 h-[32rem] w-[32rem] rounded-full opacity-25 blur-3xl"
+        style={{ background: '#10d48a' }}
+        aria-hidden="true"
+      />
+
+      <div className="relative mx-auto max-w-6xl px-6">
+        <h2 className="font-display text-sm font-bold uppercase tracking-[0.3em] text-[#9fe7d0]">
+          {title}
+        </h2>
+        {blurb && <p className="mt-3 max-w-2xl text-white/70">{blurb}</p>}
+
+        <dl className="mt-12 grid grid-cols-2 gap-x-8 gap-y-14 md:grid-cols-4">
+          {stats.map((stat, index) => (
+            <div
+              key={`${stat.label}-${index}`}
+              className={`hp-stat border-l border-white/15 pl-6 ${seen ? 'hp-stat--in' : ''}`}
+              style={{ transitionDelay: `${index * 120}ms` }}
+            >
+              <dd className="font-display text-5xl font-extrabold leading-none text-white md:text-6xl">
+                <CountUp value={stat.value} run={seen} />
+                {stat.suffix && <span className="text-[#9fe7d0]">{stat.suffix}</span>}
+              </dd>
+              <dt className="mt-3 text-sm font-semibold uppercase tracking-widest text-white/70">
+                {stat.label}
+              </dt>
+              {stat.note && <p className="mt-1 text-sm text-white/50">{stat.note}</p>}
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  )
+}
+
+/* "1,200" counts to 1,200 and keeps its comma; "12.5" keeps its
+   decimal. Anything that isn't just a number renders as given. */
+function CountUp({ value, run }: { value: string; run: boolean }) {
+  const numeric = /^\d[\d,]*(\.\d+)?$/.test(value)
+  const target = numeric ? Number(value.replace(/,/g, '')) : 0
+  const decimals = value.split('.')[1]?.length ?? 0
+  const grouped = value.includes(',')
+
+  const reduced =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+  const [shown, setShown] = useState(0)
+
+  useEffect(() => {
+    if (!numeric || !run || reduced) return
+    let frame = 0
+    const start = performance.now()
+    const tick = (t: number) => {
+      const p = Math.min(1, (t - start) / COUNT_MS)
+      // Ease out: fast at first, settling onto the number.
+      setShown(target * (1 - Math.pow(1 - p, 3)))
+      if (p < 1) frame = requestAnimationFrame(tick)
+    }
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [numeric, run, reduced, target])
+
+  if (!numeric) return <>{value}</>
+
+  const n = reduced || !run ? (run ? target : 0) : shown
+  return (
+    <span className="tabular-nums">
+      {n.toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+        useGrouping: grouped || target >= 10_000,
+      })}
+    </span>
+  )
+}

src/pages/sections/home/home.css

@@ -0,0 +1,169 @@
+/* ═══════════════════════════════════════════════════════════════
+   FRONT PAGE MOTION
+
+   Keyframes and the few rules Tailwind utilities can't express.
+   Everything that moves on its own stops under
+   prefers-reduced-motion; the page still reads the same without it.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Hero: brand mode aurora ─────────────────────────────────── */
+
+.hp-aurora {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(80px);
+  opacity: 0.55;
+  will-change: transform;
+}
+
+.hp-aurora--a { animation: hp-drift-a 22s ease-in-out infinite alternate; }
+.hp-aurora--b { animation: hp-drift-b 28s ease-in-out infinite alternate; }
+.hp-aurora--c { animation: hp-drift-c 34s ease-in-out infinite alternate; }
+
+@keyframes hp-drift-a {
+  from { transform: translate(-10%, -5%) scale(1); }
+  to   { transform: translate(15%, 10%) scale(1.25); }
+}
+@keyframes hp-drift-b {
+  from { transform: translate(10%, 5%) scale(1.1); }
+  to   { transform: translate(-20%, -10%) scale(0.9); }
+}
+@keyframes hp-drift-c {
+  from { transform: translate(0, 10%) scale(0.9); }
+  to   { transform: translate(-10%, -15%) scale(1.2); }
+}
+
+/* Concentric rings: many circles, one centre. */
+.hp-rings {
+  animation: hp-spin 90s linear infinite;
+  transform-origin: 50% 50%;
+}
+.hp-rings--reverse { animation-direction: reverse; animation-duration: 140s; }
+
+@keyframes hp-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* The dove at the rings' centre bobs gently rather than turning. */
+.hp-dove {
+  animation: hp-bob 6s ease-in-out infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@keyframes hp-bob {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-4px); }
+}
+
+/* ── Hero: headline words rise in ────────────────────────────── */
+
+.hp-rise {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(0.6em);
+  animation: hp-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+}
+
+@keyframes hp-rise {
+  to { opacity: 1; transform: none; }
+}
+
+/* ── Hero: photos ────────────────────────────────────────────── */
+
+.hp-slide {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 1.4s ease;
+}
+.hp-slide--on { opacity: 1; }
+
+.hp-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.hp-slide--on img { animation: hp-kenburns var(--hp-slide-ms, 7000ms) ease-out forwards; }
+
+@keyframes hp-kenburns {
+  from { transform: scale(1.12) translate(1.5%, 1%); }
+  to   { transform: scale(1) translate(0, 0); }
+}
+
+.hp-progress {
+  transform-origin: left center;
+  transform: scaleX(0);
+}
+.hp-progress--run { animation: hp-fill var(--hp-slide-ms, 7000ms) linear forwards; }
+.hp-progress--done { transform: scaleX(1); }
+.hp-progress--paused { animation-play-state: paused; }
+
+@keyframes hp-fill {
+  to { transform: scaleX(1); }
+}
+
+/* ── Hero: LIVE ──────────────────────────────────────────────── */
+
+.hp-live-dot {
+  box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
+  animation: hp-pulse 1.6s ease-out infinite;
+}
+
+@keyframes hp-pulse {
+  to { box-shadow: 0 0 0 12px rgba(255, 77, 77, 0); }
+}
+
+/* ── Timeline rail ───────────────────────────────────────────── */
+
+.hp-rail {
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  cursor: grab;
+}
+.hp-rail::-webkit-scrollbar { display: none; }
+.hp-rail--dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
+.hp-rail > * { scroll-snap-align: start; }
+
+/* ── Pathfinder: actions arrive one after another ────────────── */
+
+.hp-pop {
+  opacity: 0;
+  transform: translateY(14px) scale(0.98);
+  animation: hp-pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+}
+
+@keyframes hp-pop {
+  to { opacity: 1; transform: none; }
+}
+
+/* ── Stats: numbers settle in ────────────────────────────────── */
+
+.hp-stat {
+  opacity: 0;
+  transform: translateY(18px);
+  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.hp-stat--in { opacity: 1; transform: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .hp-aurora,
+  .hp-rings,
+  .hp-dove,
+  .hp-slide--on img,
+  .hp-live-dot {
+    animation: none;
+  }
+  .hp-rise,
+  .hp-pop {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  .hp-stat {
+    transition: none;
+  }
+  .hp-slide {
+    transition: none;
+  }
+}