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

Compare commits

merge into: fsolla:main
Branches Tags
fsolla:main
fsolla:cheapest-inference-global-worktree-preset
fsolla:C141-perfis-de-permissao-por-assessor-visao-edicao-configura
fsolla:S10-pixel-do-meta-facebook-na-pagina-publica-de-campanha-cam
fsolla:S8-s8-secao-de-video-da-historia-na-home-de-campanha
fsolla:plans/plan-issue-15
fsolla:S9-captura-de-novidades-da-campanha-na-home-publica-form-cta
fsolla:INF3-teqo-deploy-cleanup
fsolla:plans/plan-issue-11
fsolla:S7-cards-da-secao-acompanhe-de-perto-sem-cantos-arredondados
fsolla:plans/plan-issue-12
fsolla:plans/plan-issue-13
fsolla:plans/plan-issue-14
fsolla:OPS62-followup-ci-flake-do-municipalitieswithoutupdatetool-u
fsolla:S4-compartilhar-conteudos-da-home-no-whatsapp
fsolla:OPS69-ops69-admin-do-payload-abre-em-branco-em-producao-impo
fsolla:OPS64-ops64-forgejo-pr-automerge-waitforchecks-conta-o-propr
fsolla:OPS68-docs-drift-github-era-no-agent-ops-readme-gh-pr-vercel
fsolla:OPS67-forgejo-retry-com-backoff-nos-fetchs-do-forgejo-api-fe
fsolla:OPS66-ops66-deploy-build-de-geracao-estatica-le-schema-novo-
fsolla:OPS65-ci-do-main-em-janela-de-30-min-matar-o-agent-pool-work
fsolla:S3-secao-de-conteudos-na-home-de-campanha-instagram
fsolla:OPS62-ci-cancelar-jobs-irmaos-quando-um-job-falha-fail-fast-
fsolla:plans/plan-issue-10
fsolla:S6-FOLLOWUP-e2e-cli-playwright-ignora-filtros-grep-posiciona
fsolla:OPS61-forgejo-contracts-de-merge-flip-quebrados-labels-nao-f
fsolla:OPS63-doc-guard-tambem-no-pre-push-changelog-append-only-agr
fsolla:OPS60-ops60-guard-de-intencao-explicita-para-escrita-no-buck
fsolla:OPS65-ci-main-janela-30min-e-matar-pool
fsolla:plans/plan-issue-9
fsolla:OPS59-pre-push-sem-e2e-e2e-roda-uma-vez-no-ci-gate-local-fic
fsolla:OPS52-media-guard-ops52-media-guard-de-intencao-explicita-pa
fsolla:OPS57-guard-forgejo-pr-automerge-alargar-gatilho-do-workflow
fsolla:OPS58-atualizar-artigos-de-producao-com-os-novos-posts-do-jo
fsolla:plans/plan-issue-8
fsolla:plans/plan-issue-7
fsolla:OPS56-forgejo-pr-automerge-falso-positivo-ja-mergeado-com-pr
fsolla:OPS52-media-ops52-media-recuperar-os-arquivos-de-media-de-pr
fsolla:plans/plan-issue-6
fsolla:plans/plan-issue-5
fsolla:plans/plan-issue-4
fsolla:OPS57-worktree-migra-para-worktrees-teqo
fsolla:S1-secao-de-conteudos-na-home-de-campanha-artigos
fsolla:OPS53-ops53-etapa-de-deploy-no-ci-para-o-homeserver-containe
fsolla:OPS52-migrar-a-media-de-producao-do-vercel-blob-para-o-garag
fsolla:OPS55-worktree-worktrees-root-env
fsolla:PUB5-slogan-da-campanha-mais-saude-mais-futuro-no-hero-e-no-
fsolla:plans/plan-issue-2
fsolla:plans/plan-issue-3
fsolla:plans/plan-issue-1
fsolla:OPS51-migrar-o-banco-de-producao-do-neon-para-o-postgres-do-
fsolla:pool-state
fsolla:OPS50-spike-services
fsolla:plans/ops50-52-migracao-forgejo-neon-blob
...
pull from: fsolla:plans/plan-issue-5
Branches Tags
fsolla:main
fsolla:cheapest-inference-global-worktree-preset
fsolla:C141-perfis-de-permissao-por-assessor-visao-edicao-configura
fsolla:S10-pixel-do-meta-facebook-na-pagina-publica-de-campanha-cam
fsolla:S8-s8-secao-de-video-da-historia-na-home-de-campanha
fsolla:plans/plan-issue-15
fsolla:S9-captura-de-novidades-da-campanha-na-home-publica-form-cta
fsolla:INF3-teqo-deploy-cleanup
fsolla:plans/plan-issue-11
fsolla:S7-cards-da-secao-acompanhe-de-perto-sem-cantos-arredondados
fsolla:plans/plan-issue-12
fsolla:plans/plan-issue-13
fsolla:plans/plan-issue-14
fsolla:OPS62-followup-ci-flake-do-municipalitieswithoutupdatetool-u
fsolla:S4-compartilhar-conteudos-da-home-no-whatsapp
fsolla:OPS69-ops69-admin-do-payload-abre-em-branco-em-producao-impo
fsolla:OPS64-ops64-forgejo-pr-automerge-waitforchecks-conta-o-propr
fsolla:OPS68-docs-drift-github-era-no-agent-ops-readme-gh-pr-vercel
fsolla:OPS67-forgejo-retry-com-backoff-nos-fetchs-do-forgejo-api-fe
fsolla:OPS66-ops66-deploy-build-de-geracao-estatica-le-schema-novo-
fsolla:OPS65-ci-do-main-em-janela-de-30-min-matar-o-agent-pool-work
fsolla:S3-secao-de-conteudos-na-home-de-campanha-instagram
fsolla:OPS62-ci-cancelar-jobs-irmaos-quando-um-job-falha-fail-fast-
fsolla:plans/plan-issue-10
fsolla:S6-FOLLOWUP-e2e-cli-playwright-ignora-filtros-grep-posiciona
fsolla:OPS61-forgejo-contracts-de-merge-flip-quebrados-labels-nao-f
fsolla:OPS63-doc-guard-tambem-no-pre-push-changelog-append-only-agr
fsolla:OPS60-ops60-guard-de-intencao-explicita-para-escrita-no-buck
fsolla:OPS65-ci-main-janela-30min-e-matar-pool
fsolla:plans/plan-issue-9
fsolla:OPS59-pre-push-sem-e2e-e2e-roda-uma-vez-no-ci-gate-local-fic
fsolla:OPS52-media-guard-ops52-media-guard-de-intencao-explicita-pa
fsolla:OPS57-guard-forgejo-pr-automerge-alargar-gatilho-do-workflow
fsolla:OPS58-atualizar-artigos-de-producao-com-os-novos-posts-do-jo
fsolla:plans/plan-issue-8
fsolla:plans/plan-issue-7
fsolla:OPS56-forgejo-pr-automerge-falso-positivo-ja-mergeado-com-pr
fsolla:OPS52-media-ops52-media-recuperar-os-arquivos-de-media-de-pr
fsolla:plans/plan-issue-6
fsolla:plans/plan-issue-5
fsolla:plans/plan-issue-4
fsolla:OPS57-worktree-migra-para-worktrees-teqo
fsolla:S1-secao-de-conteudos-na-home-de-campanha-artigos
fsolla:OPS53-ops53-etapa-de-deploy-no-ci-para-o-homeserver-containe
fsolla:OPS52-migrar-a-media-de-producao-do-vercel-blob-para-o-garag
fsolla:OPS55-worktree-worktrees-root-env
fsolla:PUB5-slogan-da-campanha-mais-saude-mais-futuro-no-hero-e-no-
fsolla:plans/plan-issue-2
fsolla:plans/plan-issue-3
fsolla:plans/plan-issue-1
fsolla:OPS51-migrar-o-banco-de-producao-do-neon-para-o-postgres-do-
fsolla:pool-state
fsolla:OPS50-spike-services
fsolla:plans/ops50-52-migracao-forgejo-neon-blob

