I recently shipped BuildVox, a fully responsive Next.js template built specifically for construction companies, contractors, and renovation businesses — and I wanted to share how it's put together, because a few of the decisions turned out to matter a lot more than I expected going in.
Live demo: https://buildvox-co.vercel.app/
Get it on Gumroad: https://uicraftedstudio.gumroad.com/l/buildvox
The problem I was solving
Every contractor or freelance dev who's built a construction site knows the drill: the client wants a hero video, a services grid, project photos, testimonials, a team section, an FAQ, and a contact form that actually sends email — and they want it to look premium, not like a WordPress theme from 2014.
Rebuilding that from scratch every time is a waste of billable hours. So I built the version I wished existed: 11 ready-made sections, wired together, that you can reskin in minutes instead of days.
The architecture: one file to rule them all
The single biggest design decision was centralizing every piece of copy, stat, image path, and link into one file: data/data.ts.
No hunting through a dozen components to change a headline. No digging into JSX to swap a testimonial. You open one file, edit the object, and the entire site — hero copy, service descriptions, team bios, footer links — updates. This is the thing that makes rebranding the whole site for a new client take minutes, not hours.
If you're building templates for resale (or even just for repeat client work), I'd genuinely recommend this pattern over scattering content across components. It's the difference between "customize this" being a chore and being trivial.
Scroll and motion: Lenis + GSAP + Framer Motion
Smooth scrolling is powered by Lenis, synchronized with GSAP's ScrollTrigger for scroll-based reveal animations — sections fade and slide in as you scroll, staggered just enough to feel intentional without being distracting. Framer Motion handles the smaller component-level interactions (hover states, menu transitions).
Getting Lenis and GSAP's ScrollTrigger to agree with each other is one of those things that looks simple in a demo GIF and is genuinely fiddly to get right — mismatched scroll positions, jumpy triggers, that kind of thing. Once it's synced properly though, it's the detail that makes a template feel "premium" versus "template-y."
The stack
- Next.js 16 (App Router)
- React 19
- Tailwind CSS 4
- shadcn/ui (built on Radix/Base UI primitives, so components stay accessible)
- Framer Motion + GSAP + ScrollTrigger
- Lenis for smooth scroll
- Swiper for the testimonial carousel and marquee
- 100% TypeScript
The contact form problem
Contact forms are usually the part that forces a backend, which is overkill for a static marketing site. I wired this one up with EmailJS instead — drop in your own service ID, template ID, and public key, and the form sends real email with zero backend code. For a contractor who just needs leads landing in their inbox, that's the whole requirement, solved.
SEO and legal pages, done once
Metadata, sitemap.ts, and robots.ts are already configured, and I included Terms & Privacy Policy pages built on the same content pattern as everything else — so they pull from data.ts too instead of being static walled-off pages.
Who this is actually for
I built it with three people in mind:
Freelance developers who need a fast, credible starting point for a construction-industry client site
Agencies that want a repeatable base instead of rebuilding this vertical from zero every time
Contractors themselves who want something they can deploy and edit without hiring a dev for every copy change
Try it
The live demo is at https://buildvox-co.vercel.app/ — scroll through it to see the Lenis/GSAP sync in action. If it's useful to you, it's available on Gumroad: https://uicraftedstudio.gumroad.com/l/buildvox
Happy to answer questions about the data.ts pattern, the Lenis/GSAP setup, or anything else in the comments.
Top comments (0)