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:** zie `src/config/workshop.js` (datum, tijd, locatie, prijs, beschikbare plekken). Niet hardcoden in deze CLAUDE.md - die raakt anders out-of-sync.

## Commands

```bash
npm run dev      # Vite dev server on port 5173
npm run build    # Production build to dist/
npm run preview  # Preview production build (port 4173)
npm run lint     # ESLint
./preflight.sh   # Pre-push 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

**Auto-deploy via Coolify**: elke `git push` naar `main` triggert Coolify om de Dockerfile te bouwen en de nieuwe nginx-container live te zetten. Geen handmatig deploy-script meer.

Workflow:
1. `./preflight.sh` lokaal draaien (lint + build + asset path check)
2. `git push` (naar `origin/main` → Forgejo)
3. Coolify pulled, bouwt `Dockerfile` (multi-stage node→nginx), deployt
4. Verifieer op https://workshopclaudecode.nl/

- **Live URL:** https://workshopclaudecode.nl
- **Repo:** `git@git.dutchstack.nl:frankmeeuwsen/workshopclaudecode.git` (SSH push) / `https://forgejo.dutchstack.nl/frankmeeuwsen/workshopclaudecode.git` (HTTPS clone, gebruikt door Coolify) - zie memory `forgejo_urls.md`
- **Hosting:** Coolify static-app container op Hetzner (37.27.183.46) via SSH alias `coolify-deploy`
- **SSL:** Let's Encrypt automatisch via Traefik (Coolify regelt dit)
- **Build artefacten in repo:** `Dockerfile` + `nginx.conf` (SPA fallback via try_files) + `.dockerignore`

### Legacy redirect

De oude URL `https://frankmeeuwsen.com/workshopclaudecode/*` 301-redirect naar `https://workshopclaudecode.nl/*` met pad-behoud. Dit zit in een `.htaccess` in de WordPress container (`wordpress-d0wko4gskokosssogcw8040g`, pad `/var/www/html/workshopclaudecode/.htaccess`). Backup van originele htaccess staat als `.htaccess.bak` naast.

## Actief project: Configuratie centraliseren

Zie `PRD.md` voor het volledige bouwplan. Korte samenvatting:

**Doel:** Alle workshopdetails (datum, tijd, locatie, prijs, e-mail) centraliseren in `src/config/workshop.js` zodat een nieuwe editie een one-stop-change is.

| Fase | Beschrijving | Status |
|------|-------------|--------|
| Fase 1 | Snelle fixes + config completeren (bug Footer, ongebruikte assets, Tally ID in config, ESLint blokkerend) | Afgerond |
| Fase 2 | Workshop details centraliseren in workshop.js - 7 componenten bijwerken | Afgerond |
| Fase 3 | Code deduplicatie - gedeeld TallyForm component | Afgerond |
| Fase 4 | Deployment en kwaliteit - post-deploy check, valuta-inconsistentie | Afgerond |

### Openstaande punten (volgende sessie)

- **Signup.jsx workshopsamenvatting:** Regel ~75 bevat hardcoded datum/tijd/locatie ("Vrijdag 3 april 2026 | 9:00 - 14:00 | Utrecht"). Kan naar WORKSHOP_CONFIG als die pagina hergebruikt wordt.

---

## 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
- Statische bestanden (afbeeldingen, etc.) staan in `public/`
- Vite `base` staat op `/` (productie draait op het root domein workshopclaudecode.nl)
- **Toch** `${import.meta.env.BASE_URL}` als prefix blijven gebruiken — toekomstbestendig en `./preflight.sh` controleert hierop
- Voorbeeld: `` src={`${import.meta.env.BASE_URL}foto.jpg`} ``
- Vermijd: `src="/foto.jpg"` (werkt nu wel maar breekt zodra base ooit weer een sub-pad wordt)