HVAC Website Template
Demo brand: HOLLICK & VANE · HVAC contractor · 14 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 site for an HVAC contractor: fourteen built routes covering services, the plant you install and the duties you install it at, five written job case studies, a survey booking route and a three-post technical blog.
A saturated cyan ground with Geologica against Overpass Mono. The set-piece is the only loud channel; type, palette and imagery are held quiet under it.
The signature move is a cutaway through a real cooling coil. Scroll is depth through the fin bank, and a coil can only take water out of the air where its surface is below the dew point — so one straight coil-condition line is aimed at the apparatus dew point, computed from Magnus rather than drawn by hand. The control ships with it: a dry coil above the dew point, taking heat only, condensate 0.00 l/h, drain pan measured dry.
The 14 pages you get
- Home
/ - The coil cutaway, the contractor’s position, the services and the survey close.
- Services
/services/ - Design, install, commissioning and service. The four things a commercial client is actually buying.
- Systems
/systems/ - Plant installed, and the duties it is installed at. The page a consulting engineer reads before shortlisting.
- Jobs
/jobs/ - Five HVAC installs with the numbers — the index of case studies.
- Five job case studies
/jobs/… - Make-up air for eleven kitchens, heat-recovery VRF through a building with no risers, six air changes an hour in a surgery, nine metres of stratification out of a warehouse roof, a switchroom with a load and no people. Each a full route with real duties.
- Book a survey
/quote/ - A working survey-request form plus live tel: and mailto: paths.
- Coil notes
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Three worked articles
/blog/… - Most breakdowns we attend are a drain; raising the chilled water temperature is free efficiency until it is not; and the coil notes index itself.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A scroll-driven cutaway through a cooling coil where the coil-condition line is aimed at the apparatus dew point computed from the Magnus formula, not sketched
- A declared control: a dry coil above the dew point, taking sensible heat only, with condensate measured at 0.00 l/h
- Five written job case studies with real duties and numbers, which is how commercial HVAC is actually bought
- A systems route listing plant and the duties it is installed at — the page consulting engineers shortlist from
- Services, systems, rates and jobs as typed data in
src/data - Geologica with Overpass Mono, both self-hosted; a working survey form plus live tel: and mailto:
- Vitest and Playwright suites included in the repository
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 62 different worlds reading as one design system in different paint.
- The world
- Saturated cyan ground. A scrub-driven cutaway of a cooling coil is loud — scroll is depth through the fin bank; type, palette and imagery held quiet.
- The mechanic
- "Across The Coil": scroll is depth through a real cooling coil. A coil can only take water out of the air where its surface is below the dew point — one straight coil-condition line aimed at the apparatus dew point, computed from Magnus, not drawn.
- Loud channel
- Moving set-piece
- Imagery. Chroma below the dewpoint
- Type & palette
- Geologica · Overpass Mono
-
#005a64#f2f8f9#ffc078 - The control case
- A dry coil above the dew point: it takes heat only, condensate 0.00 l/h, drain pan measured dry — required to differ from the wet coil. Drawn, not labelled.
Who it is for
Built for HVAC contractors, mechanical services firms, refrigeration and ventilation specialists working commercial and light industrial. It suits a contractor selling to building services engineers and facilities managers, where duties and case studies matter more than a van photograph. For domestic plumbing and heating, the plumber build is the domestic-register sibling.
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
Is the psychrometry real?
Yes. The dew point is computed from the Magnus formula and the coil-condition line is aimed at the apparatus dew point, which is why the dry-coil control genuinely produces no condensate. An engineer reading the page will recognise it, which is the entire point of using it as the set-piece.
Do I need five case studies to launch?
No, but you should want them. Jobs are typed data generating their own routes, and in commercial HVAC a written install with duties attached does more selling than any amount of homepage copy. Start with two.
Can I use it for a domestic heating business?
It will work, but it is pitched at commercial: duties, plant schedules, commissioning. A domestic gas and heating firm converts better with the plumber build’s register — published rates, districts, response times.
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
Moving set-piece
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Moving set-piece
KANWICK STEELWORKS
Steel fabrication
Loud
Texture
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Moving set-piece
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Palette