Paquetá Calçados
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:
Nível Fácil:
- 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)
Nível Médio:
- Todos os requisitos do nível fácil.
- 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)
Nível Difícil
- 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!
Boa sorte e divirta-se codificando!
