# Homepage Hero

## Essence

Homepage opening block for the Post-AI Systems brand.

`Homepage Hero` introduces the site through a concise brand statement rather than through a personal bio or service pitch.

## Hook

Use at the top of the public homepage to establish the public premise:

`Post-AI Systems is a study of software development with AI agents, where workflows, artifacts, and decisions become part of the system itself.`

## Internal Rules

- Uses `Heading` for the H1 statement.
- Does not render a subtitle by default.
- Optional subtitle/explanation copy is allowed only when passed explicitly.
- Owns only the hero block, not the full homepage layout.
- Consumes `--spacing-block-*` for internal spacing so the hero can span full width while keeping readable content padding.
- Uses an owner-approved exception: top padding is `--spacing-block-top * 2` to give the opening statement more breathing room. Do not remove this exception when adjusting hero height.
- Uses an owner-approved exception: bottom padding is `--spacing-block-bottom * 2` so the hero breathes symmetrically after the opening statement.
- On `mobile` and `tablet`, fills the available browser height under the header: viewport height minus current header offset.
- On `mobile` and `tablet`, vertically centers the heading and down-arrow cue as one hero content group.
- On `desktop` and `ultra-wide`, wraps its content height.
- On `mobile` and `tablet`, renders a large black down arrow under the heading as a scroll cue.
- Limits the H1 statement to `28ch` for a deliberate editorial hero measure.
- Does not own homepage section order, page shell, or full-page spacing.
- Standalone Design System preview must simulate its mobile breakpoint behavior directly, not only through `Home Page` preview wrappers.

## Use When

- Building the Post-AI Systems homepage.
- The page needs the agreed Calm Heresy opening.
- The content should start with a brand premise rather than a self-introduction.

## Do Not Use When

- A page needs a generic marketing hero.
- A section needs the homepage article block; use `Article Hero`.
- The content should introduce Dmitrij directly.
- The hero needs CTAs; put navigation in a separate component or section instead.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `question` | string | H1 statement text. |
| `explanation` | string | Optional supporting subtitle. Omit by default. |

## Default Content

- Question: `Post-AI Systems is a study of software development with AI agents, where workflows, artifacts, and decisions become part of the system itself.`
- Explanation: omitted by default.

## Accessibility Notes

- The statement is rendered as the page-level H1 when used at the top of the homepage.
- The H1 measure is constrained to keep the long statement readable and intentional.

## Related Components And Patterns

- `Heading`: renders the H1 question.
- `Home Page`: parent composition.
- `Article Hero`: next homepage block after the hero.
- `Article Card`: current homepage note teaser card.

## Code Paths

- `packages/design-system/src/components/HomepageHero.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`
- `apps/portfolio-site/src/pages/design-system/essences/[slug].md.ts`