Kitchen Remodeling Website Template

About this kitchen remodeling website template

The 23 pages you get

Home /

Full-bleed kitchen photo with the headline over a tint and a spec card: kitchens from, weeks on site, guarantee, two buttons and the rating. Then promises, the five kinds of job, the walnut team band, the process, the cost estimator, the Essential / Signature / Bespoke table, one long project story with numbers, three design ideas, FAQ and a design-visit band.

Kitchens and bathrooms /services/

All five services with price-from and weeks on site, plus a "not sure which it is?" card.

Service pages /services/…/

Five services: kitchens, kitchen-diners and knock-throughs, bathrooms, en-suites and cloakrooms, walk-in showers and wet rooms. Photos, price from, what’s included, who it suits, a review, recent projects, and buttons that open the estimator or the form with the room already set.

Projects /projects/

Finished jobs as cards with the final bill and weeks on site.

Project pages /projects/…/

Three projects, each with a drag before/after slider that also works with the arrow keys, room, finish, final bill, weeks, what changed, the full write-up and a client quote by initials.

Prices /prices/

The finish-level comparison, every room and size at every level, layout changes and extras, and the four stage payments.

Cost estimator /cost-estimator/

The estimator on its own page, with notes on why it gives a range, how the start month is worked out and what is not included.

About /about/

The firm, why it employs its own fitters, how a job runs, a paperwork list with placeholders for your own details, and three client quotes.

Design ideas /journal/

Idea cards with a budget tag. Add an .mdx file and it appears here and in the sitemap.

Design ideas /journal/…/

Three written ideas: a warm shaker kitchen under £22,000, fitting a walk-in shower and a bath into 5 m², and making a small en-suite feel bigger. Each links to the estimator.

FAQ /faq/

Twelve questions with a sidebar to pick Planning, Costs or During the work and the answers beside it.

Book a design visit /contact/

Request form with room, size, finish, layout and extras, filled in from the estimator or any service button, plus contact details and appointment hours.

Privacy and terms /legal/…/

Two starter legal pages on a shared layout.

404 /404

Designed, with a way back to home and the estimator.

What is in the build

• A remodel cost estimator: room, size, finish level, layout change and extras give a fitted price range, the lines it adds up from, weeks on site, the deposit and stage payments, and the earliest start month
• Start months worked out from the survey, the materials lead time for each finish and how far ahead the fitting diary is booked, all set in one data file
• A drag before/after slider on every project page, built on a range input so it works with the keyboard and screen readers
• Every list price, finish level, layout change, extra, stage payment and diary setting in src/data/estimator.ts, with the maths in one tested file; tests fail if a published "from" price stops matching it
• Services, projects and design ideas as content collections, and every business fact in one file
• Real photography of finished kitchens and bathrooms from one interior series, with appliance badges retouched or cropped out
• 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

Warm limestone ground with white cards and one dark walnut band, Playfair Display over Wix Madefor Text, real photography of finished kitchens, bathrooms and fitters at work, and one aubergine accent.

The mechanic

Room, size, finish level, layout change and extras give a fitted price range, the lines it adds up from, weeks on site, the deposit and stage payments and the earliest start month, and the design-visit button pre-fills the form; every project page has a drag before/after slider. Motion is one quiet reveal.

Loud channel

Imagery

Imagery. Finished kitchens, bathrooms, walk-in showers, tiling and fitting work, walnut and marble

Type & palette

Playfair Display · Wix Madefor Text

#f5f2ed #1f1a17 #5e2a4f

Who it is for

Built for kitchen and bathroom fitters, design-and-fit showrooms and small renovation firms who sell to homeowners. It suits a firm that is happy to publish its prices and wants enquiries from people who already know roughly what a room costs, and it works for a bathroom-only or kitchen-only business by removing rooms from one file.

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