diff --git a/docs/plans/jingles-radio-homepage-ui-design.html b/docs/plans/jingles-radio-homepage-ui-design.html new file mode 100644 index 00000000..08d9ffdf --- /dev/null +++ b/docs/plans/jingles-radio-homepage-ui-design.html @@ -0,0 +1,1504 @@ + + + + + + + Design — Jingles e rádio na home + + + +
+
+
+

+ S22 · Design hi-fi +

+

+ Jingles e rádio na home +

+

+ Seção curta de som entre a história e os cards: rádio sob clique, jingles oficiais e + download sem cadastro. +

+
+

+ Tema: campaign-site · 390 / 1280 +

+
+ + +
+
+
+

+ Cena 01 · Desktop 1280 +

+

+ Facade da rádio + três jingles · no ritmo real da home +

+
+

+ O fim de “Nossa história” e o início de “Faça parte” situam a inserção sem redesenhar as + seções vizinhas. +

+
+ +
+
+ +
+
+
+

+ Nossa história +

+

+ Conheça a trajetória de Jorge Solla +

+

+ A história de quem já fez saúde pública na Bahia e no Brasil. +

+
+
+
+ +
+
+
+
+ +
+ +
+
+

+ A trilha da nossa caminhada +

+

+ Cante, baixe e espalhe +

+

+ Ouça a Rádio Jorge Solla 1313 e os jingles oficiais da campanha. Dê o play e + baixe o seu preferido para levar com você. +

+
+ +
+
+
+ Rádio online + +
+ Jorge Solla 1313 — Mais Saúde, Mais Futuro + +
+
+

+ Sintonize com a gente +

+

+ Rádio Jorge Solla 1313 +

+

+ Clique para carregar o player oficial e ouvir a programação da rádio. +

+
+ + Abrir no Zeno + +
+

+ O player do zeno.fm só é carregado depois do seu clique. +

+
+
+
+
+

+ iframe zeno.fm +

+

+ Placeholder do widget oficial carregado após o clique +

+
+
+

+ Player fornecido por zeno.fm. Ao usar, você acessa um serviço externo. +

+
+
+ +
+
+

+ Jingles oficiais +

+

+ Dê o play. O próximo ritmo é seu. +

+
+ Um jingle toca por vez. +
+ +
+
+
+ Capa do jingle Axé de Jorge Solla 1313 +
+
+
+ +
+

+ Axé +

+

Pronto para tocar

+

+ Em reprodução +

+
+
+
+
+
+ Tempo —:—Duração —:— +
+
+ Baixar MP3 +

+ jorge-solla-1313-axe.mp3 +

+
+
+
+
+ Capa do jingle Forró de Jorge Solla 1313 +
+
+
+ +
+

+ Forró +

+

Pronto para tocar

+

+ Em reprodução +

+
+
+
+
+
+ Tempo 0:38Duração 1:40 +
+
+ Baixar MP3 +

+ jorge-solla-1313-forro.mp3 +

+
+
+
+
+ Capa do jingle Pagodão de Jorge Solla 1313 +
+
+
+ +
+

+ Pagodão +

+

Pronto para tocar

+

+ Em reprodução +

+
+
+
+
+
+ Tempo —:—Duração —:— +
+
+ Baixar MP3 +

+ jorge-solla-1313-pagodao.mp3 +

+
+
+
+
+ Ver todos os jingles + +
+
+
+ + +
+
+

+ Faça parte +

+

+ Mostre que você está com Solla +

+

+ Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. +

+ +
+
+
+
+
+ + +
+
+

+ Cena 02 · Mobile 390 +

+

+ Uma coluna · facade antes de qualquer terceiro +

+
+
+
+
+
+

+ Nossa história +

+

+ Conheça a trajetória de Jorge Solla +

+
+
+
+ +
+

+ A trilha da nossa caminhada +

+

+ Cante, baixe
e espalhe +

+

+ Ouça a rádio e os jingles oficiais. Baixe o seu preferido para levar com você. +

+
+
+
+
+ Rádio online +
+ Jorge Solla 1313 — Mais Saúde, Mais Futuro + +
+
+

+ Rádio Jorge Solla 1313 +

