From 4009d5b7114a9bef1e36ef23a686c30aac5720d6 Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 15:27:29 +0200
Subject: [PATCH] refactor(roadmap): single centred header + dispatch banner
 below the route
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Order on the page:
  1. Centred header — 48px serif 'Roadmap' h1, one merged subtitle that
     combines the original page lead ('A live picture of the work…')
     with both interaction hints (tap-or-hover, drag-or-scroll).
  2. <RoadmapRoute> — full-bleed track + right-edge advance arrow.
  3. Legend — centred in content column.
  4. <LatestDispatchBanner> — moved from above the route to below the
     legend. The dispatch becomes supplementary editorial that sits at
     the foot of the page; the route is the primary surface and now
     leads.

Banner spacing flipped: was margin-bottom 56px above the route, now
margin-top 64px below the legend.

The previous left-aligned 'What we are building.' top header and the
secondary centred 'Roadmap' route-intro block are both gone — merged
into one centred header at the top.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/roadmap.astro | 95 ++++++++++++-----------------------------
 1 file changed, 28 insertions(+), 67 deletions(-)

diff --git a/src/pages/roadmap.astro b/src/pages/roadmap.astro
index 780a7e1..17b57f8 100644
--- a/src/pages/roadmap.astro
+++ b/src/pages/roadmap.astro
@@ -12,31 +12,20 @@ const items = getAllRoadmapItems()
 <AppLayout title="Roadmap" user={user}>
   <article class="roadmap-page">
 
-    <!-- Page-level header — left-aligned, the page's editorial lead. -->
-    <header class="page-header">
-      <p class="page-eyebrow">Roadmap</p>
-      <h1 class="page-title">What we are building.</h1>
-      <p class="page-sub">
+    <!-- Single centred header — merges the page lead with the route's
+         interaction hints. -->
+    <header class="roadmap-header">
+      <h1 class="roadmap-title">Roadmap</h1>
+      <p class="roadmap-sub">
         A live picture of the work. What's in motion, what's queued,
-        what we're still thinking about.
+        what we're still thinking about. Tap or hover any milestone
+        for the full story. Drag or scroll to move.
       </p>
     </header>
 
-    <LatestDispatchBanner />
-
-    <!-- Centred section intro for the route specifically. Sits between
-         the dispatch banner and the full-bleed route; carries the two
-         interaction hints (hover/tap + drag/scroll). -->
-    <section class="route-intro">
-      <h2 class="route-intro-title">Roadmap</h2>
-      <p class="route-intro-hint">
-        Tap or hover any milestone for the full story. Drag or scroll to move.
-      </p>
-    </section>
-
     <RoadmapRoute items={items} />
 
-    <!-- Legend — final row, centred in content column. -->
+    <!-- Legend — final row inside content column. -->
     <div class="roadmap-legend" aria-label="Status legend">
       <span><i style="background:#6d8c7c"></i>Shipping</span>
       <span><i style="background:#b96b58"></i>In beta</span>
@@ -44,6 +33,11 @@ const items = getAllRoadmapItems()
       <span><i style="background:#d4d2c8"></i>Considering</span>
     </div>
 
+    <!-- Latest dispatch — moved below the route. The route is the page's
+         primary surface; the dispatch is supplementary editorial that
+         sits at the foot. -->
+    <LatestDispatchBanner />
+
   </article>
 </AppLayout>
 
@@ -54,21 +48,14 @@ const items = getAllRoadmapItems()
     margin: 0 auto;
   }
 
-  /* ── Page header (left-aligned editorial lead) ────────────────── */
-  .page-header {
-    max-width: 540px;
-    margin-bottom: 36px;
+  /* ── Centred header ──────────────────────────────────────────── */
+  .roadmap-header {
+    text-align: center;
+    max-width: 640px;
+    margin: 0 auto 48px;
     padding-top: 32px;
   }
-  .page-eyebrow {
-    font-family: var(--font-sans);
-    font-size: 11px;
-    letter-spacing: 1.4px;
-    text-transform: uppercase;
-    color: var(--on-surface-variant);
-    margin: 0 0 12px;
-  }
-  .page-title {
+  .roadmap-title {
     font-family: var(--font-serif);
     font-weight: 400;
     font-size: 48px;
@@ -77,38 +64,12 @@ const items = getAllRoadmapItems()
     color: var(--on-surface);
     margin: 0 0 14px;
   }
-  .page-sub {
+  .roadmap-sub {
     font-size: 14px;
     line-height: 1.65;
     color: var(--on-surface-variant);
-    margin: 0;
-    max-width: 480px;
-  }
-
-  .roadmap-page :global(.banner),
-  .roadmap-page :global(.rr-dispatch) { margin-bottom: 56px; }
-
-  /* ── Centred route intro ──────────────────────────────────────── */
-  .route-intro {
-    text-align: center;
-    max-width: 560px;
-    margin: 0 auto 28px;
-  }
-  .route-intro-title {
-    font-family: var(--font-serif);
-    font-weight: 400;
-    font-size: 22px;
-    line-height: 1.2;
-    color: var(--on-surface);
-    margin: 0 0 10px;
-  }
-  .route-intro-hint {
-    font-family: var(--font-sans);
-    font-size: 12px;
-    letter-spacing: var(--tracking-wide);
-    color: var(--on-surface-variant);
-    margin: 0;
-    line-height: 1.5;
+    margin: 0 auto;
+    max-width: 520px;
   }
 
   /* ── Legend ───────────────────────────────────────────────────── */
@@ -136,13 +97,13 @@ const items = getAllRoadmapItems()
     flex-shrink: 0;
   }
 
+  /* ── Dispatch banner (now below the route) ───────────────────── */
+  .roadmap-page :global(.rr-dispatch) { margin-top: 64px; }
+
   @media (max-width: 767px) {
     .roadmap-page { padding: 0 24px 64px; }
-    .page-header { padding-top: 24px; margin-bottom: 28px; }
-    .page-title { font-size: 36px; }
-    .roadmap-page :global(.banner),
-    .roadmap-page :global(.rr-dispatch) { margin-bottom: 40px; }
-    .route-intro { margin-bottom: 22px; }
-    .route-intro-title { font-size: 19px; }
+    .roadmap-header { padding-top: 24px; margin-bottom: 32px; }
+    .roadmap-title { font-size: 36px; }
+    .roadmap-page :global(.rr-dispatch) { margin-top: 48px; }
   }
 </style>