// pages-marketing.jsx — Home, Insurify product, Access, About, Contact // ─── HOME ──────────────────────────────────────────────────────────────────── // Re-imagined home applying guiding principles from peer enterprise-healthcare sites: // · inline email capture in the hero (friction-free conversion) // · audience-segmented switcher (this is for you) // · numbered, capitalized 3-act platform narrative (DOCUMENT → AUTHORIZE → COLLECT) // · positively-framed business case with outcome-first metrics // · named customer spotlight with supporting pilot stats function HomePage({ go }) { return (
); } // ── Hero ───────────────────────────────────────────────────────────────────── function HomeHero({ go }) { const heroRef = React.useRef(null); const mockRef = React.useRef(null); const headRef = React.useRef(null); const stageWrapRef = React.useRef(null); const rafId = React.useRef(0); const scrollRaf = React.useRef(0); const reduceMotion = React.useRef(false); React.useEffect(() => { reduceMotion.current = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; return () => { cancelAnimationFrame(rafId.current); cancelAnimationFrame(scrollRaf.current); }; }, []); // Cursor-following emerald key light over the dark field const onHeroMove = (e) => { if (reduceMotion.current) return; const el = heroRef.current; if (!el) return; const r = el.getBoundingClientRect(); const x = e.clientX - r.left, y = e.clientY - r.top; cancelAnimationFrame(rafId.current); rafId.current = requestAnimationFrame(() => { el.style.setProperty('--hx', x + 'px'); el.style.setProperty('--hy', y + 'px'); el.style.setProperty('--spot', '1'); el.style.setProperty('--mx', (x / r.width - 0.5).toFixed(3)); el.style.setProperty('--my', (y / r.height - 0.5).toFixed(3)); }); }; const onHeroLeave = () => { const el = heroRef.current; if (el) el.style.setProperty('--spot', '0'); }; // Parallax exit — as you scroll, the headline falls behind the card like a // camera pan; transform/opacity only, rAF-throttled, passive listener. React.useEffect(() => { if (reduceMotion.current) return; const onScroll = () => { cancelAnimationFrame(scrollRaf.current); scrollRaf.current = requestAnimationFrame(() => { const y = window.scrollY; if (y > 940) return; if (headRef.current) { headRef.current.style.transform = 'translateY(' + (y * 0.22).toFixed(1) + 'px)'; headRef.current.style.opacity = String(Math.max(0, 1 - y / 460)); } if (stageWrapRef.current) { stageWrapRef.current.style.transform = 'translateY(' + (y * 0.08).toFixed(1) + 'px)'; } }); }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Subtle 3D tilt on the product mock const onMockMove = (e) => { if (reduceMotion.current) return; const el = mockRef.current; if (!el) return; const r = el.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width - 0.5; const py = (e.clientY - r.top) / r.height - 0.5; el.style.transform = 'rotateX(' + (-py * 2.2).toFixed(2) + 'deg) rotateY(' + (px * 2.2).toFixed(2) + 'deg)'; }; const onMockLeave = () => { const el = mockRef.current; if (el) el.style.transform = ''; }; const HEAD_WORDS = ['Built', 'for', 'clinical', 'care']; return (
{/* drifting aurora light — parallax depth layers drift against the cursor */}
{/* fine grid texture for character */}
{/* luminous top glow */}
{/* cinematic vignette — pulls the eye to the lit center */}
{/* film grain — living, near-invisible, kills banding on the gradients */}
{/* cursor-following key light */}
); } // ── Trust bar / logo wall ───────────────────────────────────────────────── function HomeTrustBar() { // Auto-scrolling marquee of clinician/org "logo lockups" — a monogram glyph + // org name. The track is duplicated so the loop is seamless; edges fade out. const ORGS = [ { name: 'Insight Health Systems', short: 'IHS', shape: 'square', logo: 'assets/logos/insight.png', logoKey: 'orgInsight' }, { name: 'UMKC School of Medicine', short: 'UMKC', shape: 'circle', logo: 'assets/logos/umkc.png', logoKey: 'orgUmkc' }, { name: 'University of Kansas Health', short: 'KU', shape: 'rect', logo: 'assets/logos/ku-health.png', logoKey: 'orgKu' }, { name: "St Luke's Hospital, Kansas City", short: 'SL', shape: 'pill', logo: 'assets/logos/saint-lukes.png', logoKey: 'orgStLukes' }, { name: 'College Park Family Care', short: 'CP', shape: 'circle', logo: 'assets/logos/college-park.png', logoKey: 'orgCollegePark' }, { name: 'Detroit Medical Center', short: 'DMC', shape: 'square', logo: 'assets/logos/dmc.png', logoKey: 'orgDmc' }]; const loop = [...ORGS, ...ORGS]; return (
BUILT WITH CLINICIANS AT*
{loop.map((o, i) => )}
); } function LogoLockup({ org }) { if (org.logo) { const R = (typeof window !== 'undefined' && window.__resources) || {}; const src = (org.logoKey && R[org.logoKey]) || org.logo; return (
{org.name}
); } const radius = org.shape === 'circle' ? 999 : org.shape === 'pill' ? 999 : org.shape === 'rect' ? 4 : 3; const markSize = org.shape === 'pill' ? { w: 38, h: 22 } : { w: 28, h: 28 }; return (
{org.short}
{org.name}
); } // ── Specialty rollout list ─────────────────────────────────────────────────── // Shows which procedural specialties Insurify is currently in cohort with and // which are next on the rollout. Visual pattern adapted from peer practice- // management sites: a left accent bar + specialty name + status pill, in a // 3-up grid for the full version, a single inline strip for the compact one. const SPECIALTY_ROLLOUT = [ { name: 'Interventional Pain Medicine', status: 'live' }, { name: 'Orthopedic Surgery', status: 'next' }, { name: 'Neurosurgery', status: 'next' }]; // Full procedural-specialty roadmap, shown as a table on the home page. // Status: 'live' = in cohort now, 'next' = launching next, 'roadmap' = planned. // Edit freely — the table renders whatever is here (sized for 24 / an 8×3 grid). const SPECIALTIES_ALL = [ { name: 'Interventional Pain Medicine', status: 'live' }, { name: 'Orthopedic Surgery', status: 'next' }, { name: 'Neurosurgery', status: 'next' }, { name: 'Spine Surgery', status: 'next' }, { name: 'Sports Medicine', status: 'roadmap' }, { name: 'Physical Medicine & Rehab', status: 'roadmap' }, { name: 'Interventional Cardiology', status: 'roadmap' }, { name: 'Cardiac Electrophysiology', status: 'roadmap' }, { name: 'Vascular Surgery', status: 'roadmap' }, { name: 'Gastroenterology', status: 'roadmap' }, { name: 'Otolaryngology (ENT)', status: 'roadmap' }, { name: 'Urology', status: 'roadmap' }]; const SPECIALTY_STATUS = { live: { tag: 'IN COHORT', dot: 'var(--accent)', tagBg: 'var(--accent-tint)', tagInk: 'var(--accent-ink)', tagBorder: 'var(--accent-tint-2)' }, next: { tag: 'NEXT', dot: 'var(--accent)', tagBg: 'var(--paper)', tagInk: 'var(--accent)', tagBorder: 'var(--accent-tint-2)' }, roadmap: { tag: 'ROADMAP', dot: 'var(--ink-4)', tagBg: 'var(--paper-2)', tagInk: 'var(--ink-3)', tagBorder: 'var(--line)' } }; function SpecialtyRow({ item, dim }) { const live = item.status === 'live'; return (
{item.name} {live ? 'IN COHORT NOW' : 'COMING NEXT'}
); } function SpecialtyRollout({ go, variant = 'full' }) { if (variant === 'table') { return (
Specialty rollout

Starting with procedural specialties.
Built to go everywhere care does.

Live with Interventional Pain Medicine practices today, expanding into in-patient and out-patient care, medications, imaging, and beyond.

{[['live', 'In cohort now'], ['next', 'Launching next'], ['roadmap', 'On the roadmap']].map(([k, label]) => {label} )}
{SPECIALTIES_ALL.map((s, i) => { const st = SPECIALTY_STATUS[s.status] || SPECIALTY_STATUS.roadmap; const col = i % 3; const row = Math.floor(i / 3); const rows = Math.ceil(SPECIALTIES_ALL.length / 3); const live = s.status === 'live'; return (
{s.name} {st.tag}
); })}

Don't see your specialty?{' '} Tell us what you need built {' '}— we prioritize the roadmap with the practices in our cohort.

); } if (variant === 'compact') { return (
SPECIALTY ROLLOUT
{SPECIALTY_ROLLOUT.map((it) => { const live = it.status === 'live'; return ( {it.name} {live ? 'IN COHORT' : 'NEXT'} ); })}
{go && {e.preventDefault();go('insurify');}} style={{ color: 'var(--accent)', fontSize: 13.5, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: '1px solid var(--accent-tint-2)', paddingBottom: 2, flexShrink: 0 }}> See the rollout }
); } // Full variant — used on Insurify and Solutions pages return (
Specialty rollout

