fsolla/teqo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

plan(S7): cards "Acompanhe de perto" sem raio, imagem de borda a borda, chips removidos (Related #90) #92

Merged
fsolla merged 2 commits from plans/plan-issue-14 into main 2026-08-19 18:54:11 +00:00
Conversation 0 Commits 2 Files changed 4 +250
4 changed files with 250 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/plans/cards-acompanhe-de-perto-polimento-ui-draft-desktop.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
docs/plans/cards-acompanhe-de-perto-polimento-ui-draft-mobile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

143
docs/plans/cards-acompanhe-de-perto-polimento-ui-draft.html Normal file
View file

@ -0,0 +1,143 @@
<!doctype html>
<html lang="pt-BR">
<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>
UI draft — Cards da seção "Acompanhe de perto": sem raio, imagem de borda a borda, chip
removido
</title>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<main class="mx-auto max-w-6xl p-8">
<p class="text-sm text-zinc-400">
Visitante da home pública de campanha (jorgesolla1313) — cards da seção "Acompanhe de perto"
propostos: sem cantos arredondados, imagem de borda a borda no card, texto com respiro
interno, chip removido de todos os cards (posts do site e origens externas). Cenário 1:
desktop. Cenário 2: mobile ~390px.
</p>
<section data-shot="desktop" class="mt-8 border-y border-zinc-800 bg-zinc-200">
<div class="mx-auto w-full max-w-[1160px] px-5 py-10 sm:px-8 lg:px-10">
<div class="flex flex-wrap items-end justify-between gap-3">
<div>
<p class="text-xs font-black uppercase tracking-[0.1em] text-red-700">
Acompanhe de perto
</p>
<h2 class="mt-1 text-2xl font-black tracking-tight text-zinc-900">
A caminhada, em tempo real
</h2>
<p class="mt-1 text-sm text-zinc-600">
Bastidores, caravanas e as lutas do mandato: conteúdo atualizado, direto das redes.
</p>
</div>
<div class="flex gap-4 text-sm font-bold text-red-700 underline-offset-4">
<span>Ver artigos →</span>
<span>Seguir no Instagram →</span>
<span>YouTube →</span>
</div>
</div>
<div class="mt-6 grid grid-cols-4 gap-4">
<div class="col-span-2 row-span-2">
<article class="flex h-full flex-col border border-zinc-400 bg-white shadow-sm">
<div class="relative aspect-video w-full shrink-0 bg-zinc-300"></div>
<div class="flex flex-1 flex-col gap-1 p-3">
<h3 class="text-base font-bold leading-snug text-zinc-900">
Caravana do Jorge chega ao interior com mutirão de saúde
</h3>
<p class="text-xs leading-relaxed text-zinc-600">
Equipe percorreu quatro municípios e levou atendimento, roda de conversa e a
defesa da retomada do programa.
</p>
<span class="mt-auto text-xs text-zinc-600">há 2 horas · Saúde</span>
</div>
</article>
</div>
<article class="flex h-full flex-col border border-zinc-400 bg-white shadow-sm">
<div class="relative aspect-video w-full shrink-0 bg-zinc-300"></div>
<div class="flex flex-1 flex-col gap-1 p-3">
<h3 class="text-sm font-bold leading-snug text-zinc-900">
Plenária em Feira de Santana debate a reforma tributária
</h3>
<span class="mt-auto text-xs text-zinc-600">há 5 horas · Eleitoral</span>
</div>
</article>
<article class="flex h-full flex-col border border-zinc-400 bg-white shadow-sm">
<div class="relative aspect-video w-full shrink-0 bg-zinc-300"></div>
<div class="flex flex-1 flex-col gap-1 p-3">
<h3 class="text-sm font-bold leading-snug text-zinc-900">
Jorge em visita à fábrica de remédios no Polo Petroquímico
</h3>
<span class="mt-auto text-xs text-zinc-600">há 1 dia · Mandato</span>
</div>
</article>
<article class="flex h-full flex-col border border-zinc-400 bg-white shadow-sm">
<div class="relative aspect-video w-full shrink-0 bg-zinc-300"></div>
<div class="flex flex-1 flex-col gap-1 p-3">
<h3 class="text-sm font-bold leading-snug text-zinc-900">
Direto da caminhada: o povo no centro do projeto
</h3>
<span class="mt-auto text-xs text-zinc-600">há 1 dia · 12 mil visualizações</span>
</div>
</article>
<article class="flex h-full flex-col border border-zinc-400 bg-white shadow-sm">
<div class="relative aspect-square w-full shrink-0 bg-zinc-300"></div>
<div class="flex flex-1 flex-col gap-1 p-3">
<h3 class="text-sm font-bold leading-snug text-zinc-900">
Mutirão de castração gratuita reúne famílias no bairro
</h3>
<span class="mt-auto text-xs text-zinc-600">há 2 dias</span>
</div>
</article>
</div>
</div>
</section>
<section data-shot="mobile" class="mt-8 w-[390px] border-y border-zinc-800 bg-zinc-200">
<div class="px-5 py-8">
<p class="text-xs font-black uppercase tracking-[0.1em] text-red-700">
Acompanhe de perto
</p>
<h2 class="mt-1 text-xl font-black tracking-tight text-zinc-900">
A caminhada, em tempo real
</h2>
<p class="mt-1 text-sm text-zinc-600">
Bastidores, caravanas e as lutas do mandato: conteúdo atualizado, direto das redes.
</p>
<div class="mt-5">
<article class="flex h-full flex-col border border-zinc-400 bg-white shadow-sm">
<div class="relative aspect-video w-full shrink-0 bg-zinc-300"></div>
<div class="flex flex-1 flex-col gap-1 p-3">
<h3 class="text-sm font-bold leading-snug text-zinc-900">
Direto da caminhada: o povo no centro do projeto
</h3>
<p class="text-xs leading-relaxed text-zinc-600">
Do comício em Salvador aos mutirões no interior, o dia a dia da campanha em vídeo,
direto do canal.
</p>
<span class="mt-auto text-xs text-zinc-600">há 1 dia · 12 mil visualizações</span>
</div>
</article>
<div class="mt-3 flex items-center justify-center gap-2">
<span class="h-2 w-2 rounded-full bg-red-700"></span>
<span class="h-2 w-2 rounded-full bg-zinc-500"></span>
<span class="h-2 w-2 rounded-full bg-zinc-500"></span>
<span class="h-2 w-2 rounded-full bg-zinc-500"></span>
<span class="h-2 w-2 rounded-full bg-zinc-500"></span>
</div>
<p class="mt-2 text-center text-xs font-semibold text-zinc-600">
1 de 5 · deslize para ver os próximos
</p>
</div>
</div>
</section>
</main>
</body>
</html>

107
docs/plans/cards-acompanhe-de-perto-polimento.md Normal file
View file

@ -0,0 +1,107 @@
# Cards da seção "Acompanhe de perto": sem cantos arredondados, imagem de borda a borda, chip removido
Status: rascunho
Atualizado em: 2026-08-19
Issue: #90
Priority: P2
Model: composer-2.5
Impeccable: B — encaixe nos cards da seção "Acompanhe de perto" da home pública (jorgesolla1313)
Rascunho UI: docs/plans/cards-acompanhe-de-perto-polimento-ui-draft.html + PNGs embutidos abaixo
Appetite: ~0,5–1 dia de eng — CSS em um componente + ajuste de teste
Responsável: —
## Intenção
Os cards da seção "Acompanhe de perto" (a home de campanha, bento 1+4 no desktop e carrossel no
mobile) ficaram com cara de "card de app": cantos arredondados, imagem de capa emoldurada por um
respiro de padding e um chip "Notícia" repetido em todo post do site. O desejo é um look mais
editorial e direto: **cantos retos**, **imagem de capa de borda a borda no card** e **chips de
badge removidos de todos os cards** (posts do site e origens externas — decisão do gate) — o
texto interno continua com respiro em relação às bordas do card. Nada além disso muda: o mesmo
componente serve o bento e o carrossel, e a mudança vale para os dois.
## Persona e fluxo
- **Persona / contexto:** visitante da home pública de campanha, navegando no celular ou desktop;
rola até a seção "Acompanhe de perto" e escaneia os cards.
- **Job principal:** ver o conteúdo de relance — a imagem é o chamariz, o título e a data seguem
abaixo, sem ruído de etiqueta repetida.
- **Fluxo desejado:** a seção abre como hoje; cada card mostra a capa em tela cheia, cantos retos,
e o texto respira da borda; nenhum chip de badge polui a leitura; o compartilhamento (S4) segue
disponível no canto.
- **Anti-goals de produto:** não redesenhar a seção (banda de fundo do S5, textos, links e
carrossel seguem iguais); não mexer em outras seções da home; não mudar tokens de cor ou o
comportamento fail-closed da seção.
### Rascunho UI (B/C/D)
Cena 1 (desktop — bento 1+4): cards sem raio, capa de borda a borda, texto com `p-3`, nenhum
chip de badge em nenhum card:
![Rascunho UI — desktop](cards-acompanhe-de-perto-polimento-ui-draft-desktop.png)
Cena 2 (mobile ~390px — carrossel): mesmo card do carrossel, capa de borda a borda, sem chip:
![Rascunho UI — mobile](cards-acompanhe-de-perto-polimento-ui-draft-mobile.png)
## Objetivo e aceite
- Nenhum card da seção tem cantos arredondados — nem o card, nem a capa (desktop e mobile).
- A capa encosta nas bordas superior/laterais do card (sem padding no contêiner do card); o texto
(título, subtítulo, meta) tem padding interno consistente com o respiro atual (`p-3`) em relação
às bordas do card.
- O chip de tipo do post do site ("Notícia" e os demais tipos de post) some dos cards de posts —
e, por decisão do gate, os chips de origem externa (YouTube/Instagram) também são removidos:
nenhum chip de badge aparece em nenhum card.
- O compartilhamento (botão de canto, S4), a grade do bento, o carrossel, os links e o
comportamento fail-closed da seção continuam funcionando; o e2e que assere os textos de badge
(`tests/e2e/frontend.e2e.spec.ts`, loop de `Artigo|Notícia|Campanha|Evento`) é atualizado para o
novo estado visual (e o e2e dos feeds externos, se asserir "YouTube"/"Instagram" na seção).
## Dados (intenção)
- **Vou apresentar dados?** Não — nenhum número novo; só a superfície dos cards muda.
## Direção no codebase (hipótese)
- **Áreas prováveis:** `src/components/CampaignContentCard.tsx` (único componente de card —
classes `rounded-xl`/`rounded-lg` do card e da capa, `p-3` do contêiner, `span` do badge no
canto superior esquerdo da capa; mover o padding para o bloco de texto e remover o badge); o
carrossel (`CampaignContentCarousel.tsx`) herda a mudança por reuso do mesmo card; os dados de
badge (`badgeLabel` em `CampaignContentSection.tsx` / `POST_TYPE_BADGE_LABELS` em
`src/utilities/posts.ts`) tendem a ficar órfãos com a remoção de todos os chips — o executor
decide o que descartar sem quebrar os e2e.
- **Precedente a olhar:** `docs/plans/separacao-visual-secao-conteudos-home.md` (S5 — banda da
seção, que não deve ser tocada) e `docs/plans/secao-conteudos-home-artigos.md` (S1).
- **Risco de acoplamento:** o e2e da home (`tests/e2e/frontend.e2e.spec.ts`) assere os textos de
badge na seção; o `ContentShareButton` vive no canto do card e deve continuar usável sobre a
capa sem padding.
## Dependências
- Nenhuma (S1–S6 entregues e em produção).
## Fora de escopo
- Remover borda ou sombra dos cards (não pedido — a definição contra a banda do S5 continua).
- Mudar textos, links, ordem, capas reais, proporção das capas ou o carrossel em si.
- Polimento de outras seções da home ou tokens de cor.
## Rabbit holes de produto
- **"Já que os cards ficaram retos, aproveita e redesenha a seção".** Explosão: nova paleta,
microinterações, outras seções. **Corte neste item:** só raio, padding do card e chip.
## Questões em aberto (produto)
- **Qual o alcance da remoção do chip?** **Decidido no gate (2026-08-19): B — remover todos os
chips, incluindo YouTube/Instagram** (a identificação da plataforma de origem deixa de aparecer
no card; o link externo segue sinalizado por abrir em nova aba).
## Referências
- Rascunho UI (gate): `docs/plans/cards-acompanhe-de-perto-polimento-ui-draft.html` + PNGs acima
- `src/components/CampaignContentCard.tsx` — card único (bento + carrossel)
- `src/components/CampaignContentSection.tsx` — montagem da seção (badges por fonte)
- `src/components/ContentShareButton.tsx` — controle de compartilhar do canto (S4, intocado)
- `tests/e2e/frontend.e2e.spec.ts` — asserções de badge da seção a atualizar