Leia atentamente até o final.

Nossa avaliação tem como foco analisar o candidato no desevolvimento do front-end da página proposta. Avaliamos qualidade de código, versionamento, uso de automatizadores, uso de preprocessadores e javascript(vanilla, jquery ou react).

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 desevolvimento;
• 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 prinicipal é 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 páginação nessa área sejam atualizados. OBS.: Você não precisa fazer o slider do zero. Utilize plugins como Slick, Owl carousel ou qualquer outro para fazer esse item do projeto.

• Menu. Sempre que clicarmos/ou no hover no ícone de menu hamburguer precisamos exibir o menu. OBS.: O menu tem nome de "Nav" e está oculto nas camadas do projeto.

• Quando 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 exbidos dinâmicamente 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 pegadinha / 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 esta 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: [email protected].