160 lines
7.8 KiB
JavaScript
160 lines
7.8 KiB
JavaScript
/**
|
|
* 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.
|
|
*/
|
|
|
|
import { Link } from 'react-router-dom';
|
|
import { WORKSHOP_CONFIG } from '../config/workshop';
|
|
import { PAYMENT_CONFIG } from '../config/payment';
|
|
|
|
function Hero() {
|
|
// Aantal beschikbare plaatsen - beheer via src/config/workshop.js
|
|
const { totalSpots, availableSpots, isSoldOut } = WORKSHOP_CONFIG;
|
|
|
|
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>
|
|
{isSoldOut
|
|
? 'Volgeboekt - wachtlijst beschikbaar'
|
|
: <><span className="line-through opacity-60">{totalSpots}</span>{' '}{availableSpots} {availableSpots === 1 ? 'plek' : 'plekken'} - kleine groep, persoonlijke aandacht</>
|
|
}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<h1 className="heading-hero mb-4">
|
|
Maak zelf de tools waar je nu nog voor betaalt
|
|
</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>
|
|
</p>
|
|
|
|
{/* 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 snapt hoe AI werkt. Je gebruikt Claude of ChatGPT voor teksten en research.
|
|
Maar je weet: er zit meer in. Claude Code werkt rechtstreeks op je computer - het
|
|
leest bestanden, maakt tools en regelt dingen die jij nu handmatig doet.
|
|
In deze <em>hands-on workshop</em> van een halve dag ga je van nul naar een werkend
|
|
project. Geen theorie. Gewoon doen.
|
|
</p>
|
|
|
|
{/* Workshop details - prominent weergave */}
|
|
<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-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-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-3">
|
|
{/* Clock icon */}
|
|
<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-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-3">
|
|
{/* Location icon */}
|
|
<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-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>
|
|
|
|
{/* CTA Button */}
|
|
{isSoldOut ? (
|
|
<Link
|
|
to={PAYMENT_CONFIG.WAITLIST_URL}
|
|
className="btn-primary inline-flex items-center gap-2"
|
|
>
|
|
Zet me op de wachtlijst
|
|
<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>
|
|
</Link>
|
|
) : (
|
|
<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: workshop foto */}
|
|
<div className="hidden lg:block">
|
|
<div className="relative">
|
|
<img
|
|
src={`${import.meta.env.BASE_URL}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" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Hero;
|