Product Card 28 block design & features
A shop-the-look shadcn/ui card built around a single bedside photo. Round hotspot buttons sit over the nightstand, lamp, mug and throw, and the footer below shows the selected piece's name, material and price, with Add to cart and a button to shop the whole look at its combined price.
Clicking a hotspot fills its centre dot, fades in a small price tag beside it and crossfades the footer to that product. The footer details are stacked in one grid cell, so the card never changes height as the selection moves around the photo.
Hotspots are labelled toggle buttons with pressed states, hidden footer entries are inert, and the selected product is announced politely. Each item's hotspot position is set in percent in the props, so the same card works with any lifestyle photo.