Ecommerce Hero 12 block design & features
This ecommerce hero fills the viewport with four tall photo panels, one for each routine step: Cleanse, Treat, Hydrate and Protect. One panel stands open at about two thirds of the width while the others close to narrow strips, each with its name set vertically on a small solid label. The heading sits in a solid notch cut into the top left corner. It is built with Shadcn UI.
Hovering, focusing or tapping a panel opens it and closes the last one. Each panel acts as a window onto a photo sized for the open state, so opening reveals more of the image without rescaling it. A solid card fades in over the open panel with the step name, product count, a short description and a shop button. The panels advance on their own, and the autoplay pauses while the pointer or keyboard focus is inside them. On small screens the panels stack and open vertically.
The heading, steps with their labels, counts, copy, links and images with focus positions, and the autoplay interval are props. With reduced motion the panels change instantly and the autoplay is switched off.