// ============================================================ // Evidia · Versão MOBILE (<768px) — revisão pro (alta qualidade). // Hero sem foto/eyebrow · manifesto enxuto · pilares 1-card com // setas+dots · comunidade empilhada · casos em carrossel com dots · // tecnologia com tela do portal · convite compacto. // Reaproveita window.BrazilMap. // ============================================================ const arcTxt = { background: "var(--grad-arc)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }; const MHeader = () => { const [open, setOpen] = React.useState(false); const links = [["Quem somos", "#m-quem"], ["O que entregamos", "#m-pilares"], ["Médicos da rede", "#m-casos"], ["Como entrar", "#m-como"], ["FAQ", "FAQ.html"]]; return (
Evidia
{open &&
Evidia
{links.map((l, i) => setOpen(false)} style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, color: "var(--blue-900)", textDecoration: "none", padding: "14px 0", borderBottom: "1px solid var(--line)", letterSpacing: "-0.01em" }}>{l[0]} )} setOpen(false)} style={{ marginTop: "auto", textAlign: "center", background: "var(--indigo-600)", color: "#fff", textDecoration: "none", fontWeight: 600, fontSize: 16, padding: "16px", borderRadius: 999 }}>Quero me credenciar setOpen(false)} style={{ marginTop: 12, textAlign: "center", color: "var(--blue-900)", textDecoration: "none", fontWeight: 500, fontSize: 15.5, padding: "14px", borderRadius: 999, border: "1px solid var(--line)" }}>Entrar
} ); }; // CTAs do convite (fundo escuro) const MCtas = ({ dark }) =>
Quero me credenciar Fale com um especialista
; const PILL = [ { n: "01", k: "Conexão", t: "Contrato único.", d: "Acesse múltiplas operadoras com um único credenciamento. Sem negociar plano a plano.", id: "pilar-cover-1" }, { n: "02", k: "Comunidade", t: "Você não negocia sozinho.", d: "Faça parte de uma comunidade que tem voz e peso junto às operadoras.", id: "pilar-cover-2" }, { n: "03", k: "Tecnologia", t: "Portal único, 100% gratuito.", d: "Prontuário, faturamento e IA clínica numa só interface. Gratuito para o médico.", id: "pilar-cover-3" }, { n: "04", k: "Segurança", t: "Previsibilidade financeira.", d: "Auditorias e regras predefinidas tornam seu faturamento mais seguro e previsível.", id: "pilar-cover-4-mobile" }]; const COMM = [ { t: "Cuidado baseado em evidências.", d: "Protocolos revisados pela própria comunidade médica." }, { t: "Melhores desfechos.", d: "Condutas padronizadas melhoram o resultado do paciente." }, { t: "Menos desperdício.", d: "Menos retrabalho, menos exame redundante, menos glosa." }]; const CASES = [ { name: "Prof. Dr. Elie Fiss", meta: "Pneumologista · São Paulo · SP", real: "assets/photo_dr_elie.png", pos: "center 12%", q: "Quis fazer parte de um grupo que leva a sério a medicina de excelência. É essa a mudança que eu quero ver na saúde." }, { name: "Dra. Amanda Moreto", meta: "Gastro · Araraquara · SP", real: "assets/photo_doctor_amanda.jpg", pos: "center 2%", q: "O que me convenceu foi tirar a parte administrativa da minha mesa e devolver esse tempo ao paciente." }, { name: "Dr. Renato Macchione", meta: "Oftalmologista · Sorocaba · SP", real: "assets/photo_doctor_renato.jpg", pos: "center 22%", q: "O acesso a operadoras que eu não alcançava sozinho foi o que me convenceu. E tudo num credenciamento só, sem negociação plano a plano." }, { name: "Dr. Luiz Felipe Dipe", meta: "Reumatologista · Santos · SP", real: "assets/photo_doctor_dipe.jpg", pos: "center 18%", q: "Ser fundador é estar na frente de uma mudança que a categoria precisa: o médico sendo valorizado de novo. Quis liderar isso na minha cidade." }]; const NUMS = [ { v: "500", sfx: "+", k: "Membros ativos", d: "Médicos credenciados na rede hoje." }, { v: "1", sfx: " milhão+", k: "Consultas", d: "Já realizadas por médicos da rede." }, { v: "R$ 200", sfx: " milhões", k: "Receita membros", d: "Faturados por médicos da rede." }]; const sec = { padding: "44px 22px" }; const eyebrow = { fontFamily: "var(--font-eyebrow)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--cyan-700)", marginBottom: 14 }; const rail = { display: "flex", gap: 14, overflowX: "auto", scrollSnapType: "x mandatory", paddingBottom: 6, WebkitOverflowScrolling: "touch", scrollbarWidth: "none" }; // rastreia o card ativo de um carrossel de scroll livre + navegação por setas function useRail() { const ref = React.useRef(null); const [idx, setIdx] = React.useState(0); const step = () => { const el = ref.current;if (!el) return 0; const card = el.querySelector("[data-card]"); return card ? card.offsetWidth + 14 : 0; }; const onScroll = () => { const el = ref.current,s = step(); if (el && s) setIdx(Math.max(0, Math.round(el.scrollLeft / s))); }; const go = (dir) => { const el = ref.current,s = step(); if (el && s) el.scrollBy({ left: dir * s, behavior: "smooth" }); }; return { ref, idx, onScroll, go }; } const Dots = ({ n, idx, dark }) =>
{Array.from({ length: n }).map((_, i) => )}
; const Arrow = ({ dir, onClick, disabled }) => ; // Notebook flutuante com dashboard real (versão 1 — orientação original) const MLaptop = () => Portal Evidia — dashboard do médico no notebook; // PILARES · accordion vertical com cascata de bounce (substituiu o carrossel) // >>> backup do carrossel original em archive/10-mobile.carousel-backup.jsx <<< // ícones por categoria const MIconNetwork = ({ color, size = 24 }) => ; const MIconPortal = ({ color, size = 24 }) => ; const MIconShield = ({ color, size = 24 }) => ; const MIconCommunity = ({ color, size = 24 }) => ; const MBENEFITS = [ { id: 1, title: "Credenciamento único.", body: "Acesse múltiplas operadoras com um único credenciamento. Sem negociar plano a plano.", from: "#00a3e0", to: "#0178ab", Icon: MIconNetwork }, { id: 2, title: "Portal único.", body: "Prontuário, faturamento e apoio em glosas numa só interface. Gratuito para o médico.", from: "#1e62a4", to: "#444ca2", Icon: MIconPortal }, { id: 3, title: "Previsibilidade financeira.", body: "Regras claras reduzem divergências e tornam seu faturamento mais seguro e previsível.", from: "#7868e6", to: "#583e96", Icon: MIconShield }, { id: 4, title: "Comunidade médica.", body: "Faça parte de uma comunidade que tem voz e peso junto às operadoras.", from: "#00b89a", to: "#00a3e0", Icon: MIconCommunity }]; const MAccordionCard = ({ card, isOpen, onToggle, pulse, cascadeIndex }) => { const { from, to, Icon, title, body } = card; const animatesChevron = pulse && cascadeIndex >= 0; return (
{title}
{!isOpen &&
Saiba mais
} {isOpen &&

{body}

Fechar
}
); }; const MConnector = ({ fromColor, toColor }) =>
; const MPillars = () => { const [openId, setOpenId] = React.useState(1); const [pulse, setPulse] = React.useState(false); const sectionRef = React.useRef(null); const toggle = (id) => setOpenId((prev) => prev === id ? null : id); React.useEffect(() => { const el = sectionRef.current; if (!el) return; let fired = false; const check = () => { if (fired) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; // dispara quando o topo da seção entra na metade superior da viewport const visibleEnough = rect.top < vh * 0.6 && rect.bottom > vh * 0.1; if (visibleEnough) { fired = true; setPulse(true); setTimeout(() => setPulse(false), 7400); window.removeEventListener("scroll", check, true); } }; // captura na fase de captura → pega scroll de QUALQUER container aninhado // (window no site real, o div do chassis no mockup) sem precisar detectá-lo window.addEventListener("scroll", check, { passive: true, capture: true }); const timers = [300, 900, 1600].map((t) => setTimeout(check, t)); return () => { window.removeEventListener("scroll", check, true); timers.forEach(clearTimeout); }; }, []); return (
Por que fazer parte

O que você ganha ao entrar na rede.

{(() => { let casc = 0; return MBENEFITS.map((card, i) => { const open = openId === card.id; const cascadeIndex = open ? -1 : casc++; return ( toggle(card.id)} pulse={pulse} cascadeIndex={cascadeIndex} /> {i < MBENEFITS.length - 1 && } ); }); })()}
); }; // CASOS · carrossel de scroll + dots const MCases = () => { const { ref, idx, onScroll } = useRail(); return (
Quem já faz parte

Médicos que confiaram na Evidia.

Conheça alguns dos médicos que já fazem parte da Evidia e atuam como referência em suas regiões.

{CASES.map((d, i) =>
{d.name}
Membro fundador
{d.meta}
{d.name}
“{d.q}”
)}
); }; // TECNOLOGIA · renderiza o MESMO portal do desktop (PortalMock 1248×700) escalado p/ a largura mobile const MPortalShot = () => { const Portal = window.PortalMock; const wrapRef = React.useRef(null); const [scale, setScale] = React.useState(0.27); React.useEffect(() => { const el = wrapRef.current; if (!el) return; const update = () => { const w = el.clientWidth; if (w > 0) setScale(w / 1248); }; update(); const ro = new ResizeObserver(update); ro.observe(el); window.addEventListener("resize", update); window.addEventListener("load", update); const timers = [200, 800, 1600, 3000].map((t) => setTimeout(update, t)); return () => { ro.disconnect(); window.removeEventListener("resize", update); window.removeEventListener("load", update); timers.forEach(clearTimeout); }; }, []); return (
{Portal ? : null}
); }; // ============================================================ // COMO ENTRAR NA REDE · stepper vertical compacto + motion scroll-linked // (portado do mockup aprovado · backup: archive/10-mobile.pre-comoentrar-backup.jsx) // ============================================================ const EASE = "cubic-bezier(.2,.7,.2,1)"; const clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x; const easeInOut = (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2; const IconUpload = ({ color, size = 19 }) => ; const IconReview = ({ color, size = 19 }) => ; const IconContract = ({ color, size = 19 }) => ; const IconReady = ({ color, size = 19 }) => ; const STEPS = [ { n: "01", name: "Cadastro e documentos", desc: "Você preenche seu perfil e envia os documentos pelo portal. Simples e 100% digital.", acc: "#6b3f9c", accBg: "#efeaf5", Icon: IconUpload }, { n: "02", name: "Revisão do perfil", desc: "Nossa equipe revisa suas informações. Se precisar, agendamos uma videochamada rápida para tirar dúvidas.", acc: "#1e62a4", accBg: "#e7f0f9", Icon: IconReview }, { n: "03", name: "Contrato e tabela", desc: "Você revisa a tabela base de valores e assina o contrato de credenciamento. Tudo transparente, sem surpresas.", acc: "#00a3e0", accBg: "#e0f3fb", Icon: IconContract }, { n: "04", name: "Pronto para atender", desc: "Credenciamento concluído. Você já pode atender pelas operadoras parceiras da sua região e faturar pelo portal único.", acc: "#1ec9a0", accBg: "#e2f7f1", Icon: IconReady }]; function ComoEntrarSection() { const reduce = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; const sectionRef = React.useRef(null); const circleRefs = React.useRef([]); const scrollerRef = React.useRef(null); // dispara UMA vez quando o 1º bloco aparece; só fade-in (sem fade-out) const [play, setPlay] = React.useState(reduce ? true : false); React.useEffect(() => { if (reduce || play) return; const el = sectionRef.current; if (!el) return; let done = false; const check = () => { if (done) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; // o 1º bloco entrou na metade superior da viewport if (r.top < vh * 0.72 && r.bottom > vh * 0.1) { done = true; setPlay(true); window.removeEventListener("scroll", check, true); clearInterval(iv); } }; window.addEventListener("scroll", check, { passive: true, capture: true }); const iv = setInterval(check, 160); return () => { window.removeEventListener("scroll", check, true); clearInterval(iv); }; }, [reduce, play]); return (

