diff --git a/REQUISITOS.md b/REQUISITOS.md index e0e5ab2..4f512f2 100644 --- a/REQUISITOS.md +++ b/REQUISITOS.md @@ -2,35 +2,29 @@ Aqui estão os requisitos que serão avaliados: -## Header - +# Requisitos obrigatórios para todos os componentes: - [ ] Replicar os estilos do layout no Figma em cada breakpoint - [ ] ultra wide - [ ] desktop - [ ] tablet - [ ] mobile -- [ ] deve manter a responsividade entre os breakpoints +- [ ] deve manter a responsividade entre os breakpoints +- [ ] os textos devem estar iguais ao layout +- [ ] Se no layout conter algum efeito de hover ou focus, deve ser replicado. Porem qualquer elemento que seja interativo deve ter um efeito +- [ ] Os seletores de test-id deve estar nos elementos html que cotem o estilo e funcionalidade esperada (ex: se voce esta desenvolvendo um link, o test-id deve estar na tag `` e todos os estilos e funcionalidades devem ser aplicados nessa tag, se for um campo de formulario o test-id deve estar na tag `` e assim por diante) +## Header +![](https://i.imgur.com/TbG0PLi.png) +- [ ] todos os requisitos obrigatórios ### Header - Logo -- [ ] Replicar o tamanho para cada breakpoint - - [ ] ultra wide - - [ ] desktop - - [ ] tablet - - [ ] mobile +![](https://i.imgur.com/Ev494Lm.png) +- [ ] todos os requisitos obrigatórios - [ ] deve conter textos alternativos para a logo - [ ] deve conter um link para a home ("/") -- [ ] algum efeito de hover ao passar o mouse sobre a logo ### Header - Search Bar -- [ ] Replicar os estilos do layout no Figma em cada breakpoint - - [ ] ultra wide - - [ ] desktop - - [ ] tablet - - [ ] mobile -- [ ] a estilização deve ser feita no tag input (textos, cores, espaçamentos) +- [ ] todos os requisitos obrigatórios - [ ] texto de placeholder deve ser o mesmo do layout -- [ ] deve manter a responsividade entre os breakpoints -- [ ] ao passar o mouse sobre o ícone de busca, deve haver um efeito. - [ ] devo conseguir fazer a submissão do formulário clicando no o botão de busca ou com o apertando da tecla enter - [ ] ao fazer a busca o usuário deve ser redirecionado para a página com o resultado da busca - nao precisa implementar a pagina de resultado, apenas o redirecionar com a url correta @@ -40,34 +34,115 @@ Aqui estão os requisitos que serão avaliados: - esse padrão e' conhecido como query string ### Header - Login -- [ ] Replicar os estilos do layout no Figma em cada breakpoint - - [ ] ultra wide - - [ ] desktop - - [] tablet - - [ ] mobile -- [ ] deve manter a responsividade entre os breakpoints +![](https://i.imgur.com/e0xzFTS.png) +- [ ] todos os requisitos obrigatórios - [ ] deve conter um link para a página de login (`"/login"`) -- [ ] dever ter um efeito de hover ao passar o mouse sobre o link ### Header - Cart -- [ ] Replicar os estilos do layout no Figma em cada breakpoint - - [ ] ultra wide - - [ ] desktop - - [ ] tablet - - [ ] mobile -- [ ] deve manter a responsividade entre os breakpoints +![](https://i.imgur.com/MZNisFR.png) +- [ ] todos os requisitos obrigatórios - [ ] ao clicar no botão de carrinho, deve redirecionar para a página de carrinho (`"/cart"`) -- [ ] dever ter um efeito de hover ao passar o mouse sobre o botão ### Header - menuBottom -- [ ] Replicar os estilos do layout no Figma em cada breakpoint - - [ ] ultra wide - - [ ] desktop - - [ ] tablet - - [ ] mobile -- [ ] deve manter a responsividade entre os breakpoints +![](https://i.imgur.com/iYEk95u.png) +- [ ] todos os requisitos obrigatórios - [ ] Os links devem conter efeitos de hover - [ ] A url para os textos deve ser: - [ ] "Cursos" -> "/Cursos" - [ ] "Saiba mais" -> "/saiba-mais" - [ ] "Institucional" -> "/institucional" + + ## BreadCrumb + ![](https://i.imgur.com/fQ5IMGD.png) +- [ ] todos os requisitos obrigatórios +- [ ] o link da home deve conter um link para a home ("/") +- [ ] o ultimo deve ser o nome da categoria atual ( ex: se estamos na pagina de contato, o ultimo link deve ser "Contato" ) + +## Titulo da pagina +![](https://i.imgur.com/muYCdak.png) +- [ ] todos os requisitos obrigatórios +## Menu Lateral +![](https://i.imgur.com/Noj1NTU.png) +- [ ] todos os requisitos obrigatórios +- [ ] cada um dos links um link para cada pagina sendo: + - [ ] sobre -> "/institucional/sobre" + - [ ] Fomas de pagamento -> "/institucional/formas-de-pagamento" + - [ ] Entrega -> "/institucional/entrega" + - [ ] Trocas e devoluções -> "/institucional/trocas-e-devolucoes" + - [ ] Segurança e privacidade -> "/institucional/seguranca-e-privacidade" + - [ ] contato -> "/institucional/contato" +- [ ] deve ficar selecionado o link da pagina atual + +## Textos das paginas +![](https://i.imgur.com/lfeVzDE.png) +- [ ] todos os requisitos obrigatórios +- [ ] o titulo deve se atualizar de acordo com a pagina +- [ ] o texto poder ser o lorem ipsum + +## Formulario de contato +![](https://i.imgur.com/FHRSDGx.png) +- [ ] todos os requisitos obrigatórios +- [ ] os placeholders devem ser os mesmos do layout +- [ ] deve validar para todos os campos serem obrigatórios +- [ ] deve existir algum tipo de mascara nos campos (cpf, data de nascimento, telefone, Instagram) onde a pessoa nao tenha que digitar os caracteres especiais +- [ ] Em caso de erro, deve exibir uma mensagem de erro como no layout +- [ ] Em caso de sucesso, deve limpar os campos e exibir uma mensagem de sucesso como no layout +- [ ] Deve escolher o melhor tipo de input para cada campo + +## Newsletter +![](https://i.imgur.com/saTmWFA.png) +- [ ] todos os requisitos obrigatórios +- [ ] ao submeter o formulário, deve exibir uma mensagem de sucesso como um alert +- [ ] deve validar para o campo ser obrigatório +- [ ] deve validar para o campo ser um email valido +- [ ] caso o email seja invalido, deve exibir uma mensagem de erro como no layout + +## Footer +![](https://i.imgur.com/Ik3mZBT.png) +- [ ] todos os requisitos obrigatórios +### Footer - menu +![](https://i.imgur.com/VlbFKif.png) +- [ ] todos os requisitos obrigatórios +- [ ] os seguintes textos devem ter os seguintes links + - [ ] "Institucional" -> "/institucional" + - [ ] "Quem somos" -> "/institucional/quem-somos" + - [ ] "Política de privacidade" -> "/institucional/politica-de-privacidade" + - [ ] "Segurança" -> "/institucional/seguranca" + - [ ] "seja um vendedor" -> "/institucional/seja-um-vendedor" + - [ ] "Entrega" -> "/institucional/entrega" + - [ ] "Pagamento" -> "/institucional/pagamento" + - [ ] "Trocas e devoluções" -> "/institucional/trocas-e-devolucoes" + - [ ] "Dúvidas frequentes" -> "/institucional/duvidas-frequentes" +- [ ] Os dois números de telefone devem ter o link para num formato dinâmico. Sendo o numero Atendimento ao consumidor num formato de ligação e o numero de atendimento online num formato de link para o WhatsApp +- [ ] Na versão mobile deve transformar o menu em um toggle. Ao clicar no texto ou no icone, deve abrir o menu com as opções + +### Footer - social +![](https://i.imgur.com/UCT7dJW.png) +- [ ] todos os requisitos obrigatórios +- [ ] os links devem ser: + - [ ] "Facebook" -> "https://www.facebook.com/m3Academy" + - [ ] "Instagram" -> "https://www.instagram.com/m3Academy/" + - [ ] "Twitter" -> "https://twitter.com/m3Academy" + - [ ] "Youtube" -> "https://www.youtube.com/@m3academy392" + - [ ] "Linkedin" -> "https://www.linkedin.com/m3Academy" +- [ ] os site deve abrir em uma nova aba ao serem clicados +- [ ] cada um dos socialIcon deve ter a sua variacao de test id com o nome nome da rede social (ex: testid="footer_socialIcon--facebook", ou testid="footer_socialIcon--instagram") + +### Footer - Bottom +![](https://i.imgur.com/l4q3tBc.png) +- [ ] todos os requisitos obrigatórios + +### Footer - Bottom - CopyRight +![](https://i.imgur.com/3S2ZTUG.png) +- [ ] todos os requisitos obrigatórios + +### Footer - Bottom - Payment +![](https://i.imgur.com/cAKZOLs.png) +- [ ] todos os requisitos obrigatórios + +### Footer - Bottom - Autores +![](https://i.imgur.com/b9m7ZtX.png) +- [ ] todos os requisitos obrigatórios +- [ ] os links devem ser: + - [ ] "powered by vtex" -> "https://vtex.com/br-pt/" + - [ ] "Developed by m3" -> "https://m3ecommerce.com/" \ No newline at end of file