/* CareNav site — Product mechanics + Outcomes + Behind the scenes + Trust + Footer */ window.SiteProduct = function SiteProduct() { const isMobile = useIsMobile(); const [ref, inView] = useInView({ threshold: 0.25, once: true }); const steps = [ { n: '01', t: 'You\'re assigned a navigator', d: 'A clinically trained human, available the day you start.' }, { n: '02', t: 'They build your plan', d: 'Appointments, referrals, results, questions — gathered into one place.' }, { n: '03', t: 'You move forward, together', d: 'They prepare you before each step and follow up after.' }, { n: '04', t: 'No detail dropped', d: 'From insurance pre-auth to post-treatment survivorship.' }, ]; const phoneW = isMobile ? 280 : 320; const phoneH = isMobile ? 560 : 640; return (
{/* Phone mockup with animated UI — moves below the steps copy on mobile so the text reads first */}
{/* Status */}
9:41● ●●
{/* Greeting */}
Today
Good morning, Maya.
{/* Navigator card */}
S
Your CareNav
Sello Mokoena
"I've got the next three steps. Take a breath."
Call
Message
{/* Up next list */}
Up next
{[ ['Tue 9:30', 'Oncology consult', 'Dr. Patel'], ['Thu 11:00', 'Bloods', 'PathLab Sandton'], ['Fri 14:00', 'Insurance pre-auth', 'Sello will handle'], ].map(([t, w, who], i) => (
{t}
{w}
{who}
))}
{/* Steps */}
The product

A human, not a chatbot. Backed by software that doesn't drop the ball.

{steps.map((s, i) => (
{s.n}
{s.t}
{s.d}
))}
); }; /* Counts up when in view */ function Counter({ to, suffix = '', duration = 1600 }) { const [ref, inView] = useInView({ threshold: 0.4, once: true }); const [v, setV] = React.useState(0); React.useEffect(() => { if (!inView) return; const start = performance.now(); let raf; const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setV(Math.round(to * eased)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [inView]); return {v}{suffix}; } window.Counter = Counter; window.SiteOutcomes = function SiteOutcomes() { const isMobile = useIsMobile(); const stats = [ { n: 87, s: '%', l: 'fewer missed appointments', sub: 'Across pilot cohorts (placeholder)' }, { n: 4.9, s: '/5', l: 'patient satisfaction', sub: 'Average across 12-month journeys' }, { n: 32, s: '%', l: 'lower total cost of care', sub: 'For insurer partner cohorts' }, { n: 11, s: 'h', l: 'saved per patient, per month', sub: 'In administrative time' }, ]; return (
Outcomes

What changes when you're not alone.

Concept preview Illustrative targets — not yet measured.
{stats.map((s, i) => (
{s.l}
{s.sub}
))}
); }; window.SiteTeam = function SiteTeam() { const isMobile = useIsMobile(); const team = [ { n: 'Sello Mokoena', r: 'CareNav, Lead Navigator', tag: 'Oncology nursing · 11 yrs' }, { n: 'Naledi Khumalo', r: 'CareNav, Navigator', tag: 'Patient advocacy · 8 yrs' }, { n: 'Dr. Imran Patel', r: 'Clinical Director', tag: 'Medical oncology' }, { n: 'Thandi Sithole', r: 'CareNav, Navigator', tag: 'Social work · 14 yrs' }, ]; const colors = ['var(--cn-coral-300)', 'var(--cn-forest-500)', 'var(--cn-coral-500)', 'var(--cn-forest-300)']; return (
The people

Real humans. Real names. Real numbers to call.

Concept preview Placeholder identities — real navigators will be introduced once the team is in place.

Every CareNav navigator is a clinically trained professional — nurses, social workers, patient advocates. They don't field tickets. They walk the journey with you.

{team.map((p, i) => (
Photo placeholder
{p.n}
{p.r}
{p.tag}
))}
); }; window.SiteTrust = function SiteTrust() { const isMobile = useIsMobile(); const partners = ['Hospital Group A', 'Insurer B', 'Pharmacy Group C', 'University D', 'Research E', 'Foundation F']; const certs = [ ['POPIA', 'Compliant'], ['HPCSA', 'Recognised partner'], ['ISO 27001', 'Certified'], ['HL7 / FHIR', 'Interoperable'], ]; return (
Trust

Built to the standards healthcare demands.

{partners.map(p => (
{p}
))}
{certs.map(([k, v]) => (
{k}
{v}
))}
); }; window.scrollToId = function(id) { const el = document.getElementById(id); if (el) { const top = el.getBoundingClientRect().top + window.pageYOffset - 72; window.scrollTo({ top, behavior: 'smooth' }); } }; window.SiteCTA = function SiteCTA({ audience }) { const isMobile = useIsMobile(); const variants = { patients: { eyebrow: 'For patients & families', h: 'You don\'t have to navigate this alone.', cta: 'Ask your provider about CareNav', sub: 'CareNav is offered through participating hospitals and providers.' }, clinicians: { eyebrow: 'For clinicians', h: 'Your patients, fully supported between visits.', cta: 'Refer a patient', sub: 'Free for participating clinicians. Two-minute referral.' }, hospitals: { eyebrow: 'For hospital groups', h: 'A custodian for the entire cancer journey.', cta: 'Book a demo', sub: '30-minute walkthrough. Tailored to your service line.' }, insurers: { eyebrow: 'For medical insurers', h: 'Better outcomes. Lower total cost of care.', cta: 'Partner with us', sub: 'Outcomes-aligned partnerships across SADC.' }, }; const v = variants[audience] || variants.patients; return (
{v.eyebrow}

{v.h}

{v.sub}
); }; window.SiteFooter = function SiteFooter() { const isMobile = useIsMobile(); return ( ); };