M3-Academy-Public/desafio-pontos-turisticos
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
e8e7476c59
desafio-pontos-turisticos/REQUISITOS.md

6.8 KiB
Raw Blame History

Requisitos do projetos

Aqui estão os requisitos que serão avaliados:

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
  • 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 <a data-testid="link"> e todos os estilos e funcionalidades devem ser aplicados nessa tag, se for um campo de formulario o test-id deve estar na tag <input data-testid="input..."> e assim por diante)

Header

  • todos os requisitos obrigatórios

  • todos os requisitos obrigatórios
  • deve conter textos alternativos para a logo
  • deve conter um link para a home ("/")

Header - Search Bar

  • todos os requisitos obrigatórios
  • texto de placeholder deve ser o mesmo do layout
  • 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
    • para o termo "iphone" deve redirecianar para a url /search?q=iphone
    • para o termo "iphone vermelho" deve redirecianar para a url /search?q=iphone%20vermelho
    • esse padrão de url deve ser seguido para todos os termos de busca
    • esse padrão e' conhecido como query string

Header - Login

  • todos os requisitos obrigatórios
  • deve conter um link para a página de login ("/login")

Header - Cart

  • todos os requisitos obrigatórios
  • ao clicar no botão de carrinho, deve redirecionar para a página de carrinho ("/cart")

Header - menuBottom

  • 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

  • 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

  • todos os requisitos obrigatórios

Menu Lateral

  • 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

  • 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

  • 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

  • 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

  • todos os requisitos obrigatórios

Footer - menu

  • 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

Footer - Bottom

  • todos os requisitos obrigatórios

Footer - Bottom - CopyRight

  • todos os requisitos obrigatórios

Footer - Bottom - Payment

  • todos os requisitos obrigatórios

Footer - Bottom - Autores