# TEMPLATE.md: Membership & learning platform

You are an AI developer building a complete website for my client. Template: **Membership & learning platform**. Subscription learning: courses, live workshops, a community, monthly or yearly billing.

## 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-01 @ludusvibe/hero-12 @ludusvibe/stats-02 @ludusvibe/features-02 @ludusvibe/compare-01 @ludusvibe/testimonials-02 @ludusvibe/pricing-02 @ludusvibe/faq-01 @ludusvibe/cta-05 @ludusvibe/footer-01
```

### 3. Assemble the page in this order

1. `navbar-01`  (Navbar 01: Floating Pill)
   Great for: Modern SaaS, startups, portfolios and product sites that want a light, airy look.
2. `hero-12`  (Hero 12: Community over pixel beams)
   Great for: Communities, memberships, Discord servers and creator platforms.
3. `stats-02`  (Stats 02: Narrative Stats)
   Great for: Agencies, SaaS and firms that want numbers wrapped in a story.
4. `features-02`  (Features 02: Alternating Rows)
   Great for: Products and services that need room to explain three key benefits in depth.
5. `compare-01`  (Compare 01: Old Way vs. New Way)
   Great for: SaaS and services replacing a painful manual process.
6. `testimonials-02`  (Testimonials 02: Marquee Walls)
   Great for: Products and communities with many short reviews: apps, courses, shops.
7. `pricing-02`  (Pricing 02: Billing Toggle)
   Great for: SaaS and memberships billed monthly or yearly.
8. `faq-01`  (FAQ 01: Accordion)
   Great for: Any site: services, shops, SaaS; answers objections before the contact step.
9. `cta-05`  (CTA 05: Conversion)
   Great for: Landing pages that need one last decision point.
10. `footer-01`  (Footer 01: Mega Footer)
   Great for: Larger sites with many pages: SaaS, shops, media.

In `app/page.tsx`:

```tsx
import { Navbar01 } from "@/components/sections/navbar-01"
import { Hero12 } from "@/components/sections/hero-12"
import { Stats02 } from "@/components/sections/stats-02"
import { Features02 } from "@/components/sections/features-02"
import { Compare01 } from "@/components/sections/compare-01"
import { Testimonials02 } from "@/components/sections/testimonials-02"
import { Pricing02 } from "@/components/sections/pricing-02"
import { Faq01 } from "@/components/sections/faq-01"
import { Cta05 } from "@/components/sections/cta-05"
import { Footer01 } from "@/components/sections/footer-01"

export default function Page() {
  return (
    <>
      <Navbar01 />
      <Hero12 />
      <Stats02 />
      <Features02 />
      <Compare01 />
      <Testimonials02 />
      <Pricing02 />
      <Faq01 />
      <Cta05 />
      <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)