Building the Serverse Landing Page
A landing page for a mobile dev agency, built on Next.js and Tailwind. The brief was simple; the fun was in the scroll animations.
Client said: "We want you to create a mobile dev agency landing page."
Serverse is a developer agency that works in Next.js and Tailwind, and they wanted a landing page that showed off the kind of web work they do. Here's how I built it.
Scroll-driven text animation
I'd always liked the scroll animations on Apple's site, so I built a similar effect here. Using a scroll observer and Tailwind, the text animates and shifts as you move down the page.
Parallax header
To give the page some depth up top, I built a parallax header — the header elements sit on a higher z-axis while the rest of the content scrolls over them. It's a simple trick that makes the first scroll feel intentional.
Reviews slider
The reviews section runs on a slider animated with requestAnimationFrame for smooth motion, showing the client testimonials Serverse wanted front and center. I used Embla Carousel with embla-carousel-classNames so it integrated cleanly with Tailwind.
Hero with video background
The hero uses a video background to make a strong first impression and set the tone for an agency that builds apps.
The rest of the page
- Scroll and size observers wired into
_app.tsx, tracking scroll position and viewport size so the layout reacts to both. - Footer with the essentials — contact details, social links, copyright.
- Contact form so potential clients can get in touch without friction.
Where it landed
The page covers what the brief asked for — scroll animation, parallax header, reviews slider, contact form, and a video hero — and ships Serverse's pitch to anyone landing on it.