SchOS/docs/Website/niveus/examples/ai-landing/index.html
Nexoniarz a8215149a3 docs/Website: Niveus at upstream f340d56; fonts are binary
The vendored copy of Niveus, the site's design system, brought up to
the current upstream (github.com/Nexoniarz/Niveus, 2026-10-18). The
tree under docs/Website/niveus is upstream's byte for byte.

.gitattributes says `* text eol=lf` and listed the binary types it
knew, and woff2 was not one of them: Niveus's InstrumentSans-Italic
had a CR LF pair in its compressed data, and committing it turned that
into LF and the font into garbage. woff, woff2, otf, ico, gif, webp,
pdf and wasm are binary now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S1giNvrHTrPMPw7V6x1kQ4
2026-10-23 15:11:20 +02:00

468 lines
19 KiB
HTML
Vendored

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumen — an AI product landing page built with Niveus</title>
<!-- The system, and its optional continuity helpers. -->
<link rel="stylesheet" href="../../dist/niveus.css">
<script src="../../niveus/niveus.js" defer></script>
<!-- This page's own layout. No colors, no shadows, no type sizes. -->
<link rel="stylesheet" href="app.css">
<script>
/* Applied before first paint so the page never renders in the wrong
appearance and then corrects itself. */
try {
var saved = localStorage.getItem("lumen-theme");
if (saved && saved !== "system") document.documentElement.setAttribute("data-theme", saved);
} catch (error) { /* storage unavailable — follow the system */ }
</script>
<!-- The entire identity of this site is one declaration. -->
<style>
:root { --nv-brand: #6d5efc; }
</style>
</head>
<body>
<nav class="nv-nav" id="topnav" aria-label="Main" style="--nv-selection-name: nv-lumen-nav">
<a class="nv-nav__brand" href="#top">
<svg class="nv-nav__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 3v18M3 12h18M6 6l12 12M18 6L6 18" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round"/>
</svg>
Lumen
</a>
<ul class="nv-nav__list" data-nv-travel>
<li><a class="nv-nav__item" href="#features" aria-current="page">Features</a></li>
<li><a class="nv-nav__item" href="#build">Build</a></li>
<li><a class="nv-nav__item" href="#pricing">Pricing</a></li>
<li><a class="nv-nav__item" href="#faq">FAQ</a></li>
</ul>
<span class="nv-nav__spacer"></span>
<div class="nv-button-group" role="group" aria-label="Appearance">
<button class="nv-button nv-button--sm" data-nv-theme="light" aria-pressed="false">Light</button>
<button class="nv-button nv-button--sm" data-nv-theme="dark" aria-pressed="false">Dark</button>
<button class="nv-button nv-button--sm" data-nv-theme="system" aria-pressed="true">Auto</button>
</div>
<a class="nv-button nv-button--sm nv-button--primary" href="#pricing">Get started</a>
</nav>
<main id="top">
<!-- ================================================================== -->
<header class="shell hero">
<div class="hero__copy">
<span class="nv-badge nv-badge--accent">
<span class="nv-badge__dot"></span>
Lumen 2 is available
</span>
<h1 class="nv-display hero__title">The model that reads your whole codebase.</h1>
<p class="nv-prose">
Lumen answers questions about the systems you actually run — not a
snapshot of them. Point it at a repository and it keeps up as the code
changes.
</p>
<div class="nv-cluster">
<a class="nv-button nv-button--primary nv-button--lg" href="#pricing">Start free</a>
<button class="nv-button nv-button--lg" data-nv-dialog="demo">Watch a demo</button>
</div>
<p class="nv-caption">No card required · 14-day trial · SOC 2 Type II</p>
</div>
<div class="nv-bed nv-bed--single">
<span class="nv-bed__label">Live preview</span>
<div class="preview">
<div class="bubble bubble--from-user nv-material-elevated">
Why did checkout latency double after Tuesday's deploy?
</div>
<div class="nv-card nv-card--frosted bubble bubble--from-agent"
style="max-inline-size: 100%; padding: var(--nv-space-4)">
<p class="nv-body">
The <code class="nv-code">pricing</code> service started resolving
tax rules per line item instead of per cart in
<code class="nv-code">#4412</code>. Two of three carts hit the slow
path.
</p>
<div class="nv-cluster nv-cluster--tight" style="margin-block-start: var(--nv-space-3)">
<span class="nv-badge nv-badge--warning">p95 +118%</span>
<span class="nv-badge">3 files</span>
</div>
</div>
<div class="bubble bubble--from-user nv-material-elevated">
Open a PR that reverts just that change.
</div>
</div>
</div>
</header>
<!-- ================================================================== -->
<section class="shell">
<div class="logos">
<span class="nv-overline">Northwire</span>
<span class="nv-overline">Harbour</span>
<span class="nv-overline">Greenhouse Labs</span>
<span class="nv-overline">Quarry</span>
<span class="nv-overline">Signal Systems</span>
</div>
</section>
<!-- ================================================================== -->
<section class="shell section" id="features">
<div class="section__head">
<span class="nv-overline">Why teams switch</span>
<h2 class="nv-heading">Built for the code you already have.</h2>
<p class="nv-prose">
Three things matter when a model works on a real system: that it sees
the current state, that it explains itself, and that it cannot quietly
do something irreversible.
</p>
</div>
<div class="features">
<article class="nv-card">
<div class="nv-card__body">
<span class="feature__icon">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="2"
stroke-linecap="round"/>
</svg>
</span>
<h3 class="nv-title">Always current</h3>
<p style="margin-block-start: var(--nv-space-2)">
Indexes on every push, so answers describe the branch you are on
rather than the one it was trained on.
</p>
</div>
</article>
<article class="nv-card">
<div class="nv-card__body">
<span class="feature__icon">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="2"/>
<path d="M16 16l4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
<h3 class="nv-title">Shows its work</h3>
<p style="margin-block-start: var(--nv-space-2)">
Every claim links to the lines it came from. If it cannot cite a
file, it says so instead of guessing.
</p>
</div>
</article>
<article class="nv-card">
<div class="nv-card__body">
<span class="feature__icon">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z" stroke="currentColor"
stroke-width="2" stroke-linejoin="round"/>
</svg>
</span>
<h3 class="nv-title">Asks before it acts</h3>
<p style="margin-block-start: var(--nv-space-2)">
Writes, merges and deploys are proposals until a human approves
them. Read access is the default.
</p>
</div>
</article>
</div>
</section>
<!-- ================================================================== -->
<section class="shell section" id="build">
<div class="section__head">
<span class="nv-overline">What teams build</span>
<h2 class="nv-heading">One model, several jobs.</h2>
</div>
<div class="nv-scroller-frame" data-nv-scroller>
<div class="nv-scroller">
<article class="nv-card nv-card--interactive">
<div class="nv-card__header"><div>
<h3 class="nv-card__title">Incident triage</h3>
<p class="nv-card__subtitle">Platform teams</p>
</div></div>
<div class="nv-card__body">
Correlates a regression with the change that caused it, and drafts
the revert.
</div>
</article>
<article class="nv-card nv-card--interactive">
<div class="nv-card__header"><div>
<h3 class="nv-card__title">Review assistant</h3>
<p class="nv-card__subtitle">Every repository</p>
</div></div>
<div class="nv-card__body">
Reads the diff in the context of the whole system, not just the
files that changed.
</div>
</article>
<article class="nv-card nv-card--interactive">
<div class="nv-card__header"><div>
<h3 class="nv-card__title">Migration planning</h3>
<p class="nv-card__subtitle">Staff engineers</p>
</div></div>
<div class="nv-card__body">
Finds every call site, groups them by risk, and sequences the work.
</div>
</article>
<article class="nv-card nv-card--interactive">
<div class="nv-card__header"><div>
<h3 class="nv-card__title">Onboarding</h3>
<p class="nv-card__subtitle">New joiners</p>
</div></div>
<div class="nv-card__body">
Answers "why is this here" with the commit, the review and the
issue behind it.
</div>
</article>
<article class="nv-card nv-card--interactive">
<div class="nv-card__header"><div>
<h3 class="nv-card__title">Dependency audits</h3>
<p class="nv-card__subtitle">Security</p>
</div></div>
<div class="nv-card__body">
Separates the advisories that reach your code from the ones that
do not.
</div>
</article>
</div>
<button class="nv-button nv-button--icon nv-button--float" data-nv-scroll="prev" aria-label="Previous">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button class="nv-button nv-button--icon nv-button--float" data-nv-scroll="next" aria-label="Next">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M10 6l6 6-6 6" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</section>
<!-- ================================================================== -->
<section class="shell section" id="pricing">
<div class="section__head section__head--center">
<span class="nv-overline">Pricing</span>
<h2 class="nv-heading">Per seat, not per question.</h2>
<p class="nv-prose">
Usage limits make people ration the tool that is supposed to save them
time.
</p>
</div>
<div class="pricing">
<article class="nv-card">
<div class="nv-card__body">
<h3 class="nv-title">Starter</h3>
<p class="nv-caption">For a single repository.</p>
<p class="price">
<span class="price__amount">$0</span>
<span class="nv-caption">forever</span>
</p>
<ul class="plan-features nv-caption">
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> One repository</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Community support</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Read-only access</li>
</ul>
</div>
<div class="nv-card__footer">
<button class="nv-button nv-button--block">Start free</button>
</div>
</article>
<article class="nv-card nv-card--floating">
<div class="nv-card__body">
<div class="nv-cluster nv-cluster--between">
<h3 class="nv-title">Team</h3>
<span class="nv-badge nv-badge--accent nv-badge--solid">Most chosen</span>
</div>
<p class="nv-caption">For a codebase several people touch.</p>
<p class="price">
<span class="price__amount">$24</span>
<span class="nv-caption">per seat / month</span>
</p>
<ul class="plan-features nv-caption">
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Unlimited repositories</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Pull request proposals</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Shared context across the team</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> SSO and audit log</li>
</ul>
</div>
<div class="nv-card__footer">
<button class="nv-button nv-button--primary nv-button--block">Start 14-day trial</button>
</div>
</article>
<article class="nv-card">
<div class="nv-card__body">
<h3 class="nv-title">Enterprise</h3>
<p class="nv-caption">For code that cannot leave your network.</p>
<p class="price">
<span class="price__amount">Talk</span>
<span class="nv-caption">to us</span>
</p>
<ul class="plan-features nv-caption">
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Self-hosted or VPC</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Custom retention</li>
<li><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Named support engineer</li>
</ul>
</div>
<div class="nv-card__footer">
<button class="nv-button nv-button--block">Contact sales</button>
</div>
</article>
</div>
</section>
<!-- ================================================================== -->
<section class="shell section" id="faq">
<div class="section__head">
<span class="nv-overline">Questions</span>
<h2 class="nv-heading">Before you ask.</h2>
</div>
<div class="nv-disclosure-group" style="max-inline-size: var(--nv-measure-wide)">
<details class="nv-disclosure" open>
<summary class="nv-disclosure__summary">
Do you train on our code?
<span class="nv-disclosure__chevron" aria-hidden="true"></span>
</summary>
<div class="nv-disclosure__body">
No. Repository contents are used to answer your team's questions and
nothing else. Enterprise plans can run entirely inside your own
network, where the question never leaves it either.
</div>
</details>
<details class="nv-disclosure">
<summary class="nv-disclosure__summary">
What happens when it is wrong?
<span class="nv-disclosure__chevron" aria-hidden="true"></span>
</summary>
<div class="nv-disclosure__body">
Every answer cites the files it drew on, so a wrong answer is
checkable rather than merely confident. Anything that writes is a
proposal until a person approves it.
</div>
</details>
<details class="nv-disclosure">
<summary class="nv-disclosure__summary">
How large a codebase can it handle?
<span class="nv-disclosure__chevron" aria-hidden="true"></span>
</summary>
<div class="nv-disclosure__body">
The largest repository we index in production is around eleven
million lines. Indexing is incremental, so size affects the first
run far more than the ones after it.
</div>
</details>
</div>
</section>
<!-- ================================================================== -->
<section class="shell">
<div class="nv-bed nv-bed--vivid closing">
<h2 class="nv-heading">Point it at a repository.</h2>
<p class="nv-prose">
The first answer usually arrives before the tour would have finished.
</p>
<div class="nv-cluster">
<a class="nv-button nv-button--primary nv-button--lg" href="#pricing">Start free</a>
<button class="nv-button nv-button--lg nv-button--frosted" data-nv-dialog="demo">
Watch a demo
</button>
</div>
</div>
</section>
<footer class="shell site-footer">
<div class="nv-cluster nv-cluster--between">
<span class="nv-caption">Lumen — an example interface built with Niveus.</span>
<span class="nv-caption">Made by Nexoniarz</span>
</div>
</footer>
</main>
<dialog class="nv-dialog" id="demo" aria-labelledby="demo-title">
<div class="nv-dialog__header">
<div>
<h2 class="nv-dialog__title" id="demo-title">A two-minute tour</h2>
<p class="nv-dialog__description">
This dialog expanded from the button you pressed, and the page behind
it is blurred rather than hidden.
</p>
</div>
<button class="nv-button nv-button--ghost nv-button--icon nv-dialog__close"
aria-label="Close" data-nv-close>
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
<div class="nv-dialog__body">
<div class="nv-bed nv-bed--quiet" style="display: grid; place-items: center; min-block-size: 12rem">
<span class="nv-caption">Where the video would be.</span>
</div>
</div>
<div class="nv-dialog__footer">
<button class="nv-button" data-nv-close>Close</button>
<a class="nv-button nv-button--primary" href="#pricing" data-nv-close>Start free</a>
</div>
</dialog>
<script>
document.addEventListener("DOMContentLoaded", () => {
/* niveus.js wires the appearance buttons; the page decides what
"remember it" means. */
document.documentElement.addEventListener("nv:theme", (event) => {
try { localStorage.setItem("lumen-theme", event.detail.theme); } catch {}
});
nv.syncThemeControls(document.documentElement.getAttribute("data-theme") || "system");
/* The nav's selection travels to whatever section you jump to. */
const nav = document.querySelector("[data-nv-travel]");
nav.addEventListener("click", (event) => {
const item = event.target.closest(".nv-nav__item");
if (!item || item.hasAttribute("aria-current")) return;
nv.transition(() => {
nav.querySelectorAll("[aria-current]").forEach((el) => el.removeAttribute("aria-current"));
item.setAttribute("aria-current", "page");
}, { scope: nav });
});
/* The bar earns its shadow only once content has passed under it. */
const topnav = document.getElementById("topnav");
const onScroll = () => topnav.toggleAttribute("data-scrolled", scrollY > 8);
addEventListener("scroll", onScroll, { passive: true });
onScroll();
});
</script>
</body>
</html>