Shadcn UI Ecommerce Hero Block
EcommerceHero2 is a split hero built with Shadcn UI: on large screens two equal panels sit side by side, each filling the viewport height with a photo or looping video, a light darkening overlay, and content aligned to the bottom. One panel can show a large headline and outline button alone; the other can show a compact product card with image, name, regular and sale price, and a bag icon button. On small screens the panels stack vertically with the same treatment.
The look is editorial and high-contrast: white type on imagery with a consistent scrim. The outline button and card sit in the same vertical rhythm. Video loops muted for ambient motion. The product card uses the shared Price block for sale and regular pricing.
This pattern is a common premium retail split, but the mix of static hero and shoppable card in one block is a clear story arc. Moderate complexity with two media types and optional product strip. You need either two campaign panels or one campaign plus one product with pricing assets.
Narrow widths keep a tall aspect ratio per panel so the block still feels like a hero rather than thin strips.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
price @shadcnblocks | Registry |
aspect-ratio @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |