💻 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

• Item 1
• Item 2
• Item 3

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