Hero 206 block design & features
Hero206 is a centered hero built with shadcn/ui, with a stacked header, medium-weight display headline with tight tracking, and a muted supporting paragraph. A row of company logos sits above a detailed browser chrome mockup with colored window dots, 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. Logos use reduced opacity with dark-mode invert for SVG marks. Typography follows a product SaaS rhythm similar to tabbed heroes but with semibold weight on the title instead of bold.
This is a familiar product-marketing fold: logos for social proof, then a product screenshot inside a device metaphor. It is moderately content-heavy because believable screenshots, URL strings, and logo assets 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.