đź’» Projeto

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.

A autora do layout Ă© a design Ana Maria Almeida, clique aqui para saber mais detalhes do desafio.

🚀 Tecnologias

đź“ť Requisitos do desafio

Nível Fácil

  • Criar todas a seções da Homepage(versĂŁo simples).

  • Usar a propriedade object-fit: cover para posicionar a imagem do banner hero.

  • Criar o efeito gradiente nas imagens Calçados Femininos e Calçados Masculinos com o uso da propriedade linear-gradient.

  • As logos da seção Marcas, deverĂŁo estar espaçadas com o uso da propridade justify-content: space-between.

NĂ­vel MĂ©dio

  • Todos os requisitos do nĂ­vel fácil.

  • Criar todas a seções da Homepage(versĂŁo completa).

  • Todos os produtos devem ser listado de forma dinâmica atráves do endpoint /shoes da API.

  • No card do produto deverá conter a flag produto esgotado caso a propriedade soldout seja igual a true.

  • 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.

NĂ­vel DifĂ­cil

  • Todos os requisitos do nĂ­vel fácil e mĂ©dio.

  • Construir a tela do produto e consumir os dados via API.

  • 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.

  • 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.

  • 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.