Hero 8 block design & features
Hero8 is a single-column centered hero built with Shadcn UI. A constrained column holds the headline, balanced supporting paragraph, and two actions: a solid primary with a trailing arrow icon and an outlined secondary. A wide image sits below that stack inside the same container, separated by a consistent top margin. The outer wrapper uses overflow clipping and a full-width muted bottom border so the image reads as cut off at the fold with only rounded top corners and a hairline border on the photo itself.
Light background with dark text and muted body copy at a slightly smaller scale than the semibold, width-capped headline. Vertical spacing groups the text block with even gaps before the buttons. The frame suggests continuity downward rather than a floating card, because the lower edge of the photo meets the section border instead of closing in a full rounded rectangle.
The aesthetic is minimal and typical of default marketing heroes, with the cutoff image as the main twist: viewers see the top of a screenshot or scene and infer more content below. Complexity is low. You supply headline copy, one paragraph, button labels, and hero imagery suited to a horizontal crop on larger breakpoints.
On small screens the buttons stack to full width and align as a horizontal pair from the small breakpoint. The image uses a taller crop on narrow widths and shifts to a wide crop from the medium breakpoint, still cropped at the section bottom.