# KILN — demo site A working demo of a marketing site + course catalog + course manager for **KILN**, a fictional institute teaching practical remote-work skills in small live cohorts. > **KILN is not a real company.** The brand, the instructor, the courses, the > testimonials and the leads are all invented for this build. Contact details > use the IANA-reserved `example` domains, so nothing resolves to a real > person or business. Built as a portfolio piece: the point is to show a complete product — brand system, marketing site, and a non-technical admin that actually drives it — rather than a static page. Brand strategy lives in [PRODUCT.md](PRODUCT.md). Visual system lives in [DESIGN.md](DESIGN.md). --- ## Run it No build step, no dependencies. ```bash python -m http.server 8777 # then open http://127.0.0.1:8777/ ``` Open `admin.html` and sign in with **`kiln2026`**. > Use a local server rather than opening the files directly — `file://` blocks > the storage the demo runs on in some browsers. --- ## The demo in 60 seconds The line that sells this is: **"add a course, right now, yourself."** 1. Open `/admin.html`, password `kiln2026` 2. **+ New course** → type a title and a price → **+ Add module** → tick **Free** 3. Set status to **Published** → **Save & publish** 4. Open `/courses.html` — the course is there, with its card, its detail page and its free module Then show it working the other way: fill in the free-module form on the home page, and watch the lead land in **Admin → Leads**. ### Pages | Page | What it is | |---|---| | `index.html` | Landing page — hero, KILN method, courses, all three conversion hooks, instructor, proof | | `courses.html` | Catalog with free/paid filtering | | `course.html?c=` | Course detail — curriculum with per-module free/paid gating, enrolment box | | `admin.html` | Course manager — course CRUD, module editor, leads inbox, live-class settings, export/import | ### The three conversion hooks All three are built and functional; each one writes a real lead into the admin inbox. 1. **Free Module 1 unlock** — email gate on the home page and every course page. The strongest of the three: it uses the free/paid split as the funnel, so a lead is already inside the product. 2. **Live masterclass seat counter** — books a seat, decrements the meter, persists. The date auto-rolls to the next Saturday so the demo never shows a stale date. 3. **Earnings quiz** — three questions → a monthly range and a recommended course. --- ## Architecture, and what is real vs. simulated Everything you can click is real. One thing is swapped out for the demo. | Piece | Status | |---|---| | Design system, all pages, responsive, accessibility | Real — production quality | | Admin CRUD, module editor, publish/draft, leads, CSV export | Real, fully functional | | Admin → public site round trip | Real | | **Where the data is stored** | **`localStorage` instead of a database** | | Video playback | Placeholder panel — no video files | | Payments | Not built | | Email delivery | Not built (leads are captured, not emailed) | **`assets/js/store.js` is the seam.** Every page reads and writes through it and nothing else touches storage. Swapping the demo for a real backend means rewriting that one file — the pages, the admin and the CSS do not change. The practical consequence of `localStorage`: changes are saved **per browser**. Edit a course on a laptop and it will not appear on a phone. That is the one thing to be upfront about when demoing it, and the exact thing the production stack below fixes. --- ## Deploy to GitHub Pages Runs on GitHub Pages as-is. Plain static files, no build step. ```bash git add . git commit -m "KILN demo site" git push -u origin main ``` Then **Settings → Pages → Source: Deploy from a branch → `main` / `(root)`** and it is live at `https://.github.io//` in about a minute. All paths are relative, so it works from a subdirectory. `.nojekyll` is included so GitHub serves the files untouched. --- ## Recommended stack for a real build **Astro + a hosted CMS, on Cloudflare Pages.** - **The CMS** is what a non-technical operator actually logs into. Real forms, image and video uploads, draft vs. published, works on a phone. This is the piece that determines whether the site stays up to date, so it is the piece worth choosing carefully. Sanity and Payload both fit. - **Astro** builds a static site, so it stays as fast as this demo. It is the lightest way to keep server-rendered pages without shipping a heavy framework. - **Cloudflare Pages** is free, and *unlike GitHub Pages it can run server code* — which is what payments and protected video need. ### Can it just stay on GitHub Pages? For a marketing-plus-catalog site: **yes, comfortably.** GitHub Pages serves static files only — no server code, ever. So it cannot do: - taking payments (needs a secret key server-side) - real student accounts and login - paid video that cannot be bypassed by reading the page source - sending email The moment a course sells through the site, it needs somewhere that runs code. Cloudflare Pages and Vercel both have free tiers and both deploy from the same GitHub repo, so it is a settings change, not a rebuild. **If staying on GitHub Pages matters more than payments**, the alternative is this exact static site plus a Git-backed CMS at `/admin` — it commits content straight into the repo and costs nothing. Cheaper, but a clunkier editor, and still no payments. ### Payments and email Payments need a merchant of record if the audience is international — Lemon Squeezy and Paddle both handle sales tax and pay out widely. Forms should post to a serverless function that writes to the database and sends through a transactional provider such as Resend. --- ## Assets - **Generated here, original to this project:** `hero-chamber.jpg`, `band-strata.jpg`, `band-aperture.jpg`, `c-cohort.jpg`, `instructor.jpg`. All produced with the script described in [DESIGN.md](DESIGN.md), mapping a procedural emission field through the brand's heat ramp. - **Logo system:** `logo-lockup.svg`, `logo-glyph.svg`, `logo-stacked.svg`, `favicon.svg` — hand-authored SVG, wordmark drawn as paths so it needs no font. Rationale in `assets/img/RATIONALE.md`. - **Photographic:** `desk-night.jpg`, `c-planning.jpg`, `c-laptop.jpg` are duotoned photographs carried over from an earlier build of this layout. They contain no people's faces and no identifiable location, but their licensing has not been verified — **re-source them from a known-licence library before any commercial use.** ## Deliberately not built This is a demo, so: no payments, no student accounts, no video hosting, no certificate generation, no blog, no search, no analytics, no email sending, no localisation.