# TEMPLATE.md: Handmade shop

You are an AI developer building a complete website for my client. Template: **Handmade shop**. A small maker brand: product gallery, brand story, ordering via form or Instagram DM. No heavy checkout.

## 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/promo-01 @ludusvibe/navbar-04 @ludusvibe/hero-03 @ludusvibe/collection-01 @ludusvibe/about-01 @ludusvibe/gallery-03 @ludusvibe/testimonials-02 @ludusvibe/contact-03 @ludusvibe/cta-08 @ludusvibe/footer-02
```

### 3. Assemble the page in this order

1. `promo-01`  (Promo 01: Announcement Bar)
   Great for: Shops and SaaS announcing sales, launches or free shipping.
2. `navbar-04`  (Navbar 04: Commerce Rail)
   Great for: Online shops of any size, from boutiques to full catalogs.
3. `hero-03`  (Hero 03: Eyebrow pill with image trio)
   Great for: Courses, communities, family and lifestyle services with warm photography.
4. `collection-01`  (Collection 01: Product Grid)
   Great for: Online shops with a catalog of products across categories.
5. `about-01`  (About 01: Practice Bio)
   Great for: Therapists, coaches, doctors, lawyers: solo practitioners.
6. `gallery-03`  (Gallery 03: Masonry Lookbook)
   Great for: Fashion, handmade brands, weddings and visual portfolios.
7. `testimonials-02`  (Testimonials 02: Marquee Walls)
   Great for: Products and communities with many short reviews: apps, courses, shops.
8. `contact-03`  (Contact 03: Order Without Checkout)
   Great for: Handmade brands and small shops taking orders via form or DM.
9. `cta-08`  (CTA 08: Instagram Follow)
   Great for: Creators, salons, food and visual brands living on Instagram.
10. `footer-02`  (Footer 02: Minimal Watermark)
   Great for: Portfolios, studios and brands with a strong wordmark.

In `app/page.tsx`:

```tsx
import { Promo01 } from "@/components/sections/promo-01"
import { Navbar04 } from "@/components/sections/navbar-04"
import { Hero03 } from "@/components/sections/hero-03"
import { Collection01 } from "@/components/sections/collection-01"
import { About01 } from "@/components/sections/about-01"
import { Gallery03 } from "@/components/sections/gallery-03"
import { Testimonials02 } from "@/components/sections/testimonials-02"
import { Contact03 } from "@/components/sections/contact-03"
import { Cta08 } from "@/components/sections/cta-08"
import { Footer02 } from "@/components/sections/footer-02"

export default function Page() {
  return (
    <>
      <Promo01 />
      <Navbar04 />
      <Hero03 />
      <Collection01 />
      <About01 />
      <Gallery03 />
      <Testimonials02 />
      <Contact03 />
      <Cta08 />
      <Footer02 />
    </>
  )
}
```

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)