refactor(public): shared fluid titles and examples hub prompts (batch 6)

Add public-type title tokens, drop email-broadcast tip measure pins, fluid ResourcesSourcesList heading, and examples footer catalog cards.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: hackmods

docs/audit/fluid-ui-migration-checklist.md

@@ -1,7 +1,8 @@
 # Fluid UI migration checklist (in-scope)
 
-**Status:** Active — Batches 1–5 shipped 2026-09-08; pause for approval before Batch 6.  
+**Status:** Active — Batches 1–6 shipped 2026-09-08; pause for approval before Batch 7.  
 **Standards:** [`.cursor/rules/guide-layout-standards.mdc`](../../.cursor/rules/guide-layout-standards.mdc), [`responsive-layouts.mdc`](../../.cursor/rules/responsive-layouts.mdc), [`public-marketing-ux.mdc`](../../.cursor/rules/public-marketing-ux.mdc).  
+**Shared type tokens:** [`src/lib/constants/public-type.ts`](../../src/lib/constants/public-type.ts).  
 **Out of scope:** Officer Learning dark shell; `/privacy` `/security` `/accessibility`; canvas/`ToolEditorLayout` interiors; PDF export; Hub `/app/**` + Portal `/portal/**` (deferred product decision).
 
 ## Done (reference)
@@ -10,8 +11,7 @@
 - [x] `/guide` Blueprint (spotlight + link clusters)
 - [x] `/guide/workshops`, workshop outlines, land-ack, social-media-plan
 - [x] Most playbook shells on `guide-ui` barrel (GB-001/008)
-- [x] Batch 1–2: all `fullScenario` playbooks except joint-committee (then Batch 3)
-- [x] Batch 3: joint-committee + running-meetings + bylaws
+- [x] Batches 1–6 (playbook scenarios, hubs, simple polish)
 
 ---
 
@@ -20,30 +20,19 @@
 | ID | Surface | Legacy signal | Target | Status |
 |----|---------|---------------|--------|--------|
 | S1 | `Steward101ModuleNav.tsx` | Raw `Callout` | `GuideCallout` | Done B4 |
-| S2 | `/guide/email-broadcast` | Inner prose pins in callouts | Rely on `GuideCallout` measure | |
+| S2 | `/guide/email-broadcast` | Inner prose pins in callouts | Rely on `GuideCallout` measure | Done B6 |
 | S3 | `/guide/union-boards` | `p.max-w-prose` inside accents | Drop redundant pins | Done B5 |
 | S4 | `/guide/website` CTAs only | `button-row max-w-lg` | `GuideActionRow` (keep `PartFrame`) | Done B4 |
-| S5 | `ResourcesSourcesList` heading | Rigid `text-xl` | Fluid clamp token | |
-| S6 | `/examples` title + footer prompts | Rigid h1; prose link dump | Fluid title; `GuideLinkCluster` | |
+| S5 | `ResourcesSourcesList` heading | Rigid `text-xl` | Fluid clamp token | Done B6 |
+| S6 | `/examples` title + footer prompts | Rigid h1; prose link dump | Fluid title; catalog cards | Done B6 |
 | S7 | `/updates` (`UpdatesContent`) | Rigid h1; raw Callout empty | Fluid title + marketing empty state | |
 | S8 | `/manifesto`, `/support`, `/feedback`, `/install`, `/assets` | Rigid page titles | Shared public title clamp | |
 
 ## Medium
 
 | ID | Surface | Legacy signal | Target | Status |
 |----|---------|---------------|--------|--------|
