feat: sync sales page content en voeg CLAUDE.md toe

Content wijzigingen uit workshop-sales-page.md doorgevoerd naar alle
sectie-componenten: herziene intro, prijsaanpassing (€449→€399),
max deelnemers (7→8), echte testimonial (Floor van Riet), en
diverse tekstaanpassingen in Hero, PainPoints, Benefits, Testimonials,
ForWho, Pricing en FinalCTA.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Frank Meeuwsen 2026-02-10 11:19:21 +01:00
parent 06ecb5157c
commit 40f49db5ac
9 changed files with 179 additions and 123 deletions

63
CLAUDE.md Normal file
View file

@ -0,0 +1,63 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
Sales page for the "Claude Code Workshop" - a hands-on workshop for Dutch entrepreneurs (ZZP/MKB). Built as a static React SPA. All content is in Dutch (nl).
**Workshop details:** Friday March 6, 2026 | 9:00-14:00 | Utrecht | €449 excl. BTW | Max 7 participants
## Commands
```bash
npm run dev # Vite dev server on port 5173
npm run build # Production build to dist/
npm run preview # Preview production build
npm run lint # ESLint
```
## Architecture
**React 19 + Vite 7 + Tailwind CSS 3** (dark mode via `class` strategy)
### Routing
- `src/main.jsx` - React Router setup with BrowserRouter
- `/` - Main sales page (App.jsx orchestrates all section components)
- `/privacy` - Privacy policy page
- `/voorwaarden` - Terms & conditions page
### Component Structure
`src/components/` contains the sales page sections, rendered in conversion-optimized order in App.jsx:
Hero → PainPoints → Testimonials → Benefits → Program → ForWho → Trainer → Pricing → FAQ → FinalCTA → Footer → StickyBar
All components are barrel-exported from `src/components/index.js`.
`src/pages/` contains standalone route pages (Privacy.jsx, Terms.jsx).
### Design System
Custom color tokens defined in `tailwind.config.js`:
- **coral** (primary/CTA): `coral-500` = #F25C3D
- **teal** (accent): `teal-500` = #14B8A6
- **warm** (neutrals): brown-gray scale for text and backgrounds
Custom fonts loaded via Google Fonts in `index.html`:
- **Bricolage Grotesque** (`font-display`) - headings
- **Inter** (`font-sans`) - body text
Reusable component classes defined in `src/index.css` using `@layer components`:
- Headings: `.heading-hero`, `.heading-1`, `.heading-2`, `.heading-3`
- Buttons: `.btn-primary`, `.btn-secondary`, `.btn-ghost`
- Cards: `.card`, `.card-feature`
- Layout: `.section`, `.section-alt`, `.container-page`
### Content Source
`content/workshop-sales-page.md` contains the original copywriting reference. Components contain the actual rendered content (some adjusted from source).
## Conventions
- Components use static data arrays + `.map()` for list rendering (benefits, FAQ items, timeline)
- Inline SVG icons (Heroicons-style) rather than an icon library
- StickyBar has separate mobile (bottom) and desktop (top) layouts triggered by scroll position (600px threshold)
- Anchor links use `#inschrijven` for CTA scroll targets

View file

