Hero 45 block design & features
Hero45 is a shadcn/ui hero that opens with badge and headline, then a large landscape image capped in height with rounded corners and a bottom fade into the page background. The image area is a client component: hovering each feature column fades to the matching entry in the images prop with a short opacity transition, and leaving the row restores the first slide. Decorative dotted panels sit behind the frame on larger breakpoints. Under the image, three feature blocks each show an icon in a soft circular plate, a semibold title, and muted body copy.
The middle section aligns each feature index with a slide. The feature row uses lightweight separators and equal flex growth so columns feel balanced. Overall tone is clean marketing with subtle accent hover on each column.
Moderate complexity comes from layering the hero images, gradient scrim, and the three feature objects plus separators. On small screens the features stack and the vertical rules give way to spacing; without separate tap targets, touch users stay on the first image until you extend the block.