Shadcn UI Ecommerce Hero Block
EcommerceHero8 is a dual-carousel section built with shadcn/ui. The main track is full viewport height with background photos, large serif title, paragraph, and outline CTA, each slide dimmed with a black overlay. A second carousel sits along the bottom on large screens, showing product names on square crops that scroll in sync when the main slide changes; autoplay runs on the primary carousel. The two APIs stay aligned so the thumbnail rail always reflects the active story.
The look is fashion-editorial: muted page background, white type on imagery, product strip reads as a shop window. Active slide text uses entrance animation classes so copy fades and slides in when a slide becomes active. Thumbnail cards zoom image slightly on hover.
Elaborate relative to a single carousel because of sync logic and the split between campaign art and product picks. You need one background and one product image per slide plus short copy. Less form-heavy than blocks that embed full PDP data.
On smaller breakpoints the product strip moves below the hero content but keeps the same relationship to the main slide index.
Dependencies
| Package | Type |
|---|---|
| embla-carousel-autoplay | NPM |
| react | NPM |
button @shadcn | Registry |
carousel @shadcn | Registry |