Quasar — Pricing Page with Toggle

<nav class="container py-3 d-flex align-items-center">
  <span class="fw-bold fs-5">ConvertAtlas<span style="color:var(--qa-cyan)">.</span></span>
  <div class="ms-auto d-none d-md-flex gap-4 small"><a class="text-secondary text-decoration-none" href="#">Product</a><a class="text-dark fw-semibold text-decoration-none" href="#">Pricing</a><a class="text-secondary text-decoration-none" href="#">Docs</a></div>
  <button class="btn btn-sm btn-dark ms-3 rounded-pill px-3">Sign in</button>
</nav>
<header class="container text-center py-5">
  <span class="qa-mono small" style="color:var(--qa-cyan)">// pricing</span>
  <h1 class="fw-bold mt-2 mb-2" style="letter-spacing:-.02em">Pricing for the Atlas toolkit</h1>
  <p class="text-secondary mb-4">The core toolkit is free forever. Upgrade for offline downloads, collections and the API.</p>
  <div class="qa-toggle"><button class="active" id="qaM">Monthly</button><button id="qaY">Yearly <span class="qa-save">−20%</span></button></div>
</header>
<section class="container pb-5"><div class="row g-4 justify-content-center">
  <div class="col-md-4"><div class="qa-card p-4 h-100">
    <h6 class="qa-mono text-secondary">STARTER</h6>
    <div class="display-6 fw-bold mb-0"><span data-m="$0" data-y="$0">$0</span><span class="fs-6 text-secondary">/mo</span></div>
    <p class="small text-secondary">For trying things out</p>
    <ul class="list-unstyled qa-feat mb-4"><li><i class="bi bi-check-circle-fill"></i>All 60+ tools</li><li><i class="bi bi-check-circle-fill"></i>435+ snippets</li><li><i class="bi bi-check-circle-fill"></i>Live previews</li></ul>
    <button class="btn-qa">Start free</button>
  </div></div>
  <div class="col-md-4"><div class="qa-card pop p-4 h-100">
    <span class="qa-pop-tag">MOST POPULAR</span>
    <h6 class="qa-mono" style="color:var(--qa-cyan)">PRO</h6>
    <div class="display-6 fw-bold mb-0"><span data-m="$19" data-y="$15">$19</span><span class="fs-6 text-secondary">/mo</span></div>
    <p class="small text-secondary">For serious builders</p>
    <ul class="list-unstyled qa-feat mb-4"><li><i class="bi bi-check-circle-fill"></i>Everything in Free</li><li><i class="bi bi-check-circle-fill"></i>Template downloads</li><li><i class="bi bi-check-circle-fill"></i>Saved collections</li><li><i class="bi bi-check-circle-fill"></i>Ad-free experience</li></ul>
    <button class="btn-qa cy">Go Pro</button>
  </div></div>
  <div class="col-md-4"><div class="qa-card p-4 h-100">
    <h6 class="qa-mono text-secondary">TEAM</h6>
    <div class="display-6 fw-bold mb-0"><span data-m="$49" data-y="$39">$49</span><span class="fs-6 text-secondary">/mo</span></div>
    <p class="small text-secondary">For growing teams</p>
    <ul class="list-unstyled qa-feat mb-4"><li><i class="bi bi-check-circle-fill"></i>Everything in Pro</li><li><i class="bi bi-check-circle-fill"></i>Atlas API access</li><li><i class="bi bi-check-circle-fill"></i>Team collections</li><li><i class="bi bi-check-circle-fill"></i>Priority support</li></ul>
    <button class="btn-qa">Contact sales</button>
  </div></div>
