Hoe 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). Daarnaast bleek er een tweede, apart project te bestaan in dezelfde klantmap: een Next.js-app met een werkende AI-zoekfunctie (Anthropic tool-calling over een MongoDB-collectie van wintersportaccommodaties).

2. Een tegenstrijdigheid, opgelost

Het design-system beschreef Vergelijker.nl als een vergelijker voor energie, internet en verzekeringen — generieke template-copy. De AI-chat die behouden moest blijven, doet iets anders: hij zoekt wintersportaccommodaties op locatie, data en aantal slaapkamers. De Webflow-site zelf had helemaal geen chat.

Conclusie: het merk (kleuren, logo, fonts, componenten, lay-out) is 1-op-1 overgenomen — dat was een harde eis. De tekst is herschreven naar wat het product daadwerkelijk doet: chalets, appartementen en hotels vergelijken voor een wintersportvakantie, met AI-hulp. De chat-code zelf (frontend én backend) is niet aangeraakt.

3. Architectuurkeuzes

• De bestaande Next.js-app is uitgebreid in plaats van vervangen — de chat-integratie (component, API-client, Express-route, Anthropic-call) stond al te werken en is nul keer gewijzigd.
• Alle merk-tokens (kleuren, fonts, radii, motion-easing) zijn als CSS-variabelen ingeladen die de bestaande UI-componenten al gebruikten — daardoor is de hele site, inclusief het boekingsdeel, automatisch in huisstijl komen te staan zonder die componenten te hoeven aanpassen.
• De site is statisch geëxporteerd (output: "export") voor een snelle, goedkope Cloudflare Pages-deploy. De twee detailpagina's met een dynamisch ID (accommodatie, reservering) krijgen op Cloudflare een kleine statische "shell"-route via _redirects, die het ID uit de URL leest — nodig omdat statische export geen onbekende IDs vooraf kan renderen.

4. Bouwproces

Elke pagina uit de originele site is herbouwd op het gelockte design-system, in drie stappen:

5. Bekende beperking

De AI-chat is functioneel én ongewijzigd overgenomen, maar heeft een live backend nodig om echt antwoord te geven: een Anthropic API-key en een gevulde MongoDB-database. Die stonden bij audit nog niet klaar (lokale placeholders, geen productie-URL). De frontend is correct bekabeld naar die backend via een environment variable — zodra de key en database er zijn, werkt de chat zonder verdere wijzigingen aan deze site.