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:

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:

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:

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