// homepage.jsx — Every Man's Health, unified homepage. // "The Practice" base (clinical-modern editorial, deep navy + warm cream, // restrained gold) borrowing "Signal"'s lab/data fluency — biomarker // dashboard, AI-context callout, longitudinal tracking — but framed as // the *physician's view* during care, not a consumer optimization app. // // Responsive: a shared useViewport() tier hook (from shared.jsx) drives all // breakpoint logic. Above 1024px every value equals the original desktop // design. PX(vp) = horizontal section padding; SY(vp, n) = scaled vertical // padding. Both collapse multi-column grids and stack the hero on mobile. const PX = (vp) => vp.pad; // 72 / 40 / 24 / 20 const SY = (vp, n) => Math.round(n * (vp.isPhone ? 0.5 : vp.isMobile ? 0.6 : vp.isTablet ? 0.8 : 1)); function Homepage() { const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS); const vp = useViewport(); const p = PALETTES[t.palette]; const T = TYPES[t.typePair]; const hero = HERO_COPY[t.heroCopy].a; const tc = toneCopy(t.tone); const S = { base: { background: p.cream, color: p.ink, fontFamily: T.body, fontSize: 15.5, lineHeight: 1.55, letterSpacing: '-0.005em' }, display: { fontFamily: T.display, fontWeight: T.displayWeight, letterSpacing: T.displayTracking, color: p.ink }, mono: { fontFamily: T.mono, letterSpacing: '0.14em', textTransform: 'uppercase' }, container: { padding: `0 ${PX(vp)}px`, position: 'relative', maxWidth: 1440, margin: '0 auto' }, }; return (
); } // ── NAV ───────────────────────────────────────────────────────────────── function Nav({ p, T, S, tc, vp }) { const [hover, setHover] = React.useState(null); const [open, setOpen] = React.useState(false); const items = [ { label: 'The Practice', href: 'EMH_05_The_Practice.html' }, { label: 'Care Model', href: 'EMH_03_Care_Model.html' }, { label: 'Membership', href: 'EMH_04_Membership.html' }, { label: 'Insights', href: 'EMH_13_Insights.html' }, ]; const applyBtn = (label) => ( {label} ); if (vp.isMobile) { // Compact disclosure toggle: logo · Menu ▾ · Apply. Links drop into a // stacked panel below the bar. return (
Every Man's Health
{!vp.isPhone && applyBtn('Apply for membership')}
{open && (
{items.map(({ label, href }) => ( setOpen(false)} style={{ fontSize: 15, color: p.ink, textDecoration: 'none', padding: '13px 0', borderBottom: `1px solid ${p.ink}10` }}> {label} ))} Patient Portal
{applyBtn('Apply for membership')}
)}
); } return (
Every Man's Health
{items.map(({ label, href }) => ( setHover(label)} onMouseLeave={() => setHover(null)} style={{ fontSize: 13.5, color: hover === label ? p.ink : p.inkSoft, textDecoration: 'none', transition: 'color .12s', position: 'relative', padding: '4px 0', whiteSpace: 'nowrap' }}> {label} {hover === label && } ))}
{!vp.isTablet && Patient Portal} {applyBtn('Apply for membership')}
); } // ── HERO ──────────────────────────────────────────────────────────────── function Hero({ p, T, S, hero, tc, vp }) { const h1Size = vp.isPhone ? 38 : vp.isMobile ? 48 : vp.isTablet ? 58 : 68; return (
{tc.hookEyebrow}

{hero.h[0]}
{hero.h[1]}

{hero.sub}

