# Console-First Waitlist block

> Split cloud platform hero with a pointer-tilted crew console on a black frame

Conversion hero for a cloud platform: Azure badge, two-tone headline, email capture with an lg Join button, and proof lines beside a product frame whose crew coverage console is live markup with ambient chart motion, tilted in 3D by the pointer. Uses ReUI Badge, IconTile, shadcn Card, Progress, InputGroup and the motion library. For landing page, SaaS hero, product screenshot.

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

## Best for

A crew coverage console on a dark wave photo placed before the copy, beside an @ email waitlist that swaps to a confirmation

## Agent notes

- `handleSubmit` only sets `joined` to swap in You are on the list; the `email` value is never sent, so post it to your waitlist
- Replace the sample crew data in `COVERAGE_ROWS`, `QUEUE_ITEMS`, `KPIS` and `DEMAND_DAYS`; none of it is wired to a backend
- `PROOF_POINTS` holds Azure native and Enterprise ready, and `AzureMark` is the badge logo; swap both for your own platform

## When not to use

- A closing band lower on the page that asks for one email: use [Work Email CTA](https://web.dev.reui.io/blocks/marketing/cta/cta-3.md) (`get_block("cta-3")`)

## Install

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

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