pricing-page-saas
rendered
the brief, redacted

Build a complete three-tier pricing page as one self-contained HTML document. Tests layout, typographic hierarchy, and restraint under a familiar brief.

504 chars · 76 words · fingerprint a8a380793653

raw output — byte exact

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing — DevPulse Platform</title>
  <style>
    :root {
      --bg: #0b0f17;
      --card-bg: #111827;
      --card-border: #1f293d;
      --card-hover-border: #374151;
      
      --pro-bg: #131b2e;
      --pro-border: #3b82f6;
      --pro-glow: rgba(59, 130, 246, 0.15);
      
      --text-primary: #f9fafb;
      --text-secondary: #9ca3af;
      --text-muted: #6b7280;
      
      --accent: #3b82f6;
      --accent-hover: #2563eb;
      --accent-light: #60a5fa;
      
      --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      
      --radius-lg: 16px;
      --radius-md: 8px;
      --radius-sm: 4px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--bg);
      color: var(--text-primary);
      font-family: var(--font-sans);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      padding: 40px 20px 80px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Header */
    .header {
      text-align: center;
      margin-bottom: 48px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 0.875rem;
      color: var(--accent-light);
      background: rgba(59, 130, 246, 0.1);
      border: 1px solid rgba(59, 130, 246, 0.2);
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 20px;
    }

    .brand-dot {
      width: 6px;
      height: 6px;
      background-color: var(--accent-light);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--accent-light);
    }

    h1 {
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.15;
      margin-bottom: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #94a3b8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .subtitle {
      font-size: 1.125rem;
      color: var(--text-secondary);
      max-width: 580px;
      margin: 0 auto 36px;
    }

    /* Toggle Switch */
    .toggle-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      padding: 6px;
      border-radius: 30px;
      width: fit-content;
      margin: 0 auto;
    }

    .toggle-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-family: var(--font-sans);
      font-size: 0.875rem;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .toggle-btn.active {
      background: #1f293d;
      color: var(--text-primary);
    }

    .discount-pill {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: #10b981;
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid rgba(16, 185, 129, 0.2);
      padding: 2px 8px;
      border-radius: 12px;
      margin-left: 4px;
    }

    /* Grid Layout */
    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: center;
      margin-bottom: 64px;
    }

    @media (min-width: 900px) {
      .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
    }

    /* Cards */
    .card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: transform 0.2s ease, border-color 0.2s ease;
      height: 100%;
    }

    .card:hover {
      border-color: var(--card-hover-border);
    }

    /* Middle Tier Emphasis (Pro) */
    .card.pro {
      background: var(--pro-bg);
      border-color: var(--pro-border);
      box-shadow: 0 0 32px var(--pro-glow);
      position: relative;
      overflow: hidden;
    }

    /* Accent line across top of Pro card */
    .card.pro::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6, #60a5fa);
    }

    @media (min-width: 900px) {
      .card.pro {
        transform: scale(1.04);
        z-index: 2;
      }
      .card.pro:hover {
        transform: scale(1.05);
      }
    }

    .card-header {
      margin-bottom: 20px;
    }

    .tier-name {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .tier-positioning {
      font-size: 0.875rem;
      color: var(--text-secondary);
      min-height: 40px;
      line-height: 1.4;
    }

    /* Pricing Display */
    .price-container {
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--card-border);
    }

    .card.pro .price-container {
      border-bottom-color: rgba(59, 130, 246, 0.2);
    }

    .price-wrapper {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .currency {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .amount {
      font-size: 3rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .period {
      font-size: 0.875rem;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }

    .billing-note {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 6px;
      height: 18px;
    }

    /* Buttons */
    .cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 12px 20px;
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.9375rem;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid transparent;
      margin-bottom: 28px;
    }

    .btn-secondary {
      background: #1f293d;
      color: var(--text-primary);
      border-color: rgba(255, 255, 255, 0.05);
    }

    .btn-secondary:hover {
      background: #2d3b55;
      color: #ffffff;
    }

    .btn-primary {
      background: var(--accent);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
    }

    .btn-primary:hover {
      background: var(--accent-hover);
      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }

    /* Feature List */
    .features-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: auto;
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    .feature-item strong {
      color: var(--text-primary);
    }

    .check-icon {
      width: 18px;
      height: 18px;
      stroke: var(--accent-light);
      stroke-width: 2.5;
      fill: none;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .card.pro .check-icon {
      stroke: #60a5fa;
    }

    /* Comparison / Extra Specs Section */
    .specs-section {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: var(--radius-lg);
      padding: 32px;
      margin-top: 20px;
    }

    .specs-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 24px;
      text-align: center;
    }

    .specs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
    }

    .spec-box {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid var(--card-border);
      padding: 16px;
      border-radius: var(--radius-md);
    }

    .spec-label {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
    }

    .spec-value {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    /* Footer / Support */
    .footer-note {
      text-align: center;
      margin-top: 40px;
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .footer-note a {
      color: var(--accent-light);
      text-decoration: none;
    }

    .footer-note a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

  <div class="container">
    
    <!-- Header -->
    <header class="header">
      <div class="brand">
        <span class="brand-dot"></span>
        <span>DEV PULSE // PLATFORM</span>
      </div>
      <h1>Predictable pricing for developers</h1>
      <p class="subtitle">Deploy in seconds. Scale seamlessly. Start for free and upgrade as your infrastructure demands grow.</p>
      
      <!-- Billing Switch Toggle -->
      <div class="toggle-container" role="radiogroup" aria-label="Billing frequency">
        <button type="button" class="toggle-btn active" id="btn-monthly" onclick="setBilling('monthly')">Monthly billing</button>
        <button type="button" class="toggle-btn" id="btn-annually" onclick="setBilling('annually')">
          Annual billing <span class="discount-pill">20% OFF</span>
        </button>
      </div>
    </header>

    <!-- Pricing Cards Grid -->
    <div class="pricing-grid">
      
      <!-- TIER 1: HOBBY -->
      <div class="card">
        <div class="card-header">
          <div class="tier-name">Hobby</div>
          <div class="tier-positioning">For personal projects, quick prototypes, and side experiments.</div>
        </div>
        
        <div class="price-container">
          <div class="price-wrapper">
            <span class="currency">$</span>
            <span class="amount" id="price-hobby">0</span>
            <span class="period">/mo</span>
          </div>
          <div class="billing-note" id="note-hobby">Free forever</div>
        </div>

        <a href="#start-hobby" class="cta-btn btn-secondary">Get Started Free</a>

        <ul class="features-list">
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>1</strong> concurrent build container</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>10 GB</strong> Edge Bandwidth / mo</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>1</strong> custom domain</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Automatic SSL certificates</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>1-day deployment log retention</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Community Discord support</span>
          </li>
        </ul>
      </div>

      <!-- TIER 2: PRO (Visually Emphasized) -->
      <div class="card pro">
        <div class="card-header">
          <div class="tier-name">
            <span>Pro</span>
          </div>
          <div class="tier-positioning">For active developers and indie hackers running production apps.</div>
        </div>
        
        <div class="price-container">
          <div class="price-wrapper">
            <span class="currency">$</span>
            <span class="amount" id="price-pro">20</span>
            <span class="period">/mo</span>
          </div>
          <div class="billing-note" id="note-pro">Billed monthly</div>
        </div>

        <a href="#start-pro" class="cta-btn btn-primary">Start 14-Day Trial</a>

        <ul class="features-list">
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>10</strong> concurrent build containers</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>250 GB</strong> Edge Bandwidth / mo</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>Unlimited</strong> custom domains & wildcards</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Preview environments for Git PRs</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>30-day</strong> deployment log & metric retention</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Automated DB branch sync</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Priority email & ticket support</span>
          </li>
        </ul>
      </div>

      <!-- TIER 3: TEAM -->
      <div class="card">
        <div class="card-header">
          <div class="tier-name">Team</div>
          <div class="tier-positioning">For growing engineering organizations requiring collaboration and security.</div>
        </div>
        
        <div class="price-container">
          <div class="price-wrapper">
            <span class="currency">$</span>
            <span class="amount" id="price-team">60</span>
            <span class="period">/seat/mo</span>
          </div>
          <div class="billing-note" id="note-team">Billed monthly per member</div>
        </div>

        <a href="#start-team" class="cta-btn btn-secondary">Create Team Workspace</a>

        <ul class="features-list">
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>Unlimited</strong> concurrent builds</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>2 TB</strong> Edge Bandwidth / mo</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>SAML SSO, Enforced MFA & RBAC</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>Isolated build pipelines</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span><strong>1-year</strong> audit log retention</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>SOC2 Type II & ISO compliance</span>
          </li>
          <li class="feature-item">
            <svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
            <span>24/7 SLA & Dedicated Engineer</span>
          </li>
        </ul>
      </div>

    </div>

    <!-- Infrastructure Specs Matrix -->
    <div class="specs-section">
      <div class="specs-title">Core Infrastructure Specifications</div>
      <div class="specs-grid">
        <div class="spec-box">
          <div class="spec-label">Global Edge Locations</div>
          <div class="spec-value">31 Regions with Anycast IP</div>
        </div>
        <div class="spec-box">
          <div class="spec-label">HTTP/3 & IPv6</div>
          <div class="spec-value">Enabled by default</div>
        </div>
        <div class="spec-box">
          <div class="spec-label">DDoS Mitigation</div>
          <div class="spec-value">L3/L4/L7 Protection Included</div>
        </div>
        <div class="spec-box">
          <div class="spec-label">Uptime SLA</div>
          <div class="spec-value">99.99% Guaranteed for Team</div>
        </div>
      </div>
    </div>

    <!-- Footer / FAQ Link -->
    <div class="footer-note">
      Need custom enterprise contracts or VPC peering? <a href="#enterprise">Contact our Sales Engineering team &rarr;</a>
    </div>

  </div>

  <script>
    function setBilling(mode) {
      const btnMonthly = document.getElementById('btn-monthly');
      const btnAnnually = document.getElementById('btn-annually');
      
      const pricePro = document.getElementById('price-pro');
      const priceTeam = document.getElementById('price-team');
      
      const notePro = document.getElementById('note-pro');
      const noteTeam = document.getElementById('note-team');

      if (mode === 'annually') {
        btnMonthly.classList.remove('active');
        btnAnnually.classList.add('active');

        // 20% discount applied: Pro $20 -> $16, Team $60 -> $48
        pricePro.textContent = '16';
        priceTeam.textContent = '48';

        notePro.textContent = 'Billed annually ($192/yr)';
        noteTeam.textContent = 'Billed annually ($576/seat/yr)';
      } else {
        btnAnnually.classList.remove('active');
        btnMonthly.classList.add('active');

        pricePro.textContent = '20';
        priceTeam.textContent = '60';

        notePro.textContent = 'Billed monthly';
        noteTeam.textContent = 'Billed monthly per member';
      }
    }
  </script>
</body>
</html>

request envelope — prompt redacted

{
  "model": "google/gemini-3.6-flash",
  "system": "Respond with a single complete, self-contained HTML document and nothing else. No markdown fences, no explanation. Inline all CSS and JavaScript. Do not reference any external resource — no CDN scripts, no external stylesheets, no remote fonts or images. The document must render correctly offline.",
  "messages": [
    {
      "role": "user",
      "content": "«REDACTED — 81 words, 504 chars»"
    }
  ],
  "maxOutputTokens": 32000,
  "gatewayStringId": "9e39b87d-ae31-440f-8c37-8afce7ef7aba"
}