Leia atentamente até o final.
Nossa avaliação tem como foco analisar o candidato no desenvolvimento do front-end da página proposta. Avaliamos qualidade de código, versionamento, uso de automatizadores, uso de pré-processadores e javascript(vanilla, jquery, react e etc).
OBS.: Evite bootstrap e outros similares, pois queremos avaliar o seu código na implementação dos itens.
Link do layout a ser desenvolvido: https://www.figma.com/file/fcy8mdkluclGRQ4GqaVObN/Avalia%C3%A7%C3%A3o-Front-end-PLENO?node-id=1202%3A0
- Fork o repositório e inicie o desenvolvimento;
- Desenvolva o layout com atenção aos detalhes e a responsividade.
Finalizando esses itens você terá terminado a etapa 01 da avaliação.
OBS.: Interações e funcionalidades não sugeridas no layout serão levadas em consideração. Atenção aos detalhes do layout.
-
O banner principal é do tipo slider e possui uma navegação na direita, no crop de desktop, e abaixo do banner, no crop de mobile. Precisamos que ao navegar o nome e a paginação nessa área sejam atualizados. OBS.: Você não precisa fazer o slider do zero. Utilize plugins como slick, swiper ou qualquer outro para fazer esse item do projeto.
-
Menu. Sempre que clicarmos ou no hover do ícone de menu hambúrguer precisamos exibir o menu. OBS.: O menu tem nome de "Nav" e está oculto nas camadas do projeto.
-
Quando o usuário clicar no botão de comprar, na prateleira, precisamos que exiba o lightbox de produto adicionado e o botão de compra deve ficar sinalizado como item comprado. OBS.: O Lightbox tem nome de "Purchase success" e está oculto nas camadas do projeto.
-
Junto com a ação de exibição do lightbox atualize a quantidade de itens na sacola presente na direita header.
Finalizando esses itens você terá terminado a etapa 02 da avaliação.
- Caso os produtos em destaque tenham sido feitos estáticos, precisamos que modifique para que seus dados venham de uma api ou um JSON e sejam exibidos dinamicamente na página. Dessa forma, caso eu cadastre um novo produto no JSON a página também o exibirá.
Temos algumas funcionalidades que estão no layout e precisamos que sejam desenvolvidas:
-
MINICART. Não colocaremos nenhuma obs, pois queremos ver como você desenvolve o layout da melhor maneira possível. Deixamos algumas pegadinhas / pontos de melhoria. Outra coisa é que o formulário de cálculo de CEP sempre dará frete grátis, mas a consulta do endereço deve ser dinâmica via API(viacep).
-
Dicas de Games: Os dados também precisam vir dinâmicos. Precisamos alterar as informações quando clicarmos no select. As opções do select serão: mmorpg, shooter e pvp. Segue a API: https://www.freetogame.com/api-doc.
OBS. 01: O candidato está livre para trabalhar com a estrutura e tecnologia que preferir, exceto bootstrap e similares.
OBS. 02: Finalizando a prova envie o link do fork para o e-mail: rafael.augusto@agencian1.com.br.