diff --git a/LOGBOEK.md b/LOGBOEK.md
index 8f7562b..9e8a5b7 100644
--- a/LOGBOEK.md
+++ b/LOGBOEK.md
@@ -1,5 +1,31 @@
# Project Logboek - Claude Code Workshop Sales Page
+## 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
diff --git a/content/installatie-desktop.md b/content/installatie-desktop.md
new file mode 100644
index 0000000..d91b243
--- /dev/null
+++ b/content/installatie-desktop.md
@@ -0,0 +1,126 @@
+---
+title: "Installatie"
+slug: "installatie"
+duration: "10 min"
+order: 0
+description: "Download en installeer de Claude Code desktop app"
+icon: "💻"
+published: true
+type: desktop
+variant: true
+---
+
+# Installatie van Claude Code
+
+De makkelijkste manier om met Claude Code te starten is via de desktop app. Je downloadt een programma, installeert het, en klaar. Je hoeft niet in de terminal commando's uit te voeren.
+
+## Wat je nodig hebt
+
+Voordat je begint, check of je het volgende hebt:
+
+- **Een Claude abonnement** - Claude Code werkt alleen met een [betaald Claude account](https://claude.com/pricing) (vanaf €20/maand) of Claude Team/Enterprise. De gratis versie ondersteunt geen Code functionaliteit.
+- **Een Mac of Windows computer** - De desktop app werkt op beide platforms.
+- **Een internetverbinding** - Voor het downloaden en om met Claude te communiceren. Je download wel een app op je laptop, maar je maakt nog altijd gebruik van de online vesie van de Claude modellen.
+
+## De desktop app downloaden
+
+Ga naar [https://claude.com/download](https://claude.com/download) en klik op de download knop voor Mac of Windows.
+
+
+
+
+**Voor Mac:**
+- Download het .dmg bestand
+- Open het bestand
+- Sleep het Claude Code icoon naar je Applications map
+- Klaar
+
+**Voor Windows:**
+- Download het .exe bestand
+- Dubbelklik om de installer te starten
+- Volg de installatie stappen
+- Claude Code wordt automatisch toegevoegd aan je Start menu
+
+## Eerste keer opstarten
+
+Open de Claude Code app. Je ziet een welkomstscherm met de mogelijkheid om in te loggen.
+
+
+
+**Inloggen:**
+1. Klik op je keuze om met email in te loggen of via Google. Als je al een account hebt op Claude, kun je dat account gebruiken
+2. Je browser opent automatisch
+3. Log in met je Claude account
+4. Geef toestemming voor de desktop app
+5. Je browser vertelt je dat je terug kunt naar de app
+6. De app is nu klaar voor gebruik
+
+Je hoeft dit maar één keer te doen. De volgende keer dat je de app opent ben je automatisch ingelogd.
+
+## Schakel over naar Claude Code
+
+**Let op**: na het inloggen land je standaard in **Claude Chat** — de gewone chatassistent. Dat is niet hetzelfde als Claude Code.
+
+Bovenin het scherm zie je een schakelaar. Zet die om naar **Claude Code**.
+
+
+
+Je doet dit eenmalig. De volgende keer dat je de app opent onthoud hij waar je was.
+
+## Verificatie dat het werkt
+
+Na het omschakelen zie je het hoofdscherm van Claude Code. Dit bestaat uit:
+
+- **Een chat interface** in het midden — hier typ je wat je wilt dat Claude doet
+- **Een overzicht van chats en navigatie** aan de linkerkant — hier zie je vorige gesprekken en kun je nieuwe gesprekken beginnen.
+
+
+
+## Project directory kiezen
+
+Claude Code werkt altijd binnen één project directory. Dit is de map waar je project bestanden staan.
+
+**Een directory kiezen:**
+1. Klik op de map icoon rechtsboven (of gebruik Cmd+O op Mac, Ctrl+O op Windows)
+2. Navigeer naar de map waar je wilt werken
+3. Klik "Open"
+
+
+
+Claude kan nu alle bestanden in die map zien en bewerken. Je hoeft niet handmatig bestanden te openen. Claude doet dat automatisch als het nodig is.
+
+
+**Geen project nog?** Maak dan een nieuwe map aan via Finder (Mac) of Verkenner (Windows). Bijvoorbeeld een map "ClaudeCodeZandbak" in je Documenten. Die kun je dan openen in Claude Code. De reden om deze zo te noemen? Een zandbak is in programmeerkringen een folder waarin je kunt experimenteren, spelen, proberen. Daarbij is het zo dat Claude alleen in deze map zal werken tenzij jij er expliciet toestemming voor geeft om buiten de folders te gaan.
+
+Opdracht:
+Type eens: "Hallo Claude, vertel me waar ik ben."
+Claude antwoordt met informatie over je huidige werkdirectory. Dit bevestigt dat alles werkt.
+
+## Aandachtspunt
+
+Geef Claude Code niet zomaar toestemming om op je hele computer te werken. Een ongeluk zit in een klein hoekje. Op deze manier geef je toestemming aan Claude om overal op je computer iets te kunnen doen. Bestanden maken, aanpassen en verwijderen. Dat kan desastreuze en onomkeerbare gevolgen hebben. Maak altijd een aparte folder waar je je Claude Code projecten in doet. Doe dat los van je belangrijke werk- en privé documenten.
+
+Als je toegang geeft tot de map, zal eerst Claude en later je computer nogmaals vragen of je zeker weet dat je toegang verleent aan de map. Je computer zal iets vragen als "Claude wil toegang tot je map Documenten" of een vergelijkbare map (Desktop, Onedrive, Dropbox). Het is maar net waar je je projectmap maakt. Hiermee geef je *niet* toegang tot alle mappen in bv Documenten, maar alleen tot de map die jij hebt gekozen. Het is een wat ongelukkige woordkeuze van Apple en Windows.
+
+## Wat je nu kunt
+
+Je hebt nu een werkende Claude Code installatie. De desktop app draait, je bent ingelogd, en je hebt een project directory gekozen.
+
+In de volgende module leer je je eerste commando's geven aan Claude. Je gaat bestanden laten lezen, code laten schrijven, en zien hoe Claude je helpt met dagelijkse taken.
+
+## Troubleshooting
+
+**App start niet na installatie:**
+- Mac: Check of je de app naar Applications hebt gesleept
+- Windows: Probeer de installer opnieuw als administrator uit te voeren
+
+**Kan niet inloggen:**
+- Check of je een Claude Pro, Team of Enterprise account hebt
+- Gratis accounts werken niet met Claude Code
+- Probeer uit te loggen en opnieuw in te loggen in je browser
+
+**Geen project directory kunnen kiezen:**
+- Zorg dat de map bestaat en dat je leesrechten hebt
+- Maak een nieuwe lege map in je Documenten en kies die map.
+
+Kom je er niet uit? De community op [Digitale Fitheid](https://start.digitalefitheid.nl/) helpt graag!
diff --git a/content/installatie-workshop.md b/content/installatie-workshop.md
new file mode 100644
index 0000000..30a9510
--- /dev/null
+++ b/content/installatie-workshop.md
@@ -0,0 +1,215 @@
+---
+title: Claude Code installeren
+slug: installatie
+duration: 10 min
+order: 0
+description: "Alles wat je nodig hebt om te starten: abonnement, terminal basics, en installatie."
+icon: 💥
+published: true
+---
+
+## Voordat je begint met werken.
+
+Voordat je aan de slag kunt met Claude Code, moet je twee dingen regelen:
+1. Een Claude abonnement (dit kost geld)
+2. Claude Code installeren op je computer
+
+Geen zorgen - we lopen alles stap voor stap door.
+
+---
+
+## Wat heb je nodig?
+
+### Een Claude abonnement
+
+Claude Code is helaas niet gratis. Je hebt een betaald abonnement nodig:
+
+- **Claude Pro** ($18/maand) - Toegang tot Claude Code met maandelijkse limiet
+- **Claude Max** ($90/maand) - Meer capaciteit voor intensief gebruik
+
+Je kunt een abonnement afsluiten op [claude.ai](https://claude.ai).
+
+*Tip: Start met Pro. Je kunt altijd upgraden als je merkt dat je meer nodig hebt.*
+
+### Een computer
+
+Claude Code werkt op:
+- **Mac** (macOS 10.15 of nieuwer)
+- **Windows** (Windows 10 of nieuwer)
+- **Linux** (Ubuntu 20.04 of nieuwer)
+
+### 10 minuten tijd
+
+Dat is alles. Laten we beginnen!
+
+---
+
+## Wat is een terminal?
+
+Hier haken veel mensen af. "Terminal? Dat is toch iets voor hackers?"
+
+Nee. Een terminal is gewoon een venster waar je tekstcommando's typt in plaats van te klikken. Meer niet.
+
+Denk aan het verschil tussen:
+- **Met de muis:** Klik op map → klik op bestand → dubbelklik om te openen
+- **Met de terminal:** Typ `open bestand.txt` en druk Enter
+
+Beide doen hetzelfde. De terminal is alleen sneller als je weet wat je typt.
+
+### Terminal openen op Mac
+
+1. Druk **Cmd + Spatie** (Spotlight zoeken opent)
+2. Typ **Terminal**
+3. Druk **Enter**
+
+Je ziet nu een wit of zwart venster met een knipperende cursor. Dat is je terminal!
+
+### Terminal openen op Windows (PowerShell)
+
+1. Druk op de **Windows toets**
+2. Typ **PowerShell**
+3. Klik op **Windows PowerShell**
+
+Je ziet nu een blauw venster met een knipperende cursor. Dat is je terminal!
+
+*Tip: Je hoeft niet bang te zijn. Als je iets verkeerd typt, gebeurt er meestal gewoon... niets. Of je krijgt een foutmelding. Je computer ontploft niet.*
+
+---
+
+## De 4 basis commando's
+
+Voordat je Claude Code installeert, leer ik je eerst 4 simpele commando's. Dit zijn de enige die je voorlopig echt nodig hebt.
+
+### 1. `pwd` - Waar ben ik?
+
+```bash
+pwd
+```
+
+Dit toont het volledige pad naar de map waar je nu bent. Handig als je "verdwaald" bent.
+
+**Voorbeeld output:**
+```
+/Users/frank/Documents
+```
+
+### 2. `ls` - Wat staat hier?
+
+```bash
+ls
+```
+
+Dit toont alle bestanden en mappen in je huidige locatie.
+
+**Op Windows:** Gebruik `dir` in plaats van `ls`.
+
+**Voorbeeld output:**
+```
+Desktop Documents Downloads Pictures
+```
+
+### 3. `cd` - Ga naar een map
+
+```bash
+cd Documents
+```
+
+Dit brengt je naar de map "Documents". Je kunt ook:
+- `cd ..` - Ga een map terug (naar de "bovenliggende" map)
+- `cd ~` - Ga naar je home folder
+
+### 4. `mkdir` - Maak een nieuwe map
+
+```bash
+mkdir mijn-project
+```
+
+Dit maakt een nieuwe map aan met de naam "mijn-project".
+
+### Probeer het!
+
+Open je terminal en probeer deze oefening:
+
+```bash
+pwd # Waar ben ik?
+ls # Wat staat hier?
+mkdir oefenmap # Maak een map
+cd oefenmap # Ga naar die map
+pwd # Check: ben ik in de oefenmap?
+```
+
+Als je dit kunt, ben je klaar voor Claude Code!
+
+---
+
+## Claude Code installeren
+
+Nu komt het echte werk. Open je terminal en volg de stappen voor jouw systeem.
+
+### Op Mac of Linux
+
+Kopieer dit commando en plak het in je terminal:
+
+```bash
+curl -fsSL https://claude.ai/install.sh | bash
+```
+
+Druk op **Enter** en wacht tot de installatie klaar is.
+
+### Op Windows
+
+Open PowerShell en voer dit commando uit:
+
+```powershell
+irm https://claude.ai/install.ps1 | iex
+```
+
+Druk op **Enter** en wacht tot de installatie klaar is.
+
+---
+
+## Inloggen
+
+Na de installatie moet je inloggen met je Claude account.
+
+1. Typ in je terminal: `claude`
+2. Er opent een browservenster
+3. Log in met je Claude account (dezelfde waarmee je je abonnement hebt)
+4. Klik op **Toestaan** om Claude Code toegang te geven
+5. Ga terug naar je terminal
+
+Je ziet nu de Claude Code interface. Gefeliciteerd!
+
+---
+
+## Check: werkt het?
+
+Typ dit in je terminal om te controleren of alles goed is geinstalleerd:
+
+```bash
+claude --version
+```
+
+Je zou een versienummer moeten zien, bijvoorbeeld `1.0.5` of hoger.
+
+### Problemen?
+
+**"command not found" of "niet herkend als opdracht"**
+- Sluit je terminal en open een nieuwe
+- Probeer het commando opnieuw
+
+**Inloggen lukt niet**
+- Check of je een actief Claude abonnement hebt op claude.ai
+- Probeer in je browser eerst uit te loggen en opnieuw in te loggen
+
+---
+
+## Samenvatting
+
+Je hebt nu:
+- [x] Een Claude abonnement
+- [x] Claude Code geinstalleerd
+- [x] Ingelogd met je account
+- [x] Gecontroleerd dat het werkt
+
+**Klaar voor de volgende stap!** In de volgende module ga je je eerste commando's uitvoeren.
diff --git a/preflight.sh b/preflight.sh
index 102acdf..84ea2fc 100755
--- a/preflight.sh
+++ b/preflight.sh
@@ -59,7 +59,7 @@ done
# Zoek alle BASE_URL referenties en check of het bestand bestaat in public/
# Matcht alleen bestandsnamen (letters, cijfers, punt, streepje, underscore)
-REFS=$(grep -roh 'BASE_URL}[a-zA-Z0-9._-]*' src/ --include="*.jsx" --include="*.js" 2>/dev/null | sed 's/BASE_URL}//' | grep -v '^$' || true)
+REFS=$(grep -roh 'BASE_URL}[a-zA-Z0-9._/~-]*' src/ --include="*.jsx" --include="*.js" 2>/dev/null | sed 's/BASE_URL}//' | grep -v '^$' || true)
for ref in $REFS; do
if [ ! -f "public/$ref" ]; then
echo " FOUT: public/$ref bestaat niet (gerefereerd in code)"
diff --git a/public/images/installatie/desktop-installatie-schuif-claude-boven.png b/public/images/installatie/desktop-installatie-schuif-claude-boven.png
new file mode 100644
index 0000000..15b8b75
Binary files /dev/null and b/public/images/installatie/desktop-installatie-schuif-claude-boven.png differ
diff --git a/public/images/installatie/desktop-installatie.png b/public/images/installatie/desktop-installatie.png
new file mode 100644
index 0000000..89419f6
Binary files /dev/null and b/public/images/installatie/desktop-installatie.png differ
diff --git a/public/images/installatie/mac-installatie-inloggen.png b/public/images/installatie/mac-installatie-inloggen.png
new file mode 100644
index 0000000..87f91f9
Binary files /dev/null and b/public/images/installatie/mac-installatie-inloggen.png differ
diff --git a/public/images/installatie/windows-git-installatie-melding.png b/public/images/installatie/windows-git-installatie-melding.png
new file mode 100644
index 0000000..97b577d
Binary files /dev/null and b/public/images/installatie/windows-git-installatie-melding.png differ
diff --git a/public/images/installatie/windows-installatie-inloggen.png b/public/images/installatie/windows-installatie-inloggen.png
new file mode 100644
index 0000000..b4fa59d
Binary files /dev/null and b/public/images/installatie/windows-installatie-inloggen.png differ
diff --git a/src/config/workshop.js b/src/config/workshop.js
index 90e66b9..06bf6d9 100644
--- a/src/config/workshop.js
+++ b/src/config/workshop.js
@@ -8,6 +8,6 @@
export const WORKSHOP_CONFIG = {
totalSpots: 8,
- availableSpots: 1,
- isSoldOut: false,
+ availableSpots: 0,
+ isSoldOut: true,
};
diff --git a/src/main.jsx b/src/main.jsx
index f9c06ef..73542c4 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -9,6 +9,7 @@ import ThankYou from './pages/ThankYou.jsx'
import Signup from './pages/Signup.jsx'
import WaitlistSignup from './pages/WaitlistSignup.jsx'
import WaitlistThankYou from './pages/WaitlistThankYou.jsx'
+import Installatie from './pages/Installatie.jsx'
createRoot(document.getElementById('root')).render(
@@ -21,6 +22,7 @@ createRoot(document.getElementById('root')).render(
} />
} />
} />
+ } />
,
diff --git a/src/pages/Installatie.jsx b/src/pages/Installatie.jsx
new file mode 100644
index 0000000..5d8ef88
--- /dev/null
+++ b/src/pages/Installatie.jsx
@@ -0,0 +1,517 @@
+/**
+ * Installatie.jsx - Installatie-instructies voor workshop deelnemers
+ *
+ * Onepager met stap-voor-stap installatie van de Claude Code desktop app.
+ * Bevat OS-tabs (Mac/Windows) en een accordion voor terminal-uitleg.
+ */
+
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+function Installatie() {
+ // Terminal accordion: standaard dicht
+ const [terminalOpen, setTerminalOpen] = useState(false);
+ // OS-tab: standaard Mac
+ const [activeOS, setActiveOS] = useState('mac');
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ Terug naar workshop
+
+
+
+
+ {/* Content */}
+
+
+ {/* Intro */}
+
Installatie-instructies
+
+ Bereid je voor op de workshop door Claude Code alvast te installeren.
+ Volg onderstaande stappen en je bent binnen 10 minuten klaar.
+
+
+ {/* Sectie 1: Wat je nodig hebt */}
+
+
Wat je nodig hebt
+
+
+
+
+
+
Een Claude abonnement
+
+ Claude Code werkt alleen met een{' '}
+
+ betaald Claude account
+
+ . Claude Pro kost $18/maand, Claude Max $90/maand. Start met Pro.
+
+
+
+
+
+
+
Een Mac of Windows computer
+
De desktop app werkt op beide platforms. Neem deze laptop mee naar de workshop.
+
+
+
+
+
+
Een internetverbinding
+
Voor het downloaden en om met Claude te communiceren. Je installeert een app, maar de AI draait online.
+
+
+
+
+
+
+ {/* Sectie 2: Desktop of terminal? */}
+
+
Desktop of terminal?
+
+ Claude Code kun je op twee manieren gebruiken: via de desktop app of via de terminal (command line).
+ Beide zijn volwaardig. Voor deze workshop starten we met de desktop app - die is het makkelijkst om mee te beginnen.
+
+
+ Het is wel handig om te weten wat de terminal is. Als je daar al bekend mee bent, sla dit dan over.
+
+
+
+
+
+ {terminalOpen && (
+
+
+ Een terminal is een venster waar je tekstcommando's typt in plaats van te klikken.
+ Je hoeft dit niet te beheersen voor de workshop, maar het helpt om te weten dat het bestaat.
+
+
+
+
Terminal openen:
+
+
+ Mac:
+ Druk Cmd + Spatie, typ "Terminal", druk Enter
+
+
+ Windows:
+ Druk de Windows-toets, typ "PowerShell", klik erop
+
+
+
+
+
+
4 basiscommando's:
+
+
+
pwd
+
Waar ben ik? Toont het pad naar je huidige map.
+
+
+
ls
+
Wat staat hier? Toont bestanden en mappen. Op Windows: dir
+ 1
+ Download het .exe bestand van claude.com/download
+
+
+ 2
+ Dubbelklik op het bestand om de installer te starten
+
+
+ 3
+ Volg de installatiestappen
+
+
+ 4
+ Claude Code wordt automatisch toegevoegd aan je Start menu
+
+
+
+
+ )}
+
+
+ {/* Sectie 4: Git voor Windows (alleen zichtbaar bij Windows) */}
+ {activeOS === 'windows' && (
+
+
Git installeren (Windows)
+
+
+ Op Windows heb je Git nodig om foutmeldingen in de Claude Code desktop app te voorkomen.
+ Git is een programma dat Claude Code gebruikt om je bestanden bij te houden.
+
+ Claude Code werkt altijd binnen een projectmap. Maak vooraf een map aan waar je tijdens de workshop in gaat werken.
+
+
+
+
+ 1
+
+
+ Maak een map aan met de naam{' '}
+ Projecten
+ {' '}in je Documenten (via Finder op Mac of Verkenner op Windows)
+
+
+
+
+ 2
+
+
+ Open deze map in Claude Code via het mapicoon rechtsboven
+ (of Cmd+O op Mac,{' '}
+ Ctrl+O op Windows)
+
+
+
+
+
+ {/* Waarschuwing over toegang */}
+
+
Let op: werk altijd in een aparte projectmap
+
+ Geef Claude Code niet zomaar toegang tot je hele computer. Claude kan bestanden maken, aanpassen en verwijderen.
+ Door in een aparte map te werken, beperk je wat Claude kan doen. Je computer vraagt mogelijk of Claude toegang mag
+ tot "Documenten" - daarmee geef je alleen toegang tot de gekozen map, niet tot alles in Documenten.
+
+
+
+
+
+ {/* Sectie 7: Verificatie */}
+
+
Controleer of alles werkt
+
+
+ Typ in Claude Code:{' '}
+ Hallo Claude, vertel me waar ik ben.
+
+
+ Claude antwoordt met informatie over je huidige werkmap. Dit bevestigt dat alles werkt.
+
+
+
+
Checklist:
+
+
+
+ Claude abonnement actief
+
+
+
+ Desktop app geinstalleerd en geopend
+
+
+
+ Ingelogd en overgeschakeld naar Claude Code
+
+
+
+ Projecten-map aangemaakt en geopend in Claude Code
+
+ {activeOS === 'windows' && (
+
+
+ Git geinstalleerd en computer herstart
+
+ )}
+
+
+
+
+
+ {/* Sectie 8: Problemen oplossen */}
+
+
Problemen oplossen
+
+
+
App start niet na installatie
+
+
Mac: Check of je de app naar Applications hebt gesleept
+
Windows: Probeer de installer opnieuw als administrator uit te voeren
+
+
+
+
+
Kan niet inloggen
+
+
Check of je een Claude Pro of Max account hebt (gratis werkt niet)
+
Probeer uit te loggen en opnieuw in te loggen in je browser
+
+
+
+ {activeOS === 'windows' && (
+
+
Foutmelding over Git in de desktop app
+
+
Installeer Git via de stappen hierboven
+
Start je computer opnieuw op na de Git-installatie
+
Open daarna pas de Claude Code app weer
+
+
+ )}
+
+
+
Geen project directory kunnen kiezen
+
+
Zorg dat de Projecten-map bestaat en dat je leesrechten hebt
+
Maak een nieuwe lege map in je Documenten als het niet lukt