feat: Add visual dashboard and improve home page layout

Co-authored-by: lucis <lucis@deco.cx>

Author: cursoragent

MELHORIAS-VISUAIS-IMPLEMENTADAS.md

@@ -0,0 +1,265 @@
+# ✅ Melhorias Visuais Implementadas
+
+## 📅 Data: 2025-01-17
+
+## 🎯 Objetivo
+
+Melhorar a apresentação visual do conteúdo mantendo **100% do texto original**, tornando-o mais escaneável e impactante.
+
+---
+
+## ✅ Implementações Realizadas
+
+### 1. **Hero Section: Métricas Visuais** ✅
+
+**Arquivo:** `view/src/routes/home.tsx` (linhas 67-71)
+
+**Componente criado:** `view/src/components/hero/MetricPill.tsx`
+
+**O que foi adicionado:**
+- Pills visuais mostrando:
+  - **15 Cantorias**
+  - **12 Cantadores** 
+  - **6 Estilos**
+- Design com bordas arredondadas, sombra e efeito hover
+- Cores consistentes com paleta do site
+
+**Texto original:** Mantido 100% intacto
+
+---
+
+### 2. **Seção "O Que É Repente": Vídeo Embed** ✅
+
+**Arquivo:** `view/src/routes/home.tsx` (linhas 137-151)
+
+**O que foi adicionado:**
+- Embed do YouTube da websérie "Entre Cordas e Poesia" - Episódio 1
+- Container responsivo aspect-video
+- Borda decorativa com a cor tema (#8B6F47)
+- Legenda explicativa abaixo do vídeo
+
+**Texto original:** Mantido 100% intacto (vídeo adicionado **após** o parágrafo introdutório)
+
+---
+
+### 3. **Nova Seção: "Acervo em Números"** ✅
+
+**Arquivo:** `view/src/routes/home.tsx` (linhas 323-374)
+
+**Componentes criados:** 
+- `view/src/components/dashboard/MetricCard.tsx`
+- `view/src/components/dashboard/StyleBar.tsx`
+
+**O que foi adicionado:**
+- **4 cards de métricas grandes:**
+  - 🎵 15 Cantorias
+  - 🎤 12 Cantadores
+  - 📝 6 Estilos
+  - 📜 84 Estrofes catalogadas
+
+- **Gráfico de barras interativo:**
+  - Mostra os 5 estilos mais frequentes no acervo
+  - Barras animadas com gradiente
+  - Dados calculados dinamicamente do acervo
+
+- **CTA:** Botão "Explorar Acervo Completo"
+
+**Posição:** Depois de "O Que É Repente", antes de "Os Cantadores"
+
+**Conteúdo novo:** Curto e objetivo (2 parágrafos introdutórios + visualizações)
+
+---
+
+### 4. **Seção "Como Contribuir": Cards Reorganizados** ✅
+
+**Arquivo:** `view/src/routes/home.tsx` (linhas 1102-1162)
+
+**Componente criado:** `view/src/components/contribute/ContribCard.tsx`
+
+**O que foi mudado:**
+- Reorganização do conteúdo existente em **3 cards visuais:**
+
+1. **🎨 Design** (DESTAQUE - PRECISAMOS DE AJUDA!)
+   - Badge especial "⚠️ PRECISAMOS DE AJUDA!"
+   - Badge "MÉDIO" de dificuldade
+   - Link para issues de design no GitHub
+
+2. **💻 Código**
+   - Lista de áreas: Frontend, Backend, IA/ML, Database
+   - Badge "MÉDIO" de dificuldade
+   - Link para issues de dev no GitHub
+
+3. **📝 Conteúdo**
+   - Lista de tarefas: Transcrever, biografias, correções
+   - Badge "FÁCIL" de dificuldade
+   - Link para issues de conteúdo no GitHub
+
+**Texto original:** Mantido e redistribuído nos cards (nada foi removido)
+
+---
+
+## 📂 Arquivos Criados
+
+### Componentes React:
+
+```
+view/src/components/
+├── hero/
+│   └── MetricPill.tsx          # Pills de métricas no hero
+├── dashboard/
+│   ├── MetricCard.tsx          # Cards grandes de métricas
+│   └── StyleBar.tsx            # Gráfico de barras para estilos
+└── contribute/
+    └── ContribCard.tsx         # Cards de contribuição organizados
+```
+
+### Componentes Reutilizáveis:
+- Todos os componentes aceitam props customizáveis
+- Design system consistente (cores, bordas, sombras)
+- Responsivos (mobile-first)
+- Efeitos de hover para interatividade
+
+---
+
+## 📊 Estrutura Final da Home
+
+### ANTES:
+```
+1. Hero (texto denso)
+2. O Que É Repente (6 cards + exemplo)
+3. Os Cantadores
+4. O Problema
+5. A Solução
+6. O Que Já Temos
+7. Por Que Vilanova
+8. Como Contribuir (texto espalhado)
+9. Websérie (só texto)
+10. Footer
+```
+
+### DEPOIS:
+```
+1. Hero (+ métricas visuais)               ← NOVO
+2. O Que É Repente (+ vídeo embed)         ← NOVO
+3. [NOVO] Acervo em Números (dashboard)    ← NOVO
+4. Os Cantadores
+5. O Problema
+6. A Solução
+7. O Que Já Temos
+8. Por Que Vilanova
+9. Como Contribuir (cards organizados)     ← NOVO
+10. Websérie (já tinha vídeo)
+11. Footer
+```
+
+---
+
+## 🎨 Design System
+
+### Cores Utilizadas:
+- **Primary:** `#C84B31` (vermelho terracota)
+- **Secondary:** `#4A7C59` (verde sálvia)
+- **Accent:** `#D49B54` (dourado)
+- **Neutral:** `#2E5266` (azul escuro)
+- **Background:** `#F5EBE0` (bege claro)
+- **Border:** `#8B6F47` (marrom médio)
+
+### Padrões Visuais:
+- Bordas: `border-2 border-[#8B6F47]`
+- Sombras: `shadow-lg`, `shadow-xl`
+- Transições: `transition-all duration-300`
+- Hover: `hover:-translate-y-1`, `hover:scale-105`
+- Arredondamento: `rounded-lg`, `rounded-full`
+
+---
+
+## ✅ Garantias Cumpridas
+
+### O que esta implementação FEZ:
+- ✅ Adicionou elementos visuais (métricas, gráficos, vídeos)
+- ✅ Reorganizou layout para melhor hierarquia
+- ✅ Melhorou escaneabilidade
+- ✅ Manteve toda a profundidade do conteúdo
+
+### O que esta implementação NÃO FEZ:
+- ❌ Não alterou/removeu/simplificou nenhum texto original
+- ❌ Não mudou tom de voz
+- ❌ Não reduziu explicações
+- ❌ Não removeu seções
+
+---
+
+## 📈 Benefícios Esperados
+
+- ✅ Visitante entende a proposta mais rápido (métricas visuais no hero)
+- ✅ Vídeo ajuda na explicação (complementa o texto)
+- ✅ Dados do acervo mais claros (dashboard com gráficos)
+- ✅ Oportunidades de contribuição mais visíveis (cards destacados)
+- ✅ Todo o conteúdo original permanece intacto
+
+---
+
+## 🧪 Status dos Testes
+
+- ✅ **Lint:** Nenhum erro de TypeScript ou ESLint
+- ✅ **Build:** Componentes compilam corretamente
+- ✅ **Imports:** Todas as dependências resolvidas
+- ⏳ **Visual:** Aguardando review visual no navegador
+
+---
+
+## 🚀 Próximos Passos (Opcional)
+
+### Melhorias futuras possíveis:
+1. **Animações de entrada:**
+   - Usar `framer-motion` para animar cards ao scroll
+   - Contadores animados para métricas
+
+2. **Responsividade avançada:**
+   - Testar em diferentes tamanhos de tela
+   - Otimizar espaçamentos mobile
+
+3. **Acessibilidade:**
+   - Adicionar `aria-labels` descritivos
+   - Garantir contraste de cores WCAG AA
+
+4. **Performance:**
+   - Lazy loading para vídeo embed
+   - Otimização de imagens
+
+---
+
+## 📝 Notas de Implementação
+
+### Por que componentes separados?
+- **Reutilização:** Componentes podem ser usados em outras páginas
+- **Manutenção:** Fácil de atualizar estilos globalmente
+- **Testes:** Cada componente pode ser testado isoladamente
+- **Type Safety:** Props tipadas com TypeScript
+
+### Por que métricas dinâmicas?
+- **Sempre atualizadas:** Calculadas do acervo real
+- **Não duplicam dados:** Usa `acervoData` como fonte única
+- **Performance:** `useMemo` evita recalcular a cada render
+
+### Por que gráfico de barras?
+- **Visual rápido:** Entendimento imediato das proporções
+- **Interativo:** Animação ao carregar página
+- **Escalável:** Adiciona automaticamente novos estilos
+
+---
+
+## 🎯 Conclusão
+
+Implementação bem-sucedida das melhorias visuais propostas, mantendo 100% do texto original e adicionando elementos visuais que melhoram significativamente a experiência do usuário.
+
+**Total de arquivos criados:** 4 componentes React  
+**Total de linhas adicionadas:** ~300 linhas  
+**Total de linhas modificadas em home.tsx:** ~150 linhas  
+**Texto removido:** 0 palavras ✅
+
+---
+
+**Status:** ✅ **COMPLETO**  
+**Data:** 2025-01-17  
+**Desenvolvedor:** Cursor AI Agent

view/src/components/contribute/ContribCard.tsx

@@ -0,0 +1,93 @@
+interface ContribCardProps {
+  title: string;
+  icon: string;
+  description: string;
+  items: string[];
+  actionLabel: string;
+  actionUrl?: string;
+  difficulty?: "easy" | "medium" | "hard";
+  highlight?: boolean;
+}
+
+export function ContribCard({ 
+  title, 
+  icon, 
+  description, 
+  items, 
+  actionLabel,
+  actionUrl,
+  difficulty,
+  highlight = false
+}: ContribCardProps) {
+  const difficultyColors = {
+    easy: "bg-[#4A7C59]",
+    medium: "bg-[#D49B54]",
+    hard: "bg-[#C84B31]",
+  };
+
+  const difficultyLabels = {
+    easy: "FÁCIL",
+    medium: "MÉDIO",
+    hard: "DIFÍCIL",
+  };
+
+  return (
+    <div className={`border-2 rounded-lg p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 ${
+      highlight 
+        ? "border-[#C84B31] bg-gradient-to-br from-[#C84B31]/5 to-[#D49B54]/5" 
+        : "border-[#8B6F47] bg-[#F5EBE0]"
+    }`}>
+      <div className="text-4xl mb-4">{icon}</div>
+      
+      <h3 className="font-bold text-xl text-[#2E5266] mb-3">
+        {title}
+      </h3>
+      
+      {highlight && (
+        <div className="mb-3 inline-block">
+          <span className="text-xs bg-[#C84B31] text-white px-3 py-1 rounded-full font-semibold">
+            ⚠️ PRECISAMOS DE AJUDA!
+          </span>
+        </div>
+      )}
+      
+      <p className="text-sm text-[#2E5266]/80 leading-relaxed mb-4">
+        {description}
+      </p>
+      
+      {items.length > 0 && (
+        <ul className="space-y-2 mb-4">
+          {items.map((item, idx) => (
+            <li key={idx} className="text-sm text-[#2E5266]/70 flex items-start gap-2">
+              <span className="text-[#C84B31] mt-1">•</span>
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      
+      <div className="flex items-center gap-2 flex-wrap mt-4">
+        {actionUrl ? (
+          <a
+            href={actionUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 text-sm bg-[#C84B31] text-white px-4 py-2 rounded-lg hover:bg-[#A63D40] transition-colors font-semibold"
+          >
+            {actionLabel} →
+          </a>
+        ) : (
+          <button className="inline-flex items-center gap-2 text-sm bg-[#C84B31] text-white px-4 py-2 rounded-lg hover:bg-[#A63D40] transition-colors font-semibold">
+            {actionLabel} →
+          </button>
+        )}
+        
+        {difficulty && (
+          <span className={`text-xs ${difficultyColors[difficulty]} text-white px-3 py-1 rounded-full font-semibold`}>
+            {difficultyLabels[difficulty]}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

view/src/components/dashboard/MetricCard.tsx

@@ -0,0 +1,15 @@
+interface MetricCardProps {
+  value: number;
+  label: string;
+  icon?: string;
+}
+
+export function MetricCard({ value, label, icon = "📊" }: MetricCardProps) {
+  return (
+    <div className="bg-white rounded-lg p-6 border-2 border-[#8B6F47] hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
+      <div className="text-3xl mb-2">{icon}</div>
+      <div className="text-5xl font-bold text-[#C84B31] mb-2">{value}</div>
+      <div className="text-sm text-[#2E5266]/70 font-medium">{label}</div>
+    </div>
+  );
+}