Gallery 24 block design & features
A centered Playfair-italic heading and a muted paragraph sit above a horizontal row of eight bordered image strips. All strips share the same 24rem height; the active one expands to 24rem wide while the rest compress to 5rem, animated over 300ms with an ease-in-out curve. On hover or click the active image reveals a gradient overlay fading from 80% black at the bottom, along with a product code, a split-styled title, and a round cart button. Below the row, a centered shadcn/ui Button with an arrow icon provides a secondary action.
The rounded-3xl borders on each strip and the tight 1px gap between them create a ribbon-like row that reads as a single visual band. The overlay text uses the same Playfair-italic split seen in gallery23, keeping the title treatment consistent. The cart button sits on a background-colored pill, contrasting against the dark gradient.
The composition is vertical and symmetrical, stacking heading, gallery, and button along a center axis. The wide accordion row acts as the visual centerpiece, with the surrounding text elements framing it above and below.
On mobile the row reduces to four visible strips using a viewport-aware hook, keeping the interaction manageable on narrower screens.