workshopclaudecode/LOGBOEK.md

# Project Logboek - Claude Code Workshop Sales Page

## 2025-01-29 - Sessie 1: Initiële setup en content aanpassingen (~25m)

### Wat is gebouwd
- Hero sectie uitgebreid met twee-kolommen layout (tekst links, afbeelding placeholder rechts)
- Workshop details (datum, tijd, locatie) prominent gemaakt met grote iconen en labels
- Testimonials sectie verplaatst naar boven "Wat je meeneemt naar huis"
- React Router toegevoegd voor pagina navigatie
- Privacy pagina aangemaakt (/privacy) met standaard tekst
- Algemene Voorwaarden pagina aangemaakt (/voorwaarden) met standaard tekst
- Footer bijgewerkt met werkende links naar juridische pagina's

### Content aanpassingen
- Lunch tekst: "Wonders of Work heeft een heerlijke lunch voor ons klaarstaan..."
- Kleuren omgewisseld: "Wat je nodig hebt" = groen (teal), "Wat je niet nodig hebt" = rood (coral)
- Social links toegevoegd: LinkedIn (linkedin.com/in/frankmeeuwsen), Website (frankmeeuwsen.com)
- Prijs: €449 excl. BTW (was incl. BTW)
- Verwijderd uit inbegrepen: werkboek en community access
- "Vol is vol" tekst verwijderd
- FAQ "geld terug" vraag verwijderd
- Footer: "Claude Code Hands-on Sessie" + email contact + LinkedIn
- Contact: alleen email (frank@frankmeeuwsen.com) en LinkedIn, geen telefoon

### Technische beslissingen
- React Router DOM toegevoegd voor multi-page support
- Aparte pages folder aangemaakt voor Privacy en Terms componenten
- Link componenten gebruikt voor interne navigatie (SEO-vriendelijk)

### Volgende sessie
- [x] Echte afbeelding toevoegen in Hero placeholder
- [x] Bio tekst invullen in Trainer sectie
- [x] Privacy en Voorwaarden teksten finaliseren
- [x] Testimonials content toevoegen (echte quotes)
- [ ] Inschrijfformulier/betaallink toevoegen

## 2026-02-10 - Sessie 2: Content sync, juridische pagina's en cookiebanner

### Wat is gebouwd
- Content gesynchroniseerd van workshop-sales-page.md naar alle JSX componenten
- Prijs aangepast: €449 → €399 excl. BTW (in Pricing, StickyBar, Terms)
- Max deelnemers aangepast: 7 → 8
- Echte testimonial toegevoegd (Floor van Riet)
- Privacybeleid volledig uitgeschreven (AVG-compliant, met Umami analytics en Google Fonts vermelding)
- Algemene Voorwaarden volledig uitgeschreven (14 artikelen, herroepingsrecht-uitzondering, getrapt annuleringsbeleid)
- CookieBanner component gebouwd met localStorage persistentie
- FAQ uitgebreid met annuleringsvraag (consistent met getrapt beleid)
- KvK-nummer (98386247) en vestigingsplaats (Utrecht) ingevuld in Privacy en Terms

### Technische beslissingen
- CookieBanner gebruikt localStorage om "Begrepen" keuze te onthouden
- Herroepingsrecht expliciet uitgesloten (art. 6:230p lid 1 sub l BW) - workshops met vaste datum
- Bewaartermijn factuurgegevens: 7 jaar (fiscale bewaarplicht)

## 2026-02-10 - Sessie 3: Hero titel en workshop foto

### Wat is gebouwd
- Nieuwe hero headline: "Bouw zelf wat je nu huurt - met Claude Code" (business-gericht)
- Headline hiërarchie aangepast: nieuwe titel als h1, "Van dit moet ik uitzoeken naar dit werkt gewoon" als subheadline
- Trainer sectie: placeholder SVG vervangen door echte foto + 4 bio-alinea's
- Workshop foto geüpdatet (frank-workshop-claude-code.jpg)

### Technische beslissingen
- Hero twee-kolommen layout: tekst links, foto rechts (verborgen op mobile)
- CSS filters op foto: brightness(1.12) contrast(1.05) saturate(0.95)
- Workshop details (datum/tijd/locatie) compact weergegeven met iconen

### Volgende sessie
- [x] Inschrijfformulier/betaallink toevoegen
- [x] Deploy naar productie
- [x] SEO meta tags toevoegen (Open Graph, Twitter Cards)
- [x] Formulier validatie en betalingsflow

## 2026-02-10 - Sessie 4: Mollie betaalflow, SEO en deploy

