fsolla/teqo-backup
1
0
Fork 0
mirror of https://github.com/fsolla/teqo.git synced 2026-11-13 23:53:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style(S36,C220,S37,S38,S39): formata os designs hi-fi dos planos

Browse source
This commit is contained in:
Francisco Solla 2026-09-24 00:42:54 -03:00
parent d976aa8530
commit 62d1018979
8 changed files with 2102 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

680
docs/plans/central-conteudos-cards-no-catalogo-ui-design.html
View file

@ -6,88 +6,650 @@
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — S35 · Cards misturados ao catálogo</title>
<style type="text/tailwindcss">
@theme { --font-sans: Arimo, Arial, sans-serif; }
:root { --red:#a21c1c;--kit:#e4102f;--blue:#184e92;--yellow:#ffe607;--cream:#fff8f2;--muted:#6c615e;--line:rgb(0 0 0/.12);--display:'Exo 2','Arial Black',sans-serif; }
*{box-sizing:border-box}.display{font-family:var(--display)}
.board{background:#e7e3e0;background-image:radial-gradient(rgb(24 78 146/.09) .7px,transparent .7px);background-size:18px 18px}
.frame{box-shadow:0 22px 60px rgb(39 25 22/.13)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}.scene:after{content:'';height:1px;flex:1;background:#cfc9c5}
.field{min-height:44px;border:1px solid rgb(0 0 0/.18);border-radius:10px;background:#fff;padding:10px 13px;font-size:15px}
.chip{display:inline-flex;min-height:36px;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 11px;font-size:12px;font-weight:700}.active{border-color:rgb(24 78 146/.35);background:#eef4fb;color:#184e92}
.card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgb(71 19 14/.07)}
.tag{display:inline-flex;min-height:23px;align-items:center;border-radius:999px;background:#eef4fb;padding:4px 8px;color:#184e92;font-size:11px;font-weight:800}
.alias{display:inline-flex;border:1px solid rgb(0 0 0/.1);border-radius:999px;background:#fff;padding:3px 7px;color:#6c615e;font-size:10px;font-weight:700}
.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border-radius:10px;border:1.5px solid rgb(162 28 28/.28);background:#fff;padding:9px 13px;color:#a21c1c;font-size:13px;font-weight:800}
.art{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#184e92,#0876ac);color:#fff}.art:before{content:'1313';position:absolute;font-family:var(--display);font-size:66px;font-weight:900;color:rgb(255 255 255/.08);transform:rotate(-8deg)}.art-red{background:linear-gradient(145deg,#e4102f,#a21c1c)}.art-light{background:linear-gradient(145deg,#eee9e5,#fff)}
.piece-art{display:grid;place-items:center;background:linear-gradient(135deg,#e5e2df,#f7f5f3);color:#6c615e;text-align:center;font-size:10px;font-weight:800;letter-spacing:.04em}
@theme {
--font-sans: Arimo, Arial, sans-serif;
}
:root {
--red: #a21c1c;
--kit: #e4102f;
--blue: #184e92;
--yellow: #ffe607;
--cream: #fff8f2;
--muted: #6c615e;
--line: rgb(0 0 0/0.12);
--display: 'Exo 2', 'Arial Black', sans-serif;
}
* {
box-sizing: border-box;
}
.display {
font-family: var(--display);
}
.board {
background: #e7e3e0;
background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
background-size: 18px 18px;
}
.frame {
box-shadow: 0 22px 60px rgb(39 25 22/0.13);
}
.desktop {
width: 1280px;
}
.phone {
width: 390px;
border-radius: 28px;
}
.scene:after {
content: '';
height: 1px;
flex: 1;
background: #cfc9c5;
}
.field {
min-height: 44px;
border: 1px solid rgb(0 0 0/0.18);
border-radius: 10px;
background: #fff;
padding: 10px 13px;
font-size: 15px;
}
.chip {
display: inline-flex;
min-height: 36px;
align-items: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
padding: 6px 11px;
font-size: 12px;
font-weight: 700;
}
.active {
border-color: rgb(24 78 146/0.35);
background: #eef4fb;
color: #184e92;
}
.card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgb(71 19 14/0.07);
}
.tag {
display: inline-flex;
min-height: 23px;
align-items: center;
border-radius: 999px;
background: #eef4fb;
padding: 4px 8px;
color: #184e92;
font-size: 11px;
font-weight: 800;
}
.alias {
display: inline-flex;
border: 1px solid rgb(0 0 0/0.1);
border-radius: 999px;
background: #fff;
padding: 3px 7px;
color: #6c615e;
font-size: 10px;
font-weight: 700;
}
.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1.5px solid rgb(162 28 28/0.28);
background: #fff;
padding: 9px 13px;
color: #a21c1c;
font-size: 13px;
font-weight: 800;
}
.art {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
background: linear-gradient(145deg, #184e92, #0876ac);
color: #fff;
}
.art:before {
content: '1313';
position: absolute;
font-family: var(--display);
font-size: 66px;
font-weight: 900;
color: rgb(255 255 255/0.08);
transform: rotate(-8deg);
}
.art-red {
background: linear-gradient(145deg, #e4102f, #a21c1c);
}
.art-light {
background: linear-gradient(145deg, #eee9e5, #fff);
}
.piece-art {
display: grid;
place-items: center;
background: linear-gradient(135deg, #e5e2df, #f7f5f3);
color: #6c615e;
text-align: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
}
</style>
</head>
<body class="board min-h-screen text-black antialiased">
<main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
<header class="max-w-3xl">
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white">S35 · revisão do gate</span>
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
>S35 · revisão do gate</span
>
<h1 class="display mt-4 text-4xl font-black">Cards e peças vivem no mesmo board.</h1>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">Cada modelo é um item individual na ordem normal do catálogo. Não existe faixa, cabeçalho ou agrupamento próprio para cards.</p>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
Cada modelo é um item individual na ordem normal do catálogo. Não existe faixa, cabeçalho
ou agrupamento próprio para cards.
</p>
</header>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 01</span><h2>Board padrão · desktop 1280 · peças e modelos misturados</h2></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 01</span>
<h2>Board padrão · desktop 1280 · peças e modelos misturados</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<header class="flex h-16 items-center justify-between bg-[#ae1603] px-10"><div class="h-9 w-44 rounded bg-white/20"></div><b class="text-sm text-white">Central de Conteúdos</b></header>
<header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
<div class="h-9 w-44 rounded bg-white/20"></div>
<b class="text-sm text-white">Central de Conteúdos</b>
</header>
<div class="mx-auto max-w-6xl px-10 py-10">
<div class="rounded-xl bg-[#fff8f2] p-4"><div class="field text-[#6c615e]">Encontre uma peça por assunto, cidade ou tema…</div><div class="mt-3 flex gap-2"><span class="chip">Tipo⌄</span><span class="chip">Cidade⌄</span><span class="chip">Região⌄</span><span class="chip">Tema⌄</span><span class="chip">Instituição⌄</span></div></div>
<div class="mt-8"><h2 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h2><p class="mt-1 text-sm text-[#6c615e]">Uma lista só: peças oficiais e convites para criar seu card.</p></div>
<div class="mt-5 grid grid-cols-3 gap-6">
<article class="card"><div class="piece-art relative aspect-video"><span>NEEDS ASSET · POSTER REAL</span><span class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow">▶</span></div><div class="p-4"><span class="tag">Vídeo</span><h3 class="mt-2 font-extrabold">Título da peça publicada</h3><p class="mt-1 text-xs text-[#6c615e]">Tema · Cidade</p><div class="mt-4 grid grid-cols-2 gap-2"><span class="btn">Baixar</span><span class="btn">Compartilhar</span></div></div></article>
<article class="card"><div class="art aspect-video"><b class="relative display text-2xl">#SOU ____</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Card com seu nome</h3><p class="mt-1 text-xs leading-5 text-[#6c615e]">Coloque seu nome no card oficial.</p><div class="mt-2 flex gap-1"><span class="alias">nome</span></div><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<article class="card"><div class="piece-art aspect-video">NEEDS ASSET · FOTO REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Outra peça publicada</h3><p class="mt-1 text-xs text-[#6c615e]">Tema da peça</p><div class="mt-4 grid grid-cols-2 gap-2"><span class="btn">Baixar</span><span class="btn">Compartilhar</span></div></div></article>
<article class="card"><div class="art aspect-video"><div class="relative text-center"><b class="display block bg-[#e4102f] px-4 py-1 text-lg text-[#ffeb00]">TIME DE</b><b class="display mt-1 block bg-[#0061a5] px-4 py-1 text-2xl">VOCÊ</b></div><span class="absolute right-2 bottom-2 text-[9px] font-black">PLACEHOLDER · ARTE EXISTENTE</span></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Time de você</h3><p class="mt-1 text-xs text-[#6c615e]">Entre para o time com sua foto.</p><div class="mt-2 flex gap-1"><span class="alias">santinho</span></div><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<article class="card"><div class="piece-art relative aspect-video"><span>NEEDS ASSET · CAPA REAL</span><span class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow">▶</span></div><div class="p-4"><span class="tag">Áudio</span><h3 class="mt-2 font-extrabold">Mensagem para compartilhar</h3><p class="mt-1 text-xs text-[#6c615e]">Campanha</p><div class="mt-4 grid grid-cols-2 gap-2"><span class="btn">Baixar</span><span class="btn">Compartilhar</span></div></div></article>
<article class="card border-2 border-[#e4102f]"><div class="art art-red aspect-video"><span class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[#184e92]">NOVO</span><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b><span class="absolute right-2 bottom-2 text-[9px] font-black">PLACEHOLDER · ARTE EXISTENTE</span></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Minha colinha</h3><p class="mt-1 text-xs text-[#6c615e]">Monte sua cola de votação.</p><div class="mt-2 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<div class="rounded-xl bg-[#fff8f2] p-4">
<div class="field text-[#6c615e]">Encontre uma peça por assunto, cidade ou tema…</div>
<div class="mt-3 flex gap-2">
<span class="chip">Tipo⌄</span><span class="chip">Cidade⌄</span
><span class="chip">Região⌄</span><span class="chip">Tema⌄</span
><span class="chip">Instituição⌄</span>
</div>
</div>
<div class="mt-8">
<h2 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h2>
<p class="mt-1 text-sm text-[#6c615e]">
Uma lista só: peças oficiais e convites para criar seu card.
</p>
</div>
<div class="mt-5 grid grid-cols-3 gap-6">
<article class="card">
<div class="piece-art relative aspect-video">
<span>NEEDS ASSET · POSTER REAL</span
><span
class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow"
>▶</span
>
</div>
<div class="p-4">
<span class="tag">Vídeo</span>
<h3 class="mt-2 font-extrabold">Título da peça publicada</h3>
<p class="mt-1 text-xs text-[#6c615e]">Tema · Cidade</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<span class="btn">Baixar</span><span class="btn">Compartilhar</span>
</div>
</div>
</article>
<article class="card">
<div class="art aspect-video">
<b class="relative display text-2xl">#SOU ____</b>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Card com seu nome</h3>
<p class="mt-1 text-xs leading-5 text-[#6c615e]">
Coloque seu nome no card oficial.
</p>
<div class="mt-2 flex gap-1"><span class="alias">nome</span></div>
<a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
<article class="card">
<div class="piece-art aspect-video">NEEDS ASSET · FOTO REAL</div>
<div class="p-4">
<span class="tag">Foto</span>
<h3 class="mt-2 font-extrabold">Outra peça publicada</h3>
<p class="mt-1 text-xs text-[#6c615e]">Tema da peça</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<span class="btn">Baixar</span><span class="btn">Compartilhar</span>
</div>
</div>
</article>
<article class="card">
<div class="art aspect-video">
<div class="relative text-center">
<b class="display block bg-[#e4102f] px-4 py-1 text-lg text-[#ffeb00]"
>TIME DE</b
><b class="display mt-1 block bg-[#0061a5] px-4 py-1 text-2xl">VOCÊ</b>
</div>
<span class="absolute right-2 bottom-2 text-[9px] font-black"
>PLACEHOLDER · ARTE EXISTENTE</span
>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Time de você</h3>
<p class="mt-1 text-xs text-[#6c615e]">Entre para o time com sua foto.</p>
<div class="mt-2 flex gap-1"><span class="alias">santinho</span></div>
<a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
<article class="card">
<div class="piece-art relative aspect-video">
<span>NEEDS ASSET · CAPA REAL</span
><span
class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow"
>▶</span
>
</div>
<div class="p-4">
<span class="tag">Áudio</span>
<h3 class="mt-2 font-extrabold">Mensagem para compartilhar</h3>
<p class="mt-1 text-xs text-[#6c615e]">Campanha</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<span class="btn">Baixar</span><span class="btn">Compartilhar</span>
</div>
</div>
</article>
<article class="card border-2 border-[#e4102f]">
<div class="art art-red aspect-video">
<span
class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[#184e92]"
>NOVO</span
><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b
><span class="absolute right-2 bottom-2 text-[9px] font-black"
>PLACEHOLDER · ARTE EXISTENTE</span
>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Minha colinha</h3>
<p class="mt-1 text-xs text-[#6c615e]">Monte sua cola de votação.</p>
<div class="mt-2 flex gap-1">
<span class="alias">santinho</span><span class="alias">colinha</span>
</div>
<a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
</div>
<div
class="mt-7 rounded-xl border border-[#184e92]/20 bg-[#eef4fb] p-4 text-sm leading-6 text-[#184e92]"
>
<b>Regra do gate:</b> a ordem acima mistura itens por relevância/ordem do catálogo.
“Card” é apenas o tipo do item — nunca um cabeçalho ou uma seção dentro do board.
</div>
<div class="mt-7 rounded-xl border border-[#184e92]/20 bg-[#eef4fb] p-4 text-sm leading-6 text-[#184e92]"><b>Regra do gate:</b> a ordem acima mistura itens por relevância/ordem do catálogo. “Card” é apenas o tipo do item — nunca um cabeçalho ou uma seção dentro do board.</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 02</span><h2>Mobile 390 · board misto e Tipo “Card” ativo</h2></div>
<div class="flex flex-wrap justify-center gap-8"><div class="phone frame min-h-[960px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between bg-[#ae1603] px-4"><div class="h-7 w-32 rounded bg-white/20"></div><span class="text-white">☰</span></header><div class="p-4"><div class="field text-sm text-[#6c615e]">Busque uma peça ou card…</div><div class="mt-3 flex gap-2 overflow-hidden"><span class="chip shrink-0">Tipo⌄</span><span class="chip shrink-0">Cidade⌄</span><span class="chip shrink-0">Tema⌄</span></div><h2 class="display mt-6 text-2xl font-black">Escolha, compartilhe e peça voto</h2><div class="mt-4 space-y-4">
<article class="card grid grid-cols-[128px_1fr]"><div class="piece-art min-h-40">NEEDS ASSET<br/>POSTER REAL</div><div class="p-4"><span class="tag">Vídeo</span><h3 class="mt-2 text-sm font-extrabold">Título da peça publicada</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article>
<article class="card grid grid-cols-[128px_1fr]"><div class="art min-h-40"><b class="relative display text-xl">#SOU</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 text-sm font-extrabold">Card com seu nome</h3><span class="alias mt-2">nome</span><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Escolher →</a></div></article>
<article class="card grid grid-cols-[128px_1fr]"><div class="piece-art min-h-40">NEEDS ASSET<br/>FOTO REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 text-sm font-extrabold">Outra peça publicada</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article>
<article class="card grid grid-cols-[128px_1fr]"><div class="art art-red min-h-40"><b class="relative display text-center text-lg text-[#ffeb00]">MINHA<br/>COLINHA</b></div><div class="p-4"><span class="tag">Card · NOVO</span><h3 class="mt-2 text-sm font-extrabold">Minha colinha</h3><div class="mt-2 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Escolher →</a></div></article>
</div><p class="mt-5 text-center text-[11px] leading-4 text-[#6c615e]">Sem divisor “Cards”. A alternância peça → card → peça é intencional.</p></div></div>
<div class="phone frame min-h-[960px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between bg-[#ae1603] px-4"><div class="h-7 w-32 rounded bg-white/20"></div><span class="text-white">☰</span></header><div class="p-4"><div class="field text-sm text-[#6c615e]">Busque um card…</div><div class="mt-3 flex gap-2 overflow-hidden"><span class="chip active shrink-0">Tipo · Card ×</span><span class="chip shrink-0">Tema⌄</span></div><h2 class="display mt-6 text-2xl font-black">Escolha, compartilhe e peça voto</h2><p class="mt-1 text-xs text-[#6c615e]">6 itens com o filtro aplicado.</p><div class="mt-4 space-y-3">
<article class="card grid grid-cols-[96px_1fr]"><div class="art min-h-28"><b class="relative display">#SOU</b></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Card com seu nome</h3><span class="alias mt-1">nome</span></div></article>
<article class="card grid grid-cols-[96px_1fr]"><div class="art art-light min-h-28"><span class="relative text-2xl text-[#a21c1c]">◎</span></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Moldura quadrada</h3><span class="alias mt-1">foto de perfil</span></div></article>
<article class="card grid grid-cols-[96px_1fr]"><div class="art art-light min-h-28"><span class="relative text-2xl text-[#a21c1c]">▯</span></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Moldura vertical</h3><span class="alias mt-1">foto de perfil</span></div></article>
<article class="card grid grid-cols-[96px_1fr]"><div class="art min-h-28"><b class="relative display text-center text-xs">TIME DE<br/>VOCÊ</b></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Time de você</h3><span class="alias mt-1">santinho</span></div></article>
<article class="card grid grid-cols-[96px_1fr]"><div class="art art-red min-h-28"><b class="relative display text-center text-xs text-[#ffeb00]">TIME DO<br/>ESTADUAL</b></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Time do estadual</h3><span class="alias mt-1">estadual</span></div></article>
<article class="card grid grid-cols-[96px_1fr] border-2 border-[#e4102f]"><div class="art art-red min-h-28"><b class="relative display text-center text-xs text-[#ffeb00]">MINHA<br/>COLINHA</b></div><div class="p-3"><span class="tag">Card · NOVO</span><h3 class="mt-1 text-sm font-extrabold">Minha colinha</h3><div class="mt-1 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div></div></article>
</div></div></div></div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 03</span><h2>Tipo “Card” ativo · os 6 modelos, sem cabeçalho próprio</h2></div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white"><header class="flex h-16 items-center justify-between bg-[#ae1603] px-10"><div class="h-9 w-44 rounded bg-white/20"></div><b class="text-sm text-white">Central de Conteúdos</b></header><div class="mx-auto max-w-6xl px-10 py-10"><div class="rounded-xl bg-[#fff8f2] p-4"><div class="field text-[#6c615e]">Encontre uma peça por assunto, cidade ou tema…</div><div class="mt-3 flex gap-2"><span class="chip active">Tipo · Card ×</span><span class="chip">Cidade⌄</span><span class="chip">Região⌄</span><span class="chip">Tema⌄</span><span class="chip">Instituição⌄</span></div></div><div class="mt-8 flex items-end justify-between"><div><h2 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h2><p class="mt-1 text-sm text-[#6c615e]">Resultados do filtro aplicado.</p></div><span class="text-xs text-[#6c615e]">6 itens</span></div>
<div class="mt-5 grid grid-cols-3 gap-6">
<article class="card"><div class="art aspect-video"><b class="relative display text-2xl">#SOU ____</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Card com seu nome</h3><p class="mt-1 text-xs text-[#6c615e]">Coloque seu nome no card oficial.</p><span class="alias mt-2">nome</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<article class="card"><div class="art art-light aspect-video"><div class="relative grid size-20 place-items-center rounded-full border-2 border-dashed border-[#a21c1c]/40 text-3xl text-[#a21c1c]">◎</div></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Moldura quadrada</h3><p class="mt-1 text-xs text-[#6c615e]">Foto de perfil quadrada.</p><span class="alias mt-2">foto de perfil</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<article class="card"><div class="art art-light aspect-video"><div class="relative grid h-24 w-16 place-items-center rounded-lg border-2 border-dashed border-[#a21c1c]/40 text-3xl text-[#a21c1c]">◎</div></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Moldura vertical</h3><p class="mt-1 text-xs text-[#6c615e]">Foto vertical para stories.</p><span class="alias mt-2">foto de perfil</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<article class="card"><div class="art aspect-video"><b class="relative display text-xl">TIME DE VOCÊ</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Time de você</h3><p class="mt-1 text-xs text-[#6c615e]">Entre para o time com sua foto.</p><span class="alias mt-2">santinho</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<article class="card"><div class="art art-red aspect-video"><b class="relative display text-xl text-[#ffeb00]">TIME DO ESTADUAL</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Time do estadual</h3><p class="mt-1 text-xs text-[#6c615e]">Escolha o estadual e personalize.</p><span class="alias mt-2">estadual</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<article class="card border-2 border-[#e4102f]"><div class="art art-red aspect-video"><span class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[#184e92]">NOVO</span><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Minha colinha</h3><p class="mt-1 text-xs text-[#6c615e]">Monte sua cola de votação.</p><div class="mt-2 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 02</span>
<h2>Mobile 390 · board misto e Tipo “Card” ativo</h2>
</div>
<div class="flex flex-wrap justify-center gap-8">
<div class="phone frame min-h-[960px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4">
<div class="h-7 w-32 rounded bg-white/20"></div>
<span class="text-white">☰</span>
</header>
<div class="p-4">
<div class="field text-sm text-[#6c615e]">Busque uma peça ou card…</div>
<div class="mt-3 flex gap-2 overflow-hidden">
<span class="chip shrink-0">Tipo⌄</span><span class="chip shrink-0">Cidade⌄</span
><span class="chip shrink-0">Tema⌄</span>
</div>
<h2 class="display mt-6 text-2xl font-black">Escolha, compartilhe e peça voto</h2>
<div class="mt-4 space-y-4">
<article class="card grid grid-cols-[128px_1fr]">
<div class="piece-art min-h-40">NEEDS ASSET<br />POSTER REAL</div>
<div class="p-4">
<span class="tag">Vídeo</span>
<h3 class="mt-2 text-sm font-extrabold">Título da peça publicada</h3>
<a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
</div>
</article>
<article class="card grid grid-cols-[128px_1fr]">
<div class="art min-h-40"><b class="relative display text-xl">#SOU</b></div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 text-sm font-extrabold">Card com seu nome</h3>
<span class="alias mt-2">nome</span
><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Escolher →</a>
</div>
</article>
<article class="card grid grid-cols-[128px_1fr]">
<div class="piece-art min-h-40">NEEDS ASSET<br />FOTO REAL</div>
<div class="p-4">
<span class="tag">Foto</span>
<h3 class="mt-2 text-sm font-extrabold">Outra peça publicada</h3>
<a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
</div>
</article>
<article class="card grid grid-cols-[128px_1fr]">
<div class="art art-red min-h-40">
<b class="relative display text-center text-lg text-[#ffeb00]"
>MINHA<br />COLINHA</b
>
</div>
<div class="p-4">
<span class="tag">Card · NOVO</span>
<h3 class="mt-2 text-sm font-extrabold">Minha colinha</h3>
<div class="mt-2 flex gap-1">
<span class="alias">santinho</span><span class="alias">colinha</span>
</div>
<a class="mt-3 block text-xs font-bold text-[#a21c1c]">Escolher →</a>
</div>
</article>
</div>
<p class="mt-5 text-center text-[11px] leading-4 text-[#6c615e]">
Sem divisor “Cards”. A alternância peça → card → peça é intencional.
</p>
</div>
</div>
</div></div>
<div class="phone frame min-h-[960px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4">
<div class="h-7 w-32 rounded bg-white/20"></div>
<span class="text-white">☰</span>
</header>
<div class="p-4">
<div class="field text-sm text-[#6c615e]">Busque um card…</div>
<div class="mt-3 flex gap-2 overflow-hidden">
<span class="chip active shrink-0">Tipo · Card ×</span
><span class="chip shrink-0">Tema⌄</span>
</div>
<h2 class="display mt-6 text-2xl font-black">Escolha, compartilhe e peça voto</h2>
<p class="mt-1 text-xs text-[#6c615e]">6 itens com o filtro aplicado.</p>
<div class="mt-4 space-y-3">
<article class="card grid grid-cols-[96px_1fr]">
<div class="art min-h-28"><b class="relative display">#SOU</b></div>
<div class="p-3">
<span class="tag">Card</span>
<h3 class="mt-1 text-sm font-extrabold">Card com seu nome</h3>
<span class="alias mt-1">nome</span>
</div>
</article>
<article class="card grid grid-cols-[96px_1fr]">
<div class="art art-light min-h-28">
<span class="relative text-2xl text-[#a21c1c]">◎</span>
</div>
<div class="p-3">
<span class="tag">Card</span>
<h3 class="mt-1 text-sm font-extrabold">Moldura quadrada</h3>
<span class="alias mt-1">foto de perfil</span>
</div>
</article>
<article class="card grid grid-cols-[96px_1fr]">
<div class="art art-light min-h-28">
<span class="relative text-2xl text-[#a21c1c]">▯</span>
</div>
<div class="p-3">
<span class="tag">Card</span>
<h3 class="mt-1 text-sm font-extrabold">Moldura vertical</h3>
<span class="alias mt-1">foto de perfil</span>
</div>
</article>
<article class="card grid grid-cols-[96px_1fr]">
<div class="art min-h-28">
<b class="relative display text-center text-xs">TIME DE<br />VOCÊ</b>
</div>
<div class="p-3">
<span class="tag">Card</span>
<h3 class="mt-1 text-sm font-extrabold">Time de você</h3>
<span class="alias mt-1">santinho</span>
</div>
</article>
<article class="card grid grid-cols-[96px_1fr]">
<div class="art art-red min-h-28">
<b class="relative display text-center text-xs text-[#ffeb00]"
>TIME DO<br />ESTADUAL</b
>
</div>
<div class="p-3">
<span class="tag">Card</span>
<h3 class="mt-1 text-sm font-extrabold">Time do estadual</h3>
<span class="alias mt-1">estadual</span>
</div>
</article>
<article class="card grid grid-cols-[96px_1fr] border-2 border-[#e4102f]">
<div class="art art-red min-h-28">
<b class="relative display text-center text-xs text-[#ffeb00]"
>MINHA<br />COLINHA</b
>
</div>
<div class="p-3">
<span class="tag">Card · NOVO</span>
<h3 class="mt-1 text-sm font-extrabold">Minha colinha</h3>
<div class="mt-1 flex gap-1">
<span class="alias">santinho</span><span class="alias">colinha</span>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENAS 04–05</span><h2>Busca por apelido · “santinho” e “foto de perfil”</h2></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 03</span>
<h2>Tipo “Card” ativo · os 6 modelos, sem cabeçalho próprio</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
<div class="h-9 w-44 rounded bg-white/20"></div>
<b class="text-sm text-white">Central de Conteúdos</b>
</header>
<div class="mx-auto max-w-6xl px-10 py-10">
<div class="rounded-xl bg-[#fff8f2] p-4">
<div class="field text-[#6c615e]">Encontre uma peça por assunto, cidade ou tema…</div>
<div class="mt-3 flex gap-2">
<span class="chip active">Tipo · Card ×</span><span class="chip">Cidade⌄</span
><span class="chip">Região⌄</span><span class="chip">Tema⌄</span
><span class="chip">Instituição⌄</span>
</div>
</div>
<div class="mt-8 flex items-end justify-between">
<div>
<h2 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h2>
<p class="mt-1 text-sm text-[#6c615e]">Resultados do filtro aplicado.</p>
</div>
<span class="text-xs text-[#6c615e]">6 itens</span>
</div>
<div class="mt-5 grid grid-cols-3 gap-6">
<article class="card">
<div class="art aspect-video">
<b class="relative display text-2xl">#SOU ____</b>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Card com seu nome</h3>
<p class="mt-1 text-xs text-[#6c615e]">Coloque seu nome no card oficial.</p>
<span class="alias mt-2">nome</span
><a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
<article class="card">
<div class="art art-light aspect-video">
<div
class="relative grid size-20 place-items-center rounded-full border-2 border-dashed border-[#a21c1c]/40 text-3xl text-[#a21c1c]"
>
◎
</div>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Moldura quadrada</h3>
<p class="mt-1 text-xs text-[#6c615e]">Foto de perfil quadrada.</p>
<span class="alias mt-2">foto de perfil</span
><a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
<article class="card">
<div class="art art-light aspect-video">
<div
class="relative grid h-24 w-16 place-items-center rounded-lg border-2 border-dashed border-[#a21c1c]/40 text-3xl text-[#a21c1c]"
>
◎
</div>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Moldura vertical</h3>
<p class="mt-1 text-xs text-[#6c615e]">Foto vertical para stories.</p>
<span class="alias mt-2">foto de perfil</span
><a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
<article class="card">
<div class="art aspect-video">
<b class="relative display text-xl">TIME DE VOCÊ</b>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Time de você</h3>
<p class="mt-1 text-xs text-[#6c615e]">Entre para o time com sua foto.</p>
<span class="alias mt-2">santinho</span
><a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
<article class="card">
<div class="art art-red aspect-video">
<b class="relative display text-xl text-[#ffeb00]">TIME DO ESTADUAL</b>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Time do estadual</h3>
<p class="mt-1 text-xs text-[#6c615e]">Escolha o estadual e personalize.</p>
<span class="alias mt-2">estadual</span
><a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
<article class="card border-2 border-[#e4102f]">
<div class="art art-red aspect-video">
<span
class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[#184e92]"
>NOVO</span
><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h3 class="mt-2 font-extrabold">Minha colinha</h3>
<p class="mt-1 text-xs text-[#6c615e]">Monte sua cola de votação.</p>
<div class="mt-2 flex gap-1">
<span class="alias">santinho</span><span class="alias">colinha</span>
</div>
<a class="btn mt-4 w-full">Escolher este modelo →</a>
</div>
</article>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENAS 04–05</span>
<h2>Busca por apelido · “santinho” e “foto de perfil”</h2>
</div>
<div class="grid gap-8 lg:grid-cols-2">
<div class="frame rounded-xl bg-white p-7"><div class="field flex justify-between"><span>santinho</span><b class="text-[#6c615e]">×</b></div><div class="mt-3"><span class="chip active">Busca · “santinho” ×</span></div><h3 class="display mt-7 text-xl font-black">2 itens encontrados</h3><div class="mt-4 grid grid-cols-2 gap-4"><article class="card"><div class="art aspect-video"><b class="relative display text-xl">TIME DE VOCÊ</b></div><div class="p-4"><span class="tag">Card</span><h4 class="mt-2 font-extrabold">Time de você</h4><span class="alias mt-2">santinho</span></div></article><article class="card"><div class="art art-red aspect-video"><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b></div><div class="p-4"><span class="tag">Card</span><h4 class="mt-2 font-extrabold">Minha colinha</h4><div class="mt-2 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div></div></article></div></div>
<div class="frame rounded-xl bg-white p-7"><div class="field flex justify-between"><span>foto de perfil</span><b class="text-[#6c615e]">×</b></div><div class="mt-3"><span class="chip active">Busca · “foto de perfil” ×</span></div><h3 class="display mt-7 text-xl font-black">2 itens encontrados</h3><div class="mt-4 grid grid-cols-2 gap-4"><article class="card"><div class="art art-light aspect-video"><div class="relative grid size-16 place-items-center rounded-full border-2 border-dashed border-[#a21c1c]/40 text-[#a21c1c]">◎</div></div><div class="p-4"><span class="tag">Card</span><h4 class="mt-2 font-extrabold">Moldura quadrada</h4><span class="alias mt-2">foto de perfil</span></div></article><article class="card"><div class="art art-light aspect-video"><div class="relative grid h-20 w-12 place-items-center rounded border-2 border-dashed border-[#a21c1c]/40 text-[#a21c1c]">◎</div></div><div class="p-4"><span class="tag">Card</span><h4 class="mt-2 font-extrabold">Moldura vertical</h4><span class="alias mt-2">foto de perfil</span></div></article></div></div>
<div class="frame rounded-xl bg-white p-7">
<div class="field flex justify-between">
<span>santinho</span><b class="text-[#6c615e]">×</b>
</div>
<div class="mt-3"><span class="chip active">Busca · “santinho” ×</span></div>
<h3 class="display mt-7 text-xl font-black">2 itens encontrados</h3>
<div class="mt-4 grid grid-cols-2 gap-4">
<article class="card">
<div class="art aspect-video">
<b class="relative display text-xl">TIME DE VOCÊ</b>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h4 class="mt-2 font-extrabold">Time de você</h4>
<span class="alias mt-2">santinho</span>
</div>
</article>
<article class="card">
<div class="art art-red aspect-video">
<b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h4 class="mt-2 font-extrabold">Minha colinha</h4>
<div class="mt-2 flex gap-1">
<span class="alias">santinho</span><span class="alias">colinha</span>
</div>
</div>
</article>
</div>
</div>
<div class="frame rounded-xl bg-white p-7">
<div class="field flex justify-between">
<span>foto de perfil</span><b class="text-[#6c615e]">×</b>
</div>
<div class="mt-3"><span class="chip active">Busca · “foto de perfil” ×</span></div>
<h3 class="display mt-7 text-xl font-black">2 itens encontrados</h3>
<div class="mt-4 grid grid-cols-2 gap-4">
<article class="card">
<div class="art art-light aspect-video">
<div
class="relative grid size-16 place-items-center rounded-full border-2 border-dashed border-[#a21c1c]/40 text-[#a21c1c]"
>
◎
</div>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h4 class="mt-2 font-extrabold">Moldura quadrada</h4>
<span class="alias mt-2">foto de perfil</span>
</div>
</article>
<article class="card">
<div class="art art-light aspect-video">
<div
class="relative grid h-20 w-12 place-items-center rounded border-2 border-dashed border-[#a21c1c]/40 text-[#a21c1c]"
>
◎
</div>
</div>
<div class="p-4">
<span class="tag">Card</span>
<h4 class="mt-2 font-extrabold">Moldura vertical</h4>
<span class="alias mt-2">foto de perfil</span>
</div>
</article>
</div>
</div>
</div>
<div class="mt-7 grid gap-4 md:grid-cols-2">
<div
class="rounded-xl border border-[#184e92]/20 bg-[#eef4fb] p-4 text-sm leading-6 text-[#184e92]"
>
<b>Faceta geográfica ativa:</b> os seis modelos somem, pois não são territoriais. Uma
peça publicada de tipo Card continua seguindo a regra normal das peças.
</div>
<div
class="rounded-xl border border-dashed bg-white p-4 text-sm leading-6 text-[#6c615e]"
>
<b class="text-black">Sem convite duplicado:</b> o antigo tile “Card personalizado” foi
removido. O estúdio segue acessível por cada modelo e pelo estado vazio já existente.
</div>
</div>
<div class="mt-7 grid gap-4 md:grid-cols-2"><div class="rounded-xl border border-[#184e92]/20 bg-[#eef4fb] p-4 text-sm leading-6 text-[#184e92]"><b>Faceta geográfica ativa:</b> os seis modelos somem, pois não são territoriais. Uma peça publicada de tipo Card continua seguindo a regra normal das peças.</div><div class="rounded-xl border border-dashed bg-white p-4 text-sm leading-6 text-[#6c615e]"><b class="text-black">Sem convite duplicado:</b> o antigo tile “Card personalizado” foi removido. O estúdio segue acessível por cada modelo e pelo estado vazio já existente.</div></div>
</section>
</main>
</body>

2
docs/plans/central-conteudos-cards-no-catalogo.md
View file

@ -55,7 +55,7 @@ Isso revoga explicitamente a decisão D6 do S27 (`docs/plans/central-conteudos-p
- **Vou apresentar dados?** Não — o item não exibe número/contador; só roteia o visitante ao estúdio. A contagem de uso continua no mecanismo anônimo do C213/S32 (assunto card), sem métrica nova.
- **Decisões desbloqueadas:** o eleitor escolhe o modelo sem varrer a galeria; a comunicação passa a poder ler quais modelos são procurados no catálogo, se a questão (c) for aceita (leitura pelo mecanismo existente).
- **Forma:** *adiada ao plano de implementação* — nenhuma tabela/gráfico; quando muito, o evento anônimo já existente.
- **Forma:** _adiada ao plano de implementação_ — nenhuma tabela/gráfico; quando muito, o evento anônimo já existente.
## Dados da decisão (literais)

218
docs/plans/central-conteudos-header-logo-ui-design.html
View file

@ -6,89 +6,245 @@
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — S33 · Marca no header da Central</title>
<style type="text/tailwindcss">
@theme { --font-sans: Arimo, Arial, sans-serif; }
:root { --red:#ae1603; --kit-red:#e4102f; --blue:#184e92; --yellow:#ffeb00; --cream:#fff8f2; --muted:#6c615e; --line:rgb(0 0 0/.12); --display:'Exo 2','Arial Black',sans-serif; }
*{box-sizing:border-box} body{font-family:Arimo,Arial,sans-serif}.display{font-family:var(--display)}
.board{background:#e7e3e0;background-image:radial-gradient(rgb(24 78 146/.09) .7px,transparent .7px);background-size:18px 18px}
.frame{box-shadow:0 22px 60px rgb(39 25 22/.13)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}
.scene:after{content:'';height:1px;flex:1;background:#cfc9c5}
.trimmed-lockup{position:relative;overflow:hidden;width:188px;height:50px}
.trimmed-lockup img{position:absolute;width:246px;max-width:none;left:-29px;top:-38px}
.trimmed-lockup.mobile{width:142px;height:39px}.trimmed-lockup.mobile img{width:186px;left:-22px;top:-29px}
.option{border:1px solid var(--line);border-radius:14px;background:white;overflow:hidden}.recommended{border:2px solid var(--kit-red);box-shadow:0 10px 26px rgb(228 16 47/.13)}
@theme {
--font-sans: Arimo, Arial, sans-serif;
}
:root {
--red: #ae1603;
--kit-red: #e4102f;
--blue: #184e92;
--yellow: #ffeb00;
--cream: #fff8f2;
--muted: #6c615e;
--line: rgb(0 0 0/0.12);
--display: 'Exo 2', 'Arial Black', sans-serif;
}
* {
box-sizing: border-box;
}
body {
font-family: Arimo, Arial, sans-serif;
}
.display {
font-family: var(--display);
}
.board {
background: #e7e3e0;
background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
background-size: 18px 18px;
}
.frame {
box-shadow: 0 22px 60px rgb(39 25 22/0.13);
}
.desktop {
width: 1280px;
}
.phone {
width: 390px;
border-radius: 28px;
}
.scene:after {
content: '';
height: 1px;
flex: 1;
background: #cfc9c5;
}
.trimmed-lockup {
position: relative;
overflow: hidden;
width: 188px;
height: 50px;
}
.trimmed-lockup img {
position: absolute;
width: 246px;
max-width: none;
left: -29px;
top: -38px;
}
.trimmed-lockup.mobile {
width: 142px;
height: 39px;
}
.trimmed-lockup.mobile img {
width: 186px;
left: -22px;
top: -29px;
}
.option {
border: 1px solid var(--line);
border-radius: 14px;
background: white;
overflow: hidden;
}
.recommended {
border: 2px solid var(--kit-red);
box-shadow: 0 10px 26px rgb(228 16 47/0.13);
}
</style>
</head>
<body class="board min-h-screen text-black antialiased">
<main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
<header class="max-w-3xl">
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white">S33 · decisão visual</span>
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
>S33 · decisão visual</span
>
<h1 class="display mt-4 text-4xl font-black">A marca volta a assinar a Central.</h1>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">Mesmo header, mesma altura e mesma copy. O gate escolhe somente o ativo e seu peso visual.</p>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
Mesmo header, mesma altura e mesma copy. O gate escolhe somente o ativo e seu peso visual.
</p>
</header>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 01</span><h2>Desktop 1280 · opções A e B lado a lado</h2></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 01</span>
<h2>Desktop 1280 · opções A e B lado a lado</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-[#f9faff] p-8">
<div class="grid grid-cols-2 gap-6">
<article class="option recommended">
<div class="flex items-center justify-between bg-[#ae1603] px-8 h-16">
<div class="trimmed-lockup" aria-label="Jorge Solla"><img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" /></div>
<div class="trimmed-lockup" aria-label="Jorge Solla">
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
</div>
<span class="text-sm font-bold text-white">Central de Conteúdos</span>
</div>
<div class="p-5">
<div class="flex items-center justify-between gap-3"><h3 class="font-extrabold">A · Lockup oficial com recorte técnico</h3><span class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[11px] font-black text-white">RECOMENDADA</span></div>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">Preserva a assinatura horizontal desenhada no S27 e remove somente a moldura transparente do PNG. A tinta lê em aproximadamente 46 px, no peso da referência pública.</p>
<div class="flex items-center justify-between gap-3">
<h3 class="font-extrabold">A · Lockup oficial com recorte técnico</h3>
<span
class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[11px] font-black text-white"
>RECOMENDADA</span
>
</div>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
Preserva a assinatura horizontal desenhada no S27 e remove somente a moldura
transparente do PNG. A tinta lê em aproximadamente 46 px, no peso da referência
pública.
</p>
</div>
</article>
<article class="option">
<div class="flex h-16 items-center justify-between bg-[#ae1603] px-8">
<img src="../../public/campaign-kit/marca-negativa-completa.png" class="h-[58px] w-auto object-contain" alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro" />
<img
src="../../public/campaign-kit/marca-negativa-completa.png"
class="h-[58px] w-auto object-contain"
alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro"
/>
<span class="text-sm font-bold text-white">Central de Conteúdos</span>
</div>
<div class="p-5">
<h3 class="font-extrabold">B · Marca negativa completa</h3>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">Oficial e correta sobre vermelho, mas comprime nome, número e slogan na barra de 64 px. O slogan perde leitura e a massa vertical compete com o nome da seção.</p>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
Oficial e correta sobre vermelho, mas comprime nome, número e slogan na barra de
64 px. O slogan perde leitura e a massa vertical compete com o nome da seção.
</p>
</div>
</article>
</div>
<div class="mt-7 rounded-xl bg-white p-6">
<p class="text-xs font-black tracking-[.12em] text-[#e4102f]">DECISÃO RECOMENDADA</p>
<p class="display mt-1 text-2xl font-black">A · manter o lockup e corrigir a caixa, não redesenhar o header.</p>
<p class="mt-2 max-w-3xl text-sm leading-6 text-[#6c615e]">Altura do header: 64 px. Inset horizontal: 32 px dentro do conteúdo. Lockup visível: 188 × 50 px. Badge existente: 14 px, bold. Sem novo lockup e sem alteração de cor.</p>
<p class="display mt-1 text-2xl font-black">
A · manter o lockup e corrigir a caixa, não redesenhar o header.
</p>
<p class="mt-2 max-w-3xl text-sm leading-6 text-[#6c615e]">
Altura do header: 64 px. Inset horizontal: 32 px dentro do conteúdo. Lockup visível:
188 × 50 px. Badge existente: 14 px, bold. Sem novo lockup e sem alteração de cor.
</p>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 02</span><h2>Mobile 390 · as duas opções na barra real de 56 px</h2></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 02</span>
<h2>Mobile 390 · as duas opções na barra real de 56 px</h2>
</div>
<div class="flex flex-wrap justify-center gap-8">
<article class="phone frame overflow-hidden bg-white">
<div class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
<div class="trimmed-lockup mobile"><img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" /></div><span class="text-white">☰</span>
<div class="trimmed-lockup mobile">
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
</div>
<span class="text-white">☰</span>
</div>
<div class="p-5">
<span class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[10px] font-black text-white"
>A · RECOMENDADA</span
>
<h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3>
<p class="mt-2 text-sm leading-5 text-[#6c615e]">
A assinatura continua reconhecível sem disputar espaço com o menu.
</p>
</div>
<div class="p-5"><span class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[10px] font-black text-white">A · RECOMENDADA</span><h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">A assinatura continua reconhecível sem disputar espaço com o menu.</p></div>
</article>
<article class="phone frame overflow-hidden bg-white">
<div class="flex h-14 items-center justify-between bg-[#ae1603] px-5"><img src="../../public/campaign-kit/marca-negativa-completa.png" class="h-[52px] w-auto object-contain" alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro" /><span class="text-white">☰</span></div>
<div class="p-5"><span class="rounded-full border border-black/15 px-2.5 py-1 text-[10px] font-black">B · ALTERNATIVA</span><h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">O conjunto completo fica pequeno demais para o slogan cumprir sua função.</p></div>
<div class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
<img
src="../../public/campaign-kit/marca-negativa-completa.png"
class="h-[52px] w-auto object-contain"
alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro"
/><span class="text-white">☰</span>
</div>
<div class="p-5">
<span class="rounded-full border border-black/15 px-2.5 py-1 text-[10px] font-black"
>B · ALTERNATIVA</span
>
<h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3>
<p class="mt-2 text-sm leading-5 text-[#6c615e]">
O conjunto completo fica pequeno demais para o slogan cumprir sua função.
</p>
</div>
</article>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 03</span><h2>Página da peça · “Voltar à Central” e badge preservados</h2></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 03</span>
<h2>Página da peça · “Voltar à Central” e badge preservados</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
<div class="trimmed-lockup"><img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" /></div><a class="text-sm font-bold text-white">Voltar à Central</a>
<div class="trimmed-lockup">
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
</div>
<a class="text-sm font-bold text-white">Voltar à Central</a>
</header>
<div class="mx-auto grid max-w-5xl grid-cols-[1.15fr_.85fr] gap-10 px-10 py-12">
<div class="grid aspect-video place-items-center rounded-2xl bg-stone-200 text-xs font-black tracking-wide text-stone-500">NEEDS ASSET · PREVIEW REAL DA PEÇA</div>
<div><span class="inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]">Central de Conteúdos</span><h3 class="display mt-3 text-3xl font-black">Título da peça publicada</h3><p class="mt-3 text-sm leading-6 text-[#6c615e]">Descrição editorial da peça, sem alteração neste item.</p><div class="mt-6 h-11 rounded-[10px] bg-[#ffe607]"></div></div>
<div
class="grid aspect-video place-items-center rounded-2xl bg-stone-200 text-xs font-black tracking-wide text-stone-500"
>
NEEDS ASSET · PREVIEW REAL DA PEÇA
</div>
<div>
<span
class="inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
>Central de Conteúdos</span
>
<h3 class="display mt-3 text-3xl font-black">Título da peça publicada</h3>
<p class="mt-3 text-sm leading-6 text-[#6c615e]">
Descrição editorial da peça, sem alteração neste item.
</p>
<div class="mt-6 h-11 rounded-[10px] bg-[#ffe607]"></div>
</div>
</div>
</div>
<div class="phone frame mx-auto mt-8 overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-5"><div class="trimmed-lockup mobile"><img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" /></div><a class="text-xs font-bold text-white">Voltar à Central</a></header>
<div class="p-5"><div class="aspect-video rounded-xl bg-stone-200"></div><span class="mt-5 inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]">Central de Conteúdos</span><h3 class="display mt-2 text-2xl font-black">Título da peça publicada</h3></div>
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
<div class="trimmed-lockup mobile">
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
</div>
<a class="text-xs font-bold text-white">Voltar à Central</a>
</header>
<div class="p-5">
<div class="aspect-video rounded-xl bg-stone-200"></div>
<span
class="mt-5 inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
>Central de Conteúdos</span
>
<h3 class="display mt-2 text-2xl font-black">Título da peça publicada</h3>
</div>
</div>
</section>
</main>

4
docs/plans/central-conteudos-header-logo.md
View file

@ -43,7 +43,7 @@ No header da Central de Conteúdos pública (`/conteudos`), a marca lê muito me
- **Vou apresentar dados?** Não.
- **Decisões desbloqueadas:** N/A — correção de fidelidade visual; nenhum ator decide com número.
- **Forma:** *adiada ao plano de implementação* — sem restrição de produto além da referência de peso visual acima.
- **Forma:** _adiada ao plano de implementação_ — sem restrição de produto além da referência de peso visual acima.
## Dados da decisão (literais)
@ -96,4 +96,4 @@ No header da Central de Conteúdos pública (`/conteudos`), a marca lê muito me
3. Persona + job + aceite claros (sem jargão de stack)? 4/5 — aceite fala em peso visual; a aferição exige comparação em staging.
4. Direção no codebase é hipótese (não contrato técnico)? 5/5 — arquivos e classes são literais de estado atual/evidência, não prescrição.
5. Zero decisões duras de engenharia no plano? 4/5 — a questão em aberto recomenda decidir no gate; a escolha final (ativo vs compensação) fica para o gate/impl.
Média: 4,6/5 — ≥4/5.
Média: 4,6/5 — ≥4/5.

426
docs/plans/central-conteudos-liderancas-ui-design.html
View file

@ -1,37 +1,425 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<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 — S34 · Lideranças nas peças</title>
<style type="text/tailwindcss">
@theme{--font-sans:Arimo,Arial,sans-serif} :root{--red:#a21c1c;--kit:#e4102f;--blue:#184e92;--yellow:#ffe607;--cream:#fff8f2;--muted:#6c615e;--line:rgb(0 0 0/.12);--display:'Exo 2','Arial Black',sans-serif}
*{box-sizing:border-box}.display{font-family:var(--display)}.board{background:#e7e3e0;background-image:radial-gradient(rgb(24 78 146/.09) .7px,transparent .7px);background-size:18px 18px}.frame{box-shadow:0 22px 60px rgb(39 25 22/.13)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}.scene:after{content:'';height:1px;flex:1;background:#cfc9c5}
.field{min-height:44px;border:1px solid #d6d3d1;border-radius:6px;background:white;padding:10px 12px;font-size:14px}.label{font-size:13px;font-weight:600}.chip{display:inline-flex;min-height:36px;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:white;padding:6px 11px;font-size:12px;font-weight:700}.active{border-color:rgb(24 78 146/.35);background:#eef4fb;color:#184e92}.tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#f4f4f5;padding:5px 8px;font-size:12px;font-weight:600}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border-radius:8px;padding:9px 14px;font-size:14px;font-weight:700}.primary{background:#c51414;color:white}.catalog-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:white;box-shadow:0 8px 24px rgb(71 19 14/.07)}
@theme {
--font-sans: Arimo, Arial, sans-serif;
}
:root {
--red: #a21c1c;
--kit: #e4102f;
--blue: #184e92;
--yellow: #ffe607;
--cream: #fff8f2;
--muted: #6c615e;
--line: rgb(0 0 0/0.12);
--display: 'Exo 2', 'Arial Black', sans-serif;
}
* {
box-sizing: border-box;
}
.display {
font-family: var(--display);
}
.board {
background: #e7e3e0;
background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
background-size: 18px 18px;
}
.frame {
box-shadow: 0 22px 60px rgb(39 25 22/0.13);
}
.desktop {
width: 1280px;
}
.phone {
width: 390px;
border-radius: 28px;
}
.scene:after {
content: '';
height: 1px;
flex: 1;
background: #cfc9c5;
}
.field {
min-height: 44px;
border: 1px solid #d6d3d1;
border-radius: 6px;
background: white;
padding: 10px 12px;
font-size: 14px;
}
.label {
font-size: 13px;
font-weight: 600;
}
.chip {
display: inline-flex;
min-height: 36px;
align-items: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: 999px;
background: white;
padding: 6px 11px;
font-size: 12px;
font-weight: 700;
}
.active {
border-color: rgb(24 78 146/0.35);
background: #eef4fb;
color: #184e92;
}
.tag {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
background: #f4f4f5;
padding: 5px 8px;
font-size: 12px;
font-weight: 600;
}
.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
border-radius: 8px;
padding: 9px 14px;
font-size: 14px;
font-weight: 700;
}
.primary {
background: #c51414;
color: white;
}
.catalog-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 14px;
background: white;
box-shadow: 0 8px 24px rgb(71 19 14/0.07);
}
</style>
</head>
<body class="board min-h-screen text-black antialiased">
<main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
<header class="max-w-3xl"><span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white">S34 · dois recortes, uma faceta</span><h1 class="display mt-4 text-4xl font-black">Quem aparece na peça fica encontrável — sem expor quem não aparece.</h1><p class="mt-2 text-sm leading-6 text-[#6c615e]">A ficha separa liderança interna de figura pública; a Central pública reúne apenas os nomes presentes em peças publicadas.</p></header>
<header class="max-w-3xl">
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
>S34 · dois recortes, uma faceta</span
>
<h1 class="display mt-4 text-4xl font-black">
Quem aparece na peça fica encontrável — sem expor quem não aparece.
</h1>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
A ficha separa liderança interna de figura pública; a Central pública reúne apenas os
nomes presentes em peças publicadas.
</p>
</header>
<section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 01</span><h2>Ficha interna · desktop 1280 · os dois recortes</h2></div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white" data-theme="campaign"><header class="flex h-14 items-center justify-between border-b bg-[#fafaf9] px-6"><b>Campanha · Comunicação</b><span class="text-sm text-[#6b7280]">Central de Conteúdos</span></header><div class="p-8"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><div class="mt-2 flex items-start justify-between"><div><h2 class="text-xl font-semibold">Título da peça em revisão</h2><div class="mt-2 flex gap-2"><span class="rounded-full bg-green-100 px-2 py-1 text-xs font-semibold text-green-800">Pronto</span><span class="rounded-full bg-[#f4f4f5] px-2 py-1 text-xs font-semibold text-[#6b7280]">Rascunho</span></div></div><button class="btn border bg-white">Publicar</button></div>
<div class="mt-7 grid grid-cols-[300px_1fr] gap-8"><aside><div class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-xs font-bold text-stone-500">NEEDS ASSET · PREVIEW REAL</div><dl class="mt-4 space-y-2 text-xs"><div class="flex justify-between"><dt class="text-[#6b7280]">Origem</dt><dd>Arquivo</dd></div><div class="flex justify-between"><dt class="text-[#6b7280]">Tipo</dt><dd>Vídeo</dd></div></dl></aside>
<form class="grid grid-cols-2 gap-4"><div class="col-span-2"><p class="label">Título</p><div class="field mt-1">Título da peça em revisão</div></div><div class="col-span-2 rounded-xl border p-5"><div class="flex items-start justify-between gap-6"><div><h3 class="font-semibold">Quem aparece na peça</h3><p class="mt-1 text-xs leading-5 text-[#6b7280]">Marque somente pessoas visíveis ou participantes desta peça. A publicação expõe apenas o nome.</p></div><span class="rounded-full bg-[#fff5ed] px-2 py-1 text-[11px] font-semibold text-[#6b2d15]">Curadoria humana</span></div>
<div class="mt-5 grid grid-cols-2 gap-5"><div><p class="label">Lideranças da campanha</p><p class="mt-1 text-xs leading-5 text-[#6b7280]">Busca nos registros existentes. Nenhum telefone, município ou voto vai para a Central pública.</p><div class="mt-2 flex flex-wrap gap-1.5"><span class="tag">Nome da liderança <b>×</b></span></div><div class="field mt-2 flex items-center justify-between text-[#6b7280]"><span>Buscar liderança…</span><span>⌄</span></div><div class="mt-1 rounded-lg border bg-white p-1 shadow-lg"><div class="rounded-md bg-[#f4f4f5] px-3 py-2 text-sm"><b>Nome da liderança</b><span class="block text-xs text-[#6b7280]">Registro da campanha</span></div><div class="px-3 py-2 text-sm">Outra liderança de exemplo</div></div></div>
<div><p class="label">Figuras públicas</p><p class="mt-1 text-xs leading-5 text-[#6b7280]">Texto curado com catálogo, no mesmo molde de Instituição.</p><div class="mt-2 flex flex-wrap gap-1.5"><span class="tag">Dep. Estadual Exemplo <b>×</b></span></div><div class="field mt-2 flex items-center justify-between text-[#6b7280]"><span>Digite ou escolha uma figura pública…</span><span>⌄</span></div><div class="mt-1 rounded-lg border bg-white p-1 shadow-lg"><div class="rounded-md bg-[#f4f4f5] px-3 py-2 text-sm"><b>Dep. Estadual Exemplo</b><span class="block text-xs text-[#6b7280]">Figura pública catalogada</span></div><div class="px-3 py-2 text-sm">Personalidade Exemplo</div></div></div></div>
</div><div><p class="label">Instituição</p><div class="field mt-1 text-[#6b7280]">Sem instituição</div></div><div><p class="label">Cidade</p><div class="field mt-1 text-[#6b7280]">Sem cidade</div></div><div class="col-span-2 flex justify-end"><button class="btn primary">Salvar alterações</button></div></form>
</div></div></div>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 01</span>
<h2>Ficha interna · desktop 1280 · os dois recortes</h2>
</div>
<div
class="desktop frame mx-auto overflow-hidden rounded-xl bg-white"
data-theme="campaign"
>
<header class="flex h-14 items-center justify-between border-b bg-[#fafaf9] px-6">
<b>Campanha · Comunicação</b
><span class="text-sm text-[#6b7280]">Central de Conteúdos</span>
</header>
<div class="p-8">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<div class="mt-2 flex items-start justify-between">
<div>
<h2 class="text-xl font-semibold">Título da peça em revisão</h2>
<div class="mt-2 flex gap-2">
<span
class="rounded-full bg-green-100 px-2 py-1 text-xs font-semibold text-green-800"
>Pronto</span
><span
class="rounded-full bg-[#f4f4f5] px-2 py-1 text-xs font-semibold text-[#6b7280]"
>Rascunho</span
>
</div>
</div>
<button class="btn border bg-white">Publicar</button>
</div>
<div class="mt-7 grid grid-cols-[300px_1fr] gap-8">
<aside>
<div
class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-xs font-bold text-stone-500"
>
NEEDS ASSET · PREVIEW REAL
</div>
<dl class="mt-4 space-y-2 text-xs">
<div class="flex justify-between">
<dt class="text-[#6b7280]">Origem</dt>
<dd>Arquivo</dd>
</div>
<div class="flex justify-between">
<dt class="text-[#6b7280]">Tipo</dt>
<dd>Vídeo</dd>
</div>
</dl>
</aside>
<form class="grid grid-cols-2 gap-4">
<div class="col-span-2">
<p class="label">Título</p>
<div class="field mt-1">Título da peça em revisão</div>
</div>
<div class="col-span-2 rounded-xl border p-5">
<div class="flex items-start justify-between gap-6">
<div>
<h3 class="font-semibold">Quem aparece na peça</h3>
<p class="mt-1 text-xs leading-5 text-[#6b7280]">
Marque somente pessoas visíveis ou participantes desta peça. A publicação
expõe apenas o nome.
</p>
</div>
<span
class="rounded-full bg-[#fff5ed] px-2 py-1 text-[11px] font-semibold text-[#6b2d15]"
>Curadoria humana</span
>
</div>
<div class="mt-5 grid grid-cols-2 gap-5">
<div>
<p class="label">Lideranças da campanha</p>
<p class="mt-1 text-xs leading-5 text-[#6b7280]">
Busca nos registros existentes. Nenhum telefone, município ou voto vai para
a Central pública.
</p>
<div class="mt-2 flex flex-wrap gap-1.5">
<span class="tag">Nome da liderança <b>×</b></span>
</div>
<div class="field mt-2 flex items-center justify-between text-[#6b7280]">
<span>Buscar liderança…</span><span>⌄</span>
</div>
<div class="mt-1 rounded-lg border bg-white p-1 shadow-lg">
<div class="rounded-md bg-[#f4f4f5] px-3 py-2 text-sm">
<b>Nome da liderança</b
><span class="block text-xs text-[#6b7280]">Registro da campanha</span>
</div>
<div class="px-3 py-2 text-sm">Outra liderança de exemplo</div>
</div>
</div>
<div>
<p class="label">Figuras públicas</p>
<p class="mt-1 text-xs leading-5 text-[#6b7280]">
Texto curado com catálogo, no mesmo molde de Instituição.
</p>
<div class="mt-2 flex flex-wrap gap-1.5">
<span class="tag">Dep. Estadual Exemplo <b>×</b></span>
</div>
<div class="field mt-2 flex items-center justify-between text-[#6b7280]">
<span>Digite ou escolha uma figura pública…</span><span>⌄</span>
</div>
<div class="mt-1 rounded-lg border bg-white p-1 shadow-lg">
<div class="rounded-md bg-[#f4f4f5] px-3 py-2 text-sm">
<b>Dep. Estadual Exemplo</b
><span class="block text-xs text-[#6b7280]"
>Figura pública catalogada</span
>
</div>
<div class="px-3 py-2 text-sm">Personalidade Exemplo</div>
</div>
</div>
</div>
</div>
<div>
<p class="label">Instituição</p>
<div class="field mt-1 text-[#6b7280]">Sem instituição</div>
</div>
<div>
<p class="label">Cidade</p>
<div class="field mt-1 text-[#6b7280]">Sem cidade</div>
</div>
<div class="col-span-2 flex justify-end">
<button class="btn primary">Salvar alterações</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 02</span><h2>Ficha interna · mobile 390 · pessoa marcada e ninguém marcado</h2></div>
<div class="flex flex-wrap justify-center gap-8"><div class="phone frame min-h-[760px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Central de Conteúdos</b><span>☰</span></header><div class="p-4"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-lg font-semibold">Título da peça</h2><div class="mt-5 rounded-xl border p-4"><h3 class="font-semibold">Quem aparece na peça</h3><p class="mt-1 text-xs leading-5 text-[#6b7280]">Somente o nome poderá aparecer no filtro público.</p><p class="label mt-5">Lideranças da campanha</p><div class="mt-2 flex"><span class="tag">Nome da liderança <b>×</b></span></div><div class="field mt-2 flex justify-between text-[#6b7280]"><span>Buscar liderança…</span><span>⌄</span></div><p class="label mt-5">Figuras públicas</p><div class="mt-2 flex"><span class="tag">Dep. Estadual Exemplo <b>×</b></span></div><div class="field mt-2 flex justify-between text-[#6b7280]"><span>Digite ou escolha…</span><span>⌄</span></div></div><button class="btn primary mt-5 w-full">Salvar alterações</button></div></div>
<div class="phone frame min-h-[620px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Central de Conteúdos</b><span>☰</span></header><div class="p-4"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-lg font-semibold">Peça sem ninguém marcado</h2><div class="mt-5 rounded-xl border p-4"><h3 class="font-semibold">Quem aparece na peça</h3><div class="mt-4 rounded-lg bg-[#f4f4f5] p-3 text-xs leading-5 text-[#6b7280]">Ninguém marcado. A peça pode ser publicada normalmente e não cria nenhum nome na faceta “Lideranças”.</div><p class="label mt-5">Lideranças da campanha</p><div class="field mt-2 text-[#6b7280]">Buscar liderança…</div><p class="label mt-5">Figuras públicas</p><div class="field mt-2 text-[#6b7280]">Digite ou escolha…</div></div><button class="btn primary mt-5 w-full">Salvar alterações</button></div></div></div>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 02</span>
<h2>Ficha interna · mobile 390 · pessoa marcada e ninguém marcado</h2>
</div>
<div class="flex flex-wrap justify-center gap-8">
<div class="phone frame min-h-[760px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between border-b px-4">
<b>Central de Conteúdos</b><span>☰</span>
</header>
<div class="p-4">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<h2 class="mt-2 text-lg font-semibold">Título da peça</h2>
<div class="mt-5 rounded-xl border p-4">
<h3 class="font-semibold">Quem aparece na peça</h3>
<p class="mt-1 text-xs leading-5 text-[#6b7280]">
Somente o nome poderá aparecer no filtro público.
</p>
<p class="label mt-5">Lideranças da campanha</p>
<div class="mt-2 flex">
<span class="tag">Nome da liderança <b>×</b></span>
</div>
<div class="field mt-2 flex justify-between text-[#6b7280]">
<span>Buscar liderança…</span><span>⌄</span>
</div>
<p class="label mt-5">Figuras públicas</p>
<div class="mt-2 flex">
<span class="tag">Dep. Estadual Exemplo <b>×</b></span>
</div>
<div class="field mt-2 flex justify-between text-[#6b7280]">
<span>Digite ou escolha…</span><span>⌄</span>
</div>
</div>
<button class="btn primary mt-5 w-full">Salvar alterações</button>
</div>
</div>
<div class="phone frame min-h-[620px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between border-b px-4">
<b>Central de Conteúdos</b><span>☰</span>
</header>
<div class="p-4">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<h2 class="mt-2 text-lg font-semibold">Peça sem ninguém marcado</h2>
<div class="mt-5 rounded-xl border p-4">
<h3 class="font-semibold">Quem aparece na peça</h3>
<div class="mt-4 rounded-lg bg-[#f4f4f5] p-3 text-xs leading-5 text-[#6b7280]">
Ninguém marcado. A peça pode ser publicada normalmente e não cria nenhum nome na
faceta “Lideranças”.
</div>
<p class="label mt-5">Lideranças da campanha</p>
<div class="field mt-2 text-[#6b7280]">Buscar liderança…</div>
<p class="label mt-5">Figuras públicas</p>
<div class="field mt-2 text-[#6b7280]">Digite ou escolha…</div>
</div>
<button class="btn primary mt-5 w-full">Salvar alterações</button>
</div>
</div>
</div>
</section>
<section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 03</span><h2>Catálogo público · faceta única “Lideranças” · desktop e mobile</h2></div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white"><header class="flex h-16 items-center justify-between bg-[#ae1603] px-10"><div class="h-9 w-44 rounded bg-white/20"></div><b class="text-sm text-white">Central de Conteúdos</b></header><div class="mx-auto max-w-6xl px-10 py-10"><div class="rounded-xl bg-[#fff8f2] p-4"><div class="h-11 rounded-[10px] border bg-white px-3 py-3 text-sm text-[#6c615e]">Encontre uma peça por assunto, cidade ou pessoa…</div><div class="mt-3 flex flex-wrap gap-2"><span class="chip">Tipo⌄</span><span class="chip">Cidade⌄</span><span class="chip">Região⌄</span><span class="chip">Tema⌄</span><span class="chip">Instituição⌄</span><details open class="relative"><summary class="chip list-none border-[#184e92]/35 bg-[#eef4fb] text-[#184e92]">Lideranças⌄</summary><div class="absolute z-10 mt-1 w-64 rounded-xl border bg-white p-2 shadow-xl"><p class="px-2 py-1 text-[10px] font-black tracking-wide text-[#6c615e]">EM PEÇAS PUBLICADAS</p><div class="rounded-lg bg-[#f4f4f5] px-3 py-2 text-sm font-medium">Nome da liderança</div><div class="px-3 py-2 text-sm">Dep. Estadual Exemplo</div><div class="px-3 py-2 text-sm">Personalidade Exemplo</div></div></details></div></div><div class="mt-24 flex items-center justify-between"><div><h3 class="display text-2xl font-black">Peças com Nome da liderança</h3><p class="mt-1 text-sm text-[#6c615e]">O filtro combina com cidade, tema e os demais recortes.</p></div><span class="chip active">Lideranças · Nome da liderança ×</span></div><div class="mt-5 grid grid-cols-3 gap-6"><article class="catalog-card"><div class="grid aspect-video place-items-center bg-stone-200 text-[10px] font-black text-stone-500">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]">Vídeo</span><h4 class="mt-2 font-extrabold">Título da peça publicada</h4><p class="mt-1 text-xs text-[#6c615e]">Nome da liderança · Tema</p></div></article></div><div class="mt-7 rounded-lg border border-dashed p-4 text-xs leading-5 text-[#6c615e]"><b class="text-black">Regra visível do gate:</b> este menu é derivado somente das peças publicadas. Despublicar a última peça de um nome remove esse nome da faceta imediatamente. Sem contato, território, organização, status ou votos.</div></div></div>
<div class="phone frame mx-auto mt-8 min-h-[740px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between bg-[#ae1603] px-4"><div class="h-7 w-32 rounded bg-white/20"></div><span class="text-white">☰</span></header><div class="p-4"><div class="h-11 rounded-[10px] border px-3 py-3 text-sm text-[#6c615e]">Busque uma pessoa…</div><div class="mt-3 flex gap-2 overflow-hidden"><span class="chip shrink-0">Tipo⌄</span><span class="chip active shrink-0">Lideranças · Nome da liderança ×</span></div><div class="mt-5 rounded-xl border bg-white p-3 shadow-lg"><p class="px-2 py-1 text-[10px] font-black tracking-wide text-[#6c615e]">LIDERANÇAS · EM PEÇAS PUBLICADAS</p><div class="rounded-lg bg-[#f4f4f5] px-3 py-3 text-sm font-medium">Nome da liderança</div><div class="px-3 py-3 text-sm">Dep. Estadual Exemplo</div></div><article class="catalog-card mt-5"><div class="grid aspect-video place-items-center bg-stone-200 text-[10px] font-black text-stone-500">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]">Vídeo</span><h4 class="mt-2 text-lg font-extrabold">Título da peça publicada</h4><p class="mt-1 text-xs text-[#6c615e]">Nome da liderança</p><button class="btn mt-4 w-full bg-[#ffe607] text-black">Compartilhar</button></div></article></div></div>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 03</span>
<h2>Catálogo público · faceta única “Lideranças” · desktop e mobile</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
<div class="h-9 w-44 rounded bg-white/20"></div>
<b class="text-sm text-white">Central de Conteúdos</b>
</header>
<div class="mx-auto max-w-6xl px-10 py-10">
<div class="rounded-xl bg-[#fff8f2] p-4">
<div class="h-11 rounded-[10px] border bg-white px-3 py-3 text-sm text-[#6c615e]">
Encontre uma peça por assunto, cidade ou pessoa…
</div>
<div class="mt-3 flex flex-wrap gap-2">
<span class="chip">Tipo⌄</span><span class="chip">Cidade⌄</span
><span class="chip">Região⌄</span><span class="chip">Tema⌄</span
><span class="chip">Instituição⌄</span>
<details open class="relative">
<summary class="chip list-none border-[#184e92]/35 bg-[#eef4fb] text-[#184e92]">
Lideranças⌄
</summary>
<div class="absolute z-10 mt-1 w-64 rounded-xl border bg-white p-2 shadow-xl">
<p class="px-2 py-1 text-[10px] font-black tracking-wide text-[#6c615e]">
EM PEÇAS PUBLICADAS
</p>
<div class="rounded-lg bg-[#f4f4f5] px-3 py-2 text-sm font-medium">
Nome da liderança
</div>
<div class="px-3 py-2 text-sm">Dep. Estadual Exemplo</div>
<div class="px-3 py-2 text-sm">Personalidade Exemplo</div>
</div>
</details>
</div>
</div>
<div class="mt-24 flex items-center justify-between">
<div>
<h3 class="display text-2xl font-black">Peças com Nome da liderança</h3>
<p class="mt-1 text-sm text-[#6c615e]">
O filtro combina com cidade, tema e os demais recortes.
</p>
</div>
<span class="chip active">Lideranças · Nome da liderança ×</span>
</div>
<div class="mt-5 grid grid-cols-3 gap-6">
<article class="catalog-card">
<div
class="grid aspect-video place-items-center bg-stone-200 text-[10px] font-black text-stone-500"
>
NEEDS ASSET · PREVIEW REAL
</div>
<div class="p-4">
<span
class="rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
>Vídeo</span
>
<h4 class="mt-2 font-extrabold">Título da peça publicada</h4>
<p class="mt-1 text-xs text-[#6c615e]">Nome da liderança · Tema</p>
</div>
</article>
</div>
<div class="mt-7 rounded-lg border border-dashed p-4 text-xs leading-5 text-[#6c615e]">
<b class="text-black">Regra visível do gate:</b> este menu é derivado somente das
peças publicadas. Despublicar a última peça de um nome remove esse nome da faceta
imediatamente. Sem contato, território, organização, status ou votos.
</div>
</div>
</div>
<div class="phone frame mx-auto mt-8 min-h-[740px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4">
<div class="h-7 w-32 rounded bg-white/20"></div>
<span class="text-white">☰</span>
</header>
<div class="p-4">
<div class="h-11 rounded-[10px] border px-3 py-3 text-sm text-[#6c615e]">
Busque uma pessoa…
</div>
<div class="mt-3 flex gap-2 overflow-hidden">
<span class="chip shrink-0">Tipo⌄</span
><span class="chip active shrink-0">Lideranças · Nome da liderança ×</span>
</div>
<div class="mt-5 rounded-xl border bg-white p-3 shadow-lg">
<p class="px-2 py-1 text-[10px] font-black tracking-wide text-[#6c615e]">
LIDERANÇAS · EM PEÇAS PUBLICADAS
</p>
<div class="rounded-lg bg-[#f4f4f5] px-3 py-3 text-sm font-medium">
Nome da liderança
</div>
<div class="px-3 py-3 text-sm">Dep. Estadual Exemplo</div>
</div>
<article class="catalog-card mt-5">
<div
class="grid aspect-video place-items-center bg-stone-200 text-[10px] font-black text-stone-500"
>
NEEDS ASSET · PREVIEW REAL
</div>
<div class="p-4">
<span
class="rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
>Vídeo</span
>
<h4 class="mt-2 text-lg font-extrabold">Título da peça publicada</h4>
<p class="mt-1 text-xs text-[#6c615e]">Nome da liderança</p>
<button class="btn mt-4 w-full bg-[#ffe607] text-black">Compartilhar</button>
</div>
</article>
</div>
</div>
</section>
</main>
</body>

2
docs/plans/central-conteudos-liderancas.md
View file

@ -51,7 +51,7 @@ A campanha já tem a Central de Conteúdos interna (C211), onde a assessoria cat
- **Vou apresentar dados?** Não — a faceta é uma lista de nomes; sem contagem, sem ranking, sem placar de aparições.
- **Decisões desbloqueadas:** a comunicação decide quem aparece em cada peça; o eleitor decide qual peça procurar pelo nome de quem aparece nela.
- **Forma:** *adiada ao plano de implementação* — restrição de produto: só nomes de exibição (sem número, sem contagem por pessoa, sem métrica de aparições).
- **Forma:** _adiada ao plano de implementação_ — restrição de produto: só nomes de exibição (sem número, sem contagem por pessoa, sem métrica de aparições).
## Dados da decisão (literais)

392
docs/plans/central-conteudos-link-instagram-ui-design.html
View file

@ -1,44 +1,388 @@
<!doctype html>
<html lang="pt-BR" data-theme="campaign">
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<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 — C215 · Link do Instagram</title>
<style type="text/tailwindcss">
@theme{--font-sans:Inter,Arial,sans-serif;--color-background:#fff;--color-foreground:#1c1917;--color-primary:#c51414;--color-muted:#f4f4f5;--color-muted-foreground:#6b7280;--color-border:rgb(28 25 23/.12)}
*{box-sizing:border-box}.board{background:#ecebea;background-image:radial-gradient(#d5d1cd .7px,transparent .7px);background-size:18px 18px}.frame{box-shadow:0 20px 55px rgb(28 25 23/.12)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}.scene:after{content:'';height:1px;flex:1;background:#cbc7c2}
.field{min-height:44px;border:1px solid #d6d3d1;border-radius:6px;background:white;padding:10px 12px;font-size:14px}.label{font-size:13px;font-weight:600}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:600}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border-radius:6px;padding:9px 14px;font-size:14px;font-weight:600}.primary{background:#c51414;color:white}.outline{border:1px solid #d6d3d1;background:white}.shell{display:grid;grid-template-columns:220px 1fr}.side{background:#fafaf9;border-right:1px solid rgb(28 25 23/.12)}
@theme {
--font-sans: Inter, Arial, sans-serif;
--color-background: #fff;
--color-foreground: #1c1917;
--color-primary: #c51414;
--color-muted: #f4f4f5;
--color-muted-foreground: #6b7280;
--color-border: rgb(28 25 23/0.12);
}
* {
box-sizing: border-box;
}
.board {
background: #ecebea;
background-image: radial-gradient(#d5d1cd 0.7px, transparent 0.7px);
background-size: 18px 18px;
}
.frame {
box-shadow: 0 20px 55px rgb(28 25 23/0.12);
}
.desktop {
width: 1280px;
}
.phone {
width: 390px;
border-radius: 28px;
}
.scene:after {
content: '';
height: 1px;
flex: 1;
background: #cbc7c2;
}
.field {
min-height: 44px;
border: 1px solid #d6d3d1;
border-radius: 6px;
background: white;
padding: 10px 12px;
font-size: 14px;
}
.label {
font-size: 13px;
font-weight: 600;
}
.badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 3px 8px;
font-size: 12px;
font-weight: 600;
}
.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 6px;
padding: 9px 14px;
font-size: 14px;
font-weight: 600;
}
.primary {
background: #c51414;
color: white;
}
.outline {
border: 1px solid #d6d3d1;
background: white;
}
.shell {
display: grid;
grid-template-columns: 220px 1fr;
}
.side {
background: #fafaf9;
border-right: 1px solid rgb(28 25 23/0.12);
}
</style>
</head>
<body class="board min-h-screen text-[#1c1917] antialiased">
<main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
<header class="max-w-3xl"><span class="rounded-full bg-[#c51414] px-3 py-1 text-xs font-bold text-white">C215 · ficha existente</span><h1 class="mt-4 text-4xl font-bold tracking-tight">O link nunca degrada em silêncio.</h1><p class="mt-2 text-sm leading-6 text-[#6b7280]">A ficha conta o que está acontecendo, o que foi extraído e por que uma peça ficou apenas como link.</p></header>
<header class="max-w-3xl">
<span class="rounded-full bg-[#c51414] px-3 py-1 text-xs font-bold text-white"
>C215 · ficha existente</span
>
<h1 class="mt-4 text-4xl font-bold tracking-tight">O link nunca degrada em silêncio.</h1>
<p class="mt-2 text-sm leading-6 text-[#6b7280]">
A ficha conta o que está acontecendo, o que foi extraído e por que uma peça ficou apenas
como link.
</p>
</header>
<section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]"><span>CENA 01</span><h2>Desktop 1280 · processando → extraída e catalogada</h2></div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<div class="shell min-h-[710px]"><aside class="side p-5"><div class="h-7 w-32 rounded bg-[#c51414]"></div><nav class="mt-8 space-y-2 text-sm"><div class="rounded-md bg-[#f5f5f4] px-3 py-2 font-semibold">Comunicação</div><div class="px-3 py-2 text-[#6b7280]">Central de Conteúdos</div></nav></aside>
<div class="p-8"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><div class="mt-2 flex items-start justify-between"><div><h2 class="text-xl font-semibold">Peça adicionada pelo Instagram</h2><div class="mt-2 flex gap-2"><span class="badge bg-amber-100 text-amber-900">Processando</span><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span></div></div><button class="btn outline">Publicar</button></div>
<div class="mt-7 grid grid-cols-[300px_1fr] gap-8"><aside><div class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-center text-xs font-semibold text-[#6b7280]">Buscando a mídia<br/>no perfil oficial…</div><dl class="mt-4 space-y-2 text-xs"><div class="flex justify-between"><dt class="text-[#6b7280]">Origem</dt><dd>Instagram</dd></div><div class="flex justify-between gap-3"><dt class="text-[#6b7280]">Link</dt><dd class="truncate text-[#c51414]">instagram.com/…/reel/ABC/</dd></div></dl><div class="mt-5 rounded-lg bg-[#f4f4f5] p-3"><div class="h-2 overflow-hidden rounded-full bg-white"><div class="h-full w-1/2 rounded-full bg-[#c51414]"></div></div><p class="mt-2 text-xs text-[#6b7280]">Procurando a publicação no perfil oficial…</p></div></aside>
<div><div class="rounded-xl border p-5"><p class="text-sm font-semibold">Processamento da peça</p><ol class="mt-4 grid grid-cols-3 gap-3 text-xs"><li class="rounded-lg border border-green-200 bg-green-50 p-3"><b>1. Link recebido</b><p class="mt-1 text-green-800">Concluído</p></li><li class="rounded-lg border border-amber-200 bg-amber-50 p-3"><b>2. Mídia oficial</b><p class="mt-1 text-amber-900">Em andamento</p></li><li class="rounded-lg border bg-[#f4f4f5] p-3 text-[#6b7280]"><b>3. Catalogação</b><p class="mt-1">Aguardando</p></li></ol></div><div class="mt-6 grid grid-cols-2 gap-4"><div><p class="label">Título</p><div class="field mt-1 text-[#9a9692]">Disponível após a catalogação</div></div><div><p class="label">Tipo</p><div class="field mt-1 text-[#9a9692]">—</div></div><div class="col-span-2"><p class="label">Transcrição / texto</p><div class="mt-1 h-36 rounded-md border bg-[#fafafa]"></div></div></div></div>
</div>
<div class="mt-8 border-t pt-8"><div class="flex items-center gap-3"><span class="badge bg-green-100 text-green-800">Pronto</span><b class="text-sm">Estado final — mídia extraída</b></div><div class="mt-4 grid grid-cols-[300px_1fr] gap-8"><div><div class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-[11px] font-bold text-stone-500">NEEDS ASSET · PREVIEW REAL</div><button class="btn outline mt-3 w-full">↓ Baixar arquivo</button></div><div class="rounded-xl border border-green-200 bg-green-50 p-5"><h3 class="font-semibold text-green-900">Arquivo e transcrição prontos</h3><p class="mt-1 text-sm leading-6 text-green-900/80">A mídia oficial foi baixada e a ficha foi catalogada. Revise os campos antes de publicar.</p><div class="mt-4 rounded-md border border-green-200 bg-white p-3 text-sm">“Transcrição gerada aparece aqui para revisão editorial.”</div><button class="btn primary mt-4">Salvar alterações</button></div></div></div>
</div></div>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
<span>CENA 01</span>
<h2>Desktop 1280 · processando → extraída e catalogada</h2>
</div>
</section>
<section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]"><span>CENA 02</span><h2>Peça-link · motivo honesto e caminho para anexar o original</h2></div>
<div class="desktop frame mx-auto rounded-xl bg-white p-8"><div class="flex items-start justify-between"><div><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-xl font-semibold">Peça adicionada pelo Instagram</h2><div class="mt-2 flex gap-2"><span class="badge bg-green-100 text-green-800">Pronto</span><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span></div></div><button class="btn outline">Publicar</button></div>
<div class="mt-7 grid grid-cols-[300px_1fr] gap-8"><aside><div class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs font-semibold text-[#6b7280]">Peça-link</div><div class="mt-5 rounded-lg border border-amber-200 bg-amber-50 p-4"><p class="text-xs font-semibold text-amber-950">A peça continua disponível pelo link</p><p class="mt-1 text-xs leading-5 text-amber-900">A mídia não foi baixada. Você pode revisar a ficha ou anexar o arquivo original.</p><button class="btn outline mt-3 w-full">⌕ Anexar arquivo original</button></div></aside>
<div><h3 class="text-sm font-semibold">Motivo da peça-link</h3><p class="mt-1 text-xs text-[#6b7280]">A ficha mostra um destes quatro motivos, sem código de erro nem jargão técnico.</p><div class="mt-4 grid grid-cols-2 gap-3 text-sm"><div class="rounded-lg border p-4"><span class="badge bg-amber-100 text-amber-900">Motivo</span><p class="mt-2 font-medium">Link não encontrado entre as mídias recentes do perfil</p></div><div class="rounded-lg border p-4"><span class="badge bg-amber-100 text-amber-900">Motivo</span><p class="mt-2 font-medium">Carrossel: sem arquivo único para baixar</p></div><div class="rounded-lg border p-4"><span class="badge bg-amber-100 text-amber-900">Motivo</span><p class="mt-2 font-medium">Instagram indisponível no momento</p></div><div class="rounded-lg border p-4"><span class="badge bg-amber-100 text-amber-900">Motivo</span><p class="mt-2 font-medium">Sem credencial do Instagram configurada</p></div></div><div class="mt-5 rounded-lg bg-[#f4f4f5] p-4 text-xs leading-5 text-[#6b7280]">Mídia de terceiro nunca é baixada. Esta peça não foi apagada e continua circulando pelo link.</div></div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<div class="shell min-h-[710px]">
<aside class="side p-5">
<div class="h-7 w-32 rounded bg-[#c51414]"></div>
<nav class="mt-8 space-y-2 text-sm">
<div class="rounded-md bg-[#f5f5f4] px-3 py-2 font-semibold">Comunicação</div>
<div class="px-3 py-2 text-[#6b7280]">Central de Conteúdos</div>
</nav>
</aside>
<div class="p-8">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<div class="mt-2 flex items-start justify-between">
<div>
<h2 class="text-xl font-semibold">Peça adicionada pelo Instagram</h2>
<div class="mt-2 flex gap-2">
<span class="badge bg-amber-100 text-amber-900">Processando</span
><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
</div>
</div>
<button class="btn outline">Publicar</button>
</div>
<div class="mt-7 grid grid-cols-[300px_1fr] gap-8">
<aside>
<div
class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-center text-xs font-semibold text-[#6b7280]"
>
Buscando a mídia<br />no perfil oficial…
</div>
<dl class="mt-4 space-y-2 text-xs">
<div class="flex justify-between">
<dt class="text-[#6b7280]">Origem</dt>
<dd>Instagram</dd>
</div>
<div class="flex justify-between gap-3">
<dt class="text-[#6b7280]">Link</dt>
<dd class="truncate text-[#c51414]">instagram.com/…/reel/ABC/</dd>
</div>
</dl>
<div class="mt-5 rounded-lg bg-[#f4f4f5] p-3">
<div class="h-2 overflow-hidden rounded-full bg-white">
<div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
</div>
<p class="mt-2 text-xs text-[#6b7280]">
Procurando a publicação no perfil oficial…
</p>
</div>
</aside>
<div>
<div class="rounded-xl border p-5">
<p class="text-sm font-semibold">Processamento da peça</p>
<ol class="mt-4 grid grid-cols-3 gap-3 text-xs">
<li class="rounded-lg border border-green-200 bg-green-50 p-3">
<b>1. Link recebido</b>
<p class="mt-1 text-green-800">Concluído</p>
</li>
<li class="rounded-lg border border-amber-200 bg-amber-50 p-3">
<b>2. Mídia oficial</b>
<p class="mt-1 text-amber-900">Em andamento</p>
</li>
<li class="rounded-lg border bg-[#f4f4f5] p-3 text-[#6b7280]">
<b>3. Catalogação</b>
<p class="mt-1">Aguardando</p>
</li>
</ol>
</div>
<div class="mt-6 grid grid-cols-2 gap-4">
<div>
<p class="label">Título</p>
<div class="field mt-1 text-[#9a9692]">Disponível após a catalogação</div>
</div>
<div>
<p class="label">Tipo</p>
<div class="field mt-1 text-[#9a9692]">—</div>
</div>
<div class="col-span-2">
<p class="label">Transcrição / texto</p>
<div class="mt-1 h-36 rounded-md border bg-[#fafafa]"></div>
</div>
</div>
</div>
</div>
<div class="mt-8 border-t pt-8">
<div class="flex items-center gap-3">
<span class="badge bg-green-100 text-green-800">Pronto</span
><b class="text-sm">Estado final — mídia extraída</b>
</div>
<div class="mt-4 grid grid-cols-[300px_1fr] gap-8">
<div>
<div
class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-[11px] font-bold text-stone-500"
>
NEEDS ASSET · PREVIEW REAL
</div>
<button class="btn outline mt-3 w-full">↓ Baixar arquivo</button>
</div>
<div class="rounded-xl border border-green-200 bg-green-50 p-5">
<h3 class="font-semibold text-green-900">Arquivo e transcrição prontos</h3>
<p class="mt-1 text-sm leading-6 text-green-900/80">
A mídia oficial foi baixada e a ficha foi catalogada. Revise os campos antes
de publicar.
</p>
<div class="mt-4 rounded-md border border-green-200 bg-white p-3 text-sm">
“Transcrição gerada aparece aqui para revisão editorial.”
</div>
<button class="btn primary mt-4">Salvar alterações</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]"><span>CENA 03</span><h2>Mobile 390 · estados essenciais na ficha e lista compacta</h2></div>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
<span>CENA 02</span>
<h2>Peça-link · motivo honesto e caminho para anexar o original</h2>
</div>
<div class="desktop frame mx-auto rounded-xl bg-white p-8">
<div class="flex items-start justify-between">
<div>
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<h2 class="mt-2 text-xl font-semibold">Peça adicionada pelo Instagram</h2>
<div class="mt-2 flex gap-2">
<span class="badge bg-green-100 text-green-800">Pronto</span
><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
</div>
</div>
<button class="btn outline">Publicar</button>
</div>
<div class="mt-7 grid grid-cols-[300px_1fr] gap-8">
<aside>
<div
class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs font-semibold text-[#6b7280]"
>
Peça-link
</div>
<div class="mt-5 rounded-lg border border-amber-200 bg-amber-50 p-4">
<p class="text-xs font-semibold text-amber-950">
A peça continua disponível pelo link
</p>
<p class="mt-1 text-xs leading-5 text-amber-900">
A mídia não foi baixada. Você pode revisar a ficha ou anexar o arquivo original.
</p>
<button class="btn outline mt-3 w-full">⌕ Anexar arquivo original</button>
</div>
</aside>
<div>
<h3 class="text-sm font-semibold">Motivo da peça-link</h3>
<p class="mt-1 text-xs text-[#6b7280]">
A ficha mostra um destes quatro motivos, sem código de erro nem jargão técnico.
</p>
<div class="mt-4 grid grid-cols-2 gap-3 text-sm">
<div class="rounded-lg border p-4">
<span class="badge bg-amber-100 text-amber-900">Motivo</span>
<p class="mt-2 font-medium">
Link não encontrado entre as mídias recentes do perfil
</p>
</div>
<div class="rounded-lg border p-4">
<span class="badge bg-amber-100 text-amber-900">Motivo</span>
<p class="mt-2 font-medium">Carrossel: sem arquivo único para baixar</p>
</div>
<div class="rounded-lg border p-4">
<span class="badge bg-amber-100 text-amber-900">Motivo</span>
<p class="mt-2 font-medium">Instagram indisponível no momento</p>
</div>
<div class="rounded-lg border p-4">
<span class="badge bg-amber-100 text-amber-900">Motivo</span>
<p class="mt-2 font-medium">Sem credencial do Instagram configurada</p>
</div>
</div>
<div class="mt-5 rounded-lg bg-[#f4f4f5] p-4 text-xs leading-5 text-[#6b7280]">
Mídia de terceiro nunca é baixada. Esta peça não foi apagada e continua circulando
pelo link.
</div>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
<span>CENA 03</span>
<h2>Mobile 390 · estados essenciais na ficha e lista compacta</h2>
</div>
<div class="flex flex-wrap justify-center gap-8">
<div class="phone frame min-h-[780px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Central de Conteúdos</b><span>☰</span></header><div class="p-4"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2><div class="mt-2 flex gap-2"><span class="badge bg-amber-100 text-amber-900">Processando</span><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span></div><div class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]">Buscando mídia oficial…</div><div class="mt-4 rounded-lg bg-[#f4f4f5] p-3"><div class="h-2 rounded-full bg-white"><div class="h-full w-1/2 rounded-full bg-[#c51414]"></div></div><p class="mt-2 text-xs text-[#6b7280]">Procurando a publicação no perfil oficial…</p></div><div class="mt-5 space-y-3"><div class="h-11 rounded-md border"></div><div class="h-24 rounded-md border"></div></div></div></div>
<div class="phone frame min-h-[780px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Central de Conteúdos</b><span>☰</span></header><div class="p-4"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2><div class="mt-2 flex gap-2"><span class="badge bg-green-100 text-green-800">Pronto</span><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span></div><div class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]">Peça-link</div><div class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-4"><p class="text-xs font-semibold text-amber-950">Por que o arquivo não foi baixado</p><p class="mt-2 text-sm font-medium text-amber-950">Carrossel: sem arquivo único para baixar</p><p class="mt-2 text-xs leading-5 text-amber-900">A peça continua disponível pelo link.</p><button class="btn outline mt-4 w-full">⌕ Anexar arquivo original</button></div><button class="btn primary mt-6 w-full">Salvar alterações</button></div></div>
<div class="phone frame min-h-[560px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Conteúdos</b><span>☰</span></header><div class="space-y-3 p-4"><article class="rounded-xl border p-4"><div class="flex justify-between gap-3"><b class="text-sm">Peça adicionada pelo Instagram</b><span class="badge shrink-0 bg-amber-100 text-amber-900">Processando</span></div><p class="mt-2 text-xs text-[#6b7280]">Instagram · Preparando a peça…</p><div class="mt-3 h-2 rounded-full bg-[#f4f4f5]"><div class="h-full w-1/2 rounded-full bg-[#c51414]"></div></div><button class="btn outline mt-3 w-full">Abrir</button></article><article class="rounded-xl border p-4"><div class="flex justify-between gap-3"><b class="text-sm">Peça adicionada pelo Instagram</b><span class="badge shrink-0 bg-green-100 text-green-800">Pronto</span></div><p class="mt-2 text-xs text-[#6b7280]">Instagram · Peça-link</p><button class="btn outline mt-3 w-full">Abrir</button></article><p class="px-2 text-center text-[11px] leading-4 text-[#6b7280]">Recomendação: a lista continua limpa; o motivo completo vive na ficha.</p></div></div>
<div class="phone frame min-h-[780px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between border-b px-4">
<b>Central de Conteúdos</b><span>☰</span>
</header>
<div class="p-4">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2>
<div class="mt-2 flex gap-2">
<span class="badge bg-amber-100 text-amber-900">Processando</span
><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
</div>
<div
class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]"
>
Buscando mídia oficial…
</div>
<div class="mt-4 rounded-lg bg-[#f4f4f5] p-3">
<div class="h-2 rounded-full bg-white">
<div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
</div>
<p class="mt-2 text-xs text-[#6b7280]">
Procurando a publicação no perfil oficial…
</p>
</div>
<div class="mt-5 space-y-3">
<div class="h-11 rounded-md border"></div>
<div class="h-24 rounded-md border"></div>
</div>
</div>
</div>
<div class="phone frame min-h-[780px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between border-b px-4">
<b>Central de Conteúdos</b><span>☰</span>
</header>
<div class="p-4">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2>
<div class="mt-2 flex gap-2">
<span class="badge bg-green-100 text-green-800">Pronto</span
><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
</div>
<div
class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]"
>
Peça-link
</div>
<div class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-4">
<p class="text-xs font-semibold text-amber-950">
Por que o arquivo não foi baixado
</p>
<p class="mt-2 text-sm font-medium text-amber-950">
Carrossel: sem arquivo único para baixar
</p>
<p class="mt-2 text-xs leading-5 text-amber-900">
A peça continua disponível pelo link.
</p>
<button class="btn outline mt-4 w-full">⌕ Anexar arquivo original</button>
</div>
<button class="btn primary mt-6 w-full">Salvar alterações</button>
</div>
</div>
<div class="phone frame min-h-[560px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between border-b px-4">
<b>Conteúdos</b><span>☰</span>
</header>
<div class="space-y-3 p-4">
<article class="rounded-xl border p-4">
<div class="flex justify-between gap-3">
<b class="text-sm">Peça adicionada pelo Instagram</b
><span class="badge shrink-0 bg-amber-100 text-amber-900">Processando</span>
</div>
<p class="mt-2 text-xs text-[#6b7280]">Instagram · Preparando a peça…</p>
<div class="mt-3 h-2 rounded-full bg-[#f4f4f5]">
<div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
</div>
<button class="btn outline mt-3 w-full">Abrir</button>
</article>
<article class="rounded-xl border p-4">
<div class="flex justify-between gap-3">
<b class="text-sm">Peça adicionada pelo Instagram</b
><span class="badge shrink-0 bg-green-100 text-green-800">Pronto</span>
</div>
<p class="mt-2 text-xs text-[#6b7280]">Instagram · Peça-link</p>
<button class="btn outline mt-3 w-full">Abrir</button>
</article>
<p class="px-2 text-center text-[11px] leading-4 text-[#6b7280]">
Recomendação: a lista continua limpa; o motivo completo vive na ficha.
</p>
</div>
</div>
</div>
</section>
</main>

559
docs/plans/central-conteudos-secao-home-ui-design.html
View file

@ -6,82 +6,553 @@
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — S36 · Central local na home</title>
<style type="text/tailwindcss">
@theme { --font-sans: Arimo, Arial, sans-serif; }
:root { --red:#a21c1c;--dark:#47130e;--yellow:#ffe607;--cream:#fff8f2;--band:#ebe9e9;--surface:#f9faff;--muted:#6c615e;--line:rgb(0 0 0/.12);--display:'Exo 2','Arial Black',sans-serif; }
*{box-sizing:border-box}.display{font-family:var(--display)}
.board{background:#dedbd8;background-image:radial-gradient(rgb(24 78 146/.09) .7px,transparent .7px);background-size:18px 18px}
.frame{box-shadow:0 22px 60px rgb(39 25 22/.13)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}.scene:after{content:'';height:1px;flex:1;background:#c6c1bd}
.preview{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgb(71 19 14/.07)}
.asset{position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#e6e2df,#f7f5f3);color:#77706c;text-align:center;font-size:10px;font-weight:800;letter-spacing:.04em}
.tag{display:inline-flex;align-items:center;border-radius:999px;background:#eef4fb;padding:4px 8px;color:#184e92;font-size:11px;font-weight:800}.local{background:#fff3c4;color:#6b5100}
.cta{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:8px;border-radius:10px;background:#ffe607;padding:10px 18px;color:#171000;font-family:var(--display);font-size:14px;font-weight:900;box-shadow:0 4px 0 #cfb900}
.secondary{display:inline-flex;min-height:36px;align-items:center;gap:6px;border-radius:8px;padding:6px 8px;color:#a21c1c;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.surround{border-bottom:1px solid var(--line);padding:26px 40px;text-align:center}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#a21c1c}
.skeleton{background:linear-gradient(100deg,#eee 20%,#ddd 38%,#eee 56%);background-size:220% 100%}
@theme {
--font-sans: Arimo, Arial, sans-serif;
}
:root {
--red: #a21c1c;
--dark: #47130e;
--yellow: #ffe607;
--cream: #fff8f2;
--band: #ebe9e9;
--surface: #f9faff;
--muted: #6c615e;
--line: rgb(0 0 0/0.12);
--display: 'Exo 2', 'Arial Black', sans-serif;
}
* {
box-sizing: border-box;
}
.display {
font-family: var(--display);
}
.board {
background: #dedbd8;
background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
background-size: 18px 18px;
}
.frame {
box-shadow: 0 22px 60px rgb(39 25 22/0.13);
}
.desktop {
width: 1280px;
}
.phone {
width: 390px;
border-radius: 28px;
}
.scene:after {
content: '';
height: 1px;
flex: 1;
background: #c6c1bd;
}
.preview {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgb(71 19 14/0.07);
}
.asset {
position: relative;
display: grid;
place-items: center;
background: linear-gradient(135deg, #e6e2df, #f7f5f3);
color: #77706c;
text-align: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
}
.tag {
display: inline-flex;
align-items: center;
border-radius: 999px;
background: #eef4fb;
padding: 4px 8px;
color: #184e92;
font-size: 11px;
font-weight: 800;
}
.local {
background: #fff3c4;
color: #6b5100;
}
.cta {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 10px;
background: #ffe607;
padding: 10px 18px;
color: #171000;
font-family: var(--display);
font-size: 14px;
font-weight: 900;
box-shadow: 0 4px 0 #cfb900;
}
.secondary {
display: inline-flex;
min-height: 36px;
align-items: center;
gap: 6px;
border-radius: 8px;
padding: 6px 8px;
color: #a21c1c;
font-size: 12px;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 4px;
}
.surround {
border-bottom: 1px solid var(--line);
padding: 26px 40px;
text-align: center;
}
.eyebrow {
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #a21c1c;
}
.skeleton {
background: linear-gradient(100deg, #eee 20%, #ddd 38%, #eee 56%);
background-size: 220% 100%;
}
</style>
</head>
<body class="board min-h-screen text-black antialiased">
<main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
<header class="max-w-3xl">
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white">S36 · revisão do gate</span>
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
>S36 · revisão do gate</span
>
<h1 class="display mt-4 text-4xl font-black">A peça do lugar da pessoa vem primeiro.</h1>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">Até três peças: município → região → recentes. Sem localização, a seção simplesmente mostra recentes — sem erro, prompt surpresa ou espera eterna.</p>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
Até três peças: município → região → recentes. Sem localização, a seção simplesmente
mostra recentes — sem erro, prompt surpresa ou espera eterna.
</p>
</header>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 01</span><h2>Localizada · desktop 1280 · município, região e complemento recente</h2></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 01</span>
<h2>Localizada · desktop 1280 · município, região e complemento recente</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<div class="surround bg-[#fff8f2]"><p class="eyebrow">Faça parte</p><h3 class="display mt-1 text-2xl font-black">Mostre que você está com Solla</h3><div class="mx-auto mt-4 grid max-w-3xl grid-cols-6 gap-3"><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div></div><p class="mt-3 text-[11px] font-bold text-[#6c615e]">SEÇÃO EXISTENTE · CARDS PERSONALIZÁVEIS</p></div>
<section class="relative overflow-hidden border-b border-black/10 bg-white px-10 py-16"><div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div><div class="absolute -bottom-28 -left-24 size-64 rounded-full bg-[#e4102f]/8"></div><div class="relative mx-auto max-w-[1080px]">
<div class="mx-auto max-w-2xl text-center"><p class="eyebrow">Central de Conteúdos</p><h2 class="display mt-2 text-4xl font-black tracking-tight">Peça voto pra Solla 1313</h2><p class="mx-auto mt-3 max-w-xl text-base leading-6 text-[#6c615e]">Comece pelo material do seu território e mande para quem você conhece.</p><div class="mt-3 flex items-center justify-center gap-2"><span class="tag local">⌖ Para seu município</span><span class="text-[11px] text-[#6c615e]">Localização usada só nesta visita</span></div></div>
<div class="mt-9 grid grid-cols-3 gap-6">
<article class="preview"><div class="asset aspect-video">NEEDS ASSET · FOTO REAL</div><div class="p-4"><div class="flex flex-wrap gap-1"><span class="tag">Foto</span><span class="tag local">Do seu município</span></div><h3 class="mt-2 font-extrabold">Título da peça local</h3><p class="mt-1 text-xs text-[#6c615e]">Seu município · Tema</p><a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]">Ver esta peça →</a></div></article>
<article class="preview"><div class="asset relative aspect-video"><span>NEEDS ASSET · POSTER REAL</span><span class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow">▶</span><span class="absolute right-3 bottom-3 rounded bg-black/70 px-2 py-1 text-[10px] text-white">Tocar para carregar</span></div><div class="p-4"><div class="flex flex-wrap gap-1"><span class="tag">Vídeo</span><span class="tag local">Da sua região</span></div><h3 class="mt-2 font-extrabold">Título da peça regional</h3><p class="mt-1 text-xs text-[#6c615e]">Sua região · sem autoplay</p><a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]">Ver esta peça →</a></div></article>
<article class="preview"><div class="asset relative aspect-video"><span>NEEDS ASSET · CAPA REAL</span><span class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow">▶</span></div><div class="p-4"><div class="flex flex-wrap gap-1"><span class="tag">Áudio</span><span class="tag">Mais recente</span></div><h3 class="mt-2 font-extrabold">Mensagem recente para compartilhar</h3><p class="mt-1 text-xs text-[#6c615e]">Completa a seleção local</p><a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]">Ver esta peça →</a></div></article>
<div class="surround bg-[#fff8f2]">
<p class="eyebrow">Faça parte</p>
<h3 class="display mt-1 text-2xl font-black">Mostre que você está com Solla</h3>
<div class="mx-auto mt-4 grid max-w-3xl grid-cols-6 gap-3">
<div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
<div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
<div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
<div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
<div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
<div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
</div>
<div class="mt-9 text-center"><a class="cta" href="/conteudos">Ver todas as peças →</a><p class="mt-3 text-xs text-[#6c615e]">Nenhum card personalizável entra nesta amostra.</p></div>
</div></section>
<div class="surround bg-[#ebe9e9]"><p class="eyebrow">Apoie e acompanhe</p><h3 class="display mt-1 text-2xl font-black">Receba as novidades da campanha</h3><div class="mx-auto mt-5 h-20 max-w-2xl rounded-xl border bg-white"></div></div>
<p class="mt-3 text-[11px] font-bold text-[#6c615e]">
SEÇÃO EXISTENTE · CARDS PERSONALIZÁVEIS
</p>
</div>
<section class="relative overflow-hidden border-b border-black/10 bg-white px-10 py-16">
<div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div>
<div class="absolute -bottom-28 -left-24 size-64 rounded-full bg-[#e4102f]/8"></div>
<div class="relative mx-auto max-w-[1080px]">
<div class="mx-auto max-w-2xl text-center">
<p class="eyebrow">Central de Conteúdos</p>
<h2 class="display mt-2 text-4xl font-black tracking-tight">
Peça voto pra Solla 1313
</h2>
<p class="mx-auto mt-3 max-w-xl text-base leading-6 text-[#6c615e]">
Comece pelo material do seu território e mande para quem você conhece.
</p>
<div class="mt-3 flex items-center justify-center gap-2">
<span class="tag local">⌖ Para seu município</span
><span class="text-[11px] text-[#6c615e]">Localização usada só nesta visita</span>
</div>
</div>
<div class="mt-9 grid grid-cols-3 gap-6">
<article class="preview">
<div class="asset aspect-video">NEEDS ASSET · FOTO REAL</div>
<div class="p-4">
<div class="flex flex-wrap gap-1">
<span class="tag">Foto</span><span class="tag local">Do seu município</span>
</div>
<h3 class="mt-2 font-extrabold">Título da peça local</h3>
<p class="mt-1 text-xs text-[#6c615e]">Seu município · Tema</p>
<a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]"
>Ver esta peça →</a
>
</div>
</article>
<article class="preview">
<div class="asset relative aspect-video">
<span>NEEDS ASSET · POSTER REAL</span
><span
class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow"
>▶</span
><span
class="absolute right-3 bottom-3 rounded bg-black/70 px-2 py-1 text-[10px] text-white"
>Tocar para carregar</span
>
</div>
<div class="p-4">
<div class="flex flex-wrap gap-1">
<span class="tag">Vídeo</span><span class="tag local">Da sua região</span>
</div>
<h3 class="mt-2 font-extrabold">Título da peça regional</h3>
<p class="mt-1 text-xs text-[#6c615e]">Sua região · sem autoplay</p>
<a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]"
>Ver esta peça →</a
>
</div>
</article>
<article class="preview">
<div class="asset relative aspect-video">
<span>NEEDS ASSET · CAPA REAL</span
><span
class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow"
>▶</span
>
</div>
<div class="p-4">
<div class="flex flex-wrap gap-1">
<span class="tag">Áudio</span><span class="tag">Mais recente</span>
</div>
<h3 class="mt-2 font-extrabold">Mensagem recente para compartilhar</h3>
<p class="mt-1 text-xs text-[#6c615e]">Completa a seleção local</p>
<a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]"
>Ver esta peça →</a
>
</div>
</article>
</div>
<div class="mt-9 text-center">
<a class="cta" href="/conteudos">Ver todas as peças →</a>
<p class="mt-3 text-xs text-[#6c615e]">
Nenhum card personalizável entra nesta amostra.
</p>
</div>
</div>
</section>
<div class="surround bg-[#ebe9e9]">
<p class="eyebrow">Apoie e acompanhe</p>
<h3 class="display mt-1 text-2xl font-black">Receba as novidades da campanha</h3>
<div class="mx-auto mt-5 h-20 max-w-2xl rounded-xl border bg-white"></div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 02</span><h2>Localizada · mobile 390 · recorte discreto, sem pedir GPS ao carregar</h2></div>
<div class="phone frame mx-auto overflow-hidden bg-white"><div class="border-b bg-[#fff8f2] px-5 py-7 text-center"><p class="eyebrow text-[10px]">Faça parte</p><h3 class="display mt-1 text-xl font-black">Mostre que você está com Solla</h3><div class="mt-4 grid grid-cols-3 gap-2"><div class="h-16 rounded bg-[#ebe9e9]"></div><div class="h-16 rounded bg-[#ebe9e9]"></div><div class="h-16 rounded bg-[#ebe9e9]"></div></div></div>
<section class="relative overflow-hidden border-b px-5 py-10"><div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div><div class="relative text-center"><p class="eyebrow text-[10px]">Central de Conteúdos</p><h2 class="display mt-2 text-[30px] font-black leading-[1.05]">Peça voto pra<br/>Solla 1313</h2><p class="mt-3 text-sm leading-5 text-[#6c615e]">Material do seu território para compartilhar.</p><span class="tag local mt-3">⌖ Para seu município</span></div>
<div class="relative mt-6 space-y-4"><article class="preview grid grid-cols-[124px_1fr]"><div class="asset min-h-36">NEEDS ASSET<br/>FOTO REAL</div><div class="p-4 text-left"><span class="tag local">Do seu município</span><h3 class="mt-2 text-sm font-extrabold">Título da peça local</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article><article class="preview grid grid-cols-[124px_1fr]"><div class="asset relative min-h-36"><span>NEEDS ASSET<br/>POSTER REAL</span><span class="absolute grid size-10 place-items-center rounded-full bg-[#ffe607] text-black">▶</span></div><div class="p-4 text-left"><span class="tag local">Da sua região</span><h3 class="mt-2 text-sm font-extrabold">Título da peça regional</h3><p class="mt-1 text-[11px] text-[#6c615e]">Só carrega no toque</p><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article><article class="preview grid grid-cols-[124px_1fr]"><div class="asset min-h-36">NEEDS ASSET<br/>CAPA REAL</div><div class="p-4 text-left"><span class="tag">Mais recente</span><h3 class="mt-2 text-sm font-extrabold">Mensagem recente</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article></div>
<a class="cta relative mt-7 w-full" href="/conteudos">Ver todas as peças →</a><p class="relative mt-3 text-center text-[11px] leading-4 text-[#6c615e]">A localização não é guardada. Cards personalizáveis ficam na seção anterior.</p>
</section><div class="bg-[#ebe9e9] px-5 py-8 text-center"><p class="eyebrow text-[10px]">Apoie e acompanhe</p><h3 class="display mt-1 text-xl font-black">Receba as novidades</h3><div class="mt-4 h-20 rounded-xl border bg-white"></div></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 02</span>
<h2>Localizada · mobile 390 · recorte discreto, sem pedir GPS ao carregar</h2>
</div>
<div class="phone frame mx-auto overflow-hidden bg-white">
<div class="border-b bg-[#fff8f2] px-5 py-7 text-center">
<p class="eyebrow text-[10px]">Faça parte</p>
<h3 class="display mt-1 text-xl font-black">Mostre que você está com Solla</h3>
<div class="mt-4 grid grid-cols-3 gap-2">
<div class="h-16 rounded bg-[#ebe9e9]"></div>
<div class="h-16 rounded bg-[#ebe9e9]"></div>
<div class="h-16 rounded bg-[#ebe9e9]"></div>
</div>
</div>
<section class="relative overflow-hidden border-b px-5 py-10">
<div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div>
<div class="relative text-center">
<p class="eyebrow text-[10px]">Central de Conteúdos</p>
<h2 class="display mt-2 text-[30px] font-black leading-[1.05]">
Peça voto pra<br />Solla 1313
</h2>
<p class="mt-3 text-sm leading-5 text-[#6c615e]">
Material do seu território para compartilhar.
</p>
<span class="tag local mt-3">⌖ Para seu município</span>
</div>
<div class="relative mt-6 space-y-4">
<article class="preview grid grid-cols-[124px_1fr]">
<div class="asset min-h-36">NEEDS ASSET<br />FOTO REAL</div>
<div class="p-4 text-left">
<span class="tag local">Do seu município</span>
<h3 class="mt-2 text-sm font-extrabold">Título da peça local</h3>
<a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
</div>
</article>
<article class="preview grid grid-cols-[124px_1fr]">
<div class="asset relative min-h-36">
<span>NEEDS ASSET<br />POSTER REAL</span
><span
class="absolute grid size-10 place-items-center rounded-full bg-[#ffe607] text-black"
>▶</span
>
</div>
<div class="p-4 text-left">
<span class="tag local">Da sua região</span>
<h3 class="mt-2 text-sm font-extrabold">Título da peça regional</h3>
<p class="mt-1 text-[11px] text-[#6c615e]">Só carrega no toque</p>
<a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
</div>
</article>
<article class="preview grid grid-cols-[124px_1fr]">
<div class="asset min-h-36">NEEDS ASSET<br />CAPA REAL</div>
<div class="p-4 text-left">
<span class="tag">Mais recente</span>
<h3 class="mt-2 text-sm font-extrabold">Mensagem recente</h3>
<a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
</div>
</article>
</div>
<a class="cta relative mt-7 w-full" href="/conteudos">Ver todas as peças →</a>
<p class="relative mt-3 text-center text-[11px] leading-4 text-[#6c615e]">
A localização não é guardada. Cards personalizáveis ficam na seção anterior.
</p>
</section>
<div class="bg-[#ebe9e9] px-5 py-8 text-center">
<p class="eyebrow text-[10px]">Apoie e acompanhe</p>
<h3 class="display mt-1 text-xl font-black">Receba as novidades</h3>
<div class="mt-4 h-20 rounded-xl border bg-white"></div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 03</span><h2>Sem localização ou fora da Bahia · recentes, sem erro e sem insistência</h2></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 03</span>
<h2>Sem localização ou fora da Bahia · recentes, sem erro e sem insistência</h2>
</div>
<div class="grid gap-8 lg:grid-cols-[1fr_390px]">
<div class="frame overflow-hidden rounded-xl bg-white"><section class="relative overflow-hidden px-10 py-12"><div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div><div class="relative"><div class="mx-auto max-w-2xl text-center"><p class="eyebrow">Central de Conteúdos</p><h2 class="display mt-2 text-4xl font-black">Peça voto pra Solla 1313</h2><p class="mt-3 text-base text-[#6c615e]">Veja as peças mais recentes e escolha uma para compartilhar.</p><span class="tag mt-3">Seleção recente</span></div><div class="mt-8 grid grid-cols-3 gap-5"><article class="preview"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Peça recente</h3></div></article><article class="preview"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Vídeo</span><h3 class="mt-2 font-extrabold">Outra peça recente</h3></div></article><article class="preview"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Áudio</span><h3 class="mt-2 font-extrabold">Mensagem recente</h3></div></article></div><div class="mt-8 text-center"><a class="cta" href="/conteudos">Ver todas as peças →</a><div><button class="secondary mt-2">⌖ Usar minha localização</button></div><p class="text-[11px] text-[#6c615e]">Opcional e secundário. A seção já funciona sem isso.</p></div></div></section></div>
<div class="phone frame overflow-hidden bg-white"><section class="relative overflow-hidden px-5 py-10 text-center"><div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div><div class="relative"><p class="eyebrow text-[10px]">Central de Conteúdos</p><h2 class="display mt-2 text-[30px] font-black leading-[1.05]">Peça voto pra<br/>Solla 1313</h2><p class="mt-3 text-sm leading-5 text-[#6c615e]">Veja as peças mais recentes.</p><span class="tag mt-3">Seleção recente</span><article class="preview mt-6 text-left"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Título da peça recente</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article><a class="cta mt-6 w-full" href="/conteudos">Ver todas as peças →</a><button class="secondary mt-3">⌖ Usar minha localização</button><p class="text-[11px] leading-4 text-[#6c615e]">Opcional. Sem prompt no carregamento.</p></div></section></div>
<div class="frame overflow-hidden rounded-xl bg-white">
<section class="relative overflow-hidden px-10 py-12">
<div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div>
<div class="relative">
<div class="mx-auto max-w-2xl text-center">
<p class="eyebrow">Central de Conteúdos</p>
<h2 class="display mt-2 text-4xl font-black">Peça voto pra Solla 1313</h2>
<p class="mt-3 text-base text-[#6c615e]">
Veja as peças mais recentes e escolha uma para compartilhar.
</p>
<span class="tag mt-3">Seleção recente</span>
</div>
<div class="mt-8 grid grid-cols-3 gap-5">
<article class="preview">
<div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
<div class="p-4">
<span class="tag">Foto</span>
<h3 class="mt-2 font-extrabold">Peça recente</h3>
</div>
</article>
<article class="preview">
<div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
<div class="p-4">
<span class="tag">Vídeo</span>
<h3 class="mt-2 font-extrabold">Outra peça recente</h3>
</div>
</article>
<article class="preview">
<div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
<div class="p-4">
<span class="tag">Áudio</span>
<h3 class="mt-2 font-extrabold">Mensagem recente</h3>
</div>
</article>
</div>
<div class="mt-8 text-center">
<a class="cta" href="/conteudos">Ver todas as peças →</a>
<div><button class="secondary mt-2">⌖ Usar minha localização</button></div>
<p class="text-[11px] text-[#6c615e]">
Opcional e secundário. A seção já funciona sem isso.
</p>
</div>
</div>
</section>
</div>
<div class="phone frame overflow-hidden bg-white">
<section class="relative overflow-hidden px-5 py-10 text-center">
<div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div>
<div class="relative">
<p class="eyebrow text-[10px]">Central de Conteúdos</p>
<h2 class="display mt-2 text-[30px] font-black leading-[1.05]">
Peça voto pra<br />Solla 1313
</h2>
<p class="mt-3 text-sm leading-5 text-[#6c615e]">Veja as peças mais recentes.</p>
<span class="tag mt-3">Seleção recente</span>
<article class="preview mt-6 text-left">
<div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
<div class="p-4">
<span class="tag">Foto</span>
<h3 class="mt-2 font-extrabold">Título da peça recente</h3>
<a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
</div>
</article>
<a class="cta mt-6 w-full" href="/conteudos">Ver todas as peças →</a
><button class="secondary mt-3">⌖ Usar minha localização</button>
<p class="text-[11px] leading-4 text-[#6c615e]">
Opcional. Sem prompt no carregamento.
</p>
</div>
</section>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 04</span><h2>Resolução da localização · transitória, não bloqueia e termina em recentes</h2></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 04</span>
<h2>Resolução da localização · transitória, não bloqueia e termina em recentes</h2>
</div>
<div class="grid gap-6 lg:grid-cols-3">
<article class="frame rounded-xl bg-white p-6"><span class="rounded-full bg-[#fff3c4] px-2 py-1 text-[10px] font-black text-[#6b5100]">INSTANTE INICIAL</span><h3 class="display mt-3 text-xl font-black">Peça voto pra Solla 1313</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">A home já está utilizável. Só esta amostra define a melhor seleção.</p><div class="mt-5 grid grid-cols-3 gap-2"><div class="skeleton aspect-video rounded-lg"></div><div class="skeleton aspect-video rounded-lg"></div><div class="skeleton aspect-video rounded-lg"></div></div><p class="mt-4 text-xs font-bold text-[#6c615e]">Sem modal, sem overlay e sem prompt automático.</p></article>
<article class="frame rounded-xl bg-white p-6"><span class="rounded-full bg-green-100 px-2 py-1 text-[10px] font-black text-green-800">LOCALIZAÇÃO ACESSÍVEL</span><h3 class="display mt-3 text-xl font-black">Seleção do seu território</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">GPS já acessível; senão, recorte aproximado por IP. A interface entrega o mesmo resultado: município → região → recentes.</p><div class="mt-5 flex gap-2"><span class="tag local">Do seu município</span><span class="tag local">Da sua região</span></div><p class="mt-5 text-xs text-[#6c615e]">Nada é guardado, registrado ou usado fora desta seção.</p></article>
<article class="frame rounded-xl bg-white p-6"><span class="rounded-full bg-[#eef4fb] px-2 py-1 text-[10px] font-black text-[#184e92]">SEM SINAL ÚTIL</span><h3 class="display mt-3 text-xl font-black">Seleção recente</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">A espera termina e as peças recentes aparecem. Nenhum erro é mostrado.</p><div class="mt-5 h-24 rounded-lg border bg-[#f9faff] p-3 text-xs text-[#6c615e]">Preview recente disponível</div><p class="mt-4 text-xs font-bold text-[#184e92]">Nunca há spinner eterno.</p></article>
<article class="frame rounded-xl bg-white p-6">
<span class="rounded-full bg-[#fff3c4] px-2 py-1 text-[10px] font-black text-[#6b5100]"
>INSTANTE INICIAL</span
>
<h3 class="display mt-3 text-xl font-black">Peça voto pra Solla 1313</h3>
<p class="mt-2 text-sm leading-5 text-[#6c615e]">
A home já está utilizável. Só esta amostra define a melhor seleção.
</p>
<div class="mt-5 grid grid-cols-3 gap-2">
<div class="skeleton aspect-video rounded-lg"></div>
<div class="skeleton aspect-video rounded-lg"></div>
<div class="skeleton aspect-video rounded-lg"></div>
</div>
<p class="mt-4 text-xs font-bold text-[#6c615e]">
Sem modal, sem overlay e sem prompt automático.
</p>
</article>
<article class="frame rounded-xl bg-white p-6">
<span class="rounded-full bg-green-100 px-2 py-1 text-[10px] font-black text-green-800"
>LOCALIZAÇÃO ACESSÍVEL</span
>
<h3 class="display mt-3 text-xl font-black">Seleção do seu território</h3>
<p class="mt-2 text-sm leading-5 text-[#6c615e]">
GPS já acessível; senão, recorte aproximado por IP. A interface entrega o mesmo
resultado: município → região → recentes.
</p>
<div class="mt-5 flex gap-2">
<span class="tag local">Do seu município</span
><span class="tag local">Da sua região</span>
</div>
<p class="mt-5 text-xs text-[#6c615e]">
Nada é guardado, registrado ou usado fora desta seção.
</p>
</article>
<article class="frame rounded-xl bg-white p-6">
<span class="rounded-full bg-[#eef4fb] px-2 py-1 text-[10px] font-black text-[#184e92]"
>SEM SINAL ÚTIL</span
>
<h3 class="display mt-3 text-xl font-black">Seleção recente</h3>
<p class="mt-2 text-sm leading-5 text-[#6c615e]">
A espera termina e as peças recentes aparecem. Nenhum erro é mostrado.
</p>
<div class="mt-5 h-24 rounded-lg border bg-[#f9faff] p-3 text-xs text-[#6c615e]">
Preview recente disponível
</div>
<p class="mt-4 text-xs font-bold text-[#184e92]">Nunca há spinner eterno.</p>
</article>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 05</span><h2>Uma peça publicada · sem lacunas, independentemente da localização</h2></div>
<div class="grid gap-8 lg:grid-cols-[1fr_390px]"><div class="frame overflow-hidden rounded-xl bg-white"><section class="relative overflow-hidden px-10 py-12"><div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div><div class="relative grid grid-cols-[1fr_360px] items-center gap-10"><div><p class="eyebrow">Central de Conteúdos</p><h2 class="display mt-2 text-4xl font-black">Peça voto pra Solla 1313</h2><p class="mt-3 max-w-lg text-base leading-6 text-[#6c615e]">Uma peça oficial já está pronta para você compartilhar.</p><a class="cta mt-6" href="/conteudos">Ver todas as peças →</a></div><article class="preview"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Título da única peça publicada</h3><a class="mt-3 inline-block text-xs font-bold text-[#a21c1c]">Ver esta peça →</a></div></article></div></section></div>
<div class="phone frame overflow-hidden bg-white"><section class="relative overflow-hidden px-5 py-10 text-center"><div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div><div class="relative"><p class="eyebrow text-[10px]">Central de Conteúdos</p><h2 class="display mt-2 text-[30px] font-black leading-[1.05]">Peça voto pra<br/>Solla 1313</h2><p class="mt-3 text-sm leading-5 text-[#6c615e]">Uma peça oficial já está pronta.</p><article class="preview mt-6 text-left"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Título da única peça publicada</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article><a class="cta mt-6 w-full" href="/conteudos">Ver todas as peças →</a></div></section></div></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 05</span>
<h2>Uma peça publicada · sem lacunas, independentemente da localização</h2>
</div>
<div class="grid gap-8 lg:grid-cols-[1fr_390px]">
<div class="frame overflow-hidden rounded-xl bg-white">
<section class="relative overflow-hidden px-10 py-12">
<div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div>
<div class="relative grid grid-cols-[1fr_360px] items-center gap-10">
<div>
<p class="eyebrow">Central de Conteúdos</p>
<h2 class="display mt-2 text-4xl font-black">Peça voto pra Solla 1313</h2>
<p class="mt-3 max-w-lg text-base leading-6 text-[#6c615e]">
Uma peça oficial já está pronta para você compartilhar.
</p>
<a class="cta mt-6" href="/conteudos">Ver todas as peças →</a>
</div>
<article class="preview">
<div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
<div class="p-4">
<span class="tag">Foto</span>
<h3 class="mt-2 font-extrabold">Título da única peça publicada</h3>
<a class="mt-3 inline-block text-xs font-bold text-[#a21c1c]"
>Ver esta peça →</a
>
</div>
</article>
</div>
</section>
</div>
<div class="phone frame overflow-hidden bg-white">
<section class="relative overflow-hidden px-5 py-10 text-center">
<div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div>
<div class="relative">
<p class="eyebrow text-[10px]">Central de Conteúdos</p>
<h2 class="display mt-2 text-[30px] font-black leading-[1.05]">
Peça voto pra<br />Solla 1313
</h2>
<p class="mt-3 text-sm leading-5 text-[#6c615e]">
Uma peça oficial já está pronta.
</p>
<article class="preview mt-6 text-left">
<div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
<div class="p-4">
<span class="tag">Foto</span>
<h3 class="mt-2 font-extrabold">Título da única peça publicada</h3>
<a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
</div>
</article>
<a class="cta mt-6 w-full" href="/conteudos">Ver todas as peças →</a>
</div>
</section>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 06</span><h2>Zero peças · seção inteira ausente (fail-closed)</h2></div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white"><div class="surround bg-[#fff8f2]"><p class="eyebrow">Faça parte</p><h3 class="display mt-1 text-2xl font-black">Mostre que você está com Solla</h3><div class="mx-auto mt-5 h-20 max-w-3xl rounded-xl bg-[#ebe9e9]"></div></div><div class="flex h-16 items-center justify-center border-b border-dashed bg-white text-xs font-bold text-[#6c615e]">A SEÇÃO DA CENTRAL NÃO É RENDERIZADA · SEM LOCALIZAÇÃO, VAZIO OU CTA</div><div class="surround bg-[#ebe9e9]"><p class="eyebrow">Apoie e acompanhe</p><h3 class="display mt-1 text-2xl font-black">Receba as novidades da campanha</h3><div class="mx-auto mt-5 h-20 max-w-2xl rounded-xl border bg-white"></div></div></div>
<div class="phone frame mx-auto mt-8 overflow-hidden bg-white"><div class="border-b bg-[#fff8f2] px-5 py-7 text-center"><p class="eyebrow text-[10px]">Faça parte</p><h3 class="display mt-1 text-xl font-black">Mostre que você está com Solla</h3><div class="mt-4 h-16 rounded bg-[#ebe9e9]"></div></div><div class="flex h-14 items-center justify-center border-b border-dashed text-[10px] font-bold text-[#6c615e]">CENTRAL AUSENTE</div><div class="bg-[#ebe9e9] px-5 py-8 text-center"><p class="eyebrow text-[10px]">Apoie e acompanhe</p><h3 class="display mt-1 text-xl font-black">Receba as novidades</h3><div class="mt-4 h-20 rounded-xl border bg-white"></div></div></div>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 06</span>
<h2>Zero peças · seção inteira ausente (fail-closed)</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<div class="surround bg-[#fff8f2]">
<p class="eyebrow">Faça parte</p>
<h3 class="display mt-1 text-2xl font-black">Mostre que você está com Solla</h3>
<div class="mx-auto mt-5 h-20 max-w-3xl rounded-xl bg-[#ebe9e9]"></div>
</div>
<div
class="flex h-16 items-center justify-center border-b border-dashed bg-white text-xs font-bold text-[#6c615e]"
>
A SEÇÃO DA CENTRAL NÃO É RENDERIZADA · SEM LOCALIZAÇÃO, VAZIO OU CTA
</div>
<div class="surround bg-[#ebe9e9]">
<p class="eyebrow">Apoie e acompanhe</p>
<h3 class="display mt-1 text-2xl font-black">Receba as novidades da campanha</h3>
<div class="mx-auto mt-5 h-20 max-w-2xl rounded-xl border bg-white"></div>
</div>
</div>
<div class="phone frame mx-auto mt-8 overflow-hidden bg-white">
<div class="border-b bg-[#fff8f2] px-5 py-7 text-center">
<p class="eyebrow text-[10px]">Faça parte</p>
<h3 class="display mt-1 text-xl font-black">Mostre que você está com Solla</h3>
<div class="mt-4 h-16 rounded bg-[#ebe9e9]"></div>
</div>
<div
class="flex h-14 items-center justify-center border-b border-dashed text-[10px] font-bold text-[#6c615e]"
>
CENTRAL AUSENTE
</div>
<div class="bg-[#ebe9e9] px-5 py-8 text-center">
<p class="eyebrow text-[10px]">Apoie e acompanhe</p>
<h3 class="display mt-1 text-xl font-black">Receba as novidades</h3>
<div class="mt-4 h-20 rounded-xl border bg-white"></div>
</div>
</div>
</section>
</main>
</body>