# TEMPLATE.md: AI SaaS product

You are an AI developer building a complete website for my client. Template: **AI SaaS product**. A landing page for an AI tool: before/after results, how it works, credit pricing, FAQ.

## What you are building

A Next.js (App Router) site assembled from production-ready LudusVibe UI sections. Sections install through the shadcn registry and automatically follow the project's brand tokens.

## Steps

### 1. Project and registry

If the project does not exist yet: `npx create-next-app@latest my-site --ts --tailwind --app`, then `npx shadcn@latest init`.
Add the registry to `components.json`:

```json
"registries": {
  "@ludusvibe": "https://ui.ludusvibe.com/r/{name}.json"
}
```

### 2. Install the template's sections

```bash
npx shadcn@latest add @ludusvibe/navbar-02 @ludusvibe/hero-17 @ludusvibe/logos-01 @ludusvibe/features-01 @ludusvibe/gallery-04 @ludusvibe/process-01 @ludusvibe/pricing-03 @ludusvibe/testimonials-01 @ludusvibe/faq-02 @ludusvibe/cta-03 @ludusvibe/footer-01
```

### 3. Assemble the page in this order

1. `navbar-02`  (Navbar 02: Classic Top Bar)
   Great for: Business sites, agencies and B2B services: a familiar layout that fits almost any industry.
2. `hero-17`  (Hero 17: SaaS over grain gradient)
   Great for: SaaS, startups and digital products that want a modern, vivid first screen.
3. `logos-01`  (Logos 01: Marquee)
   Great for: SaaS and B2B sites with recognizable clients or press mentions.
4. `features-01`  (Features 01: Bento Grid)
   Great for: SaaS and digital products presenting several features at a glance.
5. `gallery-04`  (Gallery 04: Before & After Pairs)
   Great for: Salons, fitness, renovations, dental: any visible transformation.
6. `process-01`  (Process 01: Horizontal Steps)
   Great for: Services explaining how working together goes: agencies, contractors, clinics.
7. `pricing-03`  (Pricing 03: Featured Plan)
   Great for: Services and SaaS pushing one main offer with smaller alternatives.
8. `testimonials-01`  (Testimonials 01: Bento Quotes)
   Great for: Services, SaaS and local businesses with several strong client quotes.
9. `faq-02`  (FAQ 02: Two Columns)
   Great for: Sites with many short questions: shops, events, local services.
10. `cta-03`  (CTA 03: Closer with Proof)
   Great for: SaaS and services closing the page with guarantees and proof.
11. `footer-01`  (Footer 01: Mega Footer)
   Great for: Larger sites with many pages: SaaS, shops, media.

In `app/page.tsx`:

```tsx
import { Navbar02 } from "@/components/sections/navbar-02"
import { Hero17 } from "@/components/sections/hero-17"
import { Logos01 } from "@/components/sections/logos-01"
import { Features01 } from "@/components/sections/features-01"
import { Gallery04 } from "@/components/sections/gallery-04"
import { Process01 } from "@/components/sections/process-01"
import { Pricing03 } from "@/components/sections/pricing-03"
import { Testimonials01 } from "@/components/sections/testimonials-01"
import { Faq02 } from "@/components/sections/faq-02"
import { Cta03 } from "@/components/sections/cta-03"
import { Footer01 } from "@/components/sections/footer-01"

export default function Page() {
  return (
    <>
      <Navbar02 />
      <Hero17 />
      <Logos01 />
      <Features01 />
      <Gallery04 />
      <Process01 />
      <Pricing03 />
      <Testimonials01 />
      <Faq02 />
      <Cta03 />
      <Footer01 />
    </>
  )
}
```

Pass `as="h1"` to the first hero section.

### 4. Branding (ask the client before choosing)

All colors live as CSS tokens in `app/globals.css`. Change ONLY tokens, never colors inside components:
- `--primary` and `--primary-foreground`: the brand color (in both themes, :root and .dark)
- `--chart-1` through `--chart-5`: accent colors for charts and visual elements
- Font: swap the font in `app/layout.tsx` (next/font)

### 5. Content

Every section takes its content through props (headings, copy, items, images, CTAs). Replace the default content with the client's real data: names, services, prices, photos, contact, social links.

Copy rules:
- Sales-driven and concrete: benefits first, numbers where they exist
- NEVER use the em dash (—): use a colon, a comma, or restructure the sentence
- Images: replace the Unsplash defaults with the client's photography wherever available

### 6. Verify

- The site works in light and dark themes
- Mobile at 375px with no horizontal scroll
- Every link and CTA points to a real destination (phone, Instagram, form)