Esse projeto é uma landing page da empresa Blizzard, ela é composta por um menu de navegação, um banner hero com as informações dos principais jogos da empresa(Diablo, HearthStone e World of Warcraft), a listagem dos jogos exclusivos e um rodapé com informações do download do app battle.net.
Para facilitar a codificação do projeto foi usado um protótipo do figma como base, o autor do layout é o design Gilberto Prado, clique aqui para saber mais detalhes do desafio.
O objetivo deste desafio é criar uma landing page que apresente os principais jogos da empresa Blizzard, conforme detalhado na página do desafio no site BRChallenges. Utilizarei as tecnologias listadas abaixo para garantir que todas as funcionalidades e requisitos propostos pelo desafio sejam contemplados.
HTML5: Para a estrutura e layout da interface do jogo.
CSS3: Para estilizar e tornar o jogo visualmente atraente com animações e transições.
JavaScript: Para adicionar funcionalidade e lógica ao jogo.
React.js: Para criar uma experiência de usuário responsiva e interativa.
Material-UI: Biblioteca de componentes React utilizada para implementar o design com base no Material Design da Google, proporcionando uma UI consistente e moderna.
Saas: Utilizado para escrever estilos CSS de forma mais eficiente e organizada, aproveitando recursos como variáveis e aninhamento.
Typescript: Adicionado para adicionar tipagem estática opcional ao JavaScript, aumentando a robustez e a escalabilidade do código.
Axios: Cliente HTTP baseado em Promise utilizado para fazer requisições HTTP de forma simplificada e eficiente para a conexão com a API.
-
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)
-
Aplicar efeito de hover nas opções do menu de navegação.
-
Aplicar responsividade para as seguintes resoluções: [x] 1920px, [x] 1440px, [x] 768px e [x] 375px.
-
Todos os requisitos do nivel fácil.
-
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.
-
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.
-
Criar componente de dropdown para as opções Jogos e Esportes do menu de navegação.
-
Deverá ser executado um gif do jogo quando ocorrer o evento de hover na capa do trailer
|
Anthony Marin (Sub-Dev) - Perfil no GitHub |
Obrigado ao BRChallenges pelo desafio envolvente que inspirou este projeto e ao Gilberto Prado pelo design base Agradecimentos especiais à comunidade de código aberto pelos recursos e ferramentas inestimáveis que tornaram este projeto possível.
- Live Demo: Veja o Projeto aqui
- Link do desafio: Desafio BRChallenges
- Repositório: Repositório no GitHub