Make this site yours — in an afternoon.
Everything you need is on this page: pick one of the six looks, put your brand in one config file, edit anything else with Claude Code, and host it free on Cloudflare Pages. No build pipelines to learn, no CMS, no monthly hosting bill.
That's the whole journey — each step has its own section below, in order.
Quick startRun it on your machine
Two things to install once, then four copy-paste commands. Ten minutes, no coding.
Never used a terminal? Start here
The terminal is just a window where you type a command and press Enter — that's all you'll do. Open it with Cmd+Space → type "Terminal" on Mac, or the Start menu → "PowerShell" on Windows.
First install Node.js (the engine that runs the site tools): go to nodejs.org, click the big green LTS button, and click through the installer like any other app.
Then point the terminal at this project's folder: type cd (with a space), drag the project folder from Finder/Explorer onto the terminal window, and press Enter. Now run the commands below, one line at a time:
npm install # once — installs everything the site needs npm run dev # opens a live preview → http://localhost:5173 npm run build # packages the finished site into the dist/ folder npm run preview # double-check that finished version locally
Keep npm run dev running while you edit — every change shows up in the browser instantly, like editing a Google Doc.
Six looks, one wordPick your variant
The template ships with six complete visual identities — different fonts, colours, card styles and backgrounds. Click any screenshot below to see the whole site in that look (it opens a live preview — nothing changes until you pick). Then switch for real by changing ONE word in src/brand.config.ts:
theme: "original", // "original" | "nebula" | "bloom" | "ember" | "tidal"
Click to preview live ↗Frosted-glass cards over a slow-drifting grid with film grain. Fresh green accent, Space Grotesk headlines.
theme: "original"Preview live ↗
Click to preview live ↗Indigo & violet on solid elevated cards with a soft violet glow — a modern app-surface look. Sora headlines, orb background, no grid.
theme: "nebula"Preview live ↗
Click to preview live ↗Rose & fuchsia with Fraunces serif headlines on soft paper cards — big radius, pastel shadows, warm bloom background. Boutique and editorial.
theme: "bloom"Preview live ↗
Click to preview live ↗Amber & orange with Bricolage Grotesque headlines on flat, confidently bordered cards — warm blooms, a hint of grain. Bold and energetic.
theme: "ember"Preview live ↗
Click to preview live ↗Sky & cyan in Manrope on crisp hairline cards — tight shadows, sharp corners, a single top glow. Minimal and product-led.
theme: "tidal"Preview live ↗
Click to preview live ↗Black & white minimalism — Inter everywhere, near-black buttons, hairline gray borders, zero decoration. The Linear/Notion look.
theme: "mono"Preview live ↗Every theme works with your brand colour too — set the six colour stops in brand.config.ts → colors and they override the theme's default accent. Want a sixth look? Copy a theme object in src/themes.ts and tweak it.
…and six home-page layouts
Separate from the look, you can change what the home page is built from — which sections appear, in what order, and how the top opens. Same one-word switch: homeLayout: "classic". Any layout works with any theme.
The full story: big hero with the animated inbox, then why-it's-different, how it works, features, pricing.
homeLayout: "classic"Preview live ↗The long-form page: every section — comparison, steps, industries, features, integrations, a mid-page CTA — before pricing. For cold traffic that needs convincing.
homeLayout: "story"Preview live ↗Product-led: copy left + live chat demo right, features first, industries and comparison after.
homeLayout: "split"Preview live ↗Show, don't tell: how it works right after the hero, then industries, features and a mid-page CTA before the comparison.
homeLayout: "demo"Preview live ↗A conversion page for paid traffic: VSL video up top (hero.videoId — a styled placeholder until you set it), how it works, industries, pricing early, FAQ, done.
homeLayout: "vsl"Preview live ↗A tight one-pager: minimal hero (no demo), channels & tools, features, pricing, FAQ. For warm audiences that just need the essentials.
homeLayout: "compact"Preview live ↗One filePut your brand in
Everything customer-facing — name, copy, pricing, FAQ, legal pages — flows from src/brand.config.ts. It's heavily commented; read it top to bottom once and you'll know the whole site.
Identity & copy
Set brandName, domain, app URL and support email, then work through each section (hero, pricing tiers, FAQ…). Search the project for the string YourBrand if you think you missed a spot.
Logo & images
Drop your files into public/brand/: logo.svg, favicon.svg and og.svg (the social-share image). Any format works — update the paths in the config if you use .png.
Legal pages
Terms and Privacy are generated from the config's legalEntity, legalJurisdiction and infrastructure blocks. Anything in [SQUARE BRACKETS] MUST be replaced before you go live — and have a lawyer review both pages.
Testimonials ship empty
On purpose. Add only your own reviews, with permission — never reuse someone else's. Leave the array empty and the whole section hides itself.
AI-assisted editingEdit anything with Claude Code
Claude Code is Anthropic's AI coding agent that runs in your terminal. This project ships pre-configured for it: it already knows the template's structure, rules and gotchas, so you can change anything in plain English — no coding needed.
npm install -g @anthropic-ai/claude-code # install once cd path/to/this-project claude # start it inside the project
What's packaged for you
CLAUDE.md — the project briefing Claude reads automatically: architecture, where every kind of change lives, and what not to touch.
.claude/skills/ — guided workflows you can invoke by name: /rebrand (interview → your whole brand filled in), /theme (switch or design variants) and /deploy (build + ship to Cloudflare Pages).
Prompts that work
Just describe the change:
"Rebrand this site to AcmeReply, domain acmereply.com, brand colour #7c3aed"
"Add a fourth pricing tier called Agency at $297/mo"
"Rewrite the hero for a dental-clinic audience"
"Swap the theme to tidal and make the FAQ six questions"
After Claude makes a change, it runs npm run build to verify nothing broke — that's the safety net; the site can't deploy in a broken state if the build fails.
Version controlPut it on GitHub
Git gives you an undo history for every change; GitHub stores it online and is what Cloudflare Pages deploys from. One-time setup, five minutes.
# 1. one-time: install git (git-scm.com) and create a free github.com account # 2. in the project folder — start the history and make the first snapshot git init git add . git commit -m "My site — initial version" # 3. create a PRIVATE repo on GitHub and push # (easiest: install GitHub's CLI from cli.github.com, then) gh auth login gh repo create my-site --private --source=. --push
Daily rhythm
After every editing session:
git add . git commit -m "what changed" git push
That's it. Each commit is a restore point, and each push triggers a fresh deploy if you connect Cloudflare Pages to the repo (next section).
No terminal? No problem
GitHub Desktop (desktop.github.com) does all of the above with buttons: File → Add local repository, then "Publish repository" (keep "private" ticked), then Commit + Push after each change. Claude Code can also run the git commands for you — just ask it to "commit and push my changes".
Free hostingHost it free on Cloudflare Pages
Cloudflare Pages serves static sites like this one on a global CDN, free — unlimited bandwidth, free SSL, custom domains included. Two ways to ship:
A) Connect GitHub (recommended)
1. dash.cloudflare.com → sign up free → Workers & Pages → Create → Pages → "Connect to Git".
2. Authorize GitHub and pick your repo.
3. Build settings — framework preset None, build command npm run build, output directory dist.
4. Deploy. You get a free *.pages.dev URL, and every git push auto-deploys the new version.
B) Direct upload
No GitHub needed — build locally and push the dist/ folder up:
npm run build npx wrangler pages project create my-site npx wrangler pages deploy dist --project-name=my-site
(Or drag-and-drop the dist folder in the dashboard: Create → Pages → "Upload assets".)
Custom domain
In your Pages project → Custom domains → "Set up a domain". If your domain already uses Cloudflare for DNS it's one click; otherwise Cloudflare shows you the exact CNAME record to add at your registrar. SSL is automatic. Set both yourbrand.com and www, and remember to put the final URL in brand.config.ts → siteUrl and rebuild so canonical/OG tags match.
Going furtherYou're live — now iterate
Funnel copy
Need ads, an opt-in page or an email sequence to drive traffic here? Ask Claude Code — it can read your whole brand config, so "write me 5 ad angles and a 3-email follow-up sequence matched to this landing page" comes back on-brand.
Keep it fresh
Update pricing, FAQ answers and screenshots as your offer evolves — it's one config edit + push. Stale pricing pages lose deals silently.
Before you launch
Checklist: [SQUARE BRACKETS] all gone, legal reviewed, your real WhatsApp link in whatsAppLink, og.svg shows your brand, and siteUrl matches your real domain.