Starting with procedural specialties.{' '}Built to go everywhere care does.

Insurify is currently rolling out with Interventional Pain Medicine practices in our design-partner cohort. Procedural specialties come first, then in-patient and out-patient care, medications, imaging, and other departments where coverage gets in the way.

Live with Interventional Pain Medicine today. Procedural specialties come first, then everywhere coverage slows care down.

Want your specialty added? Email us
{SPECIALTY_ROLLOUT.map((it, i) =>
)}
More procedural specialties on the roadmap, being shaped with our design-partner cohort.
{/* Mobile: swipeable cards, 4 specialties per card */}
{(() => { const cards = []; for (let i = 0; i < SPECIALTIES_ALL.length; i += 4) cards.push(SPECIALTIES_ALL.slice(i, i + 4)); return cards.map((card, ci) => (
{card.map((it, i) => { const live = it.status === 'live'; const next = it.status === 'next' && SPECIALTY_ROLLOUT.some((r) => r.name === it.name); return (
{it.name} {live ? 'IN COHORT NOW' : next ? 'COMING NEXT' : 'COMING SOON'}
); })}
)); })()}
); } // ── Outcomes / business case ───────────────────────────────────────────────── // Reframes the old "Why we exist" stats as a positive business case, in the // style peer enterprise sites use ("AI that pays for itself, and then some"). function HomeOutcomes() { const ITEMS = [ { n: '01', head: "Recover the revenue you've already earned.", body: 'US ambulatory practices typically lose 5–11% of physician revenue to denials, write-offs, and underpayments. CriterionMD closes that gap.', stat: '5–11%', statLabel: 'physician revenue typically lost to denials', src: 'Sources: Change Healthcare Denials Index; MGMA industry reporting on denial write-offs.' }, { n: '02', head: 'Give physicians their afternoons back.', body: 'Most initial denials are never reworked because the rework is too expensive. CriterionMD makes it cheap, and the queue small.', stat: '~65%', statLabel: 'of initial denials never reworked or appealed', src: 'Source: MGMA industry reporting on denial rework and resubmission rates.' }, { n: '03', head: 'See the policy change before the denial.', body: 'Major payers publish thousands of medical-policy revisions every year. CriterionMD watches them and flags the active patients affected.', stat: '1,000s/yr', statLabel: 'payer-policy revisions tracked', src: 'Source: CriterionMD analysis of published payer medical-policy updates.' }]; return (

