workshopclaudecode/CLAUDE.md

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Sales page for the "Claude Code Workshop" - a hands-on workshop for Dutch entrepreneurs (ZZP/MKB). Built as a static React SPA. All content is in Dutch (nl).

**Workshop details:** Friday March 6, 2026 | 9:00-14:00 | Utrecht | €399 excl. BTW | Max 8 participants

## Commands

```bash
npm run dev      # Vite dev server on port 5173
npm run build    # Production build to dist/
npm run preview  # Preview production build
npm run lint     # ESLint
./preflight.sh   # Pre-deploy checks (lint + build + asset path validation)
```

## Architecture

**React 19 + Vite 7 + Tailwind CSS 3** (dark mode via `class` strategy)

### Routing
- `src/main.jsx` - React Router setup with BrowserRouter
- `/` - Main sales page (App.jsx orchestrates all section components)
- `/privacy` - Privacy policy page
- `/voorwaarden` - Terms & conditions page

### Component Structure
`src/components/` contains the sales page sections, rendered in conversion-optimized order in App.jsx:
Hero → PainPoints → Testimonials → Benefits → Program → ForWho → Trainer → Pricing → FAQ → FinalCTA → Footer → StickyBar → CookieBanner

All components are barrel-exported from `src/components/index.js`.

`src/pages/` contains standalone route pages (Privacy.jsx, Terms.jsx).

### Design System

Custom color tokens defined in `tailwind.config.js`:
- **coral** (primary/CTA): `coral-500` = #F25C3D
- **teal** (accent): `teal-500` = #14B8A6
- **warm** (neutrals): brown-gray scale for text and backgrounds

Custom fonts loaded via Google Fonts in `index.html`:
- **Bricolage Grotesque** (`font-display`) - headings
- **Inter** (`font-sans`) - body text

Reusable component classes defined in `src/index.css` using `@layer components`:
- Headings: `.heading-hero`, `.heading-1`, `.heading-2`, `.heading-3`
- Buttons: `.btn-primary`, `.btn-secondary`, `.btn-ghost`
- Cards: `.card`, `.card-feature`
- Layout: `.section`, `.section-alt`, `.container-page`

### Content Source
`content/workshop-sales-page.md` contains the original copywriting reference. Components contain the actual rendered content (some adjusted from source).

## Deployment

```bash
./deploy.sh      # Preflight + build + deploy naar productie (geen passphrase nodig)
```

Deployment flow: `./preflight.sh` → `npm run build` → rsync naar server → `docker cp` naar WordPress container → chown fix

- **Server:** Hetzner (37.27.183.46) via SSH alias `coolify-deploy`
- **Container:** `wordpress-d0wko4gskokosssogcw8040g`
- **Pad in container:** `/var/www/html/workshopclaudecode`
- **Live URL:** https://frankmeeuwsen.com/workshopclaudecode/
- **SSH key:** `~/.ssh/id_rsa_no_pass` (passphrase-loos, specifiek voor automated deploys)

## Conventions

- Components use static data arrays + `.map()` for list rendering (benefits, FAQ items, timeline)
- Inline SVG icons (Heroicons-style) rather than an icon library
- StickyBar has separate mobile (bottom) and desktop (top) layouts triggered by scroll position (600px threshold)
- Anchor links use `#inschrijven` for CTA scroll targets

### Verificatie Werkwijze

**Voor elke wijziging: check bestaande patronen** in de code voordat je iets nieuws toevoegt. Hoe doen vergelijkbare items het? Gebruik dezelfde aanpak.

**Wanneer `./preflight.sh` draaien:**
- Nieuwe bestanden toevoegen (afbeeldingen, componenten)
- Nieuwe data-entries met paden of URLs
- Imports of exports wijzigen
- Structurele wijzigingen (nieuw component, nieuwe route)
- Configuratie aanpassen (vite.config, tailwind.config)

**Niet nodig bij:**
- Tekst aanpassen (quote, titel, beschrijving)
- Getallen wijzigen (bijv. availableSpots)
- CSS tweaks (kleur, spacing, font-size)

Vuistregel: als het kan breken, check het. Als het alleen tekst is, niet.

### Static Assets (BELANGRIJK)
- Statische bestanden (afbeeldingen, etc.) staan in `public/`
- **Altijd** `${import.meta.env.BASE_URL}` als prefix gebruiken bij verwijzingen vanuit code
- Reden: productie draait op `/workshopclaudecode/`, niet op `/`
- Voorbeeld: `` src={`${import.meta.env.BASE_URL}foto.jpg`} ``
- NOOIT: `src="/foto.jpg"` (werkt lokaal maar breekt op productie)
- `./preflight.sh` detecteert hardcoded paden automatisch