docs(S40): plano + design hi-fi — time do estadual com a arte de modelo genérica e sem silhueta desenhada

This commit is contained in:
Francisco Solla 2026-09-24 14:37:11 -03:00
parent 38e6742673
commit 8ed218695a
3 changed files with 842 additions and 0 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 283 KiB

After

Width:  |  Height:  |  Size: 245 KiB

View file

@ -0,0 +1,748 @@
<!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 — S40 · Arte genérica do Time do estadual</title>
<style type="text/tailwindcss">
:root {
--background: #fff;
--foreground: #000;
--pt-red: #a21c1c;
--campaign-cream: #fff8f2;
--campaign-ink: #000;
--campaign-muted: #6c615e;
--campaign-surface: #f9faff;
--campaign-band: #ebe9e9;
--campaign-line: rgb(0 0 0 / 12%);
--field-border: 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;
}
.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;
}
.team-card {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #fff;
container-type: inline-size;
}
.team-card > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.time-banner {
position: absolute;
z-index: 3;
top: 11.25%;
left: 50.46%;
display: flex;
width: 64.17%;
height: 8.2%;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%) rotate(-3.5deg);
overflow: hidden;
background: var(--team-red);
color: var(--team-yellow);
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 12cqw;
font-weight: 900;
line-height: 1;
white-space: nowrap;
}
.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 · S40</p>
<h1 class="mt-2 text-3xl font-black tracking-tight">Time do estadual, agora genérico</h1>
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
Uma única troca visual: a galeria e a pré-escolha passam a mostrar a arte entregue com
“SEU ESTADUAL” e duas silhuetas. Depois da escolha, a arte do estadual aparece sem
silhueta: a janela do visitante fica vazia até a foto.
</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"
>arte exata · 1080 × 1440</span
>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
>fluxo e copy preservados</span
>
</div>
</header>
<!-- CENA 1A: GALERIA DESKTOP -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
Cena 1A · Galeria · desktop 1280
</h2>
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
Os seis modelos permanecem na mesma fileira. “Time de você” cria o contraste imediato; só
“Minha colinha” carrega o badge NOVO.
</p>
<div
class="mt-4 max-w-[1280px] overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-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-[28px] font-black tracking-[-.02em]">
Mostre que você está com Solla
</h3>
<p class="mt-1 text-sm leading-6 text-[var(--campaign-muted)]">
Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com sua
gente e fortaleça nossa caminhada.
</p>
</div>
<div class="mt-8 grid grid-cols-6 gap-4">
<button class="group flex min-w-0 flex-col text-left">
<span
class="relative block aspect-[3/4] overflow-hidden rounded-xl border border-[var(--campaign-line)] bg-[var(--campaign-band)]"
>
<img
src="../../public/cards/name-card-base.jpg"
alt=""
class="size-full object-cover"
/>
</span>
<span class="mt-auto block pt-3 text-center text-sm font-bold"
>Card com seu nome</span
>
</button>
<button class="group flex min-w-0 flex-col text-left">
<span
class="checker relative block aspect-square overflow-hidden rounded-xl border border-[var(--campaign-line)]"
>
<img
src="../../public/cards/photo-square-frame.png"
alt=""
class="size-full object-cover"
/>
</span>
<span class="mt-auto block pt-3 text-center text-sm font-bold">Moldura quadrada</span>
</button>
<button class="group flex min-w-0 flex-col text-left">
<span
class="checker relative block aspect-[25/36] overflow-hidden rounded-xl border border-[var(--campaign-line)]"
>
<img
src="../../public/cards/photo-portrait-frame.png"
alt=""
class="size-full object-cover"
/>
</span>
<span class="mt-auto block pt-3 text-center text-sm font-bold">Moldura vertical</span>
</button>
<button class="group flex min-w-0 flex-col text-left">
<span
class="relative block aspect-[3/4] overflow-hidden rounded-xl border border-[var(--campaign-line)] bg-[var(--campaign-band)]"
>
<img
src="../../public/cards/team-card-example.jpg"
alt=""
class="size-full object-cover"
/>
</span>
<span class="mt-auto block pt-3 text-center text-sm font-bold">Time de você</span>
</button>
<button class="group flex min-w-0 flex-col text-left" aria-label="Time do estadual">
<span
class="relative block aspect-[3/4] overflow-hidden rounded-xl border border-[var(--campaign-line)] bg-[var(--campaign-band)]"
>
<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-auto block pt-3 text-center text-sm font-bold">Time do estadual</span>
</button>
<button class="group flex min-w-0 flex-col text-left">
<span
class="relative mx-auto block aspect-[9/16] w-full overflow-hidden rounded-xl border-2 border-[var(--pt-red)] bg-white shadow-lg"
>
<img
src="../../public/cards/modelo-colinha.jpeg"
alt=""
class="size-full object-cover"
/>
<span
class="absolute top-3 right-3 rounded-full bg-white/95 px-2.5 py-1 text-[10px] font-black text-[var(--team-blue)] shadow"
>NOVO</span
>
</span>
<span class="mt-auto block pt-3 text-center text-sm font-bold text-[var(--pt-red)]"
>Minha colinha</span
>
</button>
</div>
</div>
</section>
<!-- CENA 1B: GALERIA MOBILE -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
Cena 1B · Galeria · mobile 390
</h2>
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
O trilho estático registra o momento em que “Time do estadual” entra no centro: “Time de
você” fica à esquerda e a colinha aparece como pista à direita.
</p>
<div
class="mt-4 w-[390px] max-w-full overflow-hidden rounded-[22px] border border-zinc-700 bg-[var(--campaign-cream)] py-8 text-black shadow-2xl"
>
<div class="px-5 text-center">
<p class="text-[10px] font-black tracking-[.1em] text-[var(--pt-red)] uppercase">
Faça parte
</p>
<h3 class="mt-1 text-[22px] font-black tracking-[-.02em]">
Mostre que você está com Solla
</h3>
<p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">
Escolha um modelo, personalize e baixe seu card para compartilhar.
</p>
</div>
<div class="mt-8 flex w-max translate-x-[-250px] gap-4 px-5">
<button class="flex w-[273px] shrink-0 flex-col opacity-70">
<span
class="block aspect-[3/4] w-full overflow-hidden rounded-xl border border-[var(--campaign-line)]"
>
<img
src="../../public/cards/team-card-example.jpg"
alt=""
class="size-full object-cover"
/>
</span>
<span class="mt-3 block text-center text-sm font-bold">Time de você</span>
</button>
<button class="flex w-[273px] shrink-0 flex-col">
<span
class="block aspect-[3/4] w-full overflow-hidden rounded-xl border border-[var(--campaign-line)]"
>
<img
src="cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg"
alt="Arte genérica Time de Fulano com duas silhuetas e a marcação Seu Estadual"
class="size-full object-cover"
/>
</span>
<span class="mt-3 block text-center text-sm font-bold">Time do estadual</span>
</button>
<button class="flex w-[273px] shrink-0 flex-col opacity-80">
<span
class="relative block aspect-[9/16] w-full overflow-hidden rounded-xl border-2 border-[var(--pt-red)] shadow-lg"
>
<img
src="../../public/cards/modelo-colinha.jpeg"
alt=""
class="size-full object-cover"
/>
<span
class="absolute top-3 right-3 rounded-full bg-white/95 px-2.5 py-1 text-[10px] font-black text-[var(--team-blue)] shadow"
>NOVO</span
>
</span>
<span class="mt-3 block text-center text-sm font-bold text-[var(--pt-red)]"
>Minha colinha</span
>
</button>
</div>
<p class="mt-1 text-center text-xs font-semibold text-[var(--campaign-muted)]">
Deslize para ver os seis modelos
</p>
<div class="mt-1 flex items-center justify-center" aria-label="Modelo 5 de 6">
<span class="inline-flex size-6 items-center justify-center"
><i class="size-1.5 rounded-full bg-[var(--campaign-muted)]"></i
></span>
<span class="inline-flex size-6 items-center justify-center"
><i class="size-1.5 rounded-full bg-[var(--campaign-muted)]"></i
></span>
<span class="inline-flex size-6 items-center justify-center"
><i class="size-1.5 rounded-full bg-[var(--campaign-muted)]"></i
></span>
<span class="inline-flex size-6 items-center justify-center"
><i class="size-1.5 rounded-full bg-[var(--campaign-muted)]"></i
></span>
<span class="inline-flex size-6 items-center justify-center"
><i class="h-1.5 w-6 rounded-full bg-[var(--pt-red)]"></i
></span>
<span class="inline-flex size-6 items-center justify-center"
><i class="size-1.5 rounded-full bg-[var(--campaign-muted)]"></i
></span>
</div>
</div>
</section>
<!-- CENA 2A: PRÉ-ESCOLHA DESKTOP -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
Cena 2A · Pré-escolha no composer · desktop 1280
</h2>
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
A arte nova é o placeholder inteiro. O seletor continua aberto por padrão e o rodapé
mantém o CTA desabilitado.
</p>
<div
class="relative mt-4 flex h-[1050px] max-w-[1280px] items-center justify-center overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-cream)] p-8 text-black shadow-2xl"
>
<div class="absolute inset-0 bg-black/45"></div>
<article
class="relative z-10 flex max-h-[92%] w-[512px] flex-col overflow-hidden rounded-xl bg-white shadow-2xl"
role="dialog"
aria-label="Time do estadual"
>
<header class="flex items-start gap-3 px-5 pt-5">
<div class="min-w-0 flex-1 text-left">
<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 tracking-[-.01em]">Escolha sua dobradinha</h3>
<p class="mt-1 text-sm text-[var(--campaign-muted)]">
Escolha seu estadual da dobradinha.
</p>
</div>
<button
class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-2xl text-[var(--campaign-muted)]"
aria-label="Fechar"
>
×
</button>
</header>
<div class="scrollbar min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-5">
<div
class="mx-auto w-full max-w-[10.75rem] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"
>
<img
src="cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg"
alt="Arte genérica com duas silhuetas e Seu Estadual"
class="block aspect-[3/4] w-full object-cover"
/>
</div>
<p class="mt-3 text-center text-[11px] leading-4 text-[var(--campaign-muted)]">
A silhueta marca o lugar da sua foto. O card final usa a arte do estadual escolhido.
</p>
<p class="mt-4 block text-sm font-bold">Seu estadual</p>
<button
class="mt-2 flex min-h-11 w-full items-center rounded-lg border border-[var(--field-border)] bg-white px-3 text-left text-sm text-[var(--campaign-muted)]"
>
<span>Escolha um nome</span><span class="ml-auto">⌄</span>
</button>
<div
class="mt-2 overflow-hidden rounded-xl border border-[var(--campaign-line)] bg-white shadow-xl"
>
<div class="border-b border-[var(--campaign-line)] p-3">
<div
class="flex min-h-11 items-center gap-2 rounded-lg border border-[var(--field-border)] px-3"
>
<span class="text-[var(--campaign-muted)]">⌕</span
><input
class="min-w-0 flex-1 bg-transparent text-sm outline-none"
placeholder="Buscar por nome"
/>
</div>
<p class="mt-2 text-[11px] text-[var(--campaign-muted)]">
53 estaduais · use ↑ ↓ e Enter para escolher
</p>
</div>
<div class="scrollbar max-h-40 overflow-y-auto p-1.5 text-sm" role="listbox">
<button
class="flex min-h-11 w-full items-center rounded-md bg-stone-100 px-3 text-left"
>
Julio Pinheiro
</button>
<div class="flex min-h-11 items-center px-3">
<span class="h-3 w-28 rounded bg-stone-200"></span>
</div>
<div class="flex min-h-11 items-center px-3">
<span class="h-3 w-36 rounded bg-stone-200"></span>
</div>
<div class="flex min-h-11 items-center px-3">
<span class="h-3 w-24 rounded bg-stone-200"></span>
</div>
</div>
</div>
<label class="mt-5 block text-sm font-bold">Seu nome</label>
<input
class="mt-2 h-11 w-full rounded-lg border border-[var(--field-border)] bg-white px-3 text-base"
placeholder="Como você é chamado"
/>
<p class="mt-2 text-xs leading-5 text-[var(--campaign-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(--campaign-cream)] p-3 text-xs leading-5 text-[var(--campaign-muted)]"
>
<b class="block text-[var(--campaign-ink)]">Escolha um estadual para continuar.</b>
A prévia e o download usam a arte oficial da dobradinha escolhida.
</p>
</div>
<footer class="flex shrink-0 gap-3 border-t border-[var(--campaign-line)] px-5 py-4">
<button
class="inline-flex min-h-11 flex-1 items-center justify-center rounded-lg border-2 border-[var(--campaign-line)] bg-white px-5 text-sm font-extrabold text-[var(--pt-red)]"
>
Cancelar
</button>
<button
disabled
class="inline-flex min-h-11 flex-1 cursor-not-allowed items-center justify-center rounded-lg bg-[var(--pt-red)] px-5 text-sm font-extrabold text-white opacity-50"
>
Criar meu card
</button>
</footer>
</article>
</div>
</section>
<!-- CENA 2B: PRÉ-ESCOLHA MOBILE -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
Cena 2B · Pré-escolha no composer · mobile 390
</h2>
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
Drawer em tela cheia, corpo rolável e CTA fixo. A cena deixa visíveis a arte, o notice e o
bloqueio de continuidade.
</p>
<div
class="relative mt-4 h-[900px] w-[390px] max-w-full overflow-hidden rounded-[22px] border border-zinc-700 bg-[var(--campaign-cream)] text-black shadow-2xl"
>
<div class="absolute inset-0 bg-black/50"></div>
<article class="absolute inset-0 flex flex-col bg-white">
<div class="mx-auto mt-2 h-1.5 w-10 rounded-full bg-stone-300"></div>
<header class="flex items-start gap-3 px-5 pt-4">
<div class="min-w-0 flex-1 text-left">
<p class="text-[10px] font-black tracking-[.1em] text-[var(--pt-red)] uppercase">
Time do estadual
</p>
<h3 class="mt-1 text-lg font-black tracking-[-.01em]">Escolha sua dobradinha</h3>
<p class="mt-1 text-sm text-[var(--campaign-muted)]">
Escolha seu estadual da dobradinha.
</p>
</div>
<button
class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-2xl text-[var(--campaign-muted)]"
aria-label="Fechar"
>
×
</button>
</header>
<div class="scrollbar min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-5">
<div
class="mx-auto w-full max-w-[10.75rem] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"
>
<img
src="cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg"
alt="Arte genérica com duas silhuetas e Seu Estadual"
class="block aspect-[3/4] w-full object-cover"
/>
</div>
<p class="mt-3 text-center text-[11px] leading-4 text-[var(--campaign-muted)]">
A silhueta marca o lugar da sua foto. O card final usa a arte do estadual escolhido.
</p>
<p class="mt-4 text-sm font-bold">Seu estadual</p>
<button
class="mt-2 flex min-h-11 w-full items-center rounded-lg border border-[var(--field-border)] px-3 text-left text-sm text-[var(--campaign-muted)]"
>
<span>Escolha um nome</span><span class="ml-auto">⌄</span>
</button>
<div
class="mt-2 overflow-hidden rounded-xl border border-[var(--campaign-line)] bg-white shadow-xl"
>
<div class="border-b border-[var(--campaign-line)] p-3">
<div
class="flex min-h-11 items-center gap-2 rounded-lg border border-[var(--field-border)] px-3"
>
<span class="text-[var(--campaign-muted)]">⌕</span
><input
class="min-w-0 flex-1 text-sm outline-none"
placeholder="Buscar por nome"
/>
</div>
<p class="mt-2 text-[11px] text-[var(--campaign-muted)]">
53 estaduais · use ↑ ↓ e Enter para escolher
</p>
</div>
<div class="max-h-14 overflow-hidden p-1.5 text-sm">
<div class="flex min-h-11 items-center rounded-md bg-stone-100 px-3">
Julio Pinheiro
</div>
</div>
</div>
<label class="mt-5 block text-sm font-bold">Seu nome</label>
<input
class="mt-2 h-11 w-full rounded-lg border border-[var(--field-border)] px-3"
placeholder="Como você é chamado"
/>
<p
class="mt-4 rounded-lg bg-[var(--campaign-cream)] p-3 text-xs leading-5 text-[var(--campaign-muted)]"
>
<b class="block text-black">Escolha um estadual para continuar.</b>A prévia e o
download usam a arte oficial da dobradinha escolhida.
</p>
</div>
<footer class="flex shrink-0 gap-3 border-t border-[var(--campaign-line)] px-5 py-4">
<button
class="min-h-11 flex-1 rounded-lg border-2 border-[var(--campaign-line)] bg-white text-sm font-extrabold text-[var(--pt-red)]"
>
Cancelar
</button>
<button
disabled
class="min-h-11 flex-1 cursor-not-allowed rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white opacity-50"
>
Criar meu card
</button>
</footer>
</article>
</div>
</section>
<!-- CENA 3A: PÓS-ESCOLHA DESKTOP -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
Cena 3A · Continuidade pós-escolha, sem foto · desktop 1280
</h2>
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
Decisão do gate: JULIO preenche o lugar do estadual e a janela do visitante fica vazia,
sem silhueta, até a foto ser adicionada.
</p>
<div
class="relative mt-4 flex min-h-[760px] max-w-[1280px] items-center justify-center overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-cream)] p-8 text-black shadow-2xl"
>
<div class="absolute inset-0 bg-black/45"></div>
<article
class="relative z-10 flex max-h-[92%] w-[512px] flex-col overflow-hidden rounded-xl bg-white shadow-2xl"
role="dialog"
>
<header class="flex items-start gap-3 px-5 pt-5">
<div class="min-w-0 flex-1">
<p class="text-xs font-black tracking-[.1em] text-[var(--pt-red)] uppercase">
Estadual escolhido
</p>
<h3 class="mt-1 text-xl font-black">Agora coloque seu nome</h3>
</div>
<button
class="inline-flex size-11 items-center justify-center text-2xl text-[var(--campaign-muted)]"
>
×
</button>
</header>
<div class="min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-5">
<div
class="mx-auto w-full max-w-[14.375rem] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"
>
<div class="team-card">
<img src="../../public/cards/estaduais/julio-fotos.webp" alt="" />
<img class="z-[2]" src="../../public/cards/estaduais/julio-base.webp" alt="" />
<span class="time-banner">TIME DE</span>
</div>
</div>
<p class="mt-4 text-sm font-bold">Seu estadual</p>
<button
class="mt-2 flex min-h-11 w-full items-center rounded-lg border border-[var(--field-border)] px-3 text-left text-sm font-bold"
>
<span>Julio Pinheiro</span
><span class="ml-auto text-xs font-normal text-[var(--campaign-muted)]"
>13999 · Trocar⌄</span
>
</button>
<label class="mt-5 block text-sm font-bold">Seu nome</label>
<input
class="mt-2 h-11 w-full rounded-lg border border-[var(--field-border)] px-3"
placeholder="Como você é chamado"
/>
<p class="mt-2 text-xs leading-5 text-[var(--campaign-muted)]">
Vai aparecer em caixa alta depois de “TIME DE”. Use um nome curto e conhecido.
</p>
<div
class="mt-5 rounded-lg border border-[var(--campaign-line)] bg-[var(--campaign-surface)] p-4"
>
<p class="text-sm font-bold">Sua foto de busto</p>
<p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">
Para um recorte melhor, escolha uma foto nítida, de frente e com fundo simples.
</p>
<button
class="mt-3 min-h-11 w-full rounded-lg border-2 border-[var(--campaign-line)] bg-white px-5 text-sm font-extrabold text-[var(--pt-red)]"
>
Escolher foto
</button>
</div>
</div>
<footer class="flex shrink-0 gap-3 border-t border-[var(--campaign-line)] px-5 py-4">
<button
class="min-h-11 flex-1 rounded-lg border-2 border-[var(--campaign-line)] text-sm font-extrabold text-[var(--pt-red)]"
>
Cancelar</button
><button
disabled
class="min-h-11 flex-1 rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white opacity-50"
>
Criar meu card
</button>
</footer>
</article>
</div>
</section>
<!-- CENA 3B: PÓS-ESCOLHA MOBILE -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[.12em] text-zinc-500 uppercase">
Cena 3B · Continuidade pós-escolha, sem foto · mobile 390
</h2>
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
A mesma transição no drawer: as duas silhuetas da arte genérica viram JULIO com a janela
vazia para a pessoa, sem silhueta, até a foto ser adicionada.
</p>
<div
class="relative mt-4 h-[844px] w-[390px] max-w-full overflow-hidden rounded-[22px] border border-zinc-700 bg-[var(--campaign-cream)] text-black shadow-2xl"
>
<div class="absolute inset-0 bg-black/50"></div>
<article class="absolute inset-0 flex flex-col bg-white">
<div class="mx-auto mt-2 h-1.5 w-10 rounded-full bg-stone-300"></div>
<header class="flex items-start gap-3 px-5 pt-4">
<div class="min-w-0 flex-1">
<p class="text-[10px] font-black tracking-[.1em] text-[var(--pt-red)] uppercase">
Estadual escolhido
</p>
<h3 class="mt-1 text-lg font-black">Agora coloque seu nome</h3>
</div>
<button
class="inline-flex size-11 items-center justify-center text-2xl text-[var(--campaign-muted)]"
>
×
</button>
</header>
<div class="scrollbar min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-5">
<div
class="mx-auto w-full max-w-[12.8125rem] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"
>
<div class="team-card">
<img src="../../public/cards/estaduais/julio-fotos.webp" alt="" /><img
class="z-[2]"
src="../../public/cards/estaduais/julio-base.webp"
alt=""
/><span class="time-banner">TIME DE</span>
</div>
</div>
<p class="mt-4 text-sm font-bold">Seu estadual</p>
<button
class="mt-2 flex min-h-11 w-full items-center rounded-lg border border-[var(--field-border)] px-3 text-left text-sm font-bold"
>
<span>Julio Pinheiro</span
><span class="ml-auto text-xs font-normal text-[var(--campaign-muted)]"
>13999 · Trocar⌄</span
>
</button>
<label class="mt-5 block text-sm font-bold">Seu nome</label>
<input
class="mt-2 h-11 w-full rounded-lg border border-[var(--field-border)] px-3"
placeholder="Como você é chamado"
/>
<p class="mt-2 text-xs leading-5 text-[var(--campaign-muted)]">
Vai aparecer em caixa alta depois de “TIME DE”. Use um nome curto e conhecido.
</p>
<div
class="mt-5 rounded-lg border border-[var(--campaign-line)] bg-[var(--campaign-surface)] p-4"
>
<p class="text-sm font-bold">Sua foto de busto</p>
<p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">
Para um recorte melhor, escolha uma foto nítida, de frente e com fundo simples.
</p>
<button
class="mt-3 min-h-11 w-full rounded-lg border-2 border-[var(--campaign-line)] bg-white text-sm font-extrabold text-[var(--pt-red)]"
>
Escolher foto
</button>
</div>
</div>
<footer class="flex shrink-0 gap-3 border-t border-[var(--campaign-line)] px-5 py-4">
<button
class="min-h-11 flex-1 rounded-lg border-2 border-[var(--campaign-line)] text-sm font-extrabold text-[var(--pt-red)]"
>
Cancelar</button
><button
disabled
class="min-h-11 flex-1 rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white opacity-50"
>
Criar 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-zinc-300">Arte exata:</strong> tile e placeholder usam
<code
>cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg</code
>
sem recorte, recomposição ou recoloração.
</p>
<p class="mt-2">
<strong class="text-zinc-300">Continuidade:</strong> o estado pós-escolha compõe os
arquivos reais de JULIO e mantém a janela do visitante vazia até a foto, conforme decisão
do gate. Fluxo, seletor, notice e CTAs permanecem como estão.
</p>
<p class="mt-2">
<strong class="text-emerald-400">NEEDS ASSET: nenhum.</strong> Todos os ativos necessários
estão presentes no repositório.
</p>
</aside>
</main>
</body>
</html>

