/* global React */ /* ============================================================ Arogya — Sections 2, 3, 4 redesigned per design brief. 5-second test: section meaning visible BEFORE any reading. ============================================================ */ const { useState: useStateR } = React; /* ----- Source colour mapping (generic, not branded logos) ----- */ const SOURCE_COLORS = { WhatsApp: "#1faa5a", Gmail: "#d54d3a", Email: "#1f70d6", Drive: "#3b66c4", Photos: "#8a4ed1", Notebook: "#a07a3b", Drawer: "#8a5a2a", Memory: "#6b7280", Camera: "#0a8a8a", }; /* ----- Source icon — small SVG glyph per source. Generic icons only, not brand-logo replicas. Colour cues match the app association. ----- */ function SourceIcon({ src, size = 22 }) { const c = SOURCE_COLORS[src] || "#666"; const wrap = (children, bg = c) => ( {children} ); switch (src) { case "WhatsApp": // chat bubble with phone hint return wrap( ); case "Gmail": case "Email": return wrap( ); case "Drive": // generic folder (not Google Drive triangle logo) return wrap( ); case "Photos": // camera / picture frame return wrap( ); case "Notebook": // spiral-bound notebook return wrap( {[0, 1, 2, 3].map(i => ( ))} ); case "Drawer": // dresser return wrap( ); case "Memory": // thought cloud with a question mark return wrap( ? ); default: return wrap(?); } } /* ====== Tiny circular avatar (used only in the small Arogya unifier strip) ====== */ function PortraitAvatar({ id, placeholder, initial, tint, size = 72 }) { return (
{initial} {placeholder}
); } /* ====== Large family-card portrait — full-width image with rounded crop ====== */ function LargePortrait({ id, placeholder, initial, tint }) { return (
{initial} {placeholder}
); } /* ====== Doc chip — source icon + label + filename ====== */ function DocChip({ src, text, tilt = 0 }) { return (
{src} {text}
); } /* ============================================================ SECTION 2 — Family chaos grid People first; their docs scattered around them; clean Arogya bar below ============================================================ */ function FamilyChaosSection() { const family = [ { id: "appa", name: "Appa", role: "Grandfather · 67", initial: "अ", photoId: "fam-appa", placeholder: "Indian grandfather, 60s–70s, warm portrait at home", docs: [ { src: "WhatsApp", text: "BP report from Dr. Iyer", tilt: -3 }, { src: "Notebook", text: "Telmisartan 40mg, after breakfast", tilt: 2.5 }, { src: "Photos", text: "Handwritten Rx, Aug 12", tilt: -1.5 }, { src: "Gmail", text: "Apollo discharge — cath lab", tilt: 1.5 }, ], }, { id: "amma", name: "Amma", role: "Grandmother · 62", initial: "अ", photoId: "fam-amma", placeholder: "Indian grandmother, 60s, soft natural light", docs: [ { src: "WhatsApp", text: "Blood test forwarded by bua", tilt: 2 }, { src: "Drive", text: "USG_Aug_2024.pdf", tilt: -2.5 }, { src: "Photos", text: "Vaidya's kashayam list", tilt: 1.5 }, { src: "Memory", text: "the homeopath's name…?", tilt: -1 }, ], }, { id: "you", name: "You", role: "Priya · 38", initial: "P", photoId: "fam-you", placeholder: "Indian woman 30s/40s, managing family — confident, warm", docs: [ { src: "Email", text: "Annual checkup — lipid panel", tilt: -2 }, { src: "Photos", text: "ECG strip from the gym", tilt: 1.5 }, { src: "Drive", text: "Lipid_2024_full.pdf", tilt: -1 }, ], }, { id: "kids", name: "Arjun & Riya", role: "8 & 5", initial: "A·R", photoId: "fam-kids", placeholder: "Two Indian children, primary school age, siblings", docs: [ { src: "Drawer", text: "Yellow vaccine card", tilt: -2.5 }, { src: "WhatsApp", text: "Amoxicillin 5ml × 5 days", tilt: 2 }, { src: "Photos", text: "School health certificate", tilt: -1 }, ], }, { id: "bruno", name: "Bruno", role: "Beagle · 4", initial: "🐾", photoId: "fam-pet", placeholder: "Family dog — beagle or indie, warm domestic scene", docs: [ { src: "Photos", text: "Vet vaccine receipt", tilt: 2 }, { src: "Notebook", text: "Deworming due Nov 12", tilt: -2 }, ], }, ]; return (
The reality every family knows

Five people. A dozen apps. One memory missing.

Every family member generates health data every week. None of it lives in the same place.

{/* Family grid — chaos */}
{family.map(p => (
{p.name}
{p.role}
{p.docs.map((d, i) => ( ))}
))}
{/* Arogya unifier — clean horizontal counter to the chaos above */}
→ Arogya
All of the above. Filed by person. Searchable in one second.
✓ One family memory
{family.map(p => (
{p.name}
{p.docs.length} record{p.docs.length === 1 ? "" : "s"}
))}
); } /* ============================================================ SECTION 3 — Sticky personas (left) + scrolling use-case panels (right) As the user scrolls, the active persona on the left updates to match the panel in view. Click a persona to jump to its panel. ============================================================ */ const { useEffect, useRef } = React; /* Map image-slot IDs to actual filenames in /static/landing/images/ */ function slotSrc(id) { const map = { "fam-appa": "appa.png", "fam-amma": "amma.png", "fam-you": "you.png", "fam-kids": "arjun-riya.png", "fam-pet": "bruno.png", "bp-hero-adults": "family.png", "bp-hero-adults-thumb": "you.png", "bp-hero-kids": "kids.png", "bp-hero-kids-thumb": "arjun-riya.png", "bp-hero-elders": "elders_family.png", "bp-hero-elders-thumb": "appa.png", "bp-hero-pet": "pets.png", "bp-hero-pet-thumb": "bruno.png", "hero-grandmother": "hero.png", "family-across-generations": "family.png", }; return "/static/landing/images/" + (map[id] || id.replace(/^(fam-|bp-hero-)/, "") + ".png"); } function PersonaHeroPhoto({ id, placeholder, initial, tint }) { return (
{initial} {placeholder}
); } /* === Use case mini-cards live in window.UCV (arogya-uc-vizes.jsx) === */ const _legacy_UC_LipidChart_removed = null; const _legacyVisitQuote = null; const _legacySymptoms = null; const _legacyCycle = null; const _legacyVaccines = null; const _legacySchool = null; const _legacyAntibiotics = null; const _legacyMeds = null; const _legacyFourDoctors = null; const _legacyFromAfar = null; const _legacyEmergency = null; const _legacyPetVaccines = null; const _legacyPetWeight = null; const _legacyPetDeworm = null; function ByPersonSection() { const UCV = (typeof window !== "undefined" && window.UCV) || { ADULTS: [], CHILDREN: [], ELDERS: [], PETS: [] }; const UCFrame = UCV.UCFrame; const personas = [ { id: "adults", label: "For you", who: "Adults", range: "25 – 50", heroId: "bp-hero-adults", placeholder: "Indian adult 30s/40s — confident, warm portrait at home", initial: "A", preview: "Blood trends · Menstrual cycles · Thyroid", headline: "Your own health, finally tracked.", sub: "Sixteen kinds of records, one timeline. Trends across years that no individual visit reveals.", useCases: UCV.ADULTS, }, { id: "kids", label: "For your children", who: "Children", range: "0 – 18", heroId: "bp-hero-kids", placeholder: "Indian children, primary school age, siblings, warm domestic", initial: "C", preview: "Vaccines · Growth · Allergies · Antibiotics", headline: "Every booster. Every milestone. Every certificate.", sub: "Twelve things every parent juggles — vaccines, growth, allergies, antibiotics, ENT, myopia, dental — finally in one place.", useCases: UCV.CHILDREN, }, { id: "elders", label: "For your parents", who: "Elder care", range: "60+", heroId: "bp-hero-elders", placeholder: "Indian senior couple at home, warm afternoon light", initial: "E", preview: "Medications · Multi-specialist · Emergency", headline: "Fifteen specialists. One memory. From anywhere.", sub: "Cardiac, kidney, diabetes, neurology, ortho — every specialist, every report, every pill. Manage from another city. Emergency-ready.", useCases: UCV.ELDERS, }, { id: "pets", label: "For your pet", who: "Pet care", range: "family", heroId: "bp-hero-pet", placeholder: "Family dog or cat, warm domestic scene", initial: "P", preview: "Vaccines · Deworming · Wellness · Oncology", headline: "Furry family. Same memory.", sub: "Vaccines, deworming, wellness, weight, dental, allergies, surgery, oncology, breed screening — twelve kinds of records for the family member that can't speak.", useCases: UCV.PETS, }, ]; const [active, setActive] = useStateR(0); const panelRefs = useRef([]); useEffect(() => { const obs = new IntersectionObserver(entries => { // pick the entry closest to top of viewport that is intersecting let best = null; entries.forEach(e => { if (e.isIntersecting) { if (!best || e.boundingClientRect.top < best.boundingClientRect.top) best = e; } }); if (best) { const idx = +best.target.dataset.idx; setActive(idx); } }, { rootMargin: "-40% 0px -50% 0px", threshold: [0, 0.5, 1] }); panelRefs.current.forEach(r => r && obs.observe(r)); return () => obs.disconnect(); }, []); const jumpTo = (i) => { const el = panelRefs.current[i]; if (!el) return; const top = el.getBoundingClientRect().top + window.pageYOffset - 88; window.scrollTo({ top, behavior: "smooth" }); }; return (
Built for the whole family

Every person in your family has a health story. Arogya holds all of them.

Scroll through every life stage — each with the use cases Arogya actually covers.

{/* LEFT — sticky persona list */} {/* RIGHT — scrolling panels */}
{personas.map((p, i) => (
panelRefs.current[i] = el} data-idx={i} className="bp-panel" >
{p.label} · {p.range}

{p.headline}

{p.sub}

{p.useCases.map((u, j) => ( ))}
))}
); } /* ============================================================ SECTION 4 — Capability wall: documents Arogya reads ============================================================ */ /* Faux document previews — each visually distinct. Each is a small visual pretending to be the actual document type. Not branded; generic shapes. */ function DocPreview_LabPDF() { return (
METROPOLIS DIAGNOSTICS
NABL · ISO 15189
A. Krishnan · M / 67 22-AUG-2026
LIPID PROFILE
TESTRESULTREF
{[ { n: "Total Chol.", v: "234", r: "<200", hi: true }, { n: "LDL", v: "152", r: "<130", hi: true }, { n: "HDL", v: "48", r: ">40", hi: false }, { n: "Triglyceride", v: "168", r: "<150", hi: true }, { n: "VLDL", v: "33", r: "<30", hi: true }, ].map((r, i) => (
{r.n} {r.v} {r.r} {r.hi && HIGH}
))}
{[1,2,1,3,1,2,3,1,2,1,3,2,1,2,3,1,2,1,3,1,2,3].map((w, i) => ( ))}
APL-2026-88341
); } function DocPreview_HandwrittenRx() { return (
Dr. K. Ramachandran
MBBS · MD (CARDIOLOGY) · REG. 22831
NAME: A. Krishnan, 67/M 22 / 08 / 2026
Telmisartan 40 1—0—0
Metformin 500 1—0—1
Atorvastatin 10 0—0—1
Walk 30 min F/U 3 m
~Ramach~
CLINIC
SEAL
); } function DocPreview_MedicineStrip() { return (
TELMA 40 Rx
{Array.from({ length: 10 }).map((_, i) => (
))}
B.NO. TLM2438 EXP 02/27
); } function DocPreview_WhatsAppScan() { return (
Bua · +91 98xxx
APOLLO LABS
BP: 128/82 · HR: 76
FBS: 108 · PPBS: 168
Mom's report — pls file
10:42 AM
Got it ✅
); } function DocPreview_Discharge() { return (
+
APOLLO HOSPITALS
Greams Road · Chennai 600006
MRN: 2024-08-22-4421 WARD 4-B
DISCHARGE SUMMARY
{[ ["PATIENT", "Krishnan, 67 / M"], ["DX", "Acute gastroenteritis, mild dehydration"], ["PROC", "IV fluids × 24h, antiemetics"], ["MEDS", "Ondansetron 4mg BD × 3d, ORS PRN"], ["F/U", "5 days — Dr. Sahu, Gastro"], ["NEXT", "Bland diet 48h, ORS 3L/day"], ].map((r, i) => (
{r[0]} {r[1]}
))}
22-AUG-2026 · 18:42 R. Sahu
); } function DocPreview_VaccineCard() { return (
IMMUNISATION RECORD
INDIAN ACADEMY OF PEDIATRICS
Arjun K. · DOB 14/03/2020 Blood O+
{[ { v: "BCG", age: "Birth", d: "15.3.20", done: true }, { v: "OPV-1", age: "6 wk", d: "28.4.20", done: true }, { v: "DTwP", age: "10 wk", d: "08.6.20", done: true }, { v: "MMR", age: "9 mo", d: "15.12.20", done: true }, { v: "DPT", age: "5 yr", d: "", done: false }, ].map((r, i) => (
{r.v} {r.age} {r.d} {r.done ? "✓ DONE" : "DUE"}
))}
DR. SHAH
CLINIC
15.3.20
); } function DocPreview_DentalChart() { /* Tooth chart: 16 ovals top / 16 bottom; few marked */ return (
DENTAL CHART
{[0, 1].map(row => (
{Array.from({ length: 16 }).map((_, i) => { const flagged = (row === 0 && (i === 4 || i === 11)) || (row === 1 && i === 7); return (
); })}
))}
#14 · #21 · #36 — flagged for review
); } function DocPreview_Scan() { return (
L
APL-08220
22-AUG-26
{Array.from({ length: 7 }).map((_, i) => ( ))}
CXR · PA IMP: No focal consolidation kVp 110
); } function DocPreview_Homeo() { return (
Vaidya R. Iyer
HOMEOPATHY · EST. CHENNAI · 1972
L. Krishnan · 62/F 10 / 08 / 2026
{[ { n: "Nux Vomica", p: "30", d: "4 pellets · TDS" }, { n: "Arsenicum Alb", p: "200", d: "2 pellets · OD" }, { n: "Carbo Veg", p: "30", d: "SOS" }, ].map((r, i) => (
{r.n} {r.p} {r.d}
))}
Avoid: tea, coffee, mint · F/U 14 days
SIMILIA
R. Iyer
); } function DocCard({ format, type, color, extracted }) { return (
{format}
{type}
{extracted.map((e, i) => (
{e[0]} {e[1]}
))}
); } function CapabilityWallSection() { const docs = [ { format: "PDF · Typed", type: "Lab report", color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#2563eb", fg2: "#fff" }, extracted: [["Trend", "LDL +12% since Feb"], ["Filed under", "Appa · Cardiology"]], }, { format: "Photo · Handwritten", type: "Doctor's prescription", color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#c98038", fg2: "#fff" }, extracted: [["Medicine", "Telmisartan 40mg"], ["Schedule", "Once daily, after breakfast"]], }, { format: "Photo · Strip", type: "Medicine pack", color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#5172a3", fg2: "#fff" }, extracted: [["Drug", "Metformin 500mg"], ["Linked to", "Amma · Diabetes"]], }, { format: "WhatsApp · Forward", type: "Forwarded scan", color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#1faa5a", fg2: "#fff" }, extracted: [["Sender", "Bua · 10:42 AM"], ["Filed under", "Amma · Cardiology"]], }, { format: "PDF · Hospital", type: "Discharge summary", color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#14a085", fg2: "#fff" }, extracted: [["Diagnosis", "Acute gastroenteritis"], ["Follow-up", "5 days · Dr. Sahu"]], }, { format: "Photo · Card", type: "Vaccination card", color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#c89417", fg2: "#fff" }, extracted: [["Next due", "DPT booster, age 5"], ["Filed under", "Arjun · Kids"]], }, { format: "PDF · X-ray", type: "Scan & radiology", color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#1e3a8a", fg2: "#fff" }, extracted: [["Modality", "Chest X-ray · PA"], ["Impression", "No focal consolidation"]], }, { format: "Photo · Handwritten", type: "Ayurveda · Homeopathy", color: { bg: "#e8f0fc", fg: "#1e3a8a", accent: "#b8542a", fg2: "#fff" }, extracted: [["Remedy", "Nux Vomica 30 · TDS"], ["System", "Homeopathy"]], }, ]; return (
What Arogya actually reads

Typed PDF or blurry photo. Printed or handwritten. Filed for the right person.

The messy reality of Indian family health — not perfect digital records, but forwards, photos and notes in three languages.

{docs.map((d, i) => )}

Arogya organises your records. It does not diagnose or replace your doctor.

); } window.AroRedesign = { FamilyChaosSection, ByPersonSection, CapabilityWallSection };