Laan Solutions
A calm portfolio site for a young building consultancy, where the renders do the talking: from extensions to office buildings. The team adds new projects themselves.
- Web design
- Websites
- Animation
- blue on white, the renders do the rest
- 1 colour
- from the homepage to any project
- 2 clicks
- the CMS runs inside the site itself
- Studio
The brief
Laan Solutions is a young team who met at TU Delft. They guide building projects from permit to construction, with advice, permit applications and drawings. Whether it's an extension, a dormer or a brand-new commercial building. Their motto: you ask, we deliver. What they wanted: a site that shows what they make. Their work is renders and designs, so those had to come first, large and calmly presented. A short introduction, direct contact and a project overview they keep up to date themselves.
The work up front
The project overview is a grid of large renders, with the name and year beneath each image. Every fourth tile runs full width, which gives the grid a rhythm. Images arrive behind a white panel that slides away as the render zooms into place; the title and year then slide in underneath. On hover the image zooms in a touch.
Every project its own page
A project opens with a large render and the project name arriving letter by letter. Alongside the story, a sidebar stays in place with the location, client, start and end year, floor area, team and partners. Below that comes a gallery with the rest of the images. On mobile the sidebar becomes a compact block of project details above the text.
Calm in motion
A single blue on white, set in Geist. Scrolling runs smoothly through Lenis on GSAP's clock, and every click on an internal link fades the page out before the next one appears. Contact simply lives in the header: hover over Contact and the email address and phone number fold out. No separate page, no form.
Easy to keep up to date
Sanity Studio runs inside the site itself, at /studio. That's where Laan puts together a new project: name, start and end date, text, main image and gallery, address, client, floor area, team and partners. The overview and the project page fill themselves.
Stack
Next.js 15 · React 18 · Tailwind CSS · Sanity 3 (Studio in the site) · GSAP · Lenis · Vercel
- Animation
- Corporate films
- Event films
- Campaign content
- Copywriting
- Ads