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.
