Shadcn UI Hero Block
Hero261 is a two-column hero section with text content on the left and a vertical features list on the right. The left column contains a large headline, supporting paragraph, and two CTA buttons (primary and outlined with arrow icon). The right column displays four feature items, each with an icon, title, and short description. A dashed line separator divides the two columns on desktop and appears horizontally on mobile. Below the content area sits a large product screenshot that spans the full width.
The visual style is minimal and two-tone, relying on foreground and muted-foreground colors with no gradients or heavy decoration. The dashed line accent is the signature decorative element, created with a repeating linear gradient and mask. Typography is clean with tight tracking on the headline. The outlined button has a subtle gradient background that fades to transparent. Generous vertical padding creates breathing room.
This block exemplifies the mainline design system aesthetic with its spacious layout, restrained color palette, and geometric dashed line motif. The two-column split with feature icons provides a balanced composition that works well for SaaS and developer tool landing pages. The large hero image creates visual impact without competing with the text content.
On mobile, the layout stacks vertically with the features list below the main content. The dashed line switches from vertical to horizontal orientation. The hero image is cropped on smaller screens with overflow hidden.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
button @shadcn | Registry |