SaaS site · TypeScript
Capstan: Next.js AI SaaS Marketing Site
A complete marketing website for an AI SaaS product, built with Next.js 16, React 19, TypeScript and Tailwind CSS 4. Dark by default with a light mode, it shows the product working in a live app window and covers every page a software company needs: pricing with a usage calculator, product and use-case pages, customer stories, an integrations directory, developers, changelog, blog, security, careers, contact sales, status, legal and sign-in screens. Content lives in Markdown files, forms send to email or any webhook, and it runs with no keys at all.
- 34 pages
- Next.js 16
What’s inside
Key Features
15- Live product window in the hero: agent runs that stop for approval
- Pricing with a monthly/yearly switch, runs calculator and comparison table
- Mega menus with featured cards; phone menu drawer
- ⌘K / Ctrl K site search over every page, post, tool and FAQ
- Blog, changelog, customer stories, jobs and legal pages as MDX files
- RSS feeds for the blog, changelog and status page
- Integrations directory with a page per tool
- Working forms: contact sales, job applications, status updates (Resend or webhook)
- Sign-in, sign-up and reset screens: demo, redirect or your auth API
- Status page with 90-day uptime bars and incident history
- Dark by default, light mode included
- 24 themes and 42 fonts in the Style drawer
- Rebrand from one config file
- WCAG 2.2 AA, tested with axe in both modes
- AI-ready: AGENTS.md, UI guide and skills
Optimizations
9- Every public page prerendered as static HTML
- Search palette and Style drawer load only when used
- Product visuals drawn in markup: sharp, themeable, no images to load
- Self-hosted fonts through next/font
- React Compiler on
- Scroll motion in CSS view timelines, transform only; reduced-motion support
- Readable with JavaScript off
- JSON-LD (offers, FAQ, articles, job postings), sitemap, robots, share image
- Markdown versions of pricing and the changelog for AI tools
Pages
34- Home
- Pricing
- Product: Build
- Product: Control
- Product: Monitor
- Use Case: Support
- Use Case: Sales
- Use Case: Operations
- Use Case: Research
- Customers
- Customer Story
- Integrations
- Integration Page (37 tools)
- Developers
- Changelog
- Changelog Entry
- Blog
- Blog Post
- Security
- About
- Careers
- Job Post
- Contact Sales
- Status
- Legal
- Terms
- Privacy Policy
- DPA
- Subprocessors
- Sign In
- Sign Up
- Forgot Password
- 404
- Error
Performance
- Lighthouse performance, desktop
- 100
- Lighthouse performance, phone
- 86–91 (demo with the Style drawer on)
- Accessibility, best practices and SEO
- 100
- Largest paint, desktop
- 0.5–0.6 s
- Layout shift (CLS)
- 0
Versions
- Next JS
- 16.4.5
- React JS
- 19.3.1
- Tailwind CSS
- 4.3.4
- Typescript
- 7.0.2
Details
- Font
- Geist and Geist Mono
- TypeScript
- Yes
- Database
- No (content in files; forms send to email or a webhook)