Hero 277 block design & features
Hero277 is a two-column marketing hero built with shadcn/ui buttons, pairing a sticky crossfading image column with dashed badge, headline, dual CTAs, and stacked icon feature rows that swap the image on hover. On wide screens the image column uses light sticky positioning so the crop stays visible while scanning the list; leaving the copy column resets the slide index to zero.
The trailing column carries a dashed badge, width-capped headline, primary and outline CTAs, and interactive feature cells with soft icon mounts and hover wash. The image stack uses a square-framed border with top-left crop and roughly half-second opacity crossfades between slides.
On small breakpoints the layout stacks with the image band first, then narrative and features, keeping list order aligned with slide index. Touch users keep the first slide until tap or focus handlers are added. Moderate complexity from layered absolute images and one shared hover index.