Services 18 block design & features
A top bar displays a small colored square, a label, and a project-count stat using monospace numerals. Below, a three-column grid splits an intro area from a service list. The intro column contains a large heading, a subtitle, a Shadcn UI Separator, two highlight points marked with plus icons in circular muted backgrounds, and a primary Button. The right two columns stack four service rows, each built as a bordered muted card holding a thumbnail image, a title, a category label, and a row of small dot indicators.
The dot indicators fill progressively with the primary color based on each row's position, creating a subtle sequential pattern. Card rows use a muted background that shifts to a card surface in dark mode. Thumbnail images are small and horizontally cropped with rounded corners and a border.
The section has an organized, dashboard-like quality. The left column's vertical flow of heading, separator, and highlights contrasts with the compact, repeating card rows on the right.
On narrower screens the three-column grid collapses so the intro section stacks above the service list, and dot indicators hide on the smallest breakpoints.