frankmeeuwsen/workshopclaudecode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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>
This commit is contained in:
Frank Meeuwsen 2026-02-10 11:48:56 +01:00
parent c4ee40b4b3
commit f52064e4cd
8 changed files with 51 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
content/frank-workshop-claude-code.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 204 KiB

2
content/workshop-sales-page.md
View file

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

BIN
public/frank-workshop-claude-code.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 204 KiB

59
src/components/Hero.jsx
View file

@ -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="flex items-center gap-4">
<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-3">
{/* Calendar icon */}
<div className="flex-shrink-0 w-12 h-12 bg-coral-100 rounded-xl flex items-center justify-center">
<svg className="w-6 h-6 text-coral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex-shrink-0 w-10 h-10 bg-coral-100 rounded-lg flex items-center justify-center">
<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-lg font-semibold text-warm-800">Vrijdag 6 maart 2026</p>
<p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Datum</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">
<svg className="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex-shrink-0 w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center">
<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-lg font-semibold text-warm-800">9:00 - 14:00</p>
<p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Tijd</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">
<svg className="w-6 h-6 text-coral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex-shrink-0 w-10 h-10 bg-coral-100 rounded-lg flex items-center justify-center">
<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-lg font-semibold text-warm-800">Utrecht</p>
<p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Locatie</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">
{/* Placeholder icon en tekst */}
<div className="text-center text-warm-400">
<svg className="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
</svg>
<p className="text-lg font-medium">Workshop afbeelding</p>
<p className="text-sm">Komt binnenkort</p>
</div>
<div className="relative">
<img
src="/frank-workshop-claude-code.jpg"
alt="Frank Meeuwsen geeft een workshop over Claude Code"
className="rounded-2xl shadow-lg w-full"
style={{ filter: 'brightness(1.12) contrast(1.05) saturate(0.95)' }}
/>
{/* 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" />

4
src/components/StickyBar.jsx
View file

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

44
src/components/Trainer.jsx
View file

@ -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">
{/* Placeholder icon */}
<svg
className="w-24 h-24 text-warm-300"
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"
<img
src="https://frankmeeuwsen.com/wp-content/uploads/2025/10/Frank-ava-clean.png"
alt="Frank Meeuwsen"
className="w-48 h-48 rounded-2xl object-cover"
/>
</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">
[Korte bio - 2-3 zinnen over Frank's achtergrond met AI en Claude Code]
</span>
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.
</p>
<p className="leading-relaxed">
<span className="text-warm-400 italic">
[Relevante ervaring/credentials - bijvoorbeeld hoeveel jaar ervaring,
welke bedrijven geholpen, publicaties, etc.]
</span>
Ik leer je zonder hype en bullshit wat NU de mogelijkheden van AI zijn en hoe je hier zelf eigenaarschap in krijgt.
</p>
<p className="leading-relaxed">
<span className="text-warm-400 italic">
[Persoonlijke noot over waarom hij deze workshop geeft -
wat drijft hem, wat wil hij deelnemers meegeven]
</span>
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.
</p>
<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>

4
src/pages/Privacy.jsx
View file

@ -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>Vestigingsplaats:</strong> [vestigingsplaats invullen]</li>
<li><strong>KvK-nummer:</strong> 98386247</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">

4
src/pages/Terms.jsx
View file

@ -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],
ingeschreven bij de Kamer van Koophandel onder nummer [KvK-nummer].
<strong>Aanbieder:</strong> Frank Meeuwsen, gevestigd te Utrecht,
ingeschreven bij de Kamer van Koophandel onder nummer 98386247.
</li>
<li>
<strong>Deelnemer:</strong> de natuurlijke persoon of rechtspersoon die zich