teqo-backup/docs/plans/central-conteudos-publica-ui-design.html
Francisco Solla dda55adc27 feat(S27): Central de Conteúdos pública — Peça voto pra Solla 1313
/conteudos + /conteudos/<slug>: catálogo filtrável (Tipo · Cidade · Região ·
Tema · Instituição + termo na URL canônica), play sob demanda (Vídeo/Áudio só
carregam no toque; Foto com preview leve), Baixar e Compartilhar do próprio
card com a mensagem de voto por tipo (wa.me sem destinatário, editável; "A
mídia" usa a folha nativa e cai em download onde o aparelho não suportar) e o
card personalizado como peça sintética do catálogo → /cards.

- leitura pública nova (contentPieceReads) cacheada na tag contentPieces com o
  gate where status=publicado + contentPieceIsPublic; a rota GET
  /conteudos/<slug>/midia reusa buildPrivateMediaResponse (range, disposition,
  private no-store, 404 uniforme) com download jorge-solla-1313-<slug>.<ext> e
  a allowlist inline do dono estendida (webp/gif/avif + áudios das peças)
- contrato público puro do catálogo (filtros/VM/download) + mensagens de voto
  (contentPieceShare); OG com fallback do global; conteudos entra nos slugs
  reservados; kill switch por peça vale na hora (lista, página, rodapé/selo);
  descoberta condicional no CampaignFooter e no header local
- UI portada classe-a-classe do design aprovado (cenas 01–08, com as cenas
  06–08 estendidas no trigger a); sem migration, sem Consent e sem access novo;
  contentMedia segue privada (sem segunda cópia de mídia)
- testes: 2 unit specs novos, 18 casos int (leitura pública + rota de mídia) e
  e2e frontendConteudos (5 casos); manifest e curado atualizados
- follow-up de engenharia: #1276 (docs/plans/escala-dry-pos-s27.md)

Closes #1255
2026-09-23 11:13:57 -03:00

816 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="pt-BR" data-theme="campaign-site">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — S27 · Peça voto pra Solla 1313</title>
<style type="text/tailwindcss">
@theme {
--font-sans: Arimo, Arial, sans-serif;
--color-kit-red: #e4102f;
--color-kit-blue: #184e92;
--color-kit-yellow: #ffeb00;
}
:root {
--red: #a21c1c;
--dark: #47130e;
--yellow: #ffe607;
--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/9%) 0.7px, transparent 0.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;
}
.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: 10px;
padding: 9px 13px;
font-size: 13px;
font-weight: 800;
}
.primary {
background: var(--yellow);
color: #171000;
box-shadow: 0 4px 0 #cfb900;
}
.outline {
border: 1.5px solid rgb(162 28 28/28%);
background: white;
color: var(--red);
}
.field {
min-height: 46px;
width: 100%;
border: 1px solid rgb(0 0 0/18%);
border-radius: 10px;
background: white;
padding: 10px 13px;
font-size: 15px;
}
.chip {
display: inline-flex;
min-height: 38px;
align-items: center;
border: 1px solid var(--line);
border-radius: 999px;
background: white;
padding: 7px 12px;
font-size: 12px;
font-weight: 700;
}
.card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 14px;
background: white;
box-shadow: 0 8px 24px rgb(71 19 14/7%);
}
.asset {
display: grid;
place-items: center;
background: linear-gradient(135deg, #e5e2df, #f7f5f3);
color: var(--muted);
text-align: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
}
.tag {
display: inline-flex;
border-radius: 999px;
background: #eef4fb;
padding: 4px 8px;
color: #184e92;
font-size: 11px;
font-weight: 800;
}
.scene:after {
content: '';
height: 1px;
flex: 1;
background: #cfc9c5;
}
.skeleton {
background: linear-gradient(100deg, #eee 20%, #ddd 38%, #eee 56%);
background-size: 220% 100%;
animation: shine 1.6s infinite;
}
@keyframes shine {
to {
background-position: -220% 0;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body class="board min-h-screen text-black antialiased">
<main class="mx-auto max-w-[1480px] space-y-16 px-4 py-12 md:px-8">
<header class="max-w-3xl">
<span class="rounded-full bg-kit-red px-3 py-1 text-xs font-bold text-white"
>S27 · revisão do gate</span
>
<h1 class="display mt-4 text-4xl font-black">Peça voto. Faça o 1313 chegar mais longe.</h1>
<p class="mt-2 max-w-2xl text-sm leading-6 text-[#6c615e]">
Mobile-first, direto no catálogo: ver, ouvir, baixar e compartilhar uma peça oficial sem
abrir outra página.
</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 · catálogo mais limpo, com ação no card</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">
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
class="h-9"
alt="Jorge Solla"
/><span class="text-sm font-bold text-white">Central de Conteúdos</span>
</header>
<div class="bg-[linear-gradient(120deg,#e4102f,#b60825_60%,#184e92)] text-white">
<div class="mx-auto flex max-w-6xl items-center justify-between px-10 py-12">
<div>
<p class="text-sm font-bold text-[#ffeb00]">PEÇA VOTO PRA SOLLA 1313</p>
<h3 class="display mt-2 max-w-2xl text-4xl font-black leading-tight">
Uma mensagem sua pode conquistar mais um voto.
</h3>
<p class="mt-3 max-w-xl text-base text-white/85">
Escolha uma peça, mande para alguém que você conhece e peça o voto no 1313.
</p>
</div>
<img
src="../../public/campaign-kit/numero-negativo.png"
class="h-24"
alt="1313 Deputado Federal"
/>
</div>
</div>
<div class="mx-auto max-w-6xl px-10 py-10">
<div class="grid grid-cols-[1fr_auto] gap-3">
<input
class="field"
placeholder="Encontre uma peça por assunto, cidade ou tema…"
/><button class="btn primary px-6">Escolher uma peça e pedir voto</button>
</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 class="mt-9 flex items-end justify-between">
<div>
<h3 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h3>
<p class="mt-1 text-sm text-[#6c615e]">
O play só carrega a mídia quando você pedir.
</p>
</div>
<span class="text-sm text-[#6c615e]">Abra o título para ver detalhes</span>
</div>
<div class="mt-5 grid grid-cols-3 gap-6">
<article class="card">
<div class="asset relative aspect-video">
<span>NEEDS ASSET · POSTER REAL</span
><button
class="absolute grid size-14 place-items-center rounded-full bg-[#ffe607] text-xl shadow-lg"
aria-label="Reproduzir vídeo"
>
▶</button
><span
class="absolute right-3 bottom-3 rounded bg-black/70 px-2 py-1 text-xs text-white"
>02:14</span
>
</div>
<div class="p-4">
<span class="tag">Vídeo</span>
<h4 class="mt-2 text-base font-extrabold">Fim da escala 6×1 é saúde</h4>
<p class="mt-1 text-xs text-[#6c615e]">Trabalho · Salvador</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="btn outline">Baixar</button
><button class="btn outline">Compartilhar</button>
</div>
</div>
</article>
<article class="card">
<div class="asset relative aspect-video">
<span>NEEDS ASSET · CAPA REAL DO ÁUDIO</span
><button
class="absolute grid size-14 place-items-center rounded-full bg-[#ffe607] text-xl shadow-lg"
aria-label="Reproduzir áudio"
>
▶</button
><span
class="absolute right-3 bottom-3 rounded bg-black/70 px-2 py-1 text-xs text-white"
>00:46</span
>
</div>
<div class="p-4">
<span class="tag">Áudio</span>
<h4 class="mt-2 text-base font-extrabold">Mensagem para mandar no grupo</h4>
<p class="mt-1 text-xs text-[#6c615e]">Campanha</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="btn outline">Baixar</button
><button class="btn outline">Compartilhar</button>
</div>
</div>
</article>
<article class="card border-[#184e92]/25 bg-[#fff8f2]">
<div
class="asset aspect-video bg-[linear-gradient(135deg,#e4102f,#184e92)] text-white"
>
<div>
<img
src="../../public/campaign-kit/numero-negativo.png"
class="mx-auto h-16"
alt="1313 Deputado Federal"
/>
<p class="mt-2">SEU NOME + SUA FOTO</p>
</div>
</div>
<div class="p-4">
<span class="tag">Card personalizado</span>
<h4 class="mt-2 text-base font-extrabold">Faça seu card com Solla 1313</h4>
<p class="mt-1 text-xs text-[#6c615e]">Criado no seu aparelho.</p>
<a class="btn outline mt-4 w-full" href="#">Fazer meu card</a>
</div>
</article>
</div>
<div class="mt-6 grid grid-cols-2 gap-6">
<article class="card flex items-center gap-4 p-3">
<div class="asset h-24 w-32 shrink-0 rounded-lg">NEEDS ASSET · FOTO REAL</div>
<div class="min-w-0 flex-1">
<span class="tag">Foto</span>
<h4 class="mt-2 text-sm font-extrabold">Solla em defesa do SUS</h4>
<div class="mt-3 flex gap-2">
<button class="btn outline min-h-9">Baixar</button
><button class="btn outline min-h-9">Compartilhar</button>
</div>
</div>
</article>
<article class="card flex items-center gap-4 p-3">
<div class="asset h-24 w-32 shrink-0 rounded-lg bg-[#fff8f2] px-3">
“Saúde é direito.”
</div>
<div class="min-w-0 flex-1">
<span class="tag">Texto</span>
<h4 class="mt-2 text-sm font-extrabold">Por que defender o SUS</h4>
<div class="mt-3 flex gap-2">
<button class="btn outline min-h-9">Baixar</button
><button class="btn outline min-h-9">Compartilhar</button>
</div>
</div>
</article>
</div>
</div>
<footer class="bg-[#180a09] px-10 py-5 text-xs leading-5 text-white/65">
Jorge José Santos Pereira Solla · Candidato a Deputado Federal · Nº 1313 · Federação
Brasil da Esperança (PT/PCdoB/PV) · CNPJ: 68.430.467/0001-05 · Propaganda eleitoral
gratuita · Eleições 2026 · 1º turno: 04/10/2026.
</footer>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENAS 02–03</span>
<h2>Mobile 390 · antes e depois do play sob demanda</h2>
</div>
<div class="flex flex-wrap justify-center gap-8">
<div class="phone frame min-h-[860px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4">
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
class="h-7"
alt="Jorge Solla"
/><span class="text-white">☰</span>
</header>
<div class="bg-[linear-gradient(145deg,#e4102f,#184e92)] px-5 py-7 text-white">
<p class="text-xs font-bold text-[#ffeb00]">PEÇA VOTO PRA SOLLA 1313</p>
<h3 class="display mt-1 text-3xl font-black leading-tight">
Mande uma peça.<br />Peça mais um voto.
</h3>
<p class="mt-3 text-sm leading-5 text-white/85">
Escolha alguém, compartilhe e peça o voto no 1313.
</p>
</div>
<div class="p-4">
<input class="field" placeholder="Busque um assunto…" />
<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>
<article class="card mt-5">
<div class="asset relative aspect-video">
<span>NEEDS ASSET · POSTER REAL</span
><button
class="absolute grid size-16 place-items-center rounded-full bg-[#ffe607] text-2xl shadow-lg"
>
▶</button
><span
class="absolute right-3 bottom-3 rounded bg-black/70 px-2 py-1 text-xs text-white"
>02:14</span
>
</div>
<div class="p-4">
<span class="tag">Vídeo · ainda não carregado</span>
<h4 class="mt-2 text-lg font-extrabold">Fim da escala 6×1 é saúde</h4>
<p class="mt-1 text-xs text-[#6c615e]">
Toque no play para carregar só este vídeo.
</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="btn outline">Baixar</button
><button class="btn primary">Compartilhar</button>
</div>
<a class="mt-3 block text-center text-xs font-bold text-[#a21c1c]"
>Ver detalhes da peça →</a
>
</div>
</article>
</div>
</div>
<div class="phone frame min-h-[860px] overflow-hidden bg-white">
<header class="flex h-14 items-center gap-3 bg-[#ae1603] px-4 text-white">
<span>←</span><b>Central de Conteúdos</b>
</header>
<div class="p-4">
<p class="text-xs font-bold text-[#6c615e]">DEPOIS DO PLAY</p>
<article class="card mt-3">
<div class="relative aspect-video bg-black">
<div class="asset absolute inset-0 bg-stone-800 text-white">
NEEDS ASSET · VÍDEO EM REPRODUÇÃO
</div>
<button
class="absolute inset-0 m-auto grid size-14 place-items-center rounded-full bg-white/90 text-xl"
>
Ⅱ
</button>
<div class="absolute inset-x-3 bottom-3">
<div class="h-1.5 overflow-hidden rounded-full bg-white/35">
<div class="h-full w-[38%] bg-[#ffeb00]"></div>
</div>
<div class="mt-1 flex justify-between text-[10px] text-white">
<span>00:49</span><span>02:14</span>
</div>
</div>
</div>
<div class="p-4">
<h4 class="text-lg font-extrabold">Fim da escala 6×1 é saúde</h4>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="btn outline">Baixar</button
><button class="btn outline">Compartilhar</button>
</div>
</div>
</article>
<div class="mt-5 rounded-t-2xl border p-4 shadow-[0_-12px_35px_rgb(0_0_0/12%)]">
<div class="mx-auto h-1 w-10 rounded-full bg-stone-300"></div>
<h4 class="display mt-4 text-lg font-black">Peça esse voto no WhatsApp</h4>
<p class="mt-1 text-xs text-[#6c615e]">A mensagem é sua: revise antes de abrir.</p>
<textarea class="field mt-3 min-h-32 leading-5">
Estamos na reta final e o Jorge Solla 1313 precisa do seu voto. Olha esse vídeo: Fim da escala 6×1 é saúde — &lt;link&gt;. Peça voto pra Solla 1313 pra quem você conhece.</textarea
><button class="btn primary mt-3 w-full">Abrir no WhatsApp</button>
<div class="mt-3 grid grid-cols-2 gap-2">
<button class="btn outline">A mídia</button
><button class="btn outline">Copiar link</button>
</div>
<p class="mt-3 text-center text-[11px] leading-4 text-[#6c615e]">
Sem destinatário e sem envio automático. Se o aparelho não compartilhar o arquivo,
ele será baixado.
</p>
</div>
</div>
</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>Página individual · detalhes e link bonito, sem repetir o catálogo inteiro</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">
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
class="h-9"
alt="Jorge Solla"
/><a class="text-sm font-bold text-white">Voltar à Central</a>
</header>
<div class="mx-auto grid max-w-5xl grid-cols-[1.2fr_.8fr] gap-10 px-10 py-12">
<div class="asset aspect-video rounded-2xl">NEEDS ASSET · PREVIEW REAL DA PEÇA</div>
<div>
<span class="tag">Vídeo</span>
<h3 class="display mt-3 text-3xl font-black">Fim da escala 6×1 é saúde</h3>
<p class="mt-3 text-sm leading-6 text-[#6c615e]">
Jorge Solla explica por que reduzir a jornada protege a saúde de quem trabalha.
</p>
<dl class="mt-5 space-y-2 border-y py-4 text-sm">
<div class="flex justify-between">
<dt class="text-[#6c615e]">Tema</dt>
<dd>Trabalho e saúde</dd>
</div>
<div class="flex justify-between">
<dt class="text-[#6c615e]">Local</dt>
<dd>Salvador</dd>
</div>
<div class="flex justify-between">
<dt class="text-[#6c615e]">Duração</dt>
<dd>02:14</dd>
</div>
</dl>
<div class="mt-5 grid grid-cols-2 gap-2">
<button class="btn outline">Baixar</button
><button class="btn primary">Compartilhar</button>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 05</span>
<h2>Estados críticos preservados · vazio, indisponível e carregando</h2>
</div>
<div class="grid gap-6 lg:grid-cols-3">
<article class="frame rounded-xl bg-white p-8 text-center">
<h3 class="display text-xl font-black">As primeiras peças estão a caminho</h3>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
Enquanto isso, faça seu card e peça voto pra Solla 1313.
</p>
<a class="btn primary mt-5" href="#">Fazer meu card</a>
<p class="mt-5 text-xs text-[#6c615e]">Vazio · 1280/390</p>
</article>
<article class="frame rounded-xl bg-white p-8 text-center">
<h3 class="display text-xl font-black">Esta peça não está disponível</h3>
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
Ela pode ter sido retirada. Encontre outro material oficial e continue pedindo voto.
</p>
<a class="btn primary mt-5" href="#">Ver outras peças</a>
<p class="mt-5 text-xs text-[#6c615e]">Link despublicado · 1280/390</p>
</article>
<article class="frame rounded-xl bg-white p-5">
<div class="skeleton h-44 rounded-xl"></div>
<div class="skeleton mt-4 h-5 w-3/4 rounded"></div>
<div class="skeleton mt-3 h-4 w-full rounded"></div>
<div class="mt-4 grid grid-cols-2 gap-2">
<div class="skeleton h-11 rounded"></div>
<div class="skeleton h-11 rounded"></div>
</div>
<p class="mt-4 text-center text-xs text-[#6c615e]">Carregando · 1280/390</p>
</article>
</div>
</section>
<section id="scene-06-no-results">
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 06</span>
<h2>Filtros ativos sem resultado · desktop 1280 e mobile 390</h2>
</div>
<div class="space-y-8">
<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">
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
class="h-9"
alt="Jorge Solla"
/><span class="text-sm font-bold text-white">Central de Conteúdos</span>
</header>
<div class="mx-auto max-w-6xl px-10 py-10">
<div class="grid grid-cols-[1fr_auto] gap-3">
<div class="field flex items-center justify-between text-[#171000]">
<span>mobilidade em Juazeiro</span>
<span class="text-lg leading-none text-[#6c615e]" aria-hidden="true">×</span>
</div>
<button class="btn primary px-6">Buscar peças</button>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<span class="chip border-[#184e92]/35 bg-[#eef4fb] text-[#184e92]"
>Tipo · Vídeo <b class="ml-2 text-base leading-none">×</b></span
>
<span class="chip border-[#184e92]/35 bg-[#eef4fb] text-[#184e92]"
>Cidade · Juazeiro <b class="ml-2 text-base leading-none">×</b></span
>
<span class="chip">Região⌄</span><span class="chip">Tema⌄</span
><span class="chip">Instituição⌄</span>
</div>
<div
class="mt-9 rounded-2xl border border-[#184e92]/15 bg-[#f9faff] px-8 py-14 text-center"
>
<div
class="mx-auto grid size-12 place-items-center rounded-full border border-[#184e92]/20 bg-white text-xl text-[#184e92]"
aria-hidden="true"
>
⌕
</div>
<h3 class="display mt-4 text-2xl font-black">Nenhuma peça com esses filtros</h3>
<p class="mx-auto mt-2 max-w-md text-sm leading-6 text-[#6c615e]">
Tente outro termo ou limpe os filtros para ver todas as peças.
</p>
<div class="mt-4 flex flex-wrap justify-center gap-2 text-xs text-[#6c615e]">
<span class="rounded-full border border-black/10 bg-white px-3 py-1.5"
>Busca: “mobilidade em Juazeiro”</span
><span class="rounded-full border border-black/10 bg-white px-3 py-1.5"
>Vídeo</span
><span class="rounded-full border border-black/10 bg-white px-3 py-1.5"
>Juazeiro</span
>
</div>
<a class="btn primary mt-6 min-w-40" href="#">Limpar filtros</a>
</div>
</div>
</div>
<div class="phone frame mx-auto min-h-[760px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4">
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
class="h-7"
alt="Jorge Solla"
/><span class="text-white">☰</span>
</header>
<div class="bg-[linear-gradient(145deg,#e4102f,#184e92)] px-5 py-6 text-white">
<p class="text-xs font-bold text-[#ffeb00]">PEÇA VOTO PRA SOLLA 1313</p>
<h3 class="display mt-1 text-2xl font-black leading-tight">
Encontre a peça certa para pedir voto.
</h3>
</div>
<div class="p-4">
<div class="field flex items-center justify-between text-sm">
<span class="truncate">mobilidade em Juazeiro</span
><span class="ml-3 text-lg leading-none text-[#6c615e]">×</span>
</div>
<div class="mt-3 flex gap-2 overflow-hidden">
<span class="chip shrink-0 border-[#184e92]/35 bg-[#eef4fb] text-[#184e92]"
>Vídeo <b class="ml-2 text-base leading-none">×</b></span
><span class="chip shrink-0 border-[#184e92]/35 bg-[#eef4fb] text-[#184e92]"
>Juazeiro <b class="ml-2 text-base leading-none">×</b></span
><span class="chip shrink-0">Tema⌄</span>
</div>
<div
class="mt-5 rounded-2xl border border-[#184e92]/15 bg-[#f9faff] px-5 py-10 text-center"
>
<div
class="mx-auto grid size-11 place-items-center rounded-full border border-[#184e92]/20 bg-white text-lg text-[#184e92]"
aria-hidden="true"
>
⌕
</div>
<h3 class="display mt-4 text-xl font-black">Nenhuma peça com esses filtros</h3>
<p class="mt-2 text-sm leading-5 text-[#6c615e]">
Tente outro termo ou limpe os filtros para ver todas as peças.
</p>
<div class="mt-4 flex flex-wrap justify-center gap-1.5 text-[11px] text-[#6c615e]">
<span class="rounded-full border border-black/10 bg-white px-2.5 py-1"
>Busca: “mobilidade em Juazeiro”</span
><span class="rounded-full border border-black/10 bg-white px-2.5 py-1"
>Vídeo</span
><span class="rounded-full border border-black/10 bg-white px-2.5 py-1"
>Juazeiro</span
>
</div>
<a class="btn primary mt-6 w-full" href="#">Limpar filtros</a>
</div>
</div>
</div>
</div>
</section>
<section id="scene-07-link-piece">
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 07</span>
<h2>Peça-link sem arquivo · card no catálogo e página da peça</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">
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
class="h-9"
alt="Jorge Solla"
/><span class="text-sm font-bold text-white">Central de Conteúdos</span>
</header>
<div class="mx-auto max-w-6xl px-10 py-10">
<p class="text-xs font-bold text-[#6c615e]">NO CATÁLOGO</p>
<div class="mt-3 grid max-w-[746px] grid-cols-2 gap-6">
<article class="card">
<div
class="relative grid aspect-video place-items-center overflow-hidden bg-[linear-gradient(145deg,#fff4f5,#eef4fb)]"
>
<div
class="absolute -right-10 -bottom-16 size-48 rounded-full border-[28px] border-[#e4102f]/10"
></div>
<div class="relative text-center">
<p class="text-[10px] font-black tracking-[.18em] text-[#6c615e]">
PEÇA NO INSTAGRAM
</p>
<p class="display mt-2 text-2xl font-black text-[#e4102f]">Instagram</p>
<p class="mt-1 text-xs text-[#6c615e]">Conteúdo hospedado na plataforma</p>
</div>
</div>
<div class="p-4">
<span class="tag">Instagram</span>
<h4 class="mt-2 text-base font-extrabold">
Solla defende mais recursos para o SUS
</h4>
<p class="mt-1 text-xs text-[#6c615e]">Saúde · Bahia</p>
<button class="btn outline mt-4 w-full">Compartilhar</button>
</div>
</article>
<article class="card">
<div
class="relative grid aspect-video place-items-center overflow-hidden bg-[linear-gradient(145deg,#eef4fb,#fff8f2)]"
>
<div
class="absolute -left-10 -top-16 size-48 rounded-full border-[28px] border-[#184e92]/10"
></div>
<div class="relative text-center">
<p class="text-[10px] font-black tracking-[.18em] text-[#6c615e]">
PEÇA NO YOUTUBE
</p>
<p class="display mt-2 text-2xl font-black text-[#184e92]">YouTube</p>
<p class="mt-1 text-xs text-[#6c615e]">Conteúdo hospedado na plataforma</p>
</div>
</div>
<div class="p-4">
<span class="tag">YouTube</span>
<h4 class="mt-2 text-base font-extrabold">
Por que o voto no 1313 faz diferença
</h4>
<p class="mt-1 text-xs text-[#6c615e]">Campanha</p>
<button class="btn outline mt-4 w-full">Compartilhar</button>
</div>
</article>
</div>
<div class="mt-10 border-t border-black/10 pt-8">
<p class="text-xs font-bold text-[#6c615e]">NA PÁGINA DA PEÇA</p>
<div class="mt-3 grid grid-cols-[1.2fr_.8fr] gap-10">
<div
class="relative grid aspect-video place-items-center overflow-hidden rounded-2xl border border-[#184e92]/15 bg-[linear-gradient(145deg,#fff4f5,#eef4fb)]"
>
<div
class="absolute -right-16 -bottom-24 size-72 rounded-full border-[42px] border-[#e4102f]/10"
></div>
<div class="relative text-center">
<p class="text-xs font-black tracking-[.2em] text-[#6c615e]">
PEÇA NO INSTAGRAM
</p>
<p class="display mt-3 text-4xl font-black text-[#e4102f]">Instagram</p>
<p class="mt-2 text-sm text-[#6c615e]">
A mídia permanece na plataforma original.
</p>
</div>
</div>
<div>
<span class="tag">Instagram</span>
<h3 class="display mt-3 text-3xl font-black">
Solla defende mais recursos para o SUS
</h3>
<p class="mt-3 text-sm leading-6 text-[#6c615e]">
Compartilhe esta publicação e peça voto pra Solla 1313 a quem você conhece.
</p>
<dl class="mt-5 space-y-2 border-y py-4 text-sm">
<div class="flex justify-between">
<dt class="text-[#6c615e]">Tema</dt>
<dd>Saúde</dd>
</div>
<div class="flex justify-between">
<dt class="text-[#6c615e]">Local</dt>
<dd>Bahia</dd>
</div>
<div class="flex justify-between">
<dt class="text-[#6c615e]">Origem</dt>
<dd>Instagram</dd>
</div>
</dl>
<button class="btn primary mt-5 w-full">Compartilhar</button>
<p class="mt-3 text-center text-xs leading-5 text-[#6c615e]">
O compartilhamento usa o link da publicação no Instagram.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="scene-08-desktop-share-sheet">
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
<span>CENA 08</span>
<h2>Compartilhamento · desktop 1280, ancorado ao card</h2>
</div>
<div
class="desktop frame relative mx-auto min-h-[720px] overflow-hidden rounded-xl bg-white"
>
<header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
class="h-9"
alt="Jorge Solla"
/><span class="text-sm font-bold text-white">Central de Conteúdos</span>
</header>
<div class="mx-auto max-w-6xl px-10 py-10">
<div class="grid grid-cols-3 gap-6">
<article class="card">
<div class="asset relative aspect-video">
<span>NEEDS ASSET · POSTER REAL</span
><button
class="absolute grid size-14 place-items-center rounded-full bg-[#ffe607] text-xl shadow-lg"
aria-label="Reproduzir vídeo"
>
▶
</button>
</div>
<div class="p-4">
<span class="tag">Vídeo</span>
<h4 class="mt-2 text-base font-extrabold">Fim da escala 6×1 é saúde</h4>
<p class="mt-1 text-xs text-[#6c615e]">Trabalho · Salvador</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="btn outline">Baixar</button
><button class="btn primary">Compartilhar</button>
</div>
</div>
</article>
<article class="card opacity-45">
<div class="asset aspect-video">NEEDS ASSET · CAPA REAL DO ÁUDIO</div>
<div class="p-4">
<span class="tag">Áudio</span>
<h4 class="mt-2 text-base font-extrabold">Mensagem para mandar no grupo</h4>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="btn outline">Baixar</button
><button class="btn outline">Compartilhar</button>
</div>
</div>
</article>
</div>
</div>
<div class="absolute inset-0 top-16 bg-black/12"></div>
<aside
class="absolute top-[285px] left-[430px] w-[430px] rounded-2xl border border-black/12 bg-white p-5 shadow-[0_20px_55px_rgb(0_0_0/22%)]"
aria-label="Compartilhar peça"
>
<div
class="absolute top-[116px] -left-2 size-4 rotate-45 border-b border-l border-black/12 bg-white"
></div>
<div class="flex items-start justify-between gap-4">
<div>
<h4 class="display text-xl font-black">Peça esse voto no WhatsApp</h4>
<p class="mt-1 text-xs text-[#6c615e]">A mensagem é sua: revise antes de abrir.</p>
</div>
<button
class="grid size-8 shrink-0 place-items-center rounded-full border border-black/10 text-lg text-[#6c615e]"
aria-label="Fechar"
>
×
</button>
</div>
<textarea class="field mt-4 min-h-32 resize-none leading-5">
Estamos na reta final e o Jorge Solla 1313 precisa do seu voto. Olha esse vídeo: Fim da escala 6×1 é saúde — &lt;link&gt;. Peça voto pra Solla 1313 pra quem você conhece.</textarea
><button class="btn primary mt-3 w-full">Abrir no WhatsApp</button>
<div class="mt-3 grid grid-cols-2 gap-2">
<button class="btn outline">A mídia</button
><button class="btn outline">Copiar link</button>
</div>
<p class="mt-3 text-center text-[11px] leading-4 text-[#6c615e]">
Sem destinatário e sem envio automático. Se o aparelho não compartilhar o arquivo, ele
será baixado.
</p>
</aside>
</div>
</section>
</main>
</body>
</html>