Este mini projeto consiste na criação de um card interativo de produto, inspirado no design de um tênis Nike Air Max 90. O objetivo é desenvolver uma interface que destaque informações relevantes do produto, como nome, descrição, preço, avaliações e um botão de compra.

🤓 Antes de começar

Certifique-se de ter o ambiente configurado com Node.js e um projeto React com TailwindCSS instalado.

🔨 Requisitos

Criar um card de produto com as seguintes informações:

• Imagem do produto
• Nome do produto
• Descrição curta
• Avaliação com estrelas e nota média
• Preço destacado
• Botão de compra chamativo
• Indicação de frete grátis

👀 Dicas:

• Utilize TailwindCSS para o layout responsivo.

• Para as estrelas de avaliação, utilize o ícone de estrela preenchida e vazia.

  🔨 Desafio extra para quem quer ir além

• Adicionar animação ao passar o mouse sobre o botão de compra.

• Implementar a mudança de cor da estrela de acordo com a nota da avaliação.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

React

• Componentização

• Manipulação de eventos

  TailwindCSS

• Estilização de componentes

• Layouts responsivos

Pré requisitos

• Conhecimento básico de React

• Noções básicas de TailwindCSS