-| M1 | `/guide/bargaining` `fullScenario` | `li.max-w-prose` | `GuideOutlineStep` | Done B1 |
-| M2 | `/guide/crisis` `fullScenario` | same | same | Done B1 |
-| M3 | `/guide/strike` `fullScenario` | same | same | Done B2 |
-| M4 | `/guide/photo-consent` `fullScenario` | same | same | Done B2 |
-| M5 | `/guide/dfr` `fullScenario` | same | same | Done B1 |
-| M6 | `/guide/right-to-refuse` `fullScenario` | same | same | Done B2 |
-| M7 | `/guide/joint-committee` `fullScenario` | same | same | Done B3 |
-| M8 | `/guide/running-meetings` | Agenda/motion pins; narrow diagrams | Outline/bullet + `GuideWideFigure` | Done B3 |
-| M9 | `/guide/bylaws` | Committee steps + figure pins | Outline + `GuideWideFigure` | Done B3 |
-| M10 | `/guide/grievance-process` | Local `ForumFlowFigure` `max-w-prose` | `GuideWideFigure` | Done B4 |
-| M11 | `/guide/resources` | Hand-rolled link grids / middot explore | `GuideLinkCluster` / catalog | Done B5 |
-| M12 | `/guide/short-form` | `Card` editor grid; `max-w-md` figure | Catalog cards + `GuideWideFigure` | Done B5 |
+| M1–M12 | Playbooks / hubs (see prior batches) | various | guide-ui primitives | Done B1–B5 |
 | M13 | `/guides` catalog | Local `StartHerePanel`; sparse lists | Shared catalog + fluid title | |
 | M14 | `/tools` catalog | Duplicate start-here; sparse groups | Align with `/guides` | |
 | M15 | `/captions` | Rigid h1; Card templates | Fluid title + catalog pattern | |
@@ -61,12 +50,10 @@
 
 ## Batch plan
 
-1. ~~Batch 1~~ — M1/M2/M5 bargaining, crisis, dfr  
-2. ~~Batch 2~~ — M3/M4/M6 strike, photo-consent, right-to-refuse  
-3. ~~Batch 3~~ — M7/M8/M9 joint-committee, running-meetings, bylaws  
-4. ~~Batch 4~~ — M10 grievance-process + S1 Steward101ModuleNav + S4 website CTA  
-5. ~~Batch 5~~ — M11 resources + M12 short-form + S3 union-boards  
-6. **Batch 6 (next):** Simple polish S2/S5 + catalog titles S6–S8 subset, or complex C4 steward-playbooks  
-7. **Later:** M13–M16, C1–C3, C5
+1. ~~Batches 1–6~~ — playbook scenarios, hubs, simple polish through `/examples`  
+2. **Batch 7 (next):** S7 updates + S8 public titles (manifesto/support/feedback/install/assets) — 2–3 files  
+3. **Batch 8:** M13 `/guides` + M14 `/tools` catalog align  
+4. **Batch 9:** M15 captions + M16 onboarding  
+5. **Batch 10+:** Complex C1–C5
 
 Pause for approval between batches.

src/app/[locale]/examples/page.tsx

@@ -11,7 +11,12 @@ import {
 import { ExampleCard } from "@/components/examples/ExampleCard";
 import { ComposedPageLayout } from "@/components/layout/ComposedPageLayout";
 import { WorkshopDemoPath } from "@/components/comms/WorkshopDemoPath";
+import {
+  GuideCatalogCard,
+} from "@/components/comms/GuideSurfaces";
+import { guideCtaClassSm } from "@/components/comms/guideCtaClasses";
 import { useWorkshopDemoSession } from "@/hooks/use-workshop-demo-session";
+import { PUBLIC_PAGE_TITLE_CLASS } from "@/lib/constants/public-type";
 import { cn } from "@/lib/utils";
 
 function ExampleFilters({
@@ -97,9 +102,7 @@ export default function ExamplesPage() {
         <WorkshopDemoPath variant="trail" className="mb-4" />
       ) : null}
       <header className="max-w-3xl">
-        <h1 className="text-2xl font-bold tracking-tight text-opseu-dark md:text-3xl">
-          {t("title")}
-        </h1>
+        <h1 className={PUBLIC_PAGE_TITLE_CLASS}>{t("title")}</h1>
         <p className="mt-2 text-gray-600">{t("subtitle")}</p>
       </header>
 
@@ -113,24 +116,26 @@ export default function ExamplesPage() {
             ))}
           </div>
 
