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.
