workshopclaudecode/LOGBOEK.md

# Project Logboek - Claude Code Workshop Sales Page

**Totaal gedocumenteerde tijd:** ~360 min (geschat)

---

## 2026-04-17 - Sessie 8: Migratie naar workshopclaudecode.nl (~240 min)

### Wat is gebouwd
- Volledige migratie van `https://frankmeeuwsen.com/workshopclaudecode/` naar `https://workshopclaudecode.nl`
- Hosting verhuisd van subdirectory in WordPress Docker container naar aparte Coolify static-app container (zelfde Hetzner server, 37.27.183.46)
- Multi-stage Dockerfile: node:20-alpine bouwt Vite output, nginx:alpine serveert dist/
- nginx.conf met `try_files $uri $uri/ /index.html` voor correcte SPA-routing
- Public Forgejo repo aangemaakt: https://forgejo.dutchstack.nl/frankmeeuwsen/workshopclaudecode
- Vite `base` pad gewijzigd van `/workshopclaudecode/` naar `/`
- 301 redirect `.htaccess` in WordPress container: `/workshopclaudecode/*` -> `https://workshopclaudecode.nl/*` (met pad-behoud)
- Nieuwe Mollie payment link aangemaakt met redirect naar `https://workshopclaudecode.nl/bedankt`
- Tally form `kd7y81` bijgewerkt met nieuwe redirect URL
- `deploy.sh` verwijderd, vervangen door auto-deploy via Coolify webhook
- `availableSpots` bijgewerkt naar 5 (3 plekken verkocht)
- `CLAUDE.md` bijgewerkt met nieuwe deploy-flow en Forgejo URLs

### Technische beslissingen
- Coolify static-app via Dockerfile build pack (niet Static of Nixpacks) voor maximale controle over SPA-fallback in nginx
- Public repo gekozen boven private + deploy key na een uur SSH-key debuggen: code bevat geen secrets en wordt sowieso publiek geserveerd
- Coolify webhook: juiste URL is de Source Webhook onder de Webhooks tab (niet de "Deploy via API" URL)
- `.htaccess.bak` opgeslagen als backup van originele .htaccess in WordPress container

### Geverifieerde werking productie
- Homepage HTTP 200, HTTP/2 + HTTP/3, geldig SSL
- SPA routes `/inschrijven`, `/bedankt`, `/voorwaarden`, `/privacy` werken correct
- OG/canonical tags wijzen naar workshopclaudecode.nl
- Test-inschrijving via Tally -> Mollie -> /bedankt werkt end-to-end
- 301 redirect oude URL met pad-behoud werkt
- Webhook Forgejo -> Coolify triggert auto-deploy bij git push

### Commits deze sessie
- `feat: migratie naar workshopclaudecode.nl als root domein`
- `feat: Docker setup voor Coolify deploy (nginx + SPA fallback)`
- `chore: deploy.sh verwijderen (vervangen door Coolify auto-deploy)`
- `fix: content/ niet uitsluiten in Dockerfile build context`
- `chore: availableSpots naar 5 (3 plekken verkocht)`
- `docs: CLAUDE.md bijwerken naar nieuwe Coolify deploy-flow`
- `test: availableSpots tijdelijk naar 6 voor webhook deploy-test` + revert

### Volgende sessie
- [ ] `www.workshopclaudecode.nl` toevoegen als 2e domein in Coolify (geeft nu SSL-fout, niet kritisch)
- [ ] Cloudflare/Forgejo URL-eenheid uitzoeken (SSH op git.dutchstack.nl vs HTTPS op forgejo.dutchstack.nl)
- [ ] Over ~1 maand: oude statische bestanden uit WordPress container opruimen, alleen .htaccess laten staan
- [ ] Signup.jsx regel ~75: hardcoded datum/tijd/locatie nog naar WORKSHOP_CONFIG migreren

---

## 2026-03-04 - Sessie 7: Installatiepagina voor deelnemers (40 min)

### Wat is gebouwd
- Nieuwe `/installatie` pagina aangemaakt (`src/pages/Installatie.jsx`) voor workshop deelnemers
- OS-tabs (Mac/Windows) met conditional rendering voor OS-specifieke instructies
- Accordion component voor terminal informatie (uitklapbaar)
- Numbered steps layout voor stapsgewijze installatie-instructies
- 5 screenshots geintegreerd in `public/images/installatie/` met correcte `BASE_URL` paden
- OS-afhankelijke welcome screenshots (Mac vs Windows)
- Route toegevoegd in `src/main.jsx` (`/installatie`)
- Content markdown bestanden toegevoegd: `content/installatie-desktop.md` en `content/installatie-workshop.md`
- `preflight.sh` regex fix voor subdirectory asset paden (`public/images/submap/`)

### Technische beslissingen
- OS-tab state via `useState` in Installatie.jsx (geen extra library)
- Accordion toggle via lokale state per sectie
- Screenshots via `${import.meta.env.BASE_URL}images/installatie/...` (consistent met bestaand patroon)
- Preflight regex uitgebreid zodat subdirectory paden in `public/` correct gedetecteerd worden

### Volgende sessie
- [ ] Installatiepagina link mailen naar deelnemers voor de workshop (6 maart)
- [ ] Final check: alle links werken op productie
- [ ] Opening herwerken met sterkere pain point hook

---

## 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