Adds the marketing About, How it works, and Use cases experiences (index, detail, and completed-rule views) aligned with Figma, plus supporting components, copy, assets, and tests. Also fixes create-flow save progress after magic-link sign-in, lets users edit the document title on final review, and adds an API to duplicate a use-case template into a signed-in user’s draft.
Changes
Marketing routes
/about — About page with AboutHeader, stats, book CTA, quote, and related sections (messages/en/pages/about.json).
/how-it-works — Guide page with decorative shapes, TripleStep, PageHeader, and localized copy.
/use-cases — Index with case-study cards (Mutual Aid Colorado, Food Not Bombs Boulder, Boulder County Street Medics), org logos, group vectors, rule stack, and related articles.
/use-cases/[slug] — Detail pages per case study.
/use-cases/[slug]/rule — Read-only completed-rule view under (marketing-case-study) with duplicate-into-create CTA.
/learn — Updated layout and refreshed blog thumbnail SVGs (horizontal / vertical / section / tag variants).
Components & design system
New or extended: PageHeader, AboutHeader, TripleStep, TripleTextBlock, CaseStudy, Stat / Stats, Groups, Book, UseCasesOrgs, layout Accordion, Shapes, refactored ContentBanner (container/view split), enhanced QuoteBlock, Rule card, RelatedArticles, ContentThumbnailTemplate, ContentContainer.
Marketing chrome: navigationChromelessPath for case-study rule routes; footer/top nav tweaks.
Create flow & auth
Save progress bug — PostLoginDraftTransfer, magic-link request/verify routes, and draft hydration/payload building.
Final review — FinalReviewTitleEditModal, title chip presets, normalizePublishedDocumentForEdit, publish/draft payload updates.
CreateFlowTopNav — Expanded actions and tests.
API & data
POST /api/use-cases/[slug]/duplicate — Auth-required; clones synthetic completed-rule JSON into a user draft (DB required).
/use-cases/mutual-aid-colorado/rule (chromeless; duplicate CTA when signed in)
/learn — blog cards and thumbnails
Create flow: sign in via magic link with draft in progress → confirm draft transfers and save progress persists; on final review, open title edit modal and publish.
Signed in: Duplicate template from a use-case completed-rule page → lands in create flow with expected draft.
Verification:
npx tsc --noEmit
npx vitest run
npx next build
Optional: npm run storybook for new section stories; npm run e2e for critical journeys.
Notes
About book CTA uses a stub href: "#" until download URL is wired (messages/en/pages/about.json comment).
Use-case completed rules are synthetic JSON in messages, not live DB documents, until backend sync is fully enabled.
Duplicate API returns 503 when DATABASE_URL is unset (matches other API routes).
Removed legacy building-community-trust blog post and old Content_Thumbnail SVGs in favor of per-post blog assets.
## Overview
Adds the marketing **About**, **How it works**, and **Use cases** experiences (index, detail, and completed-rule views) aligned with Figma, plus supporting components, copy, assets, and tests. Also fixes create-flow **save progress** after magic-link sign-in, lets users **edit the document title on final review**, and adds an API to **duplicate a use-case template** into a signed-in user’s draft.
## Changes
### Marketing routes
- **`/about`** — About page with `AboutHeader`, stats, book CTA, quote, and related sections (`messages/en/pages/about.json`).
- **`/how-it-works`** — Guide page with decorative shapes, `TripleStep`, `PageHeader`, and localized copy.
- **`/use-cases`** — Index with case-study cards (Mutual Aid Colorado, Food Not Bombs Boulder, Boulder County Street Medics), org logos, group vectors, rule stack, and related articles.
- **`/use-cases/[slug]`** — Detail pages per case study.
- **`/use-cases/[slug]/rule`** — Read-only completed-rule view under `(marketing-case-study)` with duplicate-into-create CTA.
- **`/learn`** — Updated layout and refreshed blog thumbnail SVGs (horizontal / vertical / section / tag variants).
### Components & design system
- New or extended: `PageHeader`, `AboutHeader`, `TripleStep`, `TripleTextBlock`, `CaseStudy`, `Stat` / `Stats`, `Groups`, `Book`, `UseCasesOrgs`, layout `Accordion`, `Shapes`, refactored `ContentBanner` (container/view split), enhanced `QuoteBlock`, `Rule` card, `RelatedArticles`, `ContentThumbnailTemplate`, `ContentContainer`.
- Marketing chrome: `navigationChromelessPath` for case-study rule routes; footer/top nav tweaks.
### Create flow & auth
- **Save progress bug** — `PostLoginDraftTransfer`, magic-link request/verify routes, and draft hydration/payload building.
- **Final review** — `FinalReviewTitleEditModal`, title chip presets, `normalizePublishedDocumentForEdit`, publish/draft payload updates.
- **`CreateFlowTopNav`** — Expanded actions and tests.
### API & data
- **`POST /api/use-cases/[slug]/duplicate`** — Auth-required; clones synthetic completed-rule JSON into a user draft (DB required).
- Prisma: `PublishedDocument` schema tweak + migration.
- Lib helpers: `useCaseCompletedRule`, `useCaseSyntheticPost`, `howItWorksSyntheticPost`, `useCaseTemplateDuplicate`.
### Content & assets
- Blog: new/updated posts (`how-chaos-concentrates-control`, `digital-mediation-and-the-death-of-nuance`, `avoiding-burnout-sustainability-in-the-ruins`, etc.) with matching SVG assets under `public/content/blog/`.
- Case-study and decorative SVGs under `public/assets/`.
- Large message bundles: `useCases.json`, `useCasesDetail.json`, `useCasesCompletedRules.json`, metadata entries.
- Docs: `figma-component-registry.md`, `content-creation.md`.
### Tests & Storybook
- Page tests: about (via home/nav), how-it-works, use-cases index/detail/completed-rule, learn.
- Component/unit tests for new sections and create-flow paths; E2E touch-ups.
- New/updated stories for CaseStudy, Stats, Groups, PageHeader, AboutHeader, TripleStep, Accordion, ContentBanner, etc.
## Screenshots
<img width="424" alt="Screenshot 2026-05-20 at 11.06.10 PM.png" src="attachments/97744709-0bbe-47e4-9cb6-055b2463cb5c">
<img width="424" alt="Screenshot 2026-05-20 at 11.06.26 PM.png" src="attachments/ea2fb630-7ee5-4e48-a51c-bfd7f8e87cf5">
<img width="424" alt="Screenshot 2026-05-20 at 11.06.48 PM.png" src="attachments/53a6ee24-40f6-496a-bdef-e13bf8b435ad">
<img width="424" alt="Screenshot 2026-05-20 at 11.07.12 PM.png" src="attachments/6fbaf94a-668e-4144-a53e-1ab85efe6483">
## How to Test
1. `npm install` (if needed), ensure Postgres + env per `CONTRIBUTING.md` for duplicate API and create-flow save.
2. `npm run dev` and visit:
- `/about`
- `/how-it-works`
- `/use-cases`
- `/use-cases/mutual-aid-colorado` (and `food-not-bombs`, `boulder-county-street-medics`)
- `/use-cases/mutual-aid-colorado/rule` (chromeless; duplicate CTA when signed in)
- `/learn` — blog cards and thumbnails
3. Create flow: sign in via magic link with draft in progress → confirm draft transfers and **save progress** persists; on final review, open title edit modal and publish.
4. Signed in: **Duplicate template** from a use-case completed-rule page → lands in create flow with expected draft.
5. Verification:
```bash
npx tsc --noEmit
npx vitest run
npx next build
```
6. Optional: `npm run storybook` for new section stories; `npm run e2e` for critical journeys.
## Notes
- About **book** CTA uses a stub `href: "#"` until download URL is wired (`messages/en/pages/about.json` comment).
- Use-case completed rules are **synthetic JSON** in messages, not live DB documents, until backend sync is fully enabled.
- Duplicate API returns **503** when `DATABASE_URL` is unset (matches other API routes).
- Removed legacy `building-community-trust` blog post and old `Content_Thumbnail` SVGs in favor of per-post blog assets.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Overview
Adds the marketing About, How it works, and Use cases experiences (index, detail, and completed-rule views) aligned with Figma, plus supporting components, copy, assets, and tests. Also fixes create-flow save progress after magic-link sign-in, lets users edit the document title on final review, and adds an API to duplicate a use-case template into a signed-in user’s draft.
Changes
Marketing routes
/about— About page withAboutHeader, stats, book CTA, quote, and related sections (messages/en/pages/about.json)./how-it-works— Guide page with decorative shapes,TripleStep,PageHeader, and localized copy./use-cases— Index with case-study cards (Mutual Aid Colorado, Food Not Bombs Boulder, Boulder County Street Medics), org logos, group vectors, rule stack, and related articles./use-cases/[slug]— Detail pages per case study./use-cases/[slug]/rule— Read-only completed-rule view under(marketing-case-study)with duplicate-into-create CTA./learn— Updated layout and refreshed blog thumbnail SVGs (horizontal / vertical / section / tag variants).Components & design system
PageHeader,AboutHeader,TripleStep,TripleTextBlock,CaseStudy,Stat/Stats,Groups,Book,UseCasesOrgs, layoutAccordion,Shapes, refactoredContentBanner(container/view split), enhancedQuoteBlock,Rulecard,RelatedArticles,ContentThumbnailTemplate,ContentContainer.navigationChromelessPathfor case-study rule routes; footer/top nav tweaks.Create flow & auth
PostLoginDraftTransfer, magic-link request/verify routes, and draft hydration/payload building.FinalReviewTitleEditModal, title chip presets,normalizePublishedDocumentForEdit, publish/draft payload updates.CreateFlowTopNav— Expanded actions and tests.API & data
POST /api/use-cases/[slug]/duplicate— Auth-required; clones synthetic completed-rule JSON into a user draft (DB required).PublishedDocumentschema tweak + migration.useCaseCompletedRule,useCaseSyntheticPost,howItWorksSyntheticPost,useCaseTemplateDuplicate.Content & assets
how-chaos-concentrates-control,digital-mediation-and-the-death-of-nuance,avoiding-burnout-sustainability-in-the-ruins, etc.) with matching SVG assets underpublic/content/blog/.public/assets/.useCases.json,useCasesDetail.json,useCasesCompletedRules.json, metadata entries.figma-component-registry.md,content-creation.md.Tests & Storybook
Screenshots
How to Test
npm install(if needed), ensure Postgres + env perCONTRIBUTING.mdfor duplicate API and create-flow save.npm run devand visit:/about/how-it-works/use-cases/use-cases/mutual-aid-colorado(andfood-not-bombs,boulder-county-street-medics)/use-cases/mutual-aid-colorado/rule(chromeless; duplicate CTA when signed in)/learn— blog cards and thumbnailsnpm run storybookfor new section stories;npm run e2efor critical journeys.Notes
href: "#"until download URL is wired (messages/en/pages/about.jsoncomment).DATABASE_URLis unset (matches other API routes).building-community-trustblog post and oldContent_ThumbnailSVGs in favor of per-post blog assets.