// ADV Transport - multi-page React components (no build step) // Routing: each HTML file sets
. // The router at the bottom of this file picks the right page component. const { useState, useEffect, useMemo } = React; // ---------- Brand tokens ---------- const BRAND = { accent: '#C9A24B', accentHover: '#A47F2C', accentSoft: '#E3C77A', accentTint: 'rgba(201,162,75,0.12)', action: '#1E2126', actionHover: '#121418', ink: '#121418', inkDeep: '#0A0B0E', inkSoft: '#1E2126', paper: '#FFFFFF', paperWarm: '#F6F4F0', paperGrey: '#EEECE7', muted: '#525866', line: '#E3E1DC', gold: '#C9A24B', goldDeep: '#A47F2C', goldLight: '#E3C77A', // radii rCard: 14, rBtn: 10, rInput: 8, rTile: 12, // layered shadows shadowCard: '0 1px 2px rgba(18,20,24,0.06), 0 12px 32px -16px rgba(18,20,24,0.14)', shadowCardHover: '0 2px 4px rgba(18,20,24,0.08), 0 20px 44px -18px rgba(18,20,24,0.22)', shadowBtn: '0 1px 2px rgba(18,20,24,0.10), 0 10px 24px -12px rgba(18,20,24,0.35)', get red() {return this.accent;}, get navy() {return this.ink;}, get cream() {return this.paperWarm;} }; const CONTACT = { address: 'Ettenseweg 4C, 4706 PB Roosendaal', email: 'adv-transport@outlook.com', phonePrimaryDisplay: '06 40 71 28 67', phonePrimaryTel: 'tel:+31640712867', phoneSecondaryDisplay: '06 24 60 04 24', phoneSecondaryTel: 'tel:+31624600424', waNumber: '31640712867', waMessage: 'Hallo, ik heb een vraag over een transport.', kvk: '20039255', btw: 'NL867166708B01' }; const WA_URL = `https://wa.me/${CONTACT.waNumber}?text=${encodeURIComponent(CONTACT.waMessage)}`; const WEB3FORMS = { endpoint: 'https://api.web3forms.com/submit', accessKey: 'b3a9db5d-470c-4657-87f7-88e4bc8d2f55' }; const submitWeb3Form = async (payload) => { const res = await fetch(WEB3FORMS.endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ access_key: WEB3FORMS.accessKey, ...payload }) }); const json = await res.json(); if (!json.success) throw new Error(json.message || 'Er ging iets mis bij het verzenden. Probeer het later opnieuw.'); return json; }; const URGENT_RED = '#E11D48'; const URGENT_RED_HOVER = '#BE123C'; // Page registry - used by the header nav and router. const PAGES = [ { id: 'home', label: 'Home', href: 'index.html' }, { id: 'diensten', label: 'Diensten', href: 'diensten.html' }, { id: 'bus-verhuur', label: 'Bus Verhuur', href: 'bus-verhuur.html' }, { id: 'werkwijze', label: 'Werkwijze', href: 'werkwijze.html' }, { id: 'over-ons', label: 'Over Ons', href: 'over-ons.html' }, { id: 'regio', label: 'Regio', href: 'regio.html' }, { id: 'werken-bij', label: 'Werken bij', href: 'werken-bij.html' }, { id: 'contact', label: 'Contact', href: 'contact.html' }]; // ---------- Reusable bits ---------- const SectionLabel = ({ children, light = false }) =>
{children}
; const Logo = ({ size = 64, dark = false }) => ADV Transport ; const GoldButton = ({ children, href = 'contact.html', icon: Icon, variant = 'solid', onClick, tone }) => { const base = 'inline-flex items-center gap-2.5 px-7 py-[15px] transition-all duration-200'; if (variant === 'solid') { const isGold = tone === 'gold'; const solidBg = isGold ? BRAND.accent : BRAND.action; const solidBgHover = isGold ? BRAND.accentHover : BRAND.actionHover; return ( e.currentTarget.style.background = solidBgHover} onMouseLeave={(e) => e.currentTarget.style.background = solidBg}> {children} {Icon && } ); } const ghostColor = tone === 'light' ? '#fff' : BRAND.ink; return ( e.currentTarget.style.borderColor = tone === 'light' ? '#fff' : BRAND.accent} onMouseLeave={(e) => e.currentTarget.style.borderColor = tone === 'light' ? 'rgba(255,255,255,0.7)' : BRAND.line}> {children} {Icon && } ); }; // ---------- Header ---------- const Header = ({ current }) => { const [open, setOpen] = useState(false); return (
e.currentTarget.style.background = URGENT_RED_HOVER} onMouseLeave={(e) => e.currentTarget.style.background = URGENT_RED}> Spoed
Offerte
{open &&
{PAGES.map((p) => setOpen(false)} className="py-2" style={{ color: p.id === current ? BRAND.accentHover : BRAND.ink, borderBottom: `1px solid ${BRAND.line}`, fontSize: 17, fontWeight: p.id === current ? 700 : 600 }}> {p.label} )} setOpen(false)} className="inline-flex items-center justify-center gap-2 py-3" style={{ background: URGENT_RED, color: '#fff', borderRadius: BRAND.rBtn, fontSize: 15, fontWeight: 700, letterSpacing: '0.02em' }}> Spoed bellen Direct Offerte
}
); }; // ---------- Breadcrumb + PageHero ---------- const Breadcrumb = ({ trail }) => ; const PageHero = ({ eyebrow, title, subtitle, breadcrumb, image }) =>
{image ?
:
}
{breadcrumb && }
{eyebrow}

