Flux — SaaS Product Landing

<nav class="fx-nav" data-rv><span class="fx-logo">⬡ ConvertAtlas</span><div class="fx-links d-none d-md-flex"><a href="#features">Features</a><a href="#dash">Dashboard</a><a href="#cta">Get started</a></div><a href="#cta" class="fx-btn">Open free</a></nav>
<header class="fx-hero"><div class="fx-glow"></div><div class="fx-hero-in">
  <span class="fx-badge" data-rv>⚡ 60+ tools · 435+ snippets · 18 templates</span>
  <h1 data-rv>The developer toolkit<br>that <span>just works</span></h1>
  <p data-rv>ConvertAtlas brings every converter, formatter and UI component you reach for into one fast, private, free workspace.</p>
  <div data-rv><a href="#cta" class="fx-btn fx-btn-lg">Start building</a><a href="#dash" class="fx-link">See it live →</a></div>
  <div class="fx-metrics" data-rv><div><b data-c="60">0</b><span>Tools</span></div><div><b data-c="435">0</b><span>Snippets</span></div><div><b data-c="18">0</b><span>Templates</span></div></div>
</div></header>
<section id="dash" class="fx-dash" data-rv>
  <div class="fx-window"><div class="fx-bar"><span></span><span></span><span></span><em>convertatlas.org/dashboard</em></div>
    <div class="fx-dash-body"><div class="fx-dash-side"><div class="fx-side-i active">◈ Overview</div><div class="fx-side-i">⚙ Tools</div><div class="fx-side-i">🧩 Snippets</div><div class="fx-side-i">📄 Templates</div></div>
      <div class="fx-dash-main"><div class="fx-kpis"><div class="fx-kpi"><span>Conversions</span><b>12,480</b></div><div class="fx-kpi"><span>Active</span><b>312</b></div><div class="fx-kpi"><span>Saved</span><b>1.2k</b></div></div><div id="fxChart"></div></div>
    </div>
  </div>
</section>
<section id="features" class="fx-feat">
  <div class="fx-feat-head" data-rv><span class="fx-kick">// why ConvertAtlas</span><h2>Everything in one place</h2></div>
  <div class="fx-grid">
    <div class="fx-card" data-rv><span class="fx-ic">⚙️</span><h3>60+ tools</h3><p>Converters, formatters, generators — all client-side.</p></div>
    <div class="fx-card" data-rv><span class="fx-ic">🧩</span><h3>435+ snippets</h3><p>Copy-paste Bootstrap 5 &amp; vanilla components.</p></div>
    <div class="fx-card" data-rv><span class="fx-ic">📄</span><h3>18 templates</h3><p>Single-file dashboards, logins and landings.</p></div>
    <div class="fx-card" data-rv><span class="fx-ic">🔒</span><h3>Private</h3><p>Nothing leaves your browser. No accounts.</p></div>
  </div>
</section>
<section id="cta" class="fx-cta" data-rv><h2>Ready when you are</h2><p>Free, no sign-up, no install.</p><a href="https://convertatlas.org" class="fx-btn fx-btn-lg">Open ConvertAtlas</a></section>
<footer class="fx-foot">⬡ ConvertAtlas © 2026 · Built with <a href="https://convertatlas.org">ConvertAtlas</a> · Developer Tools</footer>

