Services 20 block design & features
A top section pairs an uppercase muted label on the left with a large heading and a ghost-variant shadcn/ui Button on the right. Below, five service rows stack vertically, each spanning the full container width. Every row contains an oversized title on the left and a wrapped list of options on the right, each option prefixed by a milestone icon.
Each row's background is filled with a repeating 45-degree diagonal hatch pattern using the muted color token, giving the section a textured, blueprint-like quality. Framer Motion animates each row into view on scroll with a spring-based fade and upward slide, staggered by index for a cascading reveal.
The typography is bold and high-contrast, with row titles scaling from 3xl up to 8xl. Option labels remain at body size, creating a strong scale differential. The overall tone is architectural and structured, with the hatch pattern reinforcing a planning or process theme.
On smaller screens the title and options stack vertically within each row, and the row height adjusts accordingly while retaining the hatched background fill.