feat: installatiepagina voor workshop deelnemers

- Nieuwe /installatie pagina met OS-tabs (Mac/Windows) en accordion - Screenshots geintegreerd in public/images/installatie/ (5 bestanden) - Route toegevoegd in main.jsx - Content markdown bestanden: installatie-desktop.md + installatie-workshop.md - preflight.sh regex fix voor subdirectory asset paden - LOGBOEK.md sessie 7 entry toegevoegd (40 min) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-04 07:27:14 +01:00 · 2026-03-04 07:27:14 +01:00 · 9811425e61
commit 9811425e61
parent 07f504c989
12 changed files with 889 additions and 3 deletions
--- 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
--- a/content/installatie-desktop.md
+++ 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.
+
+![Claude Code download pagina met download knop](/images/installatie/desktop-installatie.png)
+
+
+**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.
+
+![Claude Code welkomstscherm met Sign in knop](/images/installatie/desktop-installatie-signin.png)
+
+**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**.
+
+![Schakelaar bovenin de app om te wisselen tussen Claude Chat en Claude Code](/images/installatie/desktop-installatie-schuif-claude-boven.png)
+
+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.
+
+![Claude Code hoofdscherm met chat interface en overzicht](/images/installatie/desktop-installatie-uitleg-onderdelen-scherm.png)
+
+## 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"
+
+<video src="/images/installatie/desktop-installatie-selecteer-folder.mp4"></video>
+
+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!
--- a/content/installatie-workshop.md
+++ 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.
--- 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)"
--- a/public/images/installatie/desktop-installatie-schuif-claude-boven.png
+++ b/public/images/installatie/desktop-installatie-schuif-claude-boven.png
--- a/public/images/installatie/desktop-installatie.png
+++ b/public/images/installatie/desktop-installatie.png
--- a/public/images/installatie/mac-installatie-inloggen.png
+++ b/public/images/installatie/mac-installatie-inloggen.png
--- a/public/images/installatie/windows-git-installatie-melding.png
+++ b/public/images/installatie/windows-git-installatie-melding.png
--- a/public/images/installatie/windows-installatie-inloggen.png
+++ b/public/images/installatie/windows-installatie-inloggen.png
--- 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,
 };
