SaaS landing page built in one day

CSS dashboard preview

A fully rendered analytics dashboard built with pure CSS and SVG. Bar charts, donut charts, stat cards, and data tables. No images, no screenshots. Lightweight and responsive.

Conversion-optimized pricing

Three-tier pricing grid with highlighted recommended plan, feature checklists, and clear CTAs. The layout guides visitors toward the right tier without overwhelming them.

Theme-aware design

The entire page adapts to light and dark mode automatically. Every color, border, and background uses semantic tokens. Zero hardcoded values.

# SaaS Landing Page

## What to build
A conversion-focused landing page for a B2B SaaS product.

## Sections
1. **Hero**: product name, headline, subtitle, two CTAs (primary + secondary), a visual preview of the product (built with CSS/SVG, not screenshots)
2. **Social proof bar**: "Trusted by X teams" with 6 company name placeholders
3. **Features**: 3 cards with icons, titles, and descriptions
4. **Metrics strip**: 3 large numbers (uptime, latency, scale) on a contrasting background
5. **Pricing**: 3 tiers (Starter, Pro, Enterprise) with feature checklists, one tier highlighted as recommended
6. **CTA**: email capture with a single input and button
7. **Footer**: product name, attribution

## Design requirements
- Responsive (mobile, tablet, desktop)
- Light/dark mode support via CSS custom properties
- Clean, confident, data-focused aesthetic
- Accent color used sparingly for CTAs and highlights
- Self-hosted variable font (or system font stack)

Build a production-grade SaaS landing page for a fictional B2B analytics product called "Pulse." Single page, self-contained, no external dependencies beyond the framework.

Sections: sticky nav, hero with CSS-rendered dashboard preview (bar charts, stat cards, donut chart built with divs and SVG, not images), social proof bar with 6 company names, 3 feature cards with SVG icons, metrics strip with 3 large numbers on a dark background, 3-tier pricing grid (Starter $29/mo, Pro $79/mo highlighted, Enterprise custom) with feature checklists, email capture CTA, minimal footer.

Use semantic color tokens for light/dark mode. Accent color for CTAs only. Typography: 350 weight for body, 450 for headings. The dashboard preview in the hero is the centerpiece and should look like a real analytics UI, not a placeholder.