Split marketing hero for a component registry: live-status badge with a success dot, two-tone headline, subtitle, Next.js and v0 capability rows, a primary and outline action pair, and a rebuilt analytics console floating on a drifting photographic backdrop, with full dark mode.
A conversion hero for a developer product whose proof is the product itself. The left column runs a live-status badge, a two-tone headline whose second line drops to muted ink, a subtitle, two capability rows, and a primary plus outline action pair. The right column is a rebuilt analytics console floating on the design's own photographic backdrop.
Top of a marketing page for a registry, component library, or template store that wants the interface visible above the fold. The capability rows carry stack compatibility as plain statements rather than as a logo wall, so they read as facts rather than as social proof.
page.tsx renders the section edge to edge.components/hero.tsx composes the section, the conversion column, and the layered right column. The frame is pinned to 4:3, and its two insets are cqw shares of the frame width rather than breakpoint steps, so the whole assembly scales as one piece.components/app-frame.tsx rebuilds the product shot as real markup (Card, Table, Item, Progress, Badge, IconTile, Avatar and Kbd), exposed to assistive tech as a single role="img" so no focusable control is planted inside decorative art.components/frame-backdrop.tsx draws the backdrop and owns its drift, requesting the design's own photograph from the Unsplash CDN.components/data.tsx holds the capability rows and their brand marks.The conversion column is a @container, so the headline scales with the column rather than the viewport. The headline's second line is text-muted-foreground; that two-tone split is the design's own emphasis and should survive a copy change.
The console is authored at a real desktop size (1400 x 1000) and scaled down as one piece, which is what makes it read as a screenshot; authoring it at final size forces type up to a ~23px desktop equivalent and the panels crowd. Retheming it means editing the PANEL constant and the paired dark: classes in app-frame.tsx rather than the block's tokens, because it stands on a photograph rather than on the page.
The backdrop is cropped to the frame's 4:3 by the rect parameter on its request URL, so it needs no runtime object-fit and transform stays free for the drift. Do not re-fit it; swap the whole URL if you change the art. All motion is CSS keyframes injected via <style> in the component that owns it, and every animation is killed by a prefers-reduced-motion rule. Swap HERO_CAPABILITIES for the real stack claims.
