// primer-sections.jsx — HowItWorks, Features, UseCases, FAQ, CTASection, Footer function platformTrialUrl(medium) { return (window.PrimerLinks && window.PrimerLinks.trial(medium)) || "#"; } const { useState: useSt2 } = React; // ── How it works ──────────────────────────────────────────────────────────── function HowItWorks() { const steps = [ { n: "01", label: "PASTE", title: "Drop in any address.", body: "We pull parcel geometry, zoning, overlays, comps and topography from 3,142 county sources — no data prep required.", viz: (
2401 Pacific Ave, Venice CA
), }, { n: "02", label: "TUNE", title: "Adjust assumptions.", body: "Toggle TOC tiers, ADU bonuses, parking, construction type, and affordability. Everything that shifts feasibility is yours to control.", viz: (
{[["TOC Tier 3", true], ["ADU bonus", true], ["Parking min", false], ["Affordable 11%", true]].map(([l, on]) => (
{l}
))}
), }, { n: "03", label: "SHIP", title: "Get a full report.", body: "Yield study, pro forma, code summary, comps and a 3D massing — branded, exportable, and decision-ready in under 60 seconds.", viz: (
{["YIELD", "PRO-FORMA", "CODE", "COMPS", "MASSING", "PDF"].map(t => (
{t}
))}
READY 58.2s
), }, ]; return (
— 01 · Workflow

From address to underwriting
in under a minute.

Three steps. No spreadsheets, no zoning PDFs, no waiting on a junior analyst.

{steps.map(s => (
{s.n} {s.label}

{s.title}

{s.body}

{s.viz}
))}
); } // ── Features (bento grid) ─────────────────────────────────────────────────── // ── Capability visuals (swap inside the sticky frame) ─────────────────────── const FV = { ink: "#0F172A", muted: "#64748B", muted2: "#94A3B8", border: "#E2E8F0", blue: "#2563EB", blueBg: "#EFF4FF", bg: "#FFFFFF", bg2: "#F8FAFC", mono: '"Geist Mono", monospace', }; function VizZoning() { return (
R7-2 + TOC Tier 3 overlay
{[["Height limit", "85 ft", true], ["FAR", "3.44 → 4.6", true], ["Density", "22 units", true], ["Setbacks", "F 15 / R 30", true], ["Parking min", "0 stalls", true]].map(([k, v], i, a) => (
{k} {v}
))}
); } function VizYield() { return (
{[["Max units", "22", "units"], ["Buildable", "14,820", "sf GBA"], ["NOI (yr 1)", "$1.42", "M"], ["uIRR", "18.4", "%"]].map(([l, v, u]) => (
{l}
{v}{u}
))}
Pro forma · 10-yr +18.4% ↑
); } function VizScenarios() { const rows = [ ["By-right", "12 units", 0.42, false], ["+ ADU bonus", "16 units", 0.58, false], ["+ TOC Tier 2", "19 units", 0.74, false], ["+ TOC Tier 3", "22 units", 1.0, true], ]; return (
Scenario comparison
{rows.map(([l, v, pct, win]) => (
{l} {v}
))}
Δ vs by-right +10 units · +$640K NOI
); } function VizSitePlan() { return (
LOT · 7,200 SF 14,820 SF · 4 STORIES
{[["Footprint", "3,705 sf"], ["Stories", "4"], ["Massing", "Podium"]].map(([k, v]) => (
{k}
{v}
))}
); } const CAPABILITIES = [ { tag: "ZONING", title: "Zoning, decoded — not just cited.", body: "Every base zone, overlay, height and FAR limit interpreted and applied to your parcel. Primer reads the code so you don't open a single municipal PDF.", Viz: VizZoning }, { tag: "YIELD", title: "A full yield study in minutes.", body: "Unit counts, buildable GBA, NOI and unlevered IRR — driven by the same envelope your architect would draw, with your hard and soft costs baked in.", Viz: VizYield }, { tag: "SCENARIOS", title: "Stack every incentive, side by side.", body: "Run by-right against ADU bonuses and each TOC tier at once. See exactly what every assumption is worth before you commit a dollar of pre-dev.", Viz: VizScenarios }, { tag: "SITE PLAN", title: "Buildable footprint, drawn for you.", body: "Setbacks, footprint and a massing study generated straight from the live envelope — a site plan you can hand to design without a redraw.", Viz: VizSitePlan }, ]; // ── Features (sticky-scroll showcase; stacked below 1024px) ───────────────── function Features() { const [active, setActive] = useSt2(0); const [stacked, setStacked] = useSt2(() => window.matchMedia("(max-width: 1024px)").matches); const refs = React.useRef([]); React.useEffect(() => { const mq = window.matchMedia("(max-width: 1024px)"); const onChange = (e) => setStacked(e.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); React.useEffect(() => { if (stacked) return; // no scroll-sync needed for the stacked layout let ticking = false; const onScroll = () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { ticking = false; const mid = window.innerHeight / 2; let best = 0, bestDist = Infinity; refs.current.forEach((el, i) => { if (!el) return; const b = el.getBoundingClientRect(); const c = b.top + b.height / 2; const d = Math.abs(c - mid); if (d < bestDist) { bestDist = d; best = i; } }); setActive(best); }); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, [stacked]); return (
— 02 · Capabilities

