Section Library

Services Accordion

  • Framer Motion
  • Light background
  • 3–5 services
Live preview
Full screen ↗
Loading preview…

Scroll & click inside the frame — it's the real section running with demo content

Step 1 — your customization message
Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]
Step 2 — the prompt · Services Accordion257 lines · 11,898 chars
You are given a task to integrate an existing React component in the codebase

The codebase should support:
- shadcn project structure
- Tailwind CSS
- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

What it is

Your services listed as elegant rows. Click one and it expands into a full-width panel with a hero image, a giant headline, and a key stat — while the others collapse. One service is always “in focus.”

Perfect for

Any business with 3–5 distinct services: construction, agencies, consultancies, studios. This is your “What We Do” section, just far better looking than a grid of three icons.

What to prepare

  • 3–5 services, each with: a name, a short kicker label, a two-part headline, a 1–2 sentence description, one stat with a label, and a strong background image
  • A section headline (e.g. “What we build.”)

Good to know

This one uses a light/white background by default while most other sections in this library are dark — decide which world your site lives in and tell Claude Code to match the section to it. Swap the Unsplash placeholders for your own photos.