/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
/* ========================== ICONS ========================== */
const LiwayMark = ({ size = 36, color = "currentColor" }) => (
);
const Wordmark = ({ height = 28, color = "currentColor" }) => (
);
const Arrow = ({ size = 14 }) => (
);
/* ========================== NAV ========================== */
const Nav = () => {
// Reveal the small nav logo only after the big hero wordmark scrolls
// out of view. Watching the hero wordmark itself with an IntersectionObserver.
const [showLogo, setShowLogo] = useState(false);
useEffect(() => {
const target = document.querySelector(".hero-wordmark");
if (!target || typeof IntersectionObserver === "undefined") return;
const observer = new IntersectionObserver(
([entry]) => setShowLogo(!entry.isIntersecting),
{ threshold: 0, rootMargin: "-64px 0px 0px 0px" }
);
observer.observe(target);
return () => observer.disconnect();
}, []);
return (
);
};
/* ========================== HERO ========================== */
const HeroVisual = () => (
// Stylized subway-map "L" — uses the brand mark vocabulary but expanded.
// Three stations + connecting tracks. The "leeway" line.
{/* faint grid */}
{/* stations */}
);
const Hero = () => (
Know your{" "}
real headroom
We show you what's safe to spend before payday, so you can stop overthinking it.
See how it works →
{/* mobile-only phone screenshot — sits between lede and CTAs */}
);
/* ========================== LEEWAY METER (live mini-component) ========================== */
const LeewayMeter = () => {
const pos = 60;
return (
YOUR LEEWAY
● SAFE through payday
Apr 22 · last paycheckApr 30 · payday
);
};
/* ========================== WHAT IS LIWAY (feature cards) ========================== */
const FeatureCard = ({ num, title, body, icon }) => (
{num}
{icon}
{title}
{body}
);
const WhatIsLiway = () => (
);
/* ========================== FEATURE SHOWCASE ========================== */
const StatCallout = () => (
{/* 01 — Depletion date */}
We tell you the day, not just the balance .
We compute your daily burn rate from your outflows and show the exact date your balance hits zero. So you can act before it does.
{/* 02 — Honest detection */}
We auto-detect bills. If we're unsure, we say so .
We score every recurring charge by confidence: high, medium, or low. High auto-fills. Medium and low surface for your approval. Never silently.
{/* 03 — Simulator */}
03
The simulator
Slide. Watch your headroom change. Decide.
Move planned spending up or down. The depletion date and risk level recompute instantly. Most apps show you a budget. We show what happens if you break it.
);
/* ========================== HOW IT WORKS ========================== */
const HowItWorks = () => (
How it works
Set up in four minutes. Then never wonder where you stand again.
1
Connect your accounts
Use Plaid (read-only, no passwords) or enter your numbers by hand. Either way works.
~2 minutes
2
Confirm your bills
We detect what's recurring; you confirm what we got right and add what we missed.
~2 minutes
That's it. Open liway whenever you need a real answer. Am I safe through this month? The app tells you in one screen.
);
/* ========================== PRODUCT SHOWCASE ========================== */
const PhoneFrame = ({ label, children, accent, image }) => (
);
const PhoneResults = () => (
9:41 ●●●
Hey Maya,
● SAFE
through Apr 30
$1,184
leeway
Apr 26 · today Apr 30 · payday
Next bill Rent · $1,420
Daily pace $48 / day
UPCOMING
Apr 27 Spotify −$11.99
Apr 29 Verizon −$78.00
Apr 30 Paycheck +$3,240
);
const PhoneOnboarding = () => (
9:41 ●●●
←
STEP 2 OF 3
Add your fixed bills.
We'll detect the rest from your transactions.
Rent $1,420
Spotify $11.99
Verizon $78.00
ClassPass $49.00
Renters insurance $22.50
+ Add another
liway found 3 more recurring charges. Review →
Continue →
);
const PhoneEdit = () => (
9:41 ●●●
WHAT-IF SIMULATOR
If I skip eating out…
PROJECTED LEEWAY
$1,294 +$110
Stays SAFE through May 14
);
const Showcase = () => (
In the app
Am I safe through this month?
The most important money question, answered the second you open the app. No tagging, no categories, no spreadsheet. Just your real balance, real bills, and real next paycheck.
);
/* ========================== TESTIMONIAL ========================== */
const Testimonial = () => (
I stopped checking my bank app every two days. liway tells me what I need to know before I overthink it.
M
Maya R.
Beta user · two banks, one paycheck · since March 2026
);
/* ========================== FINAL CTA ========================== */
const FinalCTA = () => (
{/* the L mark, dramatic, oversized, behind the type */}
Free to start · No credit card
Stop guessing.
Know your headroom.
Connect a bank in two minutes, or try with sample data first. Either way, you'll see your number before your next coffee.
Or open liway on the web →
);
/* ========================== FOOTER ========================== */
const Footer = () => (
);
/* ========================== SCROLL PROGRESS BAR ========================== */
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
;
};
/* ========================== SECTION REVEAL ========================== */
// Adds .is-visible to any .reveal element when it enters the viewport.
// Respects prefers-reduced-motion (CSS handles the visual fallback).
const useRevealOnScroll = () => {
useEffect(() => {
if (typeof IntersectionObserver === "undefined") return;
const targets = document.querySelectorAll(".reveal");
if (!targets.length) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("is-visible");
observer.unobserve(e.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
);
targets.forEach((t) => observer.observe(t));
return () => observer.disconnect();
}, []);
};
/* ========================== APP ========================== */
const App = () => {
useRevealOnScroll();
return (
<>
);
};
ReactDOM.createRoot(document.getElementById("root")).render(
);
