mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-13 23:53:05 +00:00
Add plan and design for jingles mobile carousel
This commit is contained in:
parent
65bc0da0f7
commit
b396ac54c5
2 changed files with 525 additions and 0 deletions
467
docs/plans/jingles-mobile-carousel-ui-design.html
Normal file
467
docs/plans/jingles-mobile-carousel-ui-design.html
Normal file
|
|
@ -0,0 +1,467 @@
|
|||
<!doctype html>
|
||||
<html lang="pt-BR" data-theme="campaign-site">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<title>Design #1188 · Carrossel mobile de jingles</title>
|
||||
<style type="text/tailwindcss">
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #000000;
|
||||
--pt-red: #a21c1c;
|
||||
--pt-red-dark: #47130e;
|
||||
--pt-yellow: #ffe607;
|
||||
--pt-yellow-ink: #000000;
|
||||
--campaign-cream: #fff8f2;
|
||||
--campaign-muted: #6c615e;
|
||||
--campaign-band: #ebe9e9;
|
||||
--campaign-line: rgb(0 0 0 / 12%);
|
||||
--font-exo2: 'Exo 2', 'Arial Black', sans-serif;
|
||||
--font-arimo: Arimo, Arial, sans-serif;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-arimo);
|
||||
}
|
||||
.font-display {
|
||||
font-family: var(--font-exo2);
|
||||
}
|
||||
.stage {
|
||||
box-shadow: 0 26px 80px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.jingle-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--campaign-line);
|
||||
border-radius: 14px;
|
||||
background: white;
|
||||
box-shadow: 0 12px 34px rgb(71 19 14 / 8%);
|
||||
}
|
||||
.cover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--campaign-band);
|
||||
}
|
||||
.cover img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.cover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 58% 0 0;
|
||||
background: linear-gradient(to bottom, transparent, rgb(24 10 9 / 42%));
|
||||
}
|
||||
.play-control {
|
||||
display: inline-flex;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--pt-yellow);
|
||||
color: var(--pt-yellow-ink);
|
||||
box-shadow:
|
||||
0 6px 0 #cfb900,
|
||||
0 10px 22px rgb(0 0 0 / 15%);
|
||||
}
|
||||
.play-control svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
fill: currentColor;
|
||||
}
|
||||
.download-control {
|
||||
display: inline-flex;
|
||||
min-height: 44px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: 1.5px solid rgb(162 28 28 / 32%);
|
||||
border-radius: 10px;
|
||||
color: var(--pt-red);
|
||||
font-family: var(--font-exo2);
|
||||
font-weight: 800;
|
||||
}
|
||||
.focus-ring:focus-visible {
|
||||
outline: 3px solid var(--pt-yellow);
|
||||
outline-offset: 3px;
|
||||
box-shadow: 0 0 0 2px var(--pt-red-dark);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.carousel {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||||
<div
|
||||
class="border-b border-emerald-400/40 bg-emerald-400/10 px-4 py-2 text-center text-[11px] font-black tracking-[0.14em] text-emerald-300 uppercase"
|
||||
>
|
||||
Design tier: openai/gpt-5.6-sol · gate humano obrigatório
|
||||
</div>
|
||||
<main class="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-10">
|
||||
<header class="max-w-4xl">
|
||||
<p class="font-display text-xs font-black tracking-[0.12em] text-red-400 uppercase">
|
||||
Issue #1188 · gate visual
|
||||
</p>
|
||||
<h1 class="font-display mt-2 text-3xl font-black tracking-[-0.03em]">
|
||||
Jingles menores e navegáveis com o polegar
|
||||
</h1>
|
||||
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
|
||||
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.
|
||||
</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300">
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>390px · carrossel com peek</span
|
||||
>
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>1280px · grade existente</span
|
||||
>
|
||||
<span
|
||||
class="rounded-full border border-emerald-400/30 bg-emerald-400/10 px-3 py-2 text-emerald-200"
|
||||
>NEEDS ASSET · nenhum — capas existentes</span
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="mt-12" aria-labelledby="mobile-title">
|
||||
<div class="mb-5">
|
||||
<p class="font-display text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">
|
||||
Cena 01 · mobile 390 · início do carrossel
|
||||
</p>
|
||||
<h2 id="mobile-title" class="font-display mt-1 text-xl font-black">
|
||||
Um card inteiro + a promessa visual do próximo
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="stage mx-auto w-[390px] max-w-full overflow-hidden bg-(--campaign-cream) text-black"
|
||||
>
|
||||
<div class="relative overflow-hidden px-5 pt-9 pb-4">
|
||||
<div class="absolute -top-14 -right-14 size-40 rounded-full bg-(--pt-yellow)/60"></div>
|
||||
<p
|
||||
class="font-display relative text-[10px] font-black tracking-[0.14em] text-(--pt-red) uppercase"
|
||||
>
|
||||
A trilha da nossa caminhada
|
||||
</p>
|
||||
<h3
|
||||
class="font-display relative mt-2 text-[34px] leading-none font-black tracking-[-0.04em]"
|
||||
>
|
||||
Jingles de<br />Jorge Solla
|
||||
</h3>
|
||||
<p class="relative mt-4 text-[15px] leading-6 text-black/70 sm:block hidden">
|
||||
Escolha um jingle, dê o play e escute aqui mesmo.
|
||||
</p>
|
||||
</div>
|
||||
<section aria-label="Jingles publicados" class="bg-white px-4 py-5">
|
||||
<div
|
||||
class="carousel -mx-4 flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth px-4 pb-4"
|
||||
tabindex="0"
|
||||
aria-label="Carrossel de jingles; deslize horizontalmente"
|
||||
>
|
||||
<article class="jingle-card w-[280px] flex-none snap-start">
|
||||
<div class="cover h-40">
|
||||
<img
|
||||
src="jingles-site-publico-ui-design-assets/capa-axe.jpg"
|
||||
alt="Capa oficial do jingle Axé"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<button
|
||||
class="play-control focus-ring"
|
||||
type="button"
|
||||
aria-label="Tocar jingle Jorge Solla 1313, com Nagib Barroso"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h4 class="font-display text-xl leading-[1.02] font-black tracking-[-0.02em]">
|
||||
Jorge Solla 1313
|
||||
</h4>
|
||||
<p class="mt-1.5 text-xs leading-tight font-bold text-(--campaign-muted)">
|
||||
feat. Nagib Barroso
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-(--campaign-muted)">Pronto para tocar</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 h-1.5 rounded-full bg-[#dedbd8]"></div>
|
||||
<div
|
||||
class="mt-2 flex justify-between text-[10px] font-bold tracking-wide text-black/50 uppercase"
|
||||
>
|
||||
<span>Tempo —:—</span><span>Duração —:—</span>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="download-control focus-ring mt-4"
|
||||
aria-label="Baixar jingle Axé em MP3"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M12 3v12" />
|
||||
<path d="m7 10 5 5 5-5" />
|
||||
<path d="M5 21h14" /></svg
|
||||
>Baixar MP3
|
||||
</a>
|
||||
<p class="mt-2 truncate text-center text-[10px] text-black/45">
|
||||
jorge-solla-1313-jingle-axe.mp3
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jingle-card w-[280px] flex-none snap-start">
|
||||
<div class="cover h-40">
|
||||
<img
|
||||
src="jingles-site-publico-ui-design-assets/capa-forro.jpg"
|
||||
alt="Capa oficial do jingle Forró"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<button
|
||||
class="play-control focus-ring"
|
||||
type="button"
|
||||
aria-label="Tocar jingle Jorge Solla 1313, com Felipe Forrozeiro"
|
||||
>
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h4 class="font-display text-xl leading-[1.02] font-black">
|
||||
Jorge Solla 1313
|
||||
</h4>
|
||||
<p class="mt-1.5 text-xs font-bold text-(--campaign-muted)">
|
||||
feat. Felipe Forrozeiro
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-(--campaign-muted)">Pronto para tocar</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 h-1.5 rounded-full bg-[#dedbd8]"></div>
|
||||
<div
|
||||
class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"
|
||||
>
|
||||
<span>Tempo —:—</span><span>Duração —:—</span>
|
||||
</div>
|
||||
<a class="download-control mt-4">Baixar MP3</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jingle-card w-[280px] flex-none snap-start">
|
||||
<div class="cover h-40">
|
||||
<img
|
||||
src="jingles-site-publico-ui-design-assets/capa-pagodao.jpg"
|
||||
alt="Capa oficial do jingle Pagodão"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<button
|
||||
class="play-control focus-ring"
|
||||
type="button"
|
||||
aria-label="Tocar jingle Jorge Solla 1313, com É O MT"
|
||||
>
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h4 class="font-display text-xl leading-[1.02] font-black">
|
||||
Jorge Solla 1313
|
||||
</h4>
|
||||
<p class="mt-1.5 text-xs font-bold text-(--campaign-muted)">feat. É O MT</p>
|
||||
<p class="mt-2 text-xs text-(--campaign-muted)">Pronto para tocar</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 h-1.5 rounded-full bg-[#dedbd8]"></div>
|
||||
<div
|
||||
class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"
|
||||
>
|
||||
<span>Tempo —:—</span><span>Duração —:—</span>
|
||||
</div>
|
||||
<a class="download-control mt-4">Baixar MP3</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<p class="mt-1 px-1 text-xs leading-5 text-(--campaign-muted)">
|
||||
Sem autoplay. O áudio só é carregado depois do play.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-16" aria-labelledby="desktop-title">
|
||||
<div class="mb-5">
|
||||
<p
|
||||
class="font-display text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase"
|
||||
>
|
||||
Cena 02 · desktop 1280 · grade preservada
|
||||
</p>
|
||||
<h2 id="desktop-title" class="font-display mt-1 text-xl font-black">
|
||||
Nenhuma mudança material acima de 768px
|
||||
</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto pb-4">
|
||||
<div class="stage mx-auto w-[1280px] bg-(--campaign-cream) px-[60px] py-16 text-black">
|
||||
<div class="flex items-end justify-between gap-6">
|
||||
<div>
|
||||
<p
|
||||
class="font-display text-xs font-black tracking-[0.1em] text-(--pt-red) uppercase"
|
||||
>
|
||||
Jingles oficiais
|
||||
</p>
|
||||
<h3 class="font-display mt-1 text-2xl font-black tracking-[-0.02em]">
|
||||
Dê o play. O próximo ritmo é seu.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-3 gap-6">
|
||||
<article class="jingle-card">
|
||||
<div class="cover aspect-square">
|
||||
<img
|
||||
src="jingles-site-publico-ui-design-assets/capa-axe.jpg"
|
||||
alt="Capa oficial do jingle Axé"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-start gap-4">
|
||||
<button class="play-control focus-ring">
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h4 class="font-display text-2xl leading-[1.02] font-black">
|
||||
Jorge Solla 1313
|
||||
</h4>
|
||||
<p class="mt-1.5 text-[13px] font-bold text-(--campaign-muted)">
|
||||
feat. Nagib Barroso
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
|
||||
<div
|
||||
class="mt-2 flex justify-between text-[11px] font-bold text-black/50 uppercase"
|
||||
>
|
||||
<span>Tempo —:—</span><span>Duração —:—</span>
|
||||
</div>
|
||||
<a class="download-control mt-5">Baixar MP3</a>
|
||||
<p class="mt-3 truncate text-center text-[11px] text-black/45">
|
||||
jorge-solla-1313-jingle-axe.mp3
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jingle-card">
|
||||
<div class="cover aspect-square">
|
||||
<img
|
||||
src="jingles-site-publico-ui-design-assets/capa-forro.jpg"
|
||||
alt="Capa oficial do jingle Forró"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-start gap-4">
|
||||
<button class="play-control focus-ring">
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h4 class="font-display text-2xl leading-[1.02] font-black">
|
||||
Jorge Solla 1313
|
||||
</h4>
|
||||
<p class="mt-1.5 text-[13px] font-bold text-(--campaign-muted)">
|
||||
feat. Felipe Forrozeiro
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
|
||||
<div
|
||||
class="mt-2 flex justify-between text-[11px] font-bold text-black/50 uppercase"
|
||||
>
|
||||
<span>Tempo —:—</span><span>Duração —:—</span>
|
||||
</div>
|
||||
<a class="download-control mt-5">Baixar MP3</a>
|
||||
<p class="mt-3 truncate text-center text-[11px] text-black/45">
|
||||
jorge-solla-1313-jingle-forro.mp3
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jingle-card">
|
||||
<div class="cover aspect-square">
|
||||
<img
|
||||
src="jingles-site-publico-ui-design-assets/capa-pagodao.jpg"
|
||||
alt="Capa oficial do jingle Pagodão"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-start gap-4">
|
||||
<button class="play-control focus-ring">
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h4 class="font-display text-2xl leading-[1.02] font-black">
|
||||
Jorge Solla 1313
|
||||
</h4>
|
||||
<p class="mt-1.5 text-[13px] font-bold text-(--campaign-muted)">
|
||||
feat. É O MT
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
|
||||
<div
|
||||
class="mt-2 flex justify-between text-[11px] font-bold text-black/50 uppercase"
|
||||
>
|
||||
<span>Tempo —:—</span><span>Duração —:—</span>
|
||||
</div>
|
||||
<a class="download-control mt-5">Baixar MP3</a>
|
||||
<p class="mt-3 truncate text-center text-[11px] text-black/45">
|
||||
jorge-solla-1313-jingle-pagodao.mp3
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="mt-16 rounded-2xl border border-zinc-800 bg-zinc-900 p-5"
|
||||
aria-labelledby="behavior-title"
|
||||
>
|
||||
<p class="font-display text-[11px] font-black tracking-[0.12em] text-sky-300 uppercase">
|
||||
Contrato visual mobile
|
||||
</p>
|
||||
<h2 id="behavior-title" class="font-display mt-1 text-xl font-black">
|
||||
Pistas de interação que não dependem de uma seta
|
||||
</h2>
|
||||
<ol class="mt-4 grid gap-3 text-sm leading-6 text-zinc-300 md:grid-cols-3">
|
||||
<li class="rounded-xl border border-zinc-700 bg-zinc-950/50 p-4">
|
||||
<strong class="font-display block text-white">1 · Peek</strong>O segundo card aparece
|
||||
cortado na borda direita e comunica continuidade.
|
||||
</li>
|
||||
<li class="rounded-xl border border-zinc-700 bg-zinc-950/50 p-4">
|
||||
<strong class="font-display block text-white">2 · Snap</strong>Cada arrasto termina com
|
||||
um card alinhado ao início da faixa.
|
||||
</li>
|
||||
<li class="rounded-xl border border-zinc-700 bg-zinc-950/50 p-4">
|
||||
<strong class="font-display block text-white">3 · Teclado</strong>A faixa recebe foco e
|
||||
mantém os controles de cada card individualmente acessíveis.
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
58
docs/plans/jingles-mobile-carousel.md
Normal file
58
docs/plans/jingles-mobile-carousel.md
Normal file
|
|
@ -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
|
||||
<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">
|
||||
```
|
||||
Loading…
Reference in a new issue