Services Section

Card-based services grid. Four rounded service boxes arranged in a two-column layout on desktop and a single column on mobile, each with a prominent icon, concise positioning copy, and a checklist of deliverables. An image-backed CTA sits underneath.

Live Preview

Scroll to see the 2x2 card grid and the CTA. Layout collapses to a single-column stack below the `lg` breakpoint.

Product Strategy & UX Audit

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 Powered by AI

Redesign or launch products with intuitive, modern interfaces that customers love to use.

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

AI Website Development

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

AI Design Consulting

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

2x2 card grid

Four rounded cards in two columns. Each card uses the site's dark glassy service treatment, a prominent image icon, an H3 title, short supporting copy, and an always-visible feature list.

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.tsxpublic/images/services-cta-bg.jpg