### Wat is gebouwd
- Mollie Payment Links aangemaakt (test + live) voor workshop betaling
- Tally formulier geintegreerd voor e-mailverzameling voor inschrijving
- Inschrijfpagina (/inschrijven) met embedded Tally formulier
- Bedankt-pagina (/bedankt) voor na succesvolle betaling
- Payment config bestand (src/config/payment.js) voor centrale URL configuratie
- CTA-knoppen (Pricing, FinalCTA, StickyBar) gelinkt naar inschrijfpagina via React Router Link
- Hero CTA scrollt nog steeds naar pricing sectie
- OpenGraph en Twitter Card meta tags in index.html
- OG-afbeelding (1200x630) gemaakt in Canva met site-kleuren en headline
- SVG favicon (coral CC icoon)
- Umami analytics script toegevoegd (zelfde ID als frankmeeuwsen.com)
- Canonical URL ingesteld
- Base path config (/workshopclaudecode/) alleen voor production builds
- .htaccess voor SPA-routing in submap
- Deploy script (deploy.sh) voor build + upload naar Coolify Docker container
- Site live gedeployd op https://frankmeeuwsen.com/workshopclaudecode/

### Technische beslissingen
- Tally als tussenstap voor e-mailverzameling (geen backend nodig, AVG-compliant, gratis)
- Betaalflow: CTA -> /inschrijven (Tally embed) -> Mollie betaalpagina -> /bedankt
- Vite base path conditioneel: / voor dev, /workshopclaudecode/ voor build
- React Router basename via import.meta.env.BASE_URL (werkt automatisch in beide modes)
- Hero afbeelding pad via import.meta.env.BASE_URL voor correcte submap-verwijzing
- Deploy via rsync + docker cp naar WordPress container op Coolify

### Volgende sessie
- [ ] Testimonials toevoegen zodra beschikbaar
- [ ] Structured data (JSON-LD Event schema) toevoegen
- [ ] Eerste testbetaling via live link verifiëren

## 2026-02-23 - Sessie 6: Wachtlijst flow en sold-out logica (duur: onbekend)

### Wat is gebouwd
- `availableSpots` bijgewerkt van 7 naar 3 (5 stoelen verkocht)
- Centrale workshop config aangemaakt: `src/config/workshop.js` met `totalSpots`, `availableSpots` en `isSoldOut`
- "Nog X plekken beschikbaar" toegevoegd aan StickyBar (desktop + mobile) en FinalCTA
- Wachtlijst flow gebouwd: `WaitlistSignup.jsx` + `WaitlistThankYou.jsx`
- Tally wachtlijst formulier ID `kdyPJZ` gekoppeld (https://tally.so/r/kdyPJZ)
- Twee nieuwe routes: `/wachtlijst-inschrijven` en `/wachtlijst-bedankt`
- Conditionale CTA's in Hero, FinalCTA, StickyBar en Pricing: schakelen automatisch om bij `isSoldOut: true`
- Testimonial Jefta Bade foto toegevoegd
- Alles gecommit en live gezet op https://frankmeeuwsen.com/workshopclaudecode/

### Technische beslissingen
- Centrale config in `src/config/workshop.js` zodat sold-out status op één plek te beheren is
- `isSoldOut` als boolean: bij `true` verdwijnen inschrijf-CTA's en verschijnt wachtlijst-flow overal
- Wachtlijst via Tally embed (zelfde patroon als inschrijfformulier)

### Volgende sessie
- [ ] Aanbeveling 1: Opening herwerken met sterkere pain point hook
- [ ] Aanbeveling 2: Specifieke tools/voorbeelden toevoegen aan Benefits sectie
- [ ] Aanbeveling 3: Flow optimaliseren (PainPoints -> Testimonials -> Benefits)
- [ ] Aanbeveling 4: CTA buttons verfijnen (consistente button-teksten)
- [ ] Aanbeveling 5: Pre-workshop checklist toevoegen

## 2026-02-12 - Sessie 5: Concurrentieanalyse en annuleringsbeleid (20 min)

### Wat is gebouwd
- Concurrentieanalyse AI Automation Society salespagina vergeleken met onze workshop pagina
- Rapport met 6 concrete aanbevelingen (content/analyse-ai-automation-society.md)
- Annuleringsbeleid zichtbaar gemaakt in Pricing sectie met shield-icoon en compacte tekst
- Todo-lijst aangemaakt (todos.md) met 5 openstaande optimalisaties
- Firecrawl CLI geïnstalleerd en geauthenticeerd voor web scraping

### Content aanpassingen
- Pricing component: annuleringsbeleid direct onder CTA-button getoond
- Visueel: shield-check icoon (teal) + grijze tekst met link naar voorwaarden
- Tekst: "Tot 2 weken voor start: volledige restitutie. Bekijk annuleringsbeleid"

### Analyse inzichten
- AI Automation Society gebruikt testimonials met concrete resultaten (€220k+ ROI)
- Hun flow: probleem-stelling -> live demo -> testimonials -> programma -> CTA
- Onze sterktes: duidelijke timing/locatie, concrete leerdoelen, kleinschalig karakter
- Verbeterpunten: meer concrete voorbeelden, sterker pain point, social proof met resultaten

### Volgende sessie
- [ ] Aanbeveling 1: Opening herwerken met sterkere pain point hook
- [ ] Aanbeveling 2: Specifieke tools/voorbeelden toevoegen aan Benefits sectie
- [ ] Aanbeveling 3: Flow optimaliseren (PainPoints -> Testimonials -> Benefits)
- [ ] Aanbeveling 4: CTA buttons verfijnen (consistente button-teksten)
- [ ] Aanbeveling 5: Pre-workshop checklist toevoegen