Pages Medium
AI Product — Code Assistant Landing
A developer-native marketing landing page for Cortex, a fictional AI coding assistant. Built on a dark editor theme with mono headlines and syntax-highlight accents, it pairs a self-typing fake code editor hero with a supported-languages strip, a four-feature grid, a tabbed live demo that switches between completion, repo chat and fix modes, a copyable install snippet, developer testimonials, a monthly-yearly pricing table, a closing CTA and footer. Pure HTML, CSS and vanilla JS.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
/* ===== Cortex — AI Code Assistant landing ===== */
:root {
/* surfaces */
--bg: #0d1117;
--bg-2: #0a0e14;
--panel: #161b22;
--panel-2: #11161d;
--line: #21262d;
--line-soft: #1b2027;
/* text */
--fg: #e6edf3;
--fg-dim: #9aa6b2;
--fg-faint: #6e7681;
/* syntax accents */
--green: #3fb950;
--blue: #58a6ff;
--purple: #bc8cff;
--orange: #ffa657;
--red: #ff7b72;
--yellow: #e3b341;
--cyan: #56d4dd;
/* fx */
--grad: linear-gradient(120deg, var(--green), var(--cyan) 55%, var(--blue));
--glow: 0 0 0 1px rgba(63,185,80,.4), 0 18px 50px -20px rgba(63,185,80,.5);
--shadow: 0 24px 60px -24px rgba(0,0,0,.7);
--radius: 14px;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--wrap: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed; inset: 0;
background:
radial-gradient(800px 500px at 78% -5%, rgba(63,185,80,.10), transparent 60%),
radial-gradient(700px 480px at 8% 8%, rgba(88,166,255,.10), transparent 60%);
pointer-events: none; z-index: 0;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; position: relative; z-index: 1; }
/* ===== buttons ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--mono); font-weight: 600; font-size: .92rem;
padding: .72rem 1.25rem; border-radius: 10px; border: 1px solid transparent;
cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
white-space: nowrap;
}
.btn--solid { background: var(--green); color: #052e10; box-shadow: 0 10px 30px -12px rgba(63,185,80,.7); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(63,185,80,.8); }
.btn--ghost { border-color: var(--line); color: var(--fg); background: rgba(255,255,255,.02); }
.btn--ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.btn--lg { padding: .9rem 1.6rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* ===== nav ===== */
.nav {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(12px);
background: rgba(13,17,23,.55);
border-bottom: 1px solid transparent;
transition: background .25s, border-color .25s;
}
.nav.is-scrolled { background: rgba(10,14,20,.9); border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--mono); font-weight: 800; }
.brand__glyph { color: var(--green); font-size: 1.05rem; }
.brand__name { font-size: 1.15rem; letter-spacing: -.04em; }
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links > a { font-size: .92rem; color: var(--fg-dim); font-weight: 500; transition: color .2s; }
.nav__links > a:hover { color: var(--fg); }
.nav__cta { color: var(--fg) !important; }
.nav__btn { color: #052e10 !important; }
.nav__toggle {
display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav__toggle span { width: 22px; height: 2px; background: var(--fg); border-radius: 2px; transition: .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== hero ===== */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 3rem; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--mono); font-size: .8rem; color: var(--fg-dim);
border: 1px solid var(--line); background: var(--panel-2); padding: .4rem .8rem; border-radius: 999px;
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(63,185,80,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63,185,80,.6); } 70% { box-shadow: 0 0 0 9px rgba(63,185,80,0); } 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); } }
.hero__copy h1 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); font-weight: 800; margin: 1.2rem 0; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: 1.12rem; color: var(--fg-dim); max-width: 34ch; }
.hero__cta { display: flex; gap: .8rem; margin: 1.8rem 0 1rem; flex-wrap: wrap; }
.hero__note { font-family: var(--mono); font-size: .78rem; color: var(--fg-faint); }
/* fake editor */
.editor {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden; position: relative;
transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
transition: transform .4s ease;
}
.editor:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.editor__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot--r { background: #ff5f56; } .dot--y { background: #ffbd2e; } .dot--g { background: #27c93f; }
.editor__file { margin-left: .6rem; font-family: var(--mono); font-size: .8rem; color: var(--fg-dim); }
.editor__badge { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--green); border: 1px solid rgba(63,185,80,.35); padding: .15rem .5rem; border-radius: 6px; }
.editor__code {
margin: 0; padding: 1.2rem 1.3rem; min-height: 250px;
font-family: var(--mono); font-size: .9rem; line-height: 1.75; color: var(--fg);
white-space: pre-wrap; word-break: break-word; tab-size: 2;
}
.caret { display: inline-block; width: 8px; height: 1.05em; background: var(--green); vertical-align: text-bottom; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.editor__ghost { font-family: var(--mono); font-size: .72rem; color: var(--fg-faint); padding: .5rem 1.3rem 1rem; border-top: 1px solid var(--line-soft); }
/* syntax classes used in typed code */
.t-key { color: var(--red); } .t-fn { color: var(--purple); } .t-str { color: var(--cyan); }
.t-type { color: var(--orange); } .t-var { color: var(--blue); } .t-cmt { color: var(--fg-faint); } .t-num { color: var(--cyan); }
.t-ghost { color: var(--green); opacity: .85; }
/* languages strip */
.strip { margin-top: 3.5rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 1.6rem; }
.strip__label { font-family: var(--mono); font-size: .82rem; color: var(--fg-faint); }
.strip__langs { display: flex; flex-wrap: wrap; gap: .5rem .7rem; }
.strip__langs li { font-family: var(--mono); font-size: .82rem; color: var(--fg-dim); border: 1px solid var(--line); padding: .25rem .6rem; border-radius: 7px; transition: .2s; }
.strip__langs li:hover { color: var(--green); border-color: rgba(63,185,80,.4); }
/* ===== logos ===== */
.logos { padding: 2.5rem 0; border-block: 1px solid var(--line-soft); background: var(--bg-2); }
.logos__label { text-align: center; font-family: var(--mono); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-faint); }
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.8rem; margin-top: 1.2rem; }
.logos__row li { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: var(--fg-faint); opacity: .8; transition: .2s; }
.logos__row li:hover { color: var(--fg); opacity: 1; }
/* ===== sections ===== */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.section__head { max-width: 640px; margin-bottom: 2.8rem; }
.kicker { font-family: var(--mono); font-size: .82rem; color: var(--green); margin-bottom: .8rem; }
.section__head h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); font-weight: 800; }
.section__sub { color: var(--fg-dim); font-size: 1.05rem; margin-top: .9rem; }
.grid { display: grid; gap: 1.2rem; }
.grid--feat { grid-template-columns: repeat(4, 1fr); }
.grid--quote { grid-template-columns: repeat(3, 1fr); }
.grid--price { grid-template-columns: repeat(3, 1fr); align-items: start; }
/* feature cards */
.card {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.6rem 1.4rem; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(88,166,255,.35); box-shadow: var(--shadow); }
.card__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; font-size: 1.3rem; margin-bottom: 1rem; font-family: var(--mono); }
.card__ico[data-c="green"] { color: var(--green); background: rgba(63,185,80,.12); }
.card__ico[data-c="blue"] { color: var(--blue); background: rgba(88,166,255,.12); }
.card__ico[data-c="purple"] { color: var(--purple); background: rgba(188,140,255,.12); }
.card__ico[data-c="orange"] { color: var(--orange); background: rgba(255,166,87,.12); }
.card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card p { color: var(--fg-dim); font-size: .95rem; }
/* ===== demo ===== */
.demo { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.demo__tabs { display: flex; gap: .3rem; padding: .6rem .6rem 0; background: var(--panel-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab {
font-family: var(--mono); font-size: .85rem; color: var(--fg-dim); background: none;
border: 1px solid transparent; border-bottom: 0; padding: .6rem 1rem; border-radius: 9px 9px 0 0; cursor: pointer; transition: .2s;
}
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--green); background: var(--panel); border-color: var(--line); }
.tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.demo__panels { padding: 1.4rem; min-height: 240px; }
.panel { animation: fade .35s ease; }
.panel[hidden] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.code-block { margin: 0; font-family: var(--mono); font-size: .92rem; line-height: 1.85; color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.c-key { color: var(--red); } .c-fn { color: var(--purple); } .c-var { color: var(--blue); } .c-type { color: var(--orange); }
.c-ghost { color: var(--green); opacity: .8; } .c-cmt { color: var(--fg-faint); } .c-prompt { color: var(--green); }
.c-out { color: var(--fg-dim); } .c-add { color: var(--green); } .c-del { color: var(--red); text-decoration: none; }
/* chat */
.chat { display: flex; flex-direction: column; gap: 1rem; }
.chat__row { display: flex; gap: .75rem; }
.chat__who { font-family: var(--mono); font-size: .72rem; color: var(--fg-faint); flex: 0 0 48px; padding-top: .2rem; }
.chat__row p { background: var(--panel-2); border: 1px solid var(--line); padding: .7rem .9rem; border-radius: 11px; font-size: .94rem; color: var(--fg); max-width: 56ch; }
.chat__row--ai p { border-color: rgba(88,166,255,.3); }
.chat__row code { font-family: var(--mono); color: var(--cyan); font-size: .85em; }
.chat__ok { color: var(--green); font-family: var(--mono); font-size: .82rem; }
/* ===== install ===== */
.install { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.install__steps { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .9rem; }
.install__steps li { display: flex; align-items: center; gap: .8rem; color: var(--fg-dim); font-size: 1rem; }
.install__steps span { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(63,185,80,.14); color: var(--green); font-family: var(--mono); font-size: .8rem; font-weight: 700; }
.install__steps code { font-family: var(--mono); color: var(--cyan); background: var(--panel-2); padding: .1rem .4rem; border-radius: 5px; }
.cli { background: #06090e; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cli__bar { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; background: var(--panel-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .78rem; color: var(--fg-faint); }
.copy { font-family: var(--mono); font-size: .76rem; color: var(--fg-dim); background: none; border: 1px solid var(--line); padding: .25rem .6rem; border-radius: 6px; cursor: pointer; transition: .2s; }
.copy:hover { color: var(--green); border-color: rgba(63,185,80,.4); }
.copy.is-done { color: var(--green); border-color: var(--green); }
.cli__code { margin: 0; padding: 1.1rem 1.2rem; font-family: var(--mono); font-size: .88rem; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }
/* ===== quotes ===== */
.quote { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; margin: 0; transition: .2s; }
.quote:hover { border-color: rgba(188,140,255,.35); transform: translateY(-3px); }
.quote blockquote { margin: 0 0 1.2rem; font-size: 1rem; color: var(--fg); line-height: 1.65; }
.quote figcaption { display: flex; align-items: center; gap: .75rem; }
.ava { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: .82rem; color: #06090e; background: var(--a, var(--green)); }
.quote figcaption strong { display: block; font-size: .92rem; }
.quote figcaption em { font-style: normal; font-size: .8rem; color: var(--fg-faint); font-family: var(--mono); }
/* ===== pricing ===== */
.toggle { display: inline-flex; gap: .25rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .25rem; margin-top: 1.4rem; }
.toggle__btn { font-family: var(--mono); font-size: .85rem; color: var(--fg-dim); background: none; border: 0; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; transition: .2s; }
.toggle__btn.is-active { background: var(--green); color: #052e10; font-weight: 600; }
.save { color: inherit; opacity: .8; font-size: .75em; }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.6rem; position: relative; transition: .2s; }
.plan:hover { transform: translateY(-3px); border-color: rgba(63,185,80,.3); }
.plan--pop { border-color: var(--green); box-shadow: var(--glow); }
.plan__tag { position: absolute; top: -11px; left: 1.6rem; font-family: var(--mono); font-size: .72rem; background: var(--green); color: #052e10; padding: .2rem .65rem; border-radius: 999px; font-weight: 700; }
.plan h3 { font-family: var(--mono); font-size: 1.1rem; margin-bottom: .6rem; }
.plan__price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .5rem; }
.amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.per { color: var(--fg-faint); font-family: var(--mono); font-size: .85rem; }
.plan__desc { color: var(--fg-dim); font-size: .92rem; margin-bottom: 1.2rem; }
.plan__feats { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.6rem; }
.plan__feats li { position: relative; padding-left: 1.4rem; color: var(--fg-dim); font-size: .92rem; }
.plan__feats li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
/* ===== cta ===== */
.cta { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.cta__inner {
text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
padding: clamp(2.5rem, 6vw, 4rem); position: relative; overflow: hidden;
}
.cta__inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, rgba(63,185,80,.14), transparent 70%); pointer-events: none; }
.cta__inner h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; }
.cta__inner p { color: var(--fg-dim); font-size: 1.1rem; margin: 1rem auto 1.8rem; max-width: 44ch; }
.cta__row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; position: relative; }
/* ===== footer ===== */
.foot { background: var(--bg-2); border-top: 1px solid var(--line); padding: 3.5rem 0 1.5rem; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.foot__brand p { color: var(--fg-faint); font-size: .9rem; margin-top: .8rem; max-width: 28ch; }
.foot__col h4 { font-family: var(--mono); font-size: .82rem; color: var(--fg); margin-bottom: .9rem; }
.foot__col a { display: block; color: var(--fg-dim); font-size: .9rem; padding: .25rem 0; transition: color .2s; }
.foot__col a:hover { color: var(--green); }
.foot__bar { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); flex-wrap: wrap; gap: .6rem; }
.foot__bar p { color: var(--fg-faint); font-size: .82rem; }
.foot__meta { font-family: var(--mono); }
/* ===== toast ===== */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 120%);
background: var(--panel); border: 1px solid var(--green); color: var(--fg);
font-family: var(--mono); font-size: .88rem; padding: .8rem 1.2rem; border-radius: 11px;
box-shadow: var(--shadow); z-index: 100; opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.toast.is-show { transform: translate(-50%, 0); opacity: 1; }
/* ===== reveal ===== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ===== responsive ===== */
@media (max-width: 980px) {
.grid--feat { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.nav__links {
position: absolute; top: 64px; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: .4rem;
background: rgba(10,14,20,.98); border-bottom: 1px solid var(--line);
padding: 1rem 24px 1.4rem; transform: translateY(-120%); transition: transform .3s ease;
}
.nav__links.is-open { transform: none; }
.nav__links > a { padding: .6rem 0; }
.nav__btn { text-align: center; margin-top: .3rem; }
.nav__toggle { display: flex; }
.hero__grid, .install { grid-template-columns: 1fr; }
.editor { transform: none; }
.grid--quote, .grid--price { grid-template-columns: 1fr; }
.foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.grid--feat { grid-template-columns: 1fr; }
.foot__grid { grid-template-columns: 1fr; }
.foot__bar { flex-direction: column; align-items: flex-start; }
.strip { gap: .8rem; }
.lede { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}/* ===== Cortex landing — vanilla interactions ===== */
(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () { toastEl.classList.remove("is-show"); }, 2600);
}
document.querySelectorAll("[data-toast]").forEach(function (el) {
el.addEventListener("click", function (e) {
if (el.getAttribute("href") === "#") e.preventDefault();
toast(el.getAttribute("data-toast"));
});
});
/* ---------- sticky nav shadow ---------- */
var nav = document.getElementById("nav");
function onScroll() {
if (window.scrollY > 12) nav.classList.add("is-scrolled");
else nav.classList.remove("is-scrolled");
}
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
/* ---------- mobile menu ---------- */
var toggle = document.getElementById("navToggle");
var links = document.getElementById("navLinks");
toggle.addEventListener("click", function () {
var open = links.classList.toggle("is-open");
toggle.setAttribute("aria-expanded", String(open));
});
links.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
links.classList.remove("is-open");
toggle.setAttribute("aria-expanded", "false");
});
});
/* ---------- scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) { en.target.classList.add("is-in"); io.unobserve(en.target); }
});
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add("is-in"); });
}
/* ---------- hero: typing autocomplete demo ---------- */
var target = document.getElementById("typeTarget");
var caret = document.getElementById("caret");
var ghostHint = document.getElementById("ghostHint");
// token sequence: [cssClass|null, text]; null = plain
var tokens = [
["t-cmt", "// validate a checkout before charging\n"],
["t-key", "export function "],
["t-fn", "canCharge"],
[null, "("],
["t-var", "cart"],
[null, ": "],
["t-type", "Cart"],
[null, ") {\n "],
["t-key", "return "],
["t-var", "cart"],
[null, ".items."],
["t-fn", "length"],
[null, " > "],
["t-num", "0"],
[null, "\n"],
["t-ghost", " && cart.total > 0\n && cart.currency != null // ⌁ cortex"],
[null, "\n}"]
];
function typeDemo() {
if (!target) return;
target.innerHTML = "";
var ti = 0;
function nextToken() {
if (ti >= tokens.length) {
if (ghostHint) ghostHint.style.opacity = "1";
if (caret) caret.style.display = "none";
return;
}
var cls = tokens[ti][0];
var text = tokens[ti][1];
var span = document.createElement("span");
if (cls) span.className = cls;
target.appendChild(span);
var ci = 0;
var ghost = cls === "t-ghost";
function typeChar() {
if (ci <= text.length) {
span.textContent = text.slice(0, ci);
ci++;
setTimeout(typeChar, ghost ? 14 : 26 + Math.random() * 30);
} else {
ti++;
setTimeout(nextToken, ghost ? 160 : 60);
}
}
typeChar();
}
if (ghostHint) ghostHint.style.opacity = "0";
if (caret) caret.style.display = "inline-block";
nextToken();
}
// start typing when hero editor is on screen (once)
var editorEl = target ? target.closest(".editor") : null;
if (editorEl && "IntersectionObserver" in window && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
var heroIO = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) { typeDemo(); heroIO.disconnect(); }
});
}, { threshold: 0.4 });
heroIO.observe(editorEl);
} else if (target) {
// reduced motion / no IO: render final state instantly
target.innerHTML =
'<span class="t-cmt">// validate a checkout before charging\n</span>' +
'<span class="t-key">export function </span><span class="t-fn">canCharge</span>(' +
'<span class="t-var">cart</span>: <span class="t-type">Cart</span>) {\n ' +
'<span class="t-key">return </span><span class="t-var">cart</span>.items.length > <span class="t-num">0</span>\n' +
'<span class="t-ghost"> && cart.total > 0\n && cart.currency != null // ⌁ cortex</span>\n}';
if (caret) caret.style.display = "none";
if (ghostHint) ghostHint.style.opacity = "1";
}
/* ---------- demo tabs ---------- */
var tabs = document.querySelectorAll(".tab");
var panels = document.querySelectorAll(".panel");
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
var name = tab.getAttribute("data-tab");
tabs.forEach(function (t) {
var active = t === tab;
t.classList.toggle("is-active", active);
t.setAttribute("aria-selected", String(active));
});
panels.forEach(function (p) {
p.hidden = p.getAttribute("data-panel") !== name;
if (!p.hidden) p.classList.add("is-active"); else p.classList.remove("is-active");
});
});
});
/* ---------- copy CLI command ---------- */
var copyBtn = document.getElementById("copyBtn");
if (copyBtn) {
copyBtn.addEventListener("click", function () {
var cmd = copyBtn.getAttribute("data-cmd");
var done = function () {
copyBtn.textContent = "Copied ✓";
copyBtn.classList.add("is-done");
toast("Install command copied to clipboard");
setTimeout(function () { copyBtn.textContent = "Copy"; copyBtn.classList.remove("is-done"); }, 2000);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(cmd).then(done).catch(fallback);
} else { fallback(); }
function fallback() {
var ta = document.createElement("textarea");
ta.value = cmd; ta.style.position = "fixed"; ta.style.opacity = "0";
document.body.appendChild(ta); ta.select();
try { document.execCommand("copy"); } catch (e) {}
document.body.removeChild(ta); done();
}
});
}
/* ---------- pricing toggle ---------- */
var billToggle = document.getElementById("billToggle");
if (billToggle) {
var amounts = document.querySelectorAll(".amount");
billToggle.querySelectorAll(".toggle__btn").forEach(function (btn) {
btn.addEventListener("click", function () {
var bill = btn.getAttribute("data-bill");
billToggle.querySelectorAll(".toggle__btn").forEach(function (b) {
b.classList.toggle("is-active", b === btn);
});
amounts.forEach(function (a) {
var val = a.getAttribute("data-" + bill);
a.textContent = val === "0" ? "$0" : "$" + val;
});
});
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cortex — AI Code Assistant</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=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ===== NAV ===== -->
<header class="nav" id="nav">
<div class="wrap nav__inner">
<a class="brand" href="#top" aria-label="Cortex home">
<span class="brand__glyph" aria-hidden="true"></></span>
<span class="brand__name">cortex</span>
</a>
<nav class="nav__links" id="navLinks" aria-label="Primary">
<a href="#features">Features</a>
<a href="#demo">Demo</a>
<a href="#install">Install</a>
<a href="#pricing">Pricing</a>
<a href="#" class="nav__cta" data-toast="Redirecting to login…">Sign in</a>
<a href="#install" class="btn btn--solid nav__btn">Get Cortex</a>
</nav>
<button class="nav__toggle" id="navToggle" aria-expanded="false" aria-controls="navLinks" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="top">
<!-- ===== HERO ===== -->
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__copy reveal">
<p class="eyebrow"><span class="pulse"></span> v2.4 — now with context-aware refactors</p>
<h1>The AI pair that <span class="grad">writes with you</span>, not for you.</h1>
<p class="lede">Cortex lives in your editor: ghost-text autocomplete, multi-file refactors, an inline chat that actually reads your repo, and tests it can prove. All local-first, all keyboard-driven.</p>
<div class="hero__cta">
<a href="#install" class="btn btn--solid btn--lg">Install the CLI</a>
<a href="#demo" class="btn btn--ghost btn--lg">See it think →</a>
</div>
<p class="hero__note">Free for solo devs · No card · MIT-friendly licensing</p>
</div>
<!-- fake editor -->
<div class="editor reveal" aria-hidden="true">
<div class="editor__bar">
<span class="dot dot--r"></span><span class="dot dot--y"></span><span class="dot dot--g"></span>
<span class="editor__file">payments.ts</span>
<span class="editor__badge">cortex ⌁</span>
</div>
<pre class="editor__code"><code id="typeTarget"></code><span class="caret" id="caret"></span></pre>
<div class="editor__ghost" id="ghostHint">⇥ accept suggestion</div>
</div>
</div>
<!-- languages strip -->
<div class="wrap strip">
<span class="strip__label">Speaks your stack —</span>
<ul class="strip__langs">
<li>TypeScript</li><li>Python</li><li>Rust</li><li>Go</li>
<li>Java</li><li>Ruby</li><li>C++</li><li>SQL</li><li>Swift</li><li>Kotlin</li>
</ul>
</div>
</section>
<!-- ===== SOCIAL PROOF ===== -->
<section class="logos">
<div class="wrap">
<p class="logos__label">Shipping in production at</p>
<ul class="logos__row">
<li>NebulaOps</li><li>Forklift</li><li>Quanta Labs</li>
<li>Pinecrest</li><li>Hyperloop CI</li><li>Drift&Co</li>
</ul>
</div>
</section>
<!-- ===== FEATURES ===== -->
<section class="section" id="features">
<div class="wrap">
<div class="section__head reveal">
<p class="kicker">// capabilities</p>
<h2>Four superpowers, one keystroke away.</h2>
<p class="section__sub">Cortex indexes your whole project, then helps where you are — never breaking flow.</p>
</div>
<div class="grid grid--feat">
<article class="card reveal">
<div class="card__ico" data-c="green">⌁</div>
<h3>Ghost autocomplete</h3>
<p>Whole-line and multi-line completions ranked by your repo's own patterns. Tab to accept, esc to dismiss.</p>
</article>
<article class="card reveal">
<div class="card__ico" data-c="blue">❝</div>
<h3>Repo-aware chat</h3>
<p>Ask in plain English. Cortex pulls the right files into context and answers with citations to your code.</p>
</article>
<article class="card reveal">
<div class="card__ico" data-c="purple">⟲</div>
<h3>Safe refactors</h3>
<p>Rename, extract, modernize across files with a reviewable diff. Nothing applies until you say so.</p>
</article>
<article class="card reveal">
<div class="card__ico" data-c="orange">✓</div>
<h3>Tests it can prove</h3>
<p>Generates unit tests, runs them in a sandbox, and only suggests what's green. No hallucinated assertions.</p>
</article>
</div>
</div>
</section>
<!-- ===== INTERACTIVE DEMO ===== -->
<section class="section section--alt" id="demo">
<div class="wrap">
<div class="section__head reveal">
<p class="kicker">// live in your editor</p>
<h2>Watch it complete, chat, and fix.</h2>
<p class="section__sub">Three modes, one assistant. Switch tabs to see each in action.</p>
</div>
<div class="demo reveal">
<div class="demo__tabs" role="tablist" aria-label="Demo modes">
<button class="tab is-active" role="tab" aria-selected="true" data-tab="complete" id="tab-complete">⌁ Completion</button>
<button class="tab" role="tab" aria-selected="false" data-tab="chat" id="tab-chat">❝ Chat</button>
<button class="tab" role="tab" aria-selected="false" data-tab="fix" id="tab-fix">⟲ Fix</button>
</div>
<div class="demo__panels">
<div class="panel is-active" role="tabpanel" aria-labelledby="tab-complete" data-panel="complete">
<pre class="code-block"><code><span class="c-key">function</span> <span class="c-fn">slugify</span>(<span class="c-var">title</span>: <span class="c-type">string</span>) {
<span class="c-key">return</span> title
.<span class="c-fn">toLowerCase</span>()
<span class="c-ghost"> .trim()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '') // ⌁ suggested by cortex</span>
}</code></pre>
</div>
<div class="panel" role="tabpanel" aria-labelledby="tab-chat" data-panel="chat" hidden>
<div class="chat">
<div class="chat__row chat__row--you"><span class="chat__who">you</span><p>Why is <code>cart.total</code> off by a cent sometimes?</p></div>
<div class="chat__row chat__row--ai"><span class="chat__who">cortex</span><p>You're summing floats in <code>cart.ts:42</code>. Switch to integer cents and divide once at render. Want me to apply the patch across <code>cart.ts</code> and <code>checkout.ts</code>?</p></div>
<div class="chat__row chat__row--you"><span class="chat__who">you</span><p>Yes, with a test.</p></div>
<div class="chat__row chat__row--ai"><span class="chat__who">cortex</span><p>Done. Added <code>cents()</code> helper + 3 passing tests. <span class="chat__ok">✓ green</span></p></div>
</div>
</div>
<div class="panel" role="tabpanel" aria-labelledby="tab-fix" data-panel="fix" hidden>
<pre class="code-block"><code><span class="c-del">- const user = users.find(u => u.id == id)</span>
<span class="c-add">+ const user = users.find((u) => u.id === id)</span>
<span class="c-del">- if (user) return user.name</span>
<span class="c-add">+ return user?.name ?? 'unknown'</span>
<span class="c-cmt"># cortex: loose equality + unguarded access fixed</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- ===== INSTALL ===== -->
<section class="section" id="install">
<div class="wrap install">
<div class="install__copy reveal">
<p class="kicker">// 30 seconds to first completion</p>
<h2>One command. Then keep coding.</h2>
<p class="section__sub">Cortex hooks into VS Code, Neovim, JetBrains, and Zed. The CLI handles the rest.</p>
<ul class="install__steps">
<li><span>1</span> Install the CLI</li>
<li><span>2</span> Run <code>cortex auth</code></li>
<li><span>3</span> Open your editor — ghost text is live</li>
</ul>
</div>
<div class="install__box reveal">
<div class="cli">
<div class="cli__bar"><span>terminal</span><button class="copy" id="copyBtn" data-cmd="curl -fsSL https://get.cortex.dev | sh">Copy</button></div>
<pre class="cli__code"><code><span class="c-prompt">$</span> curl -fsSL https://get.cortex.dev | sh
<span class="c-out"> ↓ fetching cortex v2.4.0 …</span>
<span class="c-out"> ✓ installed to /usr/local/bin/cortex</span>
<span class="c-prompt">$</span> cortex auth
<span class="c-out"> ✓ logged in. ghost-text enabled.</span></code></pre>
</div>
</div>
</div>
</section>
<!-- ===== TESTIMONIALS ===== -->
<section class="section section--alt">
<div class="wrap">
<div class="section__head reveal">
<p class="kicker">// from the terminal</p>
<h2>Devs who stopped tab-switching.</h2>
</div>
<div class="grid grid--quote">
<figure class="quote reveal">
<blockquote>The repo-aware chat is the first AI tool that didn't make me re-explain my codebase every five minutes. It just knows.</blockquote>
<figcaption><span class="ava" style="--a:#3fb950">MR</span><span><strong>Mara Reyes</strong><em>Staff Eng · NebulaOps</em></span></figcaption>
</figure>
<figure class="quote reveal">
<blockquote>Refactor diffs I can actually review before they land. Cut our migration off the legacy API from a week to an afternoon.</blockquote>
<figcaption><span class="ava" style="--a:#58a6ff">JT</span><span><strong>Jon Tanaka</strong><em>Backend Lead · Forklift</em></span></figcaption>
</figure>
<figure class="quote reveal">
<blockquote>It generates tests, runs them, and shows me only the green ones. No more fake assertions to delete. That alone sold the team.</blockquote>
<figcaption><span class="ava" style="--a:#bc8cff">PA</span><span><strong>Priya Anand</strong><em>SRE · Quanta Labs</em></span></figcaption>
</figure>
</div>
</div>
</section>
<!-- ===== PRICING ===== -->
<section class="section" id="pricing">
<div class="wrap">
<div class="section__head reveal">
<p class="kicker">// pricing</p>
<h2>Pay for power, not seats you forgot about.</h2>
<div class="toggle" id="billToggle">
<button class="toggle__btn is-active" data-bill="mo">Monthly</button>
<button class="toggle__btn" data-bill="yr">Yearly <span class="save">−20%</span></button>
</div>
</div>
<div class="grid grid--price">
<article class="plan reveal">
<h3>Solo</h3>
<p class="plan__price"><span class="amount" data-mo="0" data-yr="0">$0</span><span class="per">forever</span></p>
<p class="plan__desc">For personal projects and tinkering.</p>
<ul class="plan__feats">
<li>Ghost autocomplete</li><li>Repo chat (1 repo)</li><li>Community models</li><li>Local-first</li>
</ul>
<a href="#install" class="btn btn--ghost btn--block" data-toast="Cortex Solo is installing…">Start free</a>
</article>
<article class="plan plan--pop reveal">
<span class="plan__tag">Most popular</span>
<h3>Pro</h3>
<p class="plan__price"><span class="amount" data-mo="20" data-yr="16">$20</span><span class="per">/mo</span></p>
<p class="plan__desc">For developers who ship daily.</p>
<ul class="plan__feats">
<li>Everything in Solo</li><li>Unlimited repos & refactors</li><li>Test generation + sandbox</li><li>Frontier models</li><li>Priority latency</li>
</ul>
<a href="#install" class="btn btn--solid btn--block" data-toast="Spinning up Cortex Pro…">Get Pro</a>
</article>
<article class="plan reveal">
<h3>Team</h3>
<p class="plan__price"><span class="amount" data-mo="42" data-yr="34">$42</span><span class="per">/seat</span></p>
<p class="plan__desc">For squads that review together.</p>
<ul class="plan__feats">
<li>Everything in Pro</li><li>Shared repo index</li><li>SSO & audit logs</li><li>Self-host option</li>
</ul>
<a href="#" class="btn btn--ghost btn--block" data-toast="Our team will reach out shortly.">Talk to sales</a>
</article>
</div>
</div>
</section>
<!-- ===== CTA ===== -->
<section class="cta">
<div class="wrap cta__inner reveal">
<h2>Your editor is about to get a brain.</h2>
<p>Install Cortex and feel the difference on the first file you open.</p>
<div class="cta__row">
<a href="#install" class="btn btn--solid btn--lg">Install the CLI</a>
<a href="#demo" class="btn btn--ghost btn--lg">Replay the demo</a>
</div>
</div>
</section>
</main>
<!-- ===== FOOTER ===== -->
<footer class="foot">
<div class="wrap foot__grid">
<div class="foot__brand">
<a class="brand" href="#top"><span class="brand__glyph" aria-hidden="true"></></span><span class="brand__name">cortex</span></a>
<p>The AI pair that writes with you.</p>
</div>
<div class="foot__col"><h4>Product</h4><a href="#features">Features</a><a href="#demo">Demo</a><a href="#pricing">Pricing</a><a href="#install">Changelog</a></div>
<div class="foot__col"><h4>Developers</h4><a href="#">Docs</a><a href="#">CLI reference</a><a href="#">API</a><a href="#">Status</a></div>
<div class="foot__col"><h4>Company</h4><a href="#">About</a><a href="#">Careers</a><a href="#">Blog</a><a href="#">Contact</a></div>
</div>
<div class="wrap foot__bar">
<p>© 2026 Cortex Labs — fictional brand, illustrative UI only.</p>
<p class="foot__meta">Built with vanilla HTML · CSS · JS</p>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Code Assistant Landing
A full one-page marketing site for Cortex, a fictional AI coding assistant, dressed in a developer-native dark editor theme (#0d1117) with a JetBrains Mono headline voice, an Inter body, and GitHub-style syntax colors as the accent palette. The hero pairs strong copy with a tilted “fake editor” mockup whose code types itself in via JavaScript — ending with a green ghost-text autocomplete suggestion and a blinking caret. A languages strip and a social-proof logo row reinforce the pitch before the page goes deep.
The body runs through five distinct sections: a four-card feature grid (autocomplete, repo-aware chat, safe refactors, provable tests), an interactive tabbed demo that switches between completion, chat and fix views, a 30-second install block with a copy-to-clipboard CLI snippet, three developer testimonials, and a monthly/yearly pricing table with a live toggle. A gradient CTA band and a multi-column footer close it out.
Every interaction is vanilla JS: a sticky nav that gains a shadow on scroll, a mobile hamburger menu, IntersectionObserver scroll-reveal, the IntersectionObserver-triggered hero typewriter, accessible demo tabs, the clipboard copy with a toast confirmation, and the pricing toggle that rewrites the amounts. It is fully responsive down to ~360px and honors prefers-reduced-motion by rendering the editor in its final state instead of animating.
Illustrative UI only — fictional brand, not a real product.