{tc.ctaPrimary} →
{[['Physician-led', 'In-person + telehealth'], ['Florida-based', 'Concierge practice, limited panel'], ['Lab-guided care', 'Coordinated through trusted partners']].map(([k, v]) => (
{k}
{v}
))}
); } function HeroPortraitWithCard({ p, T, S, vp }) { // Desktop: card floats off the lower-left of the portrait. Mobile: the // negative offsets would cause horizontal overflow, so the card sits in // normal flow beneath the portrait. const floating = !vp.isMobile; return (
FROM HIS PHYSICIAN'S RECORD
M·18
{[['TT', '718', '+12%'], ['ApoB', '78', '−9%'], ['hs-CRP', '0.6', '−40%']].map(([k, v, d]) => (
{k}
{v}
{d}
))}
); } function MiniSpark({ p, T }) { const data = [380, 412, 447, 489, 523, 556, 612, 648, 671, 689, 702, 718]; const W = 280, H = 56, pT = 4, pB = 6; const min = 350, max = 750; const xs = (i) => (i / (data.length - 1)) * W; const ys = (v) => pT + (1 - (v - min) / (max - min)) * (H - pT - pB); const path = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${xs(i).toFixed(1)} ${ys(v).toFixed(1)}`).join(' '); const last = data.length - 1; return (
Total testosterone · 18mo trendng/dL
); } // ── INTRO — what EMH is ───────────────────────────────────────────────── function Intro({ p, T, S, vp }) { return (
What we are

Every Man's Health is a regional Florida concierge practice for men — physician-led, lab-guided, and data-informed — built around an in-person physician relationship and the way a man's body actually changes from his thirties through the rest of his life.

Membership is by application and intentionally limited. Care begins with a comprehensive in-person evaluation at our Florida practice — physical exam, coordinated laboratory testing, and a long conversation with the physician who will know your file for years.

From there, ongoing care is delivered through scheduled in-person visits and telehealth follow-up between them — supported by longitudinal monitoring and AI-assisted organization of your laboratory and health data. Physician-guided, not medication-first. Your record belongs to you.

); } // ── TRUST ────────────────────────────────────────────────────────────── function TrustStrip({ p, T, S, vp }) { const items = [ ['Physician-led', 'Plans authored and signed by your physician — not by a chatbot or a sales script.'], ['In-person + telehealth', 'Initial evaluation at our Florida practice. Ongoing care continues between visits.'], ['Coordinated labs', 'Routine blood and biomarker testing coordinated through trusted laboratory partners.'], ['Limited panel', 'Concierge membership by application. We commit to fewer members so we can know each one.'], ]; const cols = vp.isPhone ? 1 : vp.isMobile ? 2 : 4; return (
{items.map(([k, v], i) => { const atRowStart = i % cols === 0; return (
{String(i + 1).padStart(2, '0')} · {k.toUpperCase()}
{v}
); })}
); } // ── SERVICES ─────────────────────────────────────────────────────────── function Services({ p, T, S, vp }) { const cols = vp.isPhone ? 1 : vp.isMobile ? 2 : 3; return (
Care · Six clinical domains

One practice. Every system that matters.

We treat men's health as a connected whole. Hormones don't sit apart from cardiometabolic risk; sleep, mood, and cognition belong in the same conversation. Each domain is supported by the same physicians, the same record, the same data.

{SERVICES.map((s, i) => ( ))}
); } function ServiceCard({ s, p, T, S, idx, cols, total }) { const [hover, setHover] = React.useState(false); const colInRow = idx % cols; const lastRowStart = total - (total % cols || cols); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ padding: '34px 30px 38px', borderRight: colInRow < cols - 1 ? `1px solid ${p.ink}1a` : 'none', borderBottom: idx < lastRowStart ? `1px solid ${p.ink}1a` : 'none', background: hover ? p.paper : 'transparent', transition: 'background .15s', cursor: 'pointer' }}>
{s.label}

{s.title}

{s.body}

Read about this domain →
); } // ── THE RECORD — physician-view dashboard, AI context ────────────────── function Record({ p, T, S, vp }) { return (
The longitudinal record

What your physician sees, you see too.

Every lab panel is read against the panel before it. Technology helps organize, trend, and contextualize your record — making patterns easier to notice. Your physician interprets what they mean. The same record is open in both windows during your visit; nothing is hidden behind a portal.

Patterns emerge in months. Decisions become considered. Your record is yours, longitudinal, and exportable.

{[['60+', 'biomarkers tracked'], ['Coordinated', 'through trusted lab partners'], ['Quarterly', 'physician review cadence'], ['Yours', 'exportable, portable']].map(([k, v]) => (
{k}
{v}
))}
); } function PhysicianRecordPanel({ p, T, S, vp }) { const [tick, setTick] = React.useState(0); const [hl, setHl] = React.useState(0); React.useEffect(() => { let raf, t0 = performance.now(); const loop = (t) => { setTick((t - t0) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); const swap = setInterval(() => setHl((h) => (h + 1) % 4), 3200); return () => { cancelAnimationFrame(raf); clearInterval(swap); }; }, []); const series = [ { k: 'TT', l: 'Total testosterone', unit: 'ng/dL', val: 718, dlt: '+12%', color: p.accent, base: [380,412,447,489,523,556,612,648,671,689,702,718] }, { k: 'HOMA', l: 'HOMA-IR', unit: '', val: 1.4, dlt: '−18%', color: p.signal, base: [2.4,2.3,2.2,2.1,2.0,1.9,1.8,1.7,1.6,1.5,1.45,1.4] }, { k: 'ApoB', l: 'ApoB', unit: 'mg/dL', val: 78, dlt: '−9%', color: '#9DA9C4', base: [98,96,94,92,90,88,86,84,82,80,79,78] }, { k: 'hsCRP', l: 'hs-CRP', unit: 'mg/L', val: 0.6, dlt: '−40%', color: '#C8A765', base: [1.4,1.3,1.2,1.1,1.0,0.95,0.9,0.82,0.74,0.68,0.63,0.6] }, ]; const W = 720, H = 260, padL = 56, padR = 24, padT = 22, padB = 30; const innerW = W - padL - padR, innerH = H - padT - padB; const xs = (i, n) => padL + (i / (n - 1)) * innerW; const norm = (arr) => { const mn = Math.min(...arr), mx = Math.max(...arr), sp = mx - mn || 1; return arr.map((v) => (v - mn) / sp); }; const months = ['M01', 'M03', 'M06', 'M09', 'M12', 'M15', 'M18']; const railCols = vp.isPhone ? 2 : 4; return (
{/* header — clinical chrome, not consumer dashboard */}
Patient record · Sample LONGITUDINAL RECORD · LAB-GUIDED
Physician view
{/* biomarker rail */}
{series.map((s, i) => { const colInRow = i % railCols; return ( );})}
{/* chart */}
{[0, 0.25, 0.5, 0.75, 1].map((g) => ( ))} {['HIGH', 'MID', 'LOW'].map((l, i) => ( {l} ))} {months.map((m, i) => ( {m} ))} {series.map((s, i) => { const n = norm(s.base); const ys = n.map((v) => padT + (1 - (i === 0 ? v : 1 - v)) * innerH); const path = ys.map((y, j) => `${j === 0 ? 'M' : 'L'} ${xs(j, n.length).toFixed(1)} ${y.toFixed(1)}`).join(' '); const active = hl === i; return ( {active && ys.map((y, j) => )} {active && ( )} ); })}
{/* AI-context — clinical framing */}
AI-ASSISTED · CONTEXT

Organized for physician review — not a clinical recommendation. hs-CRP returning to a healthy range tracks alongside the metabolic improvements over the last nine months. Flagged for your physician at the next visit.

); } // ── HOW IT WORKS — telehealth, lab, physician, plan ──────────────────── function HowItWorks({ p, T, S, tc, vp }) { const steps = [ { n: '01', t: 'Application & membership consultation', body: 'Concierge membership is by application. A brief conversation about fit, goals, and what you want from a long-term physician relationship — followed by scheduling your in-person evaluation.', tag: 'By application' }, { n: '02', t: 'In-person evaluation in Florida', body: 'A long first visit at our Florida practice — medical history, physical exam, the laboratory work needed to ground your plan, and a conversation with the physician who will know your file for years. No rushed twelve-minute appointments.', tag: 'In-person · Florida' }, { n: '03', t: 'Coordinated labs & physician interpretation', body: 'Routine blood and biomarker testing is coordinated through trusted laboratory partners for your convenience. Longitudinal review — supported by AI-assisted organization of your data — helps surface patterns and outliers. Your physician interprets them with you, in person or by video.', tag: 'Lab-guided · Physician-interpreted' }, { n: '04', t: 'Personalized plan & ongoing care', body: 'Lifestyle, monitoring cadence, and — where clinically appropriate — prescriptions or 503A compounded therapies. Telehealth follow-up between visits; scheduled in-person check-ins quarterly or annually as fits your plan.', tag: 'In-person + telehealth follow-up' }, ]; const cols = vp.isPhone ? 1 : vp.isMobile ? 2 : 4; return (
How the program works

An in-person beginning. A long relationship after.

Four steps · In-person + telehealth follow-up
{steps.map((s, i) => { const colInRow = i % cols; return (
{s.n}

{s.t}

{s.body}

{s.tag}
);})}

After the first cycle, the rhythm continues — recurring labs, scheduled physician visits in Florida, and telehealth check-ins between them. The record keeps getting sharper.

{tc.ctaPrimary} →
); } // ── LIFE STAGES ──────────────────────────────────────────────────────── function LifeStages({ p, T, S, vp }) { return (
Personalization

The plan changes as you do.

A man at 34 and a man at 64 are answering different questions about the same body. We meet you where you are — and stay with you as the questions change.

{LIFE_STAGES.map((s) => (
AGE
{s.range}
{s.focus}

{s.body}

))}
); } // ── PHYSICIANS / PRACTICE ────────────────────────────────────────────── function Physicians({ p, T, S, vp }) { return (
The care team

A physician relationship, made portable.

Concierge medicine, brought up to date. Your physician sees you in person at our Florida practice, knows your file by name, and is available between visits through scheduled telehealth follow-up — not a triage queue.

Our panel is intentionally small. The physician who meets you at your first visit is the physician who knows you in year three. Nothing here is medication-first; the relationship comes before the prescription.

); } // ── PRINCIPLES ───────────────────────────────────────────────────────── function Principles({ p, T, S, vp }) { const cols = vp.isPhone ? 1 : 2; return (
Operating principles

How we do business.

Direct-pay men's health attracts a particular kind of marketing. We hold ourselves to a different standard — rooted in the physician-patient relationship, not in conversion funnels.

{PRINCIPLES.map(([k, v], i) => { const colInRow = i % cols; return (
P / {String(i + 1).padStart(2, '0')}

{k}

{v}

);})}
); } // ── CTA ──────────────────────────────────────────────────────────────── function CTABand({ p, T, S, tc, vp }) { return (
Begin

Begin with an in-person evaluation.

A long first visit at our Florida practice, laboratory work coordinated for you, and the start of a long-term physician relationship. Concierge membership is by application; our panel is intentionally limited.

{tc.ctaPrimary} →
); } // ── FOOTER ───────────────────────────────────────────────────────────── function Footer({ p, T, S, vp }) { const cols = [ ['Practice', ['Approach', 'Care team', 'Membership', 'Insights']], ['Care', ['Preventive', 'Hormone', 'Metabolic', 'Sexual', 'Cognitive', 'Longevity']], ['Resources', ['How it works', 'Membership', 'Lab partner', 'FAQ']], ['Company', ['About', 'Careers', 'Press', 'Contact']], ]; const gridCols = vp.isPhone ? '1fr 1fr' : vp.isMobile ? 'repeat(3, 1fr)' : '1.4fr repeat(4, 1fr)'; return ( ); } // Wait for shared/tweaks globals before mounting. function __mount() { if (window.PALETTES && window.TYPES && window.useTweaks && window.TweaksPanel && window.Placeholder && window.EMHMark && window.useViewport) { try { ReactDOM.createRoot(document.getElementById('root')).render(); } catch (e) { document.getElementById('root').innerHTML = '
'+(e && e.stack || e)+'
'; throw e; } } else { setTimeout(__mount, 30); } } __mount();