Design Library
View site

Services Section

Interactive services showcase with left sidebar menu and expandable details panel. Features desktop split-view and mobile accordion layouts.

Live Preview

Click different services to see the details panel update.

  • Validate that your idea solves real user problems and pain points
  • Audit your product's UX to uncover usability gaps
  • Gain insights from analytics to guide better decisions
  • Run AI-powered usability testing to find specific issues
  • Define information architecture and messaging that resonates
Get in touch

View Full Version

View services page

Desktop Layout

Left Sidebar (42%)

Service selector with icons and titles. Active item shows purple indicator line on right edge.

Right Panel (58%)

Details panel with icon, title, feature list with checkmarks, and CTA button. Content animates on service switch.

Sticky Panels

Both panels are sticky at top:32 for scroll-aware positioning.

Mobile Layout

Accordion Style

Each service collapses into an accordion item with icon, title, and chevron.

Expandable Content

Tapping expands to reveal features list and CTA. Smooth spring animation on expand/collapse.

Styling Classes

.services-selector-column

Left sidebar container with rounded corners

.services-selector-item

Individual service button with hover/active states

.card-services-detail

Right panel with gradient background and glow effect

.services-accordion-item

Mobile accordion item with expand/collapse animation

Service Data Structure

tsx
interface Service {
  title: string
  description: string
  icon: LucideIcon
  features: string[]
}

const services: Service[] = [
  {
    title: 'Product Strategy & UX Research',
    description: '...',
    icon: Search,
    features: [
      'Discover new opportunities and validate product ideas',
      'Audit your product\'s UX to uncover usability gaps',
      // ... more features
    ],
  },
  // ... more services
]

Animation Details

Panel Transition

AnimatePresence with fade + slide (y: 8px)

Feature Items

Staggered entrance with 20ms delay between items

Mobile Accordion

Spring animation: stiffness 100, damping 20

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/services/page.tsx