Product Categories 15 block design & features
The block is an edge-to-edge carousel for an electronics store. Each slide shows one large photo on the left and two smaller photos stacked on the right, each with a white heading and a light Shop button over a darkened image. Thin chevron arrows sit on either side and pill indicators sit in the bottom corner. It uses shadcn/ui and the Carousel component.
The arrows move all three panels to their next photos with a slight stagger, gain a soft backdrop on hover and dim when there is nowhere further to go. The indicators jump straight to a slide, and the current one stretches into a pill. The overlay on each photo deepens on hover. The slides, and the titles, images and button text and links of each panel, are props.
On tablets the large photo spans the top with the two smaller ones side by side below it. On mobile the panels are flattened into a single carousel that shows one photo at a time, with its own indicators.