Vector — SaaS Developer Tool Landing

<nav class="vc-nav py-2 px-3 d-flex align-items-center gap-3 sticky-top">
  <span class="d-flex align-items-center gap-2 fw-bold"><span class="vc-mark">CA</span>ConvertAtlas<span class="vc-mono small" style="color:var(--vc-dim)">~/toolkit</span></span>
  <div class="d-none d-md-flex gap-4 small ms-4"><a class="text-decoration-none" style="color:var(--vc-dim)" href="#features">Features</a><a class="text-decoration-none" style="color:var(--vc-dim)" href="#pricing">Pricing</a><a class="text-decoration-none" style="color:var(--vc-dim)" href="#">Docs</a></div>
  <div class="ms-auto d-flex gap-2"><button class="btn btn-vc2 btn-sm">Sign in</button><button class="btn btn-vc btn-sm">Get started</button></div>
</nav>
<header class="vc-hero text-center py-5 px-3">
  <span class="vc-pill vc-mono"><i class="bi bi-stars me-1"></i>New — 18 full-page templates</span>
  <h1 class="mt-3 mb-2">Developer tools that<br><span class="vc-grad">just work</span></h1>
  <p class="mx-auto mb-4" style="max-width:540px;color:var(--vc-dim)">ConvertAtlas is a free developer toolbox: 60+ converters and utilities, 435+ UI snippets and 18 production-ready templates. Everything runs in your browser — private by design.</p>
  <div class="d-flex gap-2 justify-content-center mb-5"><button class="btn btn-vc"><i class="bi bi-terminal me-1"></i>Open the toolkit</button><button class="btn btn-vc2">Live demo →</button></div>
  <div class="vc-term mx-auto text-start" style="max-width:620px">
    <div class="vc-term-bar"><span class="vc-dot" style="background:#ff5f57"></span><span class="vc-dot" style="background:#febc2e"></span><span class="vc-dot" style="background:#28c840"></span><span class="vc-mono small ms-2" style="color:var(--vc-dim)">convertatlas ~/tour</span></div>
    <pre class="vc-mono"><span class="c">$</span> convertatlas --tour
<span class="m">→ loading toolkit…</span>
<span class="g">✓</span> 60+ tools <span class="m">(JSON, Base64, regex, colors…)</span>
<span class="g">✓</span> 435+ snippets <span class="m">(Bootstrap 5 + vanilla JS)</span>
<span class="g">✓</span> 18 templates <span class="m">(dashboards, logins, landings)</span>
<span class="c">https://convertatlas.org</span> <span class="g">is free ✦</span></pre>
  </div>
</header>
<div class="vc-logos d-flex flex-wrap justify-content-center gap-5 py-4 px-3"><span>◆ Nova</span><span>● Orbit</span><span>▲ Apex</span><span>★ Lumen</span><span>✦ Atlas</span></div>
<section id="features" class="container py-5">
  <h2 class="fw-bold text-center mb-1">Everything in one toolbox</h2>
  <p class="text-center mb-4" style="color:var(--vc-dim)">Stop bookmarking ten different sites.</p>
  <div class="row g-3">
    <div class="col-md-4"><div class="vc-card p-4 h-100"><div class="vc-ico mb-3"><i class="bi bi-lightning-charge"></i></div><h6 class="fw-bold">Instant tools</h6><p class="small mb-0" style="color:var(--vc-dim)">Converters, formatters and generators that load in milliseconds — no sign-up.</p></div></div>
    <div class="col-md-4"><div class="vc-card p-4 h-100"><div class="vc-ico mb-3"><i class="bi bi-shield-check"></i></div><h6 class="fw-bold">Privacy first</h6><p class="small mb-0" style="color:var(--vc-dim)">Everything runs client-side in your browser. Your data never leaves your machine.</p></div></div>
    <div class="col-md-4"><div class="vc-card p-4 h-100"><div class="vc-ico mb-3"><i class="bi bi-globe2"></i></div><h6 class="fw-bold">Copy &amp; ship</h6><p class="small mb-0" style="color:var(--vc-dim)">Snippets and templates with live previews — download a single file and go.</p></div></div>
  </div>
</section>
<section class="container py-4">
  <div class="vc-card p-4 p-md-5">
    <div class="row text-center g-4">
      <div class="col-6 col-md-3"><div class="h2 fw-bold mb-0 vc-grad">60+</div><div class="small" style="color:var(--vc-dim)">Browser tools</div></div>
      <div class="col-6 col-md-3"><div class="h2 fw-bold mb-0 vc-grad">435+</div><div class="small" style="color:var(--vc-dim)">UI snippets</div></div>
      <div class="col-6 col-md-3"><div class="h2 fw-bold mb-0 vc-grad">18</div><div class="small" style="color:var(--vc-dim)">Page templates</div></div>
      <div class="col-6 col-md-3"><div class="h2 fw-bold mb-0 vc-grad">100%</div><div class="small" style="color:var(--vc-dim)">Free &amp; private</div></div>
    </div>
  </div>
