Hero 318 block design & features
Hero318 leads with media on the left inside a padded panel that uses a chart-color gradient as an outer frame around the bordered main image. The inset thumbnail hangs outside the bottom-right of that framed stack while copy and dual Shadcn UI buttons align in the right column.
The gradient frame adds a second surface layer between the page background and the photo, lighter than a full bleed treatment and fully contained within the container width. The main image remains a four-to-three top-weighted crop with muted fill behind the bitmap.
Visually the block feels more designed than a flat split, with color wash and nested rounding creating depth from CSS alone. Complexity is moderate and mixed: gradient framing is code-driven while the photos carry the product story.
On small screens the framed media stacks above the copy with padding preserved for the outside inset.