feat: voorbeelden sectie toegevoegd

Nieuwe 'Wat ga je bouwen?' sectie met 4 concrete persona-voorbeelden
(Joost, Marieke, Ewout, Sanne) tussen ForWho en Benefits geplaatst.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/App.jsx

@@ -8,6 +8,7 @@
 // Component imports
 import Hero from './components/Hero';
 import PainPoints from './components/PainPoints';
+import Examples from './components/Examples';
 import Benefits from './components/Benefits';
 import Program from './components/Program';
 import ForWho from './components/ForWho';
@@ -34,25 +35,28 @@ function App() {
         {/* 3. For Who - vroeg filteren bouwt vertrouwen */}
         <ForWho />
 
-        {/* 4. Benefits - wat je meeneemt naar huis */}
+        {/* 4. Examples - concrete voorbeelden van wat je kunt bouwen */}
+        <Examples />
+
+        {/* 5. Benefits - wat je meeneemt naar huis */}
         <Benefits />
 
-        {/* 5. Program - dagindeling */}
+        {/* 6. Program - dagindeling */}
         <Program />
 
-        {/* 6. Trainer - over Frank */}
+        {/* 7. Trainer - over Frank */}
         <Trainer />
 
-        {/* 7. Testimonials - wat deelnemers zeggen */}
+        {/* 8. Testimonials - wat deelnemers zeggen */}
         <Testimonials />
 
-        {/* 8. Pricing - wat kost het + CTA */}
+        {/* 9. Pricing - wat kost het + CTA */}
         <Pricing />
 
-        {/* 9. FAQ - veelgestelde vragen en bezwaren */}
+        {/* 10. FAQ - veelgestelde vragen en bezwaren */}
         <FAQ />
 
-        {/* 10. Final CTA - afsluitende call-to-action */}
+        {/* 11. Final CTA - afsluitende call-to-action */}
         <FinalCTA />
       </main>
 

src/components/Examples.jsx

@@ -0,0 +1,123 @@
+/**
+ * Examples.jsx - "Wat ga je bouwen?" sectie
+ *
+ * Toont concrete voorbeelden van wat deelnemers kunnen bouwen.
+ * Elke persona heeft een naam, rol, probleem en oplossing.
+ * Geplaatst tussen ForWho en Benefits voor de "maar wat ga ik dan doen?" vraag.
+ */
+
+function Examples() {
+  // Persona voorbeelden met herkenbare ondernemers
+  const examples = [
+    {
+      name: "Joost",
+      role: "freelance webdesigner",
+      problem: "Klanten leveren bestanden aan die veel te groot zijn. Verkeerde formaten, rare bestandsnamen, alles door elkaar.",
+      solution: "Joost bouwde een online omgeving waarmee klanten met één drag & drop beweging bestanden kunnen aanleveren. Alles wordt automatisch omgezet naar het juiste formaat, de juiste grootte en op de juiste plek opgeslagen.",
+      result: "Wat voorheen een half uur kostte in Photoshop en Finder, is nu een kwestie van seconden.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+      )
+    },
+    {
+      name: "Marieke",
+      role: "boekhouder",
+      problem: "Elke maand hetzelfde ritueel. Bankafschriften downloaden, bedragen overnemen, categorieën toewijzen.",
+      solution: "Marieke bouwde een script dat haar CSV-bestanden inleest en automatisch een overzicht maakt per kostenpost.",
+      result: "Scheelt haar per klant zo'n 45 minuten per maand.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        </svg>
+      )
+    },
+    {
+      name: "Ewout",
+      role: "interim marketeer",
+      problem: "Al jaren is zijn contactenlijst een doorn in het oog. Dubbele contacten, incomplete gegevens, alles verspreid over zijn telefoon en LinkedIn.",
+      solution: "Ewout bouwde zijn eigen CRM met al die data samengevoegd.",
+      result: "Nu heeft hij grip op zijn klantgegevens en bouwt hij er op door met sales funnels en contactstrategieën.",
+      icon: (
+        <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 0z" />
+        </svg>
+      )
+    },
+    {
+      name: "Sanne",
+      role: "communicatieadviseur",
+      problem: "Lange beleidsdocumenten doorploegen en samenvatten tot twee pagina's. Een halve dag werk per document.",
+      solution: "Sanne bouwde een tool die PDF's inleest en er een samenvatting in haar vaste format van maakt.",
+      result: "Nu besteedt ze een half uur aan finetunen en itereren in plaats van vier uur uitpluizen.",
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+      )
+    }
+  ];
+
+  return (
+    <section className="section-alt">
+      <div className="container-page">
+        {/* Section title */}
+        <h2 className="heading-2 text-center mb-4">
+          Wat ga je bouwen?
+        </h2>
+        <p className="text-warm-600 text-center mb-12 max-w-2xl mx-auto">
+          Wat je precies bouwt hangt af van jouw situatie. Want jouw dagelijkse irritatie
+          is niet dezelfde als die van elke andere ondernemer. In de workshop pakken we
+          aan wat bij jou wrijving oplevert of je elke week kostbare minuten kost.
+        </p>
+
+        {/* Examples grid */}
+        <div className="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto mb-10">
+          {examples.map((example, index) => (
+            <div
+              key={index}
+              className="card"
+            >
+              {/* Header met icon, naam en rol */}
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 rounded-full bg-coral-100 text-coral-600 flex items-center justify-center flex-shrink-0">
+                  {example.icon}
+                </div>
+                <div>
+                  <span className="font-display font-semibold text-warm-900">{example.name}</span>
+                  <span className="text-warm-500">, {example.role}</span>
+                </div>
+              </div>
+
+              {/* Probleem */}
+              <p className="text-warm-600 leading-relaxed mb-3">
+                {example.problem}
+              </p>
+
+              {/* Oplossing */}
+              <p className="text-warm-700 leading-relaxed font-medium mb-3">
+                {example.solution}
+              </p>
+
+              {/* Resultaat */}
+              <p className="text-teal-700 leading-relaxed text-sm flex items-start gap-2">
+                <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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                </svg>
+                {example.result}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* Afsluitende tekst */}
+        <p className="text-lg text-warm-600 text-center max-w-3xl mx-auto">
+          Geen standaard oefeningen dus. We werken aan iets dat voor jou verschil maakt.
+        </p>
+      </div>
+    </section>
+  );
+}
+
+export default Examples;

src/components/index.js

@@ -7,6 +7,7 @@
 
 export { default as Hero } from './Hero';
 export { default as PainPoints } from './PainPoints';
+export { default as Examples } from './Examples';
 export { default as Benefits } from './Benefits';
 export { default as Program } from './Program';
 export { default as ForWho } from './ForWho';