index.html.md

# index.html

The finished result as one file. Save it as index.html and open it.

```html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Aurora SaaS hero</title>
<style>
*{box-sizing:border-box;margin:0}
body{min-height:100vh;background:#07070d;color:#f4f4f8;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
.aur{position:fixed;inset:0;overflow:hidden;filter:blur(70px) saturate(1.3);opacity:.6}
.aur i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 14s ease-in-out infinite alternate}
.aur i:nth-child(1){width:55vw;height:55vw;left:-10vw;top:-20vw;background:#6d4aff}
.aur i:nth-child(2){width:48vw;height:48vw;right:-8vw;top:-12vw;background:#00d4c8;animation-duration:18s;animation-delay:-4s}
.aur i:nth-child(3){width:40vw;height:40vw;left:30vw;top:10vw;background:#ff4fa3;animation-duration:16s;animation-delay:-8s}
@keyframes drift{from{transform:translate3d(-6vw,0,0) scale(1)}to{transform:translate3d(8vw,6vw,0) scale(1.2)}}
nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:26px 24px}
.logo{font-weight:800;letter-spacing:-.02em;font-size:20px;display:flex;gap:10px;align-items:center}
.logo b{width:22px;height:22px;border-radius:7px;background:conic-gradient(from 200deg,#6d4aff,#00d4c8,#ff4fa3,#6d4aff)}
nav ul{display:flex;gap:28px;list-style:none;padding:0;font-size:14px;color:#b9b9c9}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;color:#07070d;background:#fff}
.btn.g{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18)}
.hero{position:relative;z-index:2;max-width:880px;margin:0 auto;text-align:center;padding:46px 24px 24px}
.pill{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13px;color:#d8d8e6;animation:up .9s both}
.pill s{width:7px;height:7px;border-radius:50%;background:#3dffb0;box-shadow:0 0 12px #3dffb0;text-decoration:none}
h1{font-size:clamp(42px,7vw,84px);line-height:1.02;letter-spacing:-.045em;margin:26px 0 22px;font-weight:800;animation:up .9s .12s both}
h1 em{font-style:normal;background:linear-gradient(90deg,#c9c0ff,#7af2e8,#ffc0e0,#c9c0ff);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:-250% 0}}
p.sub{font-size:19px;line-height:1.55;color:#bdbdd0;max-width:600px;margin:0 auto 34px;animation:up .9s .24s both}
.cta{display:flex;gap:12px;justify-content:center;animation:up .9s .36s both}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.cards{position:relative;z-index:2;max-width:1000px;margin:30px auto 0;padding:0 24px 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{padding:22px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(18px);animation:up .9s both,float 6s ease-in-out infinite}
.card:nth-child(1){animation-delay:.5s,0s}.card:nth-child(2){animation-delay:.65s,-2s}.card:nth-child(3){animation-delay:.8s,-4s}
@keyframes float{50%{transform:translateY(-9px)}}
.card small{color:#a9a9bd;font-size:13px}.card strong{display:block;font-size:34px;letter-spacing:-.03em;margin:6px 0 10px}
.bar{height:6px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}.bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#6d4aff,#3de0d4);animation:fill 2.4s .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes fill{from{width:0}}
@media(max-width:760px){nav ul{display:none}.cards{grid-template-columns:1fr}.cta{flex-direction:column;align-items:center}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
</style></head><body>
<div class="aur"><i></i><i></i><i></i></div>
<nav><div class="logo"><b></b>Lumen</div><ul><li>Product</li><li>Pricing</li><li>Docs</li><li>Changelog</li></ul><a class="btn g" href="#">Sign in</a></nav>
<main class="hero">
<span class="pill"><s></s>New: realtime team workspaces</span>
<h1>Ship ideas at the speed of <em>thought</em></h1>
<p class="sub">Lumen turns scattered notes, tasks and chats into one calm workspace your whole team actually enjoys opening.</p>
<div class="cta"><a class="btn" href="#">Start free</a><a class="btn g" href="#">Watch the demo</a></div>
</main>
<section class="cards">
<div class="card"><small>Active teams</small><strong>12,480</strong><div class="bar"><i style="width:84%"></i></div></div>
<div class="card"><small>Tasks shipped this week</small><strong>96,310</strong><div class="bar"><i style="width:68%"></i></div></div>
<div class="card"><small>Uptime</small><strong>99.99%</strong><div class="bar"><i style="width:99%"></i></div></div>
</section>
</body></html>

```