Dark SaaS Landing

# Dark SaaS Landing Page

Create a modern, tech-forward landing page with a dark theme, gradient accents, and glowing call-to-action buttons that feel premium and cutting-edge.

## Design Specifications

**Style**: Dark mode SaaS / Tech startup
**Typography**: Clean sans-serif, bold headlines, gradient text effects
**Layout**: Centered hero, feature grids, pricing tables
**Colors**: Deep blacks with cyan-to-purple gradient accents

## Prompt for AI Code Generation

```
Build a dark SaaS landing page with these characteristics:

LAYOUT:
- Full-width sections with max-width containers (1280px)
- Centered hero with headline, subtext, and dual CTAs
- Feature grid (2-3 columns)
- Pricing comparison section
- Stats bar with key metrics

TYPOGRAPHY:
- Headlines: 48-72px, font-weight 700, white or gradient text
- Body: 16-18px, text-gray-400
- Gradient text: bg-clip-text with cyan-to-purple gradient
- Font stack: Inter, system-ui, sans-serif

COLORS:
- Background: #0a0a0a (deep black)
- Surface: #111111, #1a1a1a (card backgrounds)
- Text: white for headlines, gray-400 for body
- Gradient accent: from-cyan-400 via-purple-400 to-pink-400
- Glow effects: cyan-500/40, purple-500/20

INTERACTIONS:
- CTA buttons with box-shadow glow on hover
- Subtle scale(1.05) on button hover
- Cards with border-white/10, hover:border-white/20
- Smooth 300ms transitions

SECTIONS TO INCLUDE:
1. Navigation with logo and sign-in/get started buttons
2. Hero with gradient headline, beta badge, code preview
3. Trusted by logos section
4. Features grid with icon cards
5. Stats bar (uptime, latency, requests, customers)
6. Pricing with monthly/yearly toggle
7. Final CTA section
8. Footer with multi-column links

TECHNICAL:
- Dot pattern background (radial-gradient)
- Gradient orbs for ambient lighting (blur-[100px])
- Use rgba for transparency effects
- Glowing button: box-shadow with colored blur
```

## Example React Component Structure

```tsx
export default function DarkSaasLanding() {
  return (
    <div className="min-h-screen w-full bg-[#0a0a0a] text-white">
      {/* Background effects */}
      <div
        className="fixed inset-0 opacity-[0.03]"
        style={{
          backgroundImage: 'radial-gradient(circle, white 1px, transparent 0)',
          backgroundSize: '40px 40px',
        }}
      />
      <div className="fixed top-0 left-1/4 h-[600px] w-[600px] bg-cyan-500/20 blur-[120px]" />

      {/* Hero */}
      <section className="relative z-10 px-6 pt-24 pb-32 text-center">
        <h1 className="text-5xl font-bold md:text-7xl">
          Build faster with{' '}
          <span className="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
            AI-powered
          </span>{' '}
          infrastructure
        </h1>
        <button
          className="mt-8 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-8 py-4"
          style={{ boxShadow: '0 0 30px rgba(6, 182, 212, 0.4)' }}
        >
          Start building
        </button>
      </section>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-text: #ffffff;
  --color-text-muted: #9ca3af;
  --color-cyan: #06b6d4;
  --color-purple: #a855f7;
  --glow-cyan: 0 0 30px rgba(6, 182, 212, 0.4);
  --glow-purple: 0 0 60px rgba(168, 85, 247, 0.2);
}
```

## Key Principles

1. **Deep contrast**: Use true blacks with bright accent colors
2. **Ambient lighting**: Gradient orbs create depth and atmosphere
3. **Glowing CTAs**: Primary buttons should have visible glow effects
4. **Trust signals**: Stats, logos, and social proof throughout
5. **Tech aesthetic**: Code snippets, terminal-style elements