mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-15 02:23:07 +00:00
58 lines
2.9 KiB
Markdown
58 lines
2.9 KiB
Markdown
# 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
|
|
<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">
|
|
```
|