{title}

{subtitle &&

{subtitle}

}
; // ---------- Home: Hero ---------- const Hero = () =>
Premium koeriersdienst · Roosendaal

Koeriersbedrijf Roosendaal

Spoedkoerier, internationaal transport, bus verhuur en geplande leveringen

Persoonlijke planning, snelle routes door heel Nederland en Europa, en bevestiging bij elke aflevering.

Lees meer Offerte aanvragen
{[ ['ShieldCheck', 'CMR-verzekerd'], ['BadgeCheck', `KvK ${CONTACT.kvk}`], ['Clock3', '24/7 bereikbaar']]. map(([ic, label]) => { const ChipIcon = lucide[ic] || lucide.Check; return ( {label} ); })}
; // ---------- Diensten ---------- const ServiceCard = ({ index, icon: Icon, title, tag, description, bullets, cta, ctaHref = 'contact.html', expanded = false }) =>
{ e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = BRAND.shadowCardHover; e.currentTarget.style.borderColor = BRAND.accentSoft; const bar = e.currentTarget.querySelector('[data-accentbar]'); if (bar) bar.style.opacity = 1; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = BRAND.shadowCard; e.currentTarget.style.borderColor = BRAND.line; const bar = e.currentTarget.querySelector('[data-accentbar]'); if (bar) bar.style.opacity = 0; }}>
{tag}

{title}

{description}

