Battery Guard — website
Marketing & download site for Battery Guard, the macOS battery app. Built with
Next.js (App Router) + TypeScript + Tailwind CSS v4, and exported as a fully static
site so it can be hosted anywhere — including the same box that serves the .dmg.
Visual direction: energetic lime-on-dark, mono numerals for stats.
Develop
npm install
npm run dev # http://localhost:3000
Build (static export)
npm run build # outputs a static site to ./out
next.config.ts sets output: "export", so next build produces a plain
HTML/CSS/JS site in out/ with no server required. Deploy out/ to GitHub Pages,
Netlify, Cloudflare Pages, S3 + CloudFront, or any static host.
Note: this project lives inside the native_apps workspace next to the app repo.
Run npm/next commands from this directory (battery-guard-web) — running them
from inside node_modules will pick up the wrong package.json.
Structure
app/
layout.tsx Root layout: fonts, global metadata, header/footer
page.tsx Homepage (hero, problem/solution, features, use cases,
testimonials, developer, pricing, FAQ, CTA)
why/ Why Battery Guard
features/ Features index
features/[slug]/ Per-feature landing pages (static-generated)
use-cases/ Use cases
pricing/ Pricing (one-time tiers + pricing FAQ)
faq/ Full FAQ
download/ Download — direct DMG / App Store / Setapp
blog/ Blog index + posts
blog/[slug]/ Blog post (renders Markdown from /content/blog)
changelog/ Release history
press/ Press kit (boilerplate, fast facts, brand colors)
privacy/ terms/ refund/ Legal pages
not-found.tsx Custom 404
sitemap.ts robots.ts SEO
components/ Header, Footer, UI primitives, Icon set, AppPreview,
BatteryRing, PricingCards, FaqList, Testimonials, ...
content/blog/*.md Blog posts (frontmatter + Markdown)
lib/
site.ts Brand constants, nav, footer, download links
content.ts Features, use cases, testimonials, pricing, FAQ data
blog.ts Filesystem-backed Markdown blog loader
Editing content
- Brand / nav / download URLs:
lib/site.ts (swap the placeholder DMG, App
Store, and Setapp URLs at launch).
- Features, pricing, FAQ, testimonials:
lib/content.ts.
- Blog posts: add a Markdown file to
content/blog/ with frontmatter
(title, description, date, author, tag). It's picked up automatically.
- Changelog: edit the
releases array in app/changelog/page.tsx.
TODO before launch
- Replace placeholder URLs in
lib/site.ts (downloads.*, site.url, site.email).
- Drop a real app screenshot into
public/ and swap the <AppPreview /> mock in the
hero, plus add an Open Graph image.
- Confirm pricing/tier copy in
lib/content.ts.
- Replace placeholder testimonials with real reviews.