Pages Hard
SaaS — Analytics / Data Platform Landing
A dark, insight-forward marketing landing for a fictional real-time analytics and data platform. The hero pairs confident copy with a rich inline-SVG dashboard mockup featuring count-up KPIs, gradient area and bar charts, and a conversion funnel you can tab between. Below it run a live-updating metric ticker, a customer logo cloud, pipeline and query feature sections, a large team-dashboard with finance, growth and ops views, and a gradient demo call-to-action with email validation.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root{
--bg:#0b0f1a;
--bg-2:#0f1424;
--surface:#141a2e;
--surface-2:#1a2138;
--ink:#eef1fb;
--muted:#9aa3c2;
--faint:#6b7395;
--brand:#818cf8;
--brand-d:#6366f1;
--teal:#5eead4;
--ok:#34d399;
--warn:#fbbf24;
--danger:#f87171;
--line:rgba(255,255,255,.09);
--line-s:rgba(255,255,255,.05);
--shadow:0 18px 50px rgba(2,6,23,.55);
--grad:linear-gradient(120deg,#5eead4,#818cf8 55%,#c084fc);
--radius:16px;
--maxw:1140px;
}
html[data-theme="light"]{
--bg:#f4f6fc;
--bg-2:#eef1fa;
--surface:#ffffff;
--surface-2:#f6f8fe;
--ink:#101632;
--muted:#525a78;
--faint:#8a92b0;
--line:rgba(15,20,45,.1);
--line-s:rgba(15,20,45,.06);
--shadow:0 18px 50px rgba(30,40,90,.14);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:radial-gradient(1100px 600px at 78% -8%,rgba(129,140,248,.22),transparent 60%),
radial-gradient(900px 500px at 10% 0%,rgba(94,234,212,.13),transparent 55%),
var(--bg);
color:var(--ink);
line-height:1.5;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;background:var(--brand);color:#0b0f1a;padding:8px 14px;border-radius:8px;z-index:200}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
/* buttons */
.btn{
display:inline-flex;align-items:center;gap:8px;justify-content:center;
background:var(--grad);color:#0b1020;font-weight:700;font-size:.92rem;
border:0;border-radius:11px;padding:11px 18px;cursor:pointer;
transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
box-shadow:0 8px 24px rgba(99,102,241,.32);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn.lg{padding:14px 24px;font-size:1rem}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);transform:translateY(-1px)}
/* nav */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line-s)}
.nav-inner{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.12rem}
.brand-mark{display:grid;place-items:center}
.nav-links{display:flex;gap:24px;margin-left:14px;font-size:.92rem;color:var(--muted)}
.nav-links a{position:relative;padding:4px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--grad);transition:width .2s}
.nav-links a:hover::after{width:100%}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.theme-ico{font-size:1rem}
.hamb{display:none;margin-left:auto;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.hamb span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobnav{display:flex;flex-direction:column;gap:6px;padding:12px 22px 18px;border-bottom:1px solid var(--line)}
.mobnav a{padding:9px 4px;color:var(--muted)}
.mobnav a.btn{color:#0b1020;margin-top:6px}
/* hero */
.hero{padding:54px 0 0;position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.18fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--teal);
background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.22);padding:6px 12px;border-radius:999px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(94,234,212,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,234,212,.55)}70%{box-shadow:0 0 0 8px rgba(94,234,212,0)}100%{box-shadow:0 0 0 0 rgba(94,234,212,0)}}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800;margin:18px 0 16px}
.lede{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--muted);max-width:34ch}
.hero-actions{display:flex;gap:12px;margin:26px 0 22px;flex-wrap:wrap}
.hero-trust{display:flex;gap:24px;list-style:none;margin:0;padding:0;flex-wrap:wrap;color:var(--muted);font-size:.86rem}
.hero-trust strong{display:block;color:var(--ink);font-size:1.05rem}
/* app mockup */
.hero-app{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
box-shadow:var(--shadow);transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);transition:transform .4s ease}
.hero-app:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
.app-chrome{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.dotrow{display:flex;gap:6px}
.dotrow i{width:10px;height:10px;border-radius:50%;background:var(--faint);opacity:.6}
.dotrow i:nth-child(1){background:#f87171}.dotrow i:nth-child(2){background:#fbbf24}.dotrow i:nth-child(3){background:#34d399}
.app-url{font:500 .76rem "JetBrains Mono",monospace;color:var(--faint)}
.app-body{padding:16px}
.app-tabs{display:flex;gap:6px;margin-bottom:14px}
.vtab{background:transparent;border:1px solid var(--line);color:var(--muted);font:600 .82rem Inter;padding:6px 14px;border-radius:9px;cursor:pointer;transition:.15s}
.vtab:hover{color:var(--ink);border-color:var(--brand)}
.vtab.active{background:var(--grad);color:#0b1020;border-color:transparent}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--surface-2);border:1px solid var(--line-s);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.kpi-l{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.kpi-v{font:800 1.32rem "JetBrains Mono",monospace;letter-spacing:-.02em}
.kpi-d{font-size:.74rem;font-weight:600}
.kpi-d.up{color:var(--ok)}.kpi-d.down{color:var(--teal)}
.panel{background:var(--surface-2);border:1px solid var(--line-s);border-radius:12px;padding:13px}
.panel-head{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted);margin-bottom:8px}
.legend{display:flex;align-items:center;gap:7px;font-size:.74rem}
.legend i{width:10px;height:10px;border-radius:3px}
.lg-a{background:var(--brand)}.lg-b{background:var(--teal)}
.chart{width:100%;height:170px;display:block}
.chart .grid line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.aline,.bline{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.6s ease forwards}
.bline{animation-delay:.25s}
@keyframes draw{to{stroke-dashoffset:0}}
.bars rect{fill:var(--brand)}
.funnel{display:flex;flex-direction:column;gap:8px}
.fstep{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}
.fbar{position:relative;height:26px;background:var(--surface);border:1px solid var(--line-s);border-radius:8px;overflow:hidden;display:flex;align-items:center}
.fbar::before{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,rgba(129,140,248,.5),rgba(94,234,212,.5));transition:width .6s ease}
.fbar b{position:relative;font:600 .76rem "JetBrains Mono",monospace;color:var(--ink);padding-left:10px}
/* ticker */
.ticker{margin-top:40px;border-top:1px solid var(--line-s);border-bottom:1px solid var(--line-s);
background:color-mix(in srgb,var(--surface) 50%,transparent);overflow:hidden;padding:13px 0}
.ticker-track{display:flex;gap:42px;white-space:nowrap;animation:scroll 28s linear infinite;width:max-content}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted)}
.tick b{font:700 .92rem "JetBrains Mono",monospace;color:var(--ink)}
.tick .tdot{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.tick.warn .tdot{background:var(--warn)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}.eyebrow .dot{animation:none}.aline,.bline{animation:none;stroke-dashoffset:0}}
/* logos */
.logos{padding:46px 0 8px}
.logos-cap{text-align:center;color:var(--faint);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
.logo-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 38px}
.logo-row li{font-weight:700;font-size:1.18rem;color:var(--muted);opacity:.7;filter:grayscale(1);transition:.2s}
.logo-row li:hover{opacity:1;filter:none;color:var(--ink)}
/* sections */
.sec-head{text-align:center;max-width:620px;margin:0 auto 38px}
.kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800}
.sec-head p{color:var(--muted);margin-top:12px;font-size:1.05rem}
.features{padding:70px 0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.2s;position:relative;overflow:hidden}
.feat::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.feat:hover{transform:translateY(-4px);border-color:var(--brand)}
.feat:hover::after{transform:scaleX(1)}
.feat-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-size:1.4rem;
background:rgba(129,140,248,.14);color:var(--teal);margin-bottom:14px}
.feat h3{font-size:1.2rem;margin-bottom:8px}
.feat p{color:var(--muted);font-size:.95rem}
.feat-code{display:inline-block;margin-top:14px;font:600 .78rem "JetBrains Mono",monospace;color:var(--teal);
background:var(--surface-2);border:1px solid var(--line-s);padding:6px 11px;border-radius:8px}
/* dashboard stage */
.dash{padding:30px 0 80px}
.dash-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.dtab{background:var(--surface);border:1px solid var(--line);color:var(--muted);font:600 .9rem Inter;padding:9px 20px;border-radius:11px;cursor:pointer;transition:.15s}
.dtab:hover{color:var(--ink);border-color:var(--brand)}
.dtab.active{background:var(--grad);color:#0b1020;border-color:transparent}
.dash-stage{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);min-height:340px}
.stage-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.stage-grid .big{grid-column:1 / -1}
.card{background:var(--surface-2);border:1px solid var(--line-s);border-radius:13px;padding:16px}
.card h4{font-size:.92rem;color:var(--muted);font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between}
.card h4 .tag{font:600 .72rem "JetBrains Mono",monospace;color:var(--teal)}
.metric-big{font:800 2.2rem "JetBrains Mono",monospace;letter-spacing:-.03em}
.metric-sub{color:var(--muted);font-size:.84rem;margin-top:4px}
.spark{width:100%;height:64px;display:block;margin-top:10px}
.spark path{fill:none;stroke:var(--teal);stroke-width:2.4}
.spark .fill{fill:url(#fillA);stroke:none}
.barcol{display:flex;gap:8px;align-items:flex-end;height:120px;margin-top:8px}
.barcol .b{flex:1;background:var(--grad);border-radius:6px 6px 0 0;min-height:8px;opacity:.92;transition:height .5s ease}
.rows{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.rowi{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;padding-bottom:9px;border-bottom:1px solid var(--line-s)}
.rowi:last-child{border:0;padding:0}
.rowi .nm{color:var(--ink);font-weight:500}
.rowi .vl{font:600 .84rem "JetBrains Mono",monospace;color:var(--muted)}
.rowi .pill{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px}
.pill.ok{color:var(--ok);background:rgba(52,211,153,.13)}
.pill.warn{color:var(--warn);background:rgba(251,191,36,.13)}
/* cta */
.cta{padding:20px 0 90px}
.cta-card{position:relative;text-align:center;background:linear-gradient(180deg,var(--surface),var(--bg-2));
border:1px solid var(--line);border-radius:24px;padding:54px 26px;overflow:hidden;box-shadow:var(--shadow)}
.cta-glow{position:absolute;inset:auto;top:-40%;left:50%;transform:translateX(-50%);width:520px;height:340px;
background:radial-gradient(closest-side,rgba(129,140,248,.4),transparent);filter:blur(20px);pointer-events:none}
.cta-card h2{position:relative;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800}
.cta-card>p{position:relative;color:var(--muted);max-width:48ch;margin:14px auto 0;font-size:1.05rem}
.cta-form{position:relative;display:flex;gap:10px;justify-content:center;margin:26px auto 0;max-width:480px;flex-wrap:wrap}
.cta-form input{flex:1;min-width:200px;background:var(--bg);border:1px solid var(--line);color:var(--ink);
border-radius:11px;padding:13px 15px;font-size:1rem}
.cta-form input::placeholder{color:var(--faint)}
.cta-form input.bad{border-color:var(--danger)}
.cta-fine{position:relative;color:var(--faint);font-size:.8rem;margin-top:16px}
/* footer */
.foot{border-top:1px solid var(--line);padding:46px 0 26px;background:color-mix(in srgb,var(--surface) 40%,transparent)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:26px}
.foot-brand p{color:var(--muted);font-size:.9rem;margin-top:8px;max-width:30ch}
.foot nav{display:flex;flex-direction:column;gap:9px}
.foot h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:4px}
.foot nav a{color:var(--muted);font-size:.9rem}
.foot nav a:hover{color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line-s);color:var(--faint);font-size:.82rem;flex-wrap:wrap}
/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:12px 18px;border-radius:12px;
box-shadow:var(--shadow);font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:120;display:flex;align-items:center;gap:9px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
/* responsive */
@media (max-width:920px){
.hero-grid{grid-template-columns:1fr;gap:34px}
.hero-app{transform:none}
.lede{max-width:none}
.feat-grid{grid-template-columns:1fr}
.stage-grid{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
.nav-links{display:none}.nav-cta{display:none}.hamb{display:flex}
}
@media (max-width:480px){
.kpis{grid-template-columns:1fr 1fr}
.fstep{grid-template-columns:84px 1fr}
.foot-grid{grid-template-columns:1fr}
.foot-base{flex-direction:column;gap:6px}
}
.mobnav[hidden]{display:none}(function () {
"use strict";
var prefersReduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- toast ---------- */
var toastEl;
function toast(msg) {
if (!toastEl) {
toastEl = document.createElement("div");
toastEl.className = "toast";
toastEl.setAttribute("role", "status");
document.body.appendChild(toastEl);
}
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastEl._t);
toastEl._t = setTimeout(function () { toastEl.classList.remove("show"); }, 2600);
}
/* ---------- theme toggle ---------- */
var root = document.documentElement;
var themeBtn = document.getElementById("themeBtn");
function applyTheme(t) {
root.setAttribute("data-theme", t);
themeBtn.setAttribute("aria-pressed", String(t === "light"));
var lbl = themeBtn.querySelector(".theme-lbl");
if (lbl) lbl.textContent = t === "light" ? "Dark" : "Light";
}
var stored = null;
try { stored = localStorage.getItem("lumen-theme"); } catch (e) {}
if (!stored) stored = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
applyTheme(stored);
themeBtn.addEventListener("click", function () {
var next = root.getAttribute("data-theme") === "light" ? "dark" : "light";
applyTheme(next);
try { localStorage.setItem("lumen-theme", next); } catch (e) {}
});
/* ---------- mobile nav ---------- */
var hamb = document.getElementById("hamb");
var mobnav = document.getElementById("mobnav");
hamb.addEventListener("click", function () {
var open = hamb.getAttribute("aria-expanded") === "true";
hamb.setAttribute("aria-expanded", String(!open));
if (open) { mobnav.hidden = true; } else { mobnav.hidden = false; }
});
mobnav.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
mobnav.hidden = true;
hamb.setAttribute("aria-expanded", "false");
});
});
/* ---------- count-up KPIs ---------- */
function fmt(n) { return n.toLocaleString("en-US"); }
function countUp(el) {
var target = parseFloat(el.getAttribute("data-count"));
var prefix = el.getAttribute("data-prefix") || "";
var suffix = el.getAttribute("data-suffix") || "";
var div = parseFloat(el.getAttribute("data-div")) || 1;
if (prefersReduce) { el.textContent = prefix + fmt(target / div) + suffix; return; }
var start = performance.now(), dur = 1400;
function step(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
var val = (target * eased) / div;
el.textContent = prefix + fmt(div === 1 ? Math.round(val) : Math.round(val * 10) / 10) + suffix;
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
var kpiSeen = false;
var heroApp = document.querySelector(".hero-app");
if ("IntersectionObserver" in window && heroApp) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting && !kpiSeen) {
kpiSeen = true;
document.querySelectorAll(".kpi-v[data-count]").forEach(countUp);
io.disconnect();
}
});
}, { threshold: 0.4 });
io.observe(heroApp);
} else {
document.querySelectorAll(".kpi-v[data-count]").forEach(countUp);
}
/* ---------- hero view tabs (revenue / usage / funnel) ---------- */
var vtabs = Array.prototype.slice.call(document.querySelectorAll(".vtab"));
var barsDrawn = false;
function drawBars() {
if (barsDrawn) return; barsDrawn = true;
var svg = document.querySelector(".chart.bars");
if (!svg) return;
var vals = [62, 48, 70, 55, 83, 74, 91, 68, 96, 80, 88, 72, 99, 84];
var w = 520, gap = 6, n = vals.length, bw = (w - gap * (n - 1)) / n;
var ns = "http://www.w3.org/2000/svg";
vals.forEach(function (v, i) {
var h = (v / 100) * 150;
var r = document.createElementNS(ns, "rect");
r.setAttribute("x", (i * (bw + gap)).toFixed(1));
r.setAttribute("width", bw.toFixed(1));
r.setAttribute("y", 200);
r.setAttribute("height", 0);
r.setAttribute("rx", 3);
r.setAttribute("fill", i % 2 ? "#5eead4" : "#818cf8");
svg.appendChild(r);
if (prefersReduce) {
r.setAttribute("y", (200 - h).toFixed(1)); r.setAttribute("height", h.toFixed(1));
} else {
setTimeout(function () {
r.style.transition = "y .5s ease, height .5s ease";
r.setAttribute("y", (200 - h).toFixed(1)); r.setAttribute("height", h.toFixed(1));
}, 40 + i * 35);
}
});
}
function setView(view) {
vtabs.forEach(function (t) {
var on = t.getAttribute("data-view") === view;
t.classList.toggle("active", on);
t.setAttribute("aria-selected", String(on));
});
document.querySelectorAll(".panel[data-panel]").forEach(function (p) {
p.hidden = p.getAttribute("data-panel") !== view;
});
if (view === "usage") drawBars();
}
vtabs.forEach(function (t, i) {
t.addEventListener("click", function () { setView(t.getAttribute("data-view")); });
t.addEventListener("keydown", function (e) {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
var dir = e.key === "ArrowRight" ? 1 : -1;
var next = vtabs[(i + dir + vtabs.length) % vtabs.length];
next.focus(); next.click();
});
});
/* ---------- live metric ticker ---------- */
var tickerEl = document.getElementById("ticker");
var metrics = [
{ l: "Queries / min", v: 18420, fluct: 600 },
{ l: "p95 latency", v: 240, suf: " ms", fluct: 30, warn: true },
{ l: "Rows scanned", v: 1240, suf: "M", fluct: 80 },
{ l: "Active pipelines", v: 312, fluct: 4 },
{ l: "Cache hit", v: 94, suf: "%", fluct: 2 },
{ l: "Events ingested", v: 7860, suf: "K", fluct: 200 },
{ l: "Dashboards live", v: 1480, fluct: 6 },
{ l: "Alerts open", v: 3, fluct: 2, warn: true }
];
var tickState = metrics.map(function (m) { return m.v; });
function renderTicker() {
var html = "";
function block() {
metrics.forEach(function (m, i) {
var val = tickState[i];
var str = (m.suf === "M" || m.suf === "K") ? (val / 1).toLocaleString("en-US") : val.toLocaleString("en-US");
html += '<span class="tick' + (m.warn ? " warn" : "") + '"><span class="tdot"></span>' +
m.l + ' <b>' + str + (m.suf || "") + '</b></span>';
});
}
block(); block(); // duplicate for seamless scroll
tickerEl.innerHTML = html;
}
renderTicker();
if (!prefersReduce) {
setInterval(function () {
tickState = metrics.map(function (m, i) {
var delta = Math.round((Math.random() - 0.45) * m.fluct);
var nv = Math.max(m.suf === "%" ? 80 : 1, tickState[i] + delta);
if (m.suf === "%") nv = Math.min(nv, 100);
return nv;
});
renderTicker();
}, 2400);
}
/* ---------- big dashboard stage (finance / growth / ops) ---------- */
var stage = document.getElementById("dashStage");
var dtabs = Array.prototype.slice.call(document.querySelectorAll(".dtab"));
var dashData = {
finance: {
big: { h: "Net revenue", tag: "QTD", v: "$4.82M", sub: "+14.2% vs last quarter" },
spark: [40, 44, 41, 50, 48, 58, 55, 66, 63, 74, 80, 92],
bars: [55, 62, 48, 70, 66, 84, 90],
rows: [
{ nm: "Enterprise", vl: "$2.10M", pill: "ok", pt: "+9%" },
{ nm: "Mid-market", vl: "$1.46M", pill: "ok", pt: "+22%" },
{ nm: "Self-serve", vl: "$0.71M", pill: "warn", pt: "-3%" },
{ nm: "Expansion", vl: "$0.55M", pill: "ok", pt: "+18%" }
]
},
growth: {
big: { h: "Activated users", tag: "30d", v: "38,420", sub: "+6.1% week over week" },
spark: [30, 38, 35, 44, 52, 49, 60, 58, 70, 68, 82, 88],
bars: [40, 52, 60, 58, 72, 80, 95],
rows: [
{ nm: "Signups", vl: "24,800", pill: "ok", pt: "+12%" },
{ nm: "Connected source", vl: "17,608", pill: "ok", pt: "+8%" },
{ nm: "First query", vl: "12,896", pill: "ok", pt: "+5%" },
{ nm: "Shared board", vl: "8,432", pill: "warn", pt: "+1%" }
]
},
ops: {
big: { h: "Pipeline health", tag: "now", v: "99.97%", sub: "312 of 312 pipelines green" },
spark: [90, 92, 88, 95, 96, 94, 98, 97, 99, 98, 99, 100],
bars: [88, 92, 95, 90, 97, 99, 96],
rows: [
{ nm: "Warehouse sync", vl: "120 ms", pill: "ok", pt: "healthy" },
{ nm: "Kafka stream", vl: "38 ms", pill: "ok", pt: "healthy" },
{ nm: "S3 backfill", vl: "running", pill: "warn", pt: "62%" },
{ nm: "Alerting", vl: "0 open", pill: "ok", pt: "clear" }
]
}
};
function sparkPath(vals) {
var w = 320, h = 64, max = Math.max.apply(null, vals), min = Math.min.apply(null, vals);
var span = max - min || 1;
var pts = vals.map(function (v, i) {
var x = (i / (vals.length - 1)) * w;
var y = h - 6 - ((v - min) / span) * (h - 12);
return x.toFixed(1) + "," + y.toFixed(1);
});
return "M" + pts.join(" L");
}
function renderDash(key) {
var d = dashData[key];
var line = sparkPath(d.spark);
var fillD = line + " L320,64 L0,64 Z";
var bars = d.bars.map(function (b) { return '<span class="b" style="height:' + b + '%"></span>'; }).join("");
var rows = d.rows.map(function (r) {
return '<div class="rowi"><span class="nm">' + r.nm + '</span>' +
'<span style="display:flex;gap:10px;align-items:center"><span class="vl">' + r.vl + '</span>' +
'<span class="pill ' + r.pill + '">' + r.pt + '</span></span></div>';
}).join("");
stage.innerHTML =
'<div class="stage-grid">' +
'<div class="card big">' +
'<h4>' + d.big.h + ' <span class="tag">' + d.big.tag + '</span></h4>' +
'<div class="metric-big">' + d.big.v + '</div>' +
'<div class="metric-sub">' + d.big.sub + '</div>' +
'<svg class="spark" viewBox="0 0 320 64" preserveAspectRatio="none" aria-hidden="true">' +
'<defs><linearGradient id="sf" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0" stop-color="#5eead4" stop-opacity=".35"/><stop offset="1" stop-color="#5eead4" stop-opacity="0"/>' +
'</linearGradient></defs>' +
'<path d="' + fillD + '" fill="url(#sf)" stroke="none"/>' +
'<path d="' + line + '"/>' +
'</svg>' +
'</div>' +
'<div class="card"><h4>Weekly trend</h4><div class="barcol">' + bars + '</div></div>' +
'<div class="card"><h4>Breakdown</h4><div class="rows">' + rows + '</div></div>' +
'</div>';
}
function setDash(key) {
dtabs.forEach(function (t) {
var on = t.getAttribute("data-dash") === key;
t.classList.toggle("active", on);
t.setAttribute("aria-selected", String(on));
});
renderDash(key);
}
dtabs.forEach(function (t, i) {
t.addEventListener("click", function () { setDash(t.getAttribute("data-dash")); });
t.addEventListener("keydown", function (e) {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
var dir = e.key === "ArrowRight" ? 1 : -1;
var next = dtabs[(i + dir + dtabs.length) % dtabs.length];
next.focus(); next.click();
});
});
setDash("finance");
/* ---------- CTA form ---------- */
var form = document.getElementById("ctaForm");
var email = document.getElementById("email");
form.addEventListener("submit", function (e) {
e.preventDefault();
var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim());
if (!ok) {
email.classList.add("bad");
email.focus();
toast("Enter a valid work email");
return;
}
email.classList.remove("bad");
toast("Thanks — we'll reach out to schedule your demo");
form.reset();
});
email.addEventListener("input", function () { email.classList.remove("bad"); });
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumen — Analytics & Data Platform</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="nav" role="banner">
<div class="wrap nav-inner">
<a class="brand" href="#main" aria-label="Lumen home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 32 32" width="28" height="28">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#5eead4"/><stop offset="1" stop-color="#818cf8"/>
</linearGradient>
</defs>
<rect x="4" y="16" width="5" height="12" rx="2" fill="url(#bg)"/>
<rect x="13" y="9" width="5" height="19" rx="2" fill="url(#bg)"/>
<rect x="22" y="3" width="5" height="25" rx="2" fill="url(#bg)"/>
</svg>
</span>
<span class="brand-name">Lumen</span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#features">Platform</a>
<a href="#pipelines">Pipelines</a>
<a href="#dash">Dashboards</a>
<a href="#logos">Customers</a>
</nav>
<div class="nav-cta">
<button class="btn ghost" id="themeBtn" type="button" aria-pressed="false">
<span class="theme-ico" aria-hidden="true">◐</span><span class="theme-lbl">Theme</span>
</button>
<a class="btn" href="#cta">Book a demo</a>
</div>
<button class="hamb" id="hamb" type="button" aria-label="Menu" aria-expanded="false" aria-controls="mobnav">
<span></span><span></span><span></span>
</button>
</div>
<nav class="mobnav" id="mobnav" aria-label="Mobile" hidden>
<a href="#features">Platform</a>
<a href="#pipelines">Pipelines</a>
<a href="#dash">Dashboards</a>
<a href="#logos">Customers</a>
<a class="btn" href="#cta">Book a demo</a>
</nav>
</header>
<main id="main">
<!-- HERO -->
<section class="hero" aria-labelledby="hero-h">
<div class="wrap hero-grid">
<div class="hero-copy">
<span class="eyebrow"><span class="dot" aria-hidden="true"></span> Live query engine · sub-second</span>
<h1 id="hero-h">Every metric, every pipeline — <span class="grad">answered in real time.</span></h1>
<p class="lede">Lumen unifies your warehouse, streams and events into one fast semantic layer. Ask in SQL or natural language, build dashboards your whole team trusts.</p>
<div class="hero-actions">
<a class="btn lg" href="#cta">Book a demo</a>
<a class="btn ghost lg" href="#dash">Explore dashboards</a>
</div>
<ul class="hero-trust">
<li><strong>99.99%</strong> query uptime</li>
<li><strong>1.2T</strong> rows scanned / day</li>
<li><strong>SOC 2</strong> Type II</li>
</ul>
</div>
<!-- SVG dashboard mockup -->
<div class="hero-app" role="img" aria-label="Analytics dashboard preview showing revenue, area chart and KPI cards">
<div class="app-chrome">
<span class="dotrow" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="app-url">app.lumen.io / overview</span>
</div>
<div class="app-body">
<div class="app-tabs" role="tablist" aria-label="Dashboard view">
<button class="vtab active" role="tab" aria-selected="true" data-view="revenue">Revenue</button>
<button class="vtab" role="tab" aria-selected="false" data-view="usage">Usage</button>
<button class="vtab" role="tab" aria-selected="false" data-view="funnel">Funnel</button>
</div>
<div class="kpis">
<div class="kpi"><span class="kpi-l">MRR</span><span class="kpi-v" data-count="148200" data-prefix="$">$0</span><span class="kpi-d up">▲ 12.4%</span></div>
<div class="kpi"><span class="kpi-l">Active</span><span class="kpi-v" data-count="38420">0</span><span class="kpi-d up">▲ 6.1%</span></div>
<div class="kpi"><span class="kpi-l">Churn</span><span class="kpi-v" data-count="18" data-suffix="%" data-div="10">0%</span><span class="kpi-d down">▼ 0.3%</span></div>
</div>
<!-- swappable chart panels -->
<div class="panel" data-panel="revenue">
<div class="panel-head"><span>Revenue · last 12 mo</span><span class="legend"><i class="lg-a"></i>Net <i class="lg-b"></i>New</span></div>
<svg class="chart area" viewBox="0 0 520 200" preserveAspectRatio="none" aria-hidden="true">
<defs>
<linearGradient id="fillA" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#818cf8" stop-opacity=".55"/><stop offset="1" stop-color="#818cf8" stop-opacity="0"/>
</linearGradient>
<linearGradient id="fillB" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#5eead4" stop-opacity=".4"/><stop offset="1" stop-color="#5eead4" stop-opacity="0"/>
</linearGradient>
</defs>
<g class="grid"><line x1="0" y1="50" x2="520" y2="50"/><line x1="0" y1="100" x2="520" y2="100"/><line x1="0" y1="150" x2="520" y2="150"/></g>
<path class="apath" d="M0,160 L47,150 L94,158 L141,130 L188,135 L235,108 L282,112 L329,82 L376,90 L423,58 L470,64 L520,40 L520,200 L0,200 Z" fill="url(#fillA)"/>
<path class="aline" d="M0,160 L47,150 L94,158 L141,130 L188,135 L235,108 L282,112 L329,82 L376,90 L423,58 L470,64 L520,40" fill="none" stroke="#818cf8" stroke-width="2.5"/>
<path class="bpath" d="M0,180 L47,176 L94,182 L141,168 L188,172 L235,158 L282,162 L329,148 L376,152 L423,138 L470,142 L520,128 L520,200 L0,200 Z" fill="url(#fillB)"/>
<path class="bline" d="M0,180 L47,176 L94,182 L141,168 L188,172 L235,158 L282,162 L329,148 L376,152 L423,138 L470,142 L520,128" fill="none" stroke="#5eead4" stroke-width="2"/>
</svg>
</div>
<div class="panel" data-panel="usage" hidden>
<div class="panel-head"><span>Events / hour</span><span class="legend"><i class="lg-a"></i>Ingest</span></div>
<svg class="chart bars" viewBox="0 0 520 200" aria-hidden="true">
<g class="grid"><line x1="0" y1="50" x2="520" y2="50"/><line x1="0" y1="100" x2="520" y2="100"/><line x1="0" y1="150" x2="520" y2="150"/></g>
</svg>
</div>
<div class="panel" data-panel="funnel" hidden>
<div class="panel-head"><span>Activation funnel</span><span class="legend">conversion</span></div>
<div class="funnel">
<div class="fstep"><span class="fl">Signup</span><span class="fbar" style="--w:100%"><b>24,800</b></span></div>
<div class="fstep"><span class="fl">Connected source</span><span class="fbar" style="--w:71%"><b>17,608</b></span></div>
<div class="fstep"><span class="fl">First query</span><span class="fbar" style="--w:52%"><b>12,896</b></span></div>
<div class="fstep"><span class="fl">Shared dashboard</span><span class="fbar" style="--w:34%"><b>8,432</b></span></div>
<div class="fstep"><span class="fl">Paid</span><span class="fbar" style="--w:19%"><b>4,712</b></span></div>
</div>
</div>
</div>
</div>
</div>
<!-- live metric ticker -->
<div class="ticker" aria-label="Live platform metrics" aria-live="polite">
<div class="ticker-track" id="ticker"></div>
</div>
</section>
<!-- LOGOS -->
<section class="logos" id="logos" aria-label="Trusted by">
<div class="wrap">
<p class="logos-cap">Powering analytics for data teams at</p>
<ul class="logo-row">
<li>Northwind</li><li>Vertex Labs</li><li>Cobalt</li><li>Meridian</li><li>Helio</li><li>Quanta</li>
</ul>
</div>
</section>
<!-- FEATURES -->
<section class="features" id="features" aria-labelledby="feat-h">
<div class="wrap">
<header class="sec-head">
<span class="kicker">The platform</span>
<h2 id="feat-h">One layer from raw events to board-ready insight</h2>
<p>Connect any source, model once, and serve every downstream tool from a single fast engine.</p>
</header>
<div class="feat-grid" id="pipelines">
<article class="feat">
<span class="feat-ico" aria-hidden="true">⇄</span>
<h3>Pipelines</h3>
<p>Stream from Postgres, Kafka, S3 and 200+ connectors with schema drift detection and replay.</p>
<code class="feat-code">source → transform → materialize</code>
</article>
<article class="feat">
<span class="feat-ico" aria-hidden="true">⌘</span>
<h3>Queries</h3>
<p>Sub-second SQL on petabyte tables, plus an ask-in-English layer that compiles to governed SQL.</p>
<code class="feat-code">SELECT mrr FROM growth</code>
</article>
<article class="feat">
<span class="feat-ico" aria-hidden="true">▦</span>
<h3>Dashboards</h3>
<p>Versioned, shareable boards with row-level access, alerts and embeddable widgets.</p>
<code class="feat-code">publish · alert · embed</code>
</article>
</div>
</div>
</section>
<!-- DASHBOARD TAB SWAP (large) -->
<section class="dash" id="dash" aria-labelledby="dash-h">
<div class="wrap">
<header class="sec-head">
<span class="kicker">Built for every team</span>
<h2 id="dash-h">Switch the lens, keep the truth</h2>
<p>The same governed model powers finance, growth and ops — pick a view.</p>
</header>
<div class="dash-tabs" role="tablist" aria-label="Team dashboards">
<button class="dtab active" role="tab" aria-selected="true" data-dash="finance">Finance</button>
<button class="dtab" role="tab" aria-selected="false" data-dash="growth">Growth</button>
<button class="dtab" role="tab" aria-selected="false" data-dash="ops">Ops</button>
</div>
<div class="dash-stage" id="dashStage" role="tabpanel"></div>
</div>
</section>
<!-- CTA -->
<section class="cta" id="cta" aria-labelledby="cta-h">
<div class="wrap cta-card">
<div class="cta-glow" aria-hidden="true"></div>
<h2 id="cta-h">See your own data answer back</h2>
<p>Book a 30-minute demo and we'll wire a live pipeline to your warehouse — no slides, real numbers.</p>
<form class="cta-form" id="ctaForm" novalidate>
<label class="sr" for="email">Work email</label>
<input id="email" name="email" type="email" placeholder="you@company.com" autocomplete="email" required />
<button class="btn lg" type="submit">Book a demo</button>
</form>
<p class="cta-fine">No credit card. SOC 2 Type II. EU & US data residency.</p>
</div>
</section>
</main>
<footer class="foot" role="contentinfo">
<div class="wrap foot-grid">
<div class="foot-brand">
<span class="brand-name">Lumen</span>
<p>The real-time analytics layer for data teams.</p>
</div>
<nav aria-label="Product"><h4>Product</h4><a href="#features">Pipelines</a><a href="#dash">Dashboards</a><a href="#features">Query engine</a></nav>
<nav aria-label="Company"><h4>Company</h4><a href="#logos">Customers</a><a href="#cta">Contact</a><a href="#main">Security</a></nav>
<nav aria-label="Resources"><h4>Resources</h4><a href="#main">Docs</a><a href="#main">API</a><a href="#main">Status</a></nav>
</div>
<div class="wrap foot-base"><span>© 2026 Lumen Data, Inc. · Fictional demo.</span><span>Made with inline SVG, no chart libs.</span></div>
</footer>
<script src="script.js"></script>
</body>
</html>Analytics / Data Platform Landing
A dense, data-rich marketing home for Lumen, a fictional real-time analytics and data platform. The dark, chart-gradient palette leads with a hero whose product preview is rendered entirely in inline SVG and CSS — a faux app window with count-up KPI cards (MRR, active users, churn), animated gradient area charts, an event bar chart, and a CSS activation funnel. Arrow-key-navigable tabs swap the preview between Revenue, Usage and Funnel views.
A live-ish metric ticker scrolls and self-updates every couple of seconds with fluctuating queries-per-minute, latency and ingest numbers. Further down, a logo cloud, a three-feature section covering pipelines, queries and dashboards, and a large team-dashboard let you switch between Finance, Growth and Ops lenses — each re-rendering its sparkline, bar column and breakdown rows from data. The page closes with a gradient demo CTA that validates the work email before confirming.
Everything is vanilla JS: a persisted light/dark theme toggle that respects prefers-color-scheme, IntersectionObserver-driven count-ups, keyboard-accessible tablists, a toast() helper, and full reduced-motion support. The layout collapses gracefully to ~360px.
Illustrative SaaS UI only — fictional product, metrics, and billing. No real backend.