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

style(plans S1-S4): prettier pós-commit do lote (fix CI format:check em main) #23

Merged
fsolla merged 1 commit from plans/plan-issue-2 into main 2026-08-18 01:03:30 +00:00
Conversation 0 Commits 1 Files changed 4 +115 -45
4 changed files with 115 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/plans/secao-conteudos-home-artigos.md
View file

@ -49,7 +49,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
- **Vou apresentar dados?** Sim, superfície neste item — mas são **conteúdos** (artigos), não métricas.
- **Decisões desbloqueadas:** o visitante decide qual artigo ler (clique); nenhum número novo de campanha é inventado aqui.
- **Forma:** *adiada ao plano de implementação* — restrição de produto: meta = data/categoria do post (já exibidas no site), sem contadores inventados.
- **Forma:** _adiada ao plano de implementação_ — restrição de produto: meta = data/categoria do post (já exibidas no site), sem contadores inventados.
## Direção no codebase (hipótese)

2
docs/plans/secao-conteudos-home-instagram.md
View file

@ -50,7 +50,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
- **Vou apresentar dados?** Sim, superfície neste item — metadados do post (imagem, legenda, data) vindos da plataforma.
- **Decisões desbloqueadas:** o visitante decide qual post abrir; nada de métricas inventadas.
- **Forma:** *adiada ao plano de implementação* — restrição de produto: legenda/data como a plataforma mostra; sem contadores derivados.
- **Forma:** _adiada ao plano de implementação_ — restrição de produto: legenda/data como a plataforma mostra; sem contadores derivados.
## Direção no codebase (hipótese)

154
docs/plans/secao-conteudos-home-ui-draft.html
View file

