# Split registry hero with a feature card and a framed analytics console

> Marketing hero for a shadcn registry or dev tool: a 'Meet 485+ PRO Blocks' pill over a two-tone headline, a lede with 'Start with Cursor' and 'Read Docs' calls to action, and a content band pairing a three-cell feature card with a 4:3 analytics console rendered as live markup on a prismatic backdrop. Uses ReUI Badge, IconTile, shadcn Button, Card and Table. 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-11).

- Page, with a preview: https://shadcn.exchange/r/reui/hero-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/hero-11-light-114373bdcf79b389.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-11

## Dependencies

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

## Notes from the registry

## Purpose
A conversion hero for a component registry, MCP-native product, or developer tool. The header band carries the pitch and the two calls to action; the content band below pairs a feature card that spells out the value with a framed analytics console that gives the surface its product evidence.

## Best Fit
Top of a marketing page for a shadcn registry, agent platform, or design-system product. The three feature cells read as a capability list, 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 header band and the content band.
- `components/data.tsx` holds the three feature cells (icon, title, body); keep the lead cell `featured` so it takes the primary tile and tinted surface.
- `components/app-frame.tsx` draws the analytics console as one `role="img"` on a 1400-wide canvas that scales to fill its frame, with ambient chart motion that respects reduced motion.
- `components/frame-backdrop.tsx` draws the prismatic backdrop the console stands on.

## LLM Guidance
The header and content bands wrap to a single column below the card's min width, so the block is safe in narrow containers. Colors are semantic: the badge, tiles, and buttons follow the active theme, while the framed console and its backdrop are fixed art that holds its color in both themes. Swap the copy in `hero.tsx` and the cells in `data.tsx`; the console content lives in the `KPIS`, `ORDERS`, and `NAV_ITEMS` arrays inside `app-frame.tsx`.