Skip to content

VISUAL-LAYOUT-MUSICAS.md

Latest commit

 

History

History
275 lines (242 loc) · 16.3 KB

VISUAL-LAYOUT-MUSICAS.md

File metadata and controls

275 lines (242 loc) · 16.3 KB
Raw

📱 Visual Layout - Páginas de Músicas

Este documento descreve visualmente como as novas páginas aparecerão no navegador.

📄 Página: /musicas (Lista)

┌─────────────────────────────────────────────────────────┐
│ [HEADER]                                                │
│ Vilanova        [Cantorias] [Músicas*] [Estilos] [...]│
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│                                                         │
│        Músicas Inspiradas na Cantoria                  │
│                                                         │
│  Canções autorais que celebram, homenageiam ou         │
│  se inspiram na rica tradição da cantoria nordestina   │
│                                                         │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐               │
│  │    1    │  │    1    │  │    3    │               │
│  │ Músicas │  │ c/ Vídeo│  │ Estrofes│               │
│  └─────────┘  └─────────┘  └─────────┘               │
│                                                         │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐  │
│ │ [THUMBNAIL DO YOUTUBE]                            │  │
│ │                                                    │  │
│ │            ▶️ (Play Icon)                         │  │
│ │                                                    │  │
│ ├──────────────────────────────────────────────────┤  │
│ │                                                    │  │
│ │  Martelo Alagoano                                │  │
│ │  Alceu Valença                                   │  │
│ │                                                    │  │
│ │  [Martelo Alagoano]                              │  │
│ │                                                    │  │
│ │  🎬 Vídeo  📄 Letra                              │  │
│ │                                                    │  │
│ └──────────────────────────────────────────────────┘  │
│                                                         │
│ ┌──────────────────────────────────────────────────┐  │
│ │ 💡 Conhece outra música que homenageia           │  │
│ │    a cantoria?                                    │  │
│ │                                                    │  │
│ │    [Sugerir Música] →                            │  │
│ └──────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘

📄 Página: /musicas/martelo-alagoano-alceu-valenca (Detalhe)

Desktop View:

┌──────────────────────────────────────────────────────────┐
│ [HEADER]                                                 │
│ Vilanova     [Cantorias] [Músicas*] [Estilos] [...]    │
└──────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────┐
│ Início → Músicas → Martelo Alagoano                     │
│                                                          │
│ Martelo Alagoano                                        │
│ Alceu Valença                                           │
│                                                          │
│        ┌────────────────────┐                           │
│        │                    │                           │
│        │  [YOUTUBE EMBED]   │  ← Formato QUADRADO      │
│        │                    │     (aspect-ratio 1:1)    │
│        │     ▶️ Play        │                           │
│        │                    │                           │
│        └────────────────────┘                           │
│                                                          │
│ [Homenagem: Martelo Alagoano]                          │
│                                                          │
│ 📅 1980  💿 Coração Bobo  🎵 4:23                       │
│                                                          │
│ ┌──────────────────────────────────────────────────┐   │
│ │ Música que homenageia a tradição da cantoria    │   │
│ │ nordestina e os grandes cantadores...            │   │
│ └──────────────────────────────────────────────────┘   │
│                                                          │
│ ┌──────────────────────────────────────────────────┐   │
│ │ Sobre o Estilo: Martelo Alagoano                │   │
│ │ • Métrica: decassílabos (10 sílabas)            │   │
│ │ • Versos por estrofe: 10                         │   │
│ │ • Esquema de rima: AAAAAAAAAB                    │   │
│ └──────────────────────────────────────────────────┘   │
└──────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────┐
│               Letra e Comentários                        │
│                                                          │
│ ┌──────────────────────────────────────────────────┐   │
│ │ Estrofe 1                                        │   │
│ ├──────────────────────────────────────────────────┤   │
│ │                                                   │   │
│ │  Cantador, o teu canto de improviso              │   │
│ │  É o mais nobre poder da criação                 │   │
│ │  O teu verso tem a força de Sansão               │   │
│ │  É fatal, é perfeito e é preciso                 │   │
│ │                                                   │   │
│ │  Cantador do inconsciente coletivo               │   │
│ │  Canta a força do povo e o desengano             │   │
│ │  E a esperança que brota todo ano                │   │
│ │  Vai tecendo nos versos e nas loas               │   │
│ │  Batucando a toada de Alagoas                    │   │
│ │  Nos dez pés de martelo alagoano                 │   │
│ │                                                   │   │
│ ├──────────────────────────────────────────────────┤   │
│ │ 💭 Comentário:                                   │   │
│ │                                                   │   │
│ │ Alceu Valença abre a música com uma reverência   │   │
│ │ profunda ao cantador de repente, reconhecendo    │   │
│ │ o improviso como 'o mais nobre poder da          │   │
│ │ criação'. Ele equipara o verso do cantador à     │   │
│ │ força mítica de Sansão...                        │   │
│ │                                                   │   │
│ └──────────────────────────────────────────────────┘   │
│                                                          │
│ ┌──────────────────────────────────────────────────┐   │
│ │ Estrofe 2                                        │   │
│ ├──────────────────────────────────────────────────┤   │
│ │  [10 versos da segunda estrofe...]               │   │
│ ├──────────────────────────────────────────────────┤   │
│ │ 💭 Comentário: [análise da estrofe 2]           │   │
│ └──────────────────────────────────────────────────┘   │
│                                                          │
│ ┌──────────────────────────────────────────────────┐   │
│ │ Estrofe 3                                        │   │
│ ├──────────────────────────────────────────────────┤   │
│ │  [10 versos da terceira estrofe...]              │   │
│ ├──────────────────────────────────────────────────┤   │
│ │ 💭 Comentário: [análise da estrofe 3]           │   │
│ └──────────────────────────────────────────────────┘   │
│                                                          │
│ ┌──────────────────────────────────────────────────┐   │
│ │ Ouça a música:                                   │   │
│ │ [YouTube] [Spotify]                              │   │
│ └──────────────────────────────────────────────────┘   │
│                                                          │
│ ← Ver todas as músicas                                  │
│                                                          │
└──────────────────────────────────────────────────────────┘

