Energie · Advies
Tracemont
Een site in tien talen voor een onafhankelijke bemiddelaar in hernieuwbaar gas en koolstofarme brandstoffen.
- Doorlooptijd
- mei – sep 2026
- Rol
- Ontwerp en ontwikkeling
- Talen
- 10
- Doelgroepen — afnemers & producenten
- 2
De vraag
Tracemont verbindt kopers en producenten op Europese markten voor hernieuwbaar gas en koolstofarme brandstoffen. Het richt zich op twee heel verschillende doelgroepen, in tien markten, en moet een complex bedrijf eenvoudig uitleggen.
De uitdaging
Kopers willen geverifieerd aanbod, producenten willen gekwalificeerde kopers. Eén site moest beide aanspreken zonder generiek te worden. En de eerste grafiek voor de dienstmodellen leek op een cryptodashboard, terwijl de klant een grondstoffenmakelaar is en geen trading-app.
Wat ik bouwde
Een rustige, redactionele site met een videoheader en een schakelaar die de openingsboodschap — en het hele kleurenschema — afstemt op afnemers of producenten. Geanimeerde grafieken leggen de twee werkwijzen uit, een convergerende spotprijs en een stijgende langetermijncurve, en een beveiligd contactformulier houdt aanvragen schoon in tien talen.
Onder de motorkap
De onderdelen die het werk doen
01Eén schakelaar, twee doelgroepen
Een schakelaar afnemer/producent onder de kop herschrijft de openingsboodschap en wisselt het hele kleurenthema: marineblauw voor kopers, onyx voor producenten.
02Grafieken die het model uitleggen
Tracemont Strike: aanvoerlijnen die samenkomen in een tikkende spotprijs. Tracemont Mandate: één stijgende curve. Elk in een lichte en een donkere versie.
03Tien talen, volledige SEO
Elke pagina in tien talen op een eigen URL, met hreflang-links, gestructureerde data (financiële dienst, broodkruimels) en een sitemap van 48 URL's.
04Videoheader die werkt op telefoons
Een video in een lus. Blokkeert een telefoon autoplay, dan start hij bij de eerste aanraking of scroll in plaats van een zwart vlak te tonen.
05Beveiligd contactformulier
Een contactformulier met een verborgen honeypot-veld tegen bots, een bedankpagina en een cookiebanner (accepteren of alleen essentieel).
06Hosting in handen van de klant
De code staat in de eigen GitHub-repository van de klant en wordt uitgerold op Vercel. Een wachtwoord hield de site privé tot de lancering.
Nagebouwd met voorbeelddata — geen echte klantgegevens.
Gebouwd met
- React 19
- React Router
- Tailwind
- Motion
- Vercel
Hoe het tot stand kwam
Van briefing tot live
Doorlooptijd: mei – sep 2026
May 2026
Strategie & planning
Gebouwd op basis van de sitestructuur en het visuele identiteitsdocument van de klant. De eerste versie stond op 29 mei op een Vercel-preview ter beoordeling.
Jun – Aug 2026
Ontwerp & bouw
Zes rondes schriftelijke feedback. Ronde 1 verving de knoppen in de header door de schakelaar afnemer/producent en de eerste grafiek door de convergentie- en curvegrafiek.
Aug – Sep 2026
Lancering & automatisering
Vanaf 5 augustus stond de volledige site achter een wachtwoord voor de laatste controle door de klant. Op 22 september ging het wachtwoord eraf en werd de site openbaar.
Resultaten
Gemeten op de live site
- Geïndexeerde pagina's
- 48
- Talen
- 10
Gemeten met Google Lighthouse · Sep 2026
Volgende stap
Iets vergelijkbaars nodig?
Vertel over je project — een eerste reactie binnen één werkdag, en een vaste prijs op papier voordat er iets begint.
Stap voor stap · van eerste gesprek tot lancering
Een project in gedachten? Laten we het bouwen.
Vertel me wat je verkoopt en wat je nodig hebt. Ik reageer binnen één werkdag met de volgende stappen — of een eerlijk “dit is niets voor mij”.
Volgend project