# Waitlist Hero block

> Cloud platform hero with inline email capture and a live analytics console

Conversion hero for a cloud or infrastructure product: brand badge, two-tone headline, an email capture that confirms in place, and two proof points beside a 4:3 frame whose analytics console is live markup with ambient chart motion on a drawn bloom backdrop. Uses ReUI Badge, IconTile, shadcn InputGroup, Card, Table. For landing page, SaaS hero, waitlist signup.

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

## Best for

Copy first, then an @ email waitlist that confirms in place, beside a revenue and order queue console on a drawn blue gradient

## Agent notes

- The `onSubmit` handler only calls `setJoined`, so the `email` state is never sent anywhere; post it to your waitlist
- Replace the sample Acme figures in `KPIS`, `ORDERS` and `MIX_DAYS`; the console is one labelled image with nothing wired
- `HERO_PROOF_POINTS` and the `AzureMark` badge name Azure; change both when your platform is another cloud

## When not to use

- A newsletter signup band that shows subscriber avatars and no product console: use [Newsletter CTA](https://web.dev.reui.io/blocks/marketing/cta/cta-1.md) (`get_block("cta-1")`)
- A working conversion report with an area chart, a segment mix and real figures: use [Activation Funnel](https://web.dev.reui.io/blocks/solutions/analytics/solution-analytics-3.md) (`get_block("solution-analytics-3")`)

## Install

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

## 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.