e.currentTarget.style.color = BRAND.accentHover} onMouseLeave={(e) => e.currentTarget.style.color = BRAND.ink}> {cta}
; const SERVICES = [ { index: 1, icon: 'Zap', tag: 'Sneldienst', title: 'Spoedkoerier', description: 'Directe inzet bij urgente zendingen. Onze koeriers staan 24 uur per dag, 7 dagen per week klaar om uw pakket per direct op te halen en te bezorgen.', bullets: ['Dispatch binnen 30 minuten', '24/7 inzetbaar, ook in het weekend', 'Directe rit - geen tussenstops', 'Realtime track & trace'], cta: 'Plan een spoedrit' }, { index: 2, icon: 'Globe2', tag: 'Internationaal', title: 'Buitenland Koerier', description: 'Betrouwbaar vervoer naar heel Europa. Van geplande wekelijkse ritten tot expresleveringen - uw lading komt aan waar en wanneer afgesproken.', bullets: ['Vaste en expresroutes door Europa', 'Douaneafhandeling geregeld', 'CMR-verzekerd transport', 'Meertalig chauffeurscontact'], cta: 'Bereken Europese rit' }, { index: 3, icon: 'Truck', tag: 'Wagenpark', title: 'Bus Verhuur', description: 'Mercedes Sprinter L2 en L3, beschikbaar voor kort- en langdurige verhuur. Goed onderhouden, volledig verzekerd, klaar voor gebruik.', bullets: ['Sprinter L2 of L3 - u kiest', 'Vanuit depot Roosendaal', 'Per dag, week of maand', 'Inclusief pechhulp & verzekering'], cta: 'Bekijk bussen', ctaHref: 'bus-verhuur.html' }, { index: 4, icon: 'Package', tag: 'Regulier', title: 'Normale Diensten', description: 'Dagelijkse en geplande leveringen zonder spoedtoeslag. Ideaal voor bedrijven met vaste routes of terugkerende ritten binnen NL en Europa.', bullets: ['Dagelijkse en geplande ritten', 'Vaste tijdsvensters mogelijk', 'Transparante kilometerprijs', 'Vaste contactpersoon'], cta: 'Bekijk mogelijkheden' }]; const DienstenGrid = ({ expanded = false, intro }) =>
{intro &&
Onze Diensten

Koeriersdiensten voor elke zending.

Of het nu gaat om een spoedzending binnen de regio, een Europese route of tijdelijk extra laadruimte - wij bieden een oplossing met persoonlijk contact.
}
{SERVICES.map((s) => )}
; // ---------- Werkwijze (4 steps) ---------- const STEPS = [ { n: '1', icon: 'MessageSquare', t: 'Aanvraag', d: 'Bel of stuur uw aanvraag via het formulier. U krijgt doorgaans binnen het uur een persoonlijke offerte.' }, { n: '2', icon: 'CalendarCheck', t: 'Inplannen', d: 'Wij bevestigen ophaaltijd, route en chauffeur. U kent vooraf het kostenplaatje en de aankomstvensters.' }, { n: '3', icon: 'Truck', t: 'Ophalen & rijden', d: 'Onze koerier haalt de zending op, bevestigt het ophaalmoment en rijdt de directe route - met track & trace.' }, { n: '4', icon: 'CheckCircle2', t: 'Bevestigd geleverd', d: 'Levering met handtekening of fotobevestiging. U ontvangt een bevestiging zodra het pakket binnen is.' }]; const Werkwijze = ({ compact = false }) =>
Hoe Het Werkt

Van aanvraag tot bevestigde levering in 4 stappen.

{STEPS.map((s, i) => { const Icon = lucide[s.icon]; return (
{s.n}
{i < STEPS.length - 1 && }

{s.t}

{s.d}

); })}
; // ---------- Voordelen ---------- const Voordelen = () => { const items = [ { icon: 'MapPin', title: 'Lokale Expert', body: 'Geboren en getogen in Roosendaal - wij kennen elke route, elke afslag, elke verkeersluwe tijd in West-Brabant.' }, { icon: 'Clock3', title: 'Snel & Stipt', body: 'Duidelijke ophaal- en leverwindows. Bij ons is "op tijd" geen belofte maar een standaard.' }, { icon: 'Sparkles', title: 'Modern Wagenpark', body: 'Jong, schoon en goed onderhouden. Uw lading verdient een vervoermiddel dat net zo representatief is als uw merk.' }, { icon: 'ShieldCheck', title: '100% Verzekerd', body: 'Volledig CMR- en transportverzekerd vervoer. Rust in de wetenschap dat alles is afgedekt.' }]; return (
Onze Voordelen

Waarom bedrijven kiezen voor ons koeriersbedrijf.

{items.map((it, i) => { const Icon = lucide[it.icon]; return (
{e.currentTarget.style.borderColor = 'rgba(201,162,75,0.45)';e.currentTarget.style.background = 'rgba(255,255,255,0.06)';}} onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)';e.currentTarget.style.background = 'rgba(255,255,255,0.04)';}}>
{`0${i + 1}`}

{it.title}

{it.body}

); })}
); }; // ---------- Over Ons ---------- const OverOnsIntro = () =>
ADV Transport koerier
Over ons

