docs(S30,S31,S32): planos + designs hi-fi — cards com o estadual, colinha e analytics (Related #1271, #1272, #1273)
448
docs/plans/cards-analytics-ui-design.html
Normal file
|
|
@ -0,0 +1,448 @@
|
|||
<!doctype html>
|
||||
<html lang="pt-BR" data-theme="campaign">
|
||||
<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 — S32 · Contadores de cards</title>
|
||||
<style type="text/tailwindcss">
|
||||
@theme inline {
|
||||
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-sidebar: var(--sidebar);
|
||||
}
|
||||
[data-theme='campaign'] {
|
||||
--radius: 0.5rem;
|
||||
--background: #fff;
|
||||
--foreground: #1c1917;
|
||||
--card: #fff;
|
||||
--card-foreground: #1c1917;
|
||||
--primary: #c51414;
|
||||
--primary-foreground: #fff;
|
||||
--muted: #f4f4f5;
|
||||
--muted-foreground: #6b7280;
|
||||
--border: rgb(28 25 23/12%);
|
||||
--sidebar: #fafaf9;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.board {
|
||||
background: #efeeec;
|
||||
background-image: radial-gradient(rgb(28 25 23/8%) 0.7px, transparent 0.7px);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
.frame {
|
||||
box-shadow: 0 18px 52px rgb(28 25 23/10%);
|
||||
}
|
||||
.metric-strip {
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
background: var(--card);
|
||||
box-shadow: 0 0 0 1px rgb(28 25 23/10%);
|
||||
}
|
||||
.metric {
|
||||
min-width: 0;
|
||||
padding: 0.625rem 1rem;
|
||||
}
|
||||
.metric-strip-mobile {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.metric-strip-mobile .metric {
|
||||
display: flex;
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
.metric-strip-mobile .metric + .metric {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.metric-strip {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
.metric + .metric {
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.metric-strip {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.metric {
|
||||
display: flex;
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
.metric + .metric {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
.metric-strip.metric-strip-mobile {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.metric-strip.metric-strip-mobile .metric {
|
||||
display: flex;
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border-left: 0;
|
||||
}
|
||||
.metric-strip.metric-strip-mobile .metric + .metric {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="board min-h-screen text-foreground antialiased">
|
||||
<main class="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-10">
|
||||
<header class="max-w-4xl">
|
||||
<p class="text-xs font-black tracking-[.12em] text-primary uppercase">Gate visual · S32</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight">Cards na home da campanha</h1>
|
||||
<p class="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
|
||||
Um bloco compacto no resumo que responde somente quantos downloads cada modelo recebeu.
|
||||
Sem rota, dashboard, total, porcentagem, tendência ou leitura de pessoas.
|
||||
</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2 text-[11px] font-semibold text-stone-600">
|
||||
<span class="rounded-full border bg-white px-3 py-2">interno · tokens shadcn</span
|
||||
><span class="rounded-full border bg-white px-3 py-2">contagens absolutas</span
|
||||
><span class="rounded-full border bg-white px-3 py-2">ordem natural do catálogo</span
|
||||
><span class="rounded-full border bg-white px-3 py-2">downloads anônimos</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-bold tracking-[.12em] text-stone-600 uppercase">
|
||||
Cena 1 · Home interna 1280 · bloco com dados
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-muted-foreground">
|
||||
O bloco entra depois do resumo principal, sem competir com “Votos estimados”. Os números
|
||||
abaixo são fictícios e existem apenas para validar largura e hierarquia.
|
||||
</p>
|
||||
<div
|
||||
class="frame mt-4 w-full max-w-[1280px] overflow-hidden rounded-xl border bg-background"
|
||||
>
|
||||
<div class="flex min-h-[620px]">
|
||||
<aside class="w-56 shrink-0 border-r bg-sidebar p-3">
|
||||
<div class="flex h-12 items-center gap-2 px-2">
|
||||
<div
|
||||
class="grid size-8 place-items-center rounded-lg bg-primary font-bold text-white"
|
||||
>
|
||||
S
|
||||
</div>
|
||||
<div>
|
||||
<b class="text-sm">Solla</b>
|
||||
<p class="text-xs text-muted-foreground">Campanha</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="mt-5 space-y-1 text-sm">
|
||||
<div
|
||||
class="rounded-md bg-white px-3 py-2 font-semibold text-primary ring-1 ring-foreground/10"
|
||||
>
|
||||
Início
|
||||
</div>
|
||||
<div class="px-3 py-2 text-muted-foreground">Municípios</div>
|
||||
<div class="px-3 py-2 text-muted-foreground">Lideranças</div>
|
||||
<div class="px-3 py-2 text-muted-foreground">Atividades</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="min-w-0 flex-1 p-8">
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold tracking-tight">Visão geral</h3>
|
||||
<p class="mt-1 text-sm text-muted-foreground">Resumo da campanha</p>
|
||||
</div>
|
||||
<section
|
||||
aria-label="Resumo da campanha"
|
||||
class="mt-7 flex flex-col gap-4 border-b pb-6"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-sm text-muted-foreground">Votos estimados</p>
|
||||
<span
|
||||
class="mt-1 block h-8 w-32 rounded bg-stone-200"
|
||||
aria-label="Valor omitido no gate"
|
||||
></span>
|
||||
</div>
|
||||
<div class="flex max-w-md flex-col gap-1.5">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">Cobertura por lideranças</span
|
||||
><span class="h-4 w-14 rounded bg-stone-200"></span>
|
||||
</div>
|
||||
<div class="h-2 rounded-full bg-muted">
|
||||
<div class="h-full w-2/3 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mt-6" aria-labelledby="cards-heading-desktop">
|
||||
<div class="flex items-end justify-between gap-4">
|
||||
<div>
|
||||
<h4 id="cards-heading-desktop" class="text-base font-semibold">Cards</h4>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
Downloads anônimos acumulados desde o lançamento.
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="rounded-full bg-muted px-2.5 py-1 text-[10px] font-semibold text-muted-foreground"
|
||||
>VALORES FICTÍCIOS DO GATE</span
|
||||
>
|
||||
</div>
|
||||
<dl class="metric-strip mt-3">
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium leading-4 text-muted-foreground">
|
||||
Card com seu nome
|
||||
</dt>
|
||||
<dd class="mt-1 text-lg font-medium tracking-tight tabular-nums">123</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium leading-4 text-muted-foreground">
|
||||
Moldura quadrada
|
||||
</dt>
|
||||
<dd class="mt-1 text-lg font-medium tracking-tight tabular-nums">89</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium leading-4 text-muted-foreground">
|
||||
Moldura vertical
|
||||
</dt>
|
||||
<dd class="mt-1 text-lg font-medium tracking-tight tabular-nums">67</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium leading-4 text-muted-foreground">
|
||||
Time de você
|
||||
</dt>
|
||||
<dd class="mt-1 text-lg font-medium tracking-tight tabular-nums">145</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium leading-4 text-muted-foreground">
|
||||
Time do estadual
|
||||
</dt>
|
||||
<dd class="mt-1 text-lg font-medium tracking-tight tabular-nums">34</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium leading-4 text-muted-foreground">
|
||||
Minha colinha
|
||||
</dt>
|
||||
<dd class="mt-1 text-lg font-medium tracking-tight tabular-nums">76</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="mt-2 text-xs leading-5 text-muted-foreground">
|
||||
Os números contam downloads, não pessoas ou visitantes únicos.
|
||||
</p>
|
||||
</section>
|
||||
<div class="mt-8 grid grid-cols-2 gap-4">
|
||||
<div class="h-32 rounded-xl bg-muted"></div>
|
||||
<div class="h-32 rounded-xl bg-muted"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-bold tracking-[.12em] text-stone-600 uppercase">
|
||||
Cena 2 · Home interna mobile 390 · bloco com dados
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs text-muted-foreground">
|
||||
No mobile cada modelo vira uma linha compacta: rótulo à esquerda, contagem tabular à
|
||||
direita. Não há carrossel escondendo modelos nem grid apertado.
|
||||
</p>
|
||||
<div
|
||||
class="frame mt-4 w-[390px] max-w-full overflow-hidden rounded-[26px] border bg-background"
|
||||
>
|
||||
<div class="flex h-14 items-center justify-between border-b px-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class="grid size-8 place-items-center rounded-lg bg-primary font-bold text-white"
|
||||
>
|
||||
S
|
||||
</div>
|
||||
<b class="text-sm">Visão geral</b>
|
||||
</div>
|
||||
<button
|
||||
class="grid size-11 place-items-center rounded-md bg-muted"
|
||||
aria-label="Abrir menu"
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<section class="flex flex-col gap-4 border-b pb-5">
|
||||
<div>
|
||||
<p class="text-sm text-muted-foreground">Votos estimados</p>
|
||||
<span class="mt-2 block h-8 w-28 rounded bg-stone-200"></span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">Cobertura por lideranças</span
|
||||
><span class="h-4 w-12 rounded bg-stone-200"></span>
|
||||
</div>
|
||||
<div class="mt-2 h-2 rounded-full bg-muted">
|
||||
<div class="h-full w-2/3 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mt-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold">Cards</h3>
|
||||
<span
|
||||
class="rounded-full bg-muted px-2 py-1 text-[9px] font-semibold text-muted-foreground"
|
||||
>EXEMPLO</span
|
||||
>
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||||
Downloads anônimos acumulados desde o lançamento.
|
||||
</p>
|
||||
<dl class="metric-strip metric-strip-mobile mt-3">
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium text-muted-foreground">Card com seu nome</dt>
|
||||
<dd class="text-lg font-medium tracking-tight tabular-nums">123</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium text-muted-foreground">Moldura quadrada</dt>
|
||||
<dd class="text-lg font-medium tracking-tight tabular-nums">89</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium text-muted-foreground">Moldura vertical</dt>
|
||||
<dd class="text-lg font-medium tracking-tight tabular-nums">67</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium text-muted-foreground">Time de você</dt>
|
||||
<dd class="text-lg font-medium tracking-tight tabular-nums">145</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium text-muted-foreground">Time do estadual</dt>
|
||||
<dd class="text-lg font-medium tracking-tight tabular-nums">34</dd>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<dt class="text-xs font-medium text-muted-foreground">Minha colinha</dt>
|
||||
<dd class="text-lg font-medium tracking-tight tabular-nums">76</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="mt-2 text-xs leading-5 text-muted-foreground">
|
||||
Os números contam downloads, não pessoas ou visitantes únicos.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-bold tracking-[.12em] text-stone-600 uppercase">
|
||||
Cenas 3–4 · Estado vazio honesto · desktop + mobile
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs text-muted-foreground">
|
||||
Antes do primeiro evento, não se desenham seis zeros como se fossem uma comparação pronta.
|
||||
O bloco explica o que surgirá e preserva o mesmo espaço sem gráfico ou CTA.
|
||||
</p>
|
||||
<div class="mt-4 flex flex-wrap items-start gap-8">
|
||||
<div class="frame w-[820px] max-w-full rounded-xl border bg-background p-8">
|
||||
<section>
|
||||
<h3 class="text-base font-semibold">Cards</h3>
|
||||
<div class="mt-3 rounded-xl bg-card px-5 py-6 ring-1 ring-foreground/10">
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="grid size-10 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground"
|
||||
aria-hidden="true"
|
||||
>
|
||||
↓
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold">Nenhum download ainda</p>
|
||||
<p class="mt-1 text-sm leading-5 text-muted-foreground">
|
||||
Os contadores aparecem quando alguém baixar um card.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-muted-foreground">
|
||||
A contagem será anônima e mostrará downloads por modelo, nunca pessoas.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="frame w-[390px] max-w-full overflow-hidden rounded-[26px] border bg-background"
|
||||
>
|
||||
<div class="flex h-14 items-center justify-between border-b px-4">
|
||||
<b class="text-sm">Visão geral</b
|
||||
><button class="grid size-11 place-items-center rounded-md bg-muted">☰</button>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-base font-semibold">Cards</h3>
|
||||
<div class="mt-3 rounded-xl bg-card p-4 ring-1 ring-foreground/10">
|
||||
<div
|
||||
class="grid size-10 place-items-center rounded-full bg-muted text-muted-foreground"
|
||||
>
|
||||
↓
|
||||
</div>
|
||||
<p class="mt-3 text-sm font-semibold">Nenhum download ainda</p>
|
||||
<p class="mt-1 text-sm leading-5 text-muted-foreground">
|
||||
Os contadores aparecem quando alguém baixar um card.
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-2 text-xs leading-5 text-muted-foreground">
|
||||
A contagem será anônima e mostrará downloads por modelo, nunca pessoas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-bold tracking-[.12em] text-stone-600 uppercase">
|
||||
Anatomia aprovada do bloco
|
||||
</h2>
|
||||
<div class="mt-4 grid gap-4 text-sm md:grid-cols-3">
|
||||
<div class="rounded-xl border bg-card p-4">
|
||||
<p class="font-semibold">Só seis modelos</p>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||||
Card com seu nome · Moldura quadrada · Moldura vertical · Time de você · Time do
|
||||
estadual · Minha colinha.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl border bg-card p-4">
|
||||
<p class="font-semibold">Só números absolutos</p>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||||
Sem porcentagem, total de “usos”, ranking, série, seta, gráfico ou tendência.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl border bg-card p-4">
|
||||
<p class="font-semibold">Leitura honesta</p>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||||
“Downloads”, nunca pessoas, usuários ou visitantes únicos. Caption curta sempre
|
||||
visível.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="mt-14 border-t border-stone-300 pt-8 text-xs leading-5 text-muted-foreground">
|
||||
<p class="font-semibold text-foreground">Design tier 1 · openai/gpt-5.6-sol.</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-foreground">Tokens reais:</strong> <code>bg-card</code>,
|
||||
<code>ring-foreground/10</code>, <code>text-muted-foreground</code>,
|
||||
<code>tabular-nums</code>, raio <code>rounded-xl</code> e padding compacto
|
||||
<code>px-4 py-2</code>.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-foreground">NEEDS ASSET:</strong> nenhum.
|
||||
<strong class="text-foreground">Nota:</strong> 123, 89, 67, 145, 34 e 76 são placeholders
|
||||
explícitos do gate, não métricas nem claims de campanha.
|
||||
</p>
|
||||
</aside>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
108
docs/plans/cards-analytics.md
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
# S32 — Analytics dos cards personalizados: quantos e quais
|
||||
|
||||
Status: rascunho
|
||||
Atualizado em: 2026-09-23
|
||||
Issue: #1273
|
||||
Priority: P2
|
||||
Impeccable: B — encaixe no resumo da home interna (contadores por modelo), sem tela nova
|
||||
Design UI: docs/plans/cards-analytics-ui-design.html
|
||||
Appetite: ~0,5–1 dia eng (depois do C213)
|
||||
Responsável: —
|
||||
|
||||
## Intenção
|
||||
|
||||
O funil de cards personalizados (S13/S14/S15 e os modelos novos de S30/S31) roda 100% no aparelho do visitante, sem conta e sem coletar nada sobre quem usa — decisão de privacidade que continua valendo. O efeito colateral é que a campanha não sabe se o funil é usado nem quais modelos circulam: o dono pediu "medidas de quantas pessoas estão usando e quais". Responder à pergunta útil não exige identificar ninguém — basta contar downloads por modelo, de forma anônima e agregada. O C213 (#1258) já desenha um mecanismo mínimo de eventos anônimos para a Central de Conteúdos; este item faz o card ser mais um assunto do mesmo mecanismo, nunca um segundo analytics.
|
||||
|
||||
## Persona e fluxo
|
||||
|
||||
- **Persona / contexto:** coordenação e assessoria (staff) na home interna `/campanha`, decidindo o que divulgar e em que modelo investir; quem gera o evento é o visitante anônimo do funil público.
|
||||
- **Job principal:** ler, por modelo de card, quantos downloads aconteceram desde o lançamento, e decidir qual modelo divulgar/reforçar (e, nos modelos com escolha estadual, qual dobradinha está sendo promovida).
|
||||
- **Fluxo desejado:** abre a home interna → vê o bloco compacto "Cards" com o contador de downloads de cada modelo, lado a lado → lê qual modelo puxa o uso do funil → decide reforçar, divulgar de novo ou aposentar um modelo.
|
||||
- **Anti-goals de produto:** não é analytics de site (sem pageview, funil, origem); não é perfil de visitante (sem cookie, IP, user-agent, identidade ou rastreio); não é dashboard nem rota nova; não mede abertura de galeria, prévia ou nada dentro da foto/recorte local.
|
||||
|
||||
### Esboço de fluxo (B)
|
||||
|
||||
```text
|
||||
[visitante baixa o PNG] → evento anônimo "Download do card" no mecanismo do C213 (model id + slug do estadual quando houver)
|
||||
[staff] home interna → bloco "Cards" (contadores por modelo, lado a lado) → decide o que divulgar/reforçar
|
||||
[falha na contagem] o download segue idêntico e imediato — contador a menos é aceitável
|
||||
```
|
||||
|
||||
### Design UI (B)
|
||||
|
||||
- Design UI (gate): `docs/plans/cards-analytics-ui-design.html` — cena do bloco compacto no resumo da home, com e sem dados, em desktop e mobile.
|
||||
|
||||
## Objetivo e aceite
|
||||
|
||||
- O download de qualquer card conta uma vez um evento anônimo "Download do card", com o model id do card; nos modelos de escolha estadual (S30/S31) o evento leva também o slug do estadual escolhido.
|
||||
- A superfície interna mostra, por modelo, o contador absoluto acumulado desde o lançamento, lado a lado; sem índice único de "usos", sem %, sem série/tendência, sem funil/pageview.
|
||||
- Honestidade do dado: os números medem downloads, não pessoas — a superfície não sugere visitantes únicos (impossível sem identidade) nem mistura as duas leituras.
|
||||
- Não conta abertura da galeria nem prévia renderizada; só o download concluído (arquivo gerado e entregue ao visitante).
|
||||
- Privacidade: evento estritamente anônimo e agregado — sem PII, sem IP persistido, sem cookie/identidade, sem user-agent, sem rastreio entre páginas ou entre modelos; nenhum `Consent` novo.
|
||||
- Fail-soft: o download nunca é bloqueado nem atrasado pela contagem; falha no evento é invisível ao visitante; nada da foto ou do recorte local é tocado por telemetria.
|
||||
- Mesmo mecanismo do C213 (#1258) — nenhuma collection/endpoint paralelo; sem o C213 entregue não há onde escrever nem onde ler.
|
||||
|
||||
## Dados (intenção)
|
||||
|
||||
- **Vou apresentar dados?** Sim, superfície neste item — contadores anônimos por modelo de card no resumo da home interna.
|
||||
- **Decisões desbloqueadas:**
|
||||
- Coordenação e assessoria: qual modelo de card divulgar/reforçar e se vale manter um modelo com pouca saída.
|
||||
- Coordenação: qual dobradinha está sendo promovida nos modelos com escolha estadual (S30/S31) — o slug escolhido é o sinal.
|
||||
- Coordenação: ler se o funil de cards como um todo está sendo usado (soma dos downloads por modelo — número de downloads, nunca de pessoas).
|
||||
- **Forma:** _adiada ao plano de implementação_ — restrições: contagens absolutas por modelo, lado a lado e na ordem natural do catálogo; sem índice "usos", sem %, sem série/tendência, sem funil/pageview.
|
||||
|
||||
## Dados da decisão (literais)
|
||||
|
||||
- Um único pipeline anônimo de analytics — o do C213 (#1258); o card é um assunto do mesmo mecanismo, nunca uma collection/endpoint paralelo. Dependência dura do C213.
|
||||
- Evento v1: "Download do card" — disparado uma vez quando o visitante baixa o PNG gerado; carrega o model id do card e, nos modelos por estadual (S30/S31), o slug do estadual escolhido. Abertura da galeria e render da prévia NÃO contam no v1.
|
||||
- Contadores por modelo de card, lado a lado e absolutos; sem índice único de "usos", sem %, sem série/tendência, sem funil/pageview, sem ranking além da ordem natural dos contadores.
|
||||
- Guardrail de honestidade: contagens anônimas medem downloads, não "pessoas"; sem identidade não existe visitante único — a superfície não pode sugerir isso.
|
||||
- Superfície recomendada: bloco compacto "Cards" no resumo da home da campanha (precedente `CampaignHomeSummary`/`CampaignMetricStrip`, papéis de staff) — sem rota nova, sem dashboard. A comunicação (role `communicator`, cuja home é a vertical Comunicação) veria depois, pela própria vertical, se o produto pedir; a superfície do v1 é a home staff.
|
||||
- Privacidade: sem PII, sem IP persistido, sem cookie/identidade, sem user-agent, sem rastreio entre páginas/modelos; sem `Consent` novo; estritamente anônimo e agregado.
|
||||
- Fail-soft: o download nunca é bloqueado nem atrasado pelo contador — contagem a menos é aceitável, dado de visitante não.
|
||||
- Os modelos que incluem escolha de estadual contam o mesmo evento de download com o slug do estadual (qual dobradinha está sendo promovida é uma decisão que a campanha quer).
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
- **Áreas prováveis:** o caminho de download de `src/components/cards/CardComposer.tsx` (o evento sai daqui, sem bloquear), o catálogo `src/lib/cardModels.ts` como lista de modelos, e o resumo da home (`src/components/campaign/dashboard/CampaignHomeSummary.tsx`, hoje alimentado por `src/utilities/campaignDashboardData.ts`).
|
||||
- **Precedente a olhar:** `docs/plans/central-conteudos-analytics.md` (C213 — o mecanismo, a agregação e o idioma de superfície), `src/components/campaign/shared/CampaignMetricStrip.tsx` (molde do bloco de contadores) e `src/collections/CampaignVoteSummarySnapshot.ts` (contagem agregada sem dashboard).
|
||||
- **Risco de acoplamento:** a contagem é acessória — atraso ou falha do C213 não pode segurar o funil; nenhum identificador de visitante nasce do lado do card; nada de tocar na foto ou no recorte que roda no aparelho.
|
||||
|
||||
## Dependências
|
||||
|
||||
- **C213 (#1258)** — dura: o pipeline de eventos anônimos e o idioma de superfície interna precisam existir primeiro.
|
||||
- **S30/S31** — suave: os modelos novos apenas somam model ids e slugs ao contador.
|
||||
|
||||
## Fora de escopo
|
||||
|
||||
- Segundo mecanismo de eventos, serviço de analytics (Umami/Plausible) ou retomada de `@vercel/analytics`; cookie, identidade, sessão, banner de consentimento ou `Consent` novo.
|
||||
- Contar abertura de galeria, prévia renderizada, modelo escolhido no estúdio ou qualquer passo dentro do compositor; medir a foto ou o recorte local (a imagem nunca sai do aparelho e não é tocada por telemetria).
|
||||
- Dashboard, rota `/campanha/cards`, gráfico, série/tendência, exportação, alerta, lista por visitante ou índice único de "usos".
|
||||
- Visão da comunicação no v1 (follow-up registrado: pela vertical, se o produto pedir).
|
||||
|
||||
## Rabbit holes de produto
|
||||
|
||||
- **"Quero saber quantas pessoas usam".** Se alguém "só completar": cookie, session id, "visitante único" — métrica que não existe sem identidade. **Corte neste item:** contador de downloads, agregado, dito honestamente.
|
||||
- **Virar dashboard de cards.** Se alguém "só completar": rota própria com gráfico, série e ranking. **Corte neste item:** bloco compacto na home staff, contadores absolutos por modelo.
|
||||
- **Medir o funil inteiro.** Se alguém "só completar": pageview, modelo escolhido, prévia, abandono. **Corte neste item:** só o download; abertura, prévia e estúdio fora.
|
||||
- **Identificar quem compartilha.** Se alguém "só completar": gravar o nome/foto do card ou inferir perfil pelo uso. **Corte neste item:** zero PII; a foto nunca sai do aparelho.
|
||||
- **Segunda superfície "só para a comunicação".** Se alguém "só completar": bloco novo na vertical da comunicação no v1. **Corte neste item:** home staff agora; comunicação depois, pela vertical, se o produto pedir.
|
||||
|
||||
## Questões em aberto (produto)
|
||||
|
||||
- **Onde os contadores aparecem?** **Opções:** A) bloco compacto no resumo da home da campanha, staff (recomendado) | B) na lista de peças do C211, ao lado dos contadores por peça do C213 (força os cards a uma lista a que não pertencem) | C) rota própria `/campanha/cards` (rejeitada — superfície nova de dashboard; a doutrina do C213 evita). **Recomendação:** A. _(assumido — validar com produto)_
|
||||
- **O que conta?** **Opções:** A) só o download (recomendado — o momento em que o visitante leva o card) | B) download + modelo selecionado no estúdio (mede interesse x conversão, com mais ruído). **Recomendação:** A. _(assumido — validar com produto)_
|
||||
- **Granularidade:** A) acumulado por modelo desde o lançamento (recomendado no v1, espelha o C213) | B) janela de tempo (só se alguém pedir "o que está circulando agora"). **Recomendação:** A. _(assumido — validar com produto)_
|
||||
|
||||
## Referências
|
||||
|
||||
- GitHub Issue #1258 (C213 — dependência dura)
|
||||
- Design UI (gate): `docs/plans/cards-analytics-ui-design.html`
|
||||
- `docs/plans/central-conteudos-analytics.md` — o mecanismo e a superfície que este item integra
|
||||
- `src/components/campaign/dashboard/CampaignHomeSummary.tsx`, `src/components/campaign/shared/CampaignMetricStrip.tsx`, `src/collections/CampaignVoteSummarySnapshot.ts` — precedentes de superfície/rollup
|
||||
- `src/components/cards/CardComposer.tsx`, `src/lib/cardModels.ts` — onde o download acontece e o catálogo de modelos
|
||||
- `docs/plans/cards-time-de-voce.md`, `docs/plans/cards-estadual-dobradinha.md`, `docs/plans/cards-colinha.md` — os modelos que o contador separa
|
||||
|
||||
## Self-score (shaping)
|
||||
|
||||
5/5 — (1) fatia = um outcome verificável (download contado e contadores por modelo na home staff); (2) appetite ~0,5–1 dia cabe porque reusa o mecanismo do C213; (3) persona, job e aceite em linguagem de produto, com o guardrail de honestidade explícito; (4) direção no codebase é hipótese com precedentes abertos; (5) zero decisão dura de engenharia — shape da collection, endpoint e agregação ficam no C213/implementação.
|
||||
|
After Width: | Height: | Size: 27 KiB |
BIN
docs/plans/cards-colinha-ui-design-assets/modelo-colinha.jpeg
Normal file
|
After Width: | Height: | Size: 244 KiB |
BIN
docs/plans/cards-colinha-ui-design-assets/team-card-base.png
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
docs/plans/cards-colinha-ui-design-assets/team-card-front.png
Normal file
|
After Width: | Height: | Size: 84 KiB |
689
docs/plans/cards-colinha-ui-design.html
Normal file
|
|
@ -0,0 +1,689 @@
|
|||
<!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 — S31 · Minha colinha</title>
|
||||
<style type="text/tailwindcss">
|
||||
:root {
|
||||
--pt-red: #a21c1c;
|
||||
--cream: #fff8f2;
|
||||
--ink: #000;
|
||||
--muted: #6c615e;
|
||||
--line: rgb(0 0 0/12%);
|
||||
--field: rgb(0 0 0/18%);
|
||||
--brand-red: #e4102f;
|
||||
--brand-blue: #184e92;
|
||||
--brand-yellow: #ffeb00;
|
||||
--confirm: #009647;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
button:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: 2px solid var(--pt-red);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.slip {
|
||||
position: relative;
|
||||
aspect-ratio: 9/16;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
color: #141414;
|
||||
container-type: inline-size;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.slip-top {
|
||||
position: absolute;
|
||||
inset: 0 0 auto;
|
||||
height: 37%;
|
||||
overflow: hidden;
|
||||
background: #148fc2;
|
||||
}
|
||||
.slip-photo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center 46%;
|
||||
}
|
||||
.slip-lockup {
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
left: 3%;
|
||||
width: 49%;
|
||||
height: 19%;
|
||||
padding: 2.5%;
|
||||
background: linear-gradient(125deg, var(--brand-red) 0 52%, var(--brand-blue) 52%);
|
||||
}
|
||||
.slip-lockup img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.slip-band {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 29%;
|
||||
overflow: hidden;
|
||||
background: var(--brand-red);
|
||||
}
|
||||
.slip-band img {
|
||||
width: 100%;
|
||||
height: 360%;
|
||||
object-fit: cover;
|
||||
object-position: center bottom;
|
||||
transform: translateY(-72%);
|
||||
}
|
||||
.slip-body {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 4.8%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 3.2cqw;
|
||||
padding: 3.2cqw 3.3cqw 3cqw;
|
||||
}
|
||||
.legal {
|
||||
position: absolute;
|
||||
left: 0.7%;
|
||||
top: 39%;
|
||||
bottom: 2%;
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
font-size: 1.45cqw;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: #333;
|
||||
}
|
||||
.vote-row {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 1fr auto;
|
||||
align-items: center;
|
||||
gap: 2cqw;
|
||||
min-height: 10cqw;
|
||||
}
|
||||
.office {
|
||||
font-size: 2.5cqw;
|
||||
line-height: 1.02;
|
||||
font-weight: 900;
|
||||
color: #171717;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.candidate {
|
||||
display: block;
|
||||
margin-top: 0.5cqh;
|
||||
font-size: 2.45cqw;
|
||||
line-height: 1;
|
||||
color: var(--brand-red);
|
||||
}
|
||||
.digits {
|
||||
display: flex;
|
||||
gap: 0.75cqw;
|
||||
}
|
||||
.digit {
|
||||
display: grid;
|
||||
width: 5.5cqw;
|
||||
height: 6.8cqw;
|
||||
place-items: center;
|
||||
border: 0.55cqw solid #111;
|
||||
border-radius: 0.6cqw;
|
||||
background: #fff;
|
||||
font-size: 4.3cqw;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
}
|
||||
.digit.empty {
|
||||
color: transparent;
|
||||
border-color: #9a9a9a;
|
||||
background: #fafafa;
|
||||
}
|
||||
.confirm {
|
||||
border-radius: 999px;
|
||||
background: var(--confirm);
|
||||
padding: 1.6cqw 2cqw;
|
||||
font-size: 2cqw;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
}
|
||||
.placeholder-top:after {
|
||||
content: 'MODELO APROVADO · ARQUIVO DO GATE';
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
bottom: 31%;
|
||||
border-radius: 999px;
|
||||
background: #fcd34d;
|
||||
padding: 1% 2%;
|
||||
color: #111;
|
||||
font-size: 1.6cqw;
|
||||
font-weight: 900;
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 99px;
|
||||
background: #c7c2be;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||||
<main class="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-10">
|
||||
<header class="max-w-4xl">
|
||||
<p class="text-xs font-black tracking-[.12em] text-red-400 uppercase">Gate visual · S31</p>
|
||||
<h1 class="mt-2 text-3xl font-black tracking-tight">Minha colinha</h1>
|
||||
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
|
||||
O militante escolhe o estadual e leva uma colinha 9:16 completa para mandar ou imprimir.
|
||||
Cinco escolhas são fixas; a linha de deputado estadual recebe nome e cinco dígitos da
|
||||
dobradinha.
|
||||
</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"
|
||||
>PNG 1080 × 1920</span
|
||||
><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>1280px + 390px</span
|
||||
><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>sem nome, foto ou upload</span
|
||||
><span
|
||||
class="rounded-full border border-amber-600/60 bg-amber-500/10 px-3 py-2 text-amber-300"
|
||||
>modelo aprovado · arquivo do gate</span
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 1 · Tile “Minha colinha” na galeria
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
O sexto modelo mantém o mesmo tile clicável. No desktop, a seção usa seis colunas; no
|
||||
celular, permanece no carrossel horizontal com uma pista do próximo/anterior.
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 max-w-[1280px] rounded-xl border border-zinc-700 bg-[var(--cream)] px-8 py-10 text-black shadow-2xl"
|
||||
>
|
||||
<div class="grid grid-cols-6 gap-4">
|
||||
<div class="rounded-xl bg-stone-200 p-3 text-center text-xs font-bold text-stone-500">
|
||||
Card com<br />seu nome
|
||||
</div>
|
||||
<div class="rounded-xl bg-stone-200 p-3 text-center text-xs font-bold text-stone-500">
|
||||
Moldura<br />quadrada
|
||||
</div>
|
||||
<div class="rounded-xl bg-stone-200 p-3 text-center text-xs font-bold text-stone-500">
|
||||
Moldura<br />vertical
|
||||
</div>
|
||||
<div class="rounded-xl bg-stone-200 p-3 text-center text-xs font-bold text-stone-500">
|
||||
Time de<br />você
|
||||
</div>
|
||||
<div class="rounded-xl bg-stone-200 p-3 text-center text-xs font-bold text-stone-500">
|
||||
Time do<br />estadual
|
||||
</div>
|
||||
<button class="min-w-0">
|
||||
<span
|
||||
class="relative mx-auto block aspect-[9/16] max-h-[285px] overflow-hidden rounded-xl border-2 border-[var(--pt-red)] shadow-lg"
|
||||
><img
|
||||
src="cards-colinha-ui-design-assets/modelo-colinha.jpeg"
|
||||
alt="Modelo aprovado da colinha com a linha de deputado estadual em branco"
|
||||
class="size-full object-cover"
|
||||
/>
|
||||
<span
|
||||
class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[var(--brand-blue)]"
|
||||
>NOVO</span
|
||||
></span
|
||||
><span class="mt-3 block text-sm font-bold text-[var(--pt-red)]">Minha colinha</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 2 · Estado inicial + seletor aberto · dialog desktop
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs text-zinc-500">
|
||||
Sem estadual, a linha correspondente fica vazia e o download não compete com a escolha. O
|
||||
mesmo seletor de S30 oferece busca, teclado e lista rolável dos 53 nomes.
|
||||
</p>
|
||||
<div
|
||||
class="relative mt-4 flex min-h-[850px] max-w-[1280px] items-center justify-center overflow-hidden rounded-xl border border-zinc-700 bg-[var(--cream)] p-8 text-black shadow-2xl"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/45"></div>
|
||||
<article
|
||||
class="relative z-10 w-[512px] overflow-hidden rounded-xl bg-white shadow-2xl"
|
||||
role="dialog"
|
||||
>
|
||||
<header class="flex items-start px-5 pt-5">
|
||||
<div>
|
||||
<p class="text-xs font-black tracking-[.1em] text-[var(--pt-red)] uppercase">
|
||||
Minha colinha
|
||||
</p>
|
||||
<h3 class="mt-1 text-xl font-black">Escolha seu estadual</h3>
|
||||
<p class="mt-1 text-sm text-[var(--muted)]">
|
||||
A linha de deputado estadual será preenchida na hora.
|
||||
</p>
|
||||
</div>
|
||||
<button class="ml-auto size-11 text-2xl text-[var(--muted)]">×</button>
|
||||
</header>
|
||||
<div class="px-5 pt-4 pb-5">
|
||||
<div class="mx-auto w-[145px] overflow-hidden rounded-lg border shadow">
|
||||
<div class="slip placeholder-top">
|
||||
<div class="slip-top">
|
||||
<img
|
||||
class="slip-photo"
|
||||
src="cards-colinha-ui-design-assets/team-card-base.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="slip-lockup">
|
||||
<img
|
||||
src="cards-colinha-ui-design-assets/marca-negativa-completa.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="slip-band">
|
||||
<img src="cards-colinha-ui-design-assets/team-card-front.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal">
|
||||
FEDERAÇÃO BRASIL DA ESPERANÇA - FE BRASIL (PT-PC DO B - PV)
|
||||
</div>
|
||||
<div class="slip-body">
|
||||
<div class="vote-row">
|
||||
<div class="office">
|
||||
DEPUTADO<br />FEDERAL<span class="candidate">Jorge Solla</span>
|
||||
</div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">1</span><span class="digit">3</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">
|
||||
DEPUTADO<br />ESTADUAL<span class="candidate">Escolha abaixo</span>
|
||||
</div>
|
||||
<div class="digits">
|
||||
<span class="digit empty">0</span><span class="digit empty">0</span
|
||||
><span class="digit empty">0</span><span class="digit empty">0</span
|
||||
><span class="digit empty">0</span>
|
||||
</div>
|
||||
<span class="confirm opacity-30">CONFIRMA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="mt-4 block text-sm font-bold">Seu estadual</label
|
||||
><button
|
||||
class="mt-2 flex h-11 w-full items-center justify-between rounded-lg border border-[var(--field)] px-3 text-left text-sm"
|
||||
>
|
||||
<span class="text-stone-500">Escolha um nome</span><span>⌄</span>
|
||||
</button>
|
||||
<div
|
||||
class="mt-2 overflow-hidden rounded-xl border border-[var(--line)] bg-white shadow-xl"
|
||||
>
|
||||
<div class="border-b border-[var(--line)] p-3">
|
||||
<div
|
||||
class="flex h-11 items-center gap-2 rounded-lg border border-[var(--field)] px-3"
|
||||
>
|
||||
<span>⌕</span
|
||||
><input
|
||||
class="min-w-0 flex-1 outline-none"
|
||||
placeholder="Buscar por nome"
|
||||
value="J"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-2 text-[11px] text-[var(--muted)]">
|
||||
53 estaduais · busque pelo nome de urna
|
||||
</p>
|
||||
</div>
|
||||
<div class="scrollbar max-h-44 overflow-y-auto p-1.5 text-sm">
|
||||
<button class="flex min-h-11 w-full items-center rounded-md px-3">Jaco</button
|
||||
><button class="flex min-h-11 w-full items-center rounded-md px-3">Jamille</button
|
||||
><button class="flex min-h-11 w-full items-center rounded-md px-3">Josafá</button
|
||||
><button
|
||||
class="flex min-h-11 w-full items-center rounded-md bg-red-50 px-3 font-bold text-[var(--pt-red)]"
|
||||
>
|
||||
<span>Julio Pinheiro</span
|
||||
><span class="ml-auto text-xs">13999 ✓</span></button
|
||||
><button class="flex min-h-11 w-full items-center rounded-md px-3">Juliete</button
|
||||
><button class="flex min-h-11 w-full items-center rounded-md px-3">Junior</button>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="mt-4 rounded-lg bg-[var(--cream)] p-3 text-xs leading-5 text-[var(--muted)]"
|
||||
>
|
||||
<b class="text-black">Escolha um estadual para baixar.</b><br />A linha vazia será
|
||||
preenchida com o nome e os cinco dígitos.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="flex gap-3 border-t border-[var(--line)] px-5 py-4">
|
||||
<button
|
||||
class="min-h-11 flex-1 rounded-lg border-2 border-[var(--line)] font-bold text-[var(--pt-red)]"
|
||||
>
|
||||
Cancelar</button
|
||||
><button
|
||||
disabled
|
||||
class="min-h-11 flex-1 rounded-lg bg-[var(--pt-red)] font-bold text-white opacity-50"
|
||||
>
|
||||
Baixar minha colinha
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 3 · Resultado completo 9:16 · desktop 1280
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs text-zinc-500">
|
||||
A prévia fica grande o bastante para conferir todas as linhas. O topo abaixo compõe ativos
|
||||
oficiais para o gate; a arte-mestre final ainda precisa ser produzida e aprovada.
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 grid max-w-[1280px] gap-8 rounded-xl border border-zinc-700 bg-[var(--cream)] p-8 text-black shadow-2xl lg:grid-cols-[440px_1fr]"
|
||||
>
|
||||
<div
|
||||
class="mx-auto w-[405px] max-w-full overflow-hidden rounded-xl border border-black/10 shadow-2xl"
|
||||
>
|
||||
<div class="slip placeholder-top">
|
||||
<div class="slip-top">
|
||||
<img
|
||||
class="slip-photo"
|
||||
src="cards-colinha-ui-design-assets/team-card-base.png"
|
||||
alt="Foto do grupo da campanha"
|
||||
/>
|
||||
<div class="slip-lockup">
|
||||
<img
|
||||
src="cards-colinha-ui-design-assets/marca-negativa-completa.png"
|
||||
alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro"
|
||||
/>
|
||||
</div>
|
||||
<div class="slip-band">
|
||||
<img
|
||||
src="cards-colinha-ui-design-assets/team-card-front.png"
|
||||
alt="JORGE SOLLA 1313 com as marcas Lula 13, Jero 13, Wagner 130 e Rui 133"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal">
|
||||
FEDERAÇÃO BRASIL DA ESPERANÇA - FE BRASIL (PT-PC DO B - PV) | CNPJ CANDIDATO:
|
||||
68.430.467/0001-05
|
||||
</div>
|
||||
<div class="slip-body">
|
||||
<div class="vote-row">
|
||||
<div class="office">
|
||||
DEPUTADO<br />FEDERAL<span class="candidate">Jorge Solla</span>
|
||||
</div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">1</span><span class="digit">3</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">
|
||||
DEPUTADO<br />ESTADUAL<span class="candidate">JULIO PINHEIRO</span>
|
||||
</div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">9</span><span class="digit">9</span
|
||||
><span class="digit">9</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">SENADOR<span class="candidate">Jaques Wagner</span></div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">0</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">SENADOR<span class="candidate">Rui Costa</span></div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">3</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">GOVERNADOR<span class="candidate">Jerônimo</span></div>
|
||||
<div class="digits"><span class="digit">1</span><span class="digit">3</span></div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">PRESIDENTE<span class="candidate">Lula</span></div>
|
||||
<div class="digits"><span class="digit">1</span><span class="digit">3</span></div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<p class="text-xs font-black tracking-[.1em] text-[var(--pt-red)] uppercase">
|
||||
Minha colinha
|
||||
</p>
|
||||
<h3 class="mt-1 text-2xl font-black">Pronta para levar com você</h3>
|
||||
<p class="mt-2 max-w-lg text-sm leading-6 text-[var(--muted)]">
|
||||
Confira o estadual escolhido. As demais escolhas já vêm preenchidas no modelo oficial.
|
||||
</p>
|
||||
<button
|
||||
class="mt-5 flex h-11 max-w-md items-center rounded-lg border border-[var(--field)] bg-white px-3 text-left text-sm font-bold"
|
||||
>
|
||||
<span>Julio Pinheiro</span
|
||||
><span class="ml-auto text-xs text-[var(--muted)]">13999 · Trocar</span>
|
||||
</button>
|
||||
<div class="mt-5 max-w-md rounded-lg bg-white p-4 ring-1 ring-[var(--line)]">
|
||||
<p class="text-sm font-bold">Linha conferida</p>
|
||||
<p class="mt-1 text-sm text-[var(--muted)]">
|
||||
DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="mt-5 min-h-11 max-w-md rounded-lg bg-[var(--pt-red)] px-5 text-sm font-extrabold text-white shadow"
|
||||
>
|
||||
Baixar minha colinha
|
||||
</button>
|
||||
<p class="mt-3 max-w-md text-xs leading-5 text-[var(--muted)]">
|
||||
A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é solicitado.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 4 · Zoom do detalhe aprovado · deputado estadual
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
Um dígito por caixa, cinco caixas, nome vermelho e CONFIRMA verde. Este recorte fixa a
|
||||
hierarquia e o contraste em escala legível.
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 max-w-[1000px] rounded-xl border border-zinc-700 bg-white p-6 text-black shadow-xl"
|
||||
>
|
||||
<div class="grid items-center gap-4 sm:grid-cols-[220px_1fr_auto]">
|
||||
<div>
|
||||
<p class="text-xl leading-none font-black uppercase">DEPUTADO ESTADUAL</p>
|
||||
<p class="mt-2 text-2xl leading-none font-black text-[var(--brand-red)]">
|
||||
JULIO PINHEIRO
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span
|
||||
class="grid size-14 place-items-center rounded-md border-[3px] border-black text-3xl font-black"
|
||||
>1</span
|
||||
><span
|
||||
class="grid size-14 place-items-center rounded-md border-[3px] border-black text-3xl font-black"
|
||||
>3</span
|
||||
><span
|
||||
class="grid size-14 place-items-center rounded-md border-[3px] border-black text-3xl font-black"
|
||||
>9</span
|
||||
><span
|
||||
class="grid size-14 place-items-center rounded-md border-[3px] border-black text-3xl font-black"
|
||||
>9</span
|
||||
><span
|
||||
class="grid size-14 place-items-center rounded-md border-[3px] border-black text-3xl font-black"
|
||||
>9</span
|
||||
>
|
||||
</div>
|
||||
<span class="rounded-full bg-[var(--confirm)] px-5 py-3 text-sm font-black text-white"
|
||||
>CONFIRMA</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 5 · Drawer mobile 390 · escolhido e pronto
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
A colinha usa quase toda a largura útil e segue legível; a prévia rola, enquanto o CTA
|
||||
fica isolado no rodapé.
|
||||
</p>
|
||||
<div
|
||||
class="relative mt-4 h-[850px] w-[390px] max-w-full overflow-hidden rounded-[22px] border border-zinc-700 bg-[var(--cream)] text-black shadow-2xl"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/50"></div>
|
||||
<article
|
||||
class="absolute inset-x-0 bottom-0 max-h-[98%] overflow-hidden rounded-t-2xl bg-white"
|
||||
>
|
||||
<div class="mx-auto mt-2 h-1.5 w-10 rounded-full bg-stone-300"></div>
|
||||
<header class="flex px-5 pt-4">
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-[var(--pt-red)] uppercase">Minha colinha</p>
|
||||
<h3 class="mt-1 text-lg font-black">Pronta para baixar</h3>
|
||||
</div>
|
||||
<button class="ml-auto size-11 text-2xl text-[var(--muted)]">×</button>
|
||||
</header>
|
||||
<div class="max-h-[690px] overflow-y-auto px-5 pt-3 pb-4">
|
||||
<div class="mx-auto w-[300px] overflow-hidden rounded-lg border shadow">
|
||||
<div class="slip placeholder-top">
|
||||
<div class="slip-top">
|
||||
<img
|
||||
class="slip-photo"
|
||||
src="cards-colinha-ui-design-assets/team-card-base.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="slip-lockup">
|
||||
<img
|
||||
src="cards-colinha-ui-design-assets/marca-negativa-completa.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="slip-band">
|
||||
<img src="cards-colinha-ui-design-assets/team-card-front.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="legal">
|
||||
FEDERAÇÃO BRASIL DA ESPERANÇA - FE BRASIL (PT-PC DO B - PV) | CNPJ CANDIDATO:
|
||||
68.430.467/0001-05
|
||||
</div>
|
||||
<div class="slip-body">
|
||||
<div class="vote-row">
|
||||
<div class="office">
|
||||
DEPUTADO<br />FEDERAL<span class="candidate">Jorge Solla</span>
|
||||
</div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">1</span><span class="digit">3</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">
|
||||
DEPUTADO<br />ESTADUAL<span class="candidate">JULIO PINHEIRO</span>
|
||||
</div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">9</span><span class="digit">9</span
|
||||
><span class="digit">9</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">SENADOR<span class="candidate">Jaques Wagner</span></div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">0</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">SENADOR<span class="candidate">Rui Costa</span></div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span
|
||||
><span class="digit">3</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">GOVERNADOR<span class="candidate">Jerônimo</span></div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
<div class="office">PRESIDENTE<span class="candidate">Lula</span></div>
|
||||
<div class="digits">
|
||||
<span class="digit">1</span><span class="digit">3</span>
|
||||
</div>
|
||||
<span class="confirm">CONFIRMA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="mt-4 flex h-11 w-full items-center rounded-lg border border-[var(--field)] px-3 text-sm font-bold"
|
||||
>
|
||||
<span>Julio Pinheiro</span
|
||||
><span class="ml-auto text-xs text-[var(--muted)]">13999 · Trocar</span>
|
||||
</button>
|
||||
</div>
|
||||
<footer class="border-t border-[var(--line)] px-5 py-4">
|
||||
<button
|
||||
class="min-h-11 w-full rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white"
|
||||
>
|
||||
Baixar minha colinha
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="mt-14 border-t border-zinc-800 pt-8 text-xs leading-5 text-zinc-500">
|
||||
<p class="font-bold text-zinc-300">Design tier 1 · openai/gpt-5.6-sol.</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Modelo aprovado — arquivo do gate:</strong>
|
||||
<code>cards-colinha-ui-design-assets/modelo-colinha.jpeg</code> é o arquivo exato entregue
|
||||
pelo humano, com a linha de deputado estadual em branco; o tile usa essa arte sem
|
||||
recomposição.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Conteúdo fixado:</strong> seis cargos; linha legal completa
|
||||
na borda esquerda; estadual de exemplo JULIO PINHEIRO 13999; um único CTA “Baixar minha
|
||||
colinha”.
|
||||
</p>
|
||||
</aside>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
111
docs/plans/cards-colinha.md
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
# S31 — Minha colinha: o estadual escolhido na colinha de voto
|
||||
|
||||
Status: rascunho
|
||||
Atualizado em: 2026-09-23
|
||||
Issue: #1272
|
||||
Priority: P1
|
||||
Impeccable: B — novo modelo no estúdio de cards existente com saída nova (colinha) e seletor de estadual
|
||||
Design UI: docs/plans/cards-colinha-ui-design.html
|
||||
Appetite: ~1–1,5 dia eng; um modelo novo e verificável no estúdio de cards existente
|
||||
Responsável: —
|
||||
|
||||
## Intenção
|
||||
|
||||
O funil de cards (seção `#cards` da home + `/cards`) dá ao visitante cards para circular — nome, foto e "Time de você". Falta a peça que o cabo eleitoral leva para a rua: a **colinha de voto**, o papel com o número de cada cargo. O pedido do humano é auto-serviço: o visitante escolhe o estadual da mesma lista da dobradinha (S30) e recebe uma colinha 9:16 no modelo de referência, com a linha do estadual preenchida — nome de urna e os cinco dígitos, um por caixa — e as outras cinco escolhas fixas do voto.
|
||||
|
||||
A referência é uma arte vertical 1080×1920 de fundo branco: topo com o lockup "MAIS SAÚDE MAIS FUTURO", a foto do grupo e a faixa vermelha JORGE SOLLA · DEPUTADO FEDERAL · 1313 (com as marcas menores LULA 13, JERO 13, WAGNER 130, RUI 133); linha legal vertical na borda esquerda; corpo com uma linha por cargo (rótulo escuro em caixa alta, nome em vermelho, dígitos em caixas brancas contornadas de preto e um selo verde "CONFIRMA"). É um modelo novo do estúdio de cards, não uma superfície nova.
|
||||
|
||||
## Persona e fluxo
|
||||
|
||||
- **Persona / contexto:** militante/eleitor no celular, prestes a pedir voto na rua ou no grupo; quer a colinha certa do seu estadual, pronta para imprimir ou mandar.
|
||||
- **Job principal:** sair com a colinha completa — o estadual que ele apoia preenchido no meio das escolhas fixas — sem instalar nada, sem cadastro e sem digitar.
|
||||
- **Fluxo desejado:** home ou `/cards` → escolhe `Minha colinha` → escolhe o estadual na lista da dobradinha → vê a prévia com a linha preenchida → baixa o PNG 1080×1920.
|
||||
- **Anti-goals de produto:** segundo editor/estúdio, rota ou página por colinha, coleta de nome/foto do visitante, editor de linhas, upload, CMS.
|
||||
|
||||
### Esboço de fluxo (B)
|
||||
|
||||
```text
|
||||
[home/#cards ou /cards] → [modelo "Minha colinha"] → [seletor do estadual (lista da dobradinha)] → [prévia 9:16 com a linha preenchida] → [baixar PNG]
|
||||
```
|
||||
|
||||
### Design UI (B)
|
||||
|
||||
- Design UI (gate): `docs/plans/cards-colinha-ui-design.html`
|
||||
- Cenas: tile do modelo na galeria, seletor do estadual (busca e estado vazio), prévia completa 9:16 em desktop e mobile e o detalhe da linha preenchida (cinco dígitos nas cinco caixas + CONFIRMA).
|
||||
|
||||
## Objetivo e aceite
|
||||
|
||||
- O estúdio ganha o modelo `Minha colinha`; escolhido o estadual, a prévia mostra a linha do estadual preenchida (nome de urna + cinco dígitos, um por caixa) e as cinco linhas fixas intocadas; o PNG 1080×1920 (9:16) sai do mesmo estúdio dos cards atuais.
|
||||
- 100% no aparelho: sem nome do visitante, sem foto, sem upload e sem análise de uso neste item (analytics é S32).
|
||||
- O catálogo de estaduais é o de S30 (arte predefinida; slug, nome de urna e número): um estadual, uma linha; sem estadual escolhido não há prévia.
|
||||
- Fidelidade ao modelo de referência: topo, linha legal vertical na borda esquerda e corpo de linhas seguem o desenho aprovado no gate.
|
||||
- Escolha por toque e teclado, no idioma do seletor de S30; sem página/rota por colinha; a nota de privacidade existente permanece verdadeira.
|
||||
|
||||
## Dados (intenção)
|
||||
|
||||
- **Vou apresentar dados?** Não.
|
||||
- **Decisões desbloqueadas:** N/A — nenhum dado é apresentado; medir uso da colinha é S32.
|
||||
- **Forma:** _adiada ao plano de implementação_ — o catálogo de estaduais é conteúdo (arte + número), não análise.
|
||||
|
||||
## Dados da decisão (literais)
|
||||
|
||||
- ID `S31`; tipo `feature`; Priority `P1`; Impeccable `B — novo modelo no estúdio de cards existente com saída nova (colinha) e seletor de estadual`; Design UI `docs/plans/cards-colinha-ui-design.html`; slug `cards-colinha` (arquivo `docs/plans/cards-colinha.md`).
|
||||
- Model id `colinha`; label de galeria `Minha colinha`.
|
||||
- Saída PNG 1080×1920 (9:16), seguindo o modelo de referência, baixada do mesmo estúdio; sem nome do visitante, sem foto, sem upload — 100% no aparelho.
|
||||
- Linhas fixas (conteúdo do template, não digitação do visitante), cada uma com o selo verde `CONFIRMA`: `DEPUTADO FEDERAL Jorge Solla — 1313`; `SENADOR Jaques Wagner — 130`; `SENADOR Rui Costa — 133`; `GOVERNADOR Jerônimo — 13`; `PRESIDENTE Lula — 13`.
|
||||
- Linha preenchida: `DEPUTADO ESTADUAL <nome de urna do estadual> — <5 dígitos>`, com os cinco dígitos dentro das cinco caixas, um por caixa; vem do catálogo compartilhado com S30.
|
||||
- Modelo aprovado (arquivo exato entregue pelo humano, 2026-09-23): `docs/plans/cards-colinha-ui-design-assets/modelo-colinha.jpeg` (900×1600) — usar como referência canônica do layout (tile da galeria e conferência no gate); o preenchimento é o resultado (linha do estadual com nome de urna + 5 dígitos).
|
||||
- Topo (arte-mestre) — **NEEDS ASSET**: lockup "MAIS SAÚDE MAIS FUTURO" + foto do grupo + faixa `JORGE SOLLA · DEPUTADO FEDERAL · 1313` com `LULA 13`, `JERO 13`, `WAGNER 130`, `RUI 133`; definida no design hi-fi e montada a partir do kit oficial (`public/campaign-kit/`, `public/cards/team-card-base.png`, `public/cards/team-card-front.png`).
|
||||
- Linha legal vertical (borda esquerda): `FEDERAÇÃO BRASIL DA ESPERANÇA - FE BRASIL (PT-PC DO B - PV) | CNPJ CANDIDATO: 68.430.467/0001-05`.
|
||||
- Catálogo compartilhado com S30: as 53 pastas de arte predefinida em `/home/fsolla/Downloads/DOBRADINHAS SITE-20260923T033020Z-1-001/DOBRADINHAS SITE/` (slug, nome de urna, número de 5 dígitos); dependência dura de S30 para o catálogo/assets commitados.
|
||||
- Pipeline reaproveitado: `renderX → preview canvas → PNG download` — o mesmo motor único de prévia/export do estúdio.
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
- **Áreas prováveis:** catálogo `src/lib/cardModels.ts`, roteiro/render `src/lib/cardRender.ts`, compositor `src/components/cards/CardComposer.tsx`, assets `public/cards/` e `public/campaign-kit/`.
|
||||
- **Precedente a olhar:** S13/S14/S15 (`docs/plans/cards-personalizados-campanha-impl.md`, `docs/plans/cards-time-de-voce-impl.md`) e S30 (`docs/plans/cards-estadual-dobradinha.md`) — o seletor do estadual segue o idioma de escolha de S30.
|
||||
- **Risco de acoplamento:** o `CardComposer` ramifica por `kind`; testes de unidade pinam os ids e o e2e falha em qualquer console error; a colinha não pode virar segundo editor nem mexer nos modelos existentes.
|
||||
|
||||
## Dependências
|
||||
|
||||
- S30 (`docs/plans/cards-estadual-dobradinha.md`) — catálogo e assets dos estaduais; dependência dura para o preenchimento da linha.
|
||||
- NEEDS ASSET: arte-mestre do topo — definida no design hi-fi e construída a partir dos ativos oficiais (o pacote não existe no repo hoje).
|
||||
|
||||
## Fora de escopo
|
||||
|
||||
- Segundo editor/estúdio; rota ou página por colinha; CMS/coleção/migration.
|
||||
- Nome do visitante ou "feito por você" (Questão 2); PDF A4/impressão em casa (Questão 1).
|
||||
- Analytics de uso/abandono (S32); foto/recorte do visitante; upload ou processamento no servidor.
|
||||
- Mudar o conteúdo das cinco linhas fixas; redesenhar os modelos existentes.
|
||||
|
||||
## Rabbit holes de produto
|
||||
|
||||
- **A colinha virar editor de voto.** Se alguém "só completar": reordenar/remover linhas e acrescentar cargos. **Corte neste item:** cinco linhas fixas + a linha do estadual.
|
||||
- **A escolha do estadual virar "matching".** Se alguém "só completar": busca por município, perfil e recomendação. **Corte neste item:** uma lista no idioma de S30.
|
||||
- **A arte do topo virar redesenho infinito.** Se alguém "só completar": recriar tipografia e foto em vez de usar o kit. **Corte neste item:** arte aprovada no gate a partir dos ativos oficiais.
|
||||
- **Impressão/PDF no mesmo item.** Se alguém "só completar": entra diagramação A4 e margem de impressora. **Corte neste item:** só PNG 9:16; A4 vira item próprio se o produto pedir.
|
||||
|
||||
## Questões em aberto (produto)
|
||||
|
||||
- **Saída só 9:16 ou também PDF/A4 para imprimir?** **Opções:** A) PNG 1080×1920 9:16 (bate com a referência e com os stories) | B) também A4/impressão (escopo extra). **Recomendação:** A. _(assumido — validar com produto)_
|
||||
- **A colinha leva o nome do visitante ou "feito por você"?** **Opções:** A) não (a colinha é o produto) | B) linha opcional com o nome (escopo extra). **Recomendação:** A. _(assumido — validar com produto)_
|
||||
- **Onde o visitante escolhe o estadual?** **Opções:** A) mesmo idioma de seletor de S30 dentro do compositor | B) só um ponto de entrada próprio na galeria. **Recomendação:** A — um só fluxo, um só editor. _(assumido — validar com produto)_
|
||||
|
||||
## Referências
|
||||
|
||||
- GitHub Issue #1272
|
||||
- Design UI (gate): `docs/plans/cards-colinha-ui-design.html`
|
||||
- `docs/plans/cards-estadual-dobradinha.md` (S30 — catálogo e assets compartilhados)
|
||||
- `src/lib/cardModels.ts`, `src/lib/cardRender.ts`, `src/components/cards/CardComposer.tsx`, `tests/e2e/frontend.e2e.spec.ts`
|
||||
- `public/campaign-kit/README.md`, `public/cards/team-card-base.png`, `public/cards/team-card-front.png`
|
||||
- `/home/fsolla/Downloads/DOBRADINHAS SITE-20260923T033020Z-1-001/DOBRADINHAS SITE/` — referência externa do catálogo (53 pastas)
|
||||
|
||||
## Self-score (shaping)
|
||||
|
||||
**5/5.**
|
||||
|
||||
- Fatia = um outcome verificável (colinha baixável com a linha do estadual preenchida) e nada além.
|
||||
- Appetite (~1–1,5 dia) declarado e a intenção cabe nele: um modelo novo em estúdio existente, sem fluxo novo.
|
||||
- Persona, job e aceite em linguagem de produto; o anti-goal (editor de voto) está explícito.
|
||||
- Direção no codebase é hipótese revisável; nenhuma signature, schema ou migration prescrita.
|
||||
- Arte final, geometria e o seletor ficam para a implementação; o NEEDS ASSET é pendência de produto no gate.
|
||||
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 283 KiB |
|
After Width: | Height: | Size: 417 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 139 KiB |
|
After Width: | Height: | Size: 262 KiB |
660
docs/plans/cards-estadual-dobradinha-ui-design.html
Normal file
|
|
@ -0,0 +1,660 @@
|
|||
<!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 — S30 · Time do estadual</title>
|
||||
<style type="text/tailwindcss">
|
||||
:root {
|
||||
--pt-red: #a21c1c;
|
||||
--cream: #fff8f2;
|
||||
--ink: #000;
|
||||
--muted: #6c615e;
|
||||
--surface: #f9faff;
|
||||
--band: #ebe9e9;
|
||||
--line: rgb(0 0 0 / 12%);
|
||||
--field: rgb(0 0 0 / 18%);
|
||||
--team-red: #e50e2f;
|
||||
--team-yellow: #ffec01;
|
||||
--team-blue: #0061a5;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
button:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: 2px solid var(--pt-red);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.tcard {
|
||||
position: relative;
|
||||
aspect-ratio: 3/4;
|
||||
overflow: hidden;
|
||||
background: #cfe7f7;
|
||||
container-type: inline-size;
|
||||
}
|
||||
.tcard > img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.visitor-placeholder {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 30.5%;
|
||||
left: 28%;
|
||||
width: 51%;
|
||||
height: 41%;
|
||||
color: #001a42;
|
||||
}
|
||||
.visitor-placeholder::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 33%;
|
||||
width: 34%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
content: '';
|
||||
}
|
||||
.visitor-placeholder::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -3%;
|
||||
left: 0;
|
||||
height: 72%;
|
||||
border-radius: 48% 48% 10% 10%;
|
||||
background: currentColor;
|
||||
content: '';
|
||||
}
|
||||
.banner {
|
||||
position: absolute;
|
||||
left: 50.46%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(-50%, -50%) rotate(var(--r));
|
||||
overflow: hidden;
|
||||
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.banner-red {
|
||||
--r: -3.5deg;
|
||||
top: 11.25%;
|
||||
width: 64.17%;
|
||||
height: 8.2%;
|
||||
background: var(--team-red);
|
||||
color: var(--team-yellow);
|
||||
font-size: 12cqw;
|
||||
}
|
||||
.banner-blue {
|
||||
--r: -4.1deg;
|
||||
top: 21.74%;
|
||||
width: 78%;
|
||||
height: 12.22%;
|
||||
background: var(--team-blue);
|
||||
color: #fff;
|
||||
font-size: 11cqw;
|
||||
}
|
||||
.checker {
|
||||
background-color: #f4f1ed;
|
||||
background-image:
|
||||
linear-gradient(45deg, #e6e1dc 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #e6e1dc 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #e6e1dc 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #e6e1dc 75%);
|
||||
background-position:
|
||||
0 0,
|
||||
0 8px,
|
||||
8px -8px,
|
||||
-8px 0;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 99px;
|
||||
background: #c7c2be;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||||
<main class="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-10">
|
||||
<header class="max-w-4xl">
|
||||
<p class="text-xs font-black tracking-[.12em] text-red-400 uppercase">Gate visual · S30</p>
|
||||
<h1 class="mt-2 text-3xl font-black tracking-tight">Time do estadual</h1>
|
||||
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
|
||||
O apoiador escolhe uma das 53 dobradinhas, digita como é chamado, envia uma foto de busto
|
||||
e baixa o card com a arte oficial do estadual. É o mesmo fluxo do “Time de você”: recorte
|
||||
no aparelho, dialog no desktop e drawer no celular.
|
||||
</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"
|
||||
>1280px · desktop</span
|
||||
>
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>390px · mobile</span
|
||||
>
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>53 estaduais · busca + rolagem</span
|
||||
>
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>foto + recorte no aparelho</span
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 1 · Galeria desktop 1280 · cinco tiles na mesma linha
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
A largura do conteúdo é preservada; o gap cai discretamente e os cinco modelos continuam
|
||||
legíveis em uma única fileira. “Time do estadual” usa uma única arte de exemplo no
|
||||
carrossel: TIME DE FULANO com a silhueta no lugar da foto do visitante, Julio no grupo e a
|
||||
faixa JULIO PINHEIRO 13999.
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 max-w-[1280px] overflow-hidden rounded-xl border border-zinc-700 bg-[var(--cream)] px-10 py-12 text-black shadow-2xl"
|
||||
>
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<p class="text-xs font-black tracking-[.1em] text-[var(--pt-red)] uppercase">
|
||||
Faça parte
|
||||
</p>
|
||||
<h3 class="mt-1 text-2xl font-black">Mostre que você está com Solla</h3>
|
||||
<p class="mt-2 text-sm text-[var(--muted)]">
|
||||
Escolha um modelo, personalize e baixe seu card para compartilhar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-8 grid grid-cols-5 gap-4">
|
||||
<button class="group min-w-0">
|
||||
<span
|
||||
class="relative block aspect-[3/4] overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--band)]"
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/name-card-base.jpg"
|
||||
alt=""
|
||||
class="size-full object-cover" /></span
|
||||
><span class="mt-3 block text-sm font-bold">Card com seu nome</span>
|
||||
</button>
|
||||
<button class="group min-w-0">
|
||||
<span
|
||||
class="checker relative block aspect-square overflow-hidden rounded-xl border border-[var(--line)]"
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/photo-square-frame.png"
|
||||
alt=""
|
||||
class="size-full object-cover" /></span
|
||||
><span class="mt-3 block text-sm font-bold">Moldura quadrada</span>
|
||||
</button>
|
||||
<button class="group min-w-0">
|
||||
<span
|
||||
class="checker relative block aspect-[25/36] overflow-hidden rounded-xl border border-[var(--line)]"
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/photo-portrait-frame.png"
|
||||
alt=""
|
||||
class="size-full object-cover" /></span
|
||||
><span class="mt-3 block text-sm font-bold">Moldura vertical</span>
|
||||
</button>
|
||||
<button class="group min-w-0">
|
||||
<span
|
||||
class="relative block aspect-[3/4] overflow-hidden rounded-xl border border-[var(--line)]"
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/team-card-example.jpg"
|
||||
alt=""
|
||||
class="size-full object-cover" /></span
|
||||
><span class="mt-3 block text-sm font-bold">Time de você</span>
|
||||
</button>
|
||||
<button class="group min-w-0" aria-label="Time do estadual">
|
||||
<span
|
||||
class="relative block aspect-[3/4] overflow-hidden rounded-xl border-2 border-[var(--pt-red)] shadow-lg"
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg"
|
||||
alt=""
|
||||
class="size-full object-cover"
|
||||
/>
|
||||
<span
|
||||
class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[var(--team-blue)] shadow"
|
||||
>NOVO</span
|
||||
></span
|
||||
><span class="mt-3 block text-sm font-bold text-[var(--pt-red)]"
|
||||
>Time do estadual</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 2 · Galeria mobile 390 · carrossel horizontal
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs text-zinc-500">
|
||||
No celular não se espreme a grade: mantém-se um tile largo com a borda do próximo como
|
||||
pista. A dica passa a “Deslize para ver os cinco modelos” e há cinco indicadores. O tile
|
||||
repete a arte de exemplo do modelo: TIME DE FULANO, silhueta no lugar da foto do visitante
|
||||
e Julio no grupo com a faixa JULIO PINHEIRO 13999.
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 w-[390px] max-w-full overflow-hidden rounded-[22px] border border-zinc-700 bg-white p-5 text-black shadow-2xl"
|
||||
>
|
||||
<p
|
||||
class="text-center text-[10px] font-black tracking-[.1em] text-[var(--pt-red)] uppercase"
|
||||
>
|
||||
Faça parte
|
||||
</p>
|
||||
<h3 class="mt-1 text-center text-[22px] font-black">Crie seu card de apoio</h3>
|
||||
<p class="mt-2 text-center text-sm leading-5 text-[var(--muted)]">
|
||||
Escolha um dos cinco modelos, personalize e baixe para compartilhar.
|
||||
</p>
|
||||
<div class="mt-6 flex w-[620px] translate-x-[-90px] gap-4">
|
||||
<button class="w-[90px] shrink-0 opacity-70">
|
||||
<span class="block aspect-[3/4] overflow-hidden rounded-xl"
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/team-card-example.jpg"
|
||||
alt=""
|
||||
class="size-full object-cover" /></span
|
||||
><span class="mt-2 block text-xs font-bold">Time de você</span>
|
||||
</button>
|
||||
<button class="w-[273px] shrink-0">
|
||||
<span
|
||||
class="relative block aspect-[3/4] overflow-hidden rounded-xl border-2 border-[var(--pt-red)]"
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg"
|
||||
alt=""
|
||||
class="size-full object-cover" /></span
|
||||
><span class="mt-3 block text-sm font-bold text-[var(--pt-red)]"
|
||||
>Time do estadual</span
|
||||
>
|
||||
</button>
|
||||
<span class="mt-24 h-44 w-16 shrink-0 rounded-xl bg-stone-100"></span>
|
||||
</div>
|
||||
<p class="mt-3 text-center text-xs font-semibold text-[var(--muted)]">
|
||||
Deslize para ver os cinco modelos
|
||||
</p>
|
||||
<div class="mt-4 flex justify-center gap-2">
|
||||
<i class="size-1.5 rounded-full bg-stone-300"></i
|
||||
><i class="size-1.5 rounded-full bg-stone-300"></i
|
||||
><i class="size-1.5 rounded-full bg-stone-300"></i
|
||||
><i class="size-1.5 rounded-full bg-stone-300"></i
|
||||
><i class="h-1.5 w-6 rounded-full bg-[var(--pt-red)]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 3 · Compositor inicial + seletor aberto · dialog desktop
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs text-zinc-500">
|
||||
O seletor vive dentro do mesmo dialog. Busca no topo, lista rolável, seleção por linha
|
||||
inteira e check visível; o nome já digitado permanece quando a pessoa troca o estadual.
|
||||
</p>
|
||||
<div
|
||||
class="relative mt-4 flex min-h-[850px] max-w-[1280px] items-center justify-center overflow-hidden rounded-xl border border-zinc-700 bg-[var(--cream)] p-8 text-black shadow-2xl"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/45"></div>
|
||||
<article
|
||||
class="relative z-10 w-[512px] overflow-hidden rounded-xl bg-white shadow-2xl"
|
||||
role="dialog"
|
||||
aria-label="Time do estadual"
|
||||
>
|
||||
<header class="flex items-start px-5 pt-5">
|
||||
<div>
|
||||
<p class="text-xs font-black tracking-[.1em] text-[var(--pt-red)] uppercase">
|
||||
Time do estadual
|
||||
</p>
|
||||
<h3 class="mt-1 text-xl font-black">Escolha sua dobradinha</h3>
|
||||
<p class="mt-1 text-sm text-[var(--muted)]">Escolha seu estadual da dobradinha.</p>
|
||||
</div>
|
||||
<button class="ml-auto size-11 text-2xl text-[var(--muted)]" aria-label="Fechar">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<div class="px-5 pt-4 pb-5">
|
||||
<div
|
||||
class="mx-auto w-[160px] overflow-hidden rounded-lg border border-[var(--line)] shadow"
|
||||
>
|
||||
<img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg"
|
||||
alt="Arte de exemplo do modelo com silhueta, TIME DE FULANO e faixa de Julio Pinheiro 13999"
|
||||
class="block aspect-[3/4] w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-2 text-center text-[11px] leading-4 text-[var(--muted)]">
|
||||
A silhueta marca o lugar da sua foto. O card final usa a arte do estadual escolhido.
|
||||
</p>
|
||||
<label class="mt-4 block text-sm font-bold">Seu estadual</label>
|
||||
<button
|
||||
class="mt-2 flex h-11 w-full items-center justify-between rounded-lg border border-[var(--field)] bg-white px-3 text-left text-sm"
|
||||
>
|
||||
<span class="text-stone-500">Escolha um nome</span><span>⌄</span>
|
||||
</button>
|
||||
<div
|
||||
class="mt-2 overflow-hidden rounded-xl border border-[var(--line)] bg-white shadow-xl"
|
||||
>
|
||||
<div class="border-b border-[var(--line)] p-3">
|
||||
<label class="sr-only" for="search">Buscar estadual</label>
|
||||
<div
|
||||
class="flex h-11 items-center gap-2 rounded-lg border border-[var(--field)] px-3"
|
||||
>
|
||||
<span aria-hidden="true">⌕</span
|
||||
><input
|
||||
id="search"
|
||||
class="min-w-0 flex-1 outline-none"
|
||||
placeholder="Buscar por nome"
|
||||
value="J"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-2 text-[11px] text-[var(--muted)]">
|
||||
53 estaduais · use ↑ ↓ e Enter para escolher
|
||||
</p>
|
||||
</div>
|
||||
<div class="scrollbar max-h-52 overflow-y-auto p-1.5 text-sm" role="listbox">
|
||||
<button
|
||||
class="flex min-h-11 w-full items-center rounded-md px-3 text-left hover:bg-stone-100"
|
||||
>
|
||||
Jaco</button
|
||||
><button
|
||||
class="flex min-h-11 w-full items-center rounded-md px-3 text-left hover:bg-stone-100"
|
||||
>
|
||||
Jamille</button
|
||||
><button
|
||||
class="flex min-h-11 w-full items-center rounded-md px-3 text-left hover:bg-stone-100"
|
||||
>
|
||||
Josafá</button
|
||||
><button
|
||||
class="flex min-h-11 w-full items-center rounded-md bg-red-50 px-3 text-left font-bold text-[var(--pt-red)]"
|
||||
>
|
||||
<span>Julio Pinheiro</span
|
||||
><span class="ml-auto text-xs">13999 ✓</span></button
|
||||
><button
|
||||
class="flex min-h-11 w-full items-center rounded-md px-3 text-left hover:bg-stone-100"
|
||||
>
|
||||
Juliete</button
|
||||
><button
|
||||
class="flex min-h-11 w-full items-center rounded-md px-3 text-left hover:bg-stone-100"
|
||||
>
|
||||
Junior</button
|
||||
><button
|
||||
class="flex min-h-11 w-full items-center rounded-md px-3 text-left hover:bg-stone-100"
|
||||
>
|
||||
Kleber
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<label class="mt-4 block text-sm font-bold" for="idle-name">Seu nome</label
|
||||
><input
|
||||
id="idle-name"
|
||||
class="mt-2 h-11 w-full rounded-lg border border-[var(--field)] px-3"
|
||||
placeholder="Como você é chamado"
|
||||
/>
|
||||
<p class="mt-2 text-xs leading-5 text-[var(--muted)]">
|
||||
Vai aparecer em caixa alta depois de “TIME DE”. Use um nome curto e conhecido.
|
||||
</p>
|
||||
<p
|
||||
class="mt-4 rounded-lg bg-[var(--cream)] p-3 text-xs leading-5 text-[var(--muted)]"
|
||||
>
|
||||
<b class="text-black">Escolha um estadual para continuar.</b><br />A prévia e o
|
||||
download usam a arte oficial da dobradinha escolhida.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="flex gap-3 border-t border-[var(--line)] px-5 py-4">
|
||||
<button
|
||||
class="min-h-11 flex-1 rounded-lg border-2 border-[var(--line)] font-bold text-[var(--pt-red)]"
|
||||
>
|
||||
Cancelar</button
|
||||
><button
|
||||
disabled
|
||||
class="min-h-11 flex-1 cursor-not-allowed rounded-lg bg-[var(--pt-red)] font-bold text-white opacity-50"
|
||||
>
|
||||
Baixar meu card
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 4 · Escolhido, pronto e nome longo · estados críticos
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs text-zinc-500">
|
||||
A arte de Julio confirma o estadual ao lado/atrás; a silhueta mantém a convenção do S15
|
||||
para a foto recortada do visitante em primeiro plano. O estado pronto tem um único CTA
|
||||
primário; o estado <code>too-long</code> preserva foto e estadual sem cortar o nome.
|
||||
</p>
|
||||
<div class="mt-4 grid gap-6 xl:grid-cols-3">
|
||||
<article class="overflow-hidden rounded-xl bg-white text-black shadow-xl">
|
||||
<header class="px-5 pt-5">
|
||||
<p class="text-xs font-black text-[var(--pt-red)] uppercase">Estadual escolhido</p>
|
||||
<h3 class="mt-1 text-xl font-black">Agora coloque seu nome</h3>
|
||||
</header>
|
||||
<div class="px-5 py-4">
|
||||
<div class="mx-auto w-[230px] overflow-hidden rounded-lg border shadow">
|
||||
<div class="tcard">
|
||||
<img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/julio-fotos.png"
|
||||
alt=""
|
||||
/><span class="visitor-placeholder" aria-hidden="true"></span
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/julio-base.png"
|
||||
alt=""
|
||||
/><span class="banner banner-red">TIME DE</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="mt-4 flex h-11 w-full items-center rounded-lg border border-[var(--field)] px-3 text-left text-sm font-bold"
|
||||
>
|
||||
<span>Julio Pinheiro</span
|
||||
><span class="ml-auto text-xs text-[var(--muted)]">13999 · Trocar</span></button
|
||||
><label class="mt-4 block text-sm font-bold">Seu nome</label
|
||||
><input
|
||||
class="mt-2 h-11 w-full rounded-lg border border-[var(--field)] px-3"
|
||||
placeholder="Como você é chamado"
|
||||
/>
|
||||
<div class="mt-4 rounded-lg bg-[var(--surface)] p-3 ring-1 ring-[var(--line)]">
|
||||
<p class="text-sm font-bold">Sua foto de busto</p>
|
||||
<p class="mt-1 text-xs leading-5 text-[var(--muted)]">
|
||||
O fundo é removido no seu aparelho e você entra em primeiro plano.
|
||||
</p>
|
||||
<button
|
||||
class="mt-2 min-h-11 w-full rounded-lg border-2 border-[var(--line)] bg-white text-sm font-bold text-[var(--pt-red)]"
|
||||
>
|
||||
Escolher foto
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="border-t p-4">
|
||||
<button
|
||||
disabled
|
||||
class="min-h-11 w-full rounded-lg bg-[var(--pt-red)] font-bold text-white opacity-50"
|
||||
>
|
||||
Baixar meu card
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="overflow-hidden rounded-xl bg-white text-black shadow-xl">
|
||||
<header class="px-5 pt-5">
|
||||
<p class="text-xs font-black text-[var(--pt-red)] uppercase">Tudo certo</p>
|
||||
<h3 class="mt-1 text-xl font-black">Seu card está pronto</h3>
|
||||
</header>
|
||||
<div class="px-5 py-4">
|
||||
<div class="mx-auto w-[230px] overflow-hidden rounded-lg border shadow">
|
||||
<div class="tcard">
|
||||
<img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/julio-fotos.png"
|
||||
alt=""
|
||||
/><span class="visitor-placeholder" aria-hidden="true"></span
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/julio-base.png"
|
||||
alt=""
|
||||
/><span class="banner banner-red">TIME DE</span
|
||||
><span class="banner banner-blue">MARIA</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-3 text-center text-xs font-bold text-[var(--muted)]">
|
||||
Julio Pinheiro · 13999
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 rounded-lg bg-[var(--cream)] p-3 text-xs leading-5 text-[var(--muted)]"
|
||||
>
|
||||
Seu nome e sua foto são processados apenas neste aparelho e não são enviados para
|
||||
nós.
|
||||
</div>
|
||||
</div>
|
||||
<footer class="border-t p-4">
|
||||
<button
|
||||
class="min-h-11 w-full rounded-lg bg-[var(--pt-red)] font-bold text-white shadow"
|
||||
>
|
||||
Baixar meu card
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="overflow-hidden rounded-xl bg-white text-black shadow-xl">
|
||||
<header class="px-5 pt-5">
|
||||
<p class="text-xs font-black text-[var(--pt-red)] uppercase">Nome muito longo</p>
|
||||
<h3 class="mt-1 text-xl font-black">Encurte o nome</h3>
|
||||
</header>
|
||||
<div class="px-5 py-4">
|
||||
<div class="mx-auto w-[170px] overflow-hidden rounded-lg border shadow">
|
||||
<div class="tcard">
|
||||
<img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/julio-fotos.png"
|
||||
alt=""
|
||||
/><span class="visitor-placeholder" aria-hidden="true"></span
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/julio-base.png"
|
||||
alt=""
|
||||
/><span class="banner banner-red">TIME DE</span>
|
||||
</div>
|
||||
</div>
|
||||
<label class="mt-4 block text-sm font-bold">Seu nome</label
|
||||
><input
|
||||
aria-invalid="true"
|
||||
class="mt-2 h-11 w-full rounded-lg border-2 border-[var(--pt-red)] px-3"
|
||||
value="BARTOLOMEUCOSTAJUNIOR"
|
||||
/>
|
||||
<p role="alert" class="mt-2 text-sm leading-5 font-semibold text-[var(--pt-red)]">
|
||||
Não foi possível encaixar esse nome no card. Use um nome mais curto, como você é
|
||||
chamado.
|
||||
</p>
|
||||
<p class="mt-3 text-xs text-[var(--muted)]">
|
||||
A foto recortada e Julio Pinheiro continuam preservados enquanto você corrige.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="border-t p-4">
|
||||
<button
|
||||
disabled
|
||||
class="min-h-11 w-full rounded-lg bg-[var(--pt-red)] font-bold text-white opacity-50"
|
||||
>
|
||||
Baixar meu card
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-14">
|
||||
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
|
||||
Cena 5 · Drawer mobile 390 · escolhido e pronto
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
No celular o conteúdo rola dentro do drawer; prévia, estadual e nome ficam em ordem
|
||||
linear, com o CTA fixo no rodapé.
|
||||
</p>
|
||||
<div
|
||||
class="relative mt-4 h-[820px] w-[390px] max-w-full overflow-hidden rounded-[22px] border border-zinc-700 bg-[var(--cream)] text-black shadow-2xl"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/50"></div>
|
||||
<article class="absolute inset-x-0 bottom-0 overflow-hidden rounded-t-2xl bg-white">
|
||||
<div class="mx-auto mt-2 h-1.5 w-10 rounded-full bg-stone-300"></div>
|
||||
<header class="flex px-5 pt-4">
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-[var(--pt-red)] uppercase">
|
||||
Time do estadual
|
||||
</p>
|
||||
<h3 class="mt-1 text-lg font-black">Seu card está pronto</h3>
|
||||
</div>
|
||||
<button class="ml-auto size-11 text-2xl text-[var(--muted)]">×</button>
|
||||
</header>
|
||||
<div class="px-5 pt-3 pb-4">
|
||||
<div class="mx-auto w-[205px] overflow-hidden rounded-lg border shadow">
|
||||
<div class="tcard">
|
||||
<img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/julio-fotos.png"
|
||||
alt=""
|
||||
/><span class="visitor-placeholder" aria-hidden="true"></span
|
||||
><img
|
||||
src="cards-estadual-dobradinha-ui-design-assets/julio-base.png"
|
||||
alt=""
|
||||
/><span class="banner banner-red">TIME DE</span
|
||||
><span class="banner banner-blue">MARIA</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="mt-4 flex h-11 w-full items-center rounded-lg border border-[var(--field)] px-3 text-left text-sm font-bold"
|
||||
>
|
||||
<span>Julio Pinheiro</span
|
||||
><span class="ml-auto text-xs text-[var(--muted)]">13999 · Trocar</span></button
|
||||
><label class="mt-4 block text-sm font-bold">Seu nome</label
|
||||
><input
|
||||
class="mt-2 h-11 w-full rounded-lg border border-[var(--field)] px-3"
|
||||
value="MARIA"
|
||||
/>
|
||||
<p class="mt-3 text-xs leading-5 text-[var(--muted)]">
|
||||
Sua foto é recortada e ajustada apenas neste aparelho, como no “Time de você”, e não
|
||||
é enviada para nós.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="border-t border-[var(--line)] px-5 py-4">
|
||||
<button
|
||||
class="min-h-11 w-full rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white"
|
||||
>
|
||||
Baixar meu card
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="mt-14 border-t border-zinc-800 pt-8 text-xs leading-5 text-zinc-500">
|
||||
<p class="font-bold text-zinc-300">Design tier 1 · openai/gpt-5.6-sol.</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-amber-300">NEEDS ASSET:</strong> os dois PNGs de JULIO são lidos da
|
||||
origem local absoluta e representam os 53 pares que serão otimizados e versionados. Origem
|
||||
visível:
|
||||
<code
|
||||
>/home/fsolla/Downloads/DOBRADINHAS SITE-20260923T033020Z-1-001/DOBRADINHAS
|
||||
SITE/JULIO/</code
|
||||
>.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Arquivo exato aprovado pelo humano:</strong> galeria
|
||||
desktop, carrossel mobile e estado sem escolha usam
|
||||
<code
|
||||
>cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg</code
|
||||
>, sem composição alternativa. A silhueta é o lugar da foto do visitante; depois da
|
||||
escolha, a prévia usa a arte do estadual selecionado sob o recorte da pessoa.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Fluxo preservado do S15:</strong> escolher foto, recortar no
|
||||
aparelho e posicionar a pessoa na janela em primeiro plano. O estadual escolhido aparece
|
||||
ao lado/atrás e na banda; não há controles novos além dos já existentes no “Time de você”.
|
||||
</p>
|
||||
</aside>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
110
docs/plans/cards-estadual-dobradinha.md
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
# S30 — Card personalizado com o seu estadual (dobradinha)
|
||||
|
||||
Status: rascunho
|
||||
Atualizado em: 2026-09-23
|
||||
Issue: #1271
|
||||
Priority: P1
|
||||
Impeccable: B — encaixe no estúdio de cards existente (novo modelo + seletor de estadual no composer)
|
||||
Design UI: docs/plans/cards-estadual-dobradinha-ui-design.html
|
||||
Appetite: ~1–1,5 dia eng; o quinto modelo do estúdio entregue no mesmo fluxo, com a arte oficial do estadual
|
||||
Responsável: —
|
||||
|
||||
## Intenção
|
||||
|
||||
O funil de cards do site já tem o "Time de você" (S15, #1161): o visitante digita o nome e a própria foto recortada entra no card `TIME DE <NOME>`, no aparelho, sem upload. Agora a campanha fechou dobradinhas com 53 estaduais e já mandou a arte pronta de cada um — o grupo com o estadual e a faixa com o lockup nome+número ao lado do Jorge Solla 1313 (ex.: `JULIO` = "JULIO PINHEIRO · DEPUTADO ESTADUAL · 13999").
|
||||
|
||||
O card novo é o mesmo "Time de você" com o seu estadual dentro: o visitante escolhe o estadual, digita o nome e manda a própria foto — o recorte entra na janela, em primeiro plano, como hoje, e o estadual aparece ao lado (a arte oficial do escolhido vira o fundo e a faixa do card). A referência aprovada pelo humano (2026-09-23) é exatamente isso: `TIME DE FULANO` com a silhueta do visitante no centro e o estadual ao lado. A arte já existe (53 pastas, dois PNGs 1080×1440 por estadual, ~90 MB de originais) e o repo recebe só derivativos otimizados; é um modelo novo ao lado dos quatro atuais, no mesmo estúdio.
|
||||
|
||||
## Persona e fluxo
|
||||
|
||||
- **Persona / contexto:** apoiador/militante no celular com um estadual de referência (a dobradinha do seu território), querendo um card para circular no WhatsApp sem montar nada.
|
||||
- **Job principal:** escolher o seu estadual e sair com o card `TIME DE <NOME>` com a arte oficial dele, a partir da própria foto, sem cadastro e sem nenhum byte saindo do aparelho.
|
||||
- **Fluxo desejado:** abre `#cards` na home (ou `/cards`) → escolhe `Time do estadual` → escolhe o estadual na lista dos 53 → digita o nome → manda a foto de busto → vê o recorte acontecer no aparelho e a prévia com o estadual ao lado → baixa o PNG.
|
||||
- **Anti-goals de produto:** segundo cadastro de pessoas, ranking/placar de estaduais, página por estadual, controles novos além dos que o "Time de você" já tem, analytics, conta, persistência.
|
||||
|
||||
### Design UI (B)
|
||||
|
||||
- Design UI (gate): `docs/plans/cards-estadual-dobradinha-ui-design.html` — cenas: tile do quinto modelo na galeria, seletor dos 53 estaduais (mobile/desktop), prévia pronta com a banda do estadual e resultado baixado; o hi-fi é a fonte iterável do aceite visual até o gate.
|
||||
|
||||
## Objetivo e aceite
|
||||
|
||||
- O estúdio ganha o quinto modelo, `Time do estadual`, ao lado dos quatro atuais — mesmo editor, mesmas rotas (`#cards`, `/cards`, `?model=`).
|
||||
- Escolhido o estadual, digitado o nome e enviada a foto, o card final é o "Time de você" com a arte do estadual: o recorte do visitante entra na janela em primeiro plano, o estadual aparece ao lado e a banda leva o lockup nome+número dele — exatamente a referência aprovada (silhueta do visitante + `TIME DE FULANO` + estadual).
|
||||
- O fluxo de foto é o do S15 inteiro (envio, recorte no aparelho com progresso/retry, harmonização, arrasto/zoom como escape); nenhum controle novo nasce aqui.
|
||||
- A lista dos 53 estaduais é navegável por toque e teclado no celular; trocar de estadual não perde o nome nem a foto já processada.
|
||||
- Nome em uma linha com a máquina do S16 (banner azul dinâmico via `fitCardName`): fora do cap mínimo legível, a pessoa é pedida a usar um nome mais curto — nunca corte silencioso.
|
||||
- Os derivativos otimizados das 53 artes ficam commitados em `public/cards/` (originais fora do repo); nome completo e número vêm do catálogo derivado da arte, não da base.
|
||||
- 100% no aparelho: sem conta, sem PII, sem upload; a nota de privacidade do estúdio continua verdadeira e os quatro modelos existentes (e suas artes) ficam intocados.
|
||||
|
||||
## Dados (intenção)
|
||||
|
||||
- **Vou apresentar dados?** Não.
|
||||
- **Decisões desbloqueadas / forma:** N/A — nenhuma métrica é apresentada e a escolha do estadual não vira relatório; o catálogo dos 53 é conteúdo estático derivado da arte (_adiado ao plano de implementação_), e leitura de uso fica para S32.
|
||||
|
||||
## Dados da decisão (literais)
|
||||
|
||||
- ID `S30`; slug `cards-estadual-dobradinha` (arquivo `docs/plans/cards-estadual-dobradinha.md`); tipo `feature`; Priority `P1`; Impeccable `B — encaixe no estúdio de cards existente (novo modelo + seletor de estadual no composer)`; Design UI `docs/plans/cards-estadual-dobradinha-ui-design.html`.
|
||||
- Model id `time-do-estadual`; label de galeria `Time do estadual`; kind: variante de time personalizada pelo nome.
|
||||
- Composição do card (ordem do S15, com a arte do estadual por baixo): FOTOS do estadual (grupo com o estadual na janela) → foto recortada do visitante na janela em primeiro plano (x=286, y=439, largura=592, altura=577) → BASE do estadual (banda/overlay frontal, transparente no topo) → banners `TIME DE` + nome. O visitante **mantém** o fluxo de foto do S15 (envio, recorte no aparelho, harmonização, arrasto/zoom); o estadual aparece ao lado/atrás do recorte.
|
||||
- A banda/overlay frontal carrega o lockup nome+número do estadual ao lado do Jorge Solla 1313, no desenho de `public/cards/team-card-front.png`; exemplo literal: `JULIO` = "JULIO PINHEIRO · DEPUTADO ESTADUAL · 13999".
|
||||
- Arte do modelo no carrossel (decisão do humano, 2026-09-23): **o arquivo exato entregue pelo humano** — `docs/plans/cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg` (1080×1440, "modelo-time-de-voce-com-estadual.jpeg"): `TIME DE FULANO` com a **silhueta do visitante no centro** sobre a arte do estadual de exemplo (JULIO: FOTOS + faixa). Usar esse arquivo como está (tile da galeria e placeholder do modelo no composer); não recriar nem substituir por outra arte. A arte de exemplo é uma só para o modelo (JULIO como estadual ilustrativo) e não muda a regra do card final (arte do estadual escolhido); na implementação, as artes de exemplo por estadual seguem essa mesma receita (FOTOS + silhueta + BASE).
|
||||
- Catálogo exatamente as 53 pastas de `/home/fsolla/Downloads/DOBRADINHAS SITE-20260923T033020Z-1-001/DOBRADINHAS SITE/`: ADRIANA, ANDRE, ANDREA, ANGELO, ARTHUR, BOBO, CAROL, CICERO, DENISE, ELANE, EUCLIDES, FABIOLA, FATIMA, FELIPE, GEANE, HILTON, IVANA, JACO, JAMILLE, JOSAFA, JULIETE, JULIO, JUNIOR, KLEBER, LENINHA, LEO, LUDMILLA, MAGNO, MARCOS, MARLENE, MESTRE, NEUSA, NILTINHO, OSNI, PABLO, PATRICK, PINHEIRO, RADIOVALDO, ROBERTO, ROBINSON, ROGERIO, ROSEMBERG, ROSIVAL, ROWENNA, SILVA, SILVIO, THIAGO, VILMA, VITOR, WELLIGTON, WENCESLAU, YULO, ZE RAIMUNDO.
|
||||
- Nome completo + número de urna vêm dos lockups da arte: a base da campanha não tem campo de número de candidato nem números de 2026 (`src/collections/StateDeputy.ts` só tem `ballotName`/`party`).
|
||||
- O catálogo é commitado como tabela derivada e imutável (precedente: `src/lib/municipalityCatalog.ts` + snapshot test), com, por estadual: slug, nome de exibição/legenda, número de 5 dígitos e os dois caminhos de asset commitados.
|
||||
- Assets commitados em `public/cards/` como derivativos otimizados; origem acima; os PNGs originais (~90 MB) não entram no repo.
|
||||
- A máquina de banners existente é reusada: `TEAM_CARD_LABEL` ("TIME DE") + banner azul dinâmico via `fitCardName` (comportamento de nome longo do S16 intocado); o modelo não tem controles de recorte/harmonia.
|
||||
- 100% no aparelho; nada do visitante sai do celular; sem conta, sem PII.
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
- **Áreas prováveis:** catálogo `src/lib/cardModels.ts` (variante de time), tabela estática dos 53 num módulo de `src/lib/` (padrão do `municipalityCatalog`), render `src/lib/cardRender.ts`, seletor no `src/components/cards/CardComposer.tsx`, derivativos em `public/cards/`.
|
||||
- **Precedente a olhar:** S15/S16 (`docs/plans/cards-time-de-voce.md`, `cards-time-de-voce-nomes-longos.md`); `src/lib/municipalityCatalog.ts` + `tests/fixtures/municipality-catalog.snapshot.json` para a tabela imutável.
|
||||
- **Risco de acoplamento:** o composer ramifica por `kind` e a esteira de recorte é a do time; o novo modelo reusa essa esteira sem alterá-la e não pode tocar nos quatro existentes; o e2e falha em qualquer console error.
|
||||
|
||||
## Dependências
|
||||
|
||||
- S15 (#1161), S16 (#1195) e S17 (#1196) entregues — o fluxo de foto/recorte, a máquina do banner e a harmonização que este modelo reusa inteiros.
|
||||
- Assets dos 53 estaduais entregues pela campanha no caminho de origem (acima); derivar e otimizar é parte desta entrega.
|
||||
- S31 (`docs/plans/cards-colinha.md`) reusa o mesmo catálogo/artes — soft; S32 (analytics) soma model ids — soft.
|
||||
|
||||
## Fora de escopo
|
||||
|
||||
- CMS/collection/migration para o roster dos estaduais — catálogo estático, commitado no código.
|
||||
- Segundo editor: mesmo estúdio/composer, mesmas rotas (`#cards`, `/cards`, `?model=`).
|
||||
- Página ou rota por estadual; ranking/"força"; qualquer métrica ou analytics (isso é S32).
|
||||
- Segundo cadastro de pessoas; ler `stateDeputy`/`Contact` para montar o card.
|
||||
- Controle novo de foto/recorte além do que o "Time de você" já entrega.
|
||||
- Mexer nos quatro modelos existentes; regenerar ou redesenhar arte.
|
||||
- Compartilhamento direto em redes sociais.
|
||||
|
||||
## Rabbit holes de produto
|
||||
|
||||
- **O roster virar CMS com número de 2026.** Se alguém "só completar": collection nova, migration e cadastro de 53 pessoas, com os números divergindo da arte. **Corte neste item:** tabela estática derivada dos lockups, com snapshot test; a base não tem número e não ganha um aqui.
|
||||
- **A lista virar ranking/"força".** Se alguém "só completar": ordenação por votos, placar por estadual, destaque de "prioridade". **Corte neste item:** lista simples em ordem estável, sem métrica.
|
||||
- **O card virar o card do estadual.** Se alguém "só completar": o banner azul passa a estampar o nome do estadual e o visitante perde o que digitar. **Corte neste item:** banner do visitante (`TIME DE <nome>`); nome/número do estadual só na banda.
|
||||
- **Reposicionar a arte por estadual.** Se alguém "só completar": medir cada uma das 53 artes e mover a janela por estadual. **Corte neste item:** a janela é a do S15 (286/439/592/577) para todas; as artes já foram feitas nessa régua.
|
||||
|
||||
## Questões em aberto (produto)
|
||||
|
||||
- **O banner `TIME DE <nome>` mostra o nome de quem?** **Opções:** A) o nome digitado pelo visitante (a referência mostra `FULANO`, o visitante) | B) o nome de urna do estadual (zero digitação; o card vira o card do time do estadual). **Recomendação:** A — a referência aprovada é a silhueta do visitante com `TIME DE FULANO`; o nome do estadual já vive na banda. _(assumido — validar com produto)_
|
||||
- **`time-do-estadual` / "Time do estadual" está bom?** **Opções:** confirmar o id e o label. **Recomendação:** manter os dois como literais. _(assumido — validar com produto)_
|
||||
|
||||
## Referências
|
||||
|
||||
- `src/lib/cardModels.ts`, `src/lib/cardRender.ts`, `src/components/cards/CardComposer.tsx`, `tests/e2e/frontend.e2e.spec.ts`
|
||||
- `src/lib/municipalityCatalog.ts` — precedente de catálogo derivado e imutável (com snapshot test)
|
||||
- `docs/plans/cards-time-de-voce.md`, `docs/plans/cards-time-de-voce-nomes-longos.md` — o fluxo e a máquina do banner
|
||||
- `public/cards/team-card-front.png` — desenho da banda/overlay frontal
|
||||
- `src/collections/StateDeputy.ts` — o que a base (não) tem de número de urna
|
||||
- Design UI (gate): `docs/plans/cards-estadual-dobradinha-ui-design.html` (+ assets em `cards-estadual-dobradinha-ui-design-assets/`)
|
||||
- Origem da arte: `/home/fsolla/Downloads/DOBRADINHAS SITE-20260923T033020Z-1-001/DOBRADINHAS SITE/`
|
||||
|
||||
## Self-score (shaping)
|
||||
|
||||
5/5 — um outcome verificável, appetite declarado e nenhuma decisão dura de engenharia.
|
||||
|
||||
- Fatia = um outcome verificável: quinto modelo no estúdio existente, sem tocar nos quatro atuais.
|
||||
- Appetite ~1–1,5 dia cabe: catálogo derivado + assets otimizados + seletor no composer, sem fluxo novo.
|
||||
- Persona + job + aceite claros, em linguagem de produto, sem jargão de stack.
|
||||
- Direção no codebase é hipótese: arquivos citados como pista, nenhum nome novo cravado.
|
||||
- Zero schema/migration/signature no plano; literais são só de produto, arte e copy.
|
||||