*{box-sizing:border-box}body{margin:0;background:#0b0e1a;color:#e6eaf6;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}a{text-decoration:none}
.fx-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:15px 28px;background:rgba(11,14,26,.7);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.fx-logo{font-weight:800}.fx-links{gap:26px}.fx-links a{color:#9aa3c4;font-size:.9rem}.fx-links a:hover{color:#fff}
.fx-btn{background:linear-gradient(120deg,#6366f1,#22d3ee);color:#06121f;font-weight:700;padding:10px 20px;border-radius:11px;font-size:.9rem;display:inline-block;transition:.18s}
.fx-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.fx-btn-lg{padding:15px 32px;font-size:1.02rem;margin-right:14px}
.fx-link{color:#22d3ee;font-weight:600}
.fx-hero{position:relative;padding:130px 24px 50px;text-align:center;overflow:hidden}
.fx-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.4),transparent 65%);filter:blur(40px)}
.fx-hero-in{position:relative;max-width:760px;margin:0 auto}
.fx-badge{display:inline-block;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);border-radius:999px;padding:7px 16px;font-size:.82rem;color:#c4cbe6;margin-bottom:22px}
.fx-hero h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0 0 16px}
.fx-hero h1 span{background:linear-gradient(120deg,#818cf8,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-hero p{color:#9aa3c4;font-size:1.08rem;max-width:560px;margin:0 auto 28px;line-height:1.7}
.fx-metrics{display:flex;gap:44px;justify-content:center;margin-top:40px}
.fx-metrics b{display:block;font-size:2rem;font-weight:800;background:linear-gradient(120deg,#818cf8,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-metrics span{color:#7e87a8;font-size:.82rem}
.fx-dash{max-width:1000px;margin:0 auto;padding:30px 24px 70px}
.fx-window{background:#0e1326;border:1px solid #1e2746;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.fx-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#121a33;border-bottom:1px solid #1e2746}
.fx-bar span{width:11px;height:11px;border-radius:50%}.fx-bar span:nth-child(1){background:#ff5f57}.fx-bar span:nth-child(2){background:#febc2e}.fx-bar span:nth-child(3){background:#28c840}
.fx-bar em{margin-left:10px;font-style:normal;font-size:.8rem;color:#6b7596;font-family:ui-monospace,monospace}
.fx-dash-body{display:flex;min-height:300px}
.fx-dash-side{width:170px;border-right:1px solid #1e2746;padding:14px}
.fx-side-i{padding:9px 12px;border-radius:9px;font-size:.86rem;color:#8a93b6;margin-bottom:3px}
.fx-side-i.active{background:rgba(99,102,241,.18);color:#c7ccff}
.fx-dash-main{flex:1;padding:18px}
.fx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.fx-kpi{background:#121a33;border:1px solid #1e2746;border-radius:12px;padding:12px}
.fx-kpi span{color:#7e87a8;font-size:.78rem}.fx-kpi b{display:block;font-size:1.4rem;margin-top:2px}
.fx-feat{max-width:1000px;margin:0 auto;padding:40px 24px 70px}
.fx-kick{font-family:ui-monospace,monospace;color:#22d3ee;font-size:.82rem}
.fx-feat-head{text-align:center;margin-bottom:34px}
.fx-feat-head h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin:6px 0 0}
.fx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.fx-grid{grid-template-columns:repeat(2,1fr)}.fx-dash-side{display:none}.fx-metrics{gap:26px}.fx-links{display:none}}
.fx-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;transition:.2s}
.fx-card:hover{border-color:rgba(99,102,241,.5);transform:translateY(-4px)}
.fx-ic{font-size:1.7rem}.fx-card h3{font-size:1.1rem;margin:10px 0 6px}.fx-card p{color:#9aa3c4;font-size:.88rem;margin:0;line-height:1.55}
.fx-cta{text-align:center;padding:90px 24px;max-width:640px;margin:0 auto}
.fx-cta h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;margin:0 0 10px}
.fx-cta p{color:#9aa3c4;margin:0 0 26px}
.fx-foot{text-align:center;padding:28px;color:#6b7596;font-size:.84rem;border-top:1px solid rgba(255,255,255,.06)}.fx-foot a{color:#22d3ee}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

function cu(el){var t=+el.dataset.c,s=null;function st(ts){if(!s)s=ts;var p=Math.min((ts-s)/1400,1);el.textContent=Math.floor((1-Math.pow(1-p,3))*t)+(t>=100?'+':'');if(p<1)requestAnimationFrame(st)}requestAnimationFrame(st)}
var cio=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){cu(e.target);cio.unobserve(e.target)}})},{threshold:.6});
document.querySelectorAll('[data-c]').forEach(function(el){cio.observe(el)});
function chart(){if(typeof ApexCharts==='undefined')return;new ApexCharts(document.querySelector('#fxChart'),{chart:{type:'area',height:180,toolbar:{show:false},background:'transparent'},theme:{mode:'dark'},series:[{name:'Conversions',data:[120,190,150,260,220,330,300,420]},{name:'Active',data:[40,60,55,90,80,120,110,160]}],colors:['#6366f1','#22d3ee'],stroke:{curve:'smooth',width:2},fill:{type:'gradient',gradient:{opacityFrom:.4,opacityTo:0}},dataLabels:{enabled:false},grid:{borderColor:'#1e2746'},xaxis:{labels:{show:false}},legend:{labels:{colors:'#7e87a8'}}}).render()}
chart();
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('[data-rv]').forEach(function(el,i){el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});