Construction Website Template
Demo brand: KEDGEWICK · Building & masonry contractor · 29 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this construction website template
A complete website for a building contractor who does house extensions, loft and garage conversions, structural openings and brick and stone repair. It has a working cost estimator, six service pages with prices, eight finished projects filterable by type, a prices page, an about page, a site diary, an FAQ and a contact form that arrives already filled in. Twenty-nine built pages, all driven by content files.
It looks like a builder you can trust with your house. A bold amber hero with a big stat row (projects built, years on site, average weeks, guarantee), white pages for reading, one navy band, and real photography of extensions going up, steels going in, lofts and brickwork. Anton for headings, Libre Franklin for everything else, and navy buttons.
Every section answers what a homeowner asks before letting a builder in: what will it cost, how long will you be here, what approvals do I need, who will I deal with, and what did your last jobs cost. The estimator, the extension vs loft vs garage table and the budgets on every project answer those on the page. Motion is one quiet reveal.
The 29 pages you get
- Home
/ - Amber hero with headline, two buttons and a four-figure stat row over a site photo, promises, services with prices, the family story band, the build process, the cost estimator, the route comparison, client quotes on project photos with budget and weeks, site diary cards, FAQ by project type and a site-visit band.
- Services
/services/ - Six services with price from and weeks on site, plus the five build stages.
- Service pages
/services/…/ - Six pages. Price card, long description, what the price includes, approvals needed, finished jobs with budgets and the questions for that kind of job.
- Projects
/projects/ - Eight finished jobs with budget, weeks and size, filterable by type with the filter kept in the URL.
- Project pages
/projects/…/ - Eight pages. Budget, weeks, size and type up top, the story of the job, a fact panel, a client quote where there is one, and site photos.
- Prices
/prices/ - The estimator, the rates behind it, the route comparison, payment stages and a starting-price list per service.
- About
/about/ - The family firm since 1974, a short timeline, the four people a client deals with (initials, no face photos) and the accreditation line.
- Site diary
/journal/ - Diary cards tagged with the job and week. Add a Markdown file and it appears here.
- Diary entries
/journal/…/ - Four written pieces: the week the back wall comes out, a loft conversion week by week, lime or cement, and what a structural opening costs.
- FAQ
/faq/ - Questions grouped by project type, with jump links.
- Book a site visit
/contact/ - Enquiry form that pre-fills project type, size, finish, planning and the estimate from any estimator or service link.
- Privacy and terms
/legal/…/ - Two starter legal pages written for a building firm, on a shared layout.
- 404
/404 - Designed, with a way back to the home page and the projects.
What is in the build
- A cost estimator for five job types (single and double-storey extensions, loft and garage conversions, structural openings): size, finish and planning give a price range, weeks on site and the approvals needed
- The estimator hands its answers to the contact form, so the enquiry arrives with the project already described
- All rates, fixed costs and build times in one file, feeding the estimator, the rate table and the comparison
- Projects as content with budget, weeks, size, type, photos and an optional client quote, filterable by type with the choice kept in the URL
- Services as content with price from, weeks, what is included and approvals
- Real extension, loft and brickwork photography from Pexels, checked for faces and brand logos, optimised by Astro
- All business details in one file, with obvious placeholders for company number and accreditation schemes
- Vitest and Playwright suites, including tests for the estimator and the project filter
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- White reading pages with a bold amber hero and stat row and one navy band, Anton headings over Libre Franklin, real photos of extensions, lofts and brickwork, and navy buttons.
- The mechanic
- A cost estimator (job type, size, finish, planning) gives a price range, weeks on site and the approvals needed, then pre-fills the site-visit form; eight projects with budgets and weeks filter by type with the choice kept in the URL. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. UK extensions, steels, lofts and brickwork
- Type & palette
- Anton · Libre Franklin
-
#f5b942#14110a#14213a
Who it is for
Built for builders who do extensions, loft and garage conversions, structural work and masonry, and a good fit for renovation firms, general builders and roofing or conversion specialists. It suits a firm that wins work on trust and clear prices and wants enquiries that arrive with the job already sized.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Can I change the prices in the estimator?
Yes. Rates per square metre, fixed costs, weeks on site, the planning fee and the approvals for each job type live in one file. The estimator, the rate table on the prices page and the comparison all read from it.
Where do enquiries go?
The form posts nowhere by default. Point it at your form backend or CRM; the README and a comment above the form show how. Links from the estimator and service pages fill in the project fields for you.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its photographer in LICENSING.md. There are no identifiable faces, and logos on an alarm box, wheelbarrows and a cooker were retouched out.
What exactly do I get for free?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More trades & industry templates
KELMER OVERHEAD DOOR
Garage door repair
Loud
Imagery
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Imagery
KANWICK STEELWORKS
Steel fabrication
Loud
Imagery
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Imagery
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Imagery