diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..67eedc3 --- /dev/null +++ b/CLAUDE.md @@ -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 diff --git a/content/workshop-sales-page.md b/content/workshop-sales-page.md index 8556ea9..66a636a 100644 --- a/content/workshop-sales-page.md +++ b/content/workshop-sales-page.md @@ -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. ### 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 **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?") ### Section Title -**Herkenbaar?** +**Is dit herkenbaar voor je?** ### 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 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 ### Section Title -**Wat je meeneemt naar huis** +**Wat je meeneemt naar je onderneming** ### 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** - Geen generiek advies, maar concrete volgende stappen voor jouw situatie. +- **Vervolgstappen die bij jou passen** - Je krijgt 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 **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** -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** -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** -Tijd om bij te praten met je mede-deelnemers. Netwerkmoment met broodjes en koffie. +**11:00 - CLAUDE.md, agents en skills** +De krachtigere features. Hoe laat je Claude Code samenwerken met andere tools en hoe automatiseer je complexere taken. -**12:15 - Je eigen project starten** -Nu wordt het persoonlijk. Je werkt aan iets voor jouw business. Ik loop rond, help waar nodig, en zorg dat je niet vastloopt. +**12:00 - Lunch** +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** -De krachtigere features. Hoe je Claude Code laat samenwerken met andere tools en hoe je complexere taken automatiseert. +**13:00 - Je eigen project starten** +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** 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: -- Je bent ZZP'er of ondernemer in het MKB -- Je wilt AI praktisch inzetten, niet alleen erover lezen -- Je hebt geen of weinig ervaring met Claude Code (maar wel nieuwsgierigheid) -- Je bent bereid een ochtend te investeren om echt te leren -- Je wilt werken aan je eigen project, niet aan een standaard oefening +- Je ondernemer in het MKB of ZZP'er bent +- Je AI praktisch wilt inzetten, niet alleen erover lezen +- Je geen of weinig ervaring hebt met Claude Code (maar wel nieuwsgierigheid) +- Je bereid bent een ochtend te investeren om echt te leren +- Je wilt werken aan je eigen project, niet aan standaard oefeningen ### Vereisten **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 - Basiskennis van je computer (bestanden openen, software installeren) @@ -126,16 +125,17 @@ Deze workshop is voor jou als: ### Bio Placeholder -[FOTO FRANK] +foto: https://frankmeeuwsen.com/wp-content/uploads/2025/10/Frank-ava-clean.png **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 @@ -145,18 +145,17 @@ Deze workshop is voor jou als: ### Pricing Block -**EUR 449** per persoon (inclusief BTW) +**EUR 399** per persoon (exclusief BTW) **Inbegrepen:** - Volledige workshop (9:00 - 14:00) - Lunch en onbeperkt koffie/thee -- Werkboek met alle commando's en tips -- Toegang tot de besloten community voor vragen achteraf -- Persoonlijke begeleiding bij je project +- Online werkboek met alle commando's en tips +- Persoonlijke online begeleiding bij je project, tot 2 maanden na de workshop. ### 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 **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. **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?** 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. **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?** 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 **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:** @@ -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. -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 -**Schrijf je in voor 6 maart** +**Schrijf je NU in voor 6 maart** ### 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 - Datum: Vrijdag 6 maart 2026 - Tijd: 9:00 - 14:00 -- Max 7 deelnemers +- Max 8 deelnemers ### 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) Claude Code Workshop | Van 0 naar werkend project in 1 ochtend | 6 maart 2026 diff --git a/src/components/Benefits.jsx b/src/components/Benefits.jsx index 5602def..74549d5 100644 --- a/src/components/Benefits.jsx +++ b/src/components/Benefits.jsx @@ -1,16 +1,16 @@ /** * 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. */ function Benefits() { - // De 7 benefits met passende icons (inline SVG) + // De 6 benefits met passende icons (inline SVG) const benefits = [ { 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: ( @@ -19,26 +19,16 @@ function Benefits() { }, { 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: ( ) }, - { - title: "Je eigen setup die klopt", - description: "Goed geconfigureerd, afgestemd op jouw manier van werken.", - icon: ( - - - - - ) - }, { 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: ( @@ -47,7 +37,7 @@ function Benefits() { }, { 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: ( @@ -56,7 +46,7 @@ function Benefits() { }, { 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: ( @@ -65,7 +55,7 @@ function Benefits() { }, { 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: ( @@ -79,7 +69,7 @@ function Benefits() {
{/* Section title */}

- Wat je meeneemt naar huis + Wat je meeneemt naar je onderneming