+

+ Carregue o player oficial só quando quiser ouvir. +

+ + Abrir no Zeno + +

+ O player do zeno.fm só carrega depois do clique. +

+
+
+
+
+

+ iframe zeno.fm +

+

Widget oficial após o clique

+
+
+

+ Player de zeno.fm · serviço externo. +

+
+
+
+

+ Jingles oficiais +

+

Dê o play

+

Um jingle toca por vez.

+
+
+
+
+ Capa do jingle Axé de Jorge Solla 1313 +
+
+
+ +
+

Axé

+

Pronto para tocar

+

+ Em reprodução +

+
+
+
+
+
+ Tempo 0:38Duração 1:40 +
+
+ Baixar MP3 +

+ jorge-solla-1313-axe.mp3 +

+
+
+
+
+ Capa do jingle Forró de Jorge Solla 1313 +
+
+
+ +
+

Forró

+

Pronto para tocar

+

+ Em reprodução +

+
+
+
+
+
+ Tempo —:—Duração —:— +
+
+ Baixar MP3 +

+ jorge-solla-1313-forro.mp3 +

+
+
+
+
+ Capa do jingle Pagodão de Jorge Solla 1313 +
+
+
+ +
+

Pagodão

+

Pronto para tocar

+

+ Em reprodução +

+
+
+
+
+
+ Tempo —:—Duração —:— +
+
+ Baixar MP3 +

+ jorge-solla-1313-pagodao.mp3 +

+
+
+
+
+ Ver todos os jingles + +
+
+
+

+ Faça parte +

+

Mostre que você está com Solla

+
+
+
+
+ + +
+
+

+ Cena 03 · Rádio carregada +

+

+ O CTA vira o widget; a origem externa permanece clara +

+
+
+
+
+
+ Rádio online +
+ Jorge Solla 1313 — Mais Saúde, Mais Futuro + +
+
+
+

+ Rádio Jorge Solla 1313 +

+ Abrir no Zeno + +
+
+
+ +

+ iframe zeno.fm · 168px +

+

+ A UI interna pertence ao widget oficial e não é inventada neste design. +

+
+
+

+ Player fornecido por zeno.fm. Ao usar, você acessa um serviço externo. +

+
+
+
+
+ + +
+
+

+ Cena 04 · Tocando + download em foco +

+

+ O play amarelo continua dominante; download é secundário e acessível +

+
+
+ Capa do jingle Pagodão de Jorge Solla 1313 +
+

+ Estado herdado do S21 +

+
+ +
+

Pagodão

+

+ Em reprodução +

+

Pronto para tocar

+
+
+
+
+
+ Tempo 0:38Duração 1:40 +
+
+ Baixar MP3 +

+ jorge-solla-1313-pagodao.mp3 +

+
+
+
+ + +
+
+

+ Cena 05 · Zero jingles publicados +

+

+ Só a rádio permanece · sem grade e sem “Ver todos” +

+
+
+
+

+ A trilha da nossa caminhada +

+

+ Sintonize com a Rádio 1313 +

+

+ Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla + 1313. +

+
+
+
+
+ Rádio online +
+ Jorge Solla 1313 — Mais Saúde, Mais Futuro + +
+
+

+ Rádio Jorge Solla 1313 +

+

+ O player oficial só é carregado quando você pedir. +

+
+ Abrir no Zeno +
+
+
+
+
+

+ iframe zeno.fm +

+

Widget oficial após o clique

+
+
+

Player de zeno.fm · serviço externo.

