// Duly — product page (v2) // Structure: editorial calm of v1, real product of v2, only TWO phone shots. // Cottage hero, principles, one app peek, sage values band, CTA. const D = { cream: "#F4EFE3", paper: "#FBF8EE", card: "#FFFFFF", rule: "#E5DFCF", ruleStrong: "#D8D1BD", ink: "#1A1D17", ink2: "#3D4138", mute: "#8C8B7E", sage: "#7A9B6E", sageDk: "#5C7A52", sageDkr: "#4A6342", sageLt: "#C8D5BC", sageBg: "#E2EAD9", sans: "'Geist', system-ui, -apple-system, sans-serif", serif: "'Fraunces', Georgia, serif", mono: "'Geist Mono', ui-monospace, monospace" }; // ─── tiny svg icons ───────────────────────────────────────── const Icon = ({ name, size = 22, color = D.sageDk, stroke = 1.7 }) => { const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "home":return ; case "vehicle":return ; case "person":return ; case "bell":return ; case "arrow":return ; case "pet":return ; case "child":return ; case "rental":return ; case "boat":return ; case "digital":return ; case "financial":return ; case "plants":return ; default:return null; } }; // ─── Phone frame ─────────────────────────────────────────── function PhoneFrame({ src, tilt = 0, scale = 1 }) { const W = 300 * scale,H = 624 * scale; return (
); } // ─── Top nav (sticky pill, always visible) ─────────────────── function Nav() { const link = { color: D.ink2, textDecoration: "none", fontSize: 13, padding: "8px 14px", borderRadius: 999, whiteSpace: "nowrap" }; return (
); } // ─── Hero — cottage scene with floating list card ───────── function Hero() { return (
{/* LEFT — copy */}
Releasing 2026

Duly

Everything. On time.

HVAC filters. Oil changes. Smoke detector batteries. Passport renewals. All the small things that, ignored long enough, become big things.

What does it track?
Local-first iOS · Android No required accounts
{/* RIGHT — cottage scene + floating list card */}
This week
    {[ ["Oil change", true], ["Smoke detector battery", true], ["HVAC filter replacement", true], ["Clean windows", false]]. map(([txt, done], i) =>
  • {done ? "✓" : ""} {txt}
    • )}
); } // ─── Categories: what it tracks ──────────────────────────── function Categories() { const cats = [ { icon: "home", title: "Around the house", items: ["HVAC filters", "Smoke detector batteries", "Dryer vent cleaning", "Water filters", "Gutters"] }, { icon: "vehicle", title: "On the road", items: ["Oil changes", "Tire rotation", "Registration & inspection", "Wiper blades", "Air filter"] }, { icon: "person", title: "For yourself", items: ["Passport & ID renewals", "Annual physical", "Eye exam", "Dentist", "Prescriptions"] }]; const moreCats = [ { icon: "pet", title: "Pet" }, { icon: "child", title: "Child" }, { icon: "rental", title: "Rental Property" }, { icon: "boat", title: "Boat" }, { icon: "digital", title: "Digital" }, { icon: "financial", title: "Financial" }, { icon: "plants", title: "Plants" }]; return (
¶ What it tracks

Categories to easily manage your life and keep it running smoothly.

{cats.map((c) =>

{c.title}

    {c.items.map((t) =>
  • {t}
    • )}
)}
+ more categories available
{moreCats.map((c) =>
{c.title}
)}
); } // ─── Principles ──────────────────────────────────────────── function Principles() { const items = [ { n: "01", t: "Know what to track", d: "Duly comes pre-loaded with the things people actually forget — HVAC filters, oil changes, passport renewals. Set up your home, your car, your stuff once. The reminders are already there." }, { n: "02", t: "Set it and check back", d: "Duly isn't a daily to-do list. Add what you need to track once, and it'll be there waiting when the time comes. No daily check-ins required." }, { n: "03", t: "Your data, your device", d: "Your tasks live on your phone. Yours to keep, yours to back up, yours to walk away with. No account required to get started." }]; return (
¶ Three principles

What we left out is more important than what we put in.

{items.map((p) =>
{p.n}

{p.t}

{p.d}

)}
); } // ─── Glimpse — single phone peek ─────────────────────────── function Glimpse() { return (
§ A glimpse of the app

One screen. Everything that matters.

Duly opens to what's due now and what's coming up. Recurring tasks reappear on their own schedule — set them up once and we'll remind you when it's time.

Miss a deadline? Duly tells you. Ignore it for a week? Duly tells you again. The whole point is that you don't have to remember any of this yourself.

); } // ─── Quietly — sage values band ──────────────────────────── function Quietly() { const things = [ ["No required accounts", "Open the app and start. No signup needed."], ["No metrics", "We don't count streaks, points, or 'productivity scores'."], ["No AI features", "No chatbots. No 'smart' summaries. No bloat. If we add AI, it's local and quiet."], ["No nags", "One reminder when it's due. One if you forget. We're not here to badger you."], ["No tracking", "Zero analytics. Zero telemetry. We don't know you're here."]]; return (
✕ Things we will not do

Some apps add features to compete. Duly leaves them out, on purpose.

{things.slice(0, 3).map(([t, d], i) =>

{t}

{d}

)}
{things.slice(3).map(([t, d], i, arr) =>

{t}

{d}

)}
); } // ─── GetDuly — closing wordmark + Coming Soon card ───────── function GetDuly() { return (
Duly™

Everything. On time.

IN DEVELOPMENT
Coming soon to the App Store and Google Play
IOS · ANDROID
Duly app icon ™
); } // ─── Footer ────────────────────────────────────────────── function Footer() { return ( ); } // ─── Page composition ─────────────────────────────────── function DulyPage() { // Hash-anchor links scroll smoothly without dirtying the URL. // (a) On load, if URL already has #section, scroll there then clear the hash. // (b) Intercept future clicks on so they scroll without URL change. React.useEffect(() => { if (window.location.hash) { const id = window.location.hash.slice(1); setTimeout(() => { if (id) { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); } history.replaceState(null, "", window.location.pathname + window.location.search); }, 100); } const onClick = (e) => { const a = e.target.closest && e.target.closest('a[href^="#"]'); if (!a) return; const href = a.getAttribute("href"); if (!href) return; e.preventDefault(); if (href === "#") { window.scrollTo({ top: 0, behavior: "smooth" }); return; } const el = document.getElementById(href.slice(1)); if (el) el.scrollIntoView({ behavior: "smooth" }); }; document.addEventListener("click", onClick); return () => document.removeEventListener("click", onClick); }, []); return (
); } ReactDOM.createRoot(document.getElementById("root")).render();