Como entrar

Passo a passo.

{STEPS.map((s, i) => { const Icon = s.Icon; const last = i === STEPS.length - 1; const nextAcc = last ? s.acc : STEPS[i + 1].acc; const a = play ? 1 : 0; const segFill = last ? 0 : (play ? 1 : 0); const isReached = reduce || play; const delay = (i * 0.30).toFixed(2) + "s"; // cascata suave (stagger maior) const segDelay = (i * 0.30 + 0.12).toFixed(2) + "s"; const lastDone = last && isReached; const circleBg = lastDone ? s.acc : isReached ? s.accBg : "#fff"; const numColor = lastDone ? "#fff" : s.acc; return (
{circleRefs.current[i] = el;}} style={{ position: "relative", zIndex: 1, width: 44, height: 44, borderRadius: "50%", background: circleBg, border: "2px solid " + s.acc, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, letterSpacing: "-0.03em", color: numColor, boxShadow: "0 2px 8px rgba(10,37,64,0.07)", opacity: 0.35 + 0.65 * a, transform: "scale(" + (0.86 + 0.14 * a) + ")", transition: "opacity .8s " + EASE + ", transform .8s " + EASE + ", background .9s " + EASE + ", color .8s " + EASE, transitionDelay: delay }}>{s.n}
{!last &&
}

{s.name}

{s.desc}

); })}
); } const MobileHome = () => { const Convite = window.ConviteCard; const heroRef = React.useRef(null); React.useEffect(() => { const vh = () => (window.visualViewport ? window.visualViewport.height : window.innerHeight); const setH = () => { if (heroRef.current) heroRef.current.style.minHeight = Math.round(vh() - 54) + "px"; }; setH(); window.addEventListener("load", setH); const t = setTimeout(setH, 250); const onOrient = () => setTimeout(setH, 350); window.addEventListener("orientationchange", onOrient); return () => { window.removeEventListener("load", setH); clearTimeout(t); window.removeEventListener("orientationchange", onOrient); }; }, []); return (
{/* HERO · foto translúcida como composição de fundo, atrás do conteúdo agrupado */}
{/* Foto Dr. Renato — faixa DIREITA em altura total, preenchendo a hero; fade na esquerda e dissolve na base (zona do CTA) */}
{/* Conteúdo — distribuído na altura via spacers proporcionais; texto preso à coluna esquerda */}

Foque na medicina.
Nós cuidamos do resto.

A Evidia conecta você a operadoras e pacientes com um único credenciamento. Portal único e apoio em faturamento e glosas, sem mensalidade para o médico.

Quero me credenciar Fale com um especialista
{/* MANIFESTO · enxuto (frase-âncora) */}
Quem é a Evidia

A Evidia reúne os melhores médicos sob um único credenciamento, dá a eles voz de comunidade e cuida de toda a parte chata: faturamento, glosa e tecnologia, para o médico focar na medicina.

{/* PILARES · carrossel 1-card com setas + dots */}
{/* COMUNIDADE · dark · blocos empilhados — OCULTA NO MOBILE (reversível: remover display:"none") */}

Quando bons médicos se organizam a saúde ganha.

Quando os melhores médicos do país compartilham protocolos e padrão clínico, todo o ecossistema de saúde ganha, e é isso que dá à rede relevância junto às operadoras.

{COMM.map((c, i) =>
{c.t}
{c.d}
)}
{/* CASOS · carrossel de scroll + dots */}
{/* NÚMEROS · dark · empilhado */}
Evidia em números
{NUMS.map((n, i) =>
{n.k}
{n.v} {n.sfx}
{n.d}
)}
Dados consolidados da rede de parceiros credenciados Evidia.
{/* COMO ENTRAR NA REDE · stepper vertical + motion scroll-linked (entre Números e FAQ) */}
{/* TECNOLOGIA · OCULTA NO MOBILE (reversível: remover display:"none") — argumento já coberto no card "Portal único" e na hero */}
Tecnologia

Um portal único. E 100% gratuito.

Prontuário, faturamento e IA clínica numa só interface. Sem mensalidade para o médico.

{["#ff5f57", "#febc2e", "#28c840"].map((c, i) => )}
portal.evidiasaude.com.br
{/* TEM DÚVIDAS · só título + CTA */}

Tem dúvidas?

Ver perguntas frequentes
{/* CONVITE · ConviteCard responsivo (mesmo componente do desktop) */}
{Convite ? : null}
{/* RODAPÉ */}
); }; Object.assign(window, { MobileHome, MHeader, MLaptop });