Services 15 block design & features
A left-aligned heading and subtitle introduce the section, followed by six Shadcn UI Card components flowing in a CSS-columns masonry layout. Cards come in three height tiers, creating a staggered vertical rhythm across up to three columns. Each card fills with a cover image and overlays a white title at the bottom, alongside an arrow icon in the top-right corner. A centered outline Button sits below the grid.
On hover, Framer Motion lifts each card upward while a gradient overlay fades in from black at the bottom, adding depth to the image. The arrow icon rotates forty-five degrees on hover. Rounded corners on the cards and break-inside-avoid keep the masonry flow clean.
The section has a gallery-like quality, with the uneven heights lending visual variety that breaks from a rigid grid. No section-level background color is applied, letting the photography and white space define the character.
The masonry columns reduce from three to two to one as viewport width narrows, with cards maintaining their assigned height classes throughout.