Hero 271 block design & features
Hero271 is a two-column hero built with Shadcn UI where copy stays inside the container on the left and a four-to-three main image breaks out toward the right viewport edge. An optional square inset sits outside the bottom-left corner of the main photo, close to the text column. A subtle dot grid fills the upper-left background behind the copy stack.
The text column carries a display heading, paragraph, and a single primary button with a sliding double-arrow hover animation. An optional byline can appear beside the button. The right-bleed image keeps border and rounding on the edges facing the content while the outer edge meets the viewport.
Visually the layout feels asymmetric and editorial, with the dot grid balancing the heavy media column. Complexity is moderate: two product images, one animated CTA, optional byline, and a light decorative pattern.
On small screens the columns stack with copy above the image while padding preserves the outside inset offset.