Building & Renovation Website
London Builders
A ready-to-customise single-page website for a London building and renovation company, built as a trust-focused system across fifteen connected sections rather than a simple builder landing page.
About this project
London Builders
London Builders is an independent portfolio concept created to demonstrate how a single-page building and renovation company website can be built as a genuine trust-building system, rather than a simple builder landing page.
Homeowners spend large sums on building work and hesitate before enquiring, so the entire page is structured to answer that hesitation: explaining the services, showing finished work, setting expectations about pricing and process, and guiding the visitor towards booking a free site visit.
The result is a reusable commercial foundation that can be adapted for a building company, renovation contractor, loft and extension specialist, kitchen and bathroom fitter or commercial fit-out business.
Category
Building & Renovation Website
Built With
Next.js, TypeScript, Tailwind CSS, Framer Motion
Live Site
VisitProject scale
Built beyond brochure-site scale
15
connected sections on one page
8
services with a synced image panel
8
FAQ answers covering common objections
12
London areas covered
0
CMS, database or plugin stack
Project Overview
What was built and why it matters
Challenge
Most builder and renovation websites default to a simple landing page: a hero image, a short service list and a contact form. That approach does little to overcome the hesitation homeowners feel before committing large sums to building work, and it rarely gives visitors enough information to submit a genuinely useful enquiry.
Solution
Rather than a simple landing page, the site was built from scratch as a single page with fifteen connected sections. It explains every service in detail, shows finished work through a before-and-after project gallery, sets clear expectations about pricing and process through a five-step journey and an interactive cost estimator, and guides the visitor towards booking a free site visit, with reviews, statistics and an eight-question FAQ removing hesitation along the way.
Results
The finished concept is a fast, fully static Next.js site with one small serverless function handling enquiries: no CMS, no database and no plugin stack to maintain. It demonstrates how a building or renovation business can present real project value, transparent pricing expectations and a genuinely useful enquiry journey, all from a single, carefully structured page.
Business value
What this gives the website owner
Every major section was designed to support visibility, credibility, clearer client journeys or future growth.
01
A strong first impression
Real project imagery, confident typography and a glass trust bar covering insurance, quotations, guarantees and coverage build credibility from the first screen.
02
Clear explanation of every service
Eight services, from loft conversions to commercial fit-outs, are each explained on their own terms instead of being buried in a single vague line.
03
Enquiries that qualify themselves
The interactive cost estimator gives visitors a realistic starting range before they enquire, reducing time spent on unsuitable leads.
04
Removes the biggest fear homeowners have
A transparent five-step process from first enquiry to final walkthrough and guarantee answers the hesitation that stops many homeowners from getting in touch.
05
Enquiries arrive already useful
Postcode, budget, preferred start date, project details, photos and plans arrive with every enquiry, so the first conversation can start from real information.
06
A fast, low-maintenance foundation
A statically compiled site with one serverless function costs almost nothing to run, cannot be broken by a plugin update, and leaves room to grow as services or locations are added.
Screenshots
A closer look
Full-screen hero with a glass trust bar for insurance, quotations, guarantee and coverage
Before and after project gallery with area, timeline and project value
Interactive services list with a synchronised image panel
Five-step journey from first enquiry to final walkthrough and guarantee
Interactive cost estimator with project, size, finish and area multipliers
Client reviews by project type and area, with animated statistics counters
Eight-question FAQ handling common objections
Working enquiry form with uploads, consent and live validation
Local coverage listing twelve London areas
Technical approach
Complex underneath, straightforward for the business
The technology was selected to keep a large site consistent, quick to deliver and easier to extend, without forcing the client to understand the engineering behind it.
01
Next.js, React and TypeScript
Next.js with the App Router and React provide the structure of the website, while TypeScript keeps every section, data file and form value strictly typed.
02
Tailwind CSS with themeable tokens
Tailwind CSS controls the visual identity and responsive layout. The palette, spacing and shadows run on CSS custom properties, so the entire look of the site can be rebranded from one file. Typography pairs Cinzel for display headings with Montserrat for body text, both loaded through the built-in font optimiser.
03
Framer Motion with reduced-motion support
Framer Motion powers the section reveals, the service image transitions and the animated counters. Every animation checks the visitor's reduced motion setting first and switches off if it is enabled.
04
React Hook Form, Zod and a serverless enquiry function
Field rules, budget options, project types, accepted file formats and upload limits are defined once and applied in two places, in the browser as the visitor types, and again inside a serverless function on the server before anything is sent, since browser-side validation alone can be bypassed in seconds. Enquiries are delivered by a Vercel serverless function, so the site keeps no database and stores no customer data of its own.
05
Custom cost-estimator logic
The estimate calculator runs on custom pricing logic with separate multipliers for project size, finish level and London area, outputting a rounded range using British currency formatting.
06
Structured data and accessibility built in
Two schema.org blocks, one for the construction business and one for the FAQ section, let search engines read the services and answers directly. Every interactive element meets minimum touch target size, focus states are visible throughout, images carry descriptive alternative text, and navigation works by keyboard.
07
Fully static with one serverless endpoint
Every page compiles to static files, with one small serverless endpoint handling enquiries. There is no CMS, no database and no plugin stack, so the site loads fast, costs almost nothing to run and cannot be broken by an update to software nobody is watching.
Features
What's included
Full-screen hero with a glass trust bar
Insurance, written quotations, workmanship guarantee and London coverage shown immediately below a full-screen hero.
Four reasons to choose the company
A numbered promise list covering transparent pricing, reliable scheduling, quality workmanship and fully managed projects.
Before-and-after project gallery
Recent projects shown with a split before-and-after view, plus area, timeline and project value on each card.
Eight services with a synced image panel
Loft conversions, extensions, refurbishments, kitchens, bathrooms, decorating, roofing and commercial fit-outs, shown as an interactive list with a synchronised image panel on desktop and stacked cards on mobile.
Founder video section
A self-hosted video plays only when it scrolls into view, introducing the person behind the business.
Five-step client journey
From first enquiry and a free site visit to a detailed written quote, construction updates and a final walkthrough with guarantee.
Interactive cost estimator
Calculates a starting price range from project type, property size, finish level and London area, formatted in pounds sterling.
Reviews and animated statistics
Client reviews list the project type and London area, alongside statistics counters that animate once when the section is reached.
Eight-question FAQ
Handles the most common objections about quotes, insurance, timelines, planning permission, living on site, payment stages and guarantees.
Working enquiry form
Postcode, budget range, preferred start date, project details, photo and plan uploads, a consent confirmation and live validation on every field.
Local coverage across twelve London areas
A dedicated section lists twelve London areas the business covers, supporting local search visibility.
Sticky mobile quote bar and desktop utilities
A sticky quote bar on mobile, plus a floating quote button and a back-to-top control on desktop, keep the primary action within reach.
Available for customisation
A ready-to-customise foundation for a real building or renovation business
London Builders is retained as a SetupFocus concept. For a suitable client, a separate implementation can be created with its own branding, services, projects, pricing logic and deployment.
The displayed company, founder, projects, reviews and statistics are fictional. Before a commercial launch, branding, projects, pricing, testimonials and contact details would be replaced with the real business information.
A client implementation can include:
- Brand identity, colour system and typography
- Real completed projects, before/after photography and pricing
- Services rewritten around the business's real specialisms
- Cost-estimator multipliers reviewed and set for the real business
- Enquiry form connected to a real inbox or CRM system
- A separate codebase and deployment for the client business
Commercial options
Build from a proven renovation website foundation
Ready to customise
£499
Take this concept, add your company's branding, projects, services and real pricing, and launch. Includes setup and 1 month support.
Next Project
Natural Beauty & Academy
Beauty Salon Website