Blizzard®
_{Desafio #2 do BRChallenges.}

▶️ Demo | Visão geral | Desenvolvimento e Testes | Atribuições | Licença

Landing page da Blizzard®, recriada para fins educativos, destinada ao Desafio do BRChallenges.

---

▶️ Demo

Acesse a página de demonstração: https://brchallenges-blizzard.vercel.app/.

📚 Visão geral

Este projeto visa à implementação do código-fonte de uma landing page da empresa Blizzard®, composta por: um menu de navegação; um banner "hero" contendo dados dos principais jogos da empresa; uma listagem dos jogos exclusivos; e um rodapé que contém informações para download do aplicativo Battle.net® da empresa.

As diferentes soluções para este desafio estão disponíveis no BRChallenges.

Para a realização deste desafio foi utilizado um protótipo Figma® como base, de autoria do designer Gilberto Prado. Mais informações estão disponíveis na página do desafio no BRChallenges.

Tecnologias

Tecnologias

• Tailwind CSS — framework e coleção de classes CSS, desenvolvido em código-aberto.
• Alpine.js — framework de código-aberto escrito em JavaScript.

Requisitos do desafio

Requisitos do desafio

Conforme descritos no repositório original do desafio:

Nível Fácil

• 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. (Acessar material de apoio).
• Aplicar efeito de hover nas opções do menu de navegação.
• Aplicar responsividade para as seguintes resoluções: 1920px, 1440px, 768px e 375px.

Nível Médio

• Todos os requisitos do nível 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®.

Nível Difícil

• Todos os requisitos dos níveis 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 reproduzido um gif do jogo quando ocorrer o evento de hover na capa do trailer.

🛠️ Desenvolvimento e Testes

Requisitos

• Git — sistema de controle de versão gratuito e de código-aberto.
• npm — coleção pública de pacotes de código-aberto para Node.js.

Instruções

1. git clone https://github.com/DaniloCeesar/brchallenges-blizzard.git — clone este repositório em um novo diretório;
2. cd brchallenges-blizzard — acesse o novo diretório que contém o código-fonte deste projeto;
3. npm install — instale as dependências, a partir do package.json, em um diretório node_modules;
4. npm run build — gere o código para o ambiente de produção em um diretório dist.

👥 Atribuições

Este projeto desenvolve e implementa tecnologias de código-aberto. Podem estar sendo utilizadas bibliotecas de terceiros, fragmentos de código-fonte, e outros recursos para ambos os ambientes de desenvolvimento e de produção.

Blizzard Entertainment e seus jogos exclusivos são marcas registradas da Blizzard Entertainment, Inc., com direitos de proteção no Brasil, Estados Unidos da América e em outros países. Este projeto não é endossado, afiliado, nem realizado pela Blizzard® ou Blizzard Entertainment.

⚖️ Licença

O código-fonte deste projeto encontra-se licenciado sob as regras de GNU General Public License v3.0. Acesse COPYING para obter mais informações.

O design original e outros recursos, incluindo as marcas protegidas de terceiros, podem não estar abrangidos por estes termos. Consulte seus respectivos autores e/ou titulares para obter mais informações.

As marcas e demais recursos de terceiros, incluindo citações e arquivos de mídia, contidos neste projeto são usados para fins meramente educativos.