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

// Mobile: carrossel
<div className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-4 md:grid md:grid-cols-3 md:snap-none md:gap-5 lg:gap-6">

// Card mobile
<article className="w-[280px] flex-none snap-start ... md:w-auto md:flex-none">

2.9 KiB Raw Permalink Blame History