+
+
+
+
+ + +
+ + + + diff --git a/docs/plans/jingles-radio-homepage.md b/docs/plans/jingles-radio-homepage.md new file mode 100644 index 00000000..0632802f --- /dev/null +++ b/docs/plans/jingles-radio-homepage.md @@ -0,0 +1,108 @@ +# Jingles e rádio na home — a seção de som (S22) + +Status: rascunho +Atualizado em: 2026-09-20 +Issue: #1228 +Priority: P2 +Impeccable: C — nova seção numa página existente (a home pública) +Design UI: docs/plans/jingles-radio-homepage-ui-design.html +Appetite: ~1 dia eng; uma seção nova na home, sem rota nova +Responsável: — + +## Intenção + +Os jingles são da militância e a rádio é o canal ao vivo do mandato — os dois precisam estar na vitrine, que é a home. O S21 (Issue #1222, entregue em 2026-09-20) pôs os jingles em `/jingles` com link no rodapé e **deliberadamente não tocou a home** ("home e navegação principal intocadas nesta fatia"); na prática, quem chega em jorgesolla1313.com.br não vê nada de som. Este item corrige isso: uma seção na home, sem rota nova, com os jingles para ouvir/baixar e a rádio Jorge Solla 1313 (zeno.fm) — uma seção só de som, curta e no lugar mais visitado do site. + +## Persona e fluxo + +- **Persona / contexto:** visitante e militante que chega pela home no celular (link no WhatsApp, busca, indicação), com pressa e em conexão qualquer. +- **Job principal:** ouvir o jingle oficial e a rádio ali mesmo na home, e baixar o MP3 para repassar. +- **Fluxo desejado:** abre a home → rola até a seção de som → vê o card da rádio e os jingles com capa → dá play (um por vez) → baixa o MP3 → clica em "Ouvir a rádio" e o player do zeno carrega ali → opcional: "Ver todos os jingles" leva a `/jingles`. +- **Anti-goals de produto:** não vira player de streaming/loja nem discografia; não captura dados nem pede consent; não duplica cadastro de mídia (usa a collection existente do S21); não auto-carrega áudio ao abrir a home (`preload="none"`); não auto-carrega iframe de terceiro antes do clique na rádio (se facade); não redesenha a home. + +### Esboço de fluxo (C) + +```text +[visitante na home] → rola até a seção de som +→ card da rádio + jingles com capa e play (recomendação: até 3) +→ play num jingle (um por vez) · pausa · baixa o MP3 +→ "Ouvir a rádio" (clique) → player do zeno carrega na seção +→ "Ver todos os jingles" → /jingles (S21) +[zero jingles publicados] → seção mostra a rádio; grade de jingles some (fail-closed) +``` + +### Design UI (C) + +- Design UI (gate): `docs/plans/jingles-radio-homepage-ui-design.html` (a produzir após este plano) + +## Objetivo e aceite + +- Seção nova visível em `https://jorgesolla1313.com.br/` com os jingles publicados: capa, título, play (um por vez) e download MP3 com nome de arquivo legível. +- Rádio tocável: clique carrega o player oficial do zeno; pela recomendação (facade), nenhum request/script de terceiro antes do clique; link para abrir no zeno fica como alternativa no card. +- Kill switch individual dos jingles preservado: despublicar tira da home sem apagar arquivo; sem jingle publicado, a grade some e a rádio permanece. +- `/jingles` continua funcionando como página canônica indexável, com o link do rodapé; a seção da home linka "Ver todos" quando houver mais jingles que os exibidos. +- Home segue estática (nada de `payload.find` cru fora do cache existente); abrir a home não baixa áudio nem carrega iframe de terceiro. +- Celular primeiro: sem overflow horizontal (o e2e da home mede), capas otimizadas, usável em conexão ruim; LGPD sem formulário/consent/PII. +- **Estado de hoje em produção (verificado 2026-09-20):** 0 jingles publicados — `/jingles` responde no estado vazio (`noindex`) e a home não tem link. A seção da home só mostra a grade quando os jingles do S21 estiverem publicados (dependência dura abaixo). + +## Dados (intenção) + +- **Vou apresentar dados?** Não — superfície de mídia (áudio + capa); nenhuma PII coletada. +- **Decisões desbloqueadas:** N/A — a decisão é do visitante (ouvir/baixar/repassar), não leitura de números. +- **Forma:** N/A — sem dado agregado a definir. + +## Dados da decisão (literais) + +- ID `S22`; slug `jingles-radio-homepage`; tipo `feature`; Priority `P2`; Impeccable `C`; rota: a home `/` (sem rota nova). +- Design UI (gate): `docs/plans/jingles-radio-homepage-ui-design.html`. +- Página da rádio: `https://zeno.fm/radio/jorge-solla-1313/` (verificado agora: HTTP 200, título "Listen to Jorge Solla 1313 | Zeno.FM"). +- Widget/player: `https://zeno.fm/player/jorge-solla-1313/` (verificado agora: HTTP 200, widget oficial `noindex`, sem X-Frame-Options — permite iframe; **carrega Google Analytics `G-2T527NZWVM` e redes de anúncio** — por isso a recomendação de facade). +- Fonte dos jingles: a collection existente do S21, publicados via `getPublishedJingleItems()` (cache tag `jingles`) — não recadastrar mídia nem criar coleção. +- Arquivos-fonte locais (`/home/fsolla/Downloads/Jingles/`): `Jorge Solla 1313 - Axé.mp3` (MP3, pronto) + capa `Jorge Solla 1313 - Axé.png`; `Jorge Solla 1313 - Forró.wav` (converter p/ MP3) + capa `Jorge Solla 1313 - Forró.jpeg`; `Jorge Solla 1313 - Pagodão.wav` (converter p/ MP3) + capa `Jorge Solla 1313 - Pagodão.png`. Títulos exibidos: `Axé`, `Forró`, `Pagodão`; ordem sugerida 1/2/3; `published` ligado. +- Contexto: `/jingles` (Issue #1222) e o link do rodapé ficam intocados; a home hoje é `https://jorgesolla1313.com.br/` (estática). + +## Direção no codebase (hipótese) + +- **Áreas prováveis:** seção nova na home — `src/app/(frontend)/(home)/page.tsx` e/ou componente em `src/components/jingles/`; CSS em `src/app/(frontend)/styles.css` no padrão `campaign-section-*` / tokens `[data-theme='campaign-site']`. +- **Reuso (não recriar):** `JinglePlayer`/`JingleViewModel` e `getPublishedJingleItems()` do S21 (card sem CSS acoplado à página). Rádio: client component facade que só monta o iframe do zeno após o clique. +- **Posição (recomendação):** depois de `CampaignStorySection`, antes de `CampaignCardsSection` — cards e newsletter seguem como blocos finais. +- **Precedente a olhar:** `CampaignStorySection` (iframe YouTube `nocookie`) e a linguagem do card em `docs/plans/jingles-site-publico-ui-design.html`. +- **Risco de acoplamento:** manter a home estática (usar o `unstable_cache` existente); e2e mede overflow horizontal da home; `src/components/jingles` mapeia para o e2e `frontendJingles`; não mudar o player nem a página `/jingles`. + +## Dependências + +- **Publicação dos 3 jingles no admin de produção (ops — pendente do S21).** Hoje há **0 publicados**: `/jingles` responde no estado vazio e a home não tem o link. Passos: (1) converter `Forró.wav` e `Pagodão.wav` para MP3 (o `Axé` já é MP3; WAV não vai ao site — decisão do S21); (2) subir capas (`Axé.png`, `Forró.jpeg`, `Pagodão.png`) e áudios na collection `jingle` do admin de produção, títulos `Axé`/`Forró`/`Pagodão`, `order` 1/2/3, `published` ligado; (3) conferir `/jingles` e depois a seção da home (os hooks revalidam a tag `jingles`). Sem essa publicação, a seção mostra apenas a rádio (fail-closed) — o código do S22 não publica conteúdo. +- Jingles publicados do S21 e estação ativa no zeno.fm. +- Design hi-fi aprovado no gate. Nenhuma dura de código. + +## Fora de escopo + +- Analytics de play/download, contagem de ouvintes e status "no ar". +- Share kit dos jingles; letras, transcrição ou páginas por jingle. +- Alterar o player existente ou a página `/jingles` (S21). +- Novo schema/collection ou segundo cadastro de mídia. +- Embed da rádio em outras páginas (nav/rodapé) e redesign do shell/home. + +## Rabbit holes de produto + +- **"Melhorar o player".** Se alguém "só completar": vira projeto de player custom. **Corte neste item:** reusar o player do S21 como está. +- **Contador de ouvintes / "no ar agora".** Se alguém "só completar": API do zeno, polling, dado frágil. **Corte:** a rádio é um botão de ouvir, não um dashboard. +- **Stream direto num `