Hero 206 block design & features
Hero206 is a centered hero built with shadcn/ui, with a stacked header, wide muted paragraph, and an outline badge that pairs a tight avatar group with a short trusted-user line. Beneath that sits a detailed browser chrome mockup: colored window dots, optional navigation affordances, a URL field, and a large preview that swaps desktop and mobile dashboard images. A light gradient at the base of the preview ties the frame back into the section background.
The page background stays in theme colors while the mockup uses a muted toolbar bar, hairline outer border, and generous rounding on the content area. The badge subtly widens its inner spacing on hover. Typography is loud in the headline thanks to uppercase Anton treatment and restrained sans for body copy.
This is a familiar product-marketing fold: proof adjacent to the pitch, then a product screenshot inside a device metaphor. It is moderately content-heavy because believable screenshots, URL strings, and avatar sources matter more than decorative chrome.
Narrow widths keep the same vertical order; the mockup switches to the mobile art inside the frame while the outer layout stays centered.