# LandingHero

> Above-the-fold landing band: optional eyebrow, display title, lead, CTA cluster, a note and proof row under the actions, and a media slot.

```ts
import { LandingHero } from "@sdxc/ui/landing";
```

Renders the eyebrow, display title, lead, actions, note and proof in the hero
rhythm — 24px, 20px, 32px and 12px between them — and places the media below,
beside, or behind that copy. The title starts the outline at `level`, and
headings in `below` sit one level under it.

## Examples

```tsx
<LandingHero
	eyebrow={t("hero.news")}
	title={t("hero.title")}
	description={t("hero.lead")}
	actions={<Button color="brand">{t("hero.cta")}</Button>}
	note={t("hero.note")}
	media={<ProductFrame stage="panel">{shot}</ProductFrame>}
/>
```

```tsx
<LandingHero mediaPlacement="end" title={t("hero.title")} media={<Device />} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `level?` | `HeadingLevel` | Heading level of the display title. Defaults to the ambient `HeadingScope`'s level, or `1` on a bare page, so the hero owns the page's only `<h1>`. |
| `align?` | `Align` | Copy alignment. Defaults to DEFAULT_ALIGN. |
| `tone?` | `Tone` | Band fill. Defaults to DEFAULT_TONE. |
| `mediaPlacement?` | `"end" \| "below" \| "background"` | Media placement. Defaults to DEFAULT_MEDIA_PLACEMENT. |
| `eyebrow?` | `RemixNode` | Short announcement above the title. |
| `eyebrowVariant?` | `EyebrowVariant` | Eyebrow look. Defaults to DEFAULT_EYEBROW_VARIANT. |
| `eyebrowHref?` | `string` | Turns the eyebrow into a link with a trailing arrow that nudges on hover. |
| `title` | `RemixNode` | Display headline; wrap a phrase in `AccentText` to mark it. |
| `description?` | `RemixNode` | Lead under the headline; `<strong>` fragments draw in the heading ink. |
| `actions?` | `RemixNode` | CTA controls, laid out in a CtaGroup that stacks on phones. |
| `release?` | `RemixNode` | A release pin under the actions, such as "v8.1 — released Oct 28", set as mono text on a brand-tinted chip; pass a link to make the pin clickable. |
| `entrance?` | `boolean` | Plays the load entrance: eyebrow, title, lead, actions and the rest rise in turn, and the media settles last. Visitors who ask for reduced motion see the hero at rest. |
| `note?` | `RemixNode` | One line of microcopy 12px under the actions ("No card required"). |
| `proof?` | `RemixNode` | Social proof under the actions and note, such as a row of marks. |
| `media?` | `RemixNode` | Product media: a framed screenshot, a rendered component, a device. |
| `backdrop?` | `RemixNode` | Decoration behind the media — rings or a glow — laid under it and hidden from assistive technology; pair it with `landingSlowSpin()` for motion that stops under reduced motion. |
| `below?` | `RemixNode` | Optional below-fold hook rendered under the main hero stack. |
| `parts?` | `PartsProps` | Per-part styling for eyebrow, title, lead, actions, and media. |

Also accepts everything in `Omit<
		LandingSection.Props,
		"children" | "align" | "tone" | "title" | "parts" | "level"
	>`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `MediaPlacement` | `"end" \| "below" \| "background"` | Where the media slot sits: under the copy at the full measure (text-led), beside it (product-led, where the media is taller than the copy), or as a faded background behind the statement. |