Shadcn UI Hero Block
Hero262 is a two-column about page hero with content on the left and stats on the right. The left column contains a large headline, a secondary subheading in muted text, and two paragraphs of body copy that are hidden on mobile. The right column displays four key metrics, each with a large value and label, arranged vertically. A dashed line separator divides the two columns.
The typography follows a clear hierarchy with the headline being the largest, the subheading slightly smaller in muted color, and body text in a comfortable reading size. Stats use large display-style numbers with tracking for emphasis. The overall color treatment is two-tone using foreground and muted-foreground. The dashed line accent provides visual separation without heavy borders.
This is a classic about page hero pattern with the mainline design system aesthetic. The stats sidebar adds credibility and visual interest while the body text provides context. The constrained max-width (max-w-5xl) keeps the content readable and well-proportioned.
On mobile, the layout stacks vertically with the stats below the text content. The body paragraphs are hidden on small screens to keep the mobile view concise. The dashed line switches from vertical to horizontal orientation.
Dependencies
No dependencies required