Betrouwbaar koeriersbedrijf met 8+ jaar ervaring.

Al meer dan 8 jaar verzorgt ADV Transport koeriers- en transportdiensten door heel Nederland en Europa. Persoonlijke service, stipte levering en transparante communicatie staan centraal bij elke rit.

    {[ '8+ jaar ervaring in koerierstransport', 'Persoonlijke planning en vaste chauffeurs', 'Duidelijke communicatie en bevestiging bij levering']. map((point) =>
  • {point}
    • )}
KvK {CONTACT.kvk} · BTW {CONTACT.btw} · CMR-verzekerd · 24/7 bereikbaar
; const Tijdlijn = () => { const events = [ { year: '2017', t: 'Oprichting', d: 'ADV Transport gestart in Roosendaal met een focus op spoedritten in West-Brabant.' }, { year: '2019', t: 'Eerste internationale routes', d: 'Uitbreiding met geplande wekelijkse ritten naar België en Duitsland.' }, { year: '2021', t: 'Wagenpark uitgebreid', d: 'Investering in nieuwe bedrijfsbussen - klein, middel en groot - voor flexibele inzet.' }, { year: '2024', t: 'Bus Verhuur gelanceerd', d: 'Eigen verhuurservice opgezet voor bedrijven die tijdelijk extra laadruimte nodig hebben.' }, { year: 'Nu', t: 'Servicegebied: Europa', d: 'Dagelijks actief in Nederland en Europa, met groeiend internationaal netwerk.' }]; return (
Onze Tijdlijn

Acht jaar onderweg.

    {events.map((e) =>
  1. {e.year}

    {e.t}

    {e.d}

    2. )}
); }; const Waarden = () => { const items = [ { icon: 'Handshake', t: 'Persoonlijk', d: 'Geen call-center. U spreekt altijd een vaste contactpersoon die uw zending kent.' }, { icon: 'Clock3', t: 'Stipt', d: 'Beloofde ophaal- en levervensters zijn voor ons een harde verplichting.' }, { icon: 'Lock', t: 'Vertrouwd', d: 'CMR-verzekering, vaste chauffeurs, NDA waar nodig - uw lading is in veilige handen.' }]; return (
Onze Waarden

Wat ons drijft, elke dag.

{items.map((it) => { const Icon = lucide[it.icon] || lucide.Star; return (

{it.t}

{it.d}

); })}
); }; // ---------- Trust Signals (reviews only - no fake logos) ---------- const TrustSignals = () => { const reviews = [ { name: 'S. Jansen', role: 'Vaste klant', quote: 'Snel en netjes geleverd, goede communicatie van begin tot eind.' }, { name: 'M. de Vries', role: 'Logistiek manager', quote: 'Altijd op tijd en professioneel contact - vaste partner inmiddels.' }, { name: 'L. Peters', role: 'Ondernemer', quote: 'Betrouwbare partner voor onze spoedzendingen, ook \'s avonds bereikbaar.' }]; return (
Wat klanten zeggen

1.200+ zendingen, 98% op tijd.

★★★★★
9.2 / 10
Klantbeoordeling
{reviews.map((r, i) =>
"
{'★'.repeat(5)}

"{r.quote}"

{r.name.charAt(0)}
{r.name}
{r.role}
)}
); }; // ---------- Location Map ---------- const LocationMap = () =>
Onze Locatie

Gevestigd in Roosendaal.

Vanuit het hart van West-Brabant rijden onze koeriers dagelijks door heel Nederland en Europa.

{[ [lucide.MapPin, 'Adres', CONTACT.address], [lucide.Phone, 'Telefoon', CONTACT.phonePrimaryDisplay], [lucide.Mail, 'E-mail', CONTACT.email], [lucide.Clock3, 'Openingstijden', '24/7 voor spoed · ma–vr 08:00–18:00']]. map(([Icon, label, val]) =>
{label}
{val}
)}
Route plannen
Roosendaal · HQ