Open source landing page templates you can actually program

I needed landing pages for a campaign last month. Simple ones. A webinar registration page and a thank you for registering page.

So I looked at the usual suspects. Unbounce. Instapage. Leadpages. They all work the same way. Drag a hero block here. Drop a form there. Click publish. So exhausting.

But I wanted to generate pages programmatically. I wanted to define a landing page as a configuration object, hand it to Claude Code, and have it build ten variations in five minutes. The legacy tools don't have APIs or MCP servers. You need to build everything tediously, by hand.

So I built my own landing page system.

What this is

It is a collection of fifteen open source landing page templates. Next.js. TypeScript. Tailwind CSS. shadcn/ui components. Every page is defined as a TypeScript configuration object. No custom React code needed. You fill in the data, and the template renders it.

The repo is on GitHub: CoolAssPuppy/landing-pages.

Clone it. Swap in your logo. Pick a color theme. Deploy to Vercel. Set up your sub-domain (e.g., build.your-domain.com). You have a production landing page system in a few minutes.

Why configuration over code

Most landing page tools are visual editors. They're not useful for modern marketing workflows run through the command line:

• Spin up pages for multiple campaigns at once
• Keep branding consistent across dozens of pages
• Let an AI assistant generate or modify pages
• Version control your landing pages alongside your codebase
• Avoid paying per-page fees to a SaaS vendor

When your pages are TypeScript objects, all of this becomes trivial. You can diff them. You can lint them. You can write scripts that generate them. You can point Claude Code at a template and say "make me a webinar registration page for this event" and it will produce a valid configuration file in seconds.

I wrote about using AI in my own marketing workflow last year. This repo is a direct extension of that approach. If your marketing artifacts are structured data instead of pixels trapped in a visual editor, AI can work with them.

The templates

Fifteen templates cover the pages marketing teams build most often:

• Lead gen. Ebook downloads, webinar signups, demo requests. Hero section, content blocks, social proof, and a form.
• Thank you. Confirmation pages after form submission. Success message, CTAs, and secondary content links.
• Legal. Terms of service, privacy policies, contest rules. Table of contents with prose sections.
• Waitlist. Coming soon and early access pages. Countdown timer, feature preview, and email capture.
• Resource hub. Content libraries and resource centers. Filterable grid with categories, featured resources, and a newsletter CTA.
• Partner. Co-marketing and partner promotion pages. Logo lockup, joint value propositions, and special offers with expiry dates.
• Comparison. Product comparison and "vs." pages. Feature comparison table, split sections, timeline, and FAQ.
• Pricing. Sale pricing and promotional offers. Tiered pricing cards, feature comparison matrix, and urgency countdown.
• Webinar. Event registration pages. Date and time info, speaker bios, agenda, and a registration form.
• Case study. Customer success stories. Challenge, solution, and results narrative with metrics and a pull quote.
• Product launch. Feature announcements and releases. Badge, video embed, feature highlights, code snippet, and FAQ.
• Demo request. "Book a demo" pages. Split hero with an embedded form, calendar embed, and value propositions.
• Job listing. Career pages and job postings. Role details, responsibilities, requirements, benefits, and an apply form.
• Event recap. Post-event and on-demand content pages. Recording embed, speaker grid, slides download, and related resources.
• Integration. Integration marketplace pages. Partner logo lockup, setup steps as a timeline, code snippet, and features.

Every template supports dark mode, responsive layout, and SEO metadata out of the box.

How to use them

Three steps.

First, clone the repo and install dependencies:

git clone https://github.com/CoolAssPuppy/landing-pages.git
cd landing-pages
npm install

Second, customize your branding. Open src/config/site.ts and set your company name, logo, navigation, and footer. Drop your logo files in public/images/. Pick a color theme in src/app/globals.css if you do not like the default.

Third, create a page. Copy any example from data/pages/examples/ into data/pages/, change the slug, update the content, and register it in data/pages/index.ts. Run npm run dev and visit your page at localhost:3000/your-slug.

That is it. A new landing page is a TypeScript file with about forty lines of configuration.

Built-in form handling

Forms are the whole point of a landing page. These templates ship with a server-side form handler that includes CSRF protection, rate limiting, input sanitization, and bot detection. Out of the box, forms integrate with HubSpot and Customer.io. You add your API keys to .env.local and form submissions flow straight into your CRM.

The integration layer is designed to be extended. Adding Salesforce, Marketo, Mailchimp, or any other platform means writing a single async function in src/lib/integrations/.

Get started now

Clone the repo and follow the instructions in the README.md file: github.com/CoolAssPuppy/landing-pages.