Split hero with hover slides beside feature list

Hero 275Pro

A marketing hero with a left-aligned headline, optional supporting copy above the stacked feature list, a split layout with a crossfading image column, and hover-driven slides.

Shadcn UI Hero Block

Hero275 opens with a left-aligned h1 scaled slightly below Hero274, without a badge. Below that, the body splits into two columns on large breakpoints with both rails top-aligned: a fixed-aspect image stack on one side and, on the other, an optional muted lead paragraph from the shared description prop placed above the vertical Lucide-led feature list. Hovering each feature fades the image stack to the matching index in the shared images array, with a short opacity transition; moving the pointer out of the feature column restores the first slide.

On small screens the stack reads headline, image, then the description and features so the visual still lands before the interactive list. The image column uses object-top cropping, rounded corners, a theme border, and a light bottom veil so the crop settles into the page. Feature rows use rounded hover surfaces and circular icon mounts on a muted plate.

Props follow HeroFeatureSliderProps with placeholderHeroFeatureSlider for three features and aligned slides. The block does not add extra shadcn registry packages beyond what your app already ships. Complexity is moderate: one client useState index drives both columns, and authors must keep features and images counts in sync for predictable previews.

Touch users stay on the first image until you extend the block with tap targets or focus behavior.