Built to{' '} pay for itself , and then some.

{ITEMS.map((it) =>
{it.stat}

{it.head}

{it.body}

{it.statLabel}
{it.src}
)}

Figures reflect published industry reporting and CriterionMD design-partner experience; sources noted per figure.

); } // ── Customer spotlight (multi-voice carousel) ────────────────────────────── // Rotates 5 named, titled voices from different settings (single-specialty // group, academic AMC, enterprise CMIO, surgical center, RCM). Pauses on hover. // Each voice carries its own three pilot stats — the way peer enterprise // healthcare sites anchor quotes with measurable outcomes. function HomeCustomerSpotlight() { const VOICES = [ { initials: 'HK', tint: '#1F5C3D', quote: `Every practice I've run has had five vendors that sort of solve five different pieces of the same problem. CriterionMD is the first thing I've seen that {connects} them, and starts where the money actually leaks.`, quoteShort: `CriterionMD is the first thing I've seen that {connects} them, and starts where the money actually leaks.`, name: 'Husban Khan', role: 'Clinical Administrator', org: 'Southeast Michigan Surgical Hospital', setting: 'Multi-specialty surgical hospital', stats: [ { v: '$83K', l: 'denial revenue recovered in the first 90 days' }, { v: '10 days', l: 'reduction in procedure authorization time' }] }]; // Single static spotlight — no rotation, no carousel affordances. const idx = 0; const v = VOICES[idx]; // Render a quote string with {emphasis} markers as inline accents. const renderQuote = (q) => { const parts = q.split(/(\{[^}]+\})/g); return parts.map((p, i) => { if (p.startsWith('{') && p.endsWith('}')) { return ( {p.slice(1, -1)}); } return {p}; }); }; return (

