Automotive
Mobile Car Detailing Kit
Prove the transformation instead of claiming it — live in about an evening, no code, no monthly fees.
A drag-reveal before/after hero and a dense package comparison table for mobile detailers — real transformation proof, not a stock claim, and no invented cars-detailed count.
The Mobile Car Detailing Kit is a complete, production-ready website for mobile detailers — daily-driver refresh, paint correction, ceramic coating — anywhere the job is to prove a real transformation and make a real price list easy to compare.
It breaks from the red/black "auto shop" template every detailing business gets stuck reusing from a car-repair listing, in favour of an owned identity: deep graphite and a ceramic-sheen cyan instead of navy-and-red, a condensed technical display face paired with a humanist body face, and a single hydrophobic water-bead motif drawn once for this kit and reused exactly three times, never a generic swoosh.
The homepage leads with a full-bleed drag-reveal before/after slider — drag the handle, or use arrow keys, and watch one car panel transition from road-dirty to glossy-coated. Below that, a dense, tabular package comparison (three real tiers, real prices, real time on-site) and a dedicated coverage-area section that answers the one logistics question a mobile trade's customer actually has: will they come to me?
Built on Next.js 16 and Tailwind CSS 4, with Framer Motion powering the slider's drag interaction and a subtle sheen-sweep on package-card hover — exported to plain static files, so it loads fast, ranks well, and runs on free hosting with nothing to go down at 2am.
It won't invent a review, a cars-detailed count, or a coverage radius the detailer didn't give it — no reviews yet, and the reviews section simply doesn't render, not a placeholder quote to replace later. Until a detailer supplies their own before/after pair, the slider shows a designed placeholder frame instead of a stock or AI-generated "after" photo. The booking-request form requires whichever of phone or email the detailer actually confirms by, and falls back to a real contact route rather than a dead link when no form key is set. Every word — packages, coverage area, contact details — lives in a few config and data files, and going live is dragging a folder onto Cloudflare: no GitHub account and no command line at any point.
Technical details
- Framework
- Next.js 16 (App Router) + TypeScript
- Styling
- Tailwind CSS 4 — graphite + ceramic-sheen cyan design tokens
- Animation
- Framer Motion — before/after drag interaction, reduced-motion aware (click/tap-to-set as well as drag)
- Rendering
- Static export — no backend, no database, no third-party tracking by default
- Content
- lib/site-config.ts + data/packages.ts + data/gallery.ts + data/reviews.ts
- Included pages
- Landing (before/after hero, packages, coverage area, gallery, about, FAQ, contact) + Privacy, Terms, 404
- Hero
- Drag-reveal before/after slider — keyboard-operable, real proof instead of a stock claim
- Contact form
- Web3Forms — free, no server, falls back to a real contact route if no key is set
- Compliance
- Honest, cookie-free-by-default cookie notice; GDPR-style Privacy Policy and Terms with real cancellation/weather-rescheduling/payment clauses
- Deploy
- Browser-only: drag the folder onto Cloudflare Pages or Drop — no GitHub, no code to go live
In the download
- Website Build Prompt — the file you drop into your AI coding assistant to build your live site from your real packages, coverage area, and booking process
- A finished example site (zip) with the AI config and deploy guide built in, so you can preview, click through, and read the code before you commit to anything
- A pre-built, ready-to-deploy static export — drag it straight onto Cloudflare today and see a live URL in under a minute, placeholder content and all
- PERSONALIZE.md — a launch checklist that tells an AI exactly what's already done and exactly what it needs to ask you for
- DEPLOY-GUIDE.md — a zero-terminal walkthrough to get permanently live in about ten minutes
- A drag-reveal before/after slider hero that never substitutes a stock or AI-generated "after" photo for real proof
- A dedicated coverage-area section answering "will you come to me?" before anyone has to ask
- A designed photo-placeholder frame for the before/after slider and every gallery slot, printing the exact size needed until a real photo replaces it
- Reviews section that hides itself automatically until you add real ones — never a fabricated quote or star rating
- Privacy Policy and Terms of Service — a GDPR-style starting point with real cancellation/weather-rescheduling/payment clauses, clearly marked as needing review before launch
- An honest, cookie-free-by-default cookie notice
- Security headers for both Cloudflare Pages and a traditional Apache host
- A branded 404 error page
Make it yours
Every word on the site — your name, headline, prices, services, testimonials — lives in a single config file. Change your text there and the whole site updates.
Prefer to talk instead of type? Open the folder in an AI assistant and tell it what to change: "swap the pricing to €29 and €79," "link my button to my Calendly." A Template Customization Prompts pack walks you through it.
AI editing needs a Claude plan, about $20/month; plain text edits are free, done yourself in the files.
How you get it live
Get your Build Prompt
One payment. Instant download — the prompt file, ready to run in your AI assistant.
Run the prompt
Drop it into Claude Code or your AI coding assistant (a paid plan, about $20/month). It works through a checklist, asks for your real business details, and builds your site on your own computer.
Go live — free!
Drag your finished site into Cloudflare Drop for an instant no-account preview, or Cloudflare Pages for a permanent free address. No GitHub, no terminal.
Edit anytime
Ask your AI assistant for more changes in plain English, right in the same project, then drag the updated site back to redeploy — free either way.
Works for
Honest about what it is
This is a fast, professional marketing site — not a booking system or a database-backed app. It's built to win the client, then send them to your calendar or inbox. If that's what you need, it's exactly right. And one more honest thing: the screenshots are a real site, built by hand, to show you the concept — not a file you receive. Your AI assistant builds a close, similar design from the prompt, not a pixel-identical copy.
Explore other kits
Frequently asked questions
Is there a way to build more than one site with this?
Yes — this kit is one finished website for this niche. If you want to build client-ready websites for any niche, not just this one, see the Website Build Prompt: a beginner's book plus the universal prompt system that builds every kit in this shop.
Do I need to know how to code?
No. The deploy guide covers every click, browser-only. To change text, edit one config file or ask an AI assistant using the included prompt pack — no coding.
How long until my site is live?
30–60 minutes the first time, including setting up a free Cloudflare account. No GitHub needed. After that, edits are much faster.
Can I build this for a paying client?
Yes — build and sell a site to a client using this template. You just can't resell or redistribute the template files themselves.
Are the legal pages ready to use?
They're generated for a real jurisdiction and clearly marked as templates. Replace the bracketed placeholders with your real details and have a lawyer review before launch.
What if something breaks?
The deploy guide covers the common issues. Beyond that: paste the exact error into an AI coding assistant and ask it to fix it — that solves most things.
Don't want the stress? I'll build it for you.
No AI chat, no prompts, no deploy guide — tell me what you need and I'll build and hand you a live site.
Get a quote →I reply within 24 hours — real quote, no automated reply.
License: Single-business use. Build your own site with it — don't resell or redistribute the template files themselves.
Questions before you buy? Message me on Instagram — I answer every message personally.
“Whatever you do, work at it with all your heart.” — Colossians 3:23