Hero 324 block design & features
Hero324 is the most layered block in this inset-image set. Media on the left bleeds toward the viewport edge inside a chart-gradient panel with a bordered main image, optional byline pill overlaid on the top-left of the photo, and a large square inset hanging outside the bottom-right corner. Copy on the right includes a dot grid accent, display heading, paragraph, and a single Shadcn UI primary button with sliding arrow hover animation.
A secondary chart-tone gradient wash sits along the left edge of the section for balance against the heavy media column. The composition merges bleed breakout, gradient surfaces, pattern, floating label, and outside inset placement in one hero.
Visually it reads as an editorial product launch with strong asymmetry and multiple depth cues. Complexity is highly elaborate and mixed across CSS decoration and coordinated product imagery.
On mobile the bleed simplifies while padding on the media column preserves the outside inset offset.