Gallery 31 block design & features
A centered header area contains a small uppercase pill label, a large heading in a display font, and a muted description line. Below it, five product cards arrange into a responsive bento grid that moves from a single column on small screens through two columns on medium to four columns on large, with one item spanning two columns and another spanning two rows to create an asymmetric mosaic.
Each card is rendered with the Aceternity DirectionAwareHover component, which slides an overlay into view from whichever edge the cursor enters. The overlay displays the product name in bold and the price beneath it. All images fill their containers with object-cover and share extra-large rounded corners that give the grid a soft, uniform shape language.
The layout feels catalog-oriented, combining bento grid tension with the interactive hover reveal. Built alongside shadcn/ui utilities, the block keeps its palette neutral with muted background tones and relies on the directional animation as its primary point of visual interest.