Hero with contained image and hover feature slides

Hero 274Pro

A marketing hero with a larger centered headline, a wide landscape image inside the page container that crossfades between slides when each feature column is hovered, and three icon-led columns separated by vertical rules on desktop.

Shadcn UI Hero Block

Hero274 leads with a centered headline sized a step up from Hero45, then a wide image inside the shared container and the same three-column feature row. The photograph runs at full content width with an aspect-video frame, rounded corners, and theme border like Hero45, but without an extra max-width cap on the media or feature row. Each feature column is a client-side hover target; moving the pointer across the row fades between the matching images from the shared images array with a roughly half-second opacity transition, and leaving the row returns to the first slide.

The frame keeps Hero45’s soft bottom veil into the page background and the same dotted radial ornaments behind the crop for continuity. Feature columns keep circular icon plates, semibold h3 titles, and muted descriptions with Separator rules on medium breakpoints and up.

Props match HeroFeatureSliderProps with placeholderHeroFeatureSlider so each feature index lines up with an image. The interaction is hover-first like a desktop preview; on touch devices the first image remains primary unless you extend the block with tap or carousel controls later.