Mobile View (Otimizado para Screenshots):

┌──────────────────────┐
│ [HEADER MOBILE]      │
│ Vilanova        [☰]  │
│                      │
│ [Cantorias][Músicas] │
│ [Estilos][Cantadores]│
└──────────────────────┘

┌──────────────────────┐
│ Início → Músicas →   │
│ Martelo Alagoano     │
│                      │
│ Martelo Alagoano     │
│ Alceu Valença        │
│                      │
│ ┌──────────────────┐ │ ← QUADRADO!
│ │                  │ │   Perfeito para
│ │  [YOUTUBE VIDEO] │ │   screenshot
│ │                  │ │   no celular
│ │      ▶️          │ │
│ │                  │ │
│ └──────────────────┘ │
│                      │
│ [Homenagem: Martelo] │
│                      │
│ 📅 1980              │
│ 💿 Coração Bobo      │
│ 🎵 4:23              │
│                      │
└──────────────────────┘

┌──────────────────────┐
│ Letra e Comentários  │
│                      │
│ ┌──────────────────┐ │
│ │ Estrofe 1        │ │
│ ├──────────────────┤ │
│ │ Cantador, o teu  │ │
│ │ canto de improviso│ │
│ │ É o mais nobre   │ │
│ │ poder da criação │ │
│ │ ...              │ │
│ │                  │ │
│ ├──────────────────┤ │
│ │ 💭 Comentário:   │ │
│ │ Alceu Valença    │ │
│ │ abre a música... │ │
│ └──────────────────┘ │
│                      │
│ [Estrofes 2 e 3...]  │
│                      │
└──────────────────────┘

🎨 Paleta de Cores (mantida do site)

  • Primária (Terracota): #C84B31
  • Secundária (Azul Petróleo): #2E5266
  • Bege Claro: #F5EBE0
  • Bege Escuro: #E8D4B0
  • Marrom: #8B6F47
  • Verde Sálvia: #4A7C59

📐 Especificações Técnicas

YouTube Embed Quadrado

aspect-ratio: 1 / 1;  /* Formato quadrado */
max-width: 28rem;     /* 448px no desktop */
margin: 0 auto;       /* Centralizado */

Vantagens:

  • ✅ Ocupa menos espaço vertical no mobile
  • ✅ Fica bonito em screenshots
  • ✅ Formato único que diferencia de cantorias
  • ✅ Mais "postável" em redes sociais

Cards de Estrofes

  • Borda: 2px solid #8B6F47
  • Header vermelho (#C84B31) com número da estrofe
  • Versos em fonte serif, tamanho maior
  • Comentário em caixa separada (bege #E8D4B0)

🎯 Objetivos de Design Atingidos

  1. ✅ Mobile-first: Layout otimizado para celular
  2. ✅ Screenshot-friendly: Embed quadrado fica bonito
  3. ✅ Educativo: Comentários explicam contexto cultural
  4. ✅ Consistente: Mantém identidade visual do site
  5. ✅ Distintivo: Formato diferencia músicas de cantorias

📱 Como Tirar um Print Bonito

  1. Acesse /musicas/martelo-alagoano-alceu-valenca no celular
  2. Role até o embed do YouTube (formato quadrado)
  3. Tire screenshot incluindo:
    • Título da música
    • Nome do artista
    • Embed quadrado
  4. Use para compartilhar nas redes!

Design Status: ✅ Implementado e pronto para uso

Este layout foi desenhado especificamente para ser:

  • Bonito em qualquer dispositivo
  • Fácil de compartilhar
  • Rico em contexto cultural
  • Respeitoso com a tradição