Product List 32 block design & features
A skincare product grid under a "Summer Essentials" heading with New Arrivals, Hot Items and Best Sellers tabs and a See More button. Each card shows the product photo with badges, a bag and wishlist button, the category, name, price, star rating and review count, and a second photo on hover.
All three collections share one grid. Cards are keyed by product, so when you switch tabs anything that appears in both collections, such as the Hydrating Face Mist, glides to its new position on a layout spring, products that are not in the new tab shrink and fade out, and new ones fade in. The active tab's underline slides between labels with a shared layout animation, and the tabs support arrow, Home and End keys. Collections are plain data arrays, styled with shadcn/ui components.
The grid uses two columns on mobile and four on large screens, and the tab row scrolls if it runs out of room. Under reduced motion the cards crossfade without moving.