Fundador da Insany Design | Senior UI Designer | Criador do uiBoost

Gilberto Prado

O tema é uma landing page da empresa blizzard, nessa página o dev deverá construir um menu de navegação, a seção banner hero com a funcionalidade de alterar o jogo destaque(Diablo, HearthStone e World of Warcraft), a listagem dos principais jogos da empresa e um rodapé contendo informações sobre o download do app battle.net.

Você pode usar qualquer ferramenta(linguagem de programação, stack, lib) para ajudá-lo a completar o desafio, não será avaliado o código, mas sim a fidelidade ao layout e a implementação das funcionalidades solicitadas. Então, se você tem algo que gostaria de praticar, sinta-se à vontade.

Para deixar o desafio mais justo o layout e os requisitos foram separados em três níveis de dificuldade(fácil, médio e difícil). Ao selecionar uma dificuldade você deverá considerar a implementação dos requisitos das dificuldades anteriores, ou seja, se optar pela dificuldade média, deverá levar em conta todos os requisitos da dificuldade fácil e caso prefira a dificuldade difícil, deverá levar em conta todos os requisitos da dificuldade fácil e médio.

Agora veja os requisitos de cada dificuldade:

Criar as seções: Menu, Banner hero, Footer.

O texto e o ícone do botão “Baixar jogo” devem ser alterados conforme o sistema operacional do usuário que estiver acessando a página. (material de apoio) (componente no figma)

Aplicar efeito de hover nas opções do menu de navegação.

Aplicar responsividade para as seguintes resoluções: 1920px, 1440px, 768px e 375px.

Criar as seções: Menu, Banner hero, Jogos Exclusivo, Footer.

Buscar a lista de jogos via api. (acessar endpoint)

Aplicar efeito de hover nas imagens dos jogos da seção Jogos Exclusivos.

Alterar as informações da seção Banner Hero ao selecionar uma opção no menu lateral. Os jogos disponíveis são Diablo, HearthStone e World of Warcraft. (componente no figma)

Todos os requisitos do nivel fácil e médio.

Ao clicar no botão Logar do menu de navegação, deverá ser exibido o modal de login. (componente no figma)

Criar componente de dropdown para as opções Jogos e Esportes do menu de navegação. (componente no figma)

Deverá ser executado um gif do jogo quando ocorrer o evento de hover ou click na capa do trailer. (baixar gifs)

Com o objetivo de gerar menos dúvidas, foi gerado um protótipo navegável, nele você pode testar o menu dropdown, modal de login, evento para alterar o jogo destaque e o efeito de hover no trailer do jogo, clique aqui para visualiza-lo.

Foi criado um repositório template no github com os assets e um README de base, clique aqui para usar esse template.

Blizzard

Participantes do desafio