Eco-BBQ — Marketingsite voor de Wegwerp-Eco-BBQ

Eco-BBQ is een zero-waste wegwerp-barbecuekit die verdeeld wordt in België, Frankrijk, Spanje en Portugal. De site fungeert tegelijk als consumentenetalage (hoe het werkt, waar te kopen) en als B2B-funnel voor verkopers die het product willen aanbieden. Drie locales, volledig statisch, gehost bij Combell.

Het probleem

Deze site is een v2 — en v1 is de echte les van het project. De eerste versie had 79 commits over twee maanden opgestapeld: overal GSAP-animaties, een “story”-pagina, een Svelte-carrousel van derden… en meer dan twintig layout- en overflow-fixes veroorzaakt door die complexiteit. De build woog 30 MB voor een landingspagina. In plaats van te blijven oplappen werd de site van nul herschreven op een bewust eenvoudigere basis.

Beperkingen

• Combell shared hosting: alleen statisch, geen server, geen build aan hostingkant.
• Leads vangen zonder backend — consumentencontact en B2B-aanvragen van verkopers.
• Drie locales met vertaalde slugs (/fr/partenariat, /en/partnership, /nl/partnerschap).
• Een korte rewrite: v2 moest snel uitkomen om de klant geen tweede keer te blokkeren.

Architectuur

Astro 5 in volledig statische modus met Tailwind en DaisyUI als design-systeem. Het grootste deel van de pagina zit in .astro-componenten die server-side renderen en geen JavaScript meesturen; het enige gehydrateerde eiland is de Svelte 5 verkopers-kaart, die het verspilling zou zijn om voor elke bezoeker te bundelen.

.astro-componenten      →  Navbar, Hero, Voordelen, Hoe het werkt, Testimonials, Footer
Svelte 5-eiland         →  OpenLayers verkopers-kaart (Map.svelte)
Swiper 11 vanilla       →  Hero-carrousel + testimonial-carrousel

Swiper wordt als standalone bundle geladen voor de twee carrousels in plaats van verpakt in een framework — de runtime-kost blijft minimaal en we hoeven geen React of Vue mee te slepen om gewoon een slider te draaien.

Hoe Het Werkt

De “hoe het werkt”-sectie combineert een YouTube-uitleg met een strook van vier pictogrammen. De inhoud (titels, beschrijvingen, illustraties) komt uit src/i18n/translatedContent/*.js-modules, dus tekst aanpassen vraagt geen wijziging in de markup.

Testimonials

Acht echte klantverhalen per taal worden als een statisch raster op desktop weergegeven en als een Swiper-carrousel op mobiel. Elke kaart is server-gerenderde HTML; de carrousel-JS hecht zich alleen onder de mobile-breakpoint aan, dus desktopbezoekers betalen er niets voor.

Verkopers-Kaart

De “Nous trouver”-sectie gebruikt OpenLayers 8 om het netwerk van verkopers op een interactieve kaart te tonen, met een filterbare lijst die synchroon loopt met de kaart-state. OpenLayers werd gekozen boven Google Maps om de kaart vrij te houden van API-quota en tracking-cookies — de site toont geen cookiebanner omdat hij op de homepage geen enkele derde-partij-tracker laadt.

i18n & Partner-Flow

Drie locales (fr, en, nl) waarbij de Franse prefix behouden blijft (/fr/, niet de root) zodat de URL-structuur uniform blijft. Route-slugs worden per locale vertaald — /fr/partenariat, /en/partnership, /nl/partnerschap — afgehandeld door een dynamische [lang]/[partnership].astro-pagina met een B2B-formulier dat naar Formspree gaat. De sitemap-integratie genereert automatisch entries per locale.

Hosting

Statische build gepusht naar Combell shared hosting. Geen server, geen database, geen API — het contactformulier gaat naar Formspree en het partnerformulier naar een aparte Formspree-endpoint, zodat de site op goedkope statische infrastructuur kan blijven en toch leads vangt.

Wat er werd opgeleverd

• Volledige rewrite in 33 dagen en 35 commits (21 december 2024 → 23 januari 2025)
• Build bijna een derde kleiner: 30 MB → 11 MB (−63%)
• 7 HTML-pagina’s over 3 locales, 61 verkooppunten op de kaart, 8 testimonials per taal, 9 partnerlogo’s
• Twee Formspree-leadfunnels: consumentencontact en B2B-partnerschap

Lessen

• Herschrijven was goedkoper dan oplappen. V1 bleef layout-fixes opstapelen door zijn animaties; v2 schrapt GSAP, de “story”-pagina en de carrousel van derden — de bugs verdwenen samen met de complexiteit.
• Eén gehydrateerd eiland volstaat. Alleen de verkoperskaart verdient framework-JavaScript; al de rest is statische HTML. Elke toevoeging van interactiviteit moet haar plaats verdienen.
• Minder bibliotheken, minder integratiebugs. Standalone Swiper vervangt de Svelte-carrousel van derden die in v1 problemen gaf — één beproefde dependency in plaats van twee fragiele.