[RESPONSIVIDADE] Home Page - Barra de Navegação + Seção Hero + Passo a Passo

[akirashimazu]

No description provided.

[LucianoDev10]

https://www.figma.com/file/HGa6jj4gz4MXyardmDjQ9z/Projeto%3A-Mentoria_Julho-2023?type=design&node-id=6162-36116&mode=design&t=7LgxkGs3VvfGfvlc-0

===============
Nome: User Story - Responsividade na Página home
Sobre: User Story de responsividade entre as sessões da página home

Título: Como um usuário, desejo ter uma experiência consistente ao acessar diferentes tipos de telas, mantendo o mesmo design em todas elas.

Descrição:
Para garantir a responsividade, é essencial que o usuário (mentor ou mentorado) acesse a página inicial. A página inicial deve apresentar um design padronizado, mantendo a consistência visual em desktops, tablets e smartphones.

Protótipos:
Links dos protótipos:

(Imagem 1)

(Imagem 2)

(Imagem 3)

(Imagem 4)

Critérios de Aceite:

1. Alteração no design da tela mobile
   Quando o usuário acessar a página inicial, conforme a Imagem 1, o sistema executará esta User Story.
   Todas as seções da página inicial, incluindo Barra de Navegação, Seção Hero e Passo a Passo, devem permanecer iguais à Imagem 1 em desktops e tablets. A única diferença deve ser na tela de mobile.
   Na tela de mobile, a Barra de Navegação (header) deve ser ajustada, exibindo apenas o logo da SouJunior e o ícone "Bars" como na Imagem 2.
   Ao clicar no ícone "Bars", todos os componentes devem ser exibidos verticalmente dentro de um modal, semelhante às telas de tablet e desktop. Isso inclui "Como funciona", "Encontre seu mentor" e os botões "Login mentores" e "Cadastro mentores".

2. Alterações no Design das Tags (Imagem 4):
   As tags da seção "Encontre seu mentor" devem ter bordas mais arredondadas.
   A cor de fundo das tags deve ser #F5F1F3.
   A cor da fonte deve ser preta #001633.
   O botão abaixo deve ter a cor #003986.
   Esses critérios garantem uma experiência de usuário consistente e responsiva em diferentes dispositivos, ao mesmo tempo em que incorpora melhorias estéticas nas tags da seção "Encontre seu mentor".

DoR

O item ter sido refinado seguindo o modelo de User Story.

A User Story deverá ter pelo menos um critério de aceite.

A User Story deverá ter pelo menos uma referência visual (Ex: Protótipo, Fluxograma e etc...).

A User Story deverá apresentar o seu módulo de referência: Mentor ou Mentorado.

Ter sido validado pelo mentor.

DoD

Documentar ferramentas, documentação e ambientes necessários para realização de teste.

Execução de testes unitários.

Revisão do código do Pull request validado pelo mentor e por outro membro do time de desenvolvimento.

Critérios de aceite verificados, testados e validado.

Teste de software criados, executados e validados pelo QA.

Garantir que todas as etapas planejadas foram atendidas/concluídas.

[LucianoDev10]

@DanielDefault1

[DanielDefault1]

@LucianoDev10 algumas observações:

• Não precisa escrever a definition of ready e nem a definition of done as US. Elas são universais, então não precisam ser colocadas no card da US.
• Não esqueça de mover a US para a coluna de "validation" quando ela estiver pronta para eu validar.
• Enumere os critérios de aceite para que haja clara distinção entre eles. Você também pode usar elementos extras de formatação, como sublinhado, negrito, itálico etc. Tudo em favor da clareza quanto a cada requisito e critério.
• Não esqueça de linkar os protótipos nesse card e, de preferência, faça uma demonstração com eles durante a planning.
• Cuidado com o uso de alguns termos que podem não ser conhecidos por todo mundo, como por exemplo o tal do menu "hamburguer", lembre-se de explicar claramente a qual elemento da tela você está se referindo com essa expressão.

[hudson-viana]

Estou com a responsabilidade de revisar essa task para ver o status atual pois a equipe mudou e estamos revisando os cards do board.

• revisei a task-197 que é a única task referente a essa US atual
• task-197 foi resolvida no PR-196
• revisei com base nos critérios de aceite (tanto no desktop, tablet e mobile)

---

Em relação a...

Todas as seções da página inicial, incluindo Barra de Navegação, Seção Hero e Passo a Passo, devem permanecer iguais à Imagem 1 em desktops e tablets. A única diferença deve ser na tela de mobile.

• APM pediu que fossem iguais, mas dev melhorou o design do tablet o tornando mais reponsivo e bonito. Por favor peço ao QA decidir se o novo design será aprovado.

---

Em relação a...

Na tela de mobile, a Barra de Navegação (header) deve ser ajustada, exibindo apenas o logo da SouJunior e o ícone "Bars" como na Imagem 2.

• dev fez conforme APM pediu, porém existe apenas um bug pequeno no design que não atrapalha a usabilidade, então foi aberto um card de bug separado pois não impede andamento da US. bug-203

---

Em relação aos outros critérios-de-aceite eles foram antendidos sim.

---

Com isso movi essa US de 'sprint backlog' para 'pronta para testes'. (pois existia somente uma única task e essa task foi realizada).