/* Stratum Leads — Marketing website UI kit (public homepage). Recreates stratumleads.com hero → pillars → workflow → trust → plans. */ const M = window.StratumLeadsDesignSystem_6367ed; const { Button, Card, StatusChip, TierBadge, StrataAmount, Field, Checkbox } = M; const I = (n, s) => ; const refresh = () => requestAnimationFrame(() => window.lucide && window.lucide.createIcons({ attrs: { "stroke-width": 1.9 } })); /* Responsive viewport hook — inline styles can't use CSS media queries, so we read window width and switch layouts in JS. isMobile → single column, isTablet → collapse the multi-column grids and the nav links. */ function useViewport() { const [w, setW] = React.useState(typeof window !== "undefined" ? window.innerWidth : 1280); React.useEffect(() => { const onResize = () => setW(window.innerWidth); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); return { w, isMobile: w < 760, isTablet: w < 1040 }; } const CONTACT = { address1: "1629 K St NW, Suite 300", address2: "Washington, DC 20006", phone: "(202) 643-6467", phoneHref: "tel:+12026436467", email: "support@stratumleads.com", }; function Nav({ onSignup, onSignin }) { const { isMobile, isTablet } = useViewport(); return (
STRATUM LEADS
{!isTablet && }
); } function Hero({ onSignup }) { const { isMobile, isTablet } = useViewport(); return (

Verified Lead Operating System

Verified property leads.
Won at auction, not guessed.

Stratum Leads is where real-estate investors and agents find county-verified property leads, win them in live Strata auctions, and close them in a built-in CRM — one governed workspace instead of five scattered tools.

{[["store", "Verified marketplace"], ["gavel", "Live auction desk"], ["briefcase-business", "Won-lead CRM"], ["wallet-cards", "Wallet + account"]].map(([ic, t]) => ( {I(ic, { width: 15, color: "var(--accent)" })}{t} ))}
); } function HeroMock() { return (
app.stratumleads.com
{[["AAA", "1234 E Desert Cove Ave", "Pre-Foreclosure", 230], ["AA", "8521 Meadow Ridge Dr", "Tax Delinquent", 175]].map(([tier, addr, trig, bid]) => (
{trig}
Live
{addr}
Current bid
))}
); } function Pillars() { const items = [ ["store", "Marketplace", "Scan verified inventory by county, trigger, tier, and quality before any clock starts."], ["gavel", "Auction Desk", "Compete with wallet-aware bid controls and clear outbid pressure signals."], ["briefcase-business", "Won-Lead CRM", "Work won opportunities with vault access, tasks, notes, and next-best action."], ["wallet-cards", "Wallet & Account", "Escrow, credits, billing, and subscription — controlled, audit-ready."], ]; const { isMobile, isTablet } = useViewport(); return (

Product Pillars

Not an IDX template. A lead acquisition workspace.

{items.map(([ic, t, d]) => ( {I(ic, { width: 20 })}

{t}

{d}

 ))}
); } function Split({ id, eyebrow, title, body, steps, reverse }) { const copy = (

{eyebrow}

{title}

{body}

); const list = (
{steps.map(([ic, t, d]) => (
{I(ic, { width: 18 })}
{t}

{d}

))}
); const { isMobile, isTablet } = useViewport(); return (
{reverse && !isTablet ? {list}{copy} : {copy}{list}}
); } function Trust() { const items = [ ["shield-check", "Gated mutations", "Bids, ticket replies, wallet reloads, and account actions run through explicit gates."], ["lock-keyhole", "Locked payloads", "Private lead details stay hidden until the right delivery state exists."], ["receipt-text", "Audit-ready context", "Wallet, billing, and subscription summaries stay visible without uncontrolled writes."], ]; const { isMobile } = useViewport(); return (

Trust, Security, Governance

Obvious actions, controlled writes.

{items.map(([ic, t, d]) => ( {I(ic, { width: 20 })}

{t}

{d}

 ))}
); } function Plans({ onSignup }) { const plans = [ ["Launch", "$49", "Start buying verified leads", ["Marketplace access", "Daily Free Strata", "1 seat"], false], ["Scale", "$149", "Higher volume and bid readiness", ["Everything in Launch", "Priority auction alerts", "3 seats", "CRM workspace"], true], ["Broker", "Custom", "Team access when seats are enabled", ["Everything in Scale", "Unlimited seats", "Governance controls"], false], ]; const { isMobile } = useViewport(); return (

Plans

Select a plan, then finish setup.

{plans.map(([name, price, tag, feats, feat]) => (
{feat && Popular}
{name}
{price}{price !== "Custom" && /mo}

{tag}

    {feats.map((f) =>
  • {I("check", { width: 16, color: "var(--success)" })}{f}
    • )}
))}

{ e.preventDefault(); onSignup("Beta"); }} style={{ color: "var(--accent)", fontWeight: 700, textDecoration: "none" }}>Join the Beta Tester program — $19/mo {" — "}early access to every feature as we ship it. In exchange, testers must provide meaningful, ongoing feedback; inactive members are removed from the program.

); } function Footer() { const { isMobile } = useViewport(); const linkStyle = { color: "inherit", display: "inline-flex", alignItems: "center", gap: 7 }; return ( ); } /* ============================ Sign-up workflow ============================ */ const PLAN_INFO = { Launch: { price: "$49/mo", tag: "Start buying verified leads" }, Scale: { price: "$149/mo", tag: "Higher volume and bid readiness" }, Broker: { price: "Custom", tag: "Team access when seats are enabled" }, }; function OtpInput({ value, onChange, length = 6, autoFocus }) { const refs = React.useRef([]); React.useEffect(() => {if (autoFocus && refs.current[0]) refs.current[0].focus();}, [autoFocus]); const digits = Array.from({ length }, (_, i) => value[i] || ""); const setAt = (i, raw) => { const d = raw.replace(/\D/g, ""); if (d.length > 1) { const merged = (value.slice(0, i) + d).slice(0, length); onChange(merged); const f = Math.min(i + d.length, length - 1); if (refs.current[f]) refs.current[f].focus(); return; } const arr = value.padEnd(length).split(""); arr[i] = d; const joined = arr.join("").replace(/\s/g, "").slice(0, length); onChange(joined); if (d && i < length - 1 && refs.current[i + 1]) refs.current[i + 1].focus(); }; const onKey = (i, e) => {if (e.key === "Backspace" && !value[i] && i > 0 && refs.current[i - 1]) refs.current[i - 1].focus();}; return (
{digits.map((d, i) => refs.current[i] = el} value={d} inputMode="numeric" maxLength={i === 0 ? length : 1} aria-label={`Digit ${i + 1}`} onChange={(e) => setAt(i, e.target.value)} onKeyDown={(e) => onKey(i, e)} style={{ width: 46, height: 54, textAlign: "center", fontSize: 22, fontWeight: 800, fontFamily: "var(--font-mono)", borderRadius: "var(--radius-sm)", border: "1.5px solid " + (d ? "var(--accent)" : "var(--border)"), background: "var(--surface)", color: "var(--text)", outline: "none" }} /> )}
); } function Resend({ onResend }) { const [secs, setSecs] = React.useState(30); React.useEffect(() => {if (secs <= 0) return;const t = setTimeout(() => setSecs((s) => s - 1), 1000);return () => clearTimeout(t);}, [secs]); if (secs > 0) return Resend code in {secs}s; return ; } const STEPS = ["Account", "Email", "Phone", "Done"]; function SignupFlow({ plan, onClose, onSwitchToSignin }) { const [step, setStep] = React.useState(0); const [form, setForm] = React.useState({ name: "", email: "", password: "", agree: false, cc: "+1", phone: "" }); const [emailCode, setEmailCode] = React.useState(""); const [phoneCode, setPhoneCode] = React.useState(""); const [errors, setErrors] = React.useState({}); const [busy, setBusy] = React.useState(false); React.useEffect(() => {refresh();}); React.useEffect(() => {const onKey = (e) => e.key === "Escape" && onClose();window.addEventListener("keydown", onKey);return () => window.removeEventListener("keydown", onKey);}, []); const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); const advance = (n) => {setBusy(true);setTimeout(() => {setBusy(false);setStep(n);}, 550);}; const submitAccount = () => { const err = {}; if (!form.name.trim()) err.name = "Enter your full name."; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) err.email = "Enter a valid email address."; if (form.password.length < 8) err.password = "Use at least 8 characters."; if (!form.agree) err.agree = "Please accept the terms to continue."; setErrors(err); if (Object.keys(err).length === 0) {setEmailCode("");advance(1);} }; const verifyEmail = () => { if (emailCode.length < 6) {setErrors({ emailCode: "Enter the full 6-digit code." });return;} setErrors({});advance(2); }; const submitPhone = () => { const digits = form.phone.replace(/\D/g, ""); if (digits.length < 10) {setErrors({ phone: "Enter a valid phone number." });return;} setErrors({});setPhoneCode("");advance(3); }; const verifyPhone = () => { if (phoneCode.length < 6) {setErrors({ phoneCode: "Enter the full 6-digit code." });return;} setErrors({});setStep(4); }; const headerIcon = { 0: "user-plus", 1: "mail-check", 2: "smartphone", 3: "message-square-lock", 4: "party-popper" }[step]; const activeStage = step >= 4 ? 3 : step; const overlay = { position: "fixed", inset: 0, zIndex: 100, background: "rgba(16,22,38,0.62)", backdropFilter: "blur(3px)", display: "grid", placeItems: "center", padding: 20, overflowY: "auto" }; const cardStyle = { width: "min(468px, 100%)", background: "var(--surface)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xl)", overflow: "hidden", margin: "auto" }; const bodyPad = { padding: "26px 30px 30px" }; const backBtn = (to) => ; return (
e.stopPropagation()}> {/* Header + progress */}
{I(headerIcon, { width: 20 })}
Create your account
{plan ? `${plan} plan · ${PLAN_INFO[plan] ? PLAN_INFO[plan].price : ""}` : "Stratum Leads"}
{/* Stepper */}
{STEPS.map((s, i) => { const done = i < activeStage; const on = i === activeStage; return (
{done ? I("check", { width: 12 }) : i + 1} {s}
{i < STEPS.length - 1 && } ); })}
{/* Step 0 — Account */} {step === 0 &&
{plan && PLAN_INFO[plan] &&
{plan}
{PLAN_INFO[plan].tag}
{PLAN_INFO[plan].price}
}
setForm((f) => ({ ...f, agree: typeof v === "boolean" ? v : !f.agree }))} label="I agree to the Terms of Service and Privacy Policy." /> {errors.agree &&
{errors.agree}
}