Na deze workshop heb je niet alleen kennis, maar ook resultaat. diff --git a/src/components/FinalCTA.jsx b/src/components/FinalCTA.jsx index 1838a9a..ff2b770 100644 --- a/src/components/FinalCTA.jsx +++ b/src/components/FinalCTA.jsx @@ -39,7 +39,7 @@ function FinalCTA() { - 7 plaatsen + 8 plaatsen

@@ -51,7 +51,7 @@ function FinalCTA() { - Hands-on, geen PowerPoints + Handen uit de mouwen
@@ -60,7 +60,7 @@ function FinalCTA() { 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" > - Schrijf je in voor 6 maart + Schrijf je NU in voor 6 maart @@ -69,12 +69,8 @@ function FinalCTA() { {/* Contact info */}

Vragen? Mail naar{' '} - - [email] - - {' '}of bel{' '} - - [nummer] + + Frank . Ik help je graag.

diff --git a/src/components/ForWho.jsx b/src/components/ForWho.jsx index 487d10e..f2de1dc 100644 --- a/src/components/ForWho.jsx +++ b/src/components/ForWho.jsx @@ -10,7 +10,7 @@ function ForWho() { // Ideale deelnemer kenmerken 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 hebt geen of weinig ervaring met Claude Code (maar wel nieuwsgierigheid)", "Je bent bereid een ochtend te investeren om echt te leren", diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index e739f3e..43a4cf2 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -7,7 +7,7 @@ function Hero() { // Aantal beschikbare plaatsen - later dynamisch te maken - const availableSpots = 7; + const availableSpots = 8; return (
@@ -53,11 +53,16 @@ function Hero() { {/* Intro tekst */}

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

{/* Workshop details - prominent weergave */} diff --git a/src/components/PainPoints.jsx b/src/components/PainPoints.jsx index 1e53ffa..80c9b04 100644 --- a/src/components/PainPoints.jsx +++ b/src/components/PainPoints.jsx @@ -8,10 +8,10 @@ function PainPoints() { // De 4 pain points uit de content 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 collega's of 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 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 kijkt wat YouTube tutorials, maar zodra je zelf begint loopt het anders dan in de video?" ]; return ( @@ -19,7 +19,7 @@ function PainPoints() {
{/* Section title */}

- Herkenbaar? + Is dit herkenbaar voor je?

{/* Pain points grid */} @@ -59,9 +59,10 @@ function PainPoints() { {/* Afsluitende tekst */}

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

diff --git a/src/components/Pricing.jsx b/src/components/Pricing.jsx index 01e8680..dd83c3b 100644 --- a/src/components/Pricing.jsx +++ b/src/components/Pricing.jsx @@ -10,6 +10,8 @@ function Pricing() { const included = [ "Volledige workshop (9:00 - 14:00)", "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" ]; @@ -35,7 +37,7 @@ function Pricing() {
- €449 + €399 per persoon @@ -93,7 +95,7 @@ function Pricing() {

- Maximaal 7 deelnemers per workshop + Maximaal 8 deelnemers per workshop

Dit is bewust klein gehouden zodat iedereen persoonlijke aandacht krijgt. diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx index 0ceb3db..1cd30ea 100644 --- a/src/components/Testimonials.jsx +++ b/src/components/Testimonials.jsx @@ -1,30 +1,18 @@ /** * Testimonials.jsx - "Wat deelnemers zeggen" sectie * - * 3 placeholder testimonial cards met quote decoratie. - * Bevat avatar met initialen, naam en functie. + * Testimonial cards met quote decoratie. + * Ondersteunt avatar afbeeldingen (URL) met initials als fallback. */ function Testimonials() { - // Placeholder testimonials - worden vervangen na eerste workshops const testimonials = [ { - quote: "[Quote over specifieke ervaring of doorbraak - aha-moment tijdens de workshop]", - name: "Naam Deelnemer", - role: "Functie / Bedrijf", - initials: "ND" - }, - { - 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" + 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: "Floor van Riet", + role: "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", + initials: "FvR" } ]; @@ -32,15 +20,16 @@ function Testimonials() {

{/* Section title */} -

+

Wat deelnemers zeggen

-

- Testimonials worden toegevoegd na de eerste workshops -

- {/* Testimonials grid */} -
+ {/* Testimonials grid - past zich aan op aantal items */} +
{testimonials.map((testimonial, index) => (
- {/* Avatar met initialen */} -
- - {testimonial.initials} - -
+ {/* Avatar: afbeelding of initials als fallback */} + {testimonial.avatar ? ( + {testimonial.name} + ) : ( +
+ + {testimonial.initials} + +
+ )} {/* Naam en functie */}