Product Categories 11 block design & features
The block lists categories as product cutouts. A centered heading sits above two department links, Clothing and Shoes & Bags, and a row of five cards, each with a sweatshirt, shoe, bag or other item photographed on a light gray ground and the category name below it. It is built with shadcn/ui.
Choosing a department underlines its link and fades its five cards in one after another. On larger screens each card sits on a muted panel with a small round arrow beside the name; hovering a card underlines the name and fills the arrow's circle with the primary color. The whole card links to the category. The heading and the departments, each with its categories, images, names and links, are props. Animations are skipped when reduced motion is preferred.
Below the extra large breakpoint the row becomes a swipeable carousel, and on mobile the cards bleed off the edge of the screen so the next one shows.