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. An image-backed CTA sits underneath.

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.

Research users, target audiences, and their core pain points
Audit UX through usability testing and expert review
Clarify information architecture and messaging direction

Product Design

02 / 04

Redesign or launch products with intuitive, modern interfaces — using AI to explore more directions and prototype faster.

Build scalable design systems and component libraries
Test prototypes and MVPs early to catch issues before launch
Support engineering handoff and launch readiness

Website Development

03 / 04

Get a fast, scalable website built with AI-powered tools that looks great and is easy for your team to manage.

Build custom small to mid-sized websites and marketing sites
Use WordPress or AI tools like Lovable, Claude, and Codex
Support deployment and handoff for your team

Design Workflow Consulting

04 / 04

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

Choose AI tools that fit your team and goals
Create skill docs and brand guidelines your team can reuse
Help your team make prototypes and brand assets with AI

Start a conversation

Discuss your business 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.

Image-backed CTA

Dark-blue gradient background image with a darken overlay, soft accent ring + glow shadow. 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

interface Service {
  title: string
  description: string
  iconSrc: string // image path rendered in the service card
  iconAlt: string
  features: string[]
}

const services: Service[] = [
  {
    title: 'Product Strategy & UX Audit',
    description:
      'Validate your product idea and uncover usability gaps before investing further.',
    iconSrc: '/images/services/ux-strategy.png',
    iconAlt: 'Blue compass icon',
    features: [
      'Validate that your idea solves real user problems and 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.

No internal state

The component is fully static — no tabs, no accordion, no hover reveal. Server-renderable.

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/app/(site)/services/page.tsxsrc/components/ui/HeroMeshGradient.tsx