/* app.jsx — production entry point for the Ditto Vault landing page. Replaces the design-canvas mockup shell with a single, scrollable, responsive page. Mounts a global `window.openWaitlist()` that any CTA in the section components can call to open the waitlist modal. */ const { useState, useEffect, useRef, useCallback } = React; // — Responsive switch ──────────────────────────────────────────────────── // Below 768px we render the mobile JSX variants of each section. CSS // media-queries in styles.css handle smaller-scale typography concurrently. function useIsMobile(breakpoint = 768) { const get = () => (typeof window !== "undefined" ? window.innerWidth < breakpoint : false); const [m, setM] = useState(get); useEffect(() => { const onResize = () => setM(get()); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); return m; } // — Scroll-entry reveal hook ───────────────────────────────────────────── // Toggles `.is-visible` on first viewport entry. Disconnects after firing // (one-shot). Respects `prefers-reduced-motion`: in that mode we skip the // observer entirely and render visible from the start. function useReveal(threshold = 0.08, rootMargin = "0px 0px -8% 0px") { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { if (typeof window === "undefined") return; if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVisible(true); return; } const node = ref.current; if (!node) return; const io = new IntersectionObserver( (entries) => { for (const e of entries) { if (e.isIntersecting) { setVisible(true); io.disconnect(); break; } } }, { threshold, rootMargin } ); io.observe(node); return () => io.disconnect(); }, [threshold, rootMargin]); return [ref, visible]; } // — Reveal wrapper ─────────────────────────────────────────────────────── // Adds `.reveal` + `.is-visible` class flow + optional stagger delay. // `delay` lets us cascade adjacent reveals; `as` switches the rendered tag. function Reveal({ children, delay = 0, as = "div", className = "", style, ...rest }) { const [ref, visible] = useReveal(); const Tag = as; const cls = ["reveal", visible ? "is-visible" : "", className].filter(Boolean).join(" "); const css = { ...(style || {}), "--reveal-delay": delay ? `${delay}ms` : undefined }; return {children}; } // — Active section tracker ─────────────────────────────────────────────── // Watches sections with [id] and reports which one is most prominent in // the viewport. Used by Nav to highlight the matching link as you scroll. function useActiveSection(ids) { const [active, setActive] = useState(ids[0] || null); useEffect(() => { if (typeof window === "undefined") return; const nodes = ids .map((id) => document.getElementById(id)) .filter(Boolean); if (!nodes.length) return; const visible = new Map(); const io = new IntersectionObserver( (entries) => { for (const e of entries) { if (e.isIntersecting) visible.set(e.target.id, e.intersectionRatio); else visible.delete(e.target.id); } if (visible.size > 0) { // Pick the section with the largest intersection ratio. let best = null; let bestRatio = -1; for (const [id, ratio] of visible.entries()) { if (ratio > bestRatio) { best = id; bestRatio = ratio; } } if (best) setActive(best); } }, { rootMargin: "-30% 0px -50% 0px", threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] } ); nodes.forEach((n) => io.observe(n)); return () => io.disconnect(); }, [ids.join("|")]); return active; } // — Waitlist submit ────────────────────────────────────────────────────── // POSTs to the Vercel serverless function at /api/waitlist (api/waitlist.js). // Server-side validation + structured logging to Vercel function logs. To // add real email/CRM forwarding, set RESEND_API_KEY + WAITLIST_NOTIFY_EMAIL // env vars in the Vercel project settings. async function submitToWaitlist({ email, accredited }) { try { const r = await fetch("/api/waitlist", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, accredited, source: "vaults-landing" }), }); const data = await r.json().catch(() => ({})); return { ok: r.ok && data && data.ok !== false }; } catch (e) { console.error("[waitlist] submit_failed", e); return { ok: false }; } } function isValidEmail(s) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s); } // — Interactive waitlist dialog (controlled form) ──────────────────────── function InteractiveWaitlistDialog({ onClose }) { const [email, setEmail] = useState(""); const [accredited, setAccredited] = useState(false); const [state, setState] = useState("default"); // default | focus | error | submitting | success const [errorMsg, setErrorMsg] = useState(null); const inputRef = useRef(null); useEffect(() => { // Focus the email field on open for keyboard users. setTimeout(() => inputRef.current && inputRef.current.focus(), 0); }, []); const submit = async (e) => { if (e && e.preventDefault) e.preventDefault(); if (state === "submitting" || state === "success") return; if (!isValidEmail(email)) { setErrorMsg("Please enter a valid email address."); setState("error"); return; } setErrorMsg(null); setState("submitting"); try { const r = await submitToWaitlist({ email, accredited }); if (r && r.ok) setState("success"); else throw new Error("submit-failed"); } catch (_) { setErrorMsg("Something went wrong. Please try again."); setState("error"); } }; const isSuccess = state === "success"; const isError = state === "error"; const isSubmitting = state === "submitting"; const fieldState = isError ? "error" : (state === "focus" ? "focus" : "default"); const ringColor = isError ? "var(--danger)" : (state === "focus" ? "var(--accent)" : "var(--line-strong)"); return ( ); } // — Modal shell (backdrop + ESC + body scroll lock) ────────────────────── function WaitlistModal({ open, onClose }) { // ESC key closes useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [open, onClose]); if (!open) return null; return (

e.stopPropagation()}>

); } // — Root app ───────────────────────────────────────────────────────────── const NAV_IDS = ["hero", "vault", "onramp", "marketplace", "dvn", "roadmap"]; function App() { const isMobile = useIsMobile(); const [waitlistOpen, setWaitlistOpen] = useState(false); const activeSection = useActiveSection(NAV_IDS); // Expose a global so the section CTA buttons can open the modal without // prop-drilling through every component. useEffect(() => { window.openWaitlist = () => setWaitlistOpen(true); return () => { delete window.openWaitlist; }; }, []); const cls = "ditto-root" + (isMobile ? " is-mobile" : ""); return (