Landing Page

AI SaaS Landing

Quick Start

Requirements: Node.js 18+ and pnpm. No external services required - all data is static.

Download and unzip

After purchase, download the zip file from your order confirmation email and unzip it into your projects folder.

Install dependencies

pnpm install

No pnpm? Install it first: npm install -g pnpm

Start the dev server

pnpm dev

Open http://localhost:3000 to see the landing page. Additional pages:

localhost:3000/blog — blog listing
localhost:3000/changelog — changelog timeline
localhost:3000/docs — docs page
localhost:3000/contact — contact form
localhost:3000/login — login page
localhost:3000/signup — sign up page

Build for production

pnpm build
pnpm start

Folder Structure

Next.js App Router. The landing page is a single page.tsx that composes all sections as imported components:

src/
├── app/
│   ├── layout.tsx              # Root layout — Syne + DM Sans + JetBrains Mono, dark mode script
│   ├── globals.css             # Design tokens (@theme) + Tailwind imports
│   ├── not-found.tsx           # 404 page
│   ├── page.tsx                # Landing page — imports all section components
│   ├── blog/
│   │   ├── page.tsx            # Blog listing (featured + grid)
│   │   └── [slug]/page.tsx     # Dynamic post page with generateStaticParams
│   ├── changelog/
│   │   └── page.tsx            # Changelog timeline
│   ├── contact/
│   │   └── page.tsx            # Contact page with reason cards + form
│   ├── docs/
│   │   ├── layout.tsx          # Docs layout with sidebar navigation
│   │   └── page.tsx            # Docs overview (quick links + install snippet)
│   ├── login/
│   │   └── page.tsx            # Login (GitHub + Google + email/password)
│   └── signup/
│       └── page.tsx            # Signup (perks list + registration form)
├── components/
│   ├── Navbar.tsx              # Sticky nav with flash-free dark mode border
│   ├── Hero.tsx                # Hero with animated API log dashboard preview
│   ├── LogoStrip.tsx           # "Trusted by" marquee
│   ├── Features.tsx            # Bento grid feature cards
│   ├── FeatureVisuals.tsx      # Custom SVG visuals for each feature card
│   ├── HowItWorks.tsx          # 3-step process
│   ├── Metrics.tsx             # Key stats section
│   ├── Pricing.tsx             # 3-tier pricing with monthly/yearly toggle
│   ├── Testimonials.tsx        # Testimonials grid
│   ├── FAQ.tsx                 # Accordion FAQ
│   ├── CTA.tsx                 # Final call-to-action section
│   ├── Footer.tsx              # Footer with newsletter + socials
│   ├── SparklineChart.tsx      # SVG sparkline chart (used in Hero)
│   ├── ThemeProvider.tsx       # Dark/light mode context
│   └── icons/
│       └── index.tsx           # GitHubIcon, XIcon
└── lib/
    ├── blog.ts                 # Blog post data + getPost / getFeaturedPost helpers
    ├── changelog.ts            # Changelog entries
    └── docs.ts                 # Docs sidebar navigation structure

Customization

Brand name and logo

The template uses "Synthr" as the product name. Do a global find-and-replace for Synthr across all files in src/ to swap in your product name. The logo mark is the letter S in a rounded square — update it in Navbar.tsx, Footer.tsx, and the auth pages.

Colors and theme tokens

All colors are CSS custom properties in src/app/globals.css. The template ships with a cyan primary color. To change it, update --primary in both :root (light) and .dark blocks:

.dark {
  --primary: #22d3ee;        /* cyan-400 — change to your brand color */
  --primary-hover: #06b6d4;  /* slightly darker shade for hover */
}

:root {
  --primary: #0891b2;        /* darker for light mode readability */
  --primary-hover: #0e7490;
}

All glow effects and opacity variants use color-mix(in srgb, var(--primary) N%, transparent) so they automatically adapt to whatever primary color you set.

Fonts

Three fonts are loaded in app/layout.tsx via next/font/google:

Syne — headings (--font-heading, geometric sans)
DM Sans — body text (--font-body)
JetBrains Mono — code and mono labels (--font-mono)

Pricing tiers

Pricing data is defined in the plans array at the top of src/components/Pricing.tsx. Each plan has name, monthlyPrice, yearlyPrice, description, features, and cta fields.

Blog and changelog content

Blog posts are defined in src/lib/blog.ts as a typed array. Each post has sections with types h2, h3, p, code, ul, and callout. Changelog entries live in src/lib/changelog.ts with a ChangeType of new | improved | fixed | deprecated.

Deployment

Deploy to Vercel (recommended)

Push to GitHub, then import at vercel.com/new. The template has no environment variables required and no server-side data fetching - it builds fully static.

Static export (Netlify, Cloudflare Pages, GitHub Pages)

Since the template has no server-side logic, it supports full static export. Add to next.config.ts:

const nextConfig: NextConfig = {
  output: "export",
};

Run pnpm build and deploy the out/ folder.

Deploy to Railway / Render

Build command:  pnpm build
Start command:  pnpm start
Node version:   18+

Environment variables

No environment variables are required out of the box. When you add real auth (Clerk, NextAuth, etc.) or a CMS for blog content, create a .env.local file locally and mirror the keys in your hosting provider.

Still stuck?

Email us at support@thekitbase.app with your order number and we'll help you get set up.