Flex Offices
Eight new office units in Hoorn on one clear page: the building on show, the floor plan alongside, and every section leading to a viewing.
- Web design
- Websites
- Animation
- from studio to suite, in one building
- 8 units
- in a gallery with lightbox
- 59 photos
- booking a viewing
- 1 goal
The brief
Flex Offices lets eight new office units in a single commercial building at Hoorn80, from a 15 m² studio to spaces you combine into 150 m². The units are fully fitted out, with a shared canteen and a meeting room you can book. The brief was a site that shows the building as it is and gets freelancers and small teams to a viewing quickly. No portal or booking system: one clear page with everything a tenant wants to know, and a gallery with all the photos.
One page, one goal
The homepage runs top to bottom through a tenant's questions: what is it, why here, what does it look like, how big, where is it and what are the terms. Every section ends at the same action: book a viewing, by email or phone.
The building speaks for itself
A hero with a photo slider that runs on its own, a photo grid with a lightbox that unfolds from the thumbnail with GSAP Flip, and a separate gallery page with all 59 photos. The floor plan shows how the eight units sit within the building.
Calm in motion
Headings that arrive word by word, sections that slide into view as you scroll and a navigation bar that turns white as soon as you head down the page. Instrument Serif for the headings, with blue italics as an accent, and Inter for the body text. On mobile the slider sits above the text and everything stays just as readable.
Small and fast
No CMS and no database: a static Next.js site with the content in the components themselves and images optimised automatically by next/image. Just enough for a building with eight units, and online fast.
Stack
Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · GSAP (ScrollTrigger, Flip) · next/font (Instrument Serif, Inter) · Vercel.
- Corporate films
- Campaign content