Design Library
View site

Services Section

Scroll-revealed services story. Each of the four vertical service cards (animated visual on top, content below) sits at roughly half width and alternates left / right down the page, sliding in from its side as it scrolls into view while its content staggers in. On mobile the cards go full width and fade up. 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.

Product Strategy & UX Audit

01 / 04

Validate your product idea and uncover usability gaps before investing further.

Get in touch
See UX audit services

Product Design

02 / 04

Launch or redesign websites, web apps, and mobile apps with intuitive, modern interfaces. Mobile app design through to engineering handoff — using AI to explore more directions and prototype faster.

Get in touch
See product design examples

Websites & Web Apps

03 / 04

Website design and build for a fast, scalable site or web app, made with AI-powered tools — with a CMS your team can run without a developer.

Get in touch
See website examples

Design Workflow Consulting

04 / 04

Advise on AI-powered design workflows and tools that streamline your team and eliminate tedious manual work.

Get 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+)

Alternating scroll reveal

Four vertical cards at ~58% width, each aligned to the opposite side of the previous one. As a card scrolls into view it slides in from its aligned side and its content (step label, title, description, checklist) staggers in. Cards carry a small 01–04 step label; the animated visual sits on top.

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 { UxAuditVisual } from '@/components/sections/ServiceVisuals'

interface Service {
  title: string
  description: string
  Visual: () => React.JSX.Element // animated visual, not an image
  features: string[]
  href?: string
  linkLabel?: string
}

const services: Service[] = [
  {
    title: 'Product Strategy & UX Audit',
    description:
      'Validate your product idea and uncover usability gaps before investing further.',
    Visual: UxAuditVisual,
    features: [
      '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/sections/ServiceVisuals.tsxsrc/components/sections/CTASection.tsxsrc/app/(site)/services/page.tsxsrc/components/ui/HeroMeshGradient.tsx