Product List 33 block design & features
A best sellers section with a heading and a look panel on the left and a draggable rail of clothing cards on the right. Each card shows the product photo with any discount badge, the name, star rating, price and color dots, and an Add to look toggle.
Adding a piece sends a copy of its photo flying from the card into the look panel with a shared layout animation, where it settles as a thumbnail beside the name and price. The look total rolls to the new amount with a number ticker, and the Add look to bag button confirms the whole set in one step. Removing a piece collapses the stack with layout springs. The products are plain data and the selected pieces are local state, built with shadcn/ui buttons and badges and Motion.
On mobile the rail sits under the heading with its arrows beside it and the look panel follows below. With reduced motion the photo skips the flight and the list updates in place.