Already have an account?

} {/* Step 1 — Verify email */} {step === 1 &&

We sent a 6-digit code to

{form.email}

{errors.emailCode &&

{errors.emailCode}

}
Didn't get it?
{I("info", { width: 13 })}Demo: enter any 6 digits.
{backBtn(0)}
} {/* Step 2 — Phone */} {step === 2 &&
{I("check-circle-2", { width: 15 })}Email verified

Add a mobile number for account security. We'll text you a verification code.

{backBtn(1)}
} {/* Step 3 — Verify phone */} {step === 3 &&

We texted a 6-digit code to

{form.cc} {form.phone}

{errors.phoneCode &&

{errors.phoneCode}

}
Didn't get it?
{I("info", { width: 13 })}Demo: enter any 6 digits.
{backBtn(2)}
} {/* Step 4 — Done */} {step === 4 &&
{I("check", { width: 30 })}

You're all set, {form.name.split(" ")[0] || "there"}!

Your email and phone are verified{plan ? ` and your ${plan} plan is ready` : ""}. Jump into the marketplace and start finding verified leads.

{[["mail-check", `Email verified · ${form.email}`], ["smartphone", `Phone verified · ${form.cc} ${form.phone}`], ["shield-check", "Account secured with 2-step verification"]].map(([ic, t]) =>
{I(ic, { width: 16 })}{t}
)}
}
); } function SignInFlow({ onClose, onSwitchToSignup }) { const [step, setStep] = React.useState(0); const [form, setForm] = React.useState({ email: "", password: "", remember: true }); const [code, setCode] = React.useState(""); const [errors, setErrors] = React.useState({}); const [busy, setBusy] = React.useState(false); React.useEffect(() => {refresh();}); React.useEffect(() => {const onKey = (e) => e.key === "Escape" && onClose();window.addEventListener("keydown", onKey);return () => window.removeEventListener("keydown", onKey);}, []); const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); const submitCreds = async () => { const err = {}; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) err.email = "Enter a valid email address."; if (!form.password) err.password = "Enter your password."; setErrors(err); if (Object.keys(err).length > 0) return; if (!window.__sb) {setErrors({ auth: "Supabase client is not configured." });return;} setBusy(true); const { error } = await window.__sb.auth.signInWithPassword({ email: form.email, password: form.password }); setBusy(false); if (error) {setErrors({ auth: error.message });return;} window.localStorage.setItem("STRATUM_USE_LIVE", "true"); window.location.href = "/app/Stratum Leads Product App.src?use_live=true"; }; const verify = () => { if (code.length < 6) {setErrors({ code: "Enter the full 6-digit code." });return;} setErrors({});setStep(2); }; const headerIcon = { 0: "log-in", 1: "shield-check", 2: "party-popper" }[step]; const overlay = { position: "fixed", inset: 0, zIndex: 100, background: "rgba(16,22,38,0.62)", backdropFilter: "blur(3px)", display: "grid", placeItems: "center", padding: 20, overflowY: "auto" }; const cardStyle = { width: "min(440px, 100%)", background: "var(--surface)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xl)", overflow: "hidden", margin: "auto" }; const bodyPad = { padding: "26px 30px 30px" }; return (
e.stopPropagation()}>
{I(headerIcon, { width: 20 })}
{step === 2 ? "Signed in" : step === 1 ? "2-step verification" : "Welcome back"}
Sign in to Stratum Leads
{/* Step 0 — Credentials */} {step === 0 &&
setForm((f) => ({ ...f, remember: typeof v === "boolean" ? v : !f.remember }))} label="Remember me" /> Forgot password?
{errors.auth &&

{errors.auth}

}
OR

New to Stratum Leads?

} {/* Step 1 — 2FA */} {step === 1 &&

Enter the 6-digit code we sent to your registered device to finish signing in.

Protecting {form.email}

{errors.code &&

{errors.code}

}
Didn't get it?
{I("info", { width: 13 })}Demo: enter any 6 digits.
} {/* Step 2 — Done */} {step === 2 &&
{I("check", { width: 30 })}

Welcome back!

You're verified and signed in. Pick up where you left off in your workspace.

}
); } function Site() { React.useEffect(() => {refresh();}); const [signup, setSignup] = React.useState(null); // null | { plan } // Sign-in modal stays closed until the visitor clicks "Sign In" — never auto-opens. const [signin, setSignin] = React.useState(false); const openSignup = (plan) => {setSignin(false);setSignup({ plan: typeof plan === "string" ? plan : null });}; const openSignin = () => {setSignup(null);setSignin(true);}; return (
); } { const __r = typeof document !== "undefined" && document.getElementById("root"); if (__r && !window.__rootMounted) { window.__rootMounted = true; ReactDOM.createRoot(__r).render(); refresh(); } }