Products Bundle Hotspot 1 block design & features
A two-column shadcn/ui bundle section for a skincare routine. On the right is a flat lay photo of bottles and a jar on satin, marked with small pulsing white dots. On the left, on a muted panel, a centered heading sits above a carousel of product cards and an Add All to Cart button.
Each card has a product photo, category, name, price and a size select. Hovering or clicking a hotspot scrolls the carousel to the matching card and turns the other cards grayscale, and moving away restores them. The hotspot positions, products, sizes, heading and image are props.
On mobile the photo moves above the text, and the cards become a swipeable row that peeks past the right edge.