Built alongside the practices that{' '} actually use it.

{VOICES.length > 1 &&
{String(idx + 1).padStart(2, '0')} / {String(VOICES.length).padStart(2, '0')}
}
1 ? 'psPaneIn .45s cubic-bezier(.2,.7,.2,1) both' : 'none' }}>
"{renderQuote(v.quote)}" "{renderQuote(v.quoteShort || v.quote)}"
{v.initials}
{v.name}
{v.role} · {v.org}
1 ? 'psPaneIn .55s cubic-bezier(.2,.7,.2,1) both' : 'none' }}>
FROM THE PILOT
{v.stats.map((s, i) =>
1 ? `psBulletIn .5s ease ${0.15 + i * 0.08}s both` : 'none' }}>
{s.v}
{s.l}
)}
DESIGN-PARTNER PILOT · Q1 2026
); } // ── Security & trust band ──────────────────────────────────────────────────── // A compact compliance / posture summary near the bottom of the page — the kind // of band peer healthcare-enterprise sites use to lock in trust before the // final CTA. Links to the Security page already in the route table. function HomeSecurityBand({ go }) { const ITEMS = [ { title: 'HIPAA safeguards in place', sub: 'Administrative, physical, and technical safeguards, with PHI encrypted in transit and at rest and a completed security risk assessment.' }, { title: 'BAA available', sub: 'Signed before any PHI ever touches the platform.' }, { title: 'SOC 2 Type II', sub: 'Audit scheduled for Q4 2026.', tag: 'SCHEDULED' }, { title: 'HITRUST CSF', sub: 'On our certification roadmap following SOC 2.', tag: 'PLANNED' }]; return (
Security & trust

Audit-grade,{' '}by default.

Built for environments where every authorization, policy revision, and revenue decision needs to be traceable back to the chart that produced it.

{e.preventDefault();go('security');}} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 20, fontSize: 14.5, fontWeight: 500, color: 'var(--accent)', borderBottom: '1px solid var(--accent-tint-2)', paddingBottom: 2 }}> Read the security overview
{ITEMS.map((it) =>
{it.title} {it.tag && {it.tag} }
{it.sub}
)}
); } function ShieldIcon() { return ( ); } // ── Split CTA (preserved from original) ────────────────────────────────────── // ── Live products (homepage) — two cards, everything else lives lower ─────── function HomeLiveProducts({ go }) { const insCol = PRODUCT_COLORS.insurify; const cqCol = PRODUCT_COLORS.codequickref; const CARDS = [ { key: 'insurify', name: 'Insurify™', c: insCol, what: 'Reads the clinical note and shows what the payer requires before the prior authorization goes out.', solves: 'Preventable denials and documentation rework', audience: 'Physicians & APPs · Free in public beta', short: 'Checks your note against payer requirements as you write.', cta: 'Get Insurify free', ctaGo: 'access', more: null }, { key: 'codequickref', name: 'Code QuickRef™', c: cqCol, what: 'Chrome extension that finds the right ICD-10 code from a plain-language description of symptoms.', solves: 'Hunting for exact code verbiage', audience: 'Physicians & APPs · Free in public beta', short: 'Plain-language ICD-10 lookup, inside any EHR.', cta: 'See Code QuickRef', ctaGo: 'solutions', ctaAnchor: 'code-quickref', more: null }]; return (
Live today

