Een lancering op wat mensen al zoeken
De lancering van SunBase in de Benelux, met zeven landingspagina's uit één databestand en een llms.txt voor AI-assistenten.
- Documenten en data
- Interface ontwerp
- Opdrachtgever
- Website
- Platform
- Jaar
SunBase is een parasolvoet die ook koeler, speaker, lader en sfeerlicht is. Je zet hem in de tuin, of op het terras van een hotel of restaurant. In Frankrijk bestond hij al, in de Benelux kende niemand hem. Voor de lancering in de Benelux bouwden we de site. Daarop beginnen zeven landingspagina's bij wat mensen al zoeken, zoals buitenverlichting of een oplaadpunt voor buiten.
- Astro
- GSAP
- Lenis
- JSON-LD
- llms.txt
- GitHub Actions
In het kort
- 20
- 7
- 13
- 3
- 1
Wat er lag
Je zoekt een koelbox voor op het terras, of verlichting voor als het donker wordt. Je typt het in Google of je vraagt het aan een AI-assistent. Op SunBase zoek je niet, want die naam ken je nog niet. SunBase Benelux wilde vanaf de eerste dag op zulke vragen gevonden worden. Er lag een export van de Franse site, in het Engels en het Frans, met 26 productvideo's. En omdat de lancering nog liep, moest de site snel te veranderen zijn.
Drie details die het verschil maken
Het product in zes schermen
De galerij op de productpagina, met de foto's van SunBase. 
Kracht en techniek: foto's en korte kaarten in één raster. 
Comfort en sfeer, hetzelfde raster in de donkere stand. 
Voor wie: drie kaarten naar de toepassingen, uit hetzelfde databestand als de pagina's zelf. 
Voor bedrijven: zes redenen als tegels, elk op een tint uit de productvideo's. 
Het aanbod onderaan de homepage: de prijs, wat er in de doos zit en twee knoppen.
Van een Franse site naar twintig Nederlandse pagina's
Zeven landingspagina's uit één databestand
Zoek je verlichting voor buiten, dan is er een pagina die daar begint: Een alternatief voor losse buitenverlichting. Twee andere doen hetzelfde voor losse tuinspullen en een oplaadpunt. Vier zijn er voor de tuin, hotels, restaurants en evenementen.
We bouwden de site van nul in Astro. Alle tekst staat in data, los van de opmaak. De zeven pagina's komen uit één databestand, net als de kaarten op de homepage en het overzicht. Een pagina erbij is een blok tekst erbij.
Elke pagina draagt gegevens voor zoekmachines, van het product en het aanbod tot de veelgestelde vragen. Ook de sitemap en llms.txt, een samenvatting van de site voor AI-assistenten, komen uit die data. Ze lopen dus nooit achter op de pagina's. En robots.txt laat dertien AI-crawlers bij naam binnen.
Een film van 3,2 MB, en op de telefoon een foto
Bovenaan de homepage draait een korte film van het product, in 720p en zonder geluid. Als mp4 is hij 3,2 MB en als webm 2,4 MB. Tot hij speelt, staat er een stilstaand beeld.
Daaronder legt de homepage het product uit in zeven panelen, elk met een eigen productvideo. Op een groot scherm schuiven ze zijwaarts voorbij terwijl je naar beneden scrolt. Vier sferen doen dat ook: een warme middag, de avond, de barbecue en het terras van een zaak.
Op een telefoon laadt de film niet. Daar staat een foto van de SunBase aan het zwembad, die in één keer zegt wat het is en de download scheelt. De panelen en de sferen staan er onder elkaar. Wie in zijn instellingen om minder beweging vroeg, krijgt ook op een groot scherm het stilstaande beeld, en dan schuift er niets.
Van 44 pagina's in twee talen naar 20
De eerste versie telde 44 pagina's, in het Nederlands en het Frans. Na de livegang liepen er rondes met de klant, en die maakten de site kleiner. De vergelijkingspagina's en de hotelbrochures gingen eruit.
Toen koos de klant voor alleen Nederlands, eerst voor nu en later voorgoed. Omdat alle tekst in data stond, was dat een opruimronde van ruim zeshonderd regels. Twintig pagina's bleven over.
Ook een woord ging eruit: pre-order. Het zei dat de SunBase deze zomer misschien niet zou komen, terwijl de levering rond was. Het werd bestellen, en het adres ging mee van /pre-order naar /bestellen. Een doorverwijzing houdt gedeelde links werkend.
21 bestelknoppen achter één schakelaar
De webshop komt later, op Shopify. Tot die tijd gaan alle 21 bestelknoppen op de site naar een eigen pagina met een formulier, zonder betaling vooraf.
Alle knoppen lopen via één functie, die naar één schakelaar kijkt. Gaat de winkel open, dan zet één regel ze om naar de webshop. Bij de stap van /pre-order naar /bestellen gingen alle 21 knoppen al vanzelf mee.
De formulieren gaan naar een kleine afhandeling in PHP op de server, met een onzichtbaar veld tegen spam. De mail zelf gaat over SMTP. Dat deel en de uitrol bouwde een tweede ontwikkelaar, die de hosting beheert.
Wat we eruit hebben geleerd
- 01
Bouw een lancering zo dat hij kan veranderen. De site was tweetalig opgezet en werd alleen Nederlands. Dat het bij een opruimronde bleef, kwam doordat geen enkele pagina uitging van één taal.
- 02
Op de naam van een nieuw product zoekt nog niemand. Mensen zoeken op wat het vervangt, zoals een koelbox of buitenverlichting. Pagina's op die vragen, gemaakt uit data, zijn het begin van vindbaarheid voor een onbekend merk.
- 03
Woorden zijn productkeuzes. Pre-order klonk neutraal, tot de klant zag wat het zei: dat de SunBase deze zomer misschien niet kwam. Voor iets wat je voor de zomer koopt, is dat precies het verkeerde signaal.
- 04
Ook een build die slaagt, kan een fout bevatten. Toen het Frans eruit ging, vond pas een aparte typecontrole een fout die de build had doorgelaten. Die fout zat er al, maar viel pas op toen de taal nog maar één waarde kon hebben.
Letters en kleuren
- Koppen, knoppen en navigatie
- Montserrat
- Lopende tekst
- Lato
- #FF7F00de knoppen, de labels en de nummers
- #1B1F24lopende tekst en de donkere secties
- #FAF7F2de lichte achtergrond
- #F2ECE2de warme secties
- #1E8AAEeen van de zes kleuren uit de productvideo's, als zachte tint op de tegels
- Het oranje stond al in het merk. De nachtblauwe, zand- en papiertinten kwamen erbij voor de sferen en de lichte secties.
- Zes kleuren uit de productvideo's (oranje, rood, goud, blauw, groen en turkoois) staan als tint van 15 tot 20 procent op de tegels van de pagina voor bedrijven.
- Gemeten in de computed styles van sunbase-benelux.com en in tokens.css op 30 september 2026. De letters komen van Google Fonts.
Onder de motorkap
- Site
- Astro 4
- Statisch
- TypeScript
- Inhoud in data
- Beweging
- GSAP ScrollTrigger
- Lenis
- WebM en MP4
- Poster
- Vindbaarheid
- JSON-LD
- Sitemap
- llms.txt
- llms-full.txt
- robots.txt
- Formulieren
- PHP
- PHPMailer
- SMTP
- Honeypot
- Uitrol
- GitHub Actions
- FTPS
- Hostmatters
- Cloudflare
Voor wie verder wil lezen
Hoe het precies werkt
Elke landingspagina is één blok in een databestand: een adres, een titel, een openingszin, een intro, een eigen titel en omschrijving voor Google, vier voordelen en een slotzin.
Elke landingspagina is één blok in een databestand: een adres, een titel, een openingszin, een intro, een eigen titel en omschrijving voor Google, vier voordelen en een slotzin. Het overzicht, de kaarten op de homepage, het kruimelpad, de sitemap en llms.txt lezen dat bestand. Een pagina erbij is dus een blok erbij, en hij staat overal tegelijk.
De bestelknoppen gaan allemaal door dezelfde functie, die kijkt naar één schakelaar. Staat die aan, dan gaat een knop naar de eigen bestelpagina. Staat hij uit, dan naar de webshop, in een nieuw tabblad. Toen /pre-order /bestellen werd, kwamen alle 21 knoppen vanzelf mee.
Waar het nu staat
De site staat live sinds juni 2026, en de laatste wijziging is van 8 juli.
De site staat live sinds juni 2026, en de laatste wijziging is van 8 juli. De webshop is er nog niet. Bestellen gaat via het formulier, en de schakelaar voor de shop staat klaar.
Wat is SunBase?
Een parasolvoet die ook koeler, speaker, lader en sfeerlicht is, voor de tuin en voor het terras van een hotel of restaurant. In Frankrijk bestond hij al. Voor de lancering in de Benelux bouwden wij sunbase-benelux.com.
Waarom draait de site van SunBase op Astro en niet op WordPress of Webflow?
Omdat de site snel moest zijn, met weinig JavaScript en alle vrijheid voor de beweging. Astro maakt er gewone HTML-pagina's van, zonder server eronder.
Kan SunBase zelf de teksten op sunbase-benelux.com aanpassen?
Niet in een CMS. Alle tekst staat in drie databestanden, los van de opmaak. Een aanpassing is een regel in zo'n bestand, en de volgende push zet hem live.
Waarvoor dient de llms.txt van SunBase Benelux?
De llms.txt is een korte samenvatting voor AI-assistenten: wat SunBase is, de belangrijkste feiten en alle pagina's met één zin. Hij komt uit dezelfde data als de pagina's, dus hij loopt nooit achter.
Waarom staat de site van SunBase alleen in het Nederlands?
Dat koos de klant na de livegang. De site was tweetalig opgezet, met het Frans in dezelfde databestanden, en eerst ging alleen de Franse kant uit. Later ging het Frans er helemaal af.
Waar blijft de webshop van SunBase?
De webshop komt later, op Shopify. Tot dan gaan alle bestelknoppen naar een bestelformulier, en één schakelaar zet ze om naar de shop.
