139 lines
7 KiB
React
139 lines
7 KiB
React
|
/**
|
||
|
|
* Hero.jsx - De eerste sectie die bezoekers zien
|
||
|
|
*
|
||
|
|
* Bevat de hoofdboodschap, subheadline, intro tekst en primaire CTA.
|
||
|
|
* Gebruikt coral accent kleuren en een decoratieve blob op de achtergrond.
|
||
|
|
*/
|
||
|
|
|
||
|
|
function Hero() {
|
||
|
|
// Aantal beschikbare plaatsen - later dynamisch te maken
|
||
|
|
const availableSpots = 7;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="section relative overflow-hidden">
|
||
|
|
{/* Decoratieve blob op achtergrond */}
|
||
|
|
<div
|
||
|
|
className="absolute -top-40 -right-40 w-96 h-96 bg-coral-100 rounded-full blur-3xl opacity-60"
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
className="absolute -bottom-20 -left-20 w-64 h-64 bg-teal-100 rounded-full blur-3xl opacity-40"
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="container-page relative">
|
||
|
|
{/* Twee-kolommen layout: tekst links, afbeelding rechts */}
|
||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
|
|
{/* Linker kolom: tekst content */}
|
||
|
|
<div>
|
||
|
|
{/* Urgency badge */}
|
||
|
|
<div className="mb-6">
|
||
|
|
<span className="inline-flex items-center gap-2 px-4 py-2 bg-coral-100 text-coral-700 rounded-full text-sm font-medium">
|
||
|
|
<span className="relative flex h-2 w-2">
|
||
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-coral-500 opacity-75"></span>
|
||
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-coral-500"></span>
|
||
|
|
</span>
|
||
|
|
Maximaal {availableSpots} plaatsen
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Headline */}
|
||
|
|
<h1 className="heading-hero mb-6">
|
||
|
|
Van{' '}
|
||
|
|
<span className="text-coral-500">"dit moet ik uitzoeken"</span>
|
||
|
|
{' '}naar{' '}
|
||
|
|
<span className="text-teal-600">"dit werkt gewoon"</span>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
{/* Subheadline */}
|
||
|
|
<p className="text-xl md:text-2xl text-warm-600 mb-6 leading-relaxed">
|
||
|
|
In 1 ochtend van nieuwsgierig naar praktisch aan de slag met Claude Code.
|
||
|
|
Je gaat naar huis met je eigen werkende project.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Intro tekst */}
|
||
|
|
<p className="text-lg text-warm-600 mb-8 leading-relaxed">
|
||
|
|
Je hebt van Claude Code gehoord. Misschien zelfs al even mee gespeeld.
|
||
|
|
Maar ergens tussen de installatie en dat eerste echte resultaat ben je
|
||
|
|
blijven hangen. Herkenbaar? In deze hands-on workshop doorbreek je die drempel.
|
||
|
|
Samen met maximaal 6 andere ondernemers ga je van nul naar een werkend project
|
||
|
|
dat je direct kunt gebruiken in je business.
|
||
|
|
</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">
|
||
|
|
{/* 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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
{/* 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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
{/* 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">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* CTA Button */}
|
||
|
|
<a
|
||
|
|
href="#inschrijven"
|
||
|
|
className="btn-primary inline-flex items-center gap-2"
|
||
|
|
>
|
||
|
|
Schrijf je in
|
||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Rechter kolom: afbeelding placeholder */}
|
||
|
|
<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>
|
||
|
|
{/* 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" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Hero;
|