# Use Case Page

## Essence

Detail page for one agentic use-case.

`Use Case Page` explains what was built, what it solves, and how it works by reusing the same reading blocks as Article Page.

## Hook

Use when a visitor opens one concrete use-case from the homepage or use-cases index.

## Internal Rules

- Owns one use-case only.
- Uses `Article Header` for metadata, title, and tags.
- Uses `Rich Text` for the main explanatory sections.
- Shows metadata, title, summary, tags, and explanatory sections when source data is available.
- Design System previews must pass metadata to `Use Case Page` so the reused `Article Header` is tested in its full visual state.
- Renders the four-section structure as `Rich Text Heading` plus `Rich Text Paragraph` blocks: `What it is`, `What it solves`, `How it works`, and `Why it matters`.
- Uses `topSpacing="none"` on the first `Rich Text Heading` so the first section does not create a second large gap after `Article Header`.
- Do not create local use-case heading/body CSS for these sections; change the relevant Rich Text child component instead.
- Route-level use-case pages must map Wiki Markdown into Rich Text child components before passing slot content into `Use Case Page`; never pass raw `MarkdownBody` or local presentation overrides.
- The full Wiki body must be preserved. Mapping changes presentation, not content ownership.
- Uses long-form use-case copy, not thumbnail fields.
- Main explanatory body text flows through Rich Text presentation tokens.
- Does not render workflow preview images, visual stubs, screenshots, or code-native visuals on the detail page; those belong to `Use Case Card`, `Use Case Hero`, and `Use Cases Index Page`.
- Composes `Related Use Cases` below the main text when related use-cases are available.
- Reads like a use-case detail article, not a standalone marketing landing page.

## Use When

- Rendering `/use-cases/[slug]/`.

## Do Not Use When

- Rendering notes/articles.
- Rendering homepage use-case cards.
- Rendering a generic project page without a concrete agentic use-case.

## Code Paths

- `packages/design-system/src/components/UseCasePage.astro`
- `packages/design-system/src/components/ArticleHeader.astro`
- `packages/design-system/src/components/RichText.astro`
- `packages/design-system/src/components/RichTextHeading.astro`
- `packages/design-system/src/components/RichTextParagraph.astro`
- `packages/design-system/src/components/RelatedUseCases.astro`