// LinksPage.jsx — Paulo Vaz // Paleta: Burnt Coffee (#34150f), Champagne (#EACEAA), amarelo apoio (#EEE92E), Balsâmico (#150C0C) // Tipografia: Helvetica World (Helvetica) + Argent (Fraunces como stand-in editorial) const COFFEE = '#34150f'; // primária const CHAMPAGNE= '#faf8f5'; // secundária — off-white quente const YELLOW = '#EEE92E'; // acento seletivo const BALSAMIC = '#150C0C'; // apoio escuro const CHAMP_SOFT = '#faf8f5'; // off-white const HELV = '"Helvetica Neue", Helvetica, Arial, sans-serif'; const EDITOR = '"Fraunces", "Times New Roman", Georgia, serif'; // ───────────────────────────────────────────────────────────── // Conteúdo — banners principais // ───────────────────────────────────────────────────────────── const LINKS = [ { title: (<>Kit de Mindfulness Clínico), plainTitle: 'Kit de Mindfulness Clínico', desc: 'Aulas e materiais para você começar a aplicar Mindfulness Clínico com segurança. Aprenda quando propor, como conduzir, quando adaptar e muito mais.', kicker: 'Comece sua jornada com Mindfulness Clínico', href: 'https://opaulovaz.com.br/kmc-m', }, { title: (<>Supervisão Clínica), plainTitle: 'Supervisão Clínica', desc: 'Supervisão Individual para psicólogos que querem aprofundar sua prática.', kicker: 'Atendimento', href: 'https://docs.google.com/forms/d/e/1FAIpQLSeNJVN8QTQ4ejqHcsDj-t2IME8UQeSvdWLNzQJlqvjdqsBmkw/viewform?usp=header', }, { title: (<>Treinamento de Regulação Emocional com Mindfulness), plainTitle: 'Treinamento de Regulação Emocional com Mindfulness (MBCT)', desc: 'Programa de 8 semanas em MBCT — terapia cognitiva baseada em mindfulness.', kicker: 'Programa · MBCT', href: 'https://opaulovaz.com.br/treinamento8semanas/', }, { title: (<>Fragmentos do Agora), plainTitle: 'Fragmentos do Agora', desc: 'Newsletter gratuita — notas breves sobre atenção, prática e clínica.', kicker: 'Newsletter', href: 'https://concentrando.substack.com/', }, { title: (<>Meditações no Insight Timer), plainTitle: 'Meditações — Insight Timer', desc: 'Práticas guiadas gratuitas para começar, sustentar e aprofundar a atenção.', kicker: 'Meditações Guiadas', href: 'https://insighttimer.com/concentrando', }, { title: (<>Canal no YouTube), plainTitle: 'YouTube', desc: 'Conversas, práticas e aulas abertas sobre mindfulness clínico.', kicker: 'Aulas completas', href: 'https://www.youtube.com/@opaulovazz', }, ]; // Botões sociais (compactos, pill row) const SOCIAL = [ { name: 'Instagram', href: 'https://www.instagram.com/opaulo.vaz/' }, { name: 'YouTube', href: 'https://www.youtube.com/@opaulovazz' }, { name: 'Spotify', href: 'https://open.spotify.com/show/1dNy4H2HnMNCYy3NRVULFX' }, { name: 'Substack', href: 'https://concentrando.substack.com/' }, ]; // Credenciais / posicionamento const CREDENTIALS = [ <>Formação em MBCT (Mindfulness-Based Cognitive Therapy), <>Certified Mindfulness Meditation Teacher (CMMT), <>Certificado em Trauma-Sensitive Mindfulness
Treinamento internacional reconhecido pela IMMA, <>Ensino orientado pelos critérios internacionais do MBI-TAC
(Mindfulness-Based Interventions Teaching Assessment Criteria), ]; // ───────────────────────────────────────────────────────────── // Arrow // ───────────────────────────────────────────────────────────── function Arrow({ size = 18, color = 'currentColor' }) { return ( ); } // ───────────────────────────────────────────────────────────── // Marquee // ───────────────────────────────────────────────────────────── function Marquee({ items, speed = 40, color = CHAMPAGNE, bg = 'transparent', border = false, italic = true, size = 13, accent = false }) { const line = items.join(' · '); return (
{Array.from({ length: 6 }).map((_, i) => ( {items.map((t, j) => ( {t} {j < items.length - 1 && ✦} ))} ✦ ))}
); } // ───────────────────────────────────────────────────────────── // LinkCard — creme Champagne sobre coffee // ───────────────────────────────────────────────────────────── function LinkCard({ link, index, size = 'md', variant = 'cream' }) { const [hover, setHover] = React.useState(false); const pad = size === 'sm' ? '20px 22px' : '26px 28px'; const titleSize = size === 'sm' ? 24 : 30; const isDark = variant === 'dark'; const bg = isDark ? BALSAMIC : CHAMPAGNE; const fg = isDark ? CHAMPAGNE : COFFEE; const bdr = isDark ? `1px solid ${CHAMPAGNE}22` : `1px solid ${COFFEE}14`; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'block', position: 'relative', padding: pad, borderRadius: 4, background: bg, color: fg, textDecoration: 'none', border: bdr, transform: hover ? 'translateY(-2px)' : 'translateY(0)', boxShadow: hover ? '0 14px 30px rgba(0,0,0,0.28)' : '0 4px 14px rgba(0,0,0,0.18)', transition: 'transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s', overflow: 'hidden', }}> {/* top row: kicker + arrow */}
{String(index + 1).padStart(2, '0')} {link.kicker}
{/* title */}
{renderEditorialTitle(link.title)}
{link.desc &&
{link.desc}
} ); } // Helper: replaces children to use editorial serif // (title is already JSX — re-map ems to use font EDITOR) function renderEditorialTitle(title) { // wrap title to override em styling return {title}; } // ───────────────────────────────────────────────────────────── // Credentials // ───────────────────────────────────────────────────────────── function Credentials({ align = 'center', size = 14, color = CHAMPAGNE }) { return (
{CREDENTIALS.map((c, i) => (
{c}
))}
); } // ───────────────────────────────────────────────────────────── // Social // ───────────────────────────────────────────────────────────── function SocialIcon({ name, size = 18, color = 'currentColor' }) { const s = size; if (name === 'Instagram') { return ( ); } if (name === 'YouTube') { return ( ); } if (name === 'Spotify') { return ( ); } if (name === 'Substack') { return ( ); } return null; } function SocialButton({ name, href, color = CHAMPAGNE }) { const [hover, setHover] = React.useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} aria-label={name} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '11px 18px', borderRadius: 999, border: `1px solid ${color}${hover ? '80' : '40'}`, color, textDecoration: 'none', background: hover ? `${color}14` : 'transparent', transition: 'background .2s, border-color .2s, transform .2s', transform: hover ? 'translateY(-1px)' : 'translateY(0)', fontFamily: HELV, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500, }}> {name} ); } function SocialRow({ color = CHAMPAGNE, align = 'flex-start' }) { return (
{SOCIAL.map((s, i) => ( ))}
); } // ───────────────────────────────────────────────────────────── // Section label // ───────────────────────────────────────────────────────────── function SectionLabel({ kicker, label, color = CHAMPAGNE }) { return (
{kicker} — {label}
); } // ───────────────────────────────────────────────────────────── // Global style injection for em -> editorial // ───────────────────────────────────────────────────────────── function GlobalStyles() { React.useEffect(() => { const s = document.createElement('style'); s.textContent = ` .pv-title em, .pv-editorial em { font-family: ${EDITOR}; font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .pv-editorial b { font-weight: 700; } .pv-title b { font-weight: 700; } `; document.head.appendChild(s); return () => s.remove(); }, []); return null; } // ───────────────────────────────────────────────────────────── // MOBILE // ───────────────────────────────────────────────────────────── function MobileLinksPage() { return (
{/* Hero — foto editorial com nome sobreposto */}
Paulo Vaz {/* overlay quente */}
{/* frame caption top */}
CRP — 06/206437 @opaulo.vaz
{/* overlay name */}
Paulo{' '} Vaz
{/* Tagline editorial */}
Atenção Plena , Segurança e Direção clínica .
{/* Credentials */}
{/* Social row — antes dos cards para dar respiro */}
{/* Section label */}
Conheça os caminhos
{/* Links */}
{LINKS.map((l, i) => )}
{/* Footer */}
Paulo Vaz
© Todos os direitos reservados 2026.
); } // ───────────────────────────────────────────────────────────── // DESKTOP // ───────────────────────────────────────────────────────────── function DesktopLinksPage() { return (
{/* Main split */}
{/* LEFT — editorial photo + name + tagline */}
{/* Kicker */}
psicólogo instrutor de mindfulness
{/* Big name */}
Paulo
Vaz
{/* Photo */}
Paulo Vaz
{/* frame caption */}
CRP — 06/206437
@opaulo.vaz
{/* Tagline editorial */}
Atenção Plena , Segurança e Direção clínica .
{/* RIGHT — credentials + links */}
{CREDENTIALS.map((c, i) => (
{c}
))}
Conheça os caminhos
{LINKS.map((l, i) => )}
{/* Big editorial footer quote */}
atenção , prática
& clínica em mindfulness .
{/* Footer */}
Paulo Vaz · CRP 06/206437
© Todos os direitos reservados 2026.
); } // Export to window Object.assign(window, { MobileLinksPage, DesktopLinksPage, LinkCard, Credentials, Marquee, Arrow, SocialIcon, SocialButton, SocialRow, SectionLabel, GlobalStyles, PV_COLORS: { COFFEE, CHAMPAGNE, YELLOW, BALSAMIC, CHAMP_SOFT }, });