Laan Solutions
Een rustige portfolio-site voor een jong bouwbureau, waar de renders het woord doen: van uitbouw tot bedrijfspand. Nieuwe projecten zet het team er zelf op.
- Webdesign
- Websites
- Animaties
- blauw op wit, de renders doen de rest
- 1 kleur
- van de homepage naar elk project
- 2 klikken
- het CMS draait in de site zelf
- Studio
De vraag
Laan Solutions is een jong team dat elkaar aan de TU Delft leerde kennen. Ze begeleiden bouwprojecten van vergunning tot bouw, met advies, vergunningsaanvragen en tekenwerk. Of het nu om een uitbouw gaat, een dakkapel of een compleet nieuw bedrijfspand. Hun motto: jij vraagt, wij draaien. Wat ze wilden: een site die laat zien wat ze maken. Hun werk bestaat uit renders en ontwerpen, dus die moesten vooraan staan, groot en rustig gepresenteerd. Een korte introductie, een direct contact en een projectenoverzicht dat ze zelf bijhouden.
Het werk vooraan
Het projectenoverzicht is een raster van grote renders, met de naam en het jaar onder elk beeld. Elke vierde tegel loopt breed door, wat het raster ritme geeft. Beelden komen binnen met een wit vlak dat wegschuift terwijl de render naar zijn plek zoomt; titel en jaar schuiven er daarna onder in. Bij hover zoomt het beeld een fractie in.
Elk project een eigen pagina
Een project opent met een grote render en de projectnaam die letter voor letter binnenkomt. Naast het verhaal blijft een zijbalk staan met locatie, opdrachtgever, start- en eindjaar, oppervlakte, team en samenwerkingen. Daaronder volgt een galerij met de rest van de beelden. Op mobiel wordt de zijbalk een compact blok projectinfo boven de tekst.
Rustig in beweging
Eén blauw op wit, met Geist als letter. Scrollen loopt soepel via Lenis op de klok van GSAP, en bij elke klik op een interne link vervaagt de pagina voordat de volgende verschijnt. Contact zit gewoon in de header: ga met je muis over Contact en het e-mailadres en telefoonnummer klappen uit. Geen aparte pagina, geen formulier.
Zelf bij te houden
Sanity Studio draait in de site zelf, op /studio. Laan zet daar een nieuw project in elkaar: naam, start- en einddatum, tekst, hoofdbeeld en galerij, adres, opdrachtgever, oppervlakte, team en samenwerkingen. Het overzicht en de projectpagina vullen zich vanzelf.
Stack
Next.js 15 · React 18 · Tailwind CSS · Sanity 3 (Studio in de site) · GSAP · Lenis · Vercel
- Animaties
- Bedrijfsfilms
- Evenementfilms
- Campagnecontent
- Copy
- Ads