Hoe deze redesign is gemaaktHoe deze redesign is gemaakt

1. Audit eerst

Voordat er iets gebouwd werd, is de bestaande situatie in kaart gebracht: de volledige Webflow-export van Vergelijker.nl (alle pagina's, CSS, fonts, afbeeldingen) en het bijbehorende design-system (kleuren, typografie, componenten, richtlijnen). Het merk is als hard vertrekpunt genomen: Neighbor + Geist, de roze CTA-knop met draaiende pijl, de afgeronde gekleurde sectiepanelen, hairline borders, geen schaduwen.

2. De koerswijziging

De eerste versie van deze redesign was per abuis geschreven rond wintersportaccommodaties — er stond een tweede project in dezelfde klantmap met een werkende accommodatie-zoekfunctie, en die context won het onterecht van het design-system. Na feedback is de hele site herschreven naar wat Vergelijker.nl echt is: onafhankelijk vergelijken van energie, internet & tv, mobiel en verzekeringen. Het merk bleef exact gelijk; alle copy, categorieën en blogartikelen zijn opnieuw gemaakt.

3. Ollie als hoofdrolspeler

In de Webflow-export bleek de echte AI-chat te zitten: een n8n-chatwidget, "Ollie de Vergelijker", compleet met merk-styling en welkomstbericht. Die embed is byte-getrouw overgenomen (zelfde CDN-bundle, zelfde configuratie, zelfde avatar-styling) en tot hoofd-CTA van de site gemaakt: elke pagina stuurt naar Chat met Ollie op de homepage. Eén ding stond in de export leeg: de webhook-URL van de n8n-workflow. Die is nu instelbaar via een environment variable — URL invullen en Ollie praat.

4. Beweging als handtekening

De originele site gebruikte GSAP met SplitText: letters die per stuk omhoog draaien bij het scrollen. Dat effect is met de hand nagebouwd (geen GSAP, geen jQuery) en uitgebreid met een muis-volgend 3D-laagje: zwevende illustraties in de hero die met je cursor meebewegen, kaarten die in 3D kantelen richting de muis, magnetische CTA-knoppen en een dissolve-overgang tussen pagina's. Alles respecteert prefers-reduced-motion.

5. Bouwproces

6. Techniek & open punten

• Next.js, statisch geëxporteerd, gehost op Cloudflare Pages — snel en goedkoop, geen server nodig voor de site zelf.
• Open punt: de n8n-webhook-URL voor Ollie (leeg in de Webflow-export). Zodra de n8n-workflow live staat: NEXT_PUBLIC_N8N_CHAT_WEBHOOK_URL zetten, opnieuw builden, klaar.
• De eerdere wintersport-funtionaliteit (accommodatie-zoeker, boekingsflow) is uit de site gehaald maar staat nog onaangeroerd in de codebase, mocht die elders nodig zijn.