Services Section

The four services as a 2×2 grid (stacked below lg), each card an illustration panel over a heading, four ticks and its CTAs. Grid rows reveal as they scroll into view, the right card trailing the left, with each card’s heading and ticks staggering in. A CTACard closes the section. On the home page it renders on the surface="white" ground — light ground, dark cards.

Live Preview

Scroll through to reveal each card — they alternate left and right on desktop and stack full-width below the `lg` breakpoint. Reduced-motion users get the same layout with the reveal disabled.

UX Audit

Find what's costing you customers, ranked by impact
Sized to fit: one flow, a few key journeys, or the whole product
Findings as a report, annotated screens, or a recorded walkthrough
The low-risk first step before a redesign or a retainer

Learn moreGet in touch

Website & App Design

A fixed-price quote for a new website, web app, or mobile app
Credible, easy-to-use UX, UI, and interaction design
Built on reusable components, and prototyped early so you can react to real screens
Make a half-built Lovable, Codex, or Claude project work

Learn moreGet in touch

Ongoing Design Retainer

Senior design support every month, without hiring a designer
A set block of hours for new pages, features, and fixes
UI, interaction design, and design system upkeep in one place
Works alongside your developers, in-house or agency

Learn moreGet in touch

Design System Setup

Tokens, core components, and usage guidelines in Figma
Ready for developers, so new pages stay consistent
Add features without redesigning every page
The same approach I used on CommBank’s design system

Learn moreGet in touch

Not quite what you need?

Let's talk through your goals and shape the right support.

Get in touch

View Full Version

View services page

Desktop Layout (lg+)

2×2 grid, revealed row by row

Two columns from lg, stacked below. As a grid row scrolls into view the left card lands, the right follows 150ms later, and inside each the heading then the four ticks fade up, each check drawing as its row arrives. The top of every card is an inset panel tinted to its accent, holding a small, simple illustration with one quiet loop. Cards in a row share a height, with their CTAs aligned along the bottom.

Closing CTA

The shared CTACard (from CTASection.tsx), rendered with variant="compact". Its background is the WebGL HeroMeshGradient, not an image — the same shader the hero uses. Holds an H2 + CTA "Get in touch" pill.

Mobile / Tablet (below lg)

Single-column stack

Cards stack vertically with the same rounded border treatment. Features stay visible, so there's no accordion or hidden content layer on smaller screens.

CTA reflow

The CTA block reflows to a column with the Primary button below the heading instead of beside it.

Service Data Structure

tsx

import { UxAuditIllo } from '@/components/illustrations/ServiceIllos'

interface Service {
  title: string
  Visual: () => React.JSX.Element // Arrow illustration on an .illo-panel
  features: string[]
  href: string // the service page: card click, hover pill and "Learn more"
}

const services: Service[] = [
  {
    title: 'Product Strategy & UX Audit',
    Visual: UxAuditIllo,
    features: [
      'Validate your product idea before investing further',
      'Research users, target audiences, and their core pain points',
      // ...
    ],
  },
  // ... more services
]

Animation

Scroll-triggered fades

Each card + the CTA is wrapped in `FadeIn` with `animation="fadeUp"` and a 50ms-stagger delay per row.

Client component

Not server-renderable: 'use client'. Each card drives scroll-linked useTransform reveals (the visual fades and scales up, the shimmer fades out), and on a fine pointer a cursor-following pill replaces the cursor over a card to carry its link. Touch and reduced-motion users get the static layout — there are still no tabs, accordion, or hidden content.

Usage

tsx

import { ServicesSection } from '@/components/sections/ServicesSection'

// Default usage - includes all built-in services
<ServicesSection />

Import

tsx

import { ServicesSection } from '@/components/sections/ServicesSection'

Related Files

src/components/sections/ServicesSection.tsxsrc/components/illustrations/ServiceIllos.tsxsrc/components/sections/CTASection.tsxsrc/app/(site)/services/page.tsxsrc/components/ui/HeroMeshGradient.tsx