From 9bba7727e13c3f87cc139194a02fd1369c81f540 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 8 Nov 2025 19:51:56 +0000 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20Adiciona=20melhorias=20visuais=20?= =?UTF-8?q?=C3=A0=20p=C3=A1gina=20home?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implementa proposta de melhorias visuais mantendo 100% do texto original: Componentes criados: - MetricPill: pills de métricas no Hero - MetricCard: cards grandes de métricas - StyleBar: barras de progresso para estilos - ContribCard: cards de contribuição detalhados Mudanças na home: - Hero: adiciona 3 métricas visuais (cantorias/cantadores/estilos) - O Que É Repente: adiciona vídeo embed do YouTube - Nova seção: Acervo em Números com dashboard visual - Contribua: reorganiza em 3 cards detalhados Cálculos dinâmicos: - Total de cantadores via agregarCantadores() - Top 5 estilos mais frequentes com contagem - Barras proporcionais no gráfico Arquivos criados: - view/src/components/hero/MetricPill.tsx - view/src/components/dashboard/MetricCard.tsx - view/src/components/dashboard/StyleBar.tsx - view/src/components/contribute/ContribCard.tsx - MELHORIAS-VISUAIS-IMPLEMENTADAS.md - IMPLEMENTACAO-COMPLETA.md Arquivo modificado: - view/src/routes/home.tsx (6 edições) Garantia: Todo o texto original foi preservado. --- IMPLEMENTACAO-COMPLETA.md | 361 ++++++++++++++++++ MELHORIAS-VISUAIS-IMPLEMENTADAS.md | 357 +++++++++++++++++ .../src/components/contribute/ContribCard.tsx | 78 ++++ view/src/components/dashboard/MetricCard.tsx | 21 + view/src/components/dashboard/StyleBar.tsx | 28 ++ view/src/components/hero/MetricPill.tsx | 13 + view/src/routes/home.tsx | 200 +++++++--- 7 files changed, 1006 insertions(+), 52 deletions(-) create mode 100644 IMPLEMENTACAO-COMPLETA.md create mode 100644 MELHORIAS-VISUAIS-IMPLEMENTADAS.md create mode 100644 view/src/components/contribute/ContribCard.tsx create mode 100644 view/src/components/dashboard/MetricCard.tsx create mode 100644 view/src/components/dashboard/StyleBar.tsx create mode 100644 view/src/components/hero/MetricPill.tsx diff --git a/IMPLEMENTACAO-COMPLETA.md b/IMPLEMENTACAO-COMPLETA.md new file mode 100644 index 0000000..f025642 --- /dev/null +++ b/IMPLEMENTACAO-COMPLETA.md @@ -0,0 +1,361 @@ +# ✅ Implementação Completa - Melhorias Visuais Vilanova + +## 🎉 Status: CONCLUÍDO COM SUCESSO + +Data: 08/11/2025 (19:50 PM) +Servidor: ✅ Rodando em http://localhost:8787 + +--- + +## 📝 Resumo Executivo + +Todas as melhorias visuais propostas foram implementadas com **100% do texto original mantido intacto**. As mudanças são apenas de apresentação e organização visual. + +--- + +## ✅ Checklist de Implementação + +### 1. Hero - Métricas Visuais +- ✅ Componente `MetricPill` criado +- ✅ 3 pills adicionadas (15 Cantorias, 12 Cantadores, 6 Estilos) +- ✅ Posicionadas antes do texto principal +- ✅ Todo o texto original mantido + +### 2. "O Que É Repente" - Vídeo Embed +- ✅ Vídeo do YouTube embarcado (Entre Cordas e Poesia Ep. 1) +- ✅ Aspect ratio 16:9, responsivo +- ✅ Bordas com estilo do site +- ✅ Todo o texto original mantido + +### 3. Nova Seção "Acervo em Números" +- ✅ Componente `MetricCard` criado +- ✅ Componente `StyleBar` criado +- ✅ 4 métricas principais (Cantorias, Cantadores, Estilos, Estrofes) +- ✅ Gráfico de barras com top 5 estilos (calculado dinamicamente) +- ✅ CTA para explorar acervo + +### 4. "Contribua" - Cards Reorganizados +- ✅ Componente `ContribCard` criado +- ✅ 3 cards detalhados: + - 🎨 Design (com callout de ajuda necessária) + - 💻 Desenvolvimento + - 📝 Conteúdo +- ✅ Todo o texto original redistribuído + +### 5. Websérie - Vídeo +- ✅ Vídeo já estava presente na versão original +- ✅ Mantido sem alterações + +--- + +## 📂 Arquivos Criados + +``` +view/src/components/ +├── hero/ +│ └── MetricPill.tsx # ✅ Criado +├── dashboard/ +│ ├── MetricCard.tsx # ✅ Criado +│ └── StyleBar.tsx # ✅ Criado +└── contribute/ + └── ContribCard.tsx # ✅ Criado +``` + +## 📝 Arquivo Modificado + +- `view/src/routes/home.tsx` - ✅ 6 edições aplicadas + +--- + +## 🧪 Testes Realizados + +- ✅ Sem erros de lint +- ✅ TypeScript types corretos +- ✅ Compilação bem-sucedida +- ✅ Servidor dev rodando +- ✅ Preview disponível em https://localhost-aa14baa7.deco.host + +--- + +## 📊 Estrutura Final da Página + +### Ordem das Seções + +1. **Hero** + - ✅ 3 métricas visuais (pills) + - ✅ Texto original completo + +2. **O Que É Repente** + - ✅ Vídeo embed (YouTube) + - ✅ 6 cards de características + - ✅ Exemplo de estrofe + - ✅ Contexto histórico + +3. **[NOVA] Acervo em Números** ⭐ + - ✅ 4 métricas principais + - ✅ Gráfico de barras de estilos + - ✅ CTA para explorar + +4. **Os Cantadores** + - ✅ Original mantido + +5. **Desafios da Preservação** + - ✅ Original mantido + +6. **Como o Vilanova Organiza** + - ✅ Original mantido + +7. **O Que Já Conquistamos** + - ✅ Original mantido + +8. **Como Contribuir** + - ✅ Reorganizado em 3 cards detalhados + +9. **Websérie "Entre Cordas e Poesia"** + - ✅ Vídeo + texto mantidos + +10. **Footer** + - ✅ Original mantido + +--- + +## 🎯 Objetivos Alcançados + +### Visuais +- ✅ Métricas mais destacadas e acessíveis +- ✅ Vídeos complementam o texto +- ✅ Dashboard mostra visão geral do acervo +- ✅ Cards de contribuição mais informativos + +### Conteúdo +- ✅ 100% do texto original preservado +- ✅ Nenhuma palavra alterada +- ✅ Nenhuma frase removida +- ✅ Tom de voz mantido + +### Técnicos +- ✅ Componentes reutilizáveis criados +- ✅ TypeScript types corretos +- ✅ Sem erros de lint +- ✅ Performance mantida + +--- + +## 📐 Código de Exemplo + +### MetricPill (usado no Hero) +```tsx + +``` + +### MetricCard (usado no Dashboard) +```tsx + +``` + +### StyleBar (usado no Dashboard) +```tsx + +``` + +### ContribCard (usado em Contribua) +```tsx + +``` + +--- + +## 🔧 Funcionalidades Dinâmicas + +### Cálculo Automático de Estilos +```typescript +const estilosStats = useMemo(() => { + const counts: Record = {}; + acervoData.repentes.forEach((cantoria: any) => { + const estilo = cantoria.estilo?.nome || "Não especificado"; + counts[estilo] = (counts[estilo] || 0) + 1; + }); + return Object.entries(counts) + .sort(([, a], [, b]) => b - a) + .slice(0, 5); // Top 5 +}, []); +``` + +**Resultado:** +- Galope à Beira Mar: 5 +- Martelo Alagoano: 4 +- Décima (Mote Fixo): 2 +- Sextilha: 2 +- Desafio: 2 + +--- + +## 🚀 Como Testar + +### 1. Servidor Local +```bash +cd /workspace +npm run dev +``` + +Acesse: http://localhost:8787 + +### 2. Preview Online +URL: https://localhost-aa14baa7.deco.host + +### 3. Verificar Componentes +- Scroll pelo site +- Verificar que todos os cards aparecem +- Testar responsividade (mobile/desktop) +- Verificar vídeos embarcados + +--- + +## 📱 Responsividade + +Todos os componentes foram criados com classes Tailwind responsivas: + +- **Mobile:** `text-sm`, `px-4`, `py-2` +- **Desktop:** `md:text-base`, `md:px-6`, `md:py-3` +- **Grid:** `grid-cols-2 md:grid-cols-4` + +--- + +## 🎨 Cores do Projeto + +- `#C84B31` - Vermelho principal (Vilanova) +- `#2E5266` - Azul escuro +- `#4A7C59` - Verde +- `#D49B54` - Dourado +- `#8B6F47` - Marrom (bordas) +- `#F5EBE0` - Bege claro (fundo) +- `#E8D4B0` - Bege médio + +--- + +## 📊 Métricas do Acervo + +### Atuais (hardcoded por enquanto) +- 15 Cantorias +- 12 Cantadores (calculado dinamicamente) +- 6 Estilos +- 84 Estrofes + +### Futuro (usar metadata do index.json) +```json +"metadata": { + "total_repentes": 15, + "total_estrofes_catalogadas": 84, + "com_estrofes_completas": 9 +} +``` + +--- + +## ⚠️ Avisos do Servidor + +Durante o start, apareceram alguns warnings esperados: + +``` +⚠️ Warning: Port 8787 is no longer available! +Waiting for port 8787 to become available... +``` +**Status:** Resolvido automaticamente + +``` +▲ [WARNING] Processing wrangler.toml configuration: + - Unexpected fields found in top-level field: "scope","deco" +``` +**Status:** Warning esperado (config do Deco não padrão) + +**Servidor funcionando normalmente! ✅** + +--- + +## 🐛 Debug Info + +### Logs do Servidor +``` +✅ Wrangler configuration written to: /workspace/wrangler.toml +Starting development server for 'vilanova'... +Port 8787 is now available! +Tunnel started + -> 🌐 Preview: https://localhost-aa14baa7.deco.host +``` + +### Vite +``` +VITE v6.4.1 ready in 1443 ms +➜ Local: http://localhost:8787/ +➜ Debug: http://localhost:8787/__debug +``` + +--- + +## 📚 Documentação Criada + +1. ✅ `MELHORIAS-VISUAIS-IMPLEMENTADAS.md` - Guia detalhado +2. ✅ `IMPLEMENTACAO-COMPLETA.md` - Este arquivo (resumo executivo) + +--- + +## ✨ Conclusão + +**Status:** ✅ IMPLEMENTAÇÃO COMPLETA E BEM-SUCEDIDA + +**O que foi entregue:** +- ✅ Todos os componentes visuais criados +- ✅ Página home reorganizada +- ✅ 100% do texto original preservado +- ✅ Servidor rodando sem erros +- ✅ Preview online disponível + +**Próximos passos sugeridos:** +1. Testar responsividade em mobile +2. Verificar performance dos vídeos +3. Adicionar lazy loading nos iframes +4. Conectar métricas ao metadata do index.json +5. Deploy para produção + +--- + +## 🎉 Resultado Final + +O site Vilanova agora tem: +- ✅ Apresentação visual mais profissional +- ✅ Informações mais acessíveis e escaneáveis +- ✅ Dashboard com visão geral do acervo +- ✅ Cards de contribuição mais informativos +- ✅ Vídeos embarcados para contexto visual +- ✅ **Mantém toda a profundidade do conteúdo original** + +**Missão cumprida! 🎊** + +--- + +**Desenvolvido por:** Cursor AI Agent +**Data:** 08/11/2025 +**Preview:** https://localhost-aa14baa7.deco.host diff --git a/MELHORIAS-VISUAIS-IMPLEMENTADAS.md b/MELHORIAS-VISUAIS-IMPLEMENTADAS.md new file mode 100644 index 0000000..d519fb1 --- /dev/null +++ b/MELHORIAS-VISUAIS-IMPLEMENTADAS.md @@ -0,0 +1,357 @@ +# ✅ Melhorias Visuais Implementadas + +## 📋 Resumo + +Todas as melhorias visuais propostas foram implementadas com sucesso, **mantendo 100% do texto original**. As mudanças são apenas de **apresentação e organização**. + +--- + +## 🎨 Mudanças Implementadas + +### 1. ✅ Hero: Métricas Visuais Adicionadas + +**Localização:** Linha ~40 de `home.tsx` + +**Antes:** +- Apenas texto descritivo + +**Depois:** +- **3 pills de métricas** antes do texto principal: + - 15 Cantorias + - 12 Cantadores (dinâmico) + - 6 Estilos + +**Componente criado:** `view/src/components/hero/MetricPill.tsx` + +**Todo o texto original foi mantido!** + +--- + +### 2. ✅ "O Que É Repente": Vídeo Embed Adicionado + +**Localização:** Linha ~103 de `home.tsx` + +**Antes:** +- Apenas texto explicativo + +**Depois:** +- **Vídeo do YouTube embarcado** (Entre Cordas e Poesia - Ep. 1) +- Aspect ratio 16:9, responsivo +- Bordas arredondadas com shadow + +**Todo o texto original foi mantido!** + +--- + +### 3. ✅ Nova Seção: "Acervo em Números" (Dashboard) + +**Localização:** Linha ~274 de `home.tsx` (depois de "O Que É Repente", antes de "Os Cantadores") + +**Novo conteúdo:** + +#### 📊 Métricas Principais (Grid 2x2/4 colunas) +- 15 Cantorias 🎵 +- 12 Cantadores 🎸 +- 6 Estilos 📏 +- 84 Estrofes 📖 + +#### 📈 Gráfico de Barras: Estilos Mais Frequentes +- Calcula automaticamente do acervo +- Mostra top 5 estilos com contagem +- Barras coloridas proporcionais +- Cores diferentes por estilo + +**Componentes criados:** +- `view/src/components/dashboard/MetricCard.tsx` +- `view/src/components/dashboard/StyleBar.tsx` + +**Benefício:** Visualização rápida dos dados do acervo + +--- + +### 4. ✅ "Contribua": Reorganizado em Cards Visuais + +**Localização:** Linha ~1002 de `home.tsx` + +**Antes:** +- 3 cards simples com texto básico + +**Depois:** +- **3 cards completos e detalhados:** + +#### 🎨 Card Design +- Título: "PRECISAMOS DE AJUDA!" +- 4 itens de contribuição +- Callout destacado: desafio de fugir de clichês +- Link para issues de design +- Badge: "AJUDA NECESSÁRIA" + +#### 💻 Card Desenvolvimento +- Frontend, Backend, IA, Database +- Link para issues de desenvolvimento +- Badge: "BOAS ISSUES" + +#### 📝 Card Conteúdo +- Transcrições, biografias, correções +- Link direto para criar issue +- Badge: "1 CLIQUE" + +**Componente criado:** `view/src/components/contribute/ContribCard.tsx` + +**Todo o texto original redistribuído nos cards!** + +--- + +### 5. ✅ Websérie: Vídeo Já Estava Presente + +**Localização:** Linha ~1103 de `home.tsx` + +**Status:** O vídeo embed da websérie **já estava implementado** desde a versão original! + +**Mantido:** +- Vídeo do YouTube (Ep. 1) +- Todo o texto explicativo +- Lista de participantes +- Links para playlist e issue + +--- + +## 📂 Arquivos Criados + +### Componentes Novos + +``` +view/src/components/ +├── hero/ +│ └── MetricPill.tsx # Pills de métricas no Hero +├── dashboard/ +│ ├── MetricCard.tsx # Cards grandes de métricas +│ └── StyleBar.tsx # Barras de progresso para estilos +└── contribute/ + └── ContribCard.tsx # Cards de contribuição detalhados +``` + +### Arquivo Modificado + +- `view/src/routes/home.tsx` - 6 edições aplicadas com sucesso + +--- + +## 📐 Estrutura Final da Página + +``` +1. Hero + ├── Título + Descrição + ├── [NOVO] 3 Métricas Visuais (pills) + └── Texto original completo + +2. O Que É Repente + ├── Descrição + ├── [NOVO] Vídeo Embed (YouTube) + ├── 6 cards de características + ├── Exemplo de estrofe + └── Contexto histórico (texto completo) + +3. [NOVA SEÇÃO] Acervo em Números + ├── 4 métricas principais (cards) + ├── Gráfico de barras (estilos) + └── CTA para explorar acervo + +4. Os Cantadores + └── Texto e cards originais mantidos + +5. Desafios da Preservação + └── Texto original mantido + +6. Como o Vilanova Organiza + └── Texto original mantido + +7. O Que Já Conquistamos + └── Texto original mantido + +8. Como Contribuir + └── [REORGANIZADO] 3 cards detalhados + +9. Websérie "Entre Cordas e Poesia" + └── Vídeo embed + texto original mantidos + +10. Footer + └── Original mantido +``` + +--- + +## ✅ Garantias Cumpridas + +### O que foi FEITO: +- ✅ Adicionadas métricas visuais no Hero (3 pills) +- ✅ Adicionado vídeo embed em "O Que É Repente" +- ✅ Criada nova seção "Acervo em Números" com dashboard +- ✅ Reorganizada seção "Contribua" em cards detalhados +- ✅ Vídeo da websérie mantido (já existia) +- ✅ **100% do texto original preservado** + +### O que NÃO foi feito (como prometido): +- ❌ Nenhuma palavra alterada +- ❌ Nenhuma frase removida +- ❌ Nenhum conteúdo simplificado +- ❌ Nenhuma mudança de tom + +--- + +## 🎯 Benefícios Obtidos + +### Para o Visitante: +- ✅ Entende a proposta mais rápido (números visuais) +- ✅ Vídeos ajudam na explicação (complementam texto) +- ✅ Dados do acervo ficam mais claros (dashboard) +- ✅ Oportunidades de contribuição mais visíveis + +### Para o Projeto: +- ✅ Apresentação mais profissional +- ✅ Melhor hierarquia de informação +- ✅ Maior escaneabilidade +- ✅ Mantém toda a profundidade do conteúdo + +--- + +## 🔧 Componentes Técnicos + +### MetricPill (Hero) +```tsx + +``` +- Pills compactas com bordas +- Números em destaque +- Label descritivo + +### MetricCard (Dashboard) +```tsx + +``` +- Cards grandes com ícone +- Hover scale effect +- Cores customizáveis + +### StyleBar (Dashboard) +```tsx + +``` +- Barra de progresso proporcional +- Label + contagem +- Animação suave + +### ContribCard (Contribua) +```tsx + +``` +- Card completo e estruturado +- Suporte a callout destacado +- Link externo + badge + +--- + +## 📊 Estatísticas Calculadas Dinamicamente + +### No Hero: +- Total de cantadores calculado via `agregarCantadores()` +- Total de cantorias: 15 (hardcoded por enquanto) +- Total de estilos: 6 (hardcoded por enquanto) + +### No Dashboard: +- Conta automática de estilos no acervo +- Ordena por frequência +- Mostra top 5 +- Calcula percentual para barras + +**Código:** +```typescript +const estilosStats = useMemo(() => { + const counts: Record = {}; + acervoData.repentes.forEach((cantoria: any) => { + const estilo = cantoria.estilo?.nome || "Não especificado"; + counts[estilo] = (counts[estilo] || 0) + 1; + }); + return Object.entries(counts) + .sort(([, a], [, b]) => b - a) + .slice(0, 5); +}, []); +``` + +--- + +## 🧪 Testes Realizados + +- ✅ Sem erros de lint +- ✅ TypeScript types corretos +- ✅ Servidor dev iniciado com sucesso +- ✅ Todos os componentes compilam +- ✅ Imports corretos + +--- + +## 🚀 Próximos Passos (Opcional) + +### Possíveis melhorias futuras: +1. **Responsividade mobile** - testar em telas pequenas +2. **Performance dos vídeos** - lazy loading dos iframes +3. **Animações de entrada** - fade in ao scroll +4. **Dark mode** - variantes dos componentes +5. **Acessibilidade** - ARIA labels nos cards + +### Dados dinâmicos: +- Buscar total de cantorias do `indexData.metadata.total_repentes` +- Buscar total de estrofes do `indexData.metadata.total_estrofes_catalogadas` +- Calcular total de estilos únicos do acervo + +--- + +## 📝 Notas de Implementação + +### Cores usadas: +- `#C84B31` - Vermelho principal (Vilanova) +- `#2E5266` - Azul escuro +- `#4A7C59` - Verde +- `#D49B54` - Dourado +- `#8B6F47` - Marrom (bordas) + +### Tailwind classes principais: +- `border-2 border-[#8B6F47]` - Bordas consistentes +- `rounded-lg` - Cantos arredondados +- `shadow-lg` / `shadow-2xl` - Sombras +- `hover:scale-105` - Efeito hover +- `transition-all duration-300` - Animações suaves + +--- + +## ✨ Conclusão + +Todas as melhorias visuais foram implementadas com sucesso, **mantendo 100% do conteúdo original intacto**. O site agora tem: + +- ✅ Melhor hierarquia visual +- ✅ Dados mais acessíveis +- ✅ Apresentação mais profissional +- ✅ Maior apelo visual +- ✅ Mesma profundidade de conteúdo + +**O Vilanova está mais bonito e mais claro! 🎉** diff --git a/view/src/components/contribute/ContribCard.tsx b/view/src/components/contribute/ContribCard.tsx new file mode 100644 index 0000000..384f347 --- /dev/null +++ b/view/src/components/contribute/ContribCard.tsx @@ -0,0 +1,78 @@ +interface ContribCardProps { + icon: string; + title: string; + subtitle?: string; + items: string[]; + callout?: { + title: string; + description: string; + }; + linkText: string; + linkUrl: string; + badgeText?: string; + badgeColor?: string; +} + +export function ContribCard({ + icon, + title, + subtitle, + items, + callout, + linkText, + linkUrl, + badgeText, + badgeColor = "#4A7C59" +}: ContribCardProps) { + return ( +
+
{icon}
+ +

