Header - Copy this React, Tailwind Component to your project
Plataforma CapyMind – Estrutura Completa com Ajustes 1. Página Inicial (Landing Page) Objetivo: Apresentar a CapyMind, gerar confiança e incentivar contato ou cadastro. Seções e Elementos: Header fixo Logo CapyMind à esquerda. Menu (Início, Sobre, Funcionalidades, Contato, Login). Hero Section Fundo em azul bebê (#A6D9F5) com ilustração grande de uma capivara sorrindo e segurando um caderno. Texto de destaque: “CapyMind – Desenvolvendo Soft Skills com Empatia e Tecnologia”. Botões: “Conhecer mais” (pêssego claro) e “Começar Agora” (coral pálido). Sobre a Empresa (Missão, Visão e Valores) Layout em três colunas, cada uma com um ícone/ilustração de capivara temático: Missão: Capivara ajudando outra (representando apoio). Visão: Capivara olhando para o horizonte com binóculos. Valores: Grupo de capivaras juntas (representando colaboração). Funcionalidades Principais Cards com título, texto breve e ícone/ilustração minimalista de capivara representando: Avaliação Socioemocional. Calendário Emocionante. Relatórios e Insights. Depoimentos/Impacto Fundo azul lavanda, frases curtas de alunos e coordenadores com pequenas capivaras no canto dos cards. Seção de Contato Formulário simples (Nome, Email, Mensagem). Ilustração de capivara digitando em um notebook. Rodapé Links úteis, redes sociais, e logo pequeno da CapyMind. 2. Área de Login Objetivo: Facilitar a entrada de diferentes tipos de usuários. Layout: Tela centralizada, fundo com gradiente azul bebê → azul lavanda, logo no topo. Dois botões de escolha inicial: Sou Aluno (ícone de capivara com mochila). Sou Professor/Coordenador (ícone de capivara com óculos e prancheta). Após selecionar, o formulário aparece (email + senha + “Esqueci minha senha”). 3. Dashboard do Aluno Topo: Saudações personalizadas + mini capivara acenando. Seções: Última emoção registrada (ícone + cor). Atalhos: “Registrar Emoção de Hoje” e “Fazer Avaliação”. Gráficos simples mostrando evolução emocional e progresso de habilidades. 4. Avaliação Socioemocional Página inicial: Ilustração de capivara estudando. Questionário com escala Likert (1–5) colorida. Barra de progresso no topo. Resultados com gráfico radar e capivara comemorando ao lado. 5. Calendário Emocionante Visão do Aluno: Calendário com cores/ícones de emoções. Ao clicar no dia, modal com seleção de emoção, comentário e justificativa. Contador de sequência com capivara correndo (“Você está no dia 5 seguido!”). Visão do Coordenador: Lista de alunos e calendários acessíveis (identificados ou alertas para anônimos). Botão de mensagem direta em casos críticos. 6. Relatórios Aluno: Histórico visual + recomendações. Coordenador: Relatório da turma e individuais, com filtros e exportação. Capivara com gravata segurando gráficos no canto para dar tom lúdico.
