Design System & Guia de Componentes
Referência visual completa com tokens oficiais HSL, tipografia Sora, botões retangulares, badges pill com contornos na mesma cor da fonte, Date Picker, Time Picker, Checkbox, Radio, Switch e Slider customizados.
Métricas Operacionais do CT
Cards analíticos com visual glassmorphism e indicadores de tendência padronizados pelo Design System.
Ocupação do Tatame & Horários de Pico
Monitoramento em tempo real da capacidade máxima das turmas e fluxo de atletas.
Identidade Visual — Nova Logo Oficial UP
Variações oficiais de aplicação da nova marca UP utilizando o azul primário do Design System e versões monocromáticas.
Para uso principal em fundos claros.
Para impressões e aplicações 1 cor.
Uso em aplicativos e atalhos.
Versão alternativa para fundos escuros.
Botões
Um único componente Button com variantes, tamanhos e estados. O texto sempre usa o foreground do token. Formato retangular com bordas levemente arredondadas (`rounded-md`).
Badges
Etiquetas de status e categorização em formato pill (`rounded-full`) compacto. Os contornos sempre acompanham a cor exata da fonte da badge conforme o padrão do Design System.
Tooltips
Rótulos flutuantes de alta visibilidade e contraste para ícones, botões de ação e navegação recolhida na Sidebar.
Formulários & Pickers
Todos os controles compartilham altura, radius, borda e foco. Inclui Date Picker com calendário popup e Time Picker moderno com seleção de horários.
Texto de ajuda opcional.
Informe um e-mail válido.
Tabela de Gestão de Alunos & Tatame
Visualização tabular com avatares, badges de graduação, status e ações rápidas.
| Aluno / Matrícula | Modalidade | Graduação / Faixa | Status | Último Check-in | Plano | Ações |
|---|---|---|---|---|---|---|
MB Marcus Buchecha marcus@bjj.com | Jiu-Jitsu | Faixa Preta | Ativo | Hoje, 08:30 | Plano Anual VIP | |
BM Beatriz Mesquita bia@fight.com | Jiu-Jitsu / No-Gi | Faixa Preta | Ativo | Hoje, 09:15 | Plano Mensal Pro | |
LM Lucas Mineiro mineiro@muaythai.br | Muay Thai & MMA | Prajied Preto | Pendente | Ontem, 19:40 | Basic 30D | |
GM Gabriel Medeiros gabriel@fighthub.app | Jiu-Jitsu | Faixa Azul 2º Grau | Inadimplente | 12/09/2026 | Basic 15D |
Navegação Segmentada & Acordeões
Estrutura de abas para filtragem rápida de turmas e acordeões colapsáveis para regras de tatame.
Feedback & Notificações (Toasts)
Disparadores de eventos de sistema com feedback sonoro e visual conforme as diretrizes de UX.
Demonstração: Tela de Login & Autenticação
Experiência de acesso dos instrutores, gestores e alunos com grid pattern de fundo e logo externa ao card.
Entrar na conta
Use seu e-mail e senha para acessar
Ao continuar, você concorda com nossos Termos de Uso.
Demonstração: Tela de Configurações do Usuário & Perfil
Card demonstrando o painel de preferências, dados cadastrais, graduação e segurança da conta do instrutor.
Ricardo Silva
Instrutor MasterPROricardo@fighthub.app • (11) 98765-4321
Certificado validado pela federação estadual.
Skeletons de Carregamento & Estados Vazios (Empty State)
Padrões oficiais para feedback de carregamento assíncrono e telas sem registros cadastrados.
Nenhum aluno cadastrado ainda
Cadastre o primeiro atleta da academia para emitir contratos, acompanhar graduações e liberar o acesso à catraca.
Nenhum check-in registrado hoje
Assim que os alunos aproximarem o QR Code ou a biometria na catraca, a presença aparecerá em tempo real aqui.
Componentes de Layout, Navegação & UI Registrados
Biblioteca de componentes de arquitetura extraídos e encapsulados em @/components/layout e @/components/ui.
Gestão de Atletas & Matrículas
Visualize, filtre e gerencie todos os alunos ativos, turmas matriculadas e histórico de graduações do tatame.