Breeze Professional HVAC Company Website Template

Breeze — Professional HVAC Company Website Template

A modern, production-ready website template built specifically for HVAC contractors, heating and cooling companies, and home-comfort specialists who need a professional online presence without WordPress, plugins, or a database to maintain.

Breeze is a complete marketing site — not a single landing page. It includes every page an HVAC business actually needs to win local trust, capture leads, sell maintenance memberships, and rank in search. And unlike bloated CMS themes, every word on the site is controlled by simple markdown files in a content/ folder. Change your phone number, add a service, publish a blog post, or swap a testimonial by editing a text file. No code required for day-to-day updates.

Who this template is for

• HVAC contractors launching their first professional website
• Established heating and cooling companies replacing an outdated WordPress or Wix site
• Agencies and freelancers building client sites for home-service businesses
• Developers who want a clean Next.js foundation with real content architecture, not a generic landing page

If you repair air conditioners, install new systems, service furnaces, sell maintenance plans, handle emergency no-cool calls, or run commercial HVAC — this template was designed for your business.

What's included

11 page types, fully wired

• Home — / — Centered hero with giant click-to-call number, wide cinematic photo, trust badges, bento services grid, why-choose-us split, stats band, maintenance plan teaser, process timeline, featured projects, testimonial grid, request-service form band, FAQ teaser, and call-to-action
• About — /about — Company story, photo, values grid, and team section
• Services — /services — Service listing grid
• Service detail — /services/[slug] — Individual service page with a lead form
• Maintenance Plans — /maintenance-plans — Three-tier membership pricing with feature lists and CTAs
• Financing — /financing — Payment plan highlights and how-it-works copy
• Projects — /projects — Portfolio grid
• Project detail — /projects/[slug] — Case study with a specs sidebar
• Reviews — /reviews — Customer testimonials with star ratings
• Blog — /blog — Post listing
• Blog post — /blog/[slug] — Individual article
• FAQ — /faq — Accordion FAQ with schema markup
• Contact — /contact — Full estimate form, contact info sidebar, and map embed
• 404 — /not-found — Branded error page

Pages, navigation, footer links, sitemap entries, and form dropdowns update automatically when you add or remove markdown files. Add content/services/duct-cleaning.md and you instantly get a new page at /services/duct-cleaning.

Rich demo content out of the box

The template ships with realistic demo content for a fictional company ("Canyon Comfort Heating & Air") so you can preview the full site immediately:

• 8 services — AC repair, AC installation, heating repair, furnace installation, heat pumps and mini-splits, indoor air quality, duct sealing and cleaning, commercial HVAC
• 4 portfolio projects with location, service type, and detail specs
• 6 customer testimonials with star ratings
• 4 team members with bios and photos
• 3 blog posts on HVAC topics (tune-ups, heat pumps vs. AC, frozen coils)
• 8 FAQs covering cost, repair vs. replace, maintenance plans, financing, licensing, and emergency service
• 3 maintenance plan tiers with monthly pricing and feature lists
• Demo photos in public/images/ (hero, crew, services, projects, team, blog)

Replace the demo content with your own by editing markdown files and swapping images. The structure stays the same.

Key features

Markdown-driven content — no CMS headaches

All business content lives in content/ as plain markdown files with YAML frontmatter:

content/
  site.md              company name, phone, email, hours, SEO, form endpoint
  pages/               page titles, intros, home sections, plan tiers, financing
  services/            one file per service
  projects/            one file per portfolio project
  testimonials/        one file per review
  team/                one file per team member
  blog/                one file per post
  faqs/                one file per FAQ

Frontmatter is validated at build time with Zod schemas. If you misspell a field or leave out a required value, the build tells you exactly which file and field to fix — not a cryptic runtime error.

Lead capture forms, ready to connect

Estimate forms appear on the home page (dedicated request-service section), every service detail page, and the contact page. Connect them in one line:

form:
  endpoint: 'https://formspree.io/f/YOUR_FORM_ID'

Works out of the box with free tiers from Formspree and Web3Forms. Submissions go straight to your email inbox. No server setup required.

For developers who want self-hosted form handling, an optional Resend API route is included as route.ts.example with setup instructions.

Built for HVAC conversion

HVAC leads happen on phones — especially during a no-cool emergency. Breeze is designed around that:

• Giant click-to-call phone number in the home hero as the primary focal point
• Sticky mobile call bar on every page — one tap to call or request an estimate
• Two-tier header with license info, main phone, and a pulsing 24/7 emergency line
• Maintenance Plans page — the highest-recurring-revenue page in the industry, with three editable pricing tiers
• Financing page — turn big-ticket installs into manageable monthly payments

Local SEO built in

Search-engine essentials are generated from your content — no plugins, no Yoast, no manual XML editing:

