# Centered registry hero with a brand cloud and a framed analytics console

> Conversion hero for a shadcn registry or MCP-native dev tool: a 'Meet 485+ Blocks in ReUI Pro' pill over a two-tone headline, a lede with 'Explore Blocks' and 'Choose Plan' calls to action, a single-row brand cloud of real ReUI wordmarks (Vercel, n8n, Supabase, Stripe, GitHub, OpenAI, Bolt, PayPal), and a wide crew-coverage console rendered as live markup on an azure field. Uses ReUI Badge, IconTile, shadcn Button, Card, Table, Progress and Avatar. For landing pages, registry marketing and SaaS heroes.

A paid shadcn/ui block sold by the [@reui](https://reui.io/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/hero-12).

- Page, with a preview: https://shadcn.exchange/r/reui/hero-12
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/hero-12-light-4377007a4cbb1e3b.png
- Listed: 2026-10-13

## Buy and install

@reui sells this block, and its code is not on shadcn.exchange. Buy it from the registry, which installs it for those who have: https://shadcn.exchange/out/reui/hero-12

## Dependencies

- npm packages: `cn`
- Registry items: `@reui/badge`, `@reui/icon-tile`, `avatar`, `button`, `card`, `item`, `kbd`, `progress`

## Notes from the registry

## Purpose
A conversion hero for a component registry, MCP-native product, or developer tool. The centred copy column carries the pitch and the two calls to action; the brand cloud below it supplies social proof from recognizable wordmarks; the framed console gives the surface its product evidence.

## Best Fit
Top of a marketing page for a shadcn registry, agent platform, or design-system product. The brand row reads as a trust bar, and the console reads as a real screen rather than decoration.

## Main Pieces
- `page.tsx` renders the section edge to edge.
- `components/hero.tsx` composes the copy column, the brand cloud, and the framed console.
- `components/data.tsx` holds the brand cloud as `HERO_BRANDS`; every entry is a real ReUI wordmark from `components/ui/svgs`, and marks whose ink is baked in ship a light/dark pair so only the matching one shows.
- `components/app-frame.tsx` draws the crew-coverage console as one `role="img"` on a fixed 1440 by 900 canvas, with ambient chart motion that respects reduced motion. Content lives in the `KPIS`, `CREWS`, `ACTIONS` and `NAV_ITEMS` arrays.
- `components/frame-backdrop.tsx` draws the azure field the console stands on as layered CSS gradients, so the block ships no external art.

## LLM Guidance
The copy column, brand cloud, and framed console stack in a single column at every width, so the block is safe in narrow containers. Colors are semantic - the badge, buttons, and headline follow the active theme - while the framed console and its azure backdrop are fixed art that hold their color in both themes. Swap the copy in `hero.tsx`, the wordmarks in `data.tsx` (keep each as a light/dark pair), and the console content in the arrays inside `app-frame.tsx`.