workshopclaudecode/src/components/Examples.jsx

/**
 * 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;