@ -9,9 +9,9 @@
<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). Seção 3 da página: logo após a
prova social, imediatamente antes de "Por que essa eleição importa". Card de conteúdo
generalizado (Artigo / YouTube / Instagram) — clique leva ao artigo ou à plataforma.
Visitante da home pública de campanha (jorgesolla1313). Seção 3 da página: logo após a prova
social, imediatamente antes de "Por que essa eleição importa". Card de conteúdo generalizado
(Artigo / YouTube / Instagram) — clique leva ao artigo ou à plataforma.
</p>
<!-- ============ CENA: desktop (estado final, 3 fontes) ============ -->
@ -30,16 +30,16 @@
<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>
<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="flex gap-4 text-sm font-bold">
<a href="#" class="text-red-700 underline-offset-4 hover:underline">Ver artigos →</a>
<a href="#" class="text-red-700 underline-offset-4 hover:underline">Seguir no Instagram →</a>
<a href="#" class="text-red-700 underline-offset-4 hover:underline"
>Seguir no Instagram →</a
>
<a href="#" class="text-red-700 underline-offset-4 hover:underline">YouTube →</a>
</div>
</div>
@ -47,17 +47,26 @@
<!-- bento: 1 grande + 4 pequenos -->
<div class="mt-5 grid gap-4 md:grid-cols-4">
<!-- card grande: artigo destaque -->
<a href="#" class="group col-span-2 row-span-2 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-3">
<a
href="#"
class="group col-span-2 row-span-2 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-3"
>
<div class="relative aspect-[16/9] 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">
<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">
<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 group-hover:underline">
<h3
class="text-base leading-snug font-extrabold text-zinc-900 group-hover:underline"
>
Título do artigo em destaque, duas ou três linhas para caber
</h3>
<p class="text-xs leading-relaxed text-zinc-500">
@ -68,12 +77,19 @@
</a>
<!-- pequeno: vídeo YouTube -->
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
<a
href="#"
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
>
<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">
<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"
>
YouTube
</span>
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
thumb 16:9
</span>
</div>
@ -84,12 +100,19 @@
</a>
<!-- pequeno: vídeo YouTube -->
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
<a
href="#"
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
>
<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">
<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"
>
YouTube
</span>
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
thumb 16:9
</span>
</div>
@ -100,12 +123,19 @@
</a>
<!-- pequeno: Instagram -->
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
<a
href="#"
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
>
<div class="relative aspect-square 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">
<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"
>
Instagram
</span>
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
post 1:1
</span>
</div>
@ -116,12 +146,19 @@
</a>
<!-- pequeno: Instagram -->
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
<a
href="#"
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
>
<div class="relative aspect-square 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">
<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"
>
Instagram
</span>
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
post 1:1
</span>
</div>
@ -146,7 +183,10 @@
</section>
<!-- ============ CENA: mobile (carrossel — 1 conteúdo por tela) ============ -->
<section data-shot="mobile" class="mt-8 w-[390px] rounded-2xl bg-white p-4 text-zinc-900 shadow-xl">
<section
data-shot="mobile"
class="mt-8 w-[390px] rounded-2xl bg-white p-4 text-zinc-900 shadow-xl"
>
<!-- contexto: prova social -->
<div class="flex items-center justify-center gap-6 rounded-xl bg-zinc-100 py-2.5">
<span class="text-xs font-bold text-zinc-400">3.333 proposições</span>
@ -167,12 +207,19 @@
<!-- carrossel: 1 card por tela + dots -->
<div class="mt-4 overflow-hidden rounded-xl">
<!-- card ativo -->
<a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
<a
href="#"
class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
>
<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">
<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"
>
YouTube
</span>
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
thumb 16:9
</span>
</div>
@ -191,23 +238,34 @@
<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>
<p class="mt-2 text-center text-xs font-semibold text-zinc-500">
1 de 5 · deslize para ver os próximos
</p>
</div>
</section>
<!-- ============ CENA: card com compartilhar (S4 — WhatsApp) ============ -->
<section data-shot="compartilhar" class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl">
<section
data-shot="compartilhar"
class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl"
>
<p class="text-sm font-bold text-zinc-700">
Card de conteúdo com botão discreto de compartilhamento (canto do card, sem competir com
o CTA primário): abre WhatsApp com mensagem pré-configurada + opção de copiar link.
Card de conteúdo com botão discreto de compartilhamento (canto do card, sem competir com o
CTA primário): abre WhatsApp com mensagem pré-configurada + opção de copiar link.
</p>
<div class="mt-4 grid max-w-3xl grid-cols-3 gap-4">
<div class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
<div
class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
>
<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">
<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"
>
YouTube
</span>
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
thumb 16:9
</span>
</div>
@ -223,12 +281,18 @@
↗
</button>
</div>
<div class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
<div
class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
>
<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">
<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">
<span
class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
>
capa 16:9
</span>
</div>
@ -244,15 +308,21 @@
↗
</button>
</div>
<div class="flex flex-col justify-center gap-2 rounded-xl border border-dashed border-zinc-300 bg-zinc-50 p-3">
<div
class="flex flex-col justify-center gap-2 rounded-xl border border-dashed border-zinc-300 bg-zinc-50 p-3"
>
<p class="text-xs font-semibold text-zinc-500">
Menu aberto (v1): "Compartilhar no WhatsApp" (mensagem pré-configurada com título +
link) e "Copiar link".
</p>
<div class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700">
<div
class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700"
>
WhatsApp ↗
</div>
<div class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700">
<div
class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700"
>
Copiar link
</div>
</div>
@ -263,8 +333,8 @@
<section data-shot="vazio" class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl">
<p class="text-sm font-bold text-zinc-700">
Vazio / fail-closed — nenhuma fonte com conteúdo disponível (artigos invisíveis ou APIs
sem snapshot). Recomendação: a seção inteira é ocultada; a página mantém o fluxo
Prova → Por que essa eleição importa, sem zona morta.
sem snapshot). Recomendação: a seção inteira é ocultada; a página mantém o fluxo Prova →
Por que essa eleição importa, sem zona morta.
</p>
<div class="mt-4 flex items-center justify-center gap-10 rounded-xl bg-zinc-100 py-3">
<span class="text-sm font-bold text-zinc-400">3.333 proposições</span>

2
docs/plans/secao-conteudos-home-youtube.md
View file

@ -50,7 +50,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
- **Vou apresentar dados?** Sim, superfície neste item — metadados do vídeo (título, thumbnail, data, visualizações) vindos da plataforma.
- **Decisões desbloqueadas:** o visitante decide qual vídeo assistir (clique); visualizações são fato da plataforma (não inventar).
- **Forma:** *adiada ao plano de implementação* — restrição de produto: mostrar views como a plataforma mostra (ex. "12,4 mil"), nunca métrica derivada da campanha.
- **Forma:** _adiada ao plano de implementação_ — restrição de produto: mostrar views como a plataforma mostra (ex. "12,4 mil"), nunca métrica derivada da campanha.
## Direção no codebase (hipótese)