Next.js 16 · Tailwind 4 · Static export
Six complete landing pages for course creators, coaches and newsletter writers. Conversion blocks that already match, motion that costs zero kilobytes, and one content file to edit. Live this afternoon.
Launch price, normally $59 · 14-day refund · Lifetime updates
6 demos from 32 components
The demos
A webinar page and a coaching page want different things from a visitor, so they are built differently — different hero, different proof, different ask. Each one is a real page in the repo you can open, edit, or delete.
Every demo is the full page, not a screenshot. Start with the flagship, or read what each page is doing.
Next.js 16. Tailwind 4. Static export. CSS-only motion. Self-hosted fonts. 32 components. 6 demos
What's inside
No page builder, no theme options panel, no 40-field config. It is a normal Next.js project with good defaults and comments that explain the decisions.
0KB of JS for animation
Every reveal, marquee, progress bar and header transition is a CSS scroll-driven animation. No Framer Motion, no observers, no JavaScript on the scroll path — and each one degrades to plain visible content where the feature is missing.
next build gives you a plain out/ folder. Drop it on Vercel, Netlify, Cloudflare or a $3 VPS.
Self-hosted via @fontsource. No Google Fonts CDN, so it loads everywhere — including behind the Great Firewall.
Copy, prices, modules, testimonials and FAQ all live in a typed data file. TypeScript tells you when you miss a field.
Native <details> accordions, real focus rings, reduced-motion handling, 4.5:1 body contrast on every surface.
The FAQ block emits FAQPage JSON-LD, so Google can expand your questions in search.
Why buy it
The editing experience
Every page reads its copy, prices, modules and testimonials from one typed file. Change a string, save, and the page is already rebuilt in the browser. TypeScript tells you if you miss a field.
// src/data/course.ts — change these, not the components
export const course = {
name: "Typeset",
subtitle: "A 6-week typography course for product designers",
enrolmentDeadline: "2026-09-14T23:59:00Z",
price: 349,
compareAt: 495,
paymentPlan: "or 3 × $125 — no interest",
checkoutUrl: "https://gumroad.com/l/your-course",
};
export const modules = [
{
title: "The modular scale",
summary: "A size system you never have to argue about again.",
lessons: [
{ title: "Ratios, and why 1.618 is usually wrong", length: "16 min" },
{ title: "Fluid type with clamp() without breaking rhythm", length: "22 min" },
],
},
];// src/app/page.tsx — the page is a list of sections
export default function Page() {
return (
<>
<Hero headline={...} primary={{ label: "Enrol", href: "#buy" }} />
<Section tone="sand"><LogoMarquee logos={logos} /></Section>
<Section tone="cream"><Curriculum modules={modules} /></Section>
<Section tone="shell"><TestimonialColumns items={quotes} /></Section>
<Section tone="cream" id="buy"><PricingTable tiers={tiers} /></Section>
<Section tone="sand"><Faq items={faq} /></Section>
</>
);
}This afternoon
01
One command, or download the zip. npm install, npm run dev, and the six demos are running on your machine.
02
Open the data file for the page you picked. Your course name, your price, your modules, your testimonials.
03
Push to GitHub, connect Vercel, done — it's a static site, so the free tier is genuinely enough.
Pricing
The flagship demo and the whole design system, on GitHub. Ship a real page without paying anything.
All six demos, all 32 components, and the SEO pages. One purchase, one commercial project.
Launch price. Goes to $59.
Buy — $39For studios and freelancers: use it for as many client projects as you like.
Prices in USD, one-time. 14-day refund, no questions — email me and it's done. Invoices available for company purchases.
Free version
The flagship demo and the whole design system are on GitHub, MIT for personal use. It is the real page, not a teaser — if it gets your course live and you never buy the kit, that is a fine outcome for both of us.
Questions
To change copy, prices and testimonials: no. Those live in one data file per page and read like a list. To add a section or rearrange the page: you need to be comfortable editing JSX, which is close enough to HTML that people manage it on their first day.
A Next.js 16 project: 6 complete landing pages, 32 components, the design system, the SEO pages with a sitemap, and a README written for someone who has never deployed anything. You get the repository, not a zip of HTML.
Anywhere. It builds to a plain folder of static files, so Vercel and Netlify are one click, Cloudflare Pages and GitHub Pages are free, and any web host that serves files will work. The README walks through Vercel with screenshots.
The Complete licence covers one commercial project — yours or a client's. If you build sites for a living, the Extended licence covers unlimited client projects, including handing the finished site over.
There is a little: the countdown timer and the sticky enrol bar are client components, because time and scroll position genuinely need it. Everything else — reveals, marquees, the reading progress bar, the accordions, the header — is CSS. That is why the pages score the way they do.
Try the free version first; it is the full flagship page, not a teaser. If you buy and it still isn't right, email me within 14 days and I'll refund it. Digital goods, so I'd rather you just kept the files.
$39 today, $59 once the launch window closes. Lifetime updates, 14-day refund.
Or look through the six demos again