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