Section Library

Horizontal Projects Showcase

  • Horizontal scroll
  • Stats strip
  • Vertical list on mobile
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 · Horizontal Projects Showcase328 lines · 14,660 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

The page turns sideways: a full-screen horizontal gallery where each project takes the whole viewport, with a live counter (“02 / 04”), clickable dots, and a progress bar. Above it sits a stats strip with your headline numbers.

Perfect for

Construction companies, agencies, studios — anyone with 3–5 flagship projects and impressive numbers to show next to them (years in business, projects completed, total value delivered).

What to prepare

  • 3–5 projects: name, type, city, image, a value/figure, a one-line detail, and a 1–2 sentence description
  • Four headline stats for the strip (e.g. “200+ projects”, “27 yrs”, “98% on time”)

Good to know

The demo content is filled with Unsplash stock photos — make sure your customization message tells Claude Code to swap in YOUR images, or AI-generate project shots that match your brand. On mobile, the horizontal scroll gracefully becomes a vertical list.