diff --git a/src/App.jsx b/src/App.jsx index f03aff0..c07ae22 100644 --- a/src/App.jsx +++ b/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 */} - {/* 4. Benefits - wat je meeneemt naar huis */} + {/* 4. Examples - concrete voorbeelden van wat je kunt bouwen */} + + + {/* 5. Benefits - wat je meeneemt naar huis */} - {/* 5. Program - dagindeling */} + {/* 6. Program - dagindeling */} - {/* 6. Trainer - over Frank */} + {/* 7. Trainer - over Frank */} - {/* 7. Testimonials - wat deelnemers zeggen */} + {/* 8. Testimonials - wat deelnemers zeggen */} - {/* 8. Pricing - wat kost het + CTA */} + {/* 9. Pricing - wat kost het + CTA */} - {/* 9. FAQ - veelgestelde vragen en bezwaren */} + {/* 10. FAQ - veelgestelde vragen en bezwaren */} - {/* 10. Final CTA - afsluitende call-to-action */} + {/* 11. Final CTA - afsluitende call-to-action */} diff --git a/src/components/Examples.jsx b/src/components/Examples.jsx new file mode 100644 index 0000000..41fda45 --- /dev/null +++ b/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: ( + + + + ) + }, + { + 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: ( + + + + ) + }, + { + 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: ( + + + + ) + }, + { + 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: ( + + + + ) + } + ]; + + return ( +
+
+ {/* Section title */} +

+ Wat ga je bouwen? +

+

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

+ + {/* Examples grid */} +
+ {examples.map((example, index) => ( +
+ {/* Header met icon, naam en rol */} +
+
+ {example.icon} +
+
+ {example.name} + , {example.role} +
+
+ + {/* Probleem */} +

+ {example.problem} +

+ + {/* Oplossing */} +

+ {example.solution} +

+ + {/* Resultaat */} +

+ + + + {example.result} +

+
+ ))} +
+ + {/* Afsluitende tekst */} +

+ Geen standaard oefeningen dus. We werken aan iets dat voor jou verschil maakt. +

+
+
+ ); +} + +export default Examples; diff --git a/src/components/index.js b/src/components/index.js index 44d7709..ce02ce1 100644 --- a/src/components/index.js +++ b/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';