</div></section>
<section class="container pb-5" style="max-width:860px">
  <h2 class="fw-bold text-center mb-4">Compare plans</h2>
  <div class="table-responsive"><table class="table qa-tbl align-middle">
    <thead><tr><th></th><th class="text-center">Starter</th><th class="text-center" style="color:var(--qa-cyan)">Pro</th><th class="text-center">Team</th></tr></thead>
    <tbody>
      <tr><td>Projects</td><td class="text-center">3</td><td class="text-center fw-bold">∞</td><td class="text-center fw-bold">∞</td></tr>
      <tr><td>Storage</td><td class="text-center">1 GB</td><td class="text-center fw-bold">100 GB</td><td class="text-center fw-bold">1 TB</td></tr>
      <tr><td>Custom domains</td><td class="text-center"><i class="bi bi-x-lg qa-cross"></i></td><td class="text-center"><i class="bi bi-check-lg qa-tick"></i></td><td class="text-center"><i class="bi bi-check-lg qa-tick"></i></td></tr>
      <tr><td>SSO / SAML</td><td class="text-center"><i class="bi bi-x-lg qa-cross"></i></td><td class="text-center"><i class="bi bi-x-lg qa-cross"></i></td><td class="text-center"><i class="bi bi-check-lg qa-tick"></i></td></tr>
      <tr><td>Support</td><td class="text-center">Community</td><td class="text-center fw-bold">Priority</td><td class="text-center fw-bold">Dedicated</td></tr>
    </tbody>
  </table></div>
</section>
<section class="container pb-5" style="max-width:680px">
  <h2 class="fw-bold text-center mb-3">Pricing FAQ</h2>
  <details class="qa-faq" open><summary>Can I change plans later?</summary><p>Yes — upgrades apply instantly and downgrades at the next billing cycle. We prorate everything automatically.</p></details>
  <details class="qa-faq"><summary>Do you offer refunds?</summary><p>30-day money-back guarantee on all paid plans, no questions asked.</p></details>
  <details class="qa-faq"><summary>Is there a student discount?</summary><p>Students and educators get Atlas Pro free — verify with your academic email.</p></details>
</section>
<footer class="py-4 text-center small text-secondary border-top">ConvertAtlas © 2026 · Template by <a href="https://convertatlas.org" class="fw-semibold text-decoration-none" style="color:var(--qa-cyan)">ConvertAtlas</a> · Developer Tools</footer>

:root{--qa-ink:#0e1726;--qa-cyan:#0c8fc4;--qa-soft:#eef6fa;--qa-line:#e3ecf2}
body{background:#fbfdfe;color:var(--qa-ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.qa-mono{font-family:ui-monospace,'JetBrains Mono',monospace}
.qa-toggle{background:var(--qa-soft);border:1px solid var(--qa-line);border-radius:999px;padding:5px;display:inline-flex;gap:4px}
.qa-toggle button{border:0;background:transparent;border-radius:999px;padding:8px 20px;font-weight:600;font-size:.9rem;color:#5c6f80}
.qa-toggle button.active{background:var(--qa-ink);color:#fff}
.qa-save{background:#e7f7ee;color:#16a34a;font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 9px}
.qa-card{background:#fff;border:1px solid var(--qa-line);border-radius:20px;transition:.18s}
.qa-card:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(14,23,38,.08)}
.qa-card.pop{border:2px solid var(--qa-cyan);box-shadow:0 18px 50px rgba(12,143,196,.14);position:relative}
.qa-pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--qa-cyan);color:#fff;font-size:.72rem;font-weight:700;padding:4px 14px;border-radius:999px}
.btn-qa{background:var(--qa-ink);color:#fff;border-radius:12px;border:0;padding:.7rem;font-weight:600;width:100%}
.btn-qa:hover{background:#1f2c44;color:#fff}
.btn-qa.cy{background:var(--qa-cyan)}.btn-qa.cy:hover{background:#0a7cab}
.qa-feat li{padding:6px 0;font-size:.9rem}
.qa-feat i{color:var(--qa-cyan);margin-right:8px}
.qa-tbl th,.qa-tbl td{padding:.85rem .75rem}
.qa-tbl thead th{border-bottom:2px solid var(--qa-ink)}
.qa-tick{color:#16a34a}.qa-cross{color:#cbd5e1}
details.qa-faq{border-bottom:1px solid var(--qa-line);padding:16px 4px}
details.qa-faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
details.qa-faq summary::after{content:"+";color:var(--qa-cyan);font-weight:700}
details.qa-faq[open] summary::after{content:"−"}
details.qa-faq p{margin:10px 0 0;font-size:.9rem;color:#5c6f80}

var prices=document.querySelectorAll('[data-m]');
document.getElementById('qaM').onclick=function(){this.classList.add('active');document.getElementById('qaY').classList.remove('active');prices.forEach(function(p){p.textContent=p.dataset.m})};
document.getElementById('qaY').onclick=function(){this.classList.add('active');document.getElementById('qaM').classList.remove('active');prices.forEach(function(p){p.textContent=p.dataset.y})};