De uitdaging
Flandria Rent bedient sterk verschillende klanten met een breed aanbod tijdelijke constructies. Een eventorganisator die aluhallen en dubbeldekkertenten vergelijkt, benadert het aanbod anders dan een particulier die een feest plant of een bedrijf dat tijdelijke opslagruimte zoekt. De website moest zowel de producten als de problemen die ze oplossen verduidelijken en tegelijk een gedetailleerde aanvraag op elk toestel eenvoudig maken.
David bouwde een nieuwe webomgeving die deze technische catalogus combineert met een praktisch traject van verkenning naar contact of offerte.
Structuur volgens de intentie van de bezoeker
De informatiearchitectuur biedt twee aanvullende routes door het aanbod. Productcataloguspagina’s behandelen aluhallen, dubbeldekkerconstructies, Miamitenten en luifel- of verbindingstenten. Oplossingspagina’s groeperen dezelfde expertise rond evenementen, specifieke constructies, particuliere feesten en logistieke of industriële behoeften.
Een gedeeld navigatiesysteem maakt beide routes bereikbaar via desktop- en mobiele menu’s. Broodkruimels houden diepere cataloguspagina’s verbonden met hun bovenliggende secties. Overzichtskaarten laten bezoekers categorieën vergelijken voordat ze de gedetailleerde specificaties en beeldcollecties openen.
Een visuele, responsieve catalogus
De interface gebruikt Next.js, React, TypeScript, NextUI en Tailwind CSS. Responsieve grids passen productkaarten, contentsecties en fotogalerijen aan van mobiele schermen tot brede layouts. De afbeeldingsverwerking van Next.js geeft foto’s expliciete responsieve formaten. Met een herbruikbare beeldviewer kunnen bezoekers voorbeelden van constructies en evenementen vergroten zonder de pagina te verlaten.
Herbruikbare headers, navigatie, broodkruimels en footercomponenten houden de ervaring consistent in de catalogus, oplossingspagina’s en formulieren. De visuele taal behoudt de bestaande blauwe en rode identiteit van Flandria Rent en geeft uitgebreide productinformatie voldoende ruimte om leesbaar te blijven.
Van interesse naar een volledige aanvraag
De website bevat afzonderlijke flows voor contact en offertes. Het contactformulier registreert een beknopte vraag. Het offerteformulier verzamelt de operationele details die nodig zijn om een tentinstallatie te beoordelen: bedrijfs- en contactgegevens, event- en opbouwdata, locatie, afmetingen of bezoekersaantal, ondergrond, bereikbaarheid en afwerkingsopties.
Client-side schema’s valideren verplichte invoer en geven onmiddellijk feedback. Next.js server actions bewaren aanvragen vervolgens via Prisma in PostgreSQL en verzenden gestructureerde e-mailmeldingen via Resend. Specifieke e-mailsjablonen zetten de ingevoerde data om naar een bruikbare aanvraag voor het salesteam in plaats van een ongestructureerd bericht.
Vindbaarheid en onderhoudbaarheid
Elke belangrijke pagina definieert een eigen zoektitel en beschrijving. Gegenereerde sitemap- en robotsbestanden maken de catalogusstructuur zichtbaar voor zoekmachines, terwijl Plausible websitegebruik meet. De code scheidt navigatiedata, herbruikbare UI, server actions en databasemodellen. Daardoor kunnen contentpagina’s evolueren zonder presentatie en formulierverwerking door elkaar te halen.
Later onderhoud bracht de applicatie naar Next.js 16, React 19 en Prisma 7 en verhuisde de formulieropslag naar PostgreSQL, met behoud van de publieke gebruikersflows.
Resultaat
Flandria Rent kreeg een responsieve website die tegelijk als visueel portfolio en leadgeneratietool werkt. Bezoekers kunnen het aanbod per product of praktische behoefte benaderen, relevante constructies bekijken en in één samenhangende flow een gedetailleerde aanvraag indienen. Daarachter bieden getypeerde formulieren, duurzame opslag, e-mailsjablonen en herbruikbare paginacomponenten een onderhoudbare basis voor verdere updates.