Cleaning Company Website Template
Demo brand: BRISKWELL CLEANING CO. · Contract cleaning · 18 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this cleaning company website template
A complete website for a cleaning company that does homes, end-of-tenancy and offices. It has a before/after slider in the hero, an instant quote with a start-day picker, four service pages, a what’s-included checklist, before/after client stories, cleaning tips, an FAQ in three tabs and a booking form that fills itself in from the quote. Eighteen built pages, all driven by content files.
It looks clean in the literal sense. White pages with pale lemon blocks, dark green-black type, real photography of gloved hands, ovens, sinks, tiles and bright empty rooms, and one leaf-green accent for buttons, ticks and prices. Urbanist for headings, Nunito Sans for everything else.
Every section answers something a customer asks before booking a cleaner: what it costs, when you can start, what is included, who comes into the house and what happens if something is missed. The quote gives a price per visit and per month, the crew size and the next free start day, and Book this clean carries all of it to the contact form. Motion is one quiet reveal.
The 18 pages you get
- Home
/ - Before/after hob slider, four promises, service cards with prices from, the instant quote, the team band, how it works, the what’s-included table, before/after client stories, three timed cleaning tips, tabbed FAQ and a booking band.
- Services
/services/ - All four services side by side with price from, typical time and who each is for, plus the checklist table.
- Service pages
/services/…/ - Regular, deep, end of tenancy and office. Photo gallery, price from, hourly rate, what is and is not included, the full description, three FAQs and a matching client before/after.
- Prices and quote
/pricing/ - The instant quote, the rate card (hourly rates, extras, frequency discounts, minimum visit), the checklist and the re-clean guarantees.
- About
/about/ - The company story, how cleaners are hired and vetted, and the postcodes and areas covered.
- Cleaning tips
/journal/ - Tip cards, each with how long the job takes. Add an .mdx file and it appears here.
- Tips
/journal/…/ - Four written articles: descaling a shower screen, cleaning between oven-door panes, a pre-check-out walk-round, and end-of-tenancy disputes.
- FAQ
/faq/ - Questions in three tabs: Home, Office and End of tenancy.
- Contact and booking
/contact/ - Booking form with service, frequency, rooms, office size, extras, start day and the quoted price, all pre-filled from the quote.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout, covering keys, cancellations and the re-clean guarantee.
- 404
/404 - Designed, with links back to the quote and services.
What is in the build
- An instant quote: service, bedrooms and bathrooms or office m², frequency and extras give price per visit, per month, crew size and time on site
- A start-day picker showing the next ten working days, and a Book button that pre-fills the contact form
- Every price in one data file: hourly rates, hours per room, frequency discounts, extras and the minimum visit
- A before/after drag slider that works with mouse, touch and arrow keys
- A what’s-included table (regular, deep, end of tenancy) that stacks cleanly on phones
- Services and tips as content: one Markdown file per service, one MDX file per article with a job-time estimate
- Service-area postcodes, opening hours and all business details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included, with tests for the quote maths
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 pale lemon blocks, Urbanist headings over Nunito Sans, real photos of gloved hands, ovens, sinks and bright empty rooms, and one leaf-green accent.
- The mechanic
- An instant quote turns service, rooms or office m², frequency and extras into a price per visit and per month, crew size and the next free start day, then pre-fills the booking form; a before/after slider leads the hero. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Gloved hands, ovens, sinks, bright empty rooms
- Type & palette
- Urbanist · Nunito Sans
-
#ffffff#17201a#2e7d32
Who it is for
Built for domestic and commercial cleaning companies, end-of-tenancy specialists and office contract cleaners, and easy to adapt for carpet cleaners, window cleaners or oven-cleaning businesses. It suits a company that wants customers to get a price and pick a start day online instead of phoning for a quote.
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 prices?
Edit src/data/pricing.ts: the hourly rate per service, hours per bedroom and bathroom, office m² per hour, frequency discounts, extras and the minimum visit. The quote, the service cards, the rate card and the checklist table all update from it.
Where do bookings go?
The contact form posts nowhere by default. Point it at your form backend or booking tool; the README shows how. The quote passes every choice to the form in the link, so the request arrives complete.
Is the start-day availability real?
It shows the next ten working days after a two-day lead time, worked out in the visitor’s browser. Which days show as full is a demo rule you can connect to your own calendar or remove.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed in LICENSING.md. Two of the “before” images are edits of the matching “after” photo, so replace them with your own before/after shots from real jobs.
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
HOLLICK & VANE
HVAC contractor
Loud
Imagery