/* CareNav site — Connecting the dots animation (signature moment) + Patient Promise */ /* Signature animation — scattered dots representing fragments of care converge into a single connected path as the user scrolls into view. */ window.SiteConnectDots = function SiteConnectDots() { const isMobile = useIsMobile(); const sectionRef = React.useRef(null); const ref = React.useRef(null); const pathRef = React.useRef(null); // Trigger when section enters view, replay each time it re-enters const [playKey, setPlayKey] = React.useState(0); const [inView, setInView] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; let isInView = false; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting && !isInView) { isInView = true; setInView(true); setPlayKey(k => k + 1); } else if (!e.isIntersecting && isInView) { isInView = false; setInView(false); } }, { threshold: 0.35 }); obs.observe(el); return () => obs.disconnect(); }, []); // Path = the CareNav logo's "Cn" monogram, in viewBox 0..100 × 0..100. // The C: starts at top-right, sweeps up-left, down to waist, back to bottom. // The n: rises from bottom of C, hump up, then drops vertically. const pathD = [ 'M 72 18', 'C 60 11, 43 12, 32 24', 'C 18 38, 17 60, 32 73', 'C 44 85, 65 82, 74 68', 'C 80 58, 80 45, 91 38', 'C 104 30, 121 38, 121 58', 'L 121 78', ].join(' '); // Sample 11 evenly-spaced points ALONG the actual rendered path so dots // sit exactly on the curve, not on guessed coordinates. const labels = [ { label: 'Screening', side: 'top' }, { label: 'Pathology', side: 'top' }, { label: 'Diagnosis', side: 'left' }, { label: 'Insurance', side: 'left' }, { label: 'Specialists', side: 'left' }, { label: 'Treatment plan', side: 'bottom' }, { label: 'Chemotherapy', side: 'bottom' }, { label: 'Surgery', side: 'right' }, { label: 'Pharmacy', side: 'top' }, { label: 'Follow-up', side: 'right' }, { label: 'Survivorship', side: 'right' }, ]; const [dots, setDots] = React.useState([]); const [pathLen, setPathLen] = React.useState(1000); React.useLayoutEffect(() => { const path = pathRef.current; if (!path) return; const len = path.getTotalLength(); setPathLen(len); const sampled = labels.map((l, i) => { const t = i / (labels.length - 1); const pt = path.getPointAtLength(t * len); return { ...l, x: pt.x, y: pt.y, t }; }); setDots(sampled); }, []); // Time-based progress 0..1 driven by rAF after inView=true; resets on each replay const [p, setP] = React.useState(0); React.useEffect(() => { if (!inView) { setP(0); return; } setP(0); const DURATION = 5200; const start = performance.now() + 250; let raf; const tick = (t) => { const raw = Math.max(0, Math.min(1, (t - start) / DURATION)); const eased = raw < 0.5 ? 2 * raw * raw : 1 - Math.pow(-2 * raw + 2, 2) / 2; setP(eased); if (raw < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [inView, playKey]); // Reserve a small head and tail of the timeline for hold/logo, line draws between const drawProgress = Math.max(0, Math.min(1, (p - 0.04) / 0.82)); const allConnected = p > 0.96; // Color blends from coral → green over the last 20% of the draw. // We do this by drawing TWO paths: coral always at full draw, green fades in on top. const greenFade = Math.max(0, Math.min(1, (drawProgress - 0.82) / 0.18)); return (

How it works

We connect the dots, so you don't have to.

A real human navigator — supported by smart software — stitches together every part of your journey. One plan. One record. One number to call.

{[ ['One human', 'Your dedicated CareNav navigator — clinically trained.'], ['One plan', 'Appointments, referrals, follow-ups, all in one place.'], ['One record', 'Records, results, and notes, gathered for you.'], ].map(([t, d]) => (

{t}

{d}

))}

{/* Diagram — viewBox sized to fit the Cn (130 wide × 100 tall + label margin) */}

{/* Inner positioning context so labels at the edge of the curve have horizontal breathing room on mobile */}

{/* Dots — sampled along the actual rendered path so they sit exactly on the line */} {dots.map((d, i) => { const dotAt = d.t; // The pen "passes through" the dot when drawProgress reaches dotAt. const reached = drawProgress >= dotAt - 0.001; // SVG viewBox is 130×100, rendered with xMidYMid meet inside a 4:3 box. // Box ratio 4:3 = 1.333; svg ratio 130:100 = 1.3 → svg fits width-wise (almost), // actually 1.3 < 1.333 so it fits height-wise. Compute padding precisely. // For a div of width W, height H = 0.75W. SVG drawn at scale s = min(W/130, H/100). // s = min(W/130, 0.75W/100) = min(W/130, W/133.33) = W/133.33 (height-bound). // Drawn width = 130 * W/133.33 = 0.975W; horizontal pad = 0.0125W on each side. // Drawn height = 100 * W/133.33 = 0.75W = H; vertical pad = 0. const xPct = 1.25 + (d.x / 130) * 97.5; const yPct = (d.y / 100) * 100; const offset = 14; const labelStyle = ({ top: { bottom: offset, left: '50%', transform: 'translateX(-50%)' }, bottom: { top: offset, left: '50%', transform: 'translateX(-50%)' }, left: { right: offset, top: '50%', transform: 'translateY(-50%)' }, right: { left: offset, top: '50%', transform: 'translateY(-50%)' }, })[d.side]; const lineColor = greenFade > 0.5 ? 'var(--cn-forest-700)' : 'var(--cn-coral-500)'; return (

0.5 ? 'rgba(31,108,90,0.18)' : 'rgba(200,97,71,0.18)'}` : '0 1px 3px rgba(0,0,0,0.08)', transition: 'background 280ms ease-out, box-shadow 320ms ease-out, border-color 240ms', }}/>

{d.label}

); })}

{/* Footer text — appears in green across the bottom of the card once connected */}

connected by CareNav

); }; window.SitePromise = function SitePromise() { const isMobile = useIsMobile(); const [ref, inView] = useInView({ threshold: 0.4, once: true }); const lines = ['Every step.', 'Every decision.', 'The knowns and the unknowns.']; return (

Our Patient Promise

{lines.map((l, i) => (

{l}

))}

We'll be here — to guide, to connect, to care.

); };