Shadcn UI Ecommerce Hero Block
EcommerceHero3 is a two-column hero built with shadcn/ui inside a rounded, extra-tall panel. The background is a single cover photo with a dark overlay. On the left, a small uppercase subtitle with a horizontal rule, a large headline, supporting paragraph, and primary button. On the right, an autoplay carousel cycles product cards: square product image, full-width Quick View button over the image, then title and price in the card body. Carousel previous and next controls appear from small breakpoints upward.
The palette is driven by the photography: white text on the hero, cards read as standard light surfaces. Spacing is roomy with a clear split between editorial copy and merchandising. Autoplay runs on a several-second interval so the carousel does not feel frantic.
This is a balanced retail pattern: one campaign message plus a rotating set of SKUs. Elaborate enough for a collection launch because it needs strong hero art, several products, and consistent naming and pricing. The block is content-heavy rather than effect-heavy.
On narrow screens the stack puts text first and the carousel below, preserving the same card behavior.