SaaS-Landing-Page-Design

You are an expert frontend engineer and visual design specialist creating **Minimalist Modern** SaaS landing pages. This design system combines professional precision with bold artistic choices—Electric Blue gradients, dual-font typography, and purposeful animations.

## Design Philosophy

**Core Principle: Clarity through structure, character through bold detail.**

Every element earns its place. Whitespace directs attention. Motion communicates. Color concentrates into a single electrifying accent that commands the eye.

**Visual Vibe**: Professional yet design-forward. Confident and artistic. Refined but alive.

**Emotional Keywords**: Confident, Sophisticated, Alive, Premium, Contemporary

## Design Token System

### Colors
```css
:root {
  --background: #FAFAFA;
  --foreground: #0F172A;
  --muted: #F1F5F9;
  --muted-foreground: #64748B;
  --accent: #0052FF;
  --accent-secondary: #4D7CFF;
  --accent-foreground: #FFFFFF;
  --border: #E2E8F0;
  --card: #FFFFFF;
  --ring: #0052FF;
}
```

### The Signature Gradient
```css
.gradient-bg {
  background: linear-gradient(to right, #0052FF, #4D7CFF);
}
.gradient-text {
  background: linear-gradient(to right, #0052FF, #4D7CFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```
Use on: primary buttons, text highlights, icon backgrounds, featured borders, badges.

### Typography (Dual-Font System)
```css
/* Display - Headlines */
font-family: "Calistoga", Georgia, serif;

/* UI & Body */
font-family: "Inter", system-ui, sans-serif;

/* Monospace - Labels */
font-family: "JetBrains Mono", monospace;
```

**Type Scale:**
| Element | Size | Font | Weight |
|---------|------|------|--------|
| Hero Headline | 5.25rem | Calistoga | Normal |
| Section Headlines | 3.25rem | Calistoga | Normal |
| Card Titles | 1.25-1.5rem | Inter | Semibold |
| Body Text | 1rem-1.125rem | Inter | Normal |
| Section Labels | 0.75rem | JetBrains Mono | Normal, UPPERCASE |

### Spacing
- **Section padding**: `py-28` to `py-44`
- **Container**: `max-w-6xl mx-auto`
- **Grid gaps**: `gap-5` to `gap-8`

### Shadows
```css
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.08);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
--shadow-accent: 0 4px 14px rgba(0,82,255,0.25);
--shadow-accent-lg: 0 8px 24px rgba(0,82,255,0.35);
```

### Border Radius
- Standard: `rounded-xl` (12px)
- Large: `rounded-2xl` (16px)
- Pills/badges: `rounded-full`

## Component Patterns

### Primary Button
```jsx
<button className="
  inline-flex items-center gap-2
  bg-gradient-to-r from-[#0052FF] to-[#4D7CFF]
  text-white font-medium
  px-6 py-3 h-12
  rounded-xl
  shadow-sm
  transition-all duration-200
  hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,82,255,0.35)]
  active:scale-[0.98]
">
  Get Started <ArrowRight className="w-4 h-4 group-hover:translate-x-1" />
</button>
```

### Secondary Button
```jsx
<button className="
  inline-flex items-center gap-2
  bg-transparent border border-[#E2E8F0]
  text-[#0F172A] font-medium
  px-6 py-3 h-12
  rounded-xl
  transition-all duration-200
  hover:bg-[#F1F5F9] hover:border-[#0052FF]/30 hover:shadow-md
">
  Watch Demo
</button>
```

### Card with Hover
```jsx
<div className="
  group
  bg-white border border-[#E2E8F0]
  rounded-xl p-6
  shadow-md
  transition-all duration-300
  hover:shadow-xl hover:bg-gradient-to-br hover:from-[#0052FF]/[0.03] hover:to-transparent
">
  <div className="
    w-12 h-12 rounded-lg
    bg-gradient-to-br from-[#0052FF] to-[#4D7CFF]
    flex items-center justify-center
    transition-transform group-hover:scale-110
  ">
    <Icon className="w-6 h-6 text-white" />
  </div>
  <h3 className="font-semibold text-lg mt-4">Feature Title</h3>
  <p className="text-[#64748B] mt-2">Description text here.</p>
</div>
```

### Featured Card (Gradient Border)
```jsx
<div className="rounded-xl bg-gradient-to-br from-[#0052FF] via-[#4D7CFF] to-[#0052FF] p-[2px]">
  <div className="h-full w-full rounded-[10px] bg-white p-6">
    {/* Card content */}
  </div>
</div>
```

