Product Categories 24 block design & features
The block pairs a heading and short description with a row of room buttons, then shows one wide interior photo with small labels pinned to the things in it. Each label is a white dot with a halo and a plate naming the category, such as Lighting on the pendant lamp or Benches on the bench at the foot of the bed. A line under the photo gives the number of categories in the room and a link to shop the whole room. It is built with shadcn/ui.
Choosing Bedroom, Living room or Study crossfades the photo to that room, and its labels fade in one after another while the previous room's labels fade out. Hovering or focusing a label turns its plate to the foreground colour and slides open the item count and an arrow. The active room is underlined, and the plates are flat with a light shadow so they stay readable on any photo.
This is a shop the look pattern applied to category navigation, warm and practical rather than decorative, and it relies on real room photography with known pin positions. The rooms, their photos, links and categories, each with a title, count, link and pin position on the photo, are props. On mobile the pins are hidden and the active room's categories are listed under the photo instead, and all transitions are skipped when reduced motion is preferred.