# Use Case Hero

## Essence

Homepage hero-style visual strip for built agentic use-cases.

`Use Case Hero` is the Home Page child component that shows a crown use-case and the latest built agentic use-cases.

## Hook

Use on the homepage before notes, so visitors see concrete systems before reading ideas.

## Internal Rules

- Uses `Use Case Item` in a dense portfolio-tile grid; `Use Case Item` owns the internal `Use Case Card` usage.
- Homepage rendering uses the `gallery` card variant and should visually read as an image-first portfolio strip.
- Belongs under `Home Page`, not as a standalone top-level page-template component.
- First tile is the manually selected crown use-case.
- Default layout: crown use-case spans 100% width; second row contains up to three latest use-cases, excluding the crown use-case.
- Ultra-wide layout: use a 12-column composition where the crown use-case spans 6 columns and latest use-cases occupy 2+2+2 columns beside it.
- Owns the tile dimensions through its grid; child cards and items must fill the grid cell instead of defining their own width or height.
- Runtime breakpoint rules must be mirrored by Design System preview breakpoint overrides, so mobile/tablet/desktop/ultra-wide switchers show the component state without relying on the real browser viewport.
- Latest tiles use half the height of the crown tile in the default layout; on mobile, latest tiles use a taller fixed `18rem` row to prevent longer summaries from being cropped in the one-column stack; on ultra-wide, latest tiles fill the same grid row height as the crown tile.
- Does not render a section title above the grid.
- Does not render an action link below the grid.
- Uses `Block Compact` spacing for its outer padding because it is a dense visual portfolio strip, not a long-form content block.
- Uses the same inter-item gap as `Card Grid`: `--space-4` by default/tablet and `--space-3` on mobile.
- Uses abstract use-cases in Design System preview.
- Does not own individual card content beyond passing use-case data.

## Use When

- Rendering the homepage use-case block.
- `Home Page` needs to show built systems before notes.

## Do Not Use When

- Rendering all use-cases as a page.
- Rendering a single use-case detail page.
- Rendering article or note cards.

## Code Paths

- `packages/design-system/src/components/UseCaseHero.astro`