/* global React, ReactDOM */ const { useState, useMemo, useEffect, useRef } = React; /* ========================== ICONS / WORDMARK ========================== */ const LiwayMark = ({ size = 36, color = "currentColor" }) => ( ); const Wordmark = ({ height = 28, color = "currentColor" }) => ( ); const Arrow = ({ size = 14 }) => ( ); /* ========================== NAV ========================== */ const Nav = () => (
); /* ========================== INTERACTIVE LEEWAY METER ========================== */ const LEEWAY_THRESHOLD_TIGHT = 500; const verdictFor = (available) => { if (available < 0) return { level: "risk", label: "RISK: you'll run short", color: "var(--risk-fg)" }; if (available <= LEEWAY_THRESHOLD_TIGHT) return { level: "tight", label: "TIGHT: close but covered", color: "var(--tight-fg)" }; return { level: "safe", label: "SAFE through payday", color: "var(--safe-fg)" }; }; const InteractiveLeeway = ({ initialBalance = 1464, initialBills = 280 }) => { const [balance, setBalance] = useState(initialBalance); const [bills, setBills] = useState(initialBills); const available = useMemo(() => balance - bills, [balance, bills]); const verdict = useMemo(() => verdictFor(available), [available]); // Position marker as a function of available / balance — clamp 0–100 const fillPct = balance > 0 ? Math.max(0, Math.min(100, (available / balance) * 100)) : 0; const billPct = balance > 0 ? Math.max(0, Math.min(100, (bills / balance) * 100)) : 0; return (
YOUR LEEWAY ● {verdict.label}
${bills.toLocaleString()}
${available.toLocaleString()}
headroom
Apr 22 · last paycheck Apr 30 · payday
); }; /* ========================== HERO ========================== */ const HlwHero = () => (

How liway works

The math behind your{" "} headroom.

A worked example, end to end. The formula, the verdicts, and the receipt. No spreadsheets, no jargon.

Drag the sliders. The number you see is the same one your real account would show.

); /* ========================== TERMS YOU'LL SEE ========================== */ const TERM_CARDS = [ { word: "liway", role: "the app", body: "Pronounced like “leeway.” That's deliberate. The word inspired the name." }, { word: "Leeway", role: "the number we compute", body: "Your dollar amount of safe-to-spend room before payday. The headline number on every screen of the app." }, { word: "headroom", role: "the everyday word for it", body: "“How much room do I have?” is what most people actually ask. We use both words on purpose. Pick whichever feels natural." } ]; const TermCards = () => (

A few words you'll see

Three words. One simple idea.

You'll hear us use these words around here. They're close cousins, not jargon. Here's what each one means.

{TERM_CARDS.map((t) => (

{t.word}

{t.role}

{t.body}

))}
); /* ========================== HOW WE FIGURE IT OUT ========================== */ const HowWeFigure = () => (

How we figure it out

Your real headroom is what's left after what's coming.

We take what's actually in your account and subtract what's already promised: bills, autopays, the things you can't easily change. The number that's left is yours to spend, without surprises.

In your account $1,464 Live from your bank
minus
Already promised $280 CC autopay coming up
equals
Yours to spend $1,184 Real headroom, no surprises
); /* ========================== THREE STATES ========================== */ const VerdictMini = ({ level, label, headline, story }) => (
● {label}

{headline}

{story}

); const Verdicts = () => (

Three states

You'll see one of three answers.

liway doesn't grade you or score you. It just tells you where your cycle stands. So you can decide what to do, not feel judged.

); /* ========================== WHY THIS MATTERS ========================== */ const WhyMatters = () => (

Why this matters

Most apps show you the balance. liway shows what's actually safe to spend.

What you usually see

$1,464

"You have $1,464 in checking."

True, but it doesn't tell you whether dinner tonight is fine, because it doesn't account for what's already on its way out.

What liway shows you

$1,184

"That's your real headroom."

The $280 autopay is already set aside, so you can spend the full $1,184 without overdrafting. The math is the receipt.

); /* ========================== FINAL CTA ========================== */ const FinalCTA = () => (

Free to start · No credit card

Stop guessing.
Know your headroom.

Connect a bank in two minutes, or try with sample data first. Your real number, every time you open the app.

Download on the App Store Get it on Google Play

Or open liway on the web →

); /* ========================== FOOTER ========================== */ const Footer = () => ( ); /* ========================== SCROLL PROGRESS BAR ========================== */ // Mirror of the ScrollProgress component on the homepage. Same .scroll-progress // styles in design/site/styles.css (which this page imports), so no CSS changes. const ScrollProgress = () => { const ref = useRef(null); useEffect(() => { const update = () => { const doc = document.documentElement; const max = doc.scrollHeight - doc.clientHeight; const pct = max > 0 ? (doc.scrollTop / max) * 100 : 0; if (ref.current) ref.current.style.width = pct + "%"; }; update(); window.addEventListener("scroll", update, { passive: true }); window.addEventListener("resize", update); return () => { window.removeEventListener("scroll", update); window.removeEventListener("resize", update); }; }, []); return