Services 13 block design & features
The layout pairs a left-side intro column with a larger card grid on the right. The intro includes a large heading, a narrow paragraph, and a Shadcn UI outline Button. The grid leads with a full-width hero Card at a 16:9 aspect ratio, followed by four equal portrait Cards stacked in two columns. Each card uses CardContent to overlay a white title and arrow icon on a full-bleed cover image.
Framer Motion adds a scale-up and opacity fade on hover for every card, giving the grid a lively interactive quality. Arrow icons sit in the top-right corner and scale slightly on group hover. Rounded corners wrap each card, and generous gap spacing keeps the grid open.
The section has an editorial, photography-led character. The hero card draws immediate attention through its wider format, while the uniform portrait cards below provide a balanced secondary tier. No background fills or borders are applied to the section itself.
On smaller screens the intro column stacks above the grid, and all cards reflow into a single column while retaining their individual aspect ratios.