website/.superpowers/brainstorm/752312-1773515533/pricing-cards.html

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<style>
  * { font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; }
  .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .plan-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .plan-price { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
  .plan-period { font-size: 13px; opacity: 0.4; font-weight: 400; }
  .plan-desc { font-size: 13px; opacity: 0.5; margin: 8px 0 16px; line-height: 1.5; }
  .plan-features { list-style: none; padding: 0; margin: 0 0 20px; }
  .plan-features li { font-size: 13px; padding: 6px 0; display: flex; align-items: center; gap: 8px; opacity: 0.7; }
  .plan-features li::before { content: '✓'; color: #3b82f6; font-weight: 700; font-size: 12px; }
  .plan-btn { display: block; width: 100%; padding: 10px; border-radius: 8px; text-align: center; font-weight: 600; font-size: 14px; border: none; cursor: pointer; }
  .plan-btn-primary { background: #3b82f6; color: white; }
  .plan-btn-outline { background: transparent; color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
  .badge-popular { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
</style>

<h2>Pricing Card Styles</h2>
<p class="subtitle">Click the card style that fits EZSCALE best</p>

<div style="display:flex;flex-direction:column;gap:40px;margin-top:24px;">

  <!-- Style A: Bordered with Hover -->
  <div class="card" data-choice="bordered" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">A</span> <strong>Bordered Cards + Hover Lift</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Hetzner / Vultr style</span></div>
    <div style="padding:20px;background:#0a0a0f;">
      <div class="plan-grid">
        <!-- Starter -->
        <div style="border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:24px;transition:all 0.2s;">
          <div class="plan-name">Starter</div>
          <div class="plan-price">$4.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">Perfect for small projects and development environments.</div>
          <ul class="plan-features">
            <li>1 vCPU Core</li>
            <li>2 GB RAM</li>
            <li>40 GB NVMe SSD</li>
            <li>2 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-outline">Get Started</button>
        </div>
        <!-- Pro (featured) -->
        <div style="border:2px solid rgba(59,130,246,0.5);border-radius:12px;padding:24px;position:relative;box-shadow:0 0 30px rgba(59,130,246,0.1);">
          <span class="badge-popular" style="background:rgba(59,130,246,0.15);color:#60a5fa;">Most Popular</span>
          <div class="plan-name">Professional</div>
          <div class="plan-price">$12.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">Ideal for growing applications and production workloads.</div>
          <ul class="plan-features">
            <li>4 vCPU Cores</li>
            <li>8 GB RAM</li>
            <li>160 GB NVMe SSD</li>
            <li>5 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-primary">Get Started</button>
        </div>
        <!-- Enterprise -->
        <div style="border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:24px;">
          <div class="plan-name">Enterprise</div>
          <div class="plan-price">$44.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">For high-traffic applications demanding maximum performance.</div>
          <ul class="plan-features">
            <li>8 vCPU Cores</li>
            <li>32 GB RAM</li>
            <li>400 GB NVMe SSD</li>
            <li>10 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-outline">Get Started</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Style B: Glass Morphism -->
  <div class="card" data-choice="glass" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">B</span> <strong>Glass Morphism Cards</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Modern, premium feel</span></div>
    <div style="padding:20px;background:#0a0a0f;position:relative;overflow:hidden;">
      <!-- Background blobs -->
      <div style="position:absolute;top:-40px;left:20%;width:200px;height:200px;background:radial-gradient(circle,rgba(59,130,246,0.12),transparent 70%);"></div>
      <div style="position:absolute;bottom:-40px;right:20%;width:200px;height:200px;background:radial-gradient(circle,rgba(168,85,247,0.08),transparent 70%);"></div>
      <div class="plan-grid" style="position:relative;z-index:1;">
        <!-- Starter -->
        <div style="background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:24px;">
          <div class="plan-name">Starter</div>
          <div class="plan-price">$4.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">Perfect for small projects and development environments.</div>
          <ul class="plan-features">
            <li>1 vCPU Core</li>
            <li>2 GB RAM</li>
            <li>40 GB NVMe SSD</li>
            <li>2 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-outline" style="border-radius:12px;">Get Started</button>
        </div>
        <!-- Pro (featured) -->
        <div style="background:rgba(59,130,246,0.06);backdrop-filter:blur(20px);border:1px solid rgba(59,130,246,0.15);border-radius:16px;padding:24px;box-shadow:0 8px 32px rgba(59,130,246,0.08);">
          <span class="badge-popular" style="background:rgba(59,130,246,0.2);color:#60a5fa;backdrop-filter:blur(10px);">Most Popular</span>
          <div class="plan-name">Professional</div>
          <div class="plan-price">$12.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">Ideal for growing applications and production workloads.</div>
          <ul class="plan-features">
            <li>4 vCPU Cores</li>
            <li>8 GB RAM</li>
            <li>160 GB NVMe SSD</li>
            <li>5 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-primary" style="border-radius:12px;">Get Started</button>
        </div>
        <!-- Enterprise -->
        <div style="background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:24px;">
          <div class="plan-name">Enterprise</div>
          <div class="plan-price">$44.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">For high-traffic applications demanding maximum performance.</div>
          <ul class="plan-features">
            <li>8 vCPU Cores</li>
            <li>32 GB RAM</li>
            <li>400 GB NVMe SSD</li>
            <li>10 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-outline" style="border-radius:12px;">Get Started</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Style C: Flat with Color Accents -->
  <div class="card" data-choice="flat-accent" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">C</span> <strong>Flat Cards + Color Accent Bar</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">DigitalOcean style — data-focused</span></div>
    <div style="padding:20px;background:#0a0a0f;">
      <div class="plan-grid">
        <!-- Starter -->
        <div style="background:rgba(255,255,255,0.03);border-radius:12px;padding:24px;border-top:3px solid rgba(255,255,255,0.15);">
          <div class="plan-name">Starter</div>
          <div class="plan-price">$4.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">Perfect for small projects and development environments.</div>
          <ul class="plan-features">
            <li>1 vCPU Core</li>
            <li>2 GB RAM</li>
            <li>40 GB NVMe SSD</li>
            <li>2 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-outline">Get Started</button>
        </div>
        <!-- Pro (featured) -->
        <div style="background:rgba(59,130,246,0.04);border-radius:12px;padding:24px;border-top:3px solid #3b82f6;">
          <span class="badge-popular" style="background:rgba(59,130,246,0.15);color:#60a5fa;">Most Popular</span>
          <div class="plan-name">Professional</div>
          <div class="plan-price">$12.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">Ideal for growing applications and production workloads.</div>
          <ul class="plan-features">
            <li>4 vCPU Cores</li>
            <li>8 GB RAM</li>
            <li>160 GB NVMe SSD</li>
            <li>5 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-primary">Get Started</button>
        </div>
        <!-- Enterprise -->
        <div style="background:rgba(255,255,255,0.03);border-radius:12px;padding:24px;border-top:3px solid rgba(255,255,255,0.15);">
          <div class="plan-name">Enterprise</div>
          <div class="plan-price">$44.99 <span class="plan-period">/mo</span></div>
          <div class="plan-desc">For high-traffic applications demanding maximum performance.</div>
          <ul class="plan-features">
            <li>8 vCPU Cores</li>
            <li>32 GB RAM</li>
            <li>400 GB NVMe SSD</li>
            <li>10 TB Bandwidth</li>
          </ul>
          <button class="plan-btn plan-btn-outline">Get Started</button>
        </div>
      </div>
    </div>
  </div>

</div>