Two tools you can use{' '} now.

{CARDS.map((p) =>
{p.name} Beta

{p.what}

{p.short}

Solves: {p.solves}
{p.more && }
)}
); } // ── How Insurify works — 3 steps, one line each ───────────────────────────── function HomeHowItWorks() { const STEPS = [ { n: '01', t: 'Write the note', s: 'Document the way you always have. No templates, no dropdowns.' }, { n: '02', t: 'Insurify maps the payer\u2019s criteria', s: 'Procedure and payer detected; the policy is checked line by line.' }, { n: '03', t: 'Close gaps before submission', s: 'Fix what\u2019s missing while the patient is still in the room.' }]; return (

Write the note.{' '} Insurify checks it {' '}against the payer.

{STEPS.map((st) =>
{st.t}

{st.s}

)}
); } // ── Coming next — desktop: slim strip · mobile: titled card ──────────────── function HomeComingNext() { const items = PLATFORM_PRODUCTS.filter((p) => p.status !== 'available'); return (
{/* Desktop strip */}
Coming next {items.map((p) => { const c = PRODUCT_COLORS[p.key] || PRODUCT_COLORS.insurify; return ( {p.name} ); })}
{/* Mobile: header + centered subtitle above a spaced product card */}
Coming next
{items.map((p) => { const c = PRODUCT_COLORS[p.key] || PRODUCT_COLORS.insurify; return ( {p.name} ); })}
); } function HomeSplitCTA({ go }) { return (
For physicians & APPs

Get Insurify,{' '}free.

Sign up with your work email and NPI. Free for individual clinicians. About 90 seconds.

For practices & health orgs

Scope a{' '}CriterionMD pilot.

Walk through the platform against your real payer mix, see the practice and enterprise solutions on the roadmap, and scope a pilot. Direct access to the founding team.

); } // Per-product brand colors. Each product gets its own identity while staying within a // disciplined, premium palette. Insurify keeps the platform's pine green. const PRODUCT_COLORS = { insurify: { tile: '#1F5C3D', glyph: '#FFFFFF', soft: '#EEF3EE', soft2: '#DDE7DE', ink: '#143C28' }, // forest codequickref: { tile: '#0E7A72', glyph: '#FFFFFF', soft: '#E4F3F1', soft2: '#BFE1DC', ink: '#0A4F49' }, // teal notes: { tile: '#3F3A89', glyph: '#FFFFFF', soft: '#EFEEF7', soft2: '#DCDAEF', ink: '#272566' }, // indigo authdesk: { tile: '#1E8A55', glyph: '#FFFFFF', soft: '#E6F2EC', soft2: '#C8E1D3', ink: '#0F5536' }, // emerald rcmiq: { tile: '#8A5A1B', glyph: '#FFFFFF', soft: '#F7EFE0', soft2: '#EAD9B8', ink: '#5A3D14' }, // copper denials: { tile: '#A33A2E', glyph: '#FFFFFF', soft: '#F7E8E5', soft2: '#EBC9C3', ink: '#6F2820' }, // crimson policy: { tile: '#28557A', glyph: '#FFFFFF', soft: '#E6EEF5', soft2: '#C5D5E3', ink: '#1A3C56' } // slate blue }; function ProductMark({ k, size = 28 }) { // ScribeAware uses its own uploaded logo image on a white plate so it reads // on any background (dark product tiles, gradients, light menus). if (k === 'notes') { return ( ScribeAware ); } const c = PRODUCT_COLORS[k] || PRODUCT_COLORS.insurify; const stroke = c.glyph; const accent = 'rgba(255,255,255,0.85)'; const dim = 'rgba(255,255,255,0.35)'; switch (k) { case 'insurify':{ // Shield with a checkmark inside — verification / coverage return ( ); } case 'notes':{ // ScribeAware — bold diagonal pen stroke with a parallel dotted echo (AI awareness) return ( ); } case 'authdesk':{ // Greenlight — three nested chevrons pointing right, accelerating opacity return ( ); } case 'rcmiq':{ // Reckon — offset stacked ledger bars (financial balance) return ( ); } case 'denials':{ // Rebound — a tight U-curve with an arrowhead pointing up-right (denial reversed) return ( ); } case 'policy':{ // Sentinel — center point with two asymmetric arcing brackets (radar watch) return ( ); } case 'codequickref':{ // Code QuickRef — magnifying glass over a code bracket (quick lookup) return ( ); } default: return null; } } // ─── SOLUTIONS PAGE ─────────────────────────────────────────────────────────── function RoadmapCard({ status, name, desc, active }) { return (
{status.toUpperCase()} {active && }
{name}