View file

@ -0,0 +1,94 @@
# S40 — Time do estadual: a arte de modelo genérica entregue pelo humano (sem estadual específico)
Status: rascunho
Atualizado em: 2026-09-24
Issue: #1316
Priority: P2
Impeccable: C — troca da arte de modelo e remoção de um desenho num funil público existente (sem superfície nova)
Design UI: docs/plans/cards-estadual-modelo-generico-ui-design.html
Appetite: ~0,5 dia eng; a arte aprovada vira tile/placeholder, a silhueta desenhada sai e os pins acompanham
Responsável: —
## Intenção
O tile e o placeholder de pré-escolha do modelo `Time do estadual` mostram hoje a arte de exemplo do S30: o JULIO PINHEIRO 13999 específico como ilustração. Quem chega na galeria pelo celular pode ler aquilo como "o card do Julio" em vez de "o modelo com o _seu_ estadual" — a arte ilustra um estadual real no lugar onde deveria ilustrar o conceito. A campanha entregou (2026-09-24) uma arte genérica: `SEU ESTADUAL` no lugar do lockup e **duas silhuetas** — o lugar da foto do visitante e o lugar do estadual ainda vazio. Essa arte passa a ser o tile e o placeholder de pré-escolha.
No gate (2026-09-24), o humano decidiu também que a pós-escolha sem foto **não desenha mais a silhueta do visitante**: «Acho melhor sem silhueta. Essa silhueta desenhada nao ficou bom. Deixa vazio ate adicionar a foto do usuario.» A janela fica vazia (a arte do estadual escolhido aparece como é) até a foto entrar — como o `Time de você` já faz. A pré-escolha segue com a arte entregue, que já traz as duas silhuetas.
O que NÃO muda: fluxo, copy, seletor, catálogo das 53, artes das 53 e o analytics S32. É troca de um arquivo público no mesmo caminho e na mesma dimensão 1080×1440, mais a remoção de um desenho; nenhuma superfície, controle ou estado novo nasce.
## Persona e fluxo
- **Persona / contexto:** apoiador/militante no celular, navegando o estúdio de cards antes de decidir a dobradinha; não conhece a arte interna da campanha e lê o tile pelo que ele mostra.
- **Job principal:** reconhecer o modelo antes de escolher o estadual — "é o card com o meu estadual" — sem achar que o card é do Julio; depois de escolher, ver o card limpo até colocar a própria foto.
- **Fluxo desejado:** home (`#cards`) ou `/cards` → vê o tile `Time do estadual` com a arte genérica → abre o composer → antes de escolher, o placeholder é a mesma arte genérica com `A silhueta marca o lugar da sua foto.` e o CTA desabilitado → escolhe o estadual na lista dos 53 → sem foto, vê a arte do escolhido com a janela vazia (sem silhueta desenhada) → nome + foto → prévia e download, como sempre.
- **Anti-goals de produto:** renomear/redesenhar o modelo; segunda arte por estadual; editar a arte entregue (recorte, re-encode, apagar as silhuetas dela); tocar nas 106 artes; mexer em copy/estados/analytics.
### Esboço de fluxo (C)
```text
[home #cards / /cards] → tile `Time do estadual` (arte genérica "SEU ESTADUAL" + 2 silhuetas; badge NOVO da colinha ao lado)
→ composer: pré-escolha = a mesma arte + "A silhueta marca o lugar da sua foto." / "Escolha um estadual para continuar." (CTA desabilitado)
→ escolhe o estadual (53) → sem foto: arte do escolhido com a janela vazia (sem silhueta desenhada)
→ nome + foto → prévia final → baixa o PNG
```
### Design UI (C)
- Design UI (gate): `docs/plans/cards-estadual-modelo-generico-ui-design.html` (+ assets em `cards-estadual-modelo-generico-ui-design-assets/`)
- Cenas: (1) galeria com o tile `Time do estadual` no desktop 1280 e no mobile 390, o badge `NOVO` da colinha ao lado; (2) placeholder de pré-escolha no composer, antes de escolher, em 390/1280, com o notice e o CTA desabilitado; (3) continuidade pós-escolha sem foto — arte do estadual escolhido com a **janela vazia** (sem o desenho `#001a42`) até a foto do visitante.
## Objetivo e aceite
- O tile e o placeholder de pré-escolha passam a ser a nova arte, **byte-a-byte**, no MESMO caminho público, 1080×1440 jpeg sRGB — sem re-encode, sem edição, sem recorte.
- Pós-escolha sem foto: nenhuma silhueta desenhada; a janela mostra a arte do estadual escolhido (FOTOS + BASE) até a foto entrar. A pré-escolha segue com a arte entregue (as duas silhuetas dela são parte da arte, não desenho).
- Nenhum outro pixel, fluxo, copy ou estado muda: seletor, catálogo das 53, artes das 53, notice, CTA, download e evento S32 seguem intocados. O notice continua verdadeiro (é da pré-escolha).
- A nova arte lê como modelo genérico: `SEU ESTADUAL` no lugar do lockup e duas silhuetas, sem nome nem número de nenhum estadual real.
- A remoção da silhueta é limpeza do dono: o desenho e seus pins saem em vez de ficarem mortos (sem consumidor).
## Dados (intenção)
- **Vou apresentar dados?** Não — nenhum dado é apresentado; a troca é visual e não há analytics novo.
- **Decisões desbloqueadas:** N/A — a leitura de uso do modelo, quando houver, continua sendo S32.
- **Forma:** _adiada ao plano de implementação_ — N/A.
## Dados da decisão (literais)
- ID `S40`; slug `cards-estadual-modelo-generico`; tipo `feature`; Priority `P2`; Impeccable `C — troca da arte de modelo e remoção de um desenho num funil público existente (sem superfície nova)`; Design UI `docs/plans/cards-estadual-modelo-generico-ui-design.html`.
- Modelo `time-do-estadual`; caminho público inalterado `/cards/modelo-time-de-voce-com-estadual.jpeg`.
- **Decisão do gate (2026-09-24) — fonte canônica:** sobrescrever **in-place** o asset do S30 `docs/plans/cards-estadual-dobradinha-ui-design-assets/modelo-time-de-voce-com-estadual.jpeg` com a nova arte (1080×1440 jpeg sRGB, sha256 `1f5dc8212662697149f0acac5701e8de58c53a86f5af316535736dccb7a53c7b`; a arte antiga de sha `7fc8a50a…` fica no histórico do git). Sem pasta de assets nova; `scripts/build-state-deputy-card-assets.mjs` (`APPROVED_EXAMPLE_SRC`, linhas 38–41) e `tests/unit/stateDeputyCatalog.unit.spec.ts` (`APPROVED_EXAMPLE_SRC`, linhas 34–39 e 75–82) mantêm os mesmos paths — só os bytes mudam; recomenda-se pinar o sha literal novo no teste.
- **Decisão do gate (2026-09-24) — sem silhueta desenhada:** pós-escolha sem foto mostra a arte do estadual escolhido sem o desenho `#001a42`; a janela fica vazia até a foto do visitante. Remover `drawCardVisitorSilhouette` + `CARD_VISITOR_SILHOUETTE_FILL` + o subject `{kind:'silhouette'}` (`src/lib/cardRender.ts:236-278,334-336`); o ramo `CardComposer.tsx:408-423` passa a desenhar só a arte + nome; os pins acompanham — unit `tests/unit/cardRender.unit.spec.ts:22,320-327,342-348` (remover) e e2e `tests/e2e/frontend.e2e.spec.ts:2243-2268` (o pixel probe `[0,26,66,255]` vira a cor da arte na janela; com JULIO, sem silhueta, o ponto (582,540) do compositor dá `[239,223,196,255]` — confirmar na implementação).
- Copy intocada: o notice `A silhueta marca o lugar da sua foto. O card final usa a arte do estadual escolhido.` é da pré-escolha (arte com silhuetas) e segue verdadeiro (`CardComposer.tsx:877-883`).
- Arquivo entregue no MacBook: `/Users/fsolla/Downloads/WhatsApp Image 2026-09-24 at 12.57.00.jpeg` (os bytes já estão no repo, no asset do S30 acima).
## Direção no codebase (hipótese)
- **Áreas prováveis:** `src/lib/cardModels.ts` (`previewSrc` do modelo, linhas 110–126 — só leitura; o path não muda), `src/components/cards/CardModelTile.tsx` (tile, `previewSrc ?? assetSrc`, linha 58) e `src/components/cards/CardComposer.tsx` (placeholder `drawImage(previewImage, …)`, linhas 277–287 e 364–377; ramo da silhueta, linhas 408–423), `src/lib/cardRender.ts` (dono do desenho), `docs/plans/cards-estadual-dobradinha-ui-design-assets/` (asset sobrescrito), `scripts/build-state-deputy-card-assets.mjs`, `tests/unit/stateDeputyCatalog.unit.spec.ts`, `tests/unit/cardRender.unit.spec.ts`, `tests/e2e/frontend.e2e.spec.ts`.
- **Precedente a olhar:** S34 (`docs/plans/cards-colinha-arte-exata.md`) — arte exata entregue pelo humano, byte-a-byte; S30 (`docs/plans/cards-estadual-dobradinha.md`) — decisão original da arte de modelo e da silhueta.
- **Risco de acoplamento:** não tocar catálogo/artes dos 53; a fonte em `docs/` não vai para a imagem Docker (`.dockerignore:25`), só o `public/` serve em produção; o e2e do ramo pina o pixel da silhueta (`tests/e2e/frontend.e2e.spec.ts:2266-2268`) e precisa acompanhar a remoção, mas copy/CTA/download/evento seguem verdes.
## Dependências
- Nenhuma.
## Fora de escopo
- As 106 artes das dobradinhas (53× FOTOS/BASE); as silhuetas da arte entregue usada na pré-escolha; renomear/mover o caminho público; copy/estados do composer; analytics S32; os demais modelos do estúdio; arte de exemplo por estadual.
## Rabbit holes de produto
- **"Já que a janela fica vazia, apaga as silhuetas da arte entregue também."** Se alguém "só completar": editaria o arquivo aprovado e a pré-escolha mudaria junto. **Corte neste item:** a pré-escolha usa a arte entregue como está; a decisão vale só para o desenho do canvas pós-escolha.
- **"Gera arte de exemplo por estadual."** Se alguém "só completar": 53 artes novas, um estúdio de ilustração e pin por estadual — o oposto do pedido. **Corte neste item:** uma arte genérica só, a mesma para todos.
## Questões em aberto (produto)
- Nenhuma — as decisões do gate (2026-09-24) estão registradas nos literais: sobrepor o asset do S30 in-place, manter o caminho público, remover a silhueta desenhada e manter o render de pré-escolha.
## Referências
- GitHub Issue #1316
- Design UI (gate): `docs/plans/cards-estadual-modelo-generico-ui-design.html`
- `docs/plans/cards-estadual-dobradinha.md` e `docs/plans/cards-estadual-dobradinha-impl.md` — S30 (arte de modelo original, catálogo, placeholder, silhueta)
- `docs/plans/cards-colinha-arte-exata.md` — S34 (precedente: arte exata entregue pelo humano, byte-a-byte)
- `src/lib/cardModels.ts`, `src/components/cards/CardModelTile.tsx`, `src/components/cards/CardComposer.tsx`, `src/lib/cardRender.ts`, `scripts/build-state-deputy-card-assets.mjs`, `tests/unit/stateDeputyCatalog.unit.spec.ts`, `tests/unit/cardRender.unit.spec.ts`, `tests/e2e/frontend.e2e.spec.ts`
- `AGENTS.md` — convenção de assets byte-for-byte e de migrations/estrutura do repo