Services 19 block design & features
A centered heading mixes a sans-serif "Services we" with an italic serif "offer" and a bracketed superscript count. Below, a full-width HTML table lists six services. Each row contains a bold title in the first cell, two category labels in a center cell, and two subcategory labels right-aligned in the last cell. Rows are separated by bottom borders and dim their text to a low opacity until hovered.
When the pointer enters the table, a small square image element appears and follows the cursor via spring-animated position values. The displayed image swaps to match whichever row is currently hovered, creating a peek-preview effect. The image scales in on pointer enter and scales out on pointer leave using Framer Motion spring physics.
The aesthetic is typographic and editorial, using tight tracking and weight contrast between row titles and their lighter category labels. No background fills, cards, or borders beyond the row separators are present, giving the section a stripped-back, agency-portfolio feel.
On smaller viewports the center category column hides, leaving the title and subcategory columns visible, and the cursor-following image is hidden entirely.