Pages Hard
AI Product — Chat Assistant Landing
A dark, premium one-page marketing site for Lumio, a fictional conversational AI assistant. It pairs a violet-to-cyan glow aesthetic with an animated hero chat mockup that types a prompt and streams a reply, plus trust logos, a memory and tools feature grid, a three-step how-it-works flow, a genuinely interactive try-a-prompt playground, testimonials, a monthly and yearly pricing toggle, an accordion FAQ, and a waitlist call to action. Built with semantic HTML, responsive CSS, and dependency-free vanilla JavaScript.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #0b0f1a;
--bg-2: #0e1322;
--bg-3: #121a2e;
--surface: rgba(255, 255, 255, 0.04);
--surface-2: rgba(255, 255, 255, 0.06);
--border: rgba(255, 255, 255, 0.09);
--border-strong: rgba(255, 255, 255, 0.16);
--text: #eef1f8;
--muted: #9aa6c4;
--muted-2: #6b779b;
--violet: #a78bfa;
--indigo: #6366f1;
--cyan: #22d3ee;
--grad: linear-gradient(120deg, #a78bfa 0%, #6366f1 45%, #22d3ee 100%);
--grad-soft: linear-gradient(120deg, rgba(167, 139, 250, 0.18), rgba(34, 211, 238, 0.14));
--shadow: 0 24px 60px -20px rgba(8, 10, 22, 0.8);
--shadow-glow: 0 0 0 1px rgba(167, 139, 250, 0.25), 0 30px 80px -24px rgba(99, 102, 241, 0.5);
--r: 16px;
--r-lg: 24px;
--maxw: 1140px;
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
background-image:
radial-gradient(900px 500px at 80% -8%, rgba(99, 102, 241, 0.18), transparent 60%),
radial-gradient(700px 480px at 5% 5%, rgba(34, 211, 238, 0.1), transparent 60%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--violet); color: #0b0f1a; padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 600; font-size: 0.95rem; border-radius: 12px; border: 1px solid transparent;
cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
padding: 12px 20px; line-height: 1; white-space: nowrap;
}
.btn--sm { padding: 9px 15px; font-size: 0.875rem; border-radius: 10px; }
.btn--lg { padding: 15px 26px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--primary {
background: var(--grad); color: #0a0d18; font-weight: 700;
box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(99, 102, 241, 0.85); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); transform: translateY(-2px); border-color: var(--violet); }
.btn:active { transform: translateY(0); }
/* ---------- Nav ---------- */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(11, 15, 26, 0.55);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
}
.nav.is-scrolled { background: rgba(11, 15, 26, 0.85); border-bottom-color: var(--border); }
.nav__inner { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand__mark { display: inline-grid; place-items: center; filter: drop-shadow(0 4px 12px rgba(99,102,241,0.5)); }
.nav__links { display: flex; gap: 6px; margin-left: 14px; }
.nav__links a {
color: var(--muted); font-size: 0.92rem; font-weight: 500; padding: 8px 12px; border-radius: 9px;
transition: color 0.15s, background 0.15s;
}
.nav__links a:hover { color: var(--text); background: var(--surface); }
.nav__actions { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.nav__toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero { position: relative; padding: 70px 0 90px; overflow: hidden; }
.hero__glow {
position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
width: 900px; height: 600px; pointer-events: none;
background: radial-gradient(closest-side, rgba(99, 102, 241, 0.35), transparent 70%);
filter: blur(20px);
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero__copy h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 900; margin: 18px 0 18px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { color: var(--muted); font-size: 1.12rem; max-width: 30rem; }
.hero__cta { display: flex; gap: 14px; margin: 30px 0 26px; flex-wrap: wrap; }
.hero__meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 0.92rem; }
.hero__meta strong { color: var(--text); }
.avatars { display: flex; }
.avatars span {
width: 32px; height: 32px; border-radius: 50%; margin-left: -10px; border: 2px solid var(--bg);
background: var(--grad);
}
.avatars span:first-child { margin-left: 0; }
.avatars span:nth-child(2) { background: linear-gradient(120deg, #f472b6, #a78bfa); }
.avatars span:nth-child(3) { background: linear-gradient(120deg, #22d3ee, #34d399); }
.avatars span:nth-child(4) { background: linear-gradient(120deg, #fbbf24, #f472b6); }
.pill {
display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600;
color: var(--violet); background: var(--surface); border: 1px solid var(--border-strong);
padding: 7px 14px; border-radius: 999px;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34,211,238,0.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,211,238,0); } }
/* ---------- Chat mockup ---------- */
.hero__visual { position: relative; }
.chat {
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
border: 1px solid var(--border-strong); border-radius: var(--r-lg);
box-shadow: var(--shadow-glow); overflow: hidden; position: relative;
}
.chat__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.chat__dots { display: flex; gap: 6px; }
.chat__dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a3350; }
.chat__dots i:nth-child(1) { background: #ff5f57; }
.chat__dots i:nth-child(2) { background: #febc2e; }
.chat__dots i:nth-child(3) { background: #28c840; }
.chat__title { font-size: 0.8rem; color: var(--muted-2); font-family: var(--mono); }
.chat__body { padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; min-height: 230px; }
.msg { max-width: 86%; padding: 12px 15px; border-radius: 14px; font-size: 0.94rem; line-height: 1.5; animation: rise 0.4s ease both; }
.msg p { margin: 0; }
.msg--user { align-self: flex-end; background: var(--grad); color: #0a0d18; font-weight: 500; border-bottom-right-radius: 5px; }
.msg--bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg--bot strong { color: var(--violet); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.msg .cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--cyan); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chat__compose { padding: 12px 18px 16px; border-top: 1px solid var(--border); min-height: 22px; }
.chat__caret { font-family: var(--mono); font-size: 0.9rem; color: var(--muted); }
.chat__caret::after { content: "▌"; color: var(--cyan); animation: blink 1s steps(1) infinite; margin-left: 1px; }
.float-card {
position: absolute; background: rgba(18, 26, 46, 0.92); border: 1px solid var(--border-strong);
border-radius: 12px; padding: 9px 13px; font-size: 0.82rem; font-weight: 600; box-shadow: var(--shadow);
backdrop-filter: blur(8px); animation: floaty 5s ease-in-out infinite;
}
.float-card--1 { top: 18%; left: -30px; }
.float-card--2 { bottom: 14%; right: -24px; animation-delay: 1.2s; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
/* ---------- Logos ---------- */
.logos { padding: 36px 0 14px; }
.logos__label { text-align: center; color: var(--muted-2); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 22px; }
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px; }
.logo { color: var(--muted); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; opacity: 0.7; transition: opacity 0.2s, color 0.2s; }
.logo:hover { opacity: 1; color: var(--text); }
/* ---------- Sections ---------- */
.section { padding: 88px 0; position: relative; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.eyebrow { display: inline-block; color: var(--cyan); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.section__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 14px; }
.section__head p { color: var(--muted); font-size: 1.06rem; }
/* ---------- Features ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
padding: 26px 24px; transition: transform 0.22s, border-color 0.22s, background 0.22s; position: relative; overflow: hidden;
}
.feature::before {
content: ""; position: absolute; inset: 0; background: var(--grad-soft); opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.feature:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.feature:hover::before { opacity: 1; }
.feature__icon {
font-size: 1.4rem; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 13px;
background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 16px; position: relative;
}
.feature h3 { font-size: 1.12rem; margin-bottom: 8px; letter-spacing: -0.01em; position: relative; }
.feature p { color: var(--muted); font-size: 0.95rem; position: relative; }
/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 30px 26px; position: relative;
transition: transform 0.2s, border-color 0.2s;
}
.step:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.step__num {
font-family: var(--mono); font-size: 2.2rem; font-weight: 700; background: var(--grad);
-webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 14px;
}
.step h3 { font-size: 1.18rem; margin-bottom: 9px; }
.step p { color: var(--muted); font-size: 0.96rem; }
/* ---------- Demo ---------- */
.demo__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: center; }
.demo__copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 14px; }
.demo__copy > p { color: var(--muted); font-size: 1.06rem; margin-bottom: 22px; }
.demo__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
padding: 9px 15px; border-radius: 999px; font-size: 0.88rem; font-weight: 500; cursor: pointer;
transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.chip:hover { background: var(--surface-2); border-color: var(--violet); transform: translateY(-2px); }
.chat--demo { box-shadow: var(--shadow); }
.chat--demo .chat__body { min-height: 280px; max-height: 340px; overflow-y: auto; }
.demo__compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--surface); }
.demo__compose input {
flex: 1; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 11px;
padding: 11px 14px; color: var(--text); font-family: inherit; font-size: 0.92rem;
}
.demo__compose input:focus { outline: none; border-color: var(--violet); }
/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 26px 24px;
display: flex; flex-direction: column; gap: 18px; transition: transform 0.2s, border-color 0.2s;
}
.quote:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.quote blockquote { font-size: 1rem; line-height: 1.6; color: var(--text); }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote figcaption span:last-child { display: flex; flex-direction: column; }
.quote figcaption strong { font-size: 0.92rem; }
.quote figcaption small { color: var(--muted-2); font-size: 0.82rem; }
.quote__avatar {
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
background: var(--grad); color: #0a0d18; font-weight: 700; font-size: 0.82rem; flex-shrink: 0;
}
/* ---------- Pricing ---------- */
.toggle { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; }
.toggle__label { color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.toggle__save { color: var(--cyan); background: rgba(34,211,238,0.12); padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; margin-left: 4px; }
.toggle__switch {
width: 50px; height: 28px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong);
position: relative; cursor: pointer; transition: background 0.2s; padding: 0;
}
.toggle__switch[aria-checked="true"] { background: var(--grad); border-color: transparent; }
.toggle__knob {
position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
transition: transform 0.22s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.toggle__switch[aria-checked="true"] .toggle__knob { transform: translateX(22px); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 26px;
display: flex; flex-direction: column; position: relative; transition: transform 0.2s, border-color 0.2s;
}
.plan:hover { transform: translateY(-5px); }
.plan--featured {
border-color: var(--violet); background: linear-gradient(180deg, rgba(167,139,250,0.08), var(--surface));
box-shadow: var(--shadow-glow);
}
.plan__badge {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--grad); color: #0a0d18; font-weight: 700; font-size: 0.74rem; padding: 5px 14px; border-radius: 999px;
}
.plan h3 { font-size: 1.25rem; margin-bottom: 6px; }
.plan__desc { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; min-height: 38px; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 22px; }
.plan__amount { font-size: 2.6rem; font-weight: 900; letter-spacing: -0.03em; }
.plan__per { color: var(--muted); font-size: 0.92rem; }
.plan__list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex: 1; }
.plan__list li { position: relative; padding-left: 26px; color: var(--muted); font-size: 0.94rem; }
.plan__list li::before {
content: "✓"; position: absolute; left: 0; top: 0; color: var(--cyan); font-weight: 700;
width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(34,211,238,0.12); font-size: 0.7rem;
}
/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color 0.2s; }
.faq__item.is-open { border-color: var(--border-strong); }
.faq__q {
width: 100%; text-align: left; background: none; border: 0; color: var(--text); cursor: pointer;
font-size: 1.02rem; font-weight: 600; font-family: inherit; padding: 20px 22px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__icon { font-size: 1.4rem; color: var(--violet); transition: transform 0.25s; flex-shrink: 0; line-height: 1; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__a p { padding: 0 22px 20px; color: var(--muted); font-size: 0.96rem; }
/* ---------- CTA ---------- */
.cta { padding: 60px 0 100px; }
.cta__card {
position: relative; text-align: center; background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
border: 1px solid var(--border-strong); border-radius: 28px; padding: 64px 32px; overflow: hidden;
box-shadow: var(--shadow);
}
.cta__glow {
position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 700px; height: 400px;
background: radial-gradient(closest-side, rgba(99,102,241,0.3), transparent 70%); pointer-events: none;
}
.cta__card h2 { position: relative; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; margin-bottom: 12px; }
.cta__card > p { position: relative; color: var(--muted); font-size: 1.1rem; max-width: 30rem; margin: 0 auto 28px; }
.cta__form { position: relative; display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.cta__form input {
flex: 1; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 13px;
padding: 14px 16px; color: var(--text); font-family: inherit; font-size: 0.96rem;
}
.cta__form input:focus { outline: none; border-color: var(--violet); }
.cta__fine { position: relative; color: var(--muted-2); font-size: 0.82rem; margin-top: 16px; }
/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 56px 0 28px; background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer__brand p { color: var(--muted); font-size: 0.92rem; margin-top: 14px; max-width: 20rem; }
.footer__col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2); margin-bottom: 14px; }
.footer__col a { display: block; color: var(--muted); font-size: 0.92rem; padding: 5px 0; transition: color 0.15s; }
.footer__col a:hover { color: var(--text); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: 0.85rem; }
.footer__socials { display: flex; gap: 16px; }
.footer__socials a { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; display: grid; place-items: center; transition: border-color 0.18s, color 0.18s; }
.footer__socials a:hover { border-color: var(--violet); color: var(--text); }
/* ---------- Toast ---------- */
.toast {
position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 24px);
background: rgba(18, 26, 46, 0.96); border: 1px solid var(--border-strong); color: var(--text);
padding: 13px 20px; border-radius: 13px; font-size: 0.92rem; font-weight: 500; box-shadow: var(--shadow);
opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 300; max-width: 90vw; text-align: center;
backdrop-filter: blur(10px);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
/* ---------- Responsive ---------- */
@media (max-width: 920px) {
.hero__grid, .demo__grid { grid-template-columns: 1fr; gap: 40px; }
.feature-grid, .steps, .quotes, .plans { grid-template-columns: 1fr 1fr; }
.plan--featured { order: -1; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.float-card--1 { left: 0; }
.float-card--2 { right: 0; }
}
@media (max-width: 720px) {
.nav__links {
position: fixed; inset: 70px 0 auto 0; flex-direction: column; gap: 4px;
background: rgba(11, 15, 26, 0.97); backdrop-filter: blur(16px);
padding: 16px 24px 24px; border-bottom: 1px solid var(--border);
transform: translateY(-130%); transition: transform 0.3s ease; margin: 0;
}
.nav__links.is-open { transform: translateY(0); }
.nav__links a { padding: 13px 12px; font-size: 1rem; }
.nav__actions { display: none; }
.nav__toggle { display: flex; }
.section { padding: 64px 0; }
.feature-grid, .steps, .quotes, .plans, .footer__grid { grid-template-columns: 1fr; }
.footer__bottom { flex-direction: column; gap: 14px; text-align: center; }
.cta__form { flex-direction: column; }
.hero { padding: 48px 0 60px; }
}
@media (max-width: 520px) {
.container { padding: 0 18px; }
.hero__cta { flex-direction: column; align-items: stretch; }
.hero__cta .btn { width: 100%; }
.cta__card { padding: 44px 22px; }
.float-card { display: none; }
.logos__row { gap: 14px 26px; }
.logo { font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
}(function () {
"use strict";
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-visible");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-visible");
}, 2600);
}
document.addEventListener("click", function (e) {
var t = e.target.closest(".js-toast");
if (t) {
e.preventDefault();
toast(t.getAttribute("data-msg") || "Demo action.");
}
});
/* ---------- Nav: scroll state + mobile toggle ---------- */
var nav = document.getElementById("nav");
window.addEventListener(
"scroll",
function () {
if (window.scrollY > 12) nav.classList.add("is-scrolled");
else nav.classList.remove("is-scrolled");
},
{ passive: true }
);
var navToggle = document.getElementById("navToggle");
var navLinks = document.getElementById("navLinks");
navToggle.addEventListener("click", function () {
var open = navLinks.classList.toggle("is-open");
navToggle.classList.toggle("is-open", open);
navToggle.setAttribute("aria-expanded", String(open));
navToggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
navLinks.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
navLinks.classList.remove("is-open");
navToggle.classList.remove("is-open");
navToggle.setAttribute("aria-expanded", "false");
}
});
/* ---------- Scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window && !reduceMotion) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
reveals.forEach(function (el) {
io.observe(el);
});
} else {
reveals.forEach(function (el) {
el.classList.add("is-visible");
});
}
/* ---------- Typewriter helpers ---------- */
function typeText(el, text, speed, done) {
var i = 0;
el.textContent = "";
(function step() {
if (i <= text.length) {
el.textContent = text.slice(0, i);
i++;
setTimeout(step, speed);
} else if (done) {
done();
}
})();
}
/* ---------- Hero animated chat ---------- */
var heroPrompt = document.getElementById("heroPrompt");
var heroBody = document.getElementById("heroChatBody");
if (heroPrompt && heroBody) {
if (reduceMotion) {
heroPrompt.textContent = "Ask Lumio anything…";
var done = document.createElement("div");
done.className = "msg msg--bot";
done.innerHTML =
"<p><strong>Done.</strong> Standup summarized and a follow-up draft is ready for the design team.</p>";
heroBody.appendChild(done);
} else {
setTimeout(function () {
typeText(heroPrompt, "Drafting your follow-up", 38, function () {
var bot = document.createElement("div");
bot.className = "msg msg--bot";
var p = document.createElement("p");
bot.appendChild(p);
heroBody.appendChild(bot);
heroPrompt.textContent = "";
streamReply(
p,
"Pulled 3 action items from standup. Draft to the design team is ready — want me to send it? 🚀",
22
);
});
}, 700);
}
}
/* ---------- Streaming reply (token-by-token) ---------- */
function streamReply(p, text, speed, done) {
var words = text.split(" ");
var i = 0;
var cursor = document.createElement("span");
cursor.className = "cursor";
p.appendChild(cursor);
(function step() {
if (i < words.length) {
cursor.insertAdjacentText("beforebegin", (i ? " " : "") + words[i]);
i++;
setTimeout(step, speed + Math.random() * 40);
} else {
cursor.remove();
if (done) done();
}
})();
}
/* ---------- Live demo ---------- */
var demoForm = document.getElementById("demoForm");
var demoInput = document.getElementById("demoInput");
var demoBody = document.getElementById("demoBody");
var demoSend = document.getElementById("demoSend");
var demoBusy = false;
var replies = {
"plan a launch":
"Here's a 3-day beta launch plan: — Day 1: warm up your waitlist with a teaser + changelog. Day 2: open access in waves and watch activation. Day 3: ship a recap, gather quotes, and invite referrals. Want me to draft the Day 1 email?",
"write a changelog":
"**Changelog · v3.0** — Added persistent long-term memory, parallel tool calls, and 12 new integrations. Fixed streaming latency on slow networks. Shall I post this to your release notes?",
"spot sprint risks":
"I spot 2 risks: the auth refactor has no owner, and the API migration overlaps QA week. Suggested fixes: assign auth to Devon and stagger the migration by 3 days. Want me to open the tickets?"
};
function defaultReply(prompt) {
return (
"Got it — working on: “" +
prompt +
"”. I'd pull the relevant context from your connected apps, plan the steps, and check in before acting. (This is a front-end demo — no real tools are called.)"
);
}
function addMsg(role, withCursor) {
var div = document.createElement("div");
div.className = "msg msg--" + role;
var p = document.createElement("p");
div.appendChild(p);
demoBody.appendChild(div);
demoBody.scrollTop = demoBody.scrollHeight;
return p;
}
function runDemo(prompt) {
if (demoBusy || !prompt.trim()) return;
demoBusy = true;
demoSend.disabled = true;
var up = addMsg("user");
up.textContent = prompt;
var key = prompt.trim().toLowerCase();
var text = replies[key] || defaultReply(prompt.trim());
// typing indicator pause, then stream
setTimeout(function () {
var p = addMsg("bot");
if (reduceMotion) {
p.innerHTML = renderBold(text);
demoBody.scrollTop = demoBody.scrollHeight;
finish();
} else {
streamBold(p, text, 20, function () {
finish();
});
}
}, 420);
function finish() {
demoBusy = false;
demoSend.disabled = false;
demoBody.scrollTop = demoBody.scrollHeight;
}
}
function renderBold(text) {
return text.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
}
// stream while keeping **bold** rendering at the end
function streamBold(p, text, speed, done) {
var plain = text.replace(/\*\*(.+?)\*\*/g, "$1");
var words = plain.split(" ");
var i = 0;
var cursor = document.createElement("span");
cursor.className = "cursor";
p.appendChild(cursor);
(function step() {
if (i < words.length) {
cursor.insertAdjacentText("beforebegin", (i ? " " : "") + words[i]);
i++;
demoBody.scrollTop = demoBody.scrollHeight;
setTimeout(step, speed + Math.random() * 45);
} else {
cursor.remove();
p.innerHTML = renderBold(text);
if (done) done();
}
})();
}
if (demoForm) {
demoForm.addEventListener("submit", function (e) {
e.preventDefault();
var val = demoInput.value;
if (!val.trim()) return;
runDemo(val);
demoInput.value = "";
});
}
var demoChips = document.getElementById("demoChips");
if (demoChips) {
demoChips.addEventListener("click", function (e) {
var chip = e.target.closest(".chip");
if (chip) runDemo(chip.getAttribute("data-prompt"));
});
}
/* ---------- Pricing toggle ---------- */
var billingToggle = document.getElementById("billingToggle");
var amounts = document.querySelectorAll(".plan__amount");
if (billingToggle) {
billingToggle.addEventListener("click", function () {
var yearly = billingToggle.getAttribute("aria-checked") === "true";
yearly = !yearly;
billingToggle.setAttribute("aria-checked", String(yearly));
amounts.forEach(function (el) {
var v = el.getAttribute(yearly ? "data-yearly" : "data-monthly");
el.textContent = "$" + v;
});
});
}
/* ---------- FAQ accordion ---------- */
var faqList = document.getElementById("faqList");
if (faqList) {
faqList.addEventListener("click", function (e) {
var btn = e.target.closest(".faq__q");
if (!btn) return;
var item = btn.parentElement;
var ans = item.querySelector(".faq__a");
var open = item.classList.toggle("is-open");
btn.setAttribute("aria-expanded", String(open));
ans.style.maxHeight = open ? ans.scrollHeight + "px" : "0";
});
}
/* ---------- Waitlist form ---------- */
var waitForm = document.getElementById("waitForm");
if (waitForm) {
waitForm.addEventListener("submit", function (e) {
e.preventDefault();
var email = document.getElementById("waitEmail");
toast("🎉 You're on the list, " + email.value.split("@")[0] + "! (demo)");
email.value = "";
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumio — Your AI Assistant That Actually Remembers</title>
<meta name="description" content="Lumio is a conversational AI assistant with persistent memory, real tools, and deep integrations. Try a prompt live." />
<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;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- NAV -->
<header class="nav" id="nav">
<div class="container nav__inner">
<a href="#top" class="brand" aria-label="Lumio home">
<span class="brand__mark" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 2l2.4 6.4L21 11l-6.6 2.6L12 20l-2.4-6.4L3 11l6.6-2.6L12 2z" fill="url(#g)"/><defs><linearGradient id="g" x1="3" y1="2" x2="21" y2="20"><stop stop-color="#a78bfa"/><stop offset="1" stop-color="#22d3ee"/></linearGradient></defs></svg>
</span>
<span class="brand__name">Lumio</span>
</a>
<nav class="nav__links" id="navLinks" aria-label="Primary">
<a href="#features">Features</a>
<a href="#how">How it works</a>
<a href="#demo">Live demo</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
</nav>
<div class="nav__actions">
<a href="#" class="btn btn--ghost btn--sm js-toast" data-msg="Sign-in is a demo — no account needed.">Sign in</a>
<a href="#waitlist" class="btn btn--primary btn--sm">Join waitlist</a>
</div>
<button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="navLinks">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<span id="top"></span>
<!-- HERO -->
<section class="hero">
<div class="hero__glow" aria-hidden="true"></div>
<div class="container hero__grid">
<div class="hero__copy reveal">
<span class="pill"><span class="pill__dot"></span> New · Lumio 3.0 with persistent memory</span>
<h1>The AI assistant that<br /><span class="grad-text">actually remembers</span> you.</h1>
<p class="hero__sub">Lumio holds context across every conversation, calls real tools on your behalf, and plugs into the apps your team already lives in. Less re-explaining. More done.</p>
<div class="hero__cta">
<a href="#waitlist" class="btn btn--primary btn--lg">Get early access</a>
<a href="#demo" class="btn btn--ghost btn--lg">Try a live prompt →</a>
</div>
<div class="hero__meta">
<div class="avatars" aria-hidden="true">
<span></span><span></span><span></span><span></span>
</div>
<p>Joined by <strong>14,200+</strong> builders on the waitlist</p>
</div>
</div>
<!-- Chat mockup -->
<div class="hero__visual reveal">
<div class="chat" id="heroChat" aria-hidden="true">
<div class="chat__bar">
<span class="chat__dots"><i></i><i></i><i></i></span>
<span class="chat__title">Lumio · session #4821</span>
</div>
<div class="chat__body" id="heroChatBody">
<div class="msg msg--user">
<p>Summarize yesterday's standup and draft a follow-up to the design team.</p>
</div>
</div>
<div class="chat__compose">
<span class="chat__caret" id="heroPrompt"></span>
</div>
</div>
<div class="float-card float-card--1">🧠 Memory recalled</div>
<div class="float-card float-card--2">⚡ 3 tools called</div>
</div>
</div>
</section>
<!-- LOGOS -->
<section class="logos" aria-label="Trusted by teams at">
<div class="container">
<p class="logos__label">Trusted by teams shipping at</p>
<div class="logos__row reveal">
<span class="logo">◆ Northwind</span>
<span class="logo">⬡ Hexaform</span>
<span class="logo">✺ Solstice</span>
<span class="logo">▲ Apex Labs</span>
<span class="logo">◍ Orbital</span>
<span class="logo">❖ Fernweh</span>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="section" id="features">
<div class="container">
<div class="section__head reveal">
<span class="eyebrow">Capabilities</span>
<h2>One assistant. The whole workflow.</h2>
<p>Memory, tools, and integrations work together so Lumio behaves less like a chatbot and more like a teammate.</p>
</div>
<div class="feature-grid">
<article class="feature reveal">
<div class="feature__icon">🧠</div>
<h3>Persistent memory</h3>
<p>Lumio remembers your projects, preferences, and past decisions — so you never start a conversation from scratch.</p>
</article>
<article class="feature reveal">
<div class="feature__icon">🛠️</div>
<h3>Real tool use</h3>
<p>From running queries to booking meetings, Lumio calls live tools and shows its work, step by step.</p>
</article>
<article class="feature reveal">
<div class="feature__icon">🔌</div>
<h3>Deep integrations</h3>
<p>Connect Slack, Notion, GitHub, Linear, and 60+ apps. Lumio reads and writes where your work already lives.</p>
</article>
<article class="feature reveal">
<div class="feature__icon">🔒</div>
<h3>Private by default</h3>
<p>Your data is encrypted end to end and never used to train shared models. SOC 2 Type II ready.</p>
</article>
<article class="feature reveal">
<div class="feature__icon">⚡</div>
<h3>Streaming speed</h3>
<p>Sub-second first tokens and parallel tool calls keep momentum — no spinning, no waiting.</p>
</article>
<article class="feature reveal">
<div class="feature__icon">🎯</div>
<h3>Steerable tone</h3>
<p>Set the voice once. Lumio stays on-brand across drafts, replies, and docs — formal to playful.</p>
</article>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="section section--alt" id="how">
<div class="container">
<div class="section__head reveal">
<span class="eyebrow">How it works</span>
<h2>From prompt to done in three steps</h2>
</div>
<div class="steps">
<article class="step reveal">
<span class="step__num">01</span>
<h3>Connect your stack</h3>
<p>Authorize the apps you use. Lumio builds a private knowledge map of your work in minutes.</p>
</article>
<article class="step reveal">
<span class="step__num">02</span>
<h3>Ask anything</h3>
<p>Type a goal in plain language. Lumio plans, picks the right tools, and asks before it acts.</p>
</article>
<article class="step reveal">
<span class="step__num">03</span>
<h3>Review & ship</h3>
<p>See every action with full transparency, approve in one click, and let memory carry it forward.</p>
</article>
</div>
</div>
</section>
<!-- LIVE DEMO -->
<section class="section" id="demo">
<div class="container demo__grid">
<div class="demo__copy reveal">
<span class="eyebrow">Live demo</span>
<h2>Try a prompt. Watch it think.</h2>
<p>Pick a starter or write your own. Lumio streams a reply right here in the browser — no signup, no setup.</p>
<div class="demo__chips" id="demoChips">
<button class="chip" data-prompt="Plan a 3-day launch for our beta.">Plan a launch</button>
<button class="chip" data-prompt="Turn these notes into a crisp changelog.">Write a changelog</button>
<button class="chip" data-prompt="Find risks in this sprint and suggest fixes.">Spot sprint risks</button>
</div>
</div>
<div class="demo__panel reveal">
<div class="chat chat--demo">
<div class="chat__bar">
<span class="chat__dots"><i></i><i></i><i></i></span>
<span class="chat__title">Lumio · playground</span>
</div>
<div class="chat__body" id="demoBody" aria-live="polite">
<div class="msg msg--bot">
<p>Hi! I'm Lumio. Ask me something or tap a starter to see me stream a reply. 👋</p>
</div>
</div>
<form class="demo__compose" id="demoForm">
<label class="sr-only" for="demoInput">Your prompt</label>
<input id="demoInput" type="text" placeholder="Ask Lumio anything…" autocomplete="off" />
<button type="submit" class="btn btn--primary btn--sm" id="demoSend" aria-label="Send prompt">Send</button>
</form>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section section--alt" id="reviews">
<div class="container">
<div class="section__head reveal">
<span class="eyebrow">Loved by teams</span>
<h2>Why people switch to Lumio</h2>
</div>
<div class="quotes">
<figure class="quote reveal">
<blockquote>"The memory is the killer feature. Lumio remembers our naming conventions, our roadmap, even my coffee order for standup jokes."</blockquote>
<figcaption><span class="quote__avatar">MP</span><span><strong>Maya Prentiss</strong><small>Head of Product, Hexaform</small></span></figcaption>
</figure>
<figure class="quote reveal">
<blockquote>"We cut our weekly reporting from four hours to twelve minutes. It pulls from Linear and writes the summary itself."</blockquote>
<figcaption><span class="quote__avatar">DK</span><span><strong>Devon Kerr</strong><small>Eng Lead, Orbital</small></span></figcaption>
</figure>
<figure class="quote reveal">
<blockquote>"It feels less like a tool and more like a sharp teammate who never forgets a detail. Genuinely changed how my day runs."</blockquote>
<figcaption><span class="quote__avatar">AS</span><span><strong>Aïda Sow</strong><small>Founder, Fernweh</small></span></figcaption>
</figure>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section" id="pricing">
<div class="container">
<div class="section__head reveal">
<span class="eyebrow">Pricing</span>
<h2>Simple plans that scale with you</h2>
<div class="toggle" role="group" aria-label="Billing period">
<span class="toggle__label" id="lblMonthly">Monthly</span>
<button class="toggle__switch" id="billingToggle" role="switch" aria-checked="false" aria-labelledby="lblMonthly lblYearly">
<span class="toggle__knob"></span>
</button>
<span class="toggle__label" id="lblYearly">Yearly <span class="toggle__save">Save 20%</span></span>
</div>
</div>
<div class="plans">
<article class="plan reveal">
<h3>Starter</h3>
<p class="plan__desc">For solo builders trying things out.</p>
<p class="plan__price"><span class="plan__amount" data-monthly="0" data-yearly="0">$0</span><span class="plan__per">/mo</span></p>
<ul class="plan__list">
<li>300 messages / month</li>
<li>Short-term memory</li>
<li>3 integrations</li>
<li>Community support</li>
</ul>
<a href="#waitlist" class="btn btn--ghost btn--block js-toast" data-msg="Starter is on the house — added to your waitlist spot.">Start free</a>
</article>
<article class="plan plan--featured reveal">
<span class="plan__badge">Most popular</span>
<h3>Pro</h3>
<p class="plan__desc">For people who live in their tools.</p>
<p class="plan__price"><span class="plan__amount" data-monthly="24" data-yearly="19">$24</span><span class="plan__per">/mo</span></p>
<ul class="plan__list">
<li>Unlimited messages</li>
<li>Persistent long-term memory</li>
<li>Unlimited integrations</li>
<li>Tool use & automations</li>
<li>Priority streaming</li>
</ul>
<a href="#waitlist" class="btn btn--primary btn--block">Get Pro</a>
</article>
<article class="plan reveal">
<h3>Team</h3>
<p class="plan__desc">For squads that ship together.</p>
<p class="plan__price"><span class="plan__amount" data-monthly="49" data-yearly="39">$49</span><span class="plan__per">/seat/mo</span></p>
<ul class="plan__list">
<li>Everything in Pro</li>
<li>Shared team memory</li>
<li>Admin & audit logs</li>
<li>SSO & SOC 2</li>
<li>Dedicated support</li>
</ul>
<a href="#waitlist" class="btn btn--ghost btn--block js-toast" data-msg="A Team trial invite is on its way (demo).">Book a demo</a>
</article>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section section--alt" id="faq">
<div class="container container--narrow">
<div class="section__head reveal">
<span class="eyebrow">FAQ</span>
<h2>Questions, answered</h2>
</div>
<div class="faq" id="faqList">
<div class="faq__item reveal">
<button class="faq__q" aria-expanded="false">How is the memory different from chat history?<span class="faq__icon" aria-hidden="true">+</span></button>
<div class="faq__a"><p>History is a log; memory is understanding. Lumio distills what matters — your decisions, preferences, and context — and recalls it precisely when it's relevant, not as a wall of past text.</p></div>
</div>
<div class="faq__item reveal">
<button class="faq__q" aria-expanded="false">Is my data used to train models?<span class="faq__icon" aria-hidden="true">+</span></button>
<div class="faq__a"><p>Never. Your conversations and connected data stay private to your workspace and are excluded from any shared training.</p></div>
</div>
<div class="faq__item reveal">
<button class="faq__q" aria-expanded="false">Which apps can I connect?<span class="faq__icon" aria-hidden="true">+</span></button>
<div class="faq__a"><p>Slack, Notion, GitHub, Linear, Google Workspace, and 60+ more — with a public API for anything custom.</p></div>
</div>
<div class="faq__item reveal">
<button class="faq__q" aria-expanded="false">Can I control what Lumio does on its own?<span class="faq__icon" aria-hidden="true">+</span></button>
<div class="faq__a"><p>Yes. By default Lumio asks before any action. You can grant standing permissions per tool whenever you want more autonomy.</p></div>
</div>
</div>
</div>
</section>
<!-- WAITLIST / CTA -->
<section class="cta" id="waitlist">
<div class="container">
<div class="cta__card reveal">
<div class="cta__glow" aria-hidden="true"></div>
<h2>Be first to meet Lumio.</h2>
<p>Join the waitlist for early access and founding-member pricing locked in for life.</p>
<form class="cta__form" id="waitForm">
<label class="sr-only" for="waitEmail">Email address</label>
<input id="waitEmail" type="email" placeholder="[email protected]" required autocomplete="email" />
<button type="submit" class="btn btn--primary btn--lg">Join waitlist</button>
</form>
<p class="cta__fine">No spam. One launch email. Unsubscribe anytime.</p>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<div class="container footer__grid">
<div class="footer__brand">
<a href="#top" class="brand">
<span class="brand__mark" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 2l2.4 6.4L21 11l-6.6 2.6L12 20l-2.4-6.4L3 11l6.6-2.6L12 2z" fill="url(#g2)"/><defs><linearGradient id="g2" x1="3" y1="2" x2="21" y2="20"><stop stop-color="#a78bfa"/><stop offset="1" stop-color="#22d3ee"/></linearGradient></defs></svg>
</span>
<span class="brand__name">Lumio</span>
</a>
<p>The AI assistant that actually remembers you.</p>
</div>
<nav class="footer__col" aria-label="Product">
<h4>Product</h4>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#demo">Live demo</a>
<a href="#" class="js-toast" data-msg="Changelog is a demo link.">Changelog</a>
</nav>
<nav class="footer__col" aria-label="Company">
<h4>Company</h4>
<a href="#" class="js-toast" data-msg="About page is a demo link.">About</a>
<a href="#" class="js-toast" data-msg="Careers page is a demo link.">Careers</a>
<a href="#" class="js-toast" data-msg="Blog is a demo link.">Blog</a>
</nav>
<nav class="footer__col" aria-label="Legal">
<h4>Legal</h4>
<a href="#" class="js-toast" data-msg="Privacy page is a demo link.">Privacy</a>
<a href="#" class="js-toast" data-msg="Terms page is a demo link.">Terms</a>
<a href="#" class="js-toast" data-msg="Security page is a demo link.">Security</a>
</nav>
</div>
<div class="container footer__bottom">
<p>© 2026 Lumio Labs · Fictional brand for demonstration.</p>
<p class="footer__socials">
<a href="#" class="js-toast" data-msg="Social links are demo placeholders.">𝕏</a>
<a href="#" class="js-toast" data-msg="Social links are demo placeholders.">in</a>
<a href="#" class="js-toast" data-msg="Social links are demo placeholders.">gh</a>
</p>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Chat Assistant Landing
A complete, self-contained marketing landing page for Lumio, a fictional conversational AI assistant. The design leans into a sleek, premium SaaS mood — a deep slate canvas lit by violet-to-cyan gradient glows, large display type, and tasteful glassmorphism. A sticky, blur-backed navigation bar leads into a hero that pairs bold copy with an animated chat mockup: a prompt types itself out, then a reply streams in token by token with a blinking cursor, framed by floating “memory recalled” and “tools called” cards.
Below the fold, the page unfolds through distinct sections: social-proof logos, a six-card feature grid covering memory, tool use, and integrations, a three-step how-it-works flow, and a live demo card where visitors can tap a starter chip or type their own prompt and watch Lumio stream a contextual reply right in the browser. Testimonials, a monthly/yearly pricing toggle with three plans, and an accordion FAQ round out the story before a glowing waitlist call to action and a full footer.
Everything runs on semantic HTML, responsive CSS custom properties, and dependency-free vanilla JavaScript — including the mobile nav toggle, scroll-reveal via IntersectionObserver, the typewriter and streaming effects, the pricing switch, the FAQ accordion, a reusable toast() helper, and prefers-reduced-motion fallbacks. It scales cleanly from wide desktop down to a ~360px phone.
Illustrative UI only — fictional brand, not a real product.