# TEMPLATE.md: Practice & booking

You are an AI developer building a complete website for my client. Template: **Practice & booking**. For 1-on-1 practitioners: coaches, psychologists, nutritionists. Bio, packages, prices, how working together looks, booking.

## 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-03 @ludusvibe/hero-14 @ludusvibe/about-01 @ludusvibe/services-03 @ludusvibe/process-02 @ludusvibe/pricing-04 @ludusvibe/testimonials-01 @ludusvibe/booking-02 @ludusvibe/faq-03 @ludusvibe/contact-01 @ludusvibe/footer-03
```

### 3. Assemble the page in this order

1. `navbar-03`  (Navbar 03: Service Topbar)
   Great for: Local services: salons, clinics, workshops, craftsmen, anyone reached by phone.
2. `hero-14`  (Hero 14: Fullscreen video masthead)
   Great for: Personal brands: therapists, coaches, speakers, consultants.
3. `about-01`  (About 01: Practice Bio)
   Great for: Therapists, coaches, doctors, lawyers: solo practitioners.
4. `services-03`  (Services 03: Program Rows)
   Great for: Coaches, consultants and trainers selling outcome-based programs.
5. `process-02`  (Process 02: Vertical Timeline)
   Great for: Consultants, coaches and firms with a multi-step engagement.
6. `pricing-04`  (Pricing 04: Session Rates)
   Great for: Psychologists, coaches, physiotherapists and 1-on-1 practitioners.
7. `testimonials-01`  (Testimonials 01: Bento Quotes)
   Great for: Services, SaaS and local businesses with several strong client quotes.
8. `booking-02`  (Booking 02: Consultation Intake)
   Great for: Consultants, therapists and B2B intro calls.
9. `faq-03`  (FAQ 03: Sticky Split)
   Great for: Practices with sensitive questions: therapy, medicine, law.
10. `contact-01`  (Contact 01: Form & Map)
   Great for: Any business with an office or premises to visit.
11. `footer-03`  (Footer 03: Service Grid)
   Great for: Local businesses where hours and contact matter: salons, clinics, restaurants.

In `app/page.tsx`:

```tsx
import { Navbar03 } from "@/components/sections/navbar-03"
import { Hero14 } from "@/components/sections/hero-14"
import { About01 } from "@/components/sections/about-01"
import { Services03 } from "@/components/sections/services-03"
import { Process02 } from "@/components/sections/process-02"
import { Pricing04 } from "@/components/sections/pricing-04"
import { Testimonials01 } from "@/components/sections/testimonials-01"
import { Booking02 } from "@/components/sections/booking-02"
import { Faq03 } from "@/components/sections/faq-03"
import { Contact01 } from "@/components/sections/contact-01"
import { Footer03 } from "@/components/sections/footer-03"

export default function Page() {
  return (
    <>
      <Navbar03 />
      <Hero14 />
      <About01 />
      <Services03 />
      <Process02 />
      <Pricing04 />
      <Testimonials01 />
      <Booking02 />
      <Faq03 />
      <Contact01 />
      <Footer03 />
    </>
  )
}
```

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)