• JSON-LD HVACBusiness schema on every page (name, phone, address, service areas, ratings)
• FAQ schema on the FAQ page
• Per-page metadata (title, description) from markdown frontmatter
• sitemap.xml auto-generated from all pages and posts
• robots.txt included
• Open Graph tags for social sharing

Set your real domain in content/site.md under seo.siteUrl before launch and everything points to the right place.

Professional design, easy to rebrand

A light, airy "Cool Comfort" design language — visually distinct from dark contractor themes:

• Fully responsive — mobile menu, colored gradient header, sticky call bar on phones
• Centered hero layout with a wide cinematic photo and floating trust cards — no form buried in the hero
• Scroll animations via Framer Motion (subtle fade-ins, not distracting)
• Testimonial quote grid on the home page and reviews page
• FAQ accordion with bordered cards and smooth expand and collapse
• One-block brand color change — replace eleven CSS variables in globals.css and the entire site re-skins (buttons, links, icons, highlights)
• Google Fonts via next/font — Figtree (body) and Sora (headings), swappable in one file
• Heroicons icon set plus HVAC-specific icons (snowflake, flame, air, thermometer, leaf, calendar), referenced by name in content frontmatter

Built for speed and modern hosting

• Next.js App Router with React Server Components — pages render on the server for fast initial loads and great SEO
• No database queries — content is read from markdown at build time
• Optimized images via Next.js Image component
• Static export preconfigured — npm run build outputs a fully static site in out/ for any host
• Deploys to Vercel (recommended), Netlify, Cloudflare Pages, or any static host in minutes

What sets Breeze apart

1. Content-first architecture

Most templates bury your copy inside React components. Breeze inverts that: components are the shell, markdown is the substance. Your client (or you) can update services, reviews, maintenance plans, and blog posts without touching src/. Navigation, footers, sitemaps, and form dropdowns stay in sync automatically.

2. Real pages, not a landing-page gimmick

Breeze is a complete multi-page site with dynamic routes, collection pages, detail pages, a blog, and HVAC-specific pages for maintenance memberships and financing. It is the kind of site an HVAC company actually needs — not a one-pager with a contact form stapled on.

3. AI-assistant ready

The template ships with an AGENTS.md file that teaches AI coding tools (Cursor, Claude Code, GitHub Copilot, etc.) exactly how the project is structured. Prompt something like:

"Rebrand this site for Lone Star Air in Austin, TX. Phone (512) 555-0123, email hello@lonestarair.com"

…and the assistant knows which files to edit. A huge time-saver for agencies and solo developers.

4. Sensible defaults, zero lock-in

• No proprietary CMS
• No monthly SaaS fees for content management
• No vendor-specific hosting requirement
• Standard Next.js, React, and Tailwind stack — any React developer can extend it
• Clean, readable code with TypeScript strict mode and ESLint

5. Thorough documentation

• README.md — quick start in 5 minutes
• CUSTOMIZING.md — step-by-step guide for every customization (company info, forms, colors, fonts, content collections, deployment)
• AGENTS.md — AI assistant instructions
• Inline code comments where behavior is not obvious

Tech stack

Quick start

npm install
npm run dev

Open http://localhost:3000 to see the demo site. Then:

1. Edit content/site.md — company name, phone, email, address, hours, service areas
2. Replace photos in public/images/
3. Paste your Formspree or Web3Forms endpoint into form.endpoint
4. Set your domain in seo.siteUrl
5. Run npm run build to verify everything, then deploy

Five minutes to a branded site. A few hours to fully replace all demo content.

Deployment

Deploy anywhere static or Next.js sites run:

• Vercel — push to GitHub, import, done (free tier is plenty)
• Netlify — auto-detects Next.js
• Cloudflare Pages, GitHub Pages, S3, cPanel — run npm run build and upload the out/ folder

No database to provision. No environment variables required for the default setup (forms use a third-party endpoint).

File structure

content/              ALL editable content (markdown)
  site.md             company info, contact, form, SEO
  pages/              per-page copy (home, maintenance-plans, financing, ...)
  services/           one file per service
  projects/           one file per project
  testimonials/       one file per review
  team/               one file per team member
  blog/               one file per post
  faqs/               one file per FAQ
public/images/        photos
src/app/              pages and routes (Next.js App Router)
src/components/       UI components
src/lib/content.ts    content loader and Zod validation

Summary

Breeze gives HVAC businesses a fast, professional, SEO-ready website without the ongoing cost and complexity of WordPress. Markdown files instead of a database. One-line form setup. Maintenance plans and financing pages built in. Automatic sitemaps and schema markup. A complete page set with demo content you can preview immediately and replace at your own pace.

Built by ServicePro Templates for contractors who would rather be fixing a compressor than debugging a CMS.