// Trainer Connect — Landing Page (trainerconnect.fit) // Design system: tokens.css + components.css · Dark-first · Acento branco signature // Fontes: Inter Tight (display) · Inter (UI) · JetBrains Mono (números/métricas) // ==================================================================== // HOOKS & HELPERS // ==================================================================== const { useState, useEffect } = React; function useMedia(query, fallback = false) { const [match, setMatch] = useState(fallback); useEffect(() => { const m = window.matchMedia(query); const handler = (e) => setMatch(e.matches); setMatch(m.matches); m.addEventListener('change', handler); return () => m.removeEventListener('change', handler); }, [query]); return match; } // Mini-mockup do dashboard do personal (versão compacta para hero/passos) function MockDashboard({ scale = 1 }) { return (
Quarta · 25 abr
Olá, Fabricio
MRR
R$ 2.4k
+12% vs. mar
Alunos ativos
24
+1 nesta semana
Precisa de atenção
3
{[ { in: 'KF', name: 'Kalani Ferreira', sub: 'Pagamento · 3d', color: 'var(--tc-danger)' }, { in: 'DQ', name: 'Dário Quintela', sub: 'Sem treino · 7d', color: 'var(--tc-warn)' }, { in: 'EW', name: 'Enzo Wachtel', sub: 'Anamnese pendente', color: 'var(--tc-warn)' }, ].map((a, i) => (
{a.in}
{a.name}
{a.sub}
))}
Atividade · semana
21 / 30
{[28, 22, 32, 18, 18, 6, 6].map((h, i) => (
))}
); } // Mini-mockup da execução de treino do aluno function MockTreino({ scale = 1 }) { return (
Treino B · Peito + Tríceps
3 / 7
exercícios
03 · ATUAL
Supino reto
4 séries · 8 reps · 60s desc.
{[ { s: 1, done: true, kg: '60', reps: '8' }, { s: 2, done: true, kg: '65', reps: '8' }, { s: 3, current: true, kg: '70', reps: '—' }, { s: 4, done: false, kg: '—', reps: '—' }, ].map((set) => (
{set.done && }
Série {set.s}
{set.kg} kg
{set.reps} reps
))}
Descanso
aguarde antes da próxima
00:42
); } // ==================================================================== // 1 · HEADER // ==================================================================== function LandingHeader({ onOpenMobile }) { const isMobile = useMedia('(max-width: 768px)'); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return (
Trainer Connect {!isMobile && ( )}
{!isMobile && ( Entrar )} {!isMobile ? ( Criar conta grátis ) : ( <> Criar conta )}
); } function LandingMobileMenu({ open, onClose }) { useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); if (!open) return null; return (
Trainer Connect
Criar conta grátis Entrar
); } // ==================================================================== // 2 · HERO // ==================================================================== function LandingHero() { const isMobile = useMedia('(max-width: 900px)'); return (
{/* radial subtle */}
); } function PhoneShell({ children }) { return (
9:41
{children}
); } window.LandingHeader = LandingHeader; window.LandingMobileMenu = LandingMobileMenu; window.LandingHero = LandingHero; window.MockDashboard = MockDashboard; window.MockTreino = MockTreino; window.PhoneShell = PhoneShell; window.useMedia = useMedia;