Garage Door Website Template

About this garage door website template

The 22 pages you get

Home /

Headline, a repair-or-replace card with fixed fault prices or door from-prices and the next visit window, and a trust line. Then four promises, six services, the new-door configurator, a steel band with the firm’s numbers, the visit steps, the symptom checker, repair vs replace by door age, job-tagged reviews, three seasonal guides, the tabbed FAQ and a call-to-book band.

Services /services/

All six services with photo, price from and time on site, plus a quick fixed-price list.

Service pages /services/…/

Six pages: broken springs, cables and drums, rollers and tracks, openers, the yearly service and new doors. Each has a fixed-price card with time on site and guarantee, what the price includes, the signs you need it, reviews and a book button that pre-fills the form.

New doors /new-doors/

Four door styles with single and double fitted prices, lead time and warranty, the full configurator, a gallery of recent doors, repair vs replace and the new-door questions.

Prices /prices/

Every repair as a fixed price with what it includes and time on site, the symptom checker, new-door prices, and payment, service-plan and landlord notes.

Areas /areas/

Twelve towns with postcodes and typical arrival time, and a note on the doors common in each part of the patch.

About /about/

The firm’s story, how it works, what a visit looks like, a registration and insurance line for your own details, and reviews.

Guides /journal/

Maintenance guides as cards with a season tag. Add a Markdown file and it appears here and in the sitemap.

Guide pages /journal/…/

Four written guides: the autumn check, cold-weather faults, a spring maintenance routine and repair or replace by door age. Each says what is safe to do yourself and ends with a service booking card.

FAQ /faq/

Fourteen questions in three tabs (Repairs, New doors, Openers) beside a call-now card.

Book a repair /contact/

Booking form for a repair, survey, quote or service: fault, preferred day, postcode and the new-door choices, filled in from the configurator, the symptom checker or any book button.

Privacy and terms /legal/…/

Two starter legal pages on a shared layout, with placeholders for your company number.

404 /404

Designed, with links to booking, prices and home.

What is in the build

• A new-door configurator: style, width, insulation, opener and removal give a fitted price line by line, the lead time in weeks and the door, opener and fitting warranties, then a quote link that pre-fills the booking form
• A symptom checker: five faults (won’t open, loud bang, uneven, opener clicks, cable hanging) give the likely cause, a fixed repair price, whether the door is safe to use and the next same-day visit window, worked out from opening hours and a 2pm cut-off
• A hero card that switches between repair prices and door from-prices without JavaScript; picking a door style in it pre-selects the configurator below
• Rules a door buyer would check: roller doors come motorised and can’t take the thermal core, so the configurator strikes those options out
• Every price, door style, insulation level, fault, warranty and visit window in src/data/doors.ts, with the maths in one tested file
• A repair-vs-replace table by door age that stacks per row on phones, an FAQ in three tabs, and reviews tagged with door type, fault and hours to fix
• Services and guides as content collections, and every business fact, town and opening hour in one file
• One accent colour and two fonts rebrand the whole site; 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 pages with warm sand blocks and one dark steel band, condensed Antonio over Mukta, real photography of British house fronts, garage doors and their workings, and one warning-amber accent used as a fill with dark text.

The mechanic

A repair-or-replace card in the hero shows fixed fault prices or door from-prices; a symptom checker gives the likely fault, the fixed price, whether the door is safe to use and the next same-day slot; and a configurator prices a new door by style, width, insulation, opener and removal, with lead time and warranties, then hands the quote to a pre-filled booking form. Motion is one quiet reveal.

Loud channel

Imagery

Imagery. House fronts, garage doors, workings

Type & palette

Antonio · Mukta

#ffffff #1a1f24 #f59e0b

Who it is for

Built for independent garage door engineers and small door companies that do both same-day repairs and new installations, and want customers to diagnose, price and book online instead of ringing for a quote. It works for a one-van engineer as well as a six-van firm by changing the towns, prices and hours in two files. A lock-and-key business with emergency call-outs is better served by the locksmith template.

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

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions