🎨 Tailwind Card Collector

Uma aplicação NextJS viciante de coleção de cards baseada nas cores do Tailwind CSS 4! Colete todas as 170 cores disponíveis através de booster packs diários com sistema de raridade e animações impressionantes.

✨ Características Principais

🎲 Sistema de Cards

• 170 cards únicos baseados nas cores do Tailwind CSS 4
• 17 famílias de cores: Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose
• 10 tons por cor: 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
• Sistema de raridade baseado no tom da cor

🎁 Booster Packs

• 1 pack por dia com limitação de 24 horas
• 5 cards aleatórios por pack
• Sistema anti-duplicata: Se todos os 5 cards forem duplicatas, ganha 1 card bônus garantido
• Animações cinematográficas de abertura com efeitos de partículas

🏆 Sistema de Raridade

• 🟡 Lendário (950): 1% de chance - Os mais raros
• 🟣 Épico (900): 4% de chance - Muito raros
• 🔵 Raro (700-800): 20% de chance - Difíceis de encontrar
• 🟢 Incomum (400-600): 35% de chance - Moderadamente raros
• ⚪ Comum (100-300): 40% de chance - Mais frequentes

🎯 Funcionalidades

📚 Coleção Completa

• Grid responsivo com todos os 170 cards
• Filtros avançados: Por cor, raridade, status de coleção
• Sistema de busca: Por nome, classe CSS ou código HEX
• Placeholders visuais para cards não coletados
• Animações hover 3D em todos os cards

📊 Estatísticas Detalhadas

• Progresso geral com barra animada
• Cards por raridade com barras de progresso individuais
• Sistema de conquistas com 7 achievements únicos
• Contador de packs abertos

🎮 Gamificação

• Conquistas desbloqueáveis:
  • Primeiro Card
  • Colecionador Iniciante (25%)
  • Colecionador Intermediário (50%)
  • Colecionador Avançado (75%)
  • Mestre Colecionador (100%)
  • Caçador de Lendários
  • Abridor de Pacotes (10 packs)

🎨 Design e Animações

✨ Efeitos Visuais

• Animações de flip 3D na revelação de cards
• Efeitos holográficos para cards raros
• Partículas flutuantes nos booster packs
• Gradientes dinâmicos no background
• Micro-interações em todos os elementos

📱 Interface Responsiva

• Desktop: Grid 6-8 cards por linha
• Tablet: Grid 4-5 cards por linha
• Mobile: Grid 2-3 cards por linha
• Design consistente em todas as telas

🚀 Tecnologias Utilizadas

• NextJS 14 com App Router
• TypeScript para type safety
• Tailwind CSS para estilização
• React Hooks para gerenciamento de estado
• localStorage para persistência
• CSS Animations customizadas

🛠️ Como Executar

Pré-requisitos

• Node.js 18+
• npm ou yarn

Instalação

1. Clone o repositório

git clone <repository-url>
cd tailwind-card-collector

2. Instale as dependências

npm install
# ou
yarn install

3. Execute em modo desenvolvimento

npm run dev
# ou
yarn dev

4. Acesse a aplicação

http://localhost:3000

Build para produção

npm run build
npm start

📁 Estrutura do Projeto

src/
├── app/
│   ├── layout.tsx          # Layout principal
│   ├── page.tsx            # Página principal
│   └── globals.css         # Estilos globais
├── components/
│   ├── Card.tsx            # Componente do card
│   ├── BoosterPack.tsx     # Sistema de booster packs
│   ├── Collection.tsx      # Interface da coleção
│   ├── ProgressBar.tsx     # Barras de progresso
│   └── Modal.tsx           # Modal de detalhes
├── lib/
│   ├── colors.ts           # Base de dados das cores
│   ├── storage.ts          # Gerenciamento localStorage
│   └── utils.ts            # Funções utilitárias
└── types/
    └── index.ts            # Interfaces TypeScript

🎯 Como Jogar

1. Primeira visita: Sua coleção começará vazia
2. Abrir pack: Clique em "Abrir Pack!" para seu primeiro booster
3. Assistir animação: Aproveite a abertura cinematográfica
4. Explorar coleção: Navegue pelos cards coletados
5. Aguardar: Espere 24h para o próximo pack
6. Completar: Colete todos os 170 cards!

🏆 Dicas Estratégicas

• Cards lendários (950) são extremamente raros - pode levar muitos packs!
• Use os filtros para encontrar rapidamente cards específicos
• Verifique as conquistas para acompanhar seu progresso
• Sistema anti-duplicata garante que você sempre progresse

🎨 Cores Incluídas

A aplicação inclui todas as cores do Tailwind CSS 4, exceto as cores neutras:

Incluídas: Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose

Excluídas (usadas apenas na UI): Stone, Neutral, Zinc, Gray, Slate

📱 Recursos Mobile

• Design touch-friendly com botões grandes
• Swipe gestures naturais
• Performance otimizada para dispositivos móveis
• Animações suaves mesmo em hardware limitado

🔧 Personalização

O projeto é facilmente extensível:

• Adicionar novas cores: Modifique src/lib/colors.ts
• Ajustar raridades: Altere os pesos em rarityWeights
• Novas conquistas: Adicione em defaultAchievements
• Customizar animações: Edite tailwind.config.js

📄 Licença

Este projeto é open source e está disponível sob a licença MIT.

---

Criado com ❤️ para celebrar as cores do Tailwind CSS!