Cartão para o dia das mães

Este mini projeto consiste em criar um cartão virtual animado para o Dia das Mães. O cartão tem duas faces: na frente, uma saudação inicial e convite para abrir a mensagem especial; no verso, uma mensagem personalizada com botão para voltar. O usuário pode alternar entre as faces com animações suaves.

🤓 Antes de começar

Este projeto será desenvolvido com React, TailwindCSS e Framer Motion. Certifique-se de ter o ambiente configurado com Node.js e um projeto React iniciado com Tailwind instalado.

🔨 Requisitos

• Criar um componente de cartão com dois lados (frente e verso).

• Exibir na frente:

  • Título "Feliz Dia das Mães!"
  • Imagem da mãe (usar imagem genérica se necessário)
  • Texto de homenagem curta
  • Botão "Clique para ver a mensagem"

• Ao clicar, o cartão deve virar com animação para mostrar o verso.

  👀 Dicas:

  • Use o useState para controlar o estado "virado".

• No verso, exibir:

  • Título "Mensagem Especial"
  • Caixa com mensagem personalizada
  • Texto de assinatura
  • Botão "Clique para voltar"

🔨 Desafio extra para quem quer ir além

• Permitir personalizar a mensagem com input de texto antes de gerar o cartão.

• Salvar a imagem da mãe via upload antes de mostrar o cartão.

• Exportar o cartão como imagem.

🎨 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

• Manipulação de estado com useState
• Condicionais de renderização

TailwindCSS

• Estilização responsiva e utilitária
• Animações

Pré requisitos

• Conhecimento básico de React (JSX, props, state)
• Familiaridade com TailwindCSS
• Noções básicas de animação com Framer Motion