workshopclaudecode/PRD.md

# PRD: Configuratie centraliseren - Claude Code Workshop Sales Page

## Context

De sales page heeft workshopdetails (datum, tijd, locatie, prijs, e-mail) hardcoded staan in 8+ componenten tegelijk. Als de workshop een nieuwe datum krijgt, moet je nu 20+ plekken aanpassen in 8 bestanden - en de kans op fouten is groot. De audit bevestigt dit: Footer.jsx zegt al "Max 7" terwijl alles "Max 8" is.

Doel: één plek om de workshop te updaten, alle componenten lezen daaruit.

---

## Wat het doet (gewone taal)

Je wijzigt de datum van de workshop. Nu open je `src/config/workshop.js`, typt de nieuwe datum, en alle tekst op de pagina klopt automatisch: de hero, de sticky balk, de footer, de FAQ, de pricing-sectie, de e-maillink. Geen "zoek en vervang" meer door 8 bestanden. Geen inconsistentie meer zoals "Max 7 vs Max 8".

---

## Hoe het eruitziet (de config-interface)

Na implementatie ziet `src/config/workshop.js` er zo uit:

```js
export const WORKSHOP_CONFIG = {
  // Beschikbaarheid
  totalSpots: 8,
  availableSpots: 0,
  isSoldOut: true,

  // Workshopdetails (pas hier aan voor nieuwe editie)
  date: 'vrijdag 3 april 2026',
  dateShort: '3 april',
  time: '9:00 - 14:00',
  timeStart: '9:00',
  timeEnd: '14:00',
  location: 'Utrecht',
  venue: 'Wonders of Work, Utrecht',
  maxParticipants: 8,

  // Prijs
  price: '€399',
  priceExclBtw: 'excl. BTW',

  // Trainer
  email: 'frank@frankmeeuwsen.com',
};
```

En `src/config/payment.js` bevat:

```js
export const PAYMENT_CONFIG = {
  SIGNUP_URL: '/inschrijven',
  WAITLIST_URL: '/wachtlijst-inschrijven',
  SIGNUP_TALLY_ID: 'XxGBrV',    // was hardcoded in Signup.jsx
  WAITLIST_TALLY_ID: 'kdyPJZ',
};
```

Componenten importeren wat ze nodig hebben:
```js
import { WORKSHOP_CONFIG } from '../config/workshop';
const { date, price, email } = WORKSHOP_CONFIG;
```

---

## Bouwfasen

### Fase 1 - Snelle fixes en config completeren (minimum waarde)

**Wat:** Los de bekende bugs op, verwijder rommel, zet de Tally form ID in config.

**Wijzigingen:**
- `Footer.jsx:25` - "Max 7" corrigeren naar "Max 8" (bug fix)
- `public/og-image.old.png` verwijderen (700KB ongebruikt)
- `public/vite.svg` verwijderen (ongebruikt)
- `src/config/payment.js` - voeg `SIGNUP_TALLY_ID: 'XxGBrV'` toe
- `src/pages/Signup.jsx` - vervang hardcoded form ID door `PAYMENT_CONFIG.SIGNUP_TALLY_ID`
- `preflight.sh` - maak ESLint-fouten blokkerend (stop script bij lint-fouten)

**Resultaat:** Geen bugs, geen rommel, form ID beheerbaar vanuit config.

**Verificatie:** `./preflight.sh` slaagt, Footer toont "Max 8", Signup.jsx heeft geen hardcoded Tally ID meer.

---

### Fase 2 - Workshop details centraliseren (kern van het project)

**Wat:** Breid `workshop.js` uit met alle workshopdetails en laat alle componenten daaruit lezen.

**Wijzigingen in `src/config/workshop.js`:**
- Voeg toe: `date`, `dateShort`, `time`, `timeStart`, `timeEnd`, `location`, `venue`, `maxParticipants`, `price`, `priceExclBtw`, `email`

**Componenten bijwerken (hardcoded waarden vervangen door config-import):**
- `Hero.jsx` - datum, tijd, locatie (3 plekken)
- `FinalCTA.jsx` - datum, tijd, max deelnemers (3 plekken)
- `Footer.jsx` - datum, tijd, locatie/venue, email (5 plekken)
- `StickyBar.jsx` - datum, locatie, prijs (4 plekken)
- `Pricing.jsx` - prijs, max deelnemers (3 plekken)
- `Program.jsx` - tijden in de samenvatting-tekst (1 plek)
- `FAQ.jsx` - prijs, refund verwijzingen (2 plekken)

**Resultaat:** Eén config-bestand om een nieuwe editie te lanceren. Geen inconsistente waarden meer.

**Verificatie:** Wijzig `date` in workshop.js en verifieer dat Hero, Footer, StickyBar en FinalCTA allemaal de nieuwe datum tonen. `./preflight.sh` slaagt.

---

### Fase 3 - Code deduplicatie

**Wat:** Verwijder dubbele code in de inschrijfpagina's.

**Wijzigingen:**
- Maak `src/components/TallyForm.jsx` - gedeeld component met `formId` prop
- Vervangt identieke Tally embed-logica in `Signup.jsx` en `WaitlistSignup.jsx`

**Resultaat:** Tally embed-logica op één plek beheerbaar.

**Verificatie:** Inschrijfflow en wachtlijstflow werken beide nog correct. `./preflight.sh` slaagt.

---

### Fase 4 - Deployment en kwaliteitsverbetering

**Wat:** Maak het deployen veiliger en los kleine inconsistenties op.

**Wijzigingen:**
- `deploy.sh` - voeg post-deploy HTTP-check toe (curl naar live URL, verwacht HTTP 200)
- Valutainconsistentie: `FAQ.jsx:34` en `Installatie.jsx:60` uniformeren naar "€"

**Resultaat:** Deploy geeft automatisch feedback of de live URL bereikbaar is. Alle valuta consistent.

**Verificatie:** Deploy uitvoeren en curl-check zien slagen in de output.

---

## Kritieke bestanden

| Bestand | Rol |
|---------|-----|
| `src/config/workshop.js` | Centrale config - wordt uitgebreid |
| `src/config/payment.js` | Betaalconfig - SIGNUP_TALLY_ID toevoegen |
| `src/components/Hero.jsx` | Hardcoded datum/tijd/locatie |
| `src/components/Footer.jsx` | Hardcoded datum/tijd/venue/email + bug "Max 7" |
| `src/components/StickyBar.jsx` | Hardcoded datum/locatie/prijs |
| `src/components/FinalCTA.jsx` | Hardcoded datum/tijd/max deelnemers |
| `src/components/Pricing.jsx` | Hardcoded prijs/max deelnemers |
| `src/components/FAQ.jsx` | Hardcoded prijs + valutainconsistentie |
| `src/pages/Signup.jsx` | Hardcoded Tally form ID |
| `preflight.sh` | ESLint niet blokkerend |
| `deploy.sh` | Geen post-deploy check |
| `public/og-image.old.png` | Ongebruikt, 700KB |
| `public/vite.svg` | Ongebruikt |

---

## Status bouwfasen

| Fase | Beschrijving | Status |
|------|-------------|--------|
| Fase 1 | Snelle fixes + config completeren | Nog niet gestart |
| Fase 2 | Workshop details centraliseren | Nog niet gestart |
| Fase 3 | Code deduplicatie | Nog niet gestart |
| Fase 4 | Deployment en kwaliteit | Nog niet gestart |