@ -9,7 +9,7 @@
In 1 ochtend van nieuwsgierig naar praktisch aan de slag met Claude Code. Je gaat naar huis met je eigen werkende project. In 1 ochtend van nieuwsgierig naar praktisch aan de slag met Claude Code. Je gaat naar huis met je eigen werkende project.
### Intro ### Intro
Je hebt van Claude Code gehoord. Misschien zelfs al even mee gespeeld. Maar ergens tussen de installatie en dat eerste echte resultaat ben je blijven hangen. Herkenbaar? In deze hands-on workshop doorbreek je die drempel. Samen met maximaal 6 andere ondernemers ga je van nul naar een werkend project dat je direct kunt gebruiken in je business. Je gebruikt Claude of een ander AI model voor research en teksten schrijven. Je snapt hoe prompts werken. Maar wat als Claude niet alleen in je browser werkt, maar rechtstreeks op je computer? Dan kan het bestanden lezen, code aanpassen en tools installeren zonder dat jij hoeft te kopiëren en plakken. Misschien heb je al eens met Claude Code geëxperimenteerd. Maar ergens tussen de installatie en dat eerste echte resultaat ben je blijven hangen. Herkenbaar voor je? In deze _hands-on workshop_ stap je over die drempel. Samen met maximaal 7 andere ondernemers ga je van nul naar een werkend project dat je direct kunt gebruiken in je business. En je loopt naar buiten met een fundamenteel ander idee hoe je onderneming en je team kan werken met software en AI.
### CTA ### CTA
**Schrijf je in - nog [X] plaatsen** **Schrijf je in - nog [X] plaatsen**
@ -19,42 +19,41 @@ Je hebt van Claude Code gehoord. Misschien zelfs al even mee gespeeld. Maar erge
## 2. Pain Points ("Herkenbaar?") ## 2. Pain Points ("Herkenbaar?")
### Section Title ### Section Title
**Herkenbaar?** **Is dit herkenbaar voor je?**
### Pain Points ### Pain Points
- Je hebt YouTube tutorials gekeken, maar zodra je zelf begint loopt het anders dan in de video?
- Je weet dat AI tools je kunnen helpen, maar je hebt geen idee waar je moet beginnen met Claude Code? - Je weet dat AI tools je kunnen helpen, maar je hebt geen idee waar je moet beginnen met Claude Code?
- Je collega's of concurrenten werken al met AI, en jij bent nog aan het uitzoeken hoe het werkt? - Je betaalt elke maand voor verschillende tools die niet met elkaar praten en waar je nét niet dat in kan doen wat je wilt voor jouw business.
- Je hebt weinig tijd om te experimenteren, en trial-and-error voelt als verspilling van kostbare uren? - Je hebt weinig tijd om te experimenteren en trial-and-error voelt als verspilling van kostbare uren?
Da's frustrerend. Want je weet dat je sneller zou kunnen werken, betere output zou kunnen leveren. Maar die drempel... die blijft maar in de weg zitten. - Je team besteedt teveel tijd aan terugkerende taken die prima zijn te automatiseren. Maar waar begin je?
Dat is frustrerend. Want je weet dat je sneller zou kunnen werken, betere output zou kunnen leveren. Maar die drempel... die blijft maar in de weg zitten. En je business loopt door. Je voelt dat er iets kan veranderen.
--- ---
## 3. Benefits / Solution ## 3. Benefits / Solution
### Section Title ### Section Title
**Wat je meeneemt naar huis** **Wat je meeneemt naar je onderneming**
### Benefits ### Benefits
- **Een werkend project** - Geen theorie, maar iets dat je maandag direct kunt gebruiken in je business. - **Een werkend project** - Geen theorie, maar een app die je maandag direct kunt gebruiken in je bedrijf. Een data analyse app, een betere planningsmodule of zelfgebouwde roostersoftware waar je geen duur abonnement meer voor nodig hebt.
- **Zelfvertrouwen met Claude Code** - Je snapt hoe het werkt, waarom het werkt, en wat je ermee kunt. - **Zelfvertrouwen met Claude Code** - Je snapt hoe Claude Code werkt, waarom het werkt, en wat je ermee kunt ontwikkelen.
- **Je eigen setup die klopt** - Goed geconfigureerd, afgestemd op jouw manier van werken. - **Praktische workflows** - je begrijpt hoe je Claude Code inzet voor taken die jij geregeld doet.
- **Praktische workflows** - Hoe je Claude Code inzet voor taken die jij dagelijks doet. - **Kennis van agents en skills** - De krachtigere features waar de meeste mensen nooit aan toekomen. Laat AI agents delen van je werk overnemen door ze gerichte opdrachten te geven en zelfstandig aan het werk te zetten.
- **Kennis van agents en skills** - De krachtigere features waar de meeste mensen nooit aan toekomen. - **Een netwerk van mede-ondernemers** - De workshop is met acht deelnemers die dezelfde reis maken. Een mooie en rustige plek om kennis te maken met elkaar en te netwerken.
- **Een netwerk van mede-ondernemers** - Zeven mensen die dezelfde reis maken. Handig voor vragen achteraf. - **Vervolgstappen die bij jou passen** - Je krijgt geen generiek advies, maar concrete volgende stappen voor jouw situatie.
- **Vervolgstappen die bij jou passen** - Geen generiek advies, maar concrete volgende stappen voor jouw situatie.
--- ---
@ -66,27 +65,27 @@ Da's frustrerend. Want je weet dat je sneller zou kunnen werken, betere output z
### Programma ### Programma
**09:00 - Welkom en setup** **09:00 - Welkom en setup**
We zorgen dat iedereen een werkende Claude Code installatie heeft. Vastlopers lossen we direct samen op. We zorgen dat iedereen een werkende Claude Code installatie heeft op Mac of Windows. Je krijgt vooraf al instructies maar ter plekke kunnen we vastlopers direct samen oplossen.
**09:30 - De basis begrijpen** **09:30 - De basis begrijpen**
Je leert de interface, de belangrijkste commando's, en hoe Claude Code denkt. Geen droge theorie, maar direct toepassen. Je leert de interface, de belangrijkste commando's, en hoe Claude Code denkt. Geen droge theorie, maar direct toepassen in een gezamenlijk project.
**10:30 - Eerste hands-on oefening** **10:30 - Eerste hands-on oefening**
Je eerste echte project. Klein, overzichtelijk, en direct resultaat. Hier voel je hoe het werkt. Je eerste eigen project. Klein en overzichtelijk. Met direct resultaat. Hier voel je al hoe Ai voor jou kan werken.
**11:30 - Lunch** **11:00 - CLAUDE.md, agents en skills**
Tijd om bij te praten met je mede-deelnemers. Netwerkmoment met broodjes en koffie. De krachtigere features. Hoe laat je Claude Code samenwerken met andere tools en hoe automatiseer je complexere taken.
**12:15 - Je eigen project starten** **12:00 - Lunch**
Nu wordt het persoonlijk. Je werkt aan iets voor jouw business. Ik loop rond, help waar nodig, en zorg dat je niet vastloopt. Wonders of Work heeft een heerlijke lunch voor ons klaarstaan. Tijd om bij te praten met je mede-deelnemers en ervaringen te delen.
**13:15 - Agents en skills** **13:00 - Je eigen project starten**
De krachtigere features. Hoe je Claude Code laat samenwerken met andere tools en hoe je complexere taken automatiseert. Nu wordt het persoonlijk. Je werkt aan een project voor jouw business. Ik kijk mee, help waar nodig, en zorg dat je niet vastloopt.
**13:45 - Afronden en vervolgstappen** **13:45 - Afronden en vervolgstappen**
We kijken naar wat je hebt gebouwd. Je krijgt concrete vervolgstappen die passen bij waar jij nu staat. We kijken naar wat je hebt gebouwd. Je krijgt concrete vervolgstappen die passen bij waar jij nu staat.
**14:00 - Einde** **14:00 - Einde workshop**
--- ---
@ -99,16 +98,16 @@ We kijken naar wat je hebt gebouwd. Je krijgt concrete vervolgstappen die passen
Deze workshop is voor jou als: Deze workshop is voor jou als:
- Je bent ZZP'er of ondernemer in het MKB - Je ondernemer in het MKB of ZZP'er bent
- Je wilt AI praktisch inzetten, niet alleen erover lezen - Je AI praktisch wilt inzetten, niet alleen erover lezen
- Je hebt geen of weinig ervaring met Claude Code (maar wel nieuwsgierigheid) - Je geen of weinig ervaring hebt met Claude Code (maar wel nieuwsgierigheid)
- Je bent bereid een ochtend te investeren om echt te leren - Je bereid bent een ochtend te investeren om echt te leren
- Je wilt werken aan je eigen project, niet aan een standaard oefening - Je wilt werken aan je eigen project, niet aan standaard oefeningen
### Vereisten ### Vereisten
**Wat je nodig hebt:** **Wat je nodig hebt:**
- Een laptop die je meeneemt - Een laptop met de mogelijkheid om software te installeren, inclusief toegang tot terminal
- Een betaald Claude account (Pro of Max) - dit heb je vooraf geregeld - Een betaald Claude account (Pro of Max) - dit heb je vooraf geregeld
- Basiskennis van je computer (bestanden openen, software installeren) - Basiskennis van je computer (bestanden openen, software installeren)
@ -126,16 +125,17 @@ Deze workshop is voor jou als:
### Bio Placeholder ### Bio Placeholder
[FOTO FRANK] foto: https://frankmeeuwsen.com/wp-content/uploads/2025/10/Frank-ava-clean.png
**Frank Meeuwsen** **Frank Meeuwsen**
[Korte bio - 2-3 zinnen over Frank's achtergrond met AI en Claude Code] Met mijn diepe kennis van dertig jaar internet-technologie, innovatie en persoonlijk kennismanagement breng ik jou en je team frisse inzichten, een nieuwe kijk op kenniswerk in een tijd van AI en automation.
[Relevante ervaring/credentials] Ik leer je zonder hype en bullshit wat NU de mogelijkheden van AI zijn en hoe je hier zelf eigenaarschap in krijgt.
[Persoonlijke noot over waarom hij deze workshop geeft] Sinds de start van Claude Code heb ik me verdiept in de mogelijkheden en de ontwikkelingen van deze modellen. Ik kan de brug leggen tussen jouw ondernemersbehoefte en de technische mogelijkheden, in normale spreektaal, zonder IT-jargon.
AI lijkt magisch. Maar dat valt reuze mee. Het is een relevant en nuttig instrument dat je helpt om routinewerk en herhalende taken efficiënter te maken. De eigenschappen van AI tools maken het assistent die je kan helpen met jouw werk, met datgene wat jij vindt dat er toe doet.
--- ---
## 7. Pricing Section ## 7. Pricing Section
@ -145,18 +145,17 @@ Deze workshop is voor jou als:
### Pricing Block ### Pricing Block
**EUR 449** per persoon (inclusief BTW) **EUR 399** per persoon (exclusief BTW)
**Inbegrepen:** **Inbegrepen:**
- Volledige workshop (9:00 - 14:00) - Volledige workshop (9:00 - 14:00)
- Lunch en onbeperkt koffie/thee - Lunch en onbeperkt koffie/thee
- Werkboek met alle commando's en tips - Online werkboek met alle commando's en tips
- Toegang tot de besloten community voor vragen achteraf - Persoonlijke online begeleiding bij je project, tot 2 maanden na de workshop.
- Persoonlijke begeleiding bij je project
### Urgency Element ### Urgency Element
**Let op:** Maximaal 7 deelnemers per workshop. Dit is bewust klein gehouden zodat iedereen persoonlijke aandacht krijgt. Vol is vol. **Let op:** Maximaal 8 deelnemers per workshop. Dit is bewust klein gehouden zodat iedereen persoonlijke aandacht krijgt. Vol is vol.
### CTA ### CTA
**Reserveer je plek** **Reserveer je plek**
@ -174,7 +173,7 @@ Deze workshop is voor jou als:
Ja. Claude Code is juist gemaakt voor mensen zonder technische achtergrond. Je typt wat je wilt, Claude Code doet het zware werk. De workshop is specifiek ontworpen voor niet-programmeurs. Ja. Claude Code is juist gemaakt voor mensen zonder technische achtergrond. Je typt wat je wilt, Claude Code doet het zware werk. De workshop is specifiek ontworpen voor niet-programmeurs.
**Wat is een Claude Pro of Max account en waarom heb ik dat nodig?** **Wat is een Claude Pro of Max account en waarom heb ik dat nodig?**
Dit is een betaald abonnement bij Anthropic (het bedrijf achter Claude). Pro kost ongeveer 20 euro per maand, Max ongeveer 100 euro. Je hebt dit nodig om Claude Code te kunnen gebruiken. Aanmelden kan via claude.ai. Dit is een betaald abonnement bij Anthropic (het bedrijf achter Claude). Pro kost ongeveer 20 euro per maand, Max ongeveer 100 euro. Je hebt dit nodig om Claude Code te kunnen gebruiken. Aanmelden doe je op [claude.ai](https://claude.com/pricing).
**Moet ik iets voorbereiden?** **Moet ik iets voorbereiden?**
Je ontvangt vooraf een korte handleiding om Claude Code te installeren. Lukt dat niet? Geen probleem, we helpen je aan het begin van de workshop. Je ontvangt vooraf een korte handleiding om Claude Code te installeren. Lukt dat niet? Geen probleem, we helpen je aan het begin van de workshop.
@ -183,7 +182,7 @@ Je ontvangt vooraf een korte handleiding om Claude Code te installeren. Lukt dat
Dat bepaal je zelf. Vooraf bespreken we kort wat voor jou relevant is. Denk aan: een simpele website, een automatisering, een tool die je dagelijks werk makkelijker maakt. We zorgen dat het haalbaar is binnen de tijd. Dat bepaal je zelf. Vooraf bespreken we kort wat voor jou relevant is. Denk aan: een simpele website, een automatisering, een tool die je dagelijks werk makkelijker maakt. We zorgen dat het haalbaar is binnen de tijd.
**Kan ik mijn geld terugkrijgen als ik niet kan komen?** **Kan ik mijn geld terugkrijgen als ik niet kan komen?**
Tot 7 dagen voor de workshop krijg je het volledige bedrag terug. Daarna kun je iemand anders in je plaats sturen. Bij annulering meer dan 14 dagen voor de workshop krijg je het volledige bedrag terug. Tussen 7 en 14 dagen voor de workshop is dat 50%. Binnen 7 dagen is geen restitutie mogelijk, maar je mag altijd iemand anders in je plaats sturen.
**Ik heb al wat ervaring met Claude. Is dit dan niet te basic?** **Ik heb al wat ervaring met Claude. Is dit dan niet te basic?**
De workshop begint bij de basis, maar gaat vrij snel naar de interessantere features zoals agents en skills. Je werkt aan je eigen tempo en project, dus ook met voorkennis haal je er genoeg uit. De workshop begint bij de basis, maar gaat vrij snel naar de interessantere features zoals agents en skills. Je werkt aan je eigen tempo en project, dus ook met voorkennis haal je er genoeg uit.
@ -195,9 +194,12 @@ De workshop begint bij de basis, maar gaat vrij snel naar de interessantere feat
### Section Title ### Section Title
**Wat deelnemers zeggen** **Wat deelnemers zeggen**
### Testimonial Template ### Testimonials Template
[Testimonials worden toegevoegd na de eerste workshops] "Het is superleuk om met mensen met allerlei achtergronden te experimenteren met Claude Code. Voelt echt als pionieren. Het enthousiasme van Frank is heel aanstekelijk."
Naam: Floor van Riet
Functie: Product Designer
Avatar:https://media.licdn.com/dms/image/v2/D4E03AQHYK2HR-WwupQ/profile-displayphoto-shrink_800_800/B4EZQsEaLGHsAk-/0/1735906141338?e=1772064000&v=beta&t=qbYQjmR76G_32PdCh9xipHEu7b4T3K5WrCzic4h9IaI
**Voorbeeld structuur:** **Voorbeeld structuur:**
@ -226,13 +228,13 @@ Testimonial 5: Focus op ROI of tijdsbesparing
De volgende workshop is op **vrijdag 6 maart 2026** in Utrecht. We starten om 9:00, rond 14:00 ga je naar huis met je eigen werkende project. De volgende workshop is op **vrijdag 6 maart 2026** in Utrecht. We starten om 9:00, rond 14:00 ga je naar huis met je eigen werkende project.
Zeven plaatsen. Persoonlijke begeleiding. Geen PowerPoint-presentaties, maar handen uit de mouwen. Acht plaatsen. Persoonlijke begeleiding en handen uit de mouwen om mooi werk te maken met elkaar.
### CTA ### CTA
**Schrijf je in voor 6 maart** **Schrijf je NU in voor 6 maart**
### Laatste noot ### Laatste noot
Vragen? Mail naar [email] of bel [nummer]. Ik help je graag. Vragen? Mail naar [Frank](mailto:frank@frankmeeuwsen.com). Ik help je graag.
--- ---
@ -242,10 +244,10 @@ Vragen? Mail naar [email] of bel [nummer]. Ik help je graag.
- Locatie: Wonders of Work, Utrecht - Locatie: Wonders of Work, Utrecht
- Datum: Vrijdag 6 maart 2026 - Datum: Vrijdag 6 maart 2026
- Tijd: 9:00 - 14:00 - Tijd: 9:00 - 14:00
- Max 7 deelnemers - Max 8 deelnemers
### Meta Description (SEO) ### Meta Description (SEO)
Claude Code Workshop voor ZZP'ers en MKB ondernemers. Van nieuwsgierig naar praktisch aan de slag in 1 ochtend. Max 7 deelnemers, persoonlijke begeleiding. 6 maart 2026, Utrecht. Claude Code Workshop voor MKB ondernemers. Van nieuwsgierig naar praktisch aan de slag in 1 ochtend. Max 8 deelnemers, persoonlijke begeleiding. 6 maart 2026, Utrecht.
### Page Title (SEO) ### Page Title (SEO)
Claude Code Workshop | Van 0 naar werkend project in 1 ochtend | 6 maart 2026 Claude Code Workshop | Van 0 naar werkend project in 1 ochtend | 6 maart 2026

View file

@ -1,16 +1,16 @@
/** /**
* Benefits.jsx - "Wat je meeneemt naar huis" sectie * Benefits.jsx - "Wat je meeneemt naar huis" sectie
* *
* Toont de 7 benefits van de workshop met icons. * Toont de 6 benefits van de workshop met icons.
* Gebruikt card-feature styling voor een premium look. * Gebruikt card-feature styling voor een premium look.
*/ */
function Benefits() { function Benefits() {
// De 7 benefits met passende icons (inline SVG) // De 6 benefits met passende icons (inline SVG)
const benefits = [ const benefits = [
{ {
title: "Een werkend project", title: "Een werkend project",
description: "Geen theorie, maar iets dat je maandag direct kunt gebruiken in je business.", description: "Geen theorie, maar een app die je maandag direct kunt gebruiken in je bedrijf. Een data analyse app, een betere planningsmodule of zelfgebouwde roostersoftware waar je geen duur abonnement meer voor nodig hebt.",
icon: ( icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" 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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
@ -19,26 +19,16 @@ function Benefits() {
}, },
{ {
title: "Zelfvertrouwen met Claude Code", title: "Zelfvertrouwen met Claude Code",
description: "Je snapt hoe het werkt, waarom het werkt, en wat je ermee kunt.", description: "Je snapt hoe Claude Code werkt, waarom het werkt, en wat je ermee kunt ontwikkelen.",
icon: ( icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
) )
}, },
{
title: "Je eigen setup die klopt",
description: "Goed geconfigureerd, afgestemd op jouw manier van werken.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
)
},
{ {
title: "Praktische workflows", title: "Praktische workflows",
description: "Hoe je Claude Code inzet voor taken die jij dagelijks doet.", description: "Je begrijpt hoe je Claude Code inzet voor taken die jij geregeld doet.",
icon: ( icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
@ -47,7 +37,7 @@ function Benefits() {
}, },
{ {
title: "Kennis van agents en skills", title: "Kennis van agents en skills",
description: "De krachtigere features waar de meeste mensen nooit aan toekomen.", description: "De krachtigere features waar de meeste mensen nooit aan toekomen. Laat AI agents delen van je werk overnemen door ze gerichte opdrachten te geven en zelfstandig aan het werk te zetten.",
icon: ( icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
@ -56,7 +46,7 @@ function Benefits() {
}, },
{ {
title: "Een netwerk van mede-ondernemers", title: "Een netwerk van mede-ondernemers",
description: "Zeven mensen die dezelfde reis maken. Handig voor vragen achteraf.", description: "De workshop is met acht deelnemers die dezelfde reis maken. Een mooie en rustige plek om kennis te maken met elkaar en te netwerken.",
icon: ( icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
@ -65,7 +55,7 @@ function Benefits() {
}, },
{ {
title: "Vervolgstappen die bij jou passen", title: "Vervolgstappen die bij jou passen",
description: "Geen generiek advies, maar concrete volgende stappen voor jouw situatie.", description: "Je krijgt geen generiek advies, maar concrete volgende stappen voor jouw situatie.",
icon: ( icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
@ -79,7 +69,7 @@ function Benefits() {
<div className="container-page"> <div className="container-page">
{/* Section title */} {/* Section title */}
<h2 className="heading-2 text-center mb-4"> <h2 className="heading-2 text-center mb-4">
Wat je meeneemt naar huis Wat je meeneemt naar je onderneming
</h2> </h2>
<p className="text-warm-600 text-center mb-12 max-w-2xl mx-auto"> <p className="text-warm-600 text-center mb-12 max-w-2xl mx-auto">
Na deze workshop heb je niet alleen kennis, maar ook resultaat. Na deze workshop heb je niet alleen kennis, maar ook resultaat.

View file

@ -39,7 +39,7 @@ function FinalCTA() {
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
</svg> </svg>
<span>7 plaatsen</span> <span>8 plaatsen</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -51,7 +51,7 @@ function FinalCTA() {
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg> </svg>
<span>Hands-on, geen PowerPoints</span> <span>Handen uit de mouwen</span>
</div> </div>
</div> </div>
@ -60,7 +60,7 @@ function FinalCTA() {
href="#inschrijven" href="#inschrijven"
className="inline-flex items-center gap-2 px-8 py-4 bg-white text-coral-600 font-semibold text-lg rounded-xl shadow-lg hover:bg-coral-50 hover:shadow-xl active:bg-coral-100 transition-all duration-200" className="inline-flex items-center gap-2 px-8 py-4 bg-white text-coral-600 font-semibold text-lg rounded-xl shadow-lg hover:bg-coral-50 hover:shadow-xl active:bg-coral-100 transition-all duration-200"
> >
Schrijf je in voor 6 maart Schrijf je NU in voor 6 maart
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg> </svg>
@ -69,12 +69,8 @@ function FinalCTA() {
{/* Contact info */} {/* Contact info */}
<p className="mt-8 text-coral-200"> <p className="mt-8 text-coral-200">
Vragen? Mail naar{' '} Vragen? Mail naar{' '}
<a href="mailto:contact@example.com" className="text-white underline hover:no-underline"> <a href="mailto:frank@frankmeeuwsen.com" className="text-white underline hover:no-underline">
[email] Frank
</a>
{' '}of bel{' '}
<a href="tel:+31600000000" className="text-white underline hover:no-underline">
[nummer]
</a> </a>
. Ik help je graag. . Ik help je graag.
</p> </p>

View file

@ -10,7 +10,7 @@
function ForWho() { function ForWho() {
// Ideale deelnemer kenmerken // Ideale deelnemer kenmerken
const idealFor = [ const idealFor = [
"Je bent ZZP'er of ondernemer in het MKB", "Je bent ondernemer in het MKB of ZZP'er",
"Je wilt AI praktisch inzetten, niet alleen erover lezen", "Je wilt AI praktisch inzetten, niet alleen erover lezen",
"Je hebt geen of weinig ervaring met Claude Code (maar wel nieuwsgierigheid)", "Je hebt geen of weinig ervaring met Claude Code (maar wel nieuwsgierigheid)",
"Je bent bereid een ochtend te investeren om echt te leren", "Je bent bereid een ochtend te investeren om echt te leren",

View file

@ -7,7 +7,7 @@
function Hero() { function Hero() {
// Aantal beschikbare plaatsen - later dynamisch te maken // Aantal beschikbare plaatsen - later dynamisch te maken
const availableSpots = 7; const availableSpots = 8;
return ( return (
<section className="section relative overflow-hidden"> <section className="section relative overflow-hidden">
@ -53,11 +53,16 @@ function Hero() {
{/* Intro tekst */} {/* Intro tekst */}
<p className="text-lg text-warm-600 mb-8 leading-relaxed"> <p className="text-lg text-warm-600 mb-8 leading-relaxed">
Je hebt van Claude Code gehoord. Misschien zelfs al even mee gespeeld. Je gebruikt Claude of een ander AI model voor research en teksten schrijven.
Maar ergens tussen de installatie en dat eerste echte resultaat ben je Je snapt hoe prompts werken. Maar wat als Claude niet alleen in je browser werkt,
blijven hangen. Herkenbaar? In deze hands-on workshop doorbreek je die drempel. maar rechtstreeks op je computer? Dan kan het bestanden lezen, code aanpassen en
Samen met maximaal 6 andere ondernemers ga je van nul naar een werkend project tools installeren zonder dat jij hoeft te kopiëren en plakken. Misschien heb je al
dat je direct kunt gebruiken in je business. eens met Claude Code geëxperimenteerd. Maar ergens tussen de installatie en dat
eerste echte resultaat ben je blijven hangen. Herkenbaar voor je? In deze{' '}
<em>hands-on workshop</em> stap je over die drempel. Samen met maximaal 7 andere
ondernemers ga je van nul naar een werkend project dat je direct kunt gebruiken in
je business. En je loopt naar buiten met een fundamenteel ander idee hoe je
onderneming en je team kan werken met software en AI.
</p> </p>
{/* Workshop details - prominent weergave */} {/* Workshop details - prominent weergave */}

View file

@ -8,10 +8,10 @@
function PainPoints() { function PainPoints() {
// De 4 pain points uit de content // De 4 pain points uit de content
const painPoints = [ const painPoints = [
"Je hebt YouTube tutorials gekeken, maar zodra je zelf begint loopt het anders dan in de video?",
"Je weet dat AI tools je kunnen helpen, maar je hebt geen idee waar je moet beginnen met Claude Code?", "Je weet dat AI tools je kunnen helpen, maar je hebt geen idee waar je moet beginnen met Claude Code?",
"Je collega's of concurrenten werken al met AI, en jij bent nog aan het uitzoeken hoe het werkt?", "Je collega's en concurrenten werken al met AI en jij bent nog aan het uitzoeken hoe het werkt?",
"Je hebt weinig tijd om te experimenteren, en trial-and-error voelt als verspilling van kostbare uren?" "Je hebt weinig tijd om te experimenteren en trial-and-error voelt als verspilling van kostbare uren?",
"Je kijkt wat YouTube tutorials, maar zodra je zelf begint loopt het anders dan in de video?"
]; ];
return ( return (
@ -19,7 +19,7 @@ function PainPoints() {
<div className="container-page"> <div className="container-page">
{/* Section title */} {/* Section title */}
<h2 className="heading-2 text-center mb-12"> <h2 className="heading-2 text-center mb-12">
Herkenbaar? Is dit herkenbaar voor je?
</h2> </h2>
{/* Pain points grid */} {/* Pain points grid */}
@ -59,9 +59,10 @@ function PainPoints() {
{/* Afsluitende tekst */} {/* Afsluitende tekst */}
<div className="max-w-2xl mx-auto text-center"> <div className="max-w-2xl mx-auto text-center">
<p className="text-lg text-warm-600 leading-relaxed"> <p className="text-lg text-warm-600 leading-relaxed">
Da's frustrerend. Want je weet dat je sneller zou kunnen werken, Dat is frustrerend. Want je weet dat je sneller zou kunnen werken,
betere output zou kunnen leveren. Maar die drempel... betere output zou kunnen leveren. Maar die drempel...
die blijft maar in de weg zitten. die blijft maar in de weg zitten. En je business loopt door.
Je voelt dat er iets kan veranderen.
</p> </p>
</div> </div>
</div> </div>

View file

@ -10,6 +10,8 @@ function Pricing() {
const included = [ const included = [
"Volledige workshop (9:00 - 14:00)", "Volledige workshop (9:00 - 14:00)",
"Lunch en onbeperkt koffie/thee", "Lunch en onbeperkt koffie/thee",
"Online werkboek met alle commando's en tips",
"Toegang tot de besloten community voor vragen achteraf",
"Persoonlijke begeleiding bij je project" "Persoonlijke begeleiding bij je project"
]; ];
@ -35,7 +37,7 @@ function Pricing() {
<div className="text-center mb-8"> <div className="text-center mb-8">
<div className="flex items-baseline justify-center gap-2"> <div className="flex items-baseline justify-center gap-2">
<span className="text-5xl md:text-6xl font-display font-bold text-warm-900"> <span className="text-5xl md:text-6xl font-display font-bold text-warm-900">
449 399
</span> </span>
<span className="text-warm-500 text-lg"> <span className="text-warm-500 text-lg">
per persoon per persoon
@ -93,7 +95,7 @@ function Pricing() {
</svg> </svg>
<div> <div>
<p className="font-semibold text-coral-700"> <p className="font-semibold text-coral-700">
Maximaal 7 deelnemers per workshop Maximaal 8 deelnemers per workshop
</p> </p>
<p className="text-coral-600 text-sm mt-1"> <p className="text-coral-600 text-sm mt-1">
Dit is bewust klein gehouden zodat iedereen persoonlijke aandacht krijgt. Dit is bewust klein gehouden zodat iedereen persoonlijke aandacht krijgt.

View file

@ -1,30 +1,18 @@
/** /**
* Testimonials.jsx - "Wat deelnemers zeggen" sectie * Testimonials.jsx - "Wat deelnemers zeggen" sectie
* *
* 3 placeholder testimonial cards met quote decoratie. * Testimonial cards met quote decoratie.
* Bevat avatar met initialen, naam en functie. * Ondersteunt avatar afbeeldingen (URL) met initials als fallback.
*/ */
function Testimonials() { function Testimonials() {
// Placeholder testimonials - worden vervangen na eerste workshops
const testimonials = [ const testimonials = [
{ {
quote: "[Quote over specifieke ervaring of doorbraak - aha-moment tijdens de workshop]", quote: "Het is superleuk om met mensen met allerlei achtergronden te experimenteren met Claude Code. Voelt echt als pionieren. Het enthousiasme van Frank is heel aanstekelijk.",
name: "Naam Deelnemer", name: "Floor van Riet",
role: "Functie / Bedrijf", role: "Product Designer",
initials: "ND" avatar: "https://media.licdn.com/dms/image/v2/D4E03AQHYK2HR-WwupQ/profile-displayphoto-shrink_800_800/B4EZQsEaLGHsAk-/0/1735906141338?e=1772064000&v=beta&t=qbYQjmR76G_32PdCh9xipHEu7b4T3K5WrCzic4h9IaI",
}, initials: "FvR"
{
quote: "[Quote over praktische toepassing na de workshop - hoe het hun werk heeft verbeterd]",
name: "Naam Deelnemer",
role: "Functie / Bedrijf",
initials: "ND"
},
{
quote: "[Quote over de begeleiding en sfeer - persoonlijke aandacht en groepsdynamiek]",
name: "Naam Deelnemer",
role: "Functie / Bedrijf",
initials: "ND"
} }
]; ];
@ -32,15 +20,16 @@ function Testimonials() {
<section className="section"> <section className="section">
<div className="container-page"> <div className="container-page">
{/* Section title */} {/* Section title */}
<h2 className="heading-2 text-center mb-4"> <h2 className="heading-2 text-center mb-12">
Wat deelnemers zeggen Wat deelnemers zeggen
</h2> </h2>
<p className="text-warm-500 text-center mb-12 italic">
Testimonials worden toegevoegd na de eerste workshops
</p>
{/* Testimonials grid */} {/* Testimonials grid - past zich aan op aantal items */}
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto"> <div className={`grid gap-6 max-w-5xl mx-auto ${
testimonials.length === 1 ? 'max-w-2xl' :
testimonials.length === 2 ? 'md:grid-cols-2' :
'md:grid-cols-3'
}`}>
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<div <div
key={index} key={index}
@ -66,12 +55,20 @@ function Testimonials() {
{/* Auteur info */} {/* Auteur info */}
<div className="flex items-center gap-3 mt-auto"> <div className="flex items-center gap-3 mt-auto">
{/* Avatar met initialen */} {/* Avatar: afbeelding of initials als fallback */}
{testimonial.avatar ? (
<img
src={testimonial.avatar}
alt={testimonial.name}
className="w-12 h-12 rounded-full object-cover"
/>
) : (
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-coral-100 to-teal-100 flex items-center justify-center"> <div className="w-12 h-12 rounded-full bg-gradient-to-br from-coral-100 to-teal-100 flex items-center justify-center">
<span className="text-warm-500 font-semibold"> <span className="text-warm-500 font-semibold">
{testimonial.initials} {testimonial.initials}
</span> </span>
</div> </div>
)}
{/* Naam en functie */} {/* Naam en functie */}
<div> <div>