Grooming
Barbershop Kit
A specific, owned identity your shop can point to as "designed for us" — live in about an evening, no code, no monthly fees.
A heritage-craft barbershop site with a real per-barber booking strip and a dense, printed-style price board — no invented reviews, no barber-pole cliché.
The Barbershop Kit is a complete, production-ready website for barbershops and independent barbers — anywhere the job is to make it obvious which barber to book, when, and why this chair over the one down the street.
It breaks from the two defaults every barbershop template falls into — the literal red-white-blue pole graphic, and the generic dark-salon look with one saturated accent — in favour of an owned identity: deep barbershop green and brass instead of navy and red-white-blue, a hand-cut-signage display serif paired with a plain body sans, and a single straight-razor line motif drawn once for this kit and reused exactly three times, never as a literal barber pole.
The homepage leads with a live "next available chair" strip — one die-cut ticket-stub card per barber, showing name, role, and whichever real way in the shop actually uses: a tap-to-call number, an email, a link straight into a booking system they already run (Fresha, Booksy, Squire, or similar), or "walk in, no appointment." It never displays an available time slot the shop can't honour. Below that, the barber roster breaks the grid on purpose — an offset, unevenly sized filmstrip instead of a symmetric row — and the price board is set dense and tabular, grouped by cuts / beard & shave / longer sit-downs, close-set like a real price board on a wall rather than padded out to match the rest of the page.
Built on Next.js and Tailwind CSS, with Framer Motion powering a short, mechanical scroll-reveal (the razor-line divider drawing itself in once) rather than anything bouncy — 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 stat, or a years-in-the-trade claim the shop didn't give it — no reviews yet, and the reviews section simply doesn't render, not a placeholder quote to replace later. The booking-request form requires whichever of phone or email the shop actually confirms by, and falls back to a real contact route rather than a dead link when no form key is set. Every word — barber names, prices, hours, 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 (App Router) + TypeScript
- Styling
- Tailwind CSS — heritage-craft green + brass design tokens
- Animation
- Framer Motion — short, mechanical scroll-reveal, reduced-motion aware
- Rendering
- Static export — no backend, no database, no third-party tracking by default
- Content
- lib/site-config.ts + data/barbers.ts + data/services.ts + data/reviews.ts
- Included pages
- Landing (chairs, barbers, prices, gallery, visit) + Privacy, Terms, 404
- Booking
- Per-barber "next available chair" strip — links to a real booking system, phone, email, or walk-in, never a fabricated time slot
- 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 a real cancellation/no-show and patch-test clause
- 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 barbers, prices, 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 per-barber "next available chair" booking strip that links into whatever the shop actually uses — a booking system, phone, email, or walk-in — never an invented time slot
- A designed photo-placeholder frame for the shop floor, every barber headshot, and the gallery, 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 a real cancellation/no-show and patch-test clause, 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