A real underwriter,
not a parcel viewer.

Everything an acquisition team builds badly in a spreadsheet, shipped in one report.

{stacked ?
{CAPABILITIES.map((c, i) => { const Viz = c.Viz; return (
{c.tag}

{c.title}

{c.body}

); })}
:
{/* sticky visual frame */}
{CAPABILITIES.map((c, i) => { const Viz = c.Viz; return (
); })}
{/* scrolling category list */}
{CAPABILITIES.map((c, i) => (
refs.current[i] = el} className={`p-cap-item${active === i ? " is-active" : ""}`} >
{c.tag}

{c.title}

{c.body}

))}
}
); } // ── Use cases ─────────────────────────────────────────────────────────────── function UseCases() { const cases = [ { tag: "Acquisitions", title: "Triage 50 deals on Monday. Underwrite 3 on Tuesday.", stat: "42×", sub: "faster top-of-funnel screening", dark: true }, { tag: "Development", title: "Compare by-right vs. bonus envelopes before you call the architect.", stat: "$0", sub: "per re-run, after first report", dark: false, accent: true }, { tag: "Brokerage", title: "Land sellers and buyers with a feasibility, not a flyer.", stat: "3.4×", sub: "higher LOI close rate", dark: false }, ]; const compare = [ { label: "Timeline", old: "4–6 weeks", neu: "Under a minute", mag: "≈ 50,000× faster" }, { label: "Cost per study", old: "$10K–200K", neu: "Included", mag: "$0 per re-run" }, { label: "Scenarios modeled", old: "1–3", neu: "1,000+", mag: "≈ 1,000× more" }, { label: "Coverage", old: "1 sub-market", neu: "50 states", mag: "Nationwide" }, ]; return (
— 03 · Who uses it

Built for the deal team,
not the data team.

Acquisitions, development, and brokerage teams use Primer to triage the top of their funnel.

{cases.map(c => (
{c.tag}

{c.title}

{c.stat}
{c.sub}
))}
{/* Part 2 — consultant → client comparison */}
— The math
Feasibility consultant Primer
{compare.map(r => (
{r.label}
{r.old}
{r.neu}
{r.mag}
))}
); } // ── FAQ ───────────────────────────────────────────────────────────────────── function FAQ() { const [open, setOpen] = useSt2(-1); const items = [ ["Where does your data come from?", "We license parcel geometry and ownership from regrid plus 3,142 county recorders, zoning text from municipal codifiers, and pro-forma comps from public deeds plus a curated private set."], ["How accurate is the feasibility?", "Within 4% of architect-drawn envelopes on our 600-parcel validation set. Pro-forma uses your hard and soft cost assumptions — set them once at the team level."], ["Can I customize the outputs?", "Yes — that's the whole point. Toggle TOC, ADU, density bonus, parking, construction type, affordability, financing assumptions. Re-runs take about 14 seconds."], ["What markets do you cover?", "All 50 states. Deep zoning interpretation is live in 240+ metros, with new cities added within 5 business days on request."], ["Do you integrate with our CRM?", "Salesforce, HubSpot, Dealpath, and Juniper Square. Reports auto-attach to the deal record."], ["Is there a free trial?", "14 days, most teams convert after their first underwrite."], ]; return (
— 04 · Questions

Things people
ask first.

Didn't see yours? Email hello@primer.app or grab a 15-min walkthrough.

{items.map(([q, a], i) => (
setOpen(open === i ? -1 : i)}>
{q} {open === i ? : }
{open === i &&

{a}

}
))}
); } // ── CTA ───────────────────────────────────────────────────────────────────── function CTASection() { return (
— READY WHEN YOU ARE

Stop chasing line items.
Underwrite the address.

Start free trial NO CARD · 14 DAYS · UNLIMITED REPORTS
); } // ── Footer ────────────────────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { HowItWorks, Features, UseCases, FAQ, CTASection, Footer });