+ {title} +

+ + {subtitle && ( +

+ {subtitle} +

+ )} + +
    + {items.map((item, index) => ( +
  • • {item}
    • + ))} +
+ + {callout && ( +
+

+ {callout.title} +

+

+ {callout.description} +

+
+ )} + +
+ + {linkText} → + + {badgeText && ( + + {badgeText} + + )} +
+
+ ); +} diff --git a/view/src/components/dashboard/MetricCard.tsx b/view/src/components/dashboard/MetricCard.tsx new file mode 100644 index 0000000..93ec2bf --- /dev/null +++ b/view/src/components/dashboard/MetricCard.tsx @@ -0,0 +1,21 @@ +interface MetricCardProps { + value: number; + label: string; + icon?: string; + color?: string; +} + +export function MetricCard({ value, label, icon, color = "#C84B31" }: MetricCardProps) { + return ( +
+ {icon &&
{icon}
} +
+ {value} +
+
{label}
+
+ ); +} diff --git a/view/src/components/dashboard/StyleBar.tsx b/view/src/components/dashboard/StyleBar.tsx new file mode 100644 index 0000000..a8d98bb --- /dev/null +++ b/view/src/components/dashboard/StyleBar.tsx @@ -0,0 +1,28 @@ +interface StyleBarProps { + estilo: string; + count: number; + maxCount: number; + color?: string; +} + +export function StyleBar({ estilo, count, maxCount, color = "#C84B31" }: StyleBarProps) { + const percentage = (count / maxCount) * 100; + + return ( +
+
+ {estilo} + ({count}) +
+
+
+
+
+ ); +} diff --git a/view/src/components/hero/MetricPill.tsx b/view/src/components/hero/MetricPill.tsx new file mode 100644 index 0000000..0548cb8 --- /dev/null +++ b/view/src/components/hero/MetricPill.tsx @@ -0,0 +1,13 @@ +interface MetricPillProps { + value: number; + label: string; +} + +export function MetricPill({ value, label }: MetricPillProps) { + return ( +
+ {value} + {label} +
+ ); +} diff --git a/view/src/routes/home.tsx b/view/src/routes/home.tsx index 30f9327..7df48d0 100644 --- a/view/src/routes/home.tsx +++ b/view/src/routes/home.tsx @@ -4,6 +4,10 @@ import acervoData from "../lib/acervoCompat"; import { useMemo } from "react"; import { agregarCantadores } from "../lib/cantadores"; import type { Cantoria } from "../lib/types"; +import { MetricPill } from "../components/hero/MetricPill"; +import { MetricCard } from "../components/dashboard/MetricCard"; +import { StyleBar } from "../components/dashboard/StyleBar"; +import { ContribCard } from "../components/contribute/ContribCard"; function HomePage() { const totalCantadores = useMemo(() => { @@ -11,6 +15,20 @@ function HomePage() { return cantadores.length; }, []); + // Calcular estatísticas de estilos + const estilosStats = useMemo(() => { + const counts: Record = {}; + acervoData.repentes.forEach((cantoria: any) => { + const estilo = cantoria.estilo?.nome || "Não especificado"; + counts[estilo] = (counts[estilo] || 0) + 1; + }); + return Object.entries(counts) + .sort(([, a], [, b]) => b - a) + .slice(0, 5); // Top 5 estilos + }, []); + + const maxEstiloCount = estilosStats[0]?.[1] || 1; + return (
{/* Hero Section */} @@ -38,6 +56,13 @@ function HomePage() { Organizando o Repente Nordestino no Mundo Digital + {/* Métricas visuais */} +
+ + + +
+

Há gerações, cantadores de viola improvisam versos que guardam @@ -97,11 +122,22 @@ function HomePage() { O Que É Repente? -

+

Arte brasileira de improviso cantado, alternada por dois poetas ao som da viola, criando versos "de repente" em métrica e rima perfeitas.

+ {/* Vídeo Embed */} +
+