Tiago Alves

Esse projeto é uma landing page de uma hamburgueria fictícia chamada Empire Burger, nela há seções sobre as ofertas especiais, horário de funcionamento, cardápio contendo os ingredientes e preços, cards com os feedbacks dos clientes e a localização do estabelecimento. O seu desafio é construir este layout e deixá-lo o mais próximo possível do design.

Você pode usar qualquer ferramenta que deseja 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 tentar.

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

Agora vamos para os critérios de aceite(funcionalidades):

Criar as seguintes seções: Menu, Banner hero, Ofertas especiais, Onde fica o nosso castelo, Footer.

Ao clicar em um item do menu, o usuário deverá ser levado para a seção correspondente. (material de apoio)

Na seção Ofertas especiais os elementos devem ser organizados com o uso da propriedade display:grid do css. (material de apoio)

As informações do card da oferta(nome do prato e gramagem) devem estar no html, a única imagem deve ser a foto do prato com o preço.

Na seção Onde fica o nosso castelo você deverá incorporar uma localização do google maps.  

Criar as seguintes seções: Cardápio, Atendimento, Nossas entregas.

Na seção Cardápio os preços devem ser formatados com o método Intl.NumberFormat. (material de apoio)

O card Horário de funcionamento deverá ter os estados aberto e fechado, o estado será alterado conforme o horário do navegador do usuário. (material de apoio)

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

Criar as seguintes seções: Nossa realeza, Publicações do instagram.

Buscar a lista de itens do cardápio via api. (acessar endpoint)

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

Na seção Nossa realeza os depoimentos deverão estar em um carrousel funcional.

O texto de cada depoimento deverá estar limitado em quatro linhas, você pode usar a propriedade clamp do css. (material de apoio)

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

Empire Burger

Ana Maria Almeida

Neste desafio, você será responsável por fazer o redesign do site da empresa Paquetá Calçados. A Paquetá Calçados é uma renomada marca de calçados que busca expandir sua presença online e oferecer aos seus clientes uma experiência digital atraente e funcional.

Seu objetivo é desenvolver o site que apresenta os produtos da loja, bem como informações sobre a empresa, carrinho de compras e a página do produto. O desafio foi dividido em três níveis de dificuldade: fácil, médio e difícil. Além disso, você terá um layout no Figma como referência para seguir durante o desenvolvimento.

Aqui estão alguns requisitos que você deve cumprir ao criar o site:

Criar todas a seções da Homepage(versão simples). (componente no figma)

Usar a propriedade object-fit: cover para posicionar a imagem do banner hero.  (componente no figma)

Criar o efeito gradiente nas imagens Calçados Femininos e Calçados Masculinos. Dica: você pode carregar a imagem através da propriedade background-image e adicionar um segundo paramêtro com a função linear-gradient. (material de apoio)

As logos da seção Marcas, deverão estar espaçadas com o uso da propridade justify-content: space-between. (material de apoio)

Criar todas a seções da Homepage(versão completa). (componente no figma)

Todos os produtos devem ser listado de forma dinâmica atráves do endpoint api/paqueta/shoes da API. (acessar endpoint)

No card do produto deverá conter a flag produto esgotado caso a propriedade soldout seja igual a true. (componente no figma)

Criar um carrousel para navegar na listagem dos produtos, por padrão será mostrado quatro produtos.

Criar efeito de hover ao passar o mouse por cima do botão Comprar, localizado no card do produto. (material de apoio)

Todos os requisitos do nível fácil e médio.

Construir a tela do produto de forma dinâmica ao consumir os dados via API. Nome do endpoint: api/paqueta/shoe/id_shoe. (acessar endpoint)

Ao clicar no botão Comprar, o produto deverá ser adicionado no carrinho de compras. Como o carrinho está em outra tela, você pode usar o localstorage para armazenar os produtos do carrinho. (material de apoio) 

Ao clicar no ícone de coração, o produto será adicionado na lista de favoritos e o ícone de coração deverá mudar de estado.

Ao clicar em um tamanho de sapato, deverá alterar o estilo do botão para ativo. (componente no figma)

Na tela do produto, o valor do produto deverá ser calculado de forma dinâmica caso a propriedade price.discount esteja preenchida, o valor original deverá conter um strike e ao lado será exibido um balão com a porcentagem do desconto(price.discount * 100) e logo abaixo será exibido o novo valor do produto.

Ao clicar no botão Guia de tamanhos, deverá ser exibido o modal com as informações de cada tamanho de sapato. (componente no figma)

Lembre-se de seguir as melhores práticas de desenvolvimento web. Você pode usar qualquer ferramenta que deseja 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. 

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

Sinta-se à vontade para adicionar recursos adicionais ao site que possam enriquecer a experiência do usuário. Mostre suas habilidades de programação web e criatividade ao criar o site da Paquetá Calçados!

Paquetá Calçados

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.

Empire Burger

Paquetá Calçados

Blizzard