</section>
<section id="pricing" class="container py-5">
  <h2 class="fw-bold text-center mb-4">Free, with an optional Pro</h2>
  <div class="row g-3 justify-content-center">
    <div class="col-md-4"><div class="vc-card vc-price p-4 h-100"><h6 class="vc-mono" style="color:var(--vc-dim)">HOBBY</h6><div class="h2 fw-bold">$0</div><p class="small" style="color:var(--vc-dim)">For side projects</p><ul class="list-unstyled small d-grid gap-2 mb-4"><li><i class="bi bi-check2 me-1" style="color:var(--vc-cyan)"></i>100 builds / month</li><li><i class="bi bi-check2 me-1" style="color:var(--vc-cyan)"></i>1 edge region</li></ul><button class="btn btn-vc2 w-100">Start free</button></div></div>
    <div class="col-md-4"><div class="vc-card vc-price popular p-4 h-100"><h6 class="vc-mono" style="color:var(--vc-cyan)">PRO ✦</h6><div class="h2 fw-bold">$24<span class="fs-6" style="color:var(--vc-dim)">/mo</span></div><p class="small" style="color:var(--vc-dim)">For shipping teams</p><ul class="list-unstyled small d-grid gap-2 mb-4"><li><i class="bi bi-check2 me-1" style="color:var(--vc-cyan)"></i>Unlimited builds</li><li><i class="bi bi-check2 me-1" style="color:var(--vc-cyan)"></i>28 edge regions</li><li><i class="bi bi-check2 me-1" style="color:var(--vc-cyan)"></i>Preview deploys</li></ul><button class="btn btn-vc w-100">Go Pro</button></div></div>
  </div>
</section>
<section class="text-center py-5 px-3">
  <div class="vc-card mx-auto p-5" style="max-width:680px;background:linear-gradient(135deg,#101a30,#0d2236)">
    <h3 class="fw-bold mb-2">Your next tool is one click away</h3>
    <p class="vc-mono small mb-3" style="color:var(--vc-cyan)">~/ convertatlas.org — free, no account needed</p>
    <button class="btn btn-vc">Explore ConvertAtlas</button>
  </div>
</section>
<footer class="vc-foot py-4 px-3">
  <div class="container d-flex flex-wrap justify-content-between align-items-center gap-3">
    <span class="d-flex align-items-center gap-2 fw-bold"><span class="vc-mark" style="width:28px;height:28px;font-size:.8rem">CA</span>ConvertAtlas</span>
    <div class="d-flex gap-4 small"><a href="#">Docs</a><a href="#">Changelog</a><a href="#">GitHub</a></div>
    <span class="small vc-mono" style="color:var(--vc-dim)">Built with <a href="https://convertatlas.org" style="color:var(--vc-cyan)">ConvertAtlas</a> ~/dev-tools</span>
  </div>
</footer>

:root{--vc-bg:#0a1020;--vc-card:#101a30;--vc-line:#1c2742;--vc-cyan:#5dd6ff;--vc-dim:#8da2c8}
body{background:var(--vc-bg);color:#e7eefb;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.vc-mono{font-family:ui-monospace,'JetBrains Mono','Cascadia Code',monospace}
.vc-nav{border-bottom:1px solid var(--vc-line);backdrop-filter:blur(8px);background:rgba(10,16,32,.8)}
.vc-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--vc-cyan),#2b7fff);display:grid;place-items:center;color:#06121f;font-weight:800}
.vc-pill{border:1px solid var(--vc-line);background:var(--vc-card);border-radius:999px;padding:6px 14px;font-size:.8rem;color:var(--vc-cyan)}
.vc-hero h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(2.1rem,5vw,3.4rem)}
.vc-grad{background:linear-gradient(90deg,var(--vc-cyan),#7ea2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-vc{background:linear-gradient(90deg,var(--vc-cyan),#2b7fff);color:#06121f;font-weight:700;border:0;border-radius:12px;padding:.7rem 1.4rem}
.btn-vc:hover{filter:brightness(1.1);color:#06121f}
.btn-vc2{border:1px solid var(--vc-line);color:#e7eefb;border-radius:12px;padding:.7rem 1.4rem;background:var(--vc-card)}
.btn-vc2:hover{border-color:var(--vc-cyan);color:var(--vc-cyan)}
.vc-term{background:#0b1322;border:1px solid var(--vc-line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.vc-term-bar{background:#101a30;padding:10px 14px;display:flex;gap:6px;align-items:center}
.vc-dot{width:11px;height:11px;border-radius:50%}
.vc-term pre{margin:0;padding:18px;color:#bcd2f5;font-size:.86rem;line-height:1.7}
.vc-term .c{color:#5dd6ff}.vc-term .g{color:#34d399}.vc-term .m{color:#8da2c8}
.vc-card{background:var(--vc-card);border:1px solid var(--vc-line);border-radius:16px;transition:.18s}
.vc-card:hover{transform:translateY(-3px);border-color:#2c3e66}
.vc-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:rgba(93,214,255,.12);color:var(--vc-cyan);border:1px solid rgba(93,214,255,.25)}
.vc-logos span{opacity:.45;font-weight:700;font-size:1.05rem}
.vc-price.popular{border-color:var(--vc-cyan);box-shadow:0 0 0 1px var(--vc-cyan),0 18px 50px rgba(93,214,255,.12)}
.vc-foot{border-top:1px solid var(--vc-line)}
.vc-foot a{color:var(--vc-dim);text-decoration:none}.vc-foot a:hover{color:var(--vc-cyan)}