Shadcn UI Hero Block
Hero277 is a client hero built with shadcn/ui Button components and HeroFeatureSliderProps. On large screens the container becomes a two-column grid: the leading column holds a framed square (aspect-square) stack where each slide uses border, object-left-top crop, and optional srcDark pairs; opacity crossfades over roughly half a second when the user hovers different feature rows in the second column. Leaving the copy column resets the slide index to zero.
The trailing column mirrors Hero256’s dashed badge treatment, then a width-capped headline, primary and outline CTAs, and stacked interactive feature cells with soft icon mounts and hover wash. The image column uses light sticky positioning on wide viewports so the crop can stay visible while scanning the list.
On small breakpoints the layout stacks with the image band first, then the narrative and features, keeping the pairing between list order and slide index unchanged. Touch users keep the first slide until you add tap or focus handlers.