Hero 311 block design & features
This block is a centered single-column hero built with shadcn/ui. An outline badge sits above a large headline and a muted supporting paragraph. Under the copy, three linked cards sit in a row. Each card stacks a square image over a title and a short description. A faint radial highlight occupies the upper right of the section.
The page stays light with dark text and generous vertical space. Cards use frosted, slightly translucent surfaces, hairline borders, and large rounded corners. On desktop the middle card sits lower than its neighbors, so the row reads as staggered rather than flat. The headline dominates the type scale. The section is static, with no entrance motion.
The look is modern and a bit premium without getting loud. The staggered card row is the distinctive move; the rest is a familiar centered marketing hero. Complexity is moderate and mixed: the layout is code-driven, but you need three real images and three card writeups for it to feel finished.
On narrow viewports the cards stack in one column and the middle-card offset goes away.