-          <p className="mt-10 max-w-prose text-sm text-gray-600">
-            {t("planPrompt")}{" "}
-            <Link
-              href="/guide/social-media-plan"
-              className="font-medium text-opseu-blue underline underline-offset-2 hover:text-opseu-dark"
-            >
-              {t("planLink")}
-            </Link>
-          </p>
-          <p className="mt-3 max-w-prose text-sm text-gray-600">
-            {t("captionsPrompt")}{" "}
-            <Link
-              href="/captions"
-              className="font-medium text-opseu-blue underline underline-offset-2 hover:text-opseu-dark"
-            >
-              {t("captionsLink")}
-            </Link>
-          </p>
+          <ul className="mt-10 grid list-none gap-6 p-0 sm:grid-cols-2">
+            <GuideCatalogCard
+              title={t("planLink")}
+              body={t("planPrompt")}
+              action={
+                <Link href="/guide/social-media-plan" className={guideCtaClassSm}>
+                  {t("planLink")} →
+                </Link>
+              }
+            />
+            <GuideCatalogCard
+              title={t("captionsLink")}
+              body={t("captionsPrompt")}
+              action={
+                <Link href="/captions" className={guideCtaClassSm}>
+                  {t("captionsLink")} →
+                </Link>
+              }
+            />
+          </ul>
         </div>
 
         <aside className="hidden lg:block print:hidden">

src/app/[locale]/guide/email-broadcast/page.tsx

@@ -116,7 +116,7 @@ export default async function EmailBroadcastGuidePage({
         </GuideTipGrid>
         <GuideCallout className="mt-5">
           <p className="font-semibold text-opseu-dark">{t("tipLabel")}</p>
-          <p className="mt-1 max-w-prose">{t("when.tip")}</p>
+          <p className="mt-1">{t("when.tip")}</p>
         </GuideCallout>
       </GuideSection>
 

src/components/comms/GuideLayout.tsx

@@ -7,6 +7,7 @@ import {
   type GuideCompositionPreset,
   type PageComposition,
 } from "@/lib/constants/page-composition";
+import { PUBLIC_PAGE_TITLE_CLASS } from "@/lib/constants/public-type";
 import {
   GuideRelatedLinkList,
   type GuideRelatedLink,
@@ -84,7 +85,7 @@ export function GuideLayout({
 
   const headerBlock = (
     <header className={hub ? "max-w-3xl" : undefined}>
-      <h1 className="text-[clamp(1.5rem,1.25rem+1vw,1.875rem)] font-bold tracking-tight text-opseu-dark">
+      <h1 className={PUBLIC_PAGE_TITLE_CLASS}>
         {title}
       </h1>
       {subtitle && (

src/components/comms/ResourcesSourcesList.tsx

@@ -10,6 +10,8 @@ import {
 } from "@/lib/constants/comms-sources";
 import { useBrandStore } from "@/store/brand-store";
 import { GuideAccentBlock } from "@/components/comms/GuideOutline";
+import { PUBLIC_SECTION_TITLE_CLASS } from "@/lib/constants/public-type";
+import { cn } from "@/lib/utils";
 
 const categoryOrder: CommsSourceCategory[] = [
   "branding",
@@ -34,8 +36,10 @@ export function ResourcesSourcesList() {
 
   return (
     <div className="mt-10">
-      <h2 className="text-xl font-bold text-opseu-dark">{t("allSources.title")}</h2>
-      <p className="mt-2 text-gray-600">{t("allSources.intro")}</p>
+      <h2 className={cn(PUBLIC_SECTION_TITLE_CLASS)}>
+        {t("allSources.title")}
+      </h2>
+      <p className="mt-2 max-w-prose text-gray-600">{t("allSources.intro")}</p>
       {showScopeNote && (
         <p className="mt-2 text-sm text-gray-600">
           {t("allSources.scopedNote")}{" "}

src/lib/constants/public-type.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared fluid type tokens for public reading / catalog pages.
+ * Keep GuideLayout / Home section titles in sync with these classes.
+ */
+export const PUBLIC_PAGE_TITLE_CLASS =
+  "text-[clamp(1.5rem,1.25rem+1vw,1.875rem)] font-bold tracking-tight text-opseu-dark";
+
+export const PUBLIC_SECTION_TITLE_CLASS =
+  "text-[clamp(1.25rem,1.1rem+0.6vw,1.5rem)] font-bold text-opseu-dark";
+
+export const PUBLIC_CARD_TITLE_CLASS =
+  "text-[clamp(1.125rem,1.05rem+0.35vw,1.25rem)] font-bold text-opseu-dark";