feat: hero titel, workshop foto, trainer bio en prijscorrecties

- Hero: nieuwe headline "Bouw zelf wat je nu huurt" met subheadline
- Hero: workshop foto toegevoegd met CSS brightness/contrast filter
- Hero: datum/tijd/locatie blok compacter gemaakt
- Trainer: placeholder vervangen door echte bio en foto
- StickyBar: prijs gecorrigeerd van €449 naar €399
- Privacy/Terms: KvK-nummer (98386247) en vestigingsplaats (Utrecht) ingevuld

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

content/workshop-sales-page.md

@@ -151,7 +151,7 @@ AI lijkt magisch. Maar dat valt reuze mee. Het is een relevant en nuttig instrum
 - Volledige workshop (9:00 - 14:00)
 - Lunch en onbeperkt koffie/thee
 - Online werkboek met alle commando's en tips
-- Persoonlijke online begeleiding bij je project, tot 2 maanden na de workshop.
+- Persoonlijke online begeleiding bij je project, tot 30 dagen na de workshop.
 
 ### Urgency Element
 

src/components/Hero.jsx

@@ -38,12 +38,17 @@ function Hero() {
             </div>
 
             {/* Headline */}
-            <h1 className="heading-hero mb-6">
+            <h1 className="heading-hero mb-4">
+              Bouw zelf wat je nu huurt — met Claude Code
+            </h1>
+
+            {/* Subheadline */}
+            <p className="text-xl md:text-2xl font-medium text-warm-500 mb-6">
               Van{' '}
               <span className="text-coral-500">"dit moet ik uitzoeken"</span>
               {' '}naar{' '}
               <span className="text-teal-600">"dit werkt gewoon"</span>
-            </h1>
+            </p>
 
             {/* Subheadline */}
             <p className="text-xl md:text-2xl text-warm-600 mb-6 leading-relaxed">
@@ -66,42 +71,42 @@ function Hero() {
             </p>
 
             {/* Workshop details - prominent weergave */}
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10 p-6 bg-white/70 backdrop-blur-sm rounded-2xl border border-warm-200 shadow-sm">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-10 p-4 sm:p-5 bg-white/70 backdrop-blur-sm rounded-2xl border border-warm-200 shadow-sm">
-              <div className="flex items-center gap-4">
+              <div className="flex items-center gap-3">
                 {/* Calendar icon */}
-                <div className="flex-shrink-0 w-12 h-12 bg-coral-100 rounded-xl flex items-center justify-center">
+                <div className="flex-shrink-0 w-10 h-10 bg-coral-100 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-coral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-5 h-5 text-coral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                   </svg>
                 </div>
                 <div>
-                  <p className="text-sm text-warm-500 font-medium uppercase tracking-wide">Datum</p>
+                  <p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Datum</p>
-                  <p className="text-lg font-semibold text-warm-800">Vrijdag 6 maart 2026</p>
+                  <p className="text-base font-semibold text-warm-800 whitespace-nowrap">Vrijdag 6 maart</p>
                 </div>
               </div>
-              <div className="flex items-center gap-4">
+              <div className="flex items-center gap-3">
                 {/* Clock icon */}
-                <div className="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-xl flex items-center justify-center">
+                <div className="flex-shrink-0 w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                   </svg>
                 </div>
                 <div>
-                  <p className="text-sm text-warm-500 font-medium uppercase tracking-wide">Tijd</p>
+                  <p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Tijd</p>
-                  <p className="text-lg font-semibold text-warm-800">9:00 - 14:00</p>
+                  <p className="text-base font-semibold text-warm-800 whitespace-nowrap">9:00 - 14:00</p>
                 </div>
               </div>
-              <div className="flex items-center gap-4">
+              <div className="flex items-center gap-3">
                 {/* Location icon */}
-                <div className="flex-shrink-0 w-12 h-12 bg-coral-100 rounded-xl flex items-center justify-center">
+                <div className="flex-shrink-0 w-10 h-10 bg-coral-100 rounded-lg flex items-center justify-center">
-                  <svg className="w-6 h-6 text-coral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-5 h-5 text-coral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                   </svg>
                 </div>
                 <div>
-                  <p className="text-sm text-warm-500 font-medium uppercase tracking-wide">Locatie</p>
+                  <p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Locatie</p>
-                  <p className="text-lg font-semibold text-warm-800">Utrecht</p>
+                  <p className="text-base font-semibold text-warm-800 whitespace-nowrap">Utrecht</p>
                 </div>
               </div>
             </div>
@@ -118,17 +123,15 @@ function Hero() {
             </a>
           </div>
 
-          {/* Rechter kolom: afbeelding placeholder */}
+          {/* Rechter kolom: workshop foto */}
           <div className="hidden lg:block">
-            <div className="relative aspect-[4/3] bg-gradient-to-br from-warm-100 to-warm-200 rounded-2xl border-2 border-dashed border-warm-300 flex items-center justify-center">
+            <div className="relative">
-              {/* Placeholder icon en tekst */}
+              <img
-              <div className="text-center text-warm-400">
+                src="/frank-workshop-claude-code.jpg"
-                <svg className="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                alt="Frank Meeuwsen geeft een workshop over Claude Code"
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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" />
+                className="rounded-2xl shadow-lg w-full"
-                </svg>
+                style={{ filter: 'brightness(1.12) contrast(1.05) saturate(0.95)' }}
-                <p className="text-lg font-medium">Workshop afbeelding</p>
+              />
-                <p className="text-sm">Komt binnenkort</p>
-              </div>
               {/* Decoratieve elementen */}
               <div className="absolute -top-4 -right-4 w-24 h-24 bg-coral-200 rounded-full blur-2xl opacity-50" />
               <div className="absolute -bottom-4 -left-4 w-20 h-20 bg-teal-200 rounded-full blur-2xl opacity-50" />

src/components/StickyBar.jsx

@@ -61,7 +61,7 @@ function StickyBar() {
             {/* Right: Price + CTA */}
             <div className="flex items-center gap-4">
               <span className="font-display font-bold text-xl text-warm-900">
-                €449
+                €399
               </span>
               <a
                 href="#inschrijven"
@@ -81,7 +81,7 @@ function StickyBar() {
             {/* Left: Prijs en datum */}
             <div>
               <div className="font-display font-bold text-lg text-warm-900">
-                €449
+                €399
               </div>
               <div className="text-xs text-warm-500">
                 6 maart 2026 | Utrecht

src/components/Trainer.jsx

@@ -17,28 +17,13 @@ function Trainer() {
         {/* Trainer card */}
         <div className="max-w-4xl mx-auto">
           <div className="card flex flex-col md:flex-row gap-8 items-center md:items-start">
-            {/* Foto placeholder */}
+            {/* Foto */}
             <div className="flex-shrink-0">
-              <div className="w-48 h-48 rounded-2xl bg-gradient-to-br from-coral-100 to-teal-100 flex items-center justify-center">
+              <img
-                {/* Placeholder icon */}
+                src="https://frankmeeuwsen.com/wp-content/uploads/2025/10/Frank-ava-clean.png"
-                <svg
+                alt="Frank Meeuwsen"
-                  className="w-24 h-24 text-warm-300"
+                className="w-48 h-48 rounded-2xl object-cover"
-                  fill="none"
+              />
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                  />
-                </svg>
-              </div>
-              {/* Placeholder tekst onder foto */}
-              <p className="text-xs text-warm-400 text-center mt-2">
-                [Foto toevoegen]
-              </p>
             </div>
 
             {/* Bio content */}
@@ -47,26 +32,21 @@ function Trainer() {
                 Frank Meeuwsen
               </h3>
 
-              {/* Bio - placeholder tekst */}
               <div className="space-y-4 text-warm-600">
                 <p className="leading-relaxed">
-                  <span className="text-warm-400 italic">
+                  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.
-                    [Korte bio - 2-3 zinnen over Frank's achtergrond met AI en Claude Code]
-                  </span>
                 </p>
 
                 <p className="leading-relaxed">
-                  <span className="text-warm-400 italic">
+                  Ik leer je zonder hype en bullshit wat NU de mogelijkheden van AI zijn en hoe je hier zelf eigenaarschap in krijgt.
-                    [Relevante ervaring/credentials - bijvoorbeeld hoeveel jaar ervaring,
-                    welke bedrijven geholpen, publicaties, etc.]
-                  </span>
                 </p>
 
                 <p className="leading-relaxed">
-                  <span className="text-warm-400 italic">
+                  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.
-                    [Persoonlijke noot over waarom hij deze workshop geeft -
+                </p>
-                    wat drijft hem, wat wil hij deelnemers meegeven]
+
-                  </span>
+                <p className="leading-relaxed">
+                  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 een assistent die je kan helpen met jouw werk, met datgene wat jij vindt dat er toe doet.
                 </p>
               </div>
 

src/pages/Privacy.jsx

@@ -42,8 +42,8 @@ function Privacy() {
             </p>
             <ul className="list-none pl-0 space-y-1">
               <li><strong>Naam:</strong> Frank Meeuwsen</li>
-              <li><strong>KvK-nummer:</strong> [KvK-nummer invullen]</li>
+              <li><strong>KvK-nummer:</strong> 98386247</li>
-              <li><strong>Vestigingsplaats:</strong> [vestigingsplaats invullen]</li>
+              <li><strong>Vestigingsplaats:</strong> Utrecht</li>
               <li>
                 <strong>E-mail:</strong>{' '}
                 <a href="mailto:frank@frankmeeuwsen.com" className="text-coral-500 hover:text-coral-600">

src/pages/Terms.jsx

@@ -41,8 +41,8 @@ function Terms() {
             <p>In deze algemene voorwaarden wordt verstaan onder:</p>
             <ul className="list-disc pl-6 space-y-2">
               <li>
-                <strong>Aanbieder:</strong> Frank Meeuwsen, gevestigd te [vestigingsplaats],
+                <strong>Aanbieder:</strong> Frank Meeuwsen, gevestigd te Utrecht,
-                ingeschreven bij de Kamer van Koophandel onder nummer [KvK-nummer].
+                ingeschreven bij de Kamer van Koophandel onder nummer 98386247.
               </li>
               <li>
                 <strong>Deelnemer:</strong> de natuurlijke persoon of rechtspersoon die zich