// Marketing sections — mono-first, paper-toned, declarative voice. const { useState: useStateS } = React; function useMobile(bp = 768) { const [m, setM] = React.useState(typeof window !== 'undefined' && window.innerWidth <= bp); React.useEffect(() => { const h = () => setM(window.innerWidth <= bp); window.addEventListener('resize', h); return () => window.removeEventListener('resize', h); }, [bp]); return m; } function Eyebrow({ children, n }) { return (
{n && {n}} {children}
); } function SectionTitle({ children, kicker, sub, align = "left" }) { return (
{kicker && {kicker}}

{children}

{sub &&

{sub}

}
); } function PrimaryBtn({ children, href, ghost, full }) { return ( {children} ); } function ContainerCol({ children, style }) { const isMobile = useMobile(); return (
{children}
); } /* ── Nav ── */ function TopNav({ dark, onToggleTheme }) { const isMobile = useMobile(); const [menuOpen, setMenuOpen] = useStateS(false); const NAV_LINKS = [["How it works","#how"],["Features","#features"],["Pricing","#pricing"],["FAQ","#faq"]]; const SunIcon = () => ( ); const MoonIcon = () => ( ); const ThemePill = () => ( ); return ( ); } /* ── Hero ── */ function HeroSection({ replayKey, onReplay }) { const isMobile = useMobile(); const MARQUEE_ITEMS = ["coffee $4.50","rent 1850 — paid","salary +5000","split dinner $86 with mike, ana","groceries 64.20","uber to airport 45","how much did i spend on food?","monthly summary please","🎤 coffee 4, lunch 12, gym 30","spotify subscription","₹1,200 for chai","€38 books","🎤 gasolina 800 pesos, mercado 1200","set budget dining 300","remind ana to pay me back","🎤 petrol 50, groceries 40, parking 8"]; const doubled = [...MARQUEE_ITEMS, ...MARQUEE_ITEMS]; return (
{/* Copy */}
An AI bookkeeper for WhatsApp

Track expenses
inside WhatsApp.

No new app. No spreadsheets. Message Melo the way you'd message a friend — type "coffee with sarah $12" or just send a voice note rattling off your day — and the AI handles the bookkeeping. Categories, totals, summaries, splits. All in the chat you're already in.

Start on WhatsApp ↗ View demo
simple private end-to-end encrypted — free for personal use
{/* Chat */}
{/* Marquee */}
{doubled.map((s, i) => ( "{s}" · ))}
); } /* ── Features ── */ const FEATURES = [ { label: "01", title: "Chat-based logging", body: "Type the way you think. \"Lunch $15.\" \"Salary $5000.\" The model understands slang, multiple currencies, splits, refunds, and recurring items — without a form in sight.", bullets: ["Multi-currency", "Splits & shares", "Receipts via photo"], }, { label: "02", title: "Smart analytics, in chat", body: "Weekly and monthly summaries arrive on the same thread. Ask follow-ups in plain English. There is no dashboard to log into because the chat itself is the dashboard.", bullets: ["Weekly digest", "Ask anything", "Budget alerts"], }, { label: "03", title: "Auto-categorization", body: "Melo knows McDonald's is Food and Uber is Transport. It learns your private quirks too — that \"Lemur\" is your dog walker and goes under Pets — and gets quieter as it gets right.", bullets: ["28 default categories", "Custom rules", "Learns over time"], }, { label: "04", title: "Private by design", body: "Bank-level encryption, end-to-end on the WhatsApp side, encrypted at rest on ours. We never sell your data. You can wipe everything with one message: \"forget me.\"", bullets: ["E2E on WhatsApp", "AES-256 at rest", "One-message delete"], }, { label: "05", title: "Voice note logging", body: "Rambled off five expenses on the way home? Just send a voice note. Melo transcribes it, picks out every amount, and logs them all — in any language you speak. English, Hindi, Spanish, Arabic, Portuguese — it doesn't matter. One clip, every entry captured.", bullets: ["Any language", "Multiple entries per clip", "Instant transcription"], wide: true, }, ]; function FeaturesSection() { const isMobile = useMobile(); return (
Everything you need to master your money — and nothing you don't.
{FEATURES.map((f) => (
{f.label}
{f.wide && ( New )}

{f.title}

{f.body}

{f.bullets.map((b, i) => ( {b} ))}
{f.wide && !isMobile && (
{[ { lang: "EN", clip: "Coffee four bucks, lunch twelve, Uber home twenty-two fifty", entries: ["Dining · $4.00", "Dining · $12.00", "Transport · $22.50"] }, { lang: "ES", clip: "Gasolina ochocientos pesos, mercado mil doscientos", entries: ["Transport · $800", "Groceries · $1,200"] }, ].map(ex => (
{ex.lang} {Array.from({ length: 28 }).map((_, i) => ( ))} 0:{ex.entries.length * 4 + 1}s
{ex.entries.map((e, i) => ( ✓ {e} ))}
))}
)}
))}
); } /* ── How it works ── */ const STEPS = [ { n: "1", title: "Snap or text", body: "Send a text or a photo of your receipt to the Melo number. The first time you talk to Melo, it learns your currency, time zone, and pay cycle — that's the whole onboarding.", sample: { from: "user", text: "uber 24.50" }, }, { n: "2", title: "Instant processing", body: "Vision and language models extract merchant, date, amount, and category in well under a second. Ambiguous? Melo asks one question, never twenty.", sample: { from: "ai", text: "Got it — Transport, $24.50. Tagging this trip as work?" }, }, { n: "3", title: "Insights on demand", body: "Ask anything later — \"how much on food this month?\", \"compare august to september\", \"am I on track for rent?\" — and get a numeric answer, not a chart-shaped guess.", sample: { from: "ai", text: "October food: $312.40. That's $48 less than September. You're 23% under budget." }, }, ]; function HowSection() { const isMobile = useMobile(); return (
From "ugh, I'll do it later" to logged in under a second.
{STEPS.map(s => (
{s.n}

{s.title}

{s.body}

{s.sample.text}
))}
); } /* ── Live Demo ── */ const DEMO_TXNS = [ { d: "Oct 28", who: "Pret a Manger", cat: "Dining", v: 8.40, tone: "peach" }, { d: "Oct 28", who: "Uber", cat: "Transport", v: 14.20, tone: "sky" }, { d: "Oct 27", who: "Whole Foods", cat: "Groceries", v: 62.10, tone: "sage" }, { d: "Oct 27", who: "Spotify", cat: "Subs", v: 9.99, tone: "lavender" }, { d: "Oct 26", who: "Sarah (split)", cat: "Dining", v: 28.67, tone: "peach" }, { d: "Oct 26", who: "BP — petrol", cat: "Transport", v: 41.00, tone: "sky" }, { d: "Oct 25", who: "Trader Joe's", cat: "Groceries", v: 38.40, tone: "sage" }, { d: "Oct 24", who: "Salary", cat: "Income", v: -3200, tone: "butter" }, { d: "Oct 23", who: "Lemur (dog)", cat: "Pets", v: 45.00, tone: "rose" }, { d: "Oct 22", who: "Apple One", cat: "Subs", v: 19.95, tone: "lavender" }, ]; const DEMO_CATS = ["All","Dining","Transport","Groceries","Subs","Pets","Income"]; function DemoSection() { const [cat, setCat] = useStateS("All"); const isMobile = useMobile(); const filtered = DEMO_TXNS.filter(t => cat === "All" || t.cat === cat); const total = filtered.filter(t => t.v > 0).reduce((s, t) => s + t.v, 0); return (
A ledger that builds itself.
{/* Toolbar */}
Filter
{DEMO_CATS.map(c => ( ))}
{!isMobile &&
} {!isMobile && ( {filtered.length} rows · spend ${total.toFixed(2)} )}
{/* Rows — scrollable on mobile */}
{filtered.map((t, i) => (
{t.d} {t.who} {t.cat} {t.v < 0 ? "+" : "−"}${Math.abs(t.v).toFixed(2)}
))} {filtered.length === 0 && (
Nothing here yet. Ask Melo: "log $X for {cat.toLowerCase()}".
)}
); } /* ── Privacy ── */ function PrivacySection() { const isMobile = useMobile(); return (
Privacy

Your money is your business — and only yours.

The honest reason people don't track expenses is that handing a stranger your spending feels gross. Melo is built so we see as little as possible, store it well, and hand it back the moment you ask.

{[ ["Encrypted on WhatsApp", "All messages travel end-to-end via WhatsApp's protocol. Nobody at Melo can read them in flight."], ["Encrypted at rest", "Your ledger is stored AES-256 encrypted, isolated per user, in EU & US regions."], ["Never sold, never trained on", "We do not sell data, share with brokers, or fine-tune our models on your spending."], ["One-message delete", "Send \"forget me\" and your data is purged within 24 hours. Receipts attached."], ].map(([t, b], i, arr) => (
0{i+1}
{t}
{b}
))}
); } /* ── Pricing ── */ const PLANS = [ { name: "Free", price: "$0", cadence: "forever", sub: "Everything most people need. No credit card.", features: ["Unlimited messages","1 currency","Auto-categorize","Weekly summary","30-day history"], cta: "Start on WhatsApp", primary: false, }, { name: "Plus", price: "$4", cadence: "/ month", sub: "For people who actually look at the numbers.", features: ["Everything in Free","Unlimited history","Multi-currency","Custom categories & rules","Splits with reminders","Receipt OCR"], cta: "Start free trial", primary: true, }, { name: "Households", price: "$8", cadence: "/ month", sub: "Shared finances without shared anxiety.", features: ["Everything in Plus","Up to 4 members","Shared categories","Per-person budgets","Monthly statement (PDF)"], cta: "Set up household", primary: false, }, ]; function PricingSection() { const isMobile = useMobile(); return (
Three plans. The first one is enough for most people.
{PLANS.map(p => (
{p.primary && POPULAR}
{p.name}
{p.price} {p.cadence}

{p.sub}

    {p.features.map(f => (
  • • {f}
    • ))}
{p.cta} →
))}

Annual billing saves 20%. No hidden fees. Cancel by sending Melo "cancel".

); } /* ── Comparison ── */ function ComparisonSection() { const isMobile = useMobile(); const rows = [ ["Where it lives", "Inside WhatsApp", "Standalone app", "Spreadsheet"], ["Time to log an expense", "≈ 2 seconds", "≈ 30 seconds", "≈ 60 seconds"], ["Onboarding", "Send one message", "Sign up, OTP, KYC, link bank", "Build the sheet yourself"], ["Categorization", "AI, learns your habits", "Rules-based", "Manual"], ["Insights", "Ask in plain English", "Pre-built dashboards", "Pivot tables, if you must"], ["Notifications", "Same thread you read", "Push you'll mute", "None"], ]; return (
Why a chat beats an app. {/* Scrollable on mobile */}
Melo Budgeting app Spreadsheet
{rows.map((r, i) => (
{r[0]} {r[1]} {r[2]} {r[3]}
))}
); } /* ── Voice Notes ── */ function VoiceSection() { const isMobile = useMobile(); const DEMOS = [ { lang: "English", flag: "🇺🇸", clip: "Coffee was four, grabbed lunch for twelve bucks, and the Uber home was like twenty-two fifty", entries: [ { label: "Dining", v: "$4.00", tone: "peach" }, { label: "Dining", v: "$12.00", tone: "peach" }, { label: "Transport", v: "$22.50", tone: "sky" }, ], }, { lang: "Hindi", flag: "🇮🇳", clip: "Chai ke liye bees rupaye, auto mein pachas, aur ghar ke liye sabzi ek sau bees", entries: [ { label: "Dining", v: "₹20", tone: "peach" }, { label: "Transport", v: "₹50", tone: "sky" }, { label: "Groceries", v: "₹120", tone: "sage" }, ], }, { lang: "Spanish", flag: "🇪🇸", clip: "Gasolina ochocientos pesos, mercado mil doscientos, y la renta cuatro mil", entries: [ { label: "Transport", v: "$800", tone: "sky" }, { label: "Groceries", v: "$1,200", tone: "sage" }, { label: "Rent", v: "$4,000", tone: "lavender" }, ], }, ]; const [active, setActive] = useStateS(0); const demo = DEMOS[active]; function WaveBar({ seed, height }) { return ; } function Waveform({ seed }) { return (
{Array.from({ length: 40 }).map((_, i) => { const h = 4 + Math.abs(Math.sin((i + seed) * 0.7) * Math.cos((i + seed) * 0.4 + 1)) * 22; return ; })}
); } return (
{/* Copy */}
Voice notes

Say it.
Log everything.

Ramble off your whole day in one voice note — coffee, lunch, Uber, groceries, whatever. Melo transcribes it and pulls out every amount automatically. One clip, every expense captured.

{[ ["Any language", "Speak in English, Hindi, Spanish, Arabic, Portuguese, French — Melo understands."], ["Multiple entries, one clip", "Don't log one by one. List everything in a single voice note and Melo splits them all."], ["Same thread, no app", "Your voice notes live in WhatsApp. Nothing to install, nothing extra to open."], ].map(([t, b]) => (
↳
{t} — {b}
))}
{/* Interactive demo */}
{/* Language tabs */}
{DEMOS.map((d, i) => ( ))}
{/* Voice note bubble (user side) */}
🎤 0:{demo.entries.length * 4 + 1}s
"{demo.clip}"
{/* AI response */}
Got {demo.entries.length} expense{demo.entries.length > 1 ? "s" : ""} from your voice note —
{demo.entries.map((e, i) => (
✓ {e.label} {e.v}
))}
All logged. Anything to adjust?

Works with any accent, any currency symbol, and mixed-language clips.

); } /* ── FAQ ── */ const FAQS = [ ["Do I need to install anything?", "No. Melo lives entirely inside WhatsApp. Open WhatsApp, message the Melo number, and you're using it. Removing Melo is the same as deleting any contact."], ["Does Melo connect to my bank?", "Not by default, and we don't recommend it. You log expenses by sending messages. Bank-link is on the roadmap for Plus, opt-in only, with read-only credentials and zero retention of raw transactions."], ["Which currencies and languages?", "All major currencies (auto-detected from message context), plus crypto. English, Spanish, Portuguese, French, Hindi, and Arabic at launch — both for typed messages and voice notes. You can switch languages mid-clip and Melo will follow."], ["What happens to my data if I stop using it?", "Nothing changes — your ledger sits idle, encrypted, until you ask for it. Send \"forget me\" and we purge everything within 24 hours and email you a confirmation."], ["Why WhatsApp, not Signal or iMessage?", "Reach. WhatsApp has 2.8 billion users globally and is the default chat app outside North America. We'll add Signal and iMessage support — most likely in that order."], ["Is it actually private?", "We see what you message Melo, encrypted in transit and at rest. We do not sell data, do not train on it, and do not share with advertisers. Read the technical write-up under Privacy."], ]; function FaqSection() { const [open, setOpen] = useStateS(0); const isMobile = useMobile(); return (
Plain answers.
{FAQS.map(([q, a], i) => (
{a}
))}
); } /* ── Closing CTA ── */ function CtaSection() { const isMobile = useMobile(); return (
Get started

Start tracking in thirty seconds.

Join the people who quietly ditched the spreadsheet. The first message is the only setup.

Chat with Melo ↗ See pricing
Free forever for basic use · No credit card · No spam
); } /* ── Footer ── */ function FooterSection() { const isMobile = useMobile(); const COLS = [ ["Navigate", [ ["Features", "#features"], ["Pricing", "#pricing"], ["Security", "#privacy"], ]], ["Legal", [ ["Privacy policy", "privacy.html"], ["Terms of service","terms.html"], ["Data deletion", "privacy.html#data-deletion"], ]], ]; const ALL_CARDS = [ { l: 2, t: 55, r: -5, type: "txn", who: "Salary credit", cat: "Income", tone: "butter", v: "+$5,000" }, { l: 7, t: 215, r: 2, type: "txn", who: "Pret a Manger", cat: "Dining", tone: "peach", v: "$8.40" }, { l: 18, t: 16, r: -2, type: "txn", who: "Whole Foods", cat: "Groceries", tone: "sage", v: "$62.10" }, { l: 23, t: 188, r: 3, type: "chat", text: "How much on food this month?", from: "user" }, { l: 35, t: 6, r: -1, type: "mini", text: "October · 23% under budget · $714.70" }, { l: 42, t: 155, r: 4, type: "chat", text: "split $86 dinner — mike & ana", from: "user" }, { l: 54, t: 50, r: -4, type: "txn", who: "BP petrol", cat: "Transport", tone: "sky", v: "$41.00" }, { l: 59, t: 248, r: 2, type: "chat", text: "₹1,200 for chai", from: "user" }, { l: 67, t: 12, r: 1, type: "txn", who: "Lemur the dog", cat: "Pets", tone: "rose", v: "$45.00" }, { l: 72, t: 150, r: -3, type: "chat", text: "remind ana she owes me $28.67", from: "user" }, { l: 81, t: 58, r: 3, type: "txn", who: "Apple One", cat: "Subs", tone: "lavender", v: "$19.95" }, { l: 87, t: 228, r: -2, type: "chat", text: "€38 for books", from: "user" }, ]; const CARDS = isMobile ? ALL_CARDS.filter(c => c.l >= 18 && c.l <= 80).slice(0, 6) : ALL_CARDS; const ART_H = isMobile ? 290 : 340; return ( ); } window.TopNav = TopNav; window.HeroSection = HeroSection; window.FeaturesSection = FeaturesSection; window.HowSection = HowSection; window.VoiceSection = VoiceSection; window.DemoSection = DemoSection; window.PrivacySection = PrivacySection; window.PricingSection = PricingSection; window.ComparisonSection = ComparisonSection; window.FaqSection = FaqSection; window.CtaSection = CtaSection; window.FooterSection = FooterSection;