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!

Participantes do desafio