Product Detail 50 block design & features
A shadcn/ui product detail page for a facial serum. The bottle photo sits on the left, and the right column holds the title, tags, rating, summary, price, quantity stepper and add to bag button, then a What's inside list of five ingredients and the About and How to Use copy.
The main photo doubles as an ingredient map. Every ingredient has a small dot on the bottle. On desktop the photo pins while the right column scrolls, and as each ingredient reaches the middle of the screen its dot grows, a hairline leader draws out to the edge of the frame with the ingredient's name, and its entry in the list brightens. Clicking a dot scrolls its ingredient into view. There is no separate tour section below the fold. Ingredient names, roles, copy and photo coordinates are plain data.
On mobile the photo sits above the details without pinning and the list reads at full strength. With reduced motion the leader fades in instead of drawing.