# Split Header Hero block

> Split-header hero with a product console on a dark wave field

Editorial marketing hero for a shadcn registry or MCP developer tool: an 'Explore 495+ ReUI Blocks' announcement pill over a two-tone 'Design-ready shadcn / MCP native' headline on the left, a curated-registry lede with 'Buy Now' and 'Explore' calls to action on the right, both bottom-aligned, above a wide 16:10 framed product console standing on a mirrored dark wave field. The console is a crew-coverage operations dashboard rebuilt as real markup, with a KPI strip, a coverage review table, an action queue, and a demand-mix chart, scaled as one screenshot with subtle ambient motion. Uses ReUI Badge, IconTile, shadcn Card, Table, Progress, Item, Avatar and Button, and portable IconPlaceholder icons. For landing pages, registry marketing, and developer-tool heroes.

- Type: Pro block
- Category: [Hero](https://web.dev.reui.io/blocks/marketing/hero.md)
- Page: https://web.dev.reui.io/blocks/marketing/hero/hero-14
- MCP: `get_block("hero-14")`
- Built with: Avatar, Badge, Button, Card, Icon Tile, Item, Kbd, Progress
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A split header with the headline left and the actions right, bottom aligned over a full width crew console on a dark wave photo

## Agent notes

- `COVERAGE_ROWS`, `QUEUE_ITEMS` and `KPIS` in data.tsx feed the crew coverage `AppFrame`; replace the sample numbers with your product
- `AppFrame` is one image to assistive tech with a fixed aria-label about crew coverage; rewrite the label when you swap the data
- `BACKDROP_SRC` is a remote Unsplash photo requested at 1600 by 1335 pixels; swap it for your own art

## When not to use

- A copy column set beside moving product cards, not a header over one shot: use [Built-to-Ship Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-16.md) (`get_block("hero-16")`)
- A centered stack of pill, headline and actions, with a brand row above the console: use [Brand Cloud Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-12.md) (`get_block("hero-12")`)

## Install

```bash
npx shadcn@latest add @reui/hero-14
```

## About Hero blocks

### When to use

- The first screen of a landing page: a headline, a lede and the actions a visitor takes first
- A launch pitch beside the product itself, as a rebuilt console, an isometric scene or a carousel
- A waitlist signup that collects an email above the fold, or trust shown by ratings and logos

### When not to use

- A working sidebar layout for the signed in product, not a decorative picture of one: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- A closing band lower on the page that repeats one signup or upgrade ask: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)
- A storefront opener that sells goods, with prices, a product mosaic or a cart: use the [Shop Hero blocks](https://web.dev.reui.io/blocks/ecommerce/shop-hero.md)

### Agent notes

- `Hero` takes no props and renders the page `h1` from copy written inline in components/hero.tsx; keep it the only h1 on the page
- No call to action reaches a route or backend: links point at an `href` hash, form submits only set local state and the rest have no handler
- Each section sets its own `px-4` and `py-12` padding and a `max-w-7xl` track; strip them when your layout already pads content

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.