mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-14 17:43:04 +00:00
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:
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 |
748
docs/plans/cards-estadual-modelo-generico-ui-design.html
Normal file
748
docs/plans/cards-estadual-modelo-generico-ui-design.html
Normal 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>
|
||||
94
docs/plans/cards-estadual-modelo-generico.md
Normal file
94
docs/plans/cards-estadual-modelo-generico.md
Normal 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
|
||||
Loading…
Reference in a new issue