/* HealthLink360 — single-page site Black / white / magenta / purple brand Sections: Nav, Hero, Vision, How (BYOD), Value, Providers Stepper, Insights, Waitlist, Footer */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "magenta", "heroVariant": "twin" } /*EDITMODE-END*/; const PALETTES = { magenta: { a: "#ff2bd6", b: "#a855f7", c: "#7c3aed", glow: "255,43,214" }, // brand magenta + purple teal: { a: "#22d3a8", b: "#5eead4", c: "#10b981", glow: "34,211,168" }, blue: { a: "#3b82f6", b: "#22d3ee", c: "#a78bfa", glow: "59,130,246" }, amber: { a: "#f59e0b", b: "#fb923c", c: "#fbbf24", glow: "245,158,11" } }; const HERO_VARIANTS = [ { id: "twin", label: "Digital Twin" }, { id: "heart", label: "Heart" }, { id: "constellation", label: "Constellation" }, { id: "photo", label: "Photo" }]; /* ============== Hero visualisations ============== */ function TwinAvatar({ palette }) { // Particle-mesh profile face (looking right), inspired by reference image const t = React.useRef(0); const [, force] = React.useState(0); React.useEffect(() => { let raf;const tick = () => {t.current += 0.014;force((n) => n + 1);raf = requestAnimationFrame(tick);}; raf = requestAnimationFrame(tick);return () => cancelAnimationFrame(raf); }, []); const phase = t.current; // Profile silhouette (right-facing). Hand-tuned bezier path for a feminine profile. // viewBox 0 0 400 600 — face occupies roughly y 80..520 const profilePath = "M 130 540 \ L 130 380 \ C 130 350, 138 330, 158 318 \ C 170 311, 180 304, 184 292 \ C 188 280, 188 268, 184 258 \ C 176 244, 168 232, 164 218 \ C 158 198, 158 178, 168 158 \ C 178 138, 198 124, 222 118 \ C 250 112, 276 122, 290 138 \ C 304 154, 308 174, 304 194 \ C 302 206, 298 216, 296 224 \ C 298 224, 304 226, 308 232 \ C 314 240, 318 252, 316 262 \ C 314 270, 308 274, 300 274 \ C 298 278, 296 286, 294 296 \ C 290 312, 282 320, 270 322 \ C 266 334, 258 342, 246 346 \ L 246 360 \ C 246 372, 252 380, 264 386 \ L 290 396 \ C 308 404, 318 416, 318 432 \ L 318 540 \ Z"; // Build particles: dense along the silhouette outline, scattered inside, // sparse halo outside. Memoized so they don't re-randomize each frame. const particles = React.useMemo(() => { const out = []; // Outline points (dense, bright) const outlinePts = [ // forehead curve [222, 118], [210, 121], [198, 127], [188, 135], [178, 148], [172, 162], [170, 178], // brow / temple [172, 192], [176, 206], [180, 218], // bridge of nose [185, 228], [182, 240], [180, 252], // nose tip area [183, 260], [190, 266], [202, 268], [214, 266], [222, 262], // nostril / philtrum [218, 272], [210, 280], [198, 286], [188, 290], // upper lip [184, 298], [190, 302], [202, 304], [214, 303], [224, 300], // lower lip [220, 312], [208, 316], [196, 316], [186, 312], // chin [180, 322], [176, 332], [174, 344], [178, 354], // jawline [186, 360], [196, 365], [208, 368], [220, 366], [234, 358], [246, 346], // neck front [248, 360], [250, 374], [252, 388], [254, 402], // back of head [292, 138], [306, 156], [314, 178], [316, 200], [314, 222], [310, 242], // back skull / hair line [302, 260], [294, 278], [286, 294], [278, 308], [270, 322], // back of neck [266, 338], [270, 358], [278, 378], [286, 396], [296, 412]]; outlinePts.forEach(([x, y], i) => { out.push({ x, y, r: 1.4 + i % 4 * 0.3, ph: i * 0.7, brightness: 1.0 }); }); // Interior fill (mesh look) — sample inside silhouette bounds // Use seeded pseudo-random so memo is stable across rerenders let seed = 1; const rand = () => {seed = (seed * 9301 + 49297) % 233280;return seed / 233280;}; for (let i = 0; i < 280; i++) { // Constrain to face area roughly const x = 175 + rand() * 145; const y = 130 + rand() * 280; // Skip if clearly outside (above forehead curve or below jaw) if (y < 130 + Math.abs(x - 240) * 0.6) continue; out.push({ x, y, r: 0.6 + rand() * 1.4, ph: rand() * 6.28, brightness: 0.55 + rand() * 0.4 }); } // Halo / dust (outside silhouette, sparse) for (let i = 0; i < 80; i++) { const a = rand() * Math.PI * 2; const r = 150 + rand() * 110; const x = 230 + Math.cos(a) * r * 0.9; const y = 280 + Math.sin(a) * r; out.push({ x, y, r: 0.5 + rand() * 0.9, ph: rand() * 6.28, brightness: 0.25 + rand() * 0.3, halo: true }); } return out; }, []); // Connecting lines between nearby outline points (mesh feel) const meshLines = React.useMemo(() => { const lines = []; const pts = particles.filter((p) => !p.halo && p.brightness > 0.7); for (let i = 0; i < pts.length; i++) { for (let j = i + 1; j < pts.length; j++) { const d = Math.hypot(pts[i].x - pts[j].x, pts[i].y - pts[j].y); if (d < 38) lines.push([pts[i], pts[j], d]); } } return lines.slice(0, 220); // cap }, [particles]); const breathe = 1 + Math.sin(phase * 0.8) * 0.008; return ( {/* aura / halo glow */} {/* faint silhouette fill behind particles */} {/* mesh connecting lines (soft) */} {meshLines.map(([a, b, d], i) => )} {/* particle cloud */} {particles.map((p, i) => { const pulse = 0.5 + 0.5 * Math.sin(phase * 1.6 + p.ph); const op = p.brightness * (0.5 + pulse * 0.5); const radius = p.r * (0.85 + pulse * 0.3); return ( {p.brightness > 0.7 && } 0.8 ? "#fff" : palette.b} opacity={op} /> ); })} {/* drifting glow at temple (the "spark" point in the reference) */} {/* subtle scan-sweep */} {/* podium reflection */} {/* floating data labels */} HRV 68 ms ↑ trending VO₂ 42.1 SLEEP 7h 12m deep 1h 48m GLUC 92 mg/dL cohort: stable ); } function HeartViz({ palette }) { const t = React.useRef(0); const [, force] = React.useState(0); React.useEffect(() => { let raf;const tick = () => {t.current += 0.02;force((n) => n + 1);raf = requestAnimationFrame(tick);}; raf = requestAnimationFrame(tick);return () => cancelAnimationFrame(raf); }, []); const beat = 0.5 + 0.5 * Math.abs(Math.sin(t.current * 2)); return ( {Array.from({ length: 30 }).map((_, i) => { const a = i / 30 * Math.PI * 2; const x = 200 + Math.cos(a) * (60 + Math.sin(t.current + i) * 8); const y = 270 + Math.sin(a) * (50 + Math.cos(t.current + i) * 8); return ; })} ); } function Constellation({ palette }) { const t = React.useRef(0); const [, force] = React.useState(0); React.useEffect(() => { let raf;const tick = () => {t.current += 0.01;force((n) => n + 1);raf = requestAnimationFrame(tick);};raf = requestAnimationFrame(tick);return () => cancelAnimationFrame(raf); }, []); const N = 60; const nodes = React.useMemo(() => Array.from({ length: N }, (_, i) => ({ x: 60 + Math.random() * 280, y: 80 + Math.random() * 440, r: 1 + Math.random() * 2.4, ph: Math.random() * Math.PI * 2 })), []); return ( {nodes.map((n, i) => nodes.slice(i + 1).map((m, j) => { const d = Math.hypot(n.x - m.x, n.y - m.y); if (d > 90) return null; return ; }) )} {nodes.map((n, i) => { const p = 0.4 + 0.6 * Math.abs(Math.sin(t.current + n.ph)); return ; })} ); } function PhotoHero({ palette }) { return ( [ portrait — diverse subjects ] drop hero photography here ); } function HeroViz({ variant, palette }) { if (variant === "heart") return ; if (variant === "constellation") return ; if (variant === "photo") return ; return ; } /* ============== Misc helpers ============== */ function useInView(opts = { threshold: 0.2 }) { const ref = React.useRef(null); const [seen, setSeen] = React.useState(false); React.useEffect(() => { const el = ref.current;if (!el) return; const io = new IntersectionObserver(([e]) => {if (e.isIntersecting) setSeen(true);}, opts); io.observe(el);return () => io.disconnect(); }, []); return [ref, seen]; } function Reveal({ children, delay = 0, as: Tag = "div", className = "", style }) { const [ref, seen] = useInView(); return {children}; } /* ============== Sections ============== */ function Logo({ variant = "nav" }) { return ( HealthLink360 AI ); } function Nav({ onWaitlist }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onS = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onS);return () => window.removeEventListener("scroll", onS); }, []); return ( ); } function FilamentGlow({ palette }) { // Soft, light filament — abstract organic shape (the "innovation" hint next to the person) const t = React.useRef(0); const [, force] = React.useState(0); React.useEffect(() => { let raf;const tick = () => {t.current += 0.008;force((n) => n + 1);raf = requestAnimationFrame(tick);}; raf = requestAnimationFrame(tick);return () => cancelAnimationFrame(raf); }, []); const phase = t.current; const lines = 28; return ( {Array.from({ length: lines }).map((_, i) => { const o = i / lines; const cy = 180 + Math.sin(phase + i * 0.2) * 4; const r = 60 + o * 110; return ( ); })} {Array.from({ length: 12 }).map((_, i) => { const a = phase * 0.3 + i * (Math.PI * 2 / 12); return ; })} ); } function Hero({ palette, onWaitlist }) { return (
Culturally intelligent · Digital Twin technology Prevent disease
before it starts. HealthLink360 builds a Digital Twin from your health data, such as biometrics, labs and medical history. We then guide you with weekly plans that fit your culture, your routines and your real life. Help us train the new model of preventative care.{" "}
400+data ingestion points
93%retention in pilots
21dto first measurable change
Coach360
Your sleep is up 12% this week, let's protect it.
Twin Score
86%
); } /* Dedicated Twin section (moved from hero) */ function TwinSection({ heroVariant, palette }) { return (
YOUR DIGITAL TWIN A living model of you, updated every signal. We translate biometrics, labs and history into a single Twin Score. It learns what is yours, your culture, your rhythms, your range of normal, and surfaces what changed, why it matters, and the next right move. HRVSleepVO₂ GlucoseSDOHPGx
Next best action
10-min walk after dinner · 7:45 PM
); } function Vision() { return (
FOR YOU We see you. HealthLink360 meets you where you are, not where a textbook thinks you should be. We build a Digital Twin from your biometrics, labs and health history to create a weekly plan that fits your culture, routines and real life, with Coach360 support and a path to care when you need backup.
01

Culture + tech, never generic

Sync wearable and device data, sleep, activity, heart-rate trends, recovery, in one tap.
02

The data already exists

Wearables, labs and patient input are everywhere. Care teams just lack a way to turn them into precise, timely decisions. Until now.
03

From insight to action

No confusing dashboards. Just three to five clear priorities and the next best action for this week.
); } function HowItWorks() { const steps = [ { t: "Connect your signals", d: "Sync wearable and device data, sleep, activity, heart-rate trends, recovery, in one tap.", icon: "sync" }, { t: "Get a weekly snapshot", d: "A simple weekly view shows what is improving and what needs attention. No graph-reading required.", icon: "chart" }, { t: "Coach360 guides you", d: "Personalized nudges, check-ins and habit tracking keep you consistent, without the guilt loop.", icon: "spark" }, { t: "Connect to care", d: "When you need more guidance, we route you to the right next step: coach, clinician, community program or telehealth.", icon: "route" }]; const Icon = ({ k }) => { if (k === "sync") return ; if (k === "chart") return ; if (k === "spark") return ; return ; }; return (
BRING YOUR OWN DEVICE Four steps to a plan that actually fits.
{steps.map((s, i) =>
{String(i + 1).padStart(2, "0")}

{s.t}

{s.d}

 )}
); } function Value() { const items = [ { t: "Personalized insights, not data chaos", d: "We turn your biometrics into a short weekly summary: what changed, why it matters, what to do next." }, { t: "A weekly body briefing you can use", d: "Three to five clear priorities. Sleep, movement, stress, nutrition and the next best action for the week." }, { t: "No confusing dashboards", d: "HealthLink360 translates your trends into simple steps you can follow in real life." }, { t: "Insight + coaching, in one place", d: "Coach360 explains your trends, then guides you with small nudges so you are not left guessing." }]; return (
WHAT YOU GET Less noise. More next-right-move.
{items.map((it, i) =>
＋

{it.t}

{it.d}

 )}
); } function Providers() { const steps = [ { t: "Identify", d: "Digital Twin + biometrics flag early metabolic drift across your panel — before the next visit.", vis: "identify" }, { t: "Personalize", d: "If pharmacogenomics exist, we surface clinician-review considerations. If not, proceed with standard pathways.", vis: "personalize" }, { t: "Make it doable", d: "An SDOH screen flags barriers and suggests feasible alternatives the patient can actually follow.", vis: "doable" }, { t: "Activate", d: "Food-as-Medicine plan plus Coach360 adherence support — between visits, in the patient's life.", vis: "activate" }, { t: "Verify", d: "Biometrics confirm whether interventions are working, and who needs outreach this week.", vis: "verify" }]; const [active, setActive] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setActive((a) => (a + 1) % steps.length), 5200); return () => clearInterval(id); }, []); const Vis = ({ k }) => { if (k === "identify") return ( ↑ drift detected {Array.from({ length: 8 }).map((_, i) => )} ); if (k === "personalize") return ( {[ ["CYP2C19", "*1/*2", "consider"], ["CYP2D6", "*1/*1", "standard"], ["SLCO1B1", "*1/*5", "review"], ["VKORC1", "AG", "consider"]]. map((row, i) => {row[0]} {row[1]} {row[2]} )} ); if (k === "doable") return ( {["Transit", "Childcare", "Food access", "Cost"].map((b, i) => { const flagged = i === 2 || i === 0; return {b} {flagged ? "BARRIER" : "ok"} ; })} → alternative plan suggested ); if (k === "activate") return ( {Array.from({ length: 7 }).map((_, i) => { const h = 30 + (i * 13 + i % 3 * 8); return {["M", "T", "W", "T", "F", "S", "S"][i]} ; })} Coach360 adherence ↑ ); return (// verify 79% improving 21% need outreach this week ); }; return (
FOR PROVIDERS Preventive visibility between visits, without the staff burden. HealthLink360 turns everyday signals into provider-ready insights so your team detects early-risk patterns sooner and guides action — without living in spreadsheets.
{steps.map((s, i) => )}
Step {active + 1} / {steps.length}

{steps[active].t}

{steps[active].d}

); } function Insights() { const tiles = [ { tag: "INSIGHT", t: "Why generic plans fail Black women in midlife", d: "Cardiometabolic drift hides behind 'normal' labs. Twin Score finds it 14 months earlier on average." }, { tag: "PILOT", t: "Inside our FQHC pilot in the Mid-South", d: "How four clinicians used Coach360 to lift adherence from 41% to 73% in eight weeks." }, { tag: "SCIENCE", t: "Digital Twin, in plain English", d: "What it is, what it isn't, and why the model only matters if it changes what you do tomorrow." }]; return (
INSIGHTS Field notes from the work.
{tiles.map((t, i) =>
{t.tag}

{t.t}

{t.d}

Read more →
 )}
); } function Waitlist() { return (
JOIN THE WAITLIST Be first when HealthLink360 opens. Reserve your spot in the founding cohort for $80 (was $100). Founding members get priority access and a lifetime price lock. Reserve my spot →
); } function Footer() { return (

A culturally intelligent personal wellness assistant. Agentic AI + Digital Twin technology to prevent disease.

Product

Company

© 2026 HealthLink360, Inc. HIPAA aware · SOC 2 in progress
); } /* ============== App ============== */ function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const palette = PALETTES[t.palette] || PALETTES.magenta; // expose CSS vars React.useEffect(() => { const r = document.documentElement.style; r.setProperty("--c-a", palette.a); r.setProperty("--c-b", palette.b); r.setProperty("--c-c", palette.c); r.setProperty("--c-glow", palette.glow); }, [t.palette]); const goWaitlist = () => { window.location.href = "waitlist.html"; }; return (
); } ReactDOM.createRoot(document.getElementById("root")).render();