[DASHBOARD Q.A - LOGIN] Telas de Média Fidelidade

[GabrielAderaldo]

entrega contempla a montagem de uma página funcional (PAGE) que segue rigorosamente o layout da tela de baixa fidelidade, mas com posicionamento real dos elementos e todos os componentes já montados com placeholders e mock data.

Pense como um esqueleto funcional: todos os elementos estão no lugar certo, os tamanhos estão definidos, mas ainda não existe estilo, cor ou texto real.

O objetivo dessa tela é permitir que o desenvolvedor já consiga codificar toda a estrutura funcional, mesmo que o visual esteja neutro (ex: quadrados cinzas, textos "Lorem ipsum", botões genéricos).

---

🧱 Deve conter:

• Uma PAGE com os seguintes elementos já posicionados:
  • Logo da aplicação (placeholder)
  • Título e subtítulo genérico
  • Botão “Entrar com GitHub” (com tamanho e posição corretos)
  • Espaço para mensagem de erro
  • Simulação de loading
  • Mensagens de estados (com placeholder: “mensagem de erro aqui”, “carregando...”)
• Layouts prontos para:
  • Mobile
  • Desktop
  • Tablet
• Responsividade mínima testada (colapsar layout com breakpoints)
• Margens, paddings e alinhamentos iguais ao esperado no produto final

---

🔍 Exemplo visual (referência usada):

A estrutura deve seguir o padrão visual de média fidelidade demonstrado na imagem abaixo (sem cores, com blocos):

---

🎯 Objetivo prático da tela:

• Ser uma base de codificação para os devs
• Permitir testes de acessibilidade e navegação de forma real
• Validar as regras de layout e ocupação de espaço
• Simular os estados lógicos que virão depois (loading, erro, inativo)

---

📌 Lembretes:

Important

Tudo que foi definido na tela de baixa fidelidade deve existir aqui, com os mesmos fluxos, apenas visualmente mais estruturado.

Tip

Essa tela não precisa de cores, ícones finais ou fontes reais — o foco é layout, estrutura e clareza da experiência do usuário.

• Se algo visual estiver mal posicionado ou gerando dúvida, consultar o card 1 ou o P.O.
• Se surgir a necessidade de alterar o fluxo, isso deve ser conversado antes com o P.O.

---