Shadcn UI Hero Block
Hero271 arranges a two-column hero with copy anchored inside the container on the left and an aspect-4/3 main image that breaks out of the container on the right, bleeding toward the viewport edge. An optional square inset image sits at bottom-left of the main photo, close to the copy column, and a subtle dot grid fills the upper-left background. Built with Shadcn UI Button and the shared HeroInsetImageProps type, the layout follows the same prop contract as the rest of the hero-inset-image family.
The right-bleed image gains visual weight by extending beyond the content boundary, giving the section an asymmetric, editorial feel without requiring a full-bleed background. Border and rounding are preserved on the left and top/bottom edges while the right side meets the viewport cleanly. The primary CTA uses a sliding double-arrow hover animation carried over from Hero159, paired with an optional byline for social proof or supporting context.
Compared to Hero167, which also bleeds right, this variant drops the framed bg-muted panel in favor of a flat image with rounded corners and a lighter border. The dot grid at top-left counterbalances the heavy media column, keeping the overall composition grounded. On small screens the columns collapse to a single stack with copy above the image.