From b396ac54c5189e943aec5db45732cd3cc8381f67 Mon Sep 17 00:00:00 2001 From: Francisco Solla Date: Tue, 22 Sep 2026 19:46:20 -0300 Subject: [PATCH] Add plan and design for jingles mobile carousel --- .../jingles-mobile-carousel-ui-design.html | 467 ++++++++++++++++++ docs/plans/jingles-mobile-carousel.md | 58 +++ 2 files changed, 525 insertions(+) create mode 100644 docs/plans/jingles-mobile-carousel-ui-design.html create mode 100644 docs/plans/jingles-mobile-carousel.md diff --git a/docs/plans/jingles-mobile-carousel-ui-design.html b/docs/plans/jingles-mobile-carousel-ui-design.html new file mode 100644 index 00000000..d8549249 --- /dev/null +++ b/docs/plans/jingles-mobile-carousel-ui-design.html @@ -0,0 +1,467 @@ + + + + + + + Design #1188 · Carrossel mobile de jingles + + + +
+ Design tier: openai/gpt-5.6-sol · gate humano obrigatório +
+
+
+

+ Issue #1188 · gate visual +

+

+ Jingles menores e navegáveis com o polegar +

+

+ No celular, cada card passa a ter 280px, capa de 160px e snap no início. O recorte do + próximo card funciona como pista de continuidade; no desktop, a grade aprovada de três + colunas permanece intacta. +

+
+ 390px · carrossel com peek + 1280px · grade existente + NEEDS ASSET · nenhum — capas existentes +
+
+ +
+
+

+ Cena 01 · mobile 390 · início do carrossel +

+

+ Um card inteiro + a promessa visual do próximo +

+
+
+
+
+

+ A trilha da nossa caminhada +

+

+ Jingles de
Jorge Solla +

+ +
+
+
+
+
+ Capa oficial do jingle Axé +
+
+
+ +
+

+ Jorge Solla 1313 +

+

+ feat. Nagib Barroso +

+

Pronto para tocar

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

+ jorge-solla-1313-jingle-axe.mp3 +

+
+
+
+
+ Capa oficial do jingle Forró +
+
+
+ +
+

+ Jorge Solla 1313 +

+

+ feat. Felipe Forrozeiro +

+

Pronto para tocar

+
+
+
+
+ Tempo —:—Duração —:— +
+ Baixar MP3 +
+
+
+
+ Capa oficial do jingle Pagodão +
+
+
+ +
+

+ Jorge Solla 1313 +

+

feat. É O MT

+

Pronto para tocar

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

+ Sem autoplay. O áudio só é carregado depois do play. +

+
+
+
+ +
+
+

+ Cena 02 · desktop 1280 · grade preservada +

+

+ Nenhuma mudança material acima de 768px +

+
+
+
+
+
+

+ Jingles oficiais +

+

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

+
+
+
+
+
+ Capa oficial do jingle Axé +
+
+
+ +
+

+ Jorge Solla 1313 +

+

+ feat. Nagib Barroso +

+

Pronto para tocar

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

+ jorge-solla-1313-jingle-axe.mp3 +

+
+
+
+
+ Capa oficial do jingle Forró +
+
+
+ +
+

+ Jorge Solla 1313 +

+

+ feat. Felipe Forrozeiro +

+

Pronto para tocar

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

+ jorge-solla-1313-jingle-forro.mp3 +

+
+
+
+
+ Capa oficial do jingle Pagodão +
+
+
+ +
+

+ Jorge Solla 1313 +

+

+ feat. É O MT +

+

Pronto para tocar

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

+ jorge-solla-1313-jingle-pagodao.mp3 +

+
+
+
+
+
+
+ +
+

+ Contrato visual mobile +

+

+ Pistas de interação que não dependem de uma seta +

+
    +
  1. + 1 · PeekO segundo card aparece + cortado na borda direita e comunica continuidade. +
    2. +
  2. + 2 · SnapCada arrasto termina com + um card alinhado ao início da faixa. +
    3. +
  3. + 3 · TecladoA faixa recebe foco e + mantém os controles de cada card individualmente acessíveis. +
    4. +
+
+
+ + diff --git a/docs/plans/jingles-mobile-carousel.md b/docs/plans/jingles-mobile-carousel.md new file mode 100644 index 00000000..2b25ea1c --- /dev/null +++ b/docs/plans/jingles-mobile-carousel.md @@ -0,0 +1,58 @@ +# Jingles — Carousel mobile e cards menores + +**Issue:** #1249 +**Status:** rascunho +**Appetite:** 45 min +**Prioridade:** P3 +**Depends:** S21 (cards de jingle) + +## Contexto + +Na seção de jingles da home (`src/components/jingles/JingleHomeSection.tsx`) e na página `/jingles`, os cards de jingle são grandes e empilhados no mobile, ocupando muito espaço vertical. O usuário deseja cards menores e em carrossel no mobile, removendo textos explicativos e indicadores de UI. + +## Escopo + +- Modificar `src/components/jingles/JingleCards.tsx` para usar layout de carrossel no mobile. +- Reduzir o tamanho dos cards no mobile (menor padding, imagem menor). +- Manter o layout de grid (3 colunas) no desktop (`md+`). +- Adicionar scroll horizontal com snap no mobile. +- **Remover** o bloco inteiro "Um jingle toca por vez" (icone + texto) de `JingleIntro.tsx` e `JingleHomeSection.tsx`. +- **Remover** o parágrafo mobile "Dê o play para ouvir aqui..." de `JingleIntro.tsx` (manter a versão desktop). +- **Esconder** o parágrafo "Escolha um jingle, dê o play e escute aqui mesmo." no mobile (usar `hidden sm:block` em `JingleIntro.tsx`). +- **Ajustar** o espaçamento no mobile para posicionar o carrossel mais próximo do título (reduzir `pb` do container do título e `py` da seção do carrossel). +- **Remover** indicadores de carrossel: barra de rolagem visual, texto "Arraste para ouvir mais" e paginação "1 de 3". +- **Ajustar** o espaçamento no mobile para posicionar o carrossel mais próximo do título. + +## Fora de escopo + +- Alterar o player de áudio ou controles de play/pause. +- Modificar o layout desktop (Cena 01). +- Alterar a quantidade de jingles exibidos. + +## Decisões + +- **A:** Usar `overflow-x-auto snap-x snap-mandatory` para o carrossel mobile. +- **B:** Cards mobile terão `w-[280px] flex-none` (largura fixa) em vez de `w-full`. +- **C:** Gap entre cards: `gap-4` mobile, `gap-5 sm:gap-6` desktop. +- **D:** Imagem de capa: `h-40` mobile (vs `h-48` desktop). +- **E:** Remover o bloco "Um jingle toca por vez" (icone + texto) de `JingleIntro.tsx` e `JingleHomeSection.tsx`. +- **F:** Remover o parágrafo mobile "Dê o play para ouvir aqui..." de `JingleIntro.tsx` (manter a versão desktop). +- **G:** Não exibir barra de rolagem visual, texto "Arraste para ouvir mais" ou paginação "1 de 3" no carrossel. + +## Critérios de aceite + +- [ ] No mobile (390px), os cards de jingle aparecem em carrossel horizontal. +- [ ] Os cards são menores que os atuais no mobile. +- [ ] O scroll é suave com snap. +- [ ] No desktop (1280px), o layout continua sendo grid de 3 colunas. +- [ ] A acessibilidade (navegação por teclado, leitores de tela) funciona. + +## Notas de implementação + +```tsx +// Mobile: carrossel +
+ +// Card mobile +
+```