Hero 306 block design & features
Hero306 is a split-pane marketing hero built with shadcn/ui that wraps badge text, heading, description, twin buttons, and up to three Lucide-backed feature rows inside a muted panel. When a lead image exists, that panel shares a rounded bordered shell with a tall opposite column whose photography covers the full cell height for a magazine-like hinge layout.
Feature summaries sit above a hairline divider in a responsive grid so pairs reflow cleanly on medium breakpoints without crowding icons.
Without imagery the outer border collapses into a centered stack: headline block remains prominent while features expand into four tiles on large screens, preserving parity for launches that lack photography.
Spacing stays roomy and typography relies on tight tracking on headings versus relaxed body copy, signaling polished SaaS marketing rather than experimental collage work.