1 commit
main ... plans/plan

Author SHA1 Message Date
Francisco Solla
27ad9bfb02 plans(S5): separação visual da seção Acompanhe de perto (Related #33)
All checks were successful
CI (PR) / docs-guards (pull_request) Successful in 8s
Details
Agent pool supervisor / tick (pull_request) Successful in 32s
Details
CI (PR) / int (pull_request) Has been skipped
Details
CI (PR) / checks (pull_request) Successful in 2s
Details
CI (PR) / plans-only-closes (pull_request) Successful in 7s
Details
CI (PR) / format (pull_request) Successful in 1m5s
Details
CI (PR) / build (pull_request) Has been skipped
Details
Promote plan-issue Related on main merge / plan-issue-ready (pull_request) Successful in 21s
Details
CI (PR) / scope (pull_request) Successful in 35s
Details
CI (PR) / e2e (1) (pull_request) Has been skipped
Details
CI (PR) / e2e (2) (pull_request) Has been skipped
Details
CI (PR) / typecheck (pull_request) Has been skipped
Details
CI (PR) / knip (pull_request) Has been skipped
Details
CI (PR) / cycles (pull_request) Has been skipped
Details
CI (PR) / unit (pull_request) Has been skipped
Details
Agent PR Ready + auto-merge / ready-automerge (pull_request) Has been skipped
Details
CI (PR) / lint (pull_request) Successful in 46s
Details
Main merge flips claimed issues to done + in-prod / issue-done (pull_request) Successful in 14s
Details
2026-08-18 07:55:33 -03:00
5 changed files with 479 additions and 0 deletions
Show stats Expand all files Collapse all files

BIN
docs/plans/separacao-visual-secao-conteudos-home-ui-draft-desktop-alternativo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
docs/plans/separacao-visual-secao-conteudos-home-ui-draft-desktop-recomendado.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
docs/plans/separacao-visual-secao-conteudos-home-ui-draft-mobile-recomendado.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

368
docs/plans/separacao-visual-secao-conteudos-home-ui-draft.html Normal file
View file

@ -0,0 +1,368 @@
<!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 — Separação visual da seção "Acompanhe de perto"</title>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<main class="mx-auto max-w-5xl p-8">
<p class="text-sm text-zinc-400">
Visitante da home pública de campanha (jorgesolla1313). Hoje a prova social (faixa de
números) e a seção "Acompanhe de perto" têm o MESMO fundo branco e ficam coladas — o
objetivo é separar as duas zonas. Cenário 1 (recomendado): a seção de conteúdos ganha uma
banda de fundo própria. Cenário 2 (alternativo): borda fina (hairline) sem mudar o fundo.
Por baixo, o contexto real: a seção "Por que essa eleição importa" (fundo escuro).
</p>
<!-- ============ CENA 1: desktop — recomendado (banda de fundo) ============ -->
<section
data-shot="desktop-recomendado"
class="mt-8 overflow-hidden rounded-2xl bg-white text-zinc-900 shadow-xl"
>
<!-- contexto: prova social (branco, igual hoje) -->
<div class="flex items-center justify-center gap-10 py-3">
<span class="text-sm font-bold text-zinc-400">3.333 proposições</span>
<span class="text-sm font-bold text-zinc-400">1.031 discursos</span>
<span class="text-sm font-bold text-zinc-400">3º mandato</span>
</div>
<!-- ===== SEÇÃO DE CONTEÚDOS — banda cinza (proposta) ===== -->
<div class="border-y border-zinc-300 bg-zinc-100">
<div class="px-6 py-8">
<div class="flex flex-wrap items-end justify-between gap-3">
<div>
<p class="text-xs font-extrabold tracking-[0.14em] text-zinc-500 uppercase">
Acompanhe de perto
</p>
<h2 class="mt-1 text-2xl font-extrabold text-zinc-900">
A caminhada, em tempo real
</h2>
<p class="mt-1 text-sm text-zinc-500">
Bastidores, caravanas e as lutas do mandato: conteúdo atualizado, direto das
redes.
</p>
</div>
<div class="text-sm font-bold">
<span class="text-zinc-500 underline-offset-4 underline">Ver artigos →</span>
</div>
</div>
<!-- bento: 1 grande + 4 pequenos — cards brancos saltam na banda -->
<div class="mt-5 grid grid-cols-4 gap-4">
<a
href="#"
class="col-span-2 row-span-2 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
>
Artigo
</span>
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
capa 16:9 (placeholder)
</span>
</div>
<div class="flex flex-1 flex-col gap-1">
<h3 class="text-base leading-snug font-extrabold text-zinc-900">
Título do artigo em destaque, duas ou três linhas para caber
</h3>
<p class="text-xs leading-relaxed text-zinc-500">
Resumo curto do artigo quando houver, uma linha de contexto.
</p>
<span class="mt-auto text-xs text-zinc-400">há 1 dia · categoria</span>
</div>
</a>
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>capa 16:9</span
>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 2 dias · categoria</span>
</a>
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>capa 16:9</span
>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 5 dias · categoria</span>
</a>
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>capa 16:9</span
>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 6 dias · categoria</span>
</a>
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>capa 16:9</span
>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 3 dias · categoria</span>
</a>
</div>
</div>
</div>
<!-- contexto: "Por que essa eleição importa" (fundo escuro) -->
<div class="bg-zinc-900 px-6 py-6 text-white">
<p class="text-xs font-extrabold tracking-[0.14em] text-zinc-400 uppercase">
Por que essa eleição importa
</p>
<p class="mt-1 text-lg font-extrabold">
Eleger deputado é coisa séria. O Congresso tem nas mãos vidas reais e o SUS.
</p>
</div>
</section>
<!-- ============ CENA 2: desktop — alternativo (hairline, fundo branco) ============ -->
<section
data-shot="desktop-alternativo"
class="mt-8 overflow-hidden rounded-2xl bg-white text-zinc-900 shadow-xl"
>
<!-- contexto: prova social (branco, igual hoje) -->
<div class="flex items-center justify-center gap-10 py-3">
<span class="text-sm font-bold text-zinc-400">3.333 proposições</span>
<span class="text-sm font-bold text-zinc-400">1.031 discursos</span>
<span class="text-sm font-bold text-zinc-400">3º mandato</span>
</div>
<!-- ===== SEÇÃO DE CONTEÚDOS — branca + hairlines (proposta) ===== -->
<div class="border-t border-b border-zinc-300">
<div class="px-6 py-8">
<div class="flex flex-wrap items-end justify-between gap-3">
<div>
<p class="text-xs font-extrabold tracking-[0.14em] text-zinc-500 uppercase">
Acompanhe de perto
</p>
<h2 class="mt-1 text-2xl font-extrabold text-zinc-900">
A caminhada, em tempo real
</h2>
<p class="mt-1 text-sm text-zinc-500">
Bastidores, caravanas e as lutas do mandato: conteúdo atualizado, direto das
redes.
</p>
</div>
<div class="text-sm font-bold">
<span class="text-zinc-500 underline-offset-4 underline">Ver artigos →</span>
</div>
</div>
<!-- bento: 1 grande + 4 pequenos — cards brancos sobre branco (igual hoje) -->
<div class="mt-5 grid grid-cols-4 gap-4">
<a
href="#"
class="col-span-2 row-span-2 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
>
Artigo
</span>
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
capa 16:9 (placeholder)
</span>
</div>
<div class="flex flex-1 flex-col gap-1">
<h3 class="text-base leading-snug font-extrabold text-zinc-900">
Título do artigo em destaque, duas ou três linhas para caber
</h3>
<p class="text-xs leading-relaxed text-zinc-500">
Resumo curto do artigo quando houver, uma linha de contexto.
</p>
<span class="mt-auto text-xs text-zinc-400">há 1 dia · categoria</span>
</div>
</a>
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>capa 16:9</span
>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 2 dias · categoria</span>
</a>
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>capa 16:9</span
>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 5 dias · categoria</span>
</a>
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>capa 16:9</span
>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 6 dias · categoria</span>
</a>
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>capa 16:9</span
>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 3 dias · categoria</span>
</a>
</div>
</div>
</div>
<!-- contexto: "Por que essa eleição importa" (fundo escuro) -->
<div class="bg-zinc-900 px-6 py-6 text-white">
<p class="text-xs font-extrabold tracking-[0.14em] text-zinc-400 uppercase">
Por que essa eleição importa
</p>
<p class="mt-1 text-lg font-extrabold">
Eleger deputado é coisa séria. O Congresso tem nas mãos vidas reais e o SUS.
</p>
</div>
</section>
<!-- ============ CENA 3: mobile (~390px) — recomendado (banda) ============ -->
<section
data-shot="mobile-recomendado"
class="mt-8 w-[390px] overflow-hidden rounded-2xl bg-white text-zinc-900 shadow-xl"
>
<!-- contexto: prova social -->
<div class="flex items-center justify-center gap-6 py-2.5">
<span class="text-xs font-bold text-zinc-400">3.333 proposições</span>
<span class="text-xs font-bold text-zinc-400">1.031 discursos</span>
<span class="text-xs font-bold text-zinc-400">3º mandato</span>
</div>
<!-- seção de conteúdos — banda -->
<div class="border-y border-zinc-300 bg-zinc-100">
<div class="px-4 py-6">
<p class="text-xs font-extrabold tracking-[0.14em] text-zinc-500 uppercase">
Acompanhe de perto
</p>
<h2 class="mt-1 text-xl font-extrabold text-zinc-900">A caminhada, em tempo real</h2>
<p class="mt-1 text-sm text-zinc-500">
Bastidores, caravanas e as lutas do mandato: conteúdo atualizado, direto das redes.
</p>
<!-- carrossel: 1 card por tela -->
<div class="mt-4 overflow-hidden rounded-xl">
<a
href="#"
class="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm"
>
<div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
<span
class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
>
Artigo
</span>
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
capa 16:9 (placeholder)
</span>
</div>
<h3 class="text-sm leading-snug font-extrabold text-zinc-900">
Título do artigo recente, até duas linhas
</h3>
<span class="text-xs text-zinc-400">há 1 dia · categoria</span>
</a>
</div>
<!-- dots + contador -->
<div
class="mt-3 flex items-center justify-center gap-2"
aria-label="Página do carrossel"
>
<span class="h-2 w-2 rounded-full bg-zinc-300"></span>
<span class="h-2 w-2 rounded-full bg-zinc-900"></span>
<span class="h-2 w-2 rounded-full bg-zinc-300"></span>
<span class="h-2 w-2 rounded-full bg-zinc-300"></span>
<span class="h-2 w-2 rounded-full bg-zinc-300"></span>
</div>
<p class="mt-2 text-center text-xs font-semibold text-zinc-500">
1 de 5 · deslize para ver os próximos
</p>
</div>
</div>
<!-- contexto: "Por que essa eleição importa" -->
<div class="bg-zinc-900 px-4 py-5 text-white">
<p class="text-xs font-extrabold tracking-[0.14em] text-zinc-400 uppercase">
Por que essa eleição importa
</p>
<p class="mt-1 text-base font-extrabold">
Eleger deputado é coisa séria. O Congresso tem nas mãos vidas reais e o SUS.
</p>
</div>
</section>
</main>
</body>
</html>

111
docs/plans/separacao-visual-secao-conteudos-home.md Normal file
View file

@ -0,0 +1,111 @@
# Separar visualmente a seção "Acompanhe de perto" da prova social na home
Status: rascunho
Atualizado em: 2026-08-18
Issue: #33
Priority: P2
Model: composer-2.5
Impeccable: B — encaixe na seção "Acompanhe de perto" da home pública (jorgesolla1313)
Rascunho UI: docs/plans/separacao-visual-secao-conteudos-home-ui-draft.html + PNGs embutidos abaixo
Appetite: ~0,5 dia de eng — uma superfície, mudança de fundo/borda
Responsável: —
## Intenção
A home de campanha ganhou (S1) a seção "Acompanhe de perto" entre a prova social (faixa de
números "3.333 proposições…") e "Por que essa eleição importa". Mas a prova social e a seção de
conteúdos compartilham o **mesmo fundo branco** e ficam coladas: não dá para ver onde uma termina
e a outra começa. O wireframe aprovado desenhava a seção como uma zona própria (card com
hairlines sobre página de papel); na home toda branca esse desenho se perdeu. A separação precisa
voltar a existir — sem mexer em conteúdo, dados ou comportamento (o fail-closed de esconder a
seção inteira sem posts visíveis continua valendo).
## Persona e fluxo
- **Persona / contexto:** visitante da home pública de campanha, navegando pelo celular ou
desktop na reta final; rola a página do hero para a prova social e depois para o conteúdo.
- **Job principal:** perceber que a faixa de números (curriculum) acabou e que começou uma zona
nova — conteúdo atualizado da campanha.
- **Fluxo desejado:** a prova social aparece como hoje; a seção "Acompanhe de perto" começa com
uma fronteira visível (fundo próprio e/ou linhas), os cards brancos se destacam; abaixo, o
contraste forte com a seção escura já resolve a passagem seguinte.
- **Anti-goals de produto:** não redesenhar a seção (cards, carrossel, links, textos seguem
iguais); não mexer no hero nem em outras seções; não criar terceira cor nova de marca.
### Rascunho UI (B/C/D)
Cena 1 (recomendado, desktop) — a seção ganha banda de fundo própria, cards brancos saltam:
![Rascunho UI — desktop recomendado (banda)](separacao-visual-secao-conteudos-home-ui-draft-desktop-recomendado.png)
Cena 2 (alternativo, desktop) — fundo continua branco, separação só por hairlines:
![Rascunho UI — desktop alternativo (hairline)](separacao-visual-secao-conteudos-home-ui-draft-desktop-alternativo.png)
Cena 3 (recomendado, mobile ~390px):
![Rascunho UI — mobile recomendado (banda)](separacao-visual-secao-conteudos-home-ui-draft-mobile-recomendado.png)
## Objetivo e aceite
- A fronteira entre a faixa de prova social e a seção "Acompanhe de perto" fica visível de
imediato, sem hover e sem rolagem extra — no desktop e no mobile.
- Os cards de conteúdo continuam legíveis e destacados dentro da seção.
- Nada além da separação muda: textos, links, ordem das seções, carrossel e o comportamento
fail-closed (sem posts visíveis, a seção some e Prova → Problema voltam a ser contíguos —
agora a divisão entre eles passa a ser a fronteira da seção escura, que já existe).
## Dados (intenção)
- **Vou apresentar dados?** Não — nenhum número novo; só a superfície da seção muda.
## Direção no codebase (hipótese)
- **Áreas prováveis:** `src/components/CampaignContentSection.tsx` (fundo/borda da seção, hoje
`bg-white`) e/ou `src/app/(frontend)/styles.css` (token de cor existente, ex. `--campaign-band`
`#ebe9e9`, `--campaign-line`). A home em si (`src/app/(frontend)/(home)/page.tsx`) não deve
precisar mudar — a seção é um componente próprio.
- **Precedente a olhar:** `docs/plans/secao-conteudos-home-artigos.md` (S1) e o wireframe
aprovado `docs/campanha/wireframe-solla-1313.html` (seção 7 usa `border-top/bottom: 1px solid
var(--line)` sobre zona de cor própria) — a intenção é restaurar esse desenho na home branca.
- **Risco de acoplamento:** a mesma `--campaign-band` já é fundo da seção "Nossa caminhada" e do
placeholder de capa dos cards; o executor deve conferir o contraste final de cada opção com
esses usos (as seções não são adjacentes, então não há conflito direto).
## Dependências
- Nenhuma (S1 entregue e em produção; S2/S3/S4 seguem em paralelo, o mesmo arquivo pode ser
tocado — serializar só se houver PR simultâneo no componente).
## Fora de escopo
- Redesenho da seção de conteúdos (cards, badges, carrossel, links) — fica nas Issues S2/S3/S4.
- Trocar a cor de fundo de outras seções ou da página inteira (hero, prova social, bandeiras).
- Novo token de cor de marca — usar paleta existente.
## Rabbit holes de produto
- **"Já que vou mexer, dá um polimento geral na seção".** Explosão de escopo: redesenho, nova
paleta, microinterações. **Corte neste item:** só a fronteira com a seção anterior.
- **"Separa tudo com linhas na página toda".** Mexe no shell da home inteira. **Corte:** a
divisão com a seção escura abaixo já existe; só a passagem Prova → Conteúdos está sem fronteira.
## Questões em aberto (produto)
- **Qual o meio de separação?** **Opções:** A — banda de fundo própria na seção (recomendado,
ritmo branco → banda → escuro → banda na página) | B — hairlines (borda fina) mantendo fundo
branco, fiel ao wireframe | C — banda + hairlines juntas. **Recomendação:** A — é o que lê de
longe na home toda branca; B é o mínimo e fica de fallback. _(assumido — validar com produto no
gate)_
- **Se banda: usar a mesma `--campaign-band` da seção "Nossa caminhada"?** **Opções:** sim |
outro tom existente. **Recomendação:** sim — é a "banda cinza" da paleta, já aprovada em
produção; repetir o tom em seções não adjacentes cria ritmo, não confusão.
## Referências
- GitHub Issue #33
- Issue S1 (entregue): `secao-conteudos-home-artigos.md` / #17 (Forgejo)
- Wireframe aprovado: `docs/campanha/wireframe-solla-1313.html` (seção 7)
- Rascunho UI (gate): `docs/plans/separacao-visual-secao-conteudos-home-ui-draft.html`
- `src/components/CampaignContentSection.tsx` — seção alvo (hoje `bg-white`, linha 52)
- `src/app/(frontend)/styles.css` — tokens `--campaign-band` / `--campaign-line`