`marketing/hero.html`

87 lines
<!doctype html><html><head><meta charset="utf-8">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">
<style>
  *{margin:0;box-sizing:border-box}
  body{width:1600px;height:1000px;background:#06070c;overflow:hidden;font-family:'Inter',sans-serif;
       color:#eef1f7;position:relative;-webkit-font-smoothing:antialiased}
  .mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
  /* neon ambience */
  .glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
  .g1{width:900px;height:900px;left:640px;top:-160px;background:radial-gradient(circle,#1e5fae,transparent 60%)}
  .g2{width:700px;height:700px;left:-160px;top:520px;background:radial-gradient(circle,#6a3fb0,transparent 60%)}
  .grain{position:absolute;inset:0;background:
     linear-gradient(#06070c00,#06070c) ,radial-gradient(circle at 50% 0,#0b1220,transparent 55%)}
  /* top bar */
  .top{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;gap:14px;
       padding:0 46px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(9,11,17,.6);backdrop-filter:blur(6px)}
  .brand{font-weight:800;letter-spacing:.26em;font-size:15px}.brand i{color:#5aa9f0;font-style:normal;margin-right:9px;text-shadow:0 0 16px #5aa9f0}
  .pills{display:flex;gap:8px;margin-left:auto}
  .pill{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:8px;background:rgba(255,255,255,.04);
        border:1px solid rgba(255,255,255,.09);font-size:11px;color:#7f8798;text-transform:uppercase;letter-spacing:.08em}
  .pill i{width:7px;height:7px;border-radius:2px;box-shadow:0 0 8px currentColor}
  .pill b{font-family:'JetBrains Mono',monospace;font-size:14px;color:#fff}
  /* layout */
  .wrap{position:absolute;top:64px;left:0;right:0;bottom:0;display:grid;grid-template-columns:560px 1fr;align-items:center}
  .left{padding:0 20px 0 56px}
  .kicker{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.24em;color:#5aa9f0;text-transform:uppercase;margin-bottom:22px}
  h1{font-size:62px;line-height:1.02;font-weight:800;letter-spacing:-.02em;margin-bottom:22px}
  h1 .a{background:linear-gradient(100deg,#8fc4ff,#c9a4f2);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{font-size:19px;line-height:1.5;color:#aab4c6;max-width:440px;margin-bottom:30px}
  .chips{display:flex;flex-wrap:wrap;gap:9px;max-width:470px;margin-bottom:34px}
  .chip{font-size:12.5px;padding:7px 13px;border-radius:20px;border:1px solid rgba(255,255,255,.12);
        background:rgba(255,255,255,.03);color:#c2c9d6}
  .chip b{color:#5aa9f0;font-weight:600}
  .cta{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:11px;font-size:16px;font-weight:600;
       color:#06070c;background:linear-gradient(100deg,#5aa9f0,#8fc4ff);box-shadow:0 8px 30px #5aa9f055}
  .url{margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#586074}
  /* browser frame */
  .right{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
  .frame{width:940px;transform:perspective(1800px) rotateY(-11deg) rotateX(3deg);border-radius:14px;overflow:hidden;
         border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 120px #000c,0 0 90px #2a5fae44}
  .bar{height:38px;background:#0d1017;display:flex;align-items:center;gap:8px;padding:0 15px;border-bottom:1px solid rgba(255,255,255,.07)}
  .bar .d{width:11px;height:11px;border-radius:50%}
  .bar .u{margin-left:14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#6b7486;
          background:#070910;padding:4px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.06)}
  .frame img{display:block;width:100%}
  .foot{position:absolute;bottom:26px;left:56px;font-size:12.5px;color:#586074}
  .foot b{color:#7f8798}
</style></head>
<body>
  <div class="glow g1"></div><div class="glow g2"></div><div class="grain"></div>
  <div class="top">
    <span class="brand"><i>◆</i>FLEET OFFICE</span>
    <div class="pills">
      <span class="pill"><i style="background:#5aa9f0;color:#5aa9f0"></i>doing <b>10</b></span>
      <span class="pill"><i style="background:#ff5f6d;color:#ff5f6d"></i>blocked <b>16</b></span>
      <span class="pill"><i style="background:#34d9a0;color:#34d9a0"></i>done <b>39</b></span>
      <span class="pill"><i style="background:#c9a4f2;color:#c9a4f2"></i>agents <b>48</b></span>
      <span class="pill"><i style="background:#c9a4f2;color:#c9a4f2"></i>DMs <b>8</b></span>
    </div>
  </div>
  <div class="wrap">
    <div class="left">
      <div class="kicker">Live · 3D · Real-time</div>
      <h1>Every agent action,<br><span class="a">a living floor.</span></h1>
      <div class="sub">A top-down 3D command center over your ticket system. Rooms are tickets, avatars are agents, and messages fly between them — in real time.</div>
      <div class="chips">
        <span class="chip"><b>Rooms</b> = tickets</span>
        <span class="chip"><b>Avatars</b> = agents</span>
        <span class="chip"><b>4 lanes</b> = kanban</span>
        <span class="chip"><b>DM</b> light-streams</span>
        <span class="chip">4s live sync</span>
      </div>
      <span class="cta">Enter the floor →</span>
      <div class="url">▸ 127.0.0.1:9794/office</div>
    </div>
    <div class="right">
      <div class="frame">
        <div class="bar"><span class="d" style="background:#ff5f57"></span><span class="d" style="background:#febc2e"></span><span class="d" style="background:#28c840"></span>
          <span class="u">127.0.0.1:9794/office</span></div>
        <img src="office-view.png" alt="Fleet Office">
      </div>
    </div>
  </div>
  <div class="foot"><b>FLEET OFFICE</b> — WebGL / Three.js · reads the live ticket store · $0 local</div>
</body></html>