Product Categories 21 block design & features
The block is a full-width row of home goods category cards that scrolls on its own. Cards alternate between two widths, and each has a tall product photo, a category name, a one-line description and a round outline arrow. Thin dividers separate the cards. It is built with shadcn/ui and the Carousel component with auto scroll.
On large screens the row drifts continuously in a loop and stops while the pointer is over it. Hovering a card darkens its photo slightly, fades in a Shop label in the middle and fills its arrow with the primary color. Each card links to its category. The categories, with their images, names, descriptions and links, are props.
On smaller screens, and when reduced motion is preferred, auto scrolling is turned off and the row becomes a swipeable carousel.