HVAC Website Template
Demo brand: HOLLICK & VANE · HVAC contractor · 21 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this hvac website template
A complete website for a heating and cooling contractor: heat pump and boiler installs, air conditioning, annual servicing and breakdown cover. The hero has a service-area map with a working postcode check. Below it are a heat pump sizing and price estimator, service-plan tiers, five service pages, a price list, an install walkthrough, an areas page, four written guides and a survey booking form. Twenty-one built pages, all driven by content files.
It looks like a tidy local trade firm. White pages with light grey blocks and one dark graphite band, real install photography (heat pumps on walls, copper pipework, gloved hands on manifolds, radiators) and one signal-red accent. Barlow Condensed for headings and prices, IBM Plex Sans for everything else.
Every section answers what a homeowner asks before booking a heating engineer. Do you cover my street, what size do I need, what will it cost to fit and to run, is there a grant, how long are you in my house, and who comes when it breaks. The postcode check and the estimator answer the first four on the page. Motion is one soft reveal.
The 21 pages you get
- Home
/ - Headline beside the service-area map and postcode check, promises, services with prices, the team band, the install process, the estimator, service plans, a heat pump / boiler / air-to-air comparison, job-card reviews, guides, FAQ and a survey call to action.
- Services
/services/ - All five services with starting prices, plus the three-system comparison.
- Service pages
/services/…/ - Heat pumps, boilers, air conditioning, servicing and repairs. Gallery, starting price, key facts, what the price includes, a matching review and the long description.
- Prices
/pricing/ - The estimator, a fixed price list, the three service plans, the comparison table and payment terms.
- How it works
/how-it-works/ - Survey, design and fixed quote, install, handover and aftercare, each with its timing and what happens.
- Areas
/areas/ - The map with postcode check and a list of every district covered.
- About
/about/ - The firm’s story, numbers, three working rules and the team shown by initials, with no face photos.
- Guides
/guides/ - A text-only list with read times. Add a Markdown file and it appears here.
- Guides
/guides/…/ - Four written pieces: heat pump running costs, which radiators to change, boiler or heat pump, and what happens at a survey.
- FAQ
/faq/ - Questions in three columns: Install, Service and Grants.
- Book a survey
/contact/ - A booking form that the estimator, the map and the plan cards pre-fill: system, property, bedrooms, insulation, current heating, district and plan.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the services.
What is in the build
- A service-area map drawn in code from one point per postcode district, with a postcode check that highlights the district and gives the next free survey day
- A sizing and price estimator: property type, bedrooms, insulation and current heating give a recommended heat pump size, installed prices for heat pump, gas boiler and air-to-air, an example grant deduction and a yearly running cost for each
- Every estimator figure (prices, sizes, tariffs, grant) in one data file, with the maths shared by the page and the browser
- Three service-plan tiers and a fixed price list
- Services as content: price, duration, what is included, facts and gallery in one Markdown file per service
- Real install photography, optimised to WebP by Astro, with manufacturer logos retouched out
- All business details in one file, one accent colour that rebrands the whole site, and a strict content security policy
- Vitest and Playwright suites included
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 ground with light grey blocks and one graphite band, Barlow Condensed over IBM Plex Sans, real heat pump and pipework install photography, one signal-red accent.
- The mechanic
- A service-area map with a working postcode check, a heat pump sizing estimator giving installed prices, an example grant and yearly running costs for heat pump, boiler and air-to-air, and service-plan tiers, all pre-filling the survey booking form. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Heat pumps, copper pipework, gloved hands, radiators
- Type & palette
- Barlow Condensed · IBM Plex Sans
-
#ffffff#111827#dc2626
Who it is for
Built for heating engineers, heat pump installers, boiler and gas firms and air conditioning companies working on homes, and a good fit for plumbing and heating firms or electricians who fit heat pumps. It suits a local firm that wins work through a free survey, clear prices and a defined service area.
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
How do I change the service area?
Edit the district list in one data file: a postcode district code, a name and a rough position for each. The map shapes are recalculated at build time, and the postcode check and the contact form’s district list follow automatically.
Are the estimator’s prices and grant real?
They are illustrative figures, all in one file for you to replace with your own. The grant is labelled on the page as an example to check against current schemes, and every result says the survey gives the fixed price.
Where do bookings go?
The form posts nowhere by default. Point it at your form backend or CRM; the README shows how. Estimator, map and plan links pre-fill the form through the URL.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source and any retouching in LICENSING.md. Manufacturer logos were removed and there are no identifiable faces.
What exactly do I get for $49?
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