--- 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(
  <StrictMode>
@ -21,6 +22,7 @@ createRoot(document.getElementById('root')).render(
        <Route path="/bedankt" element={<ThankYou />} />
        <Route path="/wachtlijst-inschrijven" element={<WaitlistSignup />} />
        <Route path="/wachtlijst-bedankt" element={<WaitlistThankYou />} />
+        <Route path="/installatie" element={<Installatie />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>,
--- a/src/pages/Installatie.jsx
+++ 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 (
+    <div className="min-h-screen bg-warm-50">
+      {/* Header */}
+      <header className="bg-white border-b border-warm-200 py-6">
+        <div className="container-page">
+          <Link
+            to="/"
+            className="text-coral-500 hover:text-coral-600 transition-colors inline-flex items-center gap-2"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Terug naar workshop
+          </Link>
+        </div>
+      </header>
+
+      {/* Content */}
+      <main className="container-page py-12">
+        <div className="max-w-3xl mx-auto">
+          {/* Intro */}
+          <h1 className="heading-hero mb-4">Installatie-instructies</h1>
+          <p className="text-xl text-warm-600 mb-10">
+            Bereid je voor op de workshop door Claude Code alvast te installeren.
+            Volg onderstaande stappen en je bent binnen 10 minuten klaar.
+          </p>
+
+          {/* Sectie 1: Wat je nodig hebt */}
+          <section className="mb-10">
+            <h2 className="heading-2 mb-4">Wat je nodig hebt</h2>
+            <div className="card">
+              <ul className="space-y-4">
+                <li className="flex gap-3">
+                  <svg className="w-5 h-5 text-coral-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <div>
+                    <p className="font-semibold text-warm-900">Een Claude abonnement</p>
+                    <p className="text-warm-600">
+                      Claude Code werkt alleen met een{' '}
+                      <a href="https://claude.ai/pricing" target="_blank" rel="noopener noreferrer" className="text-coral-500 hover:text-coral-600">
+                        betaald Claude account
+                      </a>
+                      . Claude Pro kost $18/maand, Claude Max $90/maand. Start met Pro.
+                    </p>
+                  </div>
+                </li>
+                <li className="flex gap-3">
+                  <svg className="w-5 h-5 text-coral-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <div>
+                    <p className="font-semibold text-warm-900">Een Mac of Windows computer</p>
+                    <p className="text-warm-600">De desktop app werkt op beide platforms. Neem deze laptop mee naar de workshop.</p>
+                  </div>
+                </li>
+                <li className="flex gap-3">
+                  <svg className="w-5 h-5 text-coral-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <div>
+                    <p className="font-semibold text-warm-900">Een internetverbinding</p>
+                    <p className="text-warm-600">Voor het downloaden en om met Claude te communiceren. Je installeert een app, maar de AI draait online.</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </section>
+
+          {/* Sectie 2: Desktop of terminal? */}
+          <section className="mb-10">
+            <h2 className="heading-2 mb-4">Desktop of terminal?</h2>
+            <p className="text-warm-600 mb-4">
+              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.
+            </p>
+            <p className="text-warm-600 mb-6">
+              Het is wel handig om te weten wat de terminal is. Als je daar al bekend mee bent, sla dit dan over.
+            </p>
+
+            <div className="bg-white rounded-xl border border-warm-200 overflow-hidden">
+              <button
+                onClick={() => setTerminalOpen(!terminalOpen)}
+                className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-warm-50 transition-colors"
+                aria-expanded={terminalOpen}
+              >
+                <span className="heading-3">Wat is de terminal?</span>
+                <svg
+                  className={`w-5 h-5 text-coral-500 flex-shrink-0 transition-transform duration-200 ${
+                    terminalOpen ? 'rotate-180' : ''
+                  }`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+
+              {terminalOpen && (
+                <div className="px-6 pb-6 space-y-4">
+                  <p className="text-warm-600">
+                    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.
+                  </p>
+
+                  <div className="space-y-3">
+                    <p className="font-semibold text-warm-800">Terminal openen:</p>
+                    <ul className="space-y-2 text-warm-600">
+                      <li className="flex gap-2">
+                        <span className="font-semibold text-warm-700">Mac:</span>
+                        <span>Druk <code className="bg-warm-100 text-warm-800 px-1.5 py-0.5 rounded text-sm font-mono">Cmd + Spatie</code>, typ "Terminal", druk Enter</span>
+                      </li>
+                      <li className="flex gap-2">
+                        <span className="font-semibold text-warm-700">Windows:</span>
+                        <span>Druk de Windows-toets, typ "PowerShell", klik erop</span>
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div className="space-y-3">
+                    <p className="font-semibold text-warm-800">4 basiscommando's:</p>
+                    <div className="space-y-2">
+                      <div>
+                        <div className="bg-warm-900 text-warm-100 rounded-lg px-4 py-2 font-mono text-sm">pwd</div>
+                        <p className="text-warm-500 text-sm mt-1">Waar ben ik? Toont het pad naar je huidige map.</p>
+                      </div>
+                      <div>
+                        <div className="bg-warm-900 text-warm-100 rounded-lg px-4 py-2 font-mono text-sm">ls</div>
+                        <p className="text-warm-500 text-sm mt-1">Wat staat hier? Toont bestanden en mappen. Op Windows: <code className="bg-warm-100 text-warm-800 px-1 py-0.5 rounded text-sm font-mono">dir</code></p>
+                      </div>
+                      <div>
+                        <div className="bg-warm-900 text-warm-100 rounded-lg px-4 py-2 font-mono text-sm">cd mapnaam</div>
+                        <p className="text-warm-500 text-sm mt-1">Ga naar een map. <code className="bg-warm-100 text-warm-800 px-1 py-0.5 rounded text-sm font-mono">cd ..</code> gaat een map terug.</p>
+                      </div>
+                      <div>
+                        <div className="bg-warm-900 text-warm-100 rounded-lg px-4 py-2 font-mono text-sm">mkdir mapnaam</div>
+                        <p className="text-warm-500 text-sm mt-1">Maak een nieuwe map aan.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </section>
+
+          {/* Sectie 3: Desktop app installeren */}
+          <section className="mb-10">
+            <h2 className="heading-2 mb-4">Claude Code desktop app installeren</h2>
+            <p className="text-warm-600 mb-6">
+              Ga naar{' '}
+              <a href="https://claude.com/download" target="_blank" rel="noopener noreferrer" className="text-coral-500 hover:text-coral-600 font-semibold">
+                claude.com/download
+              </a>
+              {' '}en download de app voor jouw besturingssysteem.
+            </p>
+
+            <img
+              src={`${import.meta.env.BASE_URL}images/installatie/desktop-installatie.png`}
+              alt="Claude Code download pagina"
+              className="rounded-xl border border-warm-200 mb-6"
+            />
+
+            {/* OS Tab switcher */}
+            <div className="flex gap-2 mb-6">
+              <button
+                onClick={() => setActiveOS('mac')}
+                className={`px-5 py-2 rounded-lg font-semibold transition-all ${
+                  activeOS === 'mac'
+                    ? 'bg-coral-500 text-white'
+                    : 'bg-white text-warm-700 border border-warm-200 hover:border-warm-300'
+                }`}
+              >
+                Mac
+              </button>
+              <button
+                onClick={() => setActiveOS('windows')}
+                className={`px-5 py-2 rounded-lg font-semibold transition-all ${
+                  activeOS === 'windows'
+                    ? 'bg-coral-500 text-white'
+                    : 'bg-white text-warm-700 border border-warm-200 hover:border-warm-300'
+                }`}
+              >
+                Windows
+              </button>
+            </div>
+
+            {/* Mac instructies */}
+            {activeOS === 'mac' && (
+              <div className="card">
+                <h3 className="font-semibold text-warm-900 mb-4">Installatie op Mac</h3>
+                <ol className="space-y-4 text-warm-600">
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">1</span>
+                    <span>Download het .dmg bestand van claude.com/download</span>
+                  </li>
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">2</span>
+                    <span>Open het bestand en sleep het Claude icoon naar je Applications map</span>
+                  </li>
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">3</span>
+                    <span>Klaar! Open de app vanuit je Applications map of via Spotlight (Cmd + Spatie, typ "Claude")</span>
+                  </li>
+                </ol>
+
+              </div>
+            )}
+
+            {/* Windows instructies */}
+            {activeOS === 'windows' && (
+              <div className="card">
+                <h3 className="font-semibold text-warm-900 mb-4">Installatie op Windows</h3>
+                <ol className="space-y-4 text-warm-600">
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">1</span>
+                    <span>Download het .exe bestand van claude.com/download</span>
+                  </li>
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">2</span>
+                    <span>Dubbelklik op het bestand om de installer te starten</span>
+                  </li>
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">3</span>
+                    <span>Volg de installatiestappen</span>
+                  </li>
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">4</span>
+                    <span>Claude Code wordt automatisch toegevoegd aan je Start menu</span>
+                  </li>
+                </ol>
+
+              </div>
+            )}
+          </section>
+
+          {/* Sectie 4: Git voor Windows (alleen zichtbaar bij Windows) */}
+          {activeOS === 'windows' && (
+            <section className="mb-10">
+              <h2 className="heading-2 mb-4">Git installeren (Windows)</h2>
+              <div className="card">
+                <p className="text-warm-600 mb-4">
+                  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.
+                </p>
+
+                <img
+                  src={`${import.meta.env.BASE_URL}images/installatie/windows-git-installatie-melding.png`}
+                  alt="Foutmelding in Claude Code wanneer Git niet geinstalleerd is"
+                  className="rounded-xl border border-warm-200 mb-4"
+                />
+
+                <ol className="space-y-4 text-warm-600 mb-6">
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">1</span>
+                    <span>
+                      Ga naar{' '}
+                      <a href="https://git-scm.com/download/win" target="_blank" rel="noopener noreferrer" className="text-coral-500 hover:text-coral-600 font-semibold">
+                        git-scm.com/download/win
+                      </a>
+                    </span>
+                  </li>
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">2</span>
+                    <span>Download de "Standalone Installer" (64-bit)</span>
+                  </li>
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">3</span>
+                    <span>Voer de installer uit en klik steeds op "Next" (de standaardinstellingen zijn prima)</span>
+                  </li>
+                  <li className="flex gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">4</span>
+                    <span>Klik op "Install" en wacht tot het klaar is</span>
+                  </li>
+                </ol>
+
+                {/* Waarschuwingsblok: herstart */}
+                <div className="bg-teal-50 border border-teal-200 rounded-lg px-4 py-3">
+                  <p className="text-teal-700 font-semibold">Start je computer opnieuw op na de installatie van Git.</p>
+                  <p className="text-teal-600 text-sm mt-1">
+                    Door te herstarten worden alle instellingen automatisch goed gezet. Je hoeft niets handmatig aan te passen.
+                  </p>
+                </div>
+              </div>
+            </section>
+          )}
+
+          {/* Sectie 5: Eerste keer opstarten */}
+          <section className="mb-10">
+            <h2 className="heading-2 mb-4">Eerste keer opstarten</h2>
+            <div className="card">
+              <ol className="space-y-4 text-warm-600">
+                <li className="flex gap-3">
+                  <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">1</span>
+                  <div>
+                    <p className="font-semibold text-warm-900">Open de Claude app</p>
+                    <p>Je ziet een welkomstscherm met de mogelijkheid om in te loggen.</p>
+                    {activeOS === 'mac' ? (
+                      <img
+                        src={`${import.meta.env.BASE_URL}images/installatie/mac-installatie-inloggen.png`}
+                        alt="Claude for Mac welkomstscherm"
+                        className="rounded-xl border border-warm-200 mt-2"
+                      />
+                    ) : (
+                      <img
+                        src={`${import.meta.env.BASE_URL}images/installatie/windows-installatie-inloggen.png`}
+                        alt="Claude Code welkomstscherm met Sign in knop"
+                        className="rounded-xl border border-warm-200 mt-2"
+                      />
+                    )}
+                  </div>
+                </li>
+                <li className="flex gap-3">
+                  <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">2</span>
+                  <div>
+                    <p className="font-semibold text-warm-900">Log in met je Claude account</p>
+                    <p>Kies om in te loggen via email of Google. Je browser opent automatisch. Geef toestemming voor de desktop app.</p>
+                  </div>
+                </li>
+                <li className="flex gap-3">
+                  <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">3</span>
+                  <div>
+                    <p className="font-semibold text-warm-900">Schakel over naar Claude Code</p>
+                    <p>Na het inloggen land je in Claude Chat. Bovenin het scherm zie je een schakelaar. Zet die om naar <strong>Claude Code</strong>. Dit hoef je maar een keer te doen.</p>
+                    <img
+                      src={`${import.meta.env.BASE_URL}images/installatie/desktop-installatie-schuif-claude-boven.png`}
+                      alt="Schakelaar bovenin de app om te wisselen tussen Claude Chat en Claude Code"
+                      className="rounded-xl border border-warm-200 mt-2"
+                    />
+                  </div>
+                </li>
+                <li className="flex gap-3">
+                  <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">4</span>
+                  <div>
+                    <p className="font-semibold text-warm-900">Je ziet het Claude Code scherm</p>
+                    <p>Een chat interface in het midden en een overzicht van gesprekken links. Je bent klaar!</p>
+                  </div>
+                </li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Sectie 6: Project directory kiezen */}
+          <section className="mb-10">
+            <h2 className="heading-2 mb-4">Projectmap aanmaken</h2>
+            <div className="card">
+              <p className="text-warm-600 mb-4">
+                Claude Code werkt altijd binnen een projectmap. Maak vooraf een map aan waar je tijdens de workshop in gaat werken.
+              </p>
+
+              <ol className="space-y-4 text-warm-600 mb-6">
+                <li className="flex gap-3">
+                  <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">1</span>
+                  <div>
+                    <p>
+                      Maak een map aan met de naam{' '}
+                      <code className="bg-warm-100 text-warm-800 px-1.5 py-0.5 rounded text-sm font-mono">Projecten</code>
+                      {' '}in je Documenten (via Finder op Mac of Verkenner op Windows)
+                    </p>
+                  </div>
+                </li>
+                <li className="flex gap-3">
+                  <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">2</span>
+                  <div>
+                    <p>
+                      Open deze map in Claude Code via het mapicoon rechtsboven
+                      (of <code className="bg-warm-100 text-warm-800 px-1.5 py-0.5 rounded text-sm font-mono">Cmd+O</code> op Mac,{' '}
+                      <code className="bg-warm-100 text-warm-800 px-1.5 py-0.5 rounded text-sm font-mono">Ctrl+O</code> op Windows)
+                    </p>
+                  </div>
+                </li>
+              </ol>
+
+              {/* Waarschuwing over toegang */}
+              <div className="bg-warm-100 border border-warm-200 rounded-lg px-4 py-3">
+                <p className="text-warm-700 font-semibold">Let op: werk altijd in een aparte projectmap</p>
+                <p className="text-warm-600 text-sm mt-1">
+                  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.
+                </p>
+              </div>
+            </div>
+          </section>
+
+          {/* Sectie 7: Verificatie */}
+          <section className="mb-10">
+            <h2 className="heading-2 mb-4">Controleer of alles werkt</h2>
+            <div className="card">
+              <p className="text-warm-600 mb-4">
+                Typ in Claude Code:{' '}
+                <code className="bg-warm-100 text-warm-800 px-1.5 py-0.5 rounded text-sm font-mono">Hallo Claude, vertel me waar ik ben.</code>
+              </p>
+              <p className="text-warm-600 mb-6">
+                Claude antwoordt met informatie over je huidige werkmap. Dit bevestigt dat alles werkt.
+              </p>
+
+              <div className="border-t border-warm-200 pt-4">
+                <p className="font-semibold text-warm-800 mb-3">Checklist:</p>
+                <ul className="space-y-2">
+                  <li className="flex gap-2 text-warm-600">
+                    <svg className="w-5 h-5 text-teal-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span>Claude abonnement actief</span>
+                  </li>
+                  <li className="flex gap-2 text-warm-600">
+                    <svg className="w-5 h-5 text-teal-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span>Desktop app geinstalleerd en geopend</span>
+                  </li>
+                  <li className="flex gap-2 text-warm-600">
+                    <svg className="w-5 h-5 text-teal-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span>Ingelogd en overgeschakeld naar Claude Code</span>
+                  </li>
+                  <li className="flex gap-2 text-warm-600">
+                    <svg className="w-5 h-5 text-teal-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span>Projecten-map aangemaakt en geopend in Claude Code</span>
+                  </li>
+                  {activeOS === 'windows' && (
+                    <li className="flex gap-2 text-warm-600">
+                      <svg className="w-5 h-5 text-teal-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                      <span>Git geinstalleerd en computer herstart</span>
+                    </li>
+                  )}
+                </ul>
+              </div>
+            </div>
+          </section>
+
+          {/* Sectie 8: Problemen oplossen */}
+          <section className="mb-10">
+            <h2 className="heading-2 mb-4">Problemen oplossen</h2>
+            <div className="space-y-4">
+              <div className="card">
+                <p className="font-semibold text-warm-900 mb-2">App start niet na installatie</p>
+                <ul className="list-disc pl-6 space-y-1 text-warm-600">
+                  <li><strong>Mac:</strong> Check of je de app naar Applications hebt gesleept</li>
+                  <li><strong>Windows:</strong> Probeer de installer opnieuw als administrator uit te voeren</li>
+                </ul>
+              </div>
+
+              <div className="card">
+                <p className="font-semibold text-warm-900 mb-2">Kan niet inloggen</p>
+                <ul className="list-disc pl-6 space-y-1 text-warm-600">
+                  <li>Check of je een Claude Pro of Max account hebt (gratis werkt niet)</li>
+                  <li>Probeer uit te loggen en opnieuw in te loggen in je browser</li>
+                </ul>
+              </div>
+
+              {activeOS === 'windows' && (
+                <div className="card">
+                  <p className="font-semibold text-warm-900 mb-2">Foutmelding over Git in de desktop app</p>
+                  <ul className="list-disc pl-6 space-y-1 text-warm-600">
+                    <li>Installeer Git via de stappen hierboven</li>
+                    <li>Start je computer opnieuw op na de Git-installatie</li>
+                    <li>Open daarna pas de Claude Code app weer</li>
+                  </ul>
+                </div>
+              )}
+
+              <div className="card">
+                <p className="font-semibold text-warm-900 mb-2">Geen project directory kunnen kiezen</p>
+                <ul className="list-disc pl-6 space-y-1 text-warm-600">
+                  <li>Zorg dat de Projecten-map bestaat en dat je leesrechten hebt</li>
+                  <li>Maak een nieuwe lege map in je Documenten als het niet lukt</li>
+                </ul>
+              </div>
+            </div>
+          </section>
+
+          {/* Contact */}
+          <div className="text-center py-6">
+            <p className="text-warm-500">
+              Kom je er niet uit? Mail naar{' '}
+              <a href="mailto:frank@frankmeeuwsen.com" className="text-coral-500 hover:text-coral-600">
+                frank@frankmeeuwsen.com
+              </a>
+            </p>
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-warm-900 text-warm-400 py-6">
+        <div className="container-page text-center text-sm">
+          &copy; {new Date().getFullYear()} Frank Meeuwsen. Alle rechten voorbehouden.
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default Installatie;