{desc}

); } // ── Insurify program clip — the SAME animated UI as the home-hero laptop, ──── // cropped to just the screen interior (no laptop chrome). Reuses the bundled // promo clip; once the scene settles, a zoom transform is injected INSIDE the // (same-origin) clip document so the laptop's screen exactly fills the // embed viewport — one coordinate space, no cross-frame scaling drift. function InsurifyAppClip() { const frameRef = React.useRef(null); const [ready, setReady] = React.useState(false); const [aspect, setAspect] = React.useState('522 / 286'); React.useEffect(() => { let tries = 0; let last = null; let applied = null; // { s, l, t } currently-injected transform let aspectSet = false; // aspect is set ONCE — re-setting it re-flows the // scene and the loop would chase its own tail // Bound the arrival. The crop loop can take an unpredictable amount of // time to converge; leaving the stage empty until it does meant a visitor // could stare at nothing for seconds and then get an unskippable fade. // At 1.6s we show the clip regardless — the crop keeps converging behind // it and lands as a layout-neutral transform. const showAnyway = setTimeout(() => setReady(true), 1600); const t = setInterval(() => { tries++; if (tries > 120) { clearInterval(t); return; } const f = frameRef.current; if (!f) return; let d; try { d = f.contentDocument; } catch (e) { clearInterval(t); return; } if (!d || !d.body || d.querySelectorAll('*').length < 20) return; const win = f.contentWindow; const screen = [...d.querySelectorAll('div')].find((el) => win.getComputedStyle(el).backgroundColor === 'rgb(6, 35, 26)'); if (!screen) return; const p = screen.getBoundingClientRect(); if (!p.width) return; // Recover the UNtransformed screen rect: with transform-origin 0 0 and // scale(s) translate(-l,-t), a point q maps to s*(q - (l,t)). const cur = applied ? { l: p.left / applied.s + applied.l, t: p.top / applied.s + applied.t, w: p.width / applied.s, h: p.height / applied.s } : { l: p.left, t: p.top, w: p.width, h: p.height }; const stable = last && Math.abs(cur.l - last.l) < 1 && Math.abs(cur.t - last.t) < 1 && Math.abs(cur.w - last.w) < 1 && Math.abs(cur.h - last.h) < 1; // If the scene never fully settles (ambient motion), lock anyway after // ~10s rather than shipping the uncropped laptop. if (stable || (tries > 14 && !applied)) { const s = d.documentElement.clientWidth / cur.w; const need = !applied || Math.abs(applied.s - s) > 0.005 || Math.abs(applied.l - cur.l) > 1 || Math.abs(applied.t - cur.t) > 1; if (need) { const root = d.body.firstElementChild; d.body.style.overflow = 'hidden'; root.style.transformOrigin = '0 0'; root.style.transform = 'scale(' + s + ') translate(' + (-cur.l) + 'px, ' + (-cur.t) + 'px)'; applied = { s: s, l: cur.l, t: cur.t }; if (!aspectSet) { aspectSet = true; setAspect(cur.w + ' / ' + cur.h); setReady(true); clearTimeout(showAnyway); } // keep the loop alive: after the one-time aspect change the embed // resizes, the scene re-flows, and the next passes re-converge the // transform (transform updates are layout-neutral, so this settles) } else if (applied) { clearInterval(t); // converged } } last = cur; }, 700); return () => { clearInterval(t); clearTimeout(showAnyway); }; }, []); return (