UI01 — AI SaaS Landing

A visually exceptional AI SaaS landing page template built with Next.js, Tailwind CSS v4, and Motion.

Scope: This is a frontend-only static export UI kit. It does not include a backend, database, authentication, or API. Dashboard and auth pages are static demo UI for visual reference.

Before publishing: This kit ships with realistic demo content (blog posts, testimonials, legal text, company copy). Replace all demo content with your own before going live. See CUSTOMIZATION.md for a full checklist.

Features

• Static export — deploy anywhere (Vercel, Netlify, S3, GitHub Pages)
• Dark-first design — OKLCH colour system with light mode toggle
• Smooth scroll — Lenis-powered with hardware-accelerated rendering
• Motion — viewport-triggered entrance animations, spring micro-interactions
• WebGL background — GPU-accelerated light droplets scene with reduced-motion fallback
• Accessible — Built with accessibility in mind: skip link, keyboard navigation, focus trapping, prefers-reduced-motion respected
• Performance — Performance-optimised static export with code splitting and lazy-loaded WebGL

Pages

Marketing (14)

Dashboard (11)

Auth (3): /login, /register, /forgot-password Legal & compliance (6): /privacy, /terms, /cookie-policy, /accessibility, /dmca, /do-not-sell Static metadata (3): /icon.svg, /robots.txt, /sitemap.xml Framework error files (5, not standalone route rows): Root 404, root error, global error, dashboard 404, dashboard error

Total: 34 unique routes — 14 marketing + 11 dashboard + 3 auth + 6 legal. Plus 7 ready-to-customise blog post placeholders via /blog/[slug] (single template, content from src/lib/blog-data.ts), 3 static metadata files, and 5 framework error files. The Next.js build produces 45 prerendered HTML files in total when each blog slug is counted individually.

Tech Stack

Quick Start

The path below is the exact flow we use internally to validate each release — it takes a fresh extract to a previewable static build in under five minutes on a machine that already has Node 20+ and pnpm.

# 1. Bootstrap pnpm if you don't already have it. The kit pins
#    `packageManager` in package.json so Corepack picks the right version.
corepack enable

# 2. Copy the env template (all vars optional, kit builds without them)
cp .env.example .env.local

# Note: Review licence.json. The placeholder key prints a warning during
#    `pnpm build` / `pnpm dev`, but it does not block local evaluation.

# 3. Install dependencies (pnpm 10+ — Corepack provisions on first invocation)
pnpm install

# 4. Verify the static export builds clean
pnpm build

# 5. Start the dev server at http://localhost:3000
pnpm dev

If corepack enable fails in your environment, see INSTALLATION.md for the official standalone pnpm installer path.

Verify a production build

Before deploying, confirm the full static export works end-to-end:

pnpm typecheck        # strict TypeScript — must pass with zero errors
pnpm lint             # ESLint — must pass with zero errors
pnpm build            # static export → /out (45 prerendered pages)
pnpm preview          # optional: serve the built /out locally

Environment Variables

Copy .env.example to .env.local. All variables are optional — the template renders and builds without them.

Deployment

The /out directory is a fully static site. Deploy by uploading to any static host.

Vercel (recommended):

vercel --prod

Set the output directory to out in your Vercel project settings.

Licence Setup

A licence.json file is included in the project root. Open it and replace the placeholder with your key:

{ "key": "TE-XXXX-XXXX-XXXX", "domain": "yourdomain.com" }

Your licence key is in your account at templateempire.io/account.

pnpm dev and pnpm build check that licence.json exists and warn if the placeholder key is still present. Remote licence validation is opt-in so clean builds do not require Template Empire network access:

TE_VALIDATE_LICENCE_REMOTE=1 pnpm build

Windows PowerShell:

$env:TE_VALIDATE_LICENCE_REMOTE = "1"; pnpm build

Windows cmd:

set TE_VALIDATE_LICENCE_REMOTE=1 && pnpm build

Once you have filled in your real key, add licence.json to your own .gitignore so it is not committed to your repository.

Customisation

See CUSTOMIZATION.md for the full rebrand workflow. Quick summary: edit the accent tokens in globals.css, then follow the 3-file manual checklist (src/lib/tokens.ts, src/app/icon.svg, src/app/global-error.tsx) — .brand-glow-* shadows and the rest of the brand surfaces are covered by CSS tokens.