Product Detail 34 block design & features
A configurable product page built with shadcn/ui. A sticky summary card on the left shows the photo for the chosen color, a dashed outline of the bag front drawn to scale, and a short list of the current size, color, depth and gift note. The right column carries the name, price, description, the builder, a quantity stepper with an add to cart button and an accordion for details, delivery and dimensions.
The builder has three steps for size, color and an optional gift note, reached through a progress bar or the back and next buttons. Steps slide horizontally in the direction you are moving. Changing the size animates the outline to its new width and height while the centimeter labels tick, picking a color crossfades the photo, and the note field shows a ticking character count.
Size dimensions, the photo for each color and the note limit are all set in the data. With reduced motion enabled the steps fade without sliding. On mobile the title comes first, then the summary card, then the builder.