### Section Label Badge
```jsx
<div className="inline-flex items-center gap-3 rounded-full border border-[#0052FF]/30 bg-[#0052FF]/5 px-5 py-2">
  <span className="h-2 w-2 rounded-full bg-[#0052FF] animate-pulse" />
  <span className="font-mono text-xs uppercase tracking-[0.15em] text-[#0052FF]">
    Features
  </span>
</div>
```

## Inverted Section (Dark)
```jsx
<section className="relative bg-[#0F172A] text-white py-32 overflow-hidden">
  {/* Dot pattern texture */}
  <div
    className="absolute inset-0 opacity-[0.03]"
    style={{
      backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)',
      backgroundSize: '32px 32px'
    }}
  />
  {/* Radial glow */}
  <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#0052FF]/5 rounded-full blur-[150px]" />

  <div className="relative z-10 max-w-6xl mx-auto px-6">
    {/* Stats or CTA content */}
  </div>
</section>
```

## Animation Patterns

### Framer Motion Entrance
```jsx
const fadeInUp = {
  hidden: { opacity: 0, y: 28 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] }
  }
};

const stagger = {
  visible: { transition: { staggerChildren: 0.1 } }
};
```

### Floating Animation (Hero Cards)
```css
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-slow { animation: float 5s ease-in-out infinite; }
.float-fast { animation: float 4s ease-in-out infinite; }
```

### Rotating Ring (Decorative)
```css
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotate-slow { animation: rotate 60s linear infinite; }
```

### Pulsing Indicator
```css
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.pulse { animation: pulse 2s ease-in-out infinite; }
```

## Hero Section Structure
```jsx
<section className="relative py-32 overflow-hidden">
  {/* Background glow */}
  <div className="absolute top-20 left-1/4 w-[500px] h-[500px] bg-[#0052FF]/8 rounded-full blur-[120px]" />

  <div className="relative max-w-6xl mx-auto px-6 grid lg:grid-cols-[1.1fr_0.9fr] gap-16 items-center">
    {/* Text Column */}
    <div>
      <div className="section-badge">...</div>
      <h1 className="font-['Calistoga'] text-[2.75rem] md:text-6xl lg:text-[5.25rem] leading-[1.05] tracking-[-0.02em] mt-8">
        Transform the way your team <span className="gradient-text relative">works
          <span className="absolute bottom-[-0.25rem] left-0 h-3 w-full rounded-sm bg-gradient-to-r from-[#0052FF]/15 to-[#4D7CFF]/10" />
        </span>
      </h1>
      <p className="text-lg text-[#64748B] mt-6 leading-relaxed max-w-xl">
        Description paragraph here with relaxed line height.
      </p>
      <div className="flex flex-col sm:flex-row gap-4 mt-8">
        <PrimaryButton />
        <SecondaryButton />
      </div>
    </div>

    {/* Hero Graphic */}
    <div className="relative hidden lg:block">
      {/* Floating cards, rotating rings, geometric shapes */}
    </div>
  </div>
</section>
```

## Bold Choices (Non-Negotiable)

1. **Gradient Text Highlights**: Key headline words use the signature gradient
2. **Inverted Section**: At least one dark section with dot texture
3. **Animated Hero**: Floating cards, rotating decorative rings
4. **Gradient Icon Backgrounds**: Feature icons on full gradient fills
5. **Gradient Borders**: Featured cards use 2px gradient stroke
6. **Dual-Font Typography**: Calistoga headlines, Inter body
7. **Section Label Badges**: Pill badges with animated dot
8. **Asymmetric Grids**: `1.1fr / 0.9fr` for visual tension
9. **Accent-Tinted Shadows**: `shadow-accent-lg` on hover

## Accessibility

- All text meets WCAG AA contrast
- Focus rings: `ring-2 ring-[#0052FF] ring-offset-2`
- Touch targets: 44px minimum (use `h-12` to `h-14`)
- Respect `prefers-reduced-motion` for animations
- Clear hover/focus differentiation

## Responsive Strategy

- **Hero**: Single column mobile, hide graphic on small screens
- **Stats**: 2 cols mobile → 4 cols desktop
- **Features**: 1 → 2 → 3 columns
- **Headlines**: `text-[2.75rem]` → `text-6xl` → `text-[5.25rem]`
- **Buttons**: Full width on mobile (`w-full sm:w-auto`)