docs(plans): S13 — cards personalizados da campanha

This commit is contained in:
Francisco Solla 2026-09-12 00:43:42 -03:00
parent 3aad110e48
commit 581cb933a8
2 changed files with 933 additions and 0 deletions

View file

@ -0,0 +1,799 @@
<!doctype html>
<html lang="pt-BR">
<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>UI draft — S13 · Cards personalizados da campanha</title>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<main class="mx-auto max-w-[1400px] px-6 py-10">
<h1 class="text-lg font-semibold">S13 · Cards personalizados da campanha</h1>
<p class="mt-2 max-w-4xl text-sm leading-6 text-zinc-400">
Visitante da home pública, principalmente no celular. A home apresenta os modelos e a página
<code>/cards</code> concentra a personalização. Cenas estáticas em cinza neutro com um único
acento indigo. As proporções abaixo seguem os arquivos originais, já inspecionados.
</p>
<div
class="mt-4 inline-flex min-h-9 items-center border border-zinc-700 bg-zinc-900 px-3 text-xs font-semibold text-zinc-300"
>
ARTE REAL OMITIDA · este rascunho valida a interface, não redesenha os arquivos oficiais
</div>
<!-- Cena 1: home em contexto -->
<section class="mt-12">
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
Cena 1 · Home em contexto
</h2>
<p class="mt-1 text-xs text-zinc-500">
Recomendação: convite depois de "Receba as novidades da campanha" e antes do rodapé.
</p>
<div class="mt-4 overflow-x-auto pb-3">
<div class="w-[1280px] overflow-hidden border border-zinc-700 bg-white text-zinc-950">
<div class="border-b border-zinc-200 bg-zinc-100 px-16 py-8">
<p class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
Contexto · seção anterior
</p>
<div class="mt-3 mx-auto h-5 w-72 bg-zinc-300"></div>
<div class="mt-2 mx-auto h-3 w-[520px] bg-zinc-200"></div>
<div class="mt-5 mx-auto h-11 w-[620px] border border-zinc-300 bg-white"></div>
</div>
<div class="grid grid-cols-[0.9fr_1.35fr] gap-14 px-16 py-16">
<div class="self-center">
<p class="text-xs font-bold tracking-[0.14em] text-zinc-500 uppercase">
Faça parte
</p>
<h3 class="mt-2 max-w-md text-4xl leading-[1.05] font-black tracking-tight">
Mostre que você está com Solla
</h3>
<p class="mt-4 max-w-md text-base leading-6 text-zinc-600">
Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com
sua gente e fortaleça nossa caminhada.
</p>
<div
class="mt-7 inline-flex h-12 items-center justify-center bg-indigo-600 px-6 text-sm font-bold text-white"
>
Criar meu card
</div>
</div>
<div>
<div class="flex items-center justify-between">
<p class="text-sm font-semibold">Escolha um modelo</p>
<div class="flex items-center gap-2 text-xs text-zinc-500">
<span class="flex h-11 w-11 items-center justify-center border border-zinc-300"
>←</span
>
<span class="flex h-11 w-11 items-center justify-center border border-zinc-300"
>→</span
>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-4">
<article class="border-2 border-indigo-600 bg-zinc-50 p-3">
<div
class="mx-auto flex h-52 w-[156px] items-center justify-center border border-zinc-300 bg-white p-4"
>
<p class="text-center text-lg leading-tight font-black">
#SOU<br />SEU NOME<br />TÔ COM<br />SOLLA
</p>
</div>
<p class="mt-3 text-sm font-bold">Card com seu nome</p>
<p class="mt-1 text-xs text-zinc-500">Master 1080 × 1440 · 3:4</p>
</article>
<article class="border border-zinc-300 bg-zinc-50 p-3">
<div
class="relative mx-auto aspect-square w-full max-w-52 overflow-hidden border border-zinc-300 bg-zinc-200"
>
<span
class="absolute inset-0 flex items-center justify-center text-xs text-zinc-500"
>SUA FOTO</span
>
<span
class="absolute inset-x-0 bottom-0 flex h-12 items-center justify-center bg-zinc-700 text-[10px] font-bold text-white"
>FAIXA DA ARTE-MESTRE</span
>
</div>
<p class="mt-3 text-sm font-bold">Moldura quadrada</p>
<p class="mt-1 text-xs text-zinc-500">Master 1000 × 1000 · 1:1</p>
</article>
<article class="border border-zinc-300 bg-zinc-50 p-3">
<div
class="relative mx-auto h-52 w-36 overflow-hidden border border-zinc-300 bg-zinc-200"
>
<span
class="absolute inset-0 flex items-center justify-center text-xs text-zinc-500"
>SUA FOTO</span
>
<span
class="absolute inset-x-0 bottom-0 flex h-11 items-center justify-center bg-zinc-700 px-2 text-center text-[9px] font-bold text-white"
>FAIXA DA ARTE-MESTRE</span
>
</div>
<p class="mt-3 text-sm font-bold">Moldura vertical</p>
<p class="mt-1 text-xs text-zinc-500">Master 1000 × 1440 · 25:36</p>
</article>
</div>
<p class="mt-3 text-center text-xs text-zinc-500">Três modelos disponíveis</p>
</div>
</div>
<div class="border-t border-zinc-800 bg-zinc-900 px-16 py-7 text-zinc-500">
<span class="text-xs font-semibold tracking-wider uppercase">Contexto · rodapé</span>
</div>
</div>
</div>
<div class="mt-6 w-[390px] overflow-hidden border border-zinc-700 bg-white text-zinc-950">
<div class="border-b border-zinc-200 bg-zinc-100 px-5 py-6">
<p class="text-[10px] font-semibold tracking-wider text-zinc-500 uppercase">
Contexto · novidades
</p>
<div class="mt-2 h-4 w-48 bg-zinc-300"></div>
<div class="mt-3 h-11 w-full border border-zinc-300 bg-white"></div>
</div>
<div class="px-5 py-12">
<p class="text-xs font-bold tracking-[0.14em] text-zinc-500 uppercase">Faça parte</p>
<h3 class="mt-2 text-3xl leading-[1.05] font-black tracking-tight">
Mostre que você está com Solla
</h3>
<p class="mt-3 text-sm leading-5 text-zinc-600">
Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com sua
gente e fortaleça nossa caminhada.
</p>
<div class="mt-7 overflow-hidden">
<div class="flex w-max gap-3">
<article class="w-[292px] border-2 border-indigo-600 bg-zinc-50 p-3">
<div
class="flex aspect-[3/4] w-full items-center justify-center border border-zinc-300 bg-white"
>
<p class="text-center text-2xl leading-tight font-black">
#SOU<br />SEU NOME<br />TÔ COM SOLLA
</p>
</div>
<p class="mt-3 text-sm font-bold">Card com seu nome</p>
<p class="mt-1 text-xs text-zinc-500">1080 × 1440 · 3:4</p>
</article>
<article class="w-[292px] border border-zinc-300 bg-zinc-50 p-3">
<div class="aspect-square bg-zinc-200"></div>
<p class="mt-3 text-sm font-bold">Moldura quadrada</p>
</article>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex gap-2">
<span class="h-2 w-6 bg-indigo-600"></span>
<span class="h-2 w-2 bg-zinc-300"></span>
<span class="h-2 w-2 bg-zinc-300"></span>
</div>
<p class="text-xs font-semibold text-zinc-500">Modelo 1 de 3</p>
<div class="flex gap-2">
<span class="flex h-11 w-11 items-center justify-center border border-zinc-300"
>←</span
>
<span class="flex h-11 w-11 items-center justify-center border border-zinc-300"
>→</span
>
</div>
</div>
<div
class="mt-6 flex h-12 w-full items-center justify-center bg-indigo-600 text-sm font-bold text-white"
>
Criar meu card
</div>
</div>
<div class="border-t border-zinc-800 bg-zinc-900 px-5 py-6 text-xs text-zinc-500">
Contexto · rodapé
</div>
</div>
<p class="mt-3 max-w-3xl text-xs leading-5 text-zinc-500">
O CTA geral abre o catálogo em <code>/cards</code>. Tocar diretamente em um modelo leva à
mesma página com o modelo selecionado e o compositor aberto.
</p>
</section>
<!-- Cena 2: chooser -->
<section class="mt-14">
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
Cena 2 · Página /cards · escolha do modelo
</h2>
<p class="mt-1 text-xs text-zinc-500">
Três opções visíveis no desktop; um card com parte do próximo no mobile. Sem avanço
automático.
</p>
<div class="mt-4 overflow-x-auto pb-3">
<div class="w-[1280px] min-h-[720px] border border-zinc-700 bg-zinc-50 text-zinc-950">
<header class="flex h-16 items-center justify-between border-b border-zinc-200 px-12">
<span class="text-sm font-bold">CABEÇALHO DO SITE</span>
<span class="text-sm text-zinc-600">Voltar para a campanha</span>
</header>
<div class="mx-auto max-w-[1080px] px-10 py-14 text-center">
<p class="text-xs font-bold tracking-[0.14em] text-zinc-500 uppercase">Faça parte</p>
<h3 class="mt-2 text-5xl font-black tracking-tight">Crie seu card de apoio</h3>
<p class="mx-auto mt-4 max-w-2xl text-base text-zinc-600">
Escolha um dos três modelos, personalize com seu nome ou sua foto e baixe para
compartilhar.
</p>
<p class="mt-2 text-sm text-zinc-500">
Seu nome e sua foto ficam no seu aparelho e não são enviados para nós.
</p>
<div class="mt-10 grid grid-cols-3 gap-5 text-left">
<article class="border-2 border-indigo-600 bg-white p-4">
<div
class="mx-auto flex h-64 w-48 items-center justify-center border border-zinc-300 bg-zinc-50"
>
<p class="text-center text-2xl leading-tight font-black">
#SOU<br />SEU NOME<br />TÔ COM SOLLA
</p>
</div>
<div class="mt-4 flex items-start justify-between gap-3">
<div>
<p class="font-bold">Card com seu nome</p>
<p class="mt-1 text-xs text-zinc-500">Digite como quer aparecer</p>
</div>
<span class="bg-indigo-600 px-2 py-1 text-[10px] font-bold text-white"
>Selecionado</span
>
</div>
</article>
<article class="border border-zinc-300 bg-white p-4">
<div
class="relative mx-auto aspect-square w-full max-w-64 overflow-hidden border border-zinc-300 bg-zinc-200"
>
<span
class="absolute inset-0 flex items-center justify-center text-xs text-zinc-500"
>SUA FOTO</span
>
<span
class="absolute inset-x-0 bottom-0 flex h-14 items-center justify-center bg-zinc-700 text-[10px] font-bold text-white"
>FAIXA DA ARTE-MESTRE</span
>
</div>
<p class="mt-4 font-bold">Moldura quadrada</p>
<p class="mt-1 text-xs text-zinc-500">1000 × 1000 · 1:1</p>
</article>
<article class="border border-zinc-300 bg-white p-4">
<div
class="relative mx-auto h-64 w-[178px] overflow-hidden border border-zinc-300 bg-zinc-200"
>
<span
class="absolute inset-0 flex items-center justify-center text-xs text-zinc-500"
>SUA FOTO</span
>
<span
class="absolute inset-x-0 bottom-0 flex h-12 items-center justify-center bg-zinc-700 px-2 text-center text-[9px] font-bold text-white"
>FAIXA DA ARTE-MESTRE</span
>
</div>
<p class="mt-4 font-bold">Moldura vertical</p>
<p class="mt-1 text-xs text-zinc-500">1000 × 1440 · 25:36</p>
</article>
</div>
<div class="mt-6 flex items-center justify-center gap-5">
<span class="flex h-11 w-11 items-center justify-center border border-zinc-300"
>←</span
>
<span class="text-sm font-semibold text-zinc-600">Modelo 1 de 3</span>
<span class="flex h-11 w-11 items-center justify-center border border-zinc-300"
>→</span
>
</div>
<div
class="mx-auto mt-6 flex h-12 w-56 items-center justify-center bg-indigo-600 text-sm font-bold text-white"
>
Usar este modelo
</div>
</div>
</div>
</div>
<div
class="mt-6 w-[390px] min-h-[760px] overflow-hidden border border-zinc-700 bg-zinc-50 text-zinc-950"
>
<header class="flex h-14 items-center justify-between border-b border-zinc-200 px-5">
<span class="text-sm font-bold">CABEÇALHO DO SITE</span>
<span class="text-xs text-zinc-600">Voltar</span>
</header>
<div class="px-5 pt-10 pb-8">
<p class="text-xs font-bold tracking-[0.14em] text-zinc-500 uppercase">Faça parte</p>
<h3 class="mt-2 text-4xl leading-none font-black tracking-tight">
Crie seu card de apoio
</h3>
<p class="mt-3 text-sm leading-5 text-zinc-600">
Escolha um modelo, personalize e baixe para compartilhar.
</p>
<p class="mt-2 text-xs leading-5 text-zinc-500">
Seu nome e sua foto ficam no seu aparelho.
</p>
<div class="mt-7 overflow-hidden">
<div class="flex w-max gap-3">
<article class="w-[310px] border-2 border-indigo-600 bg-white p-4">
<div
class="flex aspect-[3/4] w-full items-center justify-center border border-zinc-300 bg-zinc-50"
>
<p class="text-center text-2xl leading-tight font-black">
#SOU<br />SEU NOME<br />TÔ COM SOLLA
</p>
</div>
<div class="mt-4 flex items-center justify-between gap-2">
<p class="font-bold">Card com seu nome</p>
<span class="bg-indigo-600 px-2 py-1 text-[10px] font-bold text-white"
>Selecionado</span
>
</div>
</article>
<article class="w-[310px] border border-zinc-300 bg-white p-4">
<div class="aspect-square bg-zinc-200"></div>
<p class="mt-4 font-bold">Moldura quadrada</p>
</article>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex gap-2">
<span class="h-2 w-6 bg-indigo-600"></span>
<span class="h-2 w-2 bg-zinc-300"></span>
<span class="h-2 w-2 bg-zinc-300"></span>
</div>
<span class="text-xs font-semibold text-zinc-500">1 de 3</span>
<div class="flex gap-2">
<span class="flex h-11 w-11 items-center justify-center border border-zinc-300"
>←</span
>
<span class="flex h-11 w-11 items-center justify-center border border-zinc-300"
>→</span
>
</div>
</div>
<div
class="mt-6 flex h-12 w-full items-center justify-center bg-indigo-600 text-sm font-bold text-white"
>
Usar este modelo
</div>
</div>
</div>
</section>
<!-- Cena 3: compositor de nome -->
<section class="mt-14">
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
Cena 3 · Compositor de nome
</h2>
<p class="mt-1 text-xs text-zinc-500">
Modal central no desktop e bottom drawer no mobile. Prévia sempre visível; nenhum texto é
enviado.
</p>
<div class="mt-4 overflow-x-auto pb-3">
<div
class="relative flex h-[760px] w-[1280px] items-center justify-center overflow-hidden border border-zinc-700 bg-zinc-300 text-zinc-950"
>
<div class="absolute inset-0 bg-zinc-950/60"></div>
<div class="relative grid w-[1040px] grid-cols-[1.25fr_0.9fr] bg-white">
<div
class="flex min-h-[610px] items-center justify-center border-r border-zinc-200 bg-zinc-100 p-10"
>
<div
class="flex h-[480px] w-[360px] items-center justify-center border border-zinc-300 bg-white p-10"
>
<div class="text-center">
<p class="text-5xl leading-[0.95] font-black">#SOU</p>
<p
class="my-5 border-y-4 border-zinc-900 py-4 text-5xl leading-none font-black"
>
SEU NOME
</p>
<p class="text-4xl leading-none font-black">TÔ COM SOLLA</p>
<p class="mt-8 text-xs font-semibold text-zinc-400">MASTER 1080 × 1440</p>
</div>
</div>
</div>
<div class="flex min-h-[610px] flex-col">
<div class="flex items-start justify-between border-b border-zinc-200 px-7 py-6">
<div>
<p class="text-xs font-semibold text-zinc-500">Card com seu nome</p>
<h3 class="mt-1 text-2xl font-black">Personalize com seu nome</h3>
</div>
<span
class="flex h-11 w-11 items-center justify-center border border-zinc-300 text-xl"
>×</span
>
</div>
<div class="flex-1 px-7 py-7">
<label class="text-sm font-bold" for="desktop-name">Seu nome</label>
<input
id="desktop-name"
type="text"
value="Seu nome"
readonly
class="mt-2 flex h-12 items-center border-2 border-indigo-600 bg-white px-4 text-base"
/>
<p class="mt-2 text-xs leading-5 text-zinc-500">
Use seu primeiro nome ou o nome pelo qual as pessoas conhecem você.
</p>
<div class="mt-7 border border-zinc-200 bg-zinc-50 p-4">
<p class="text-sm font-bold">Sua privacidade</p>
<p class="mt-1 text-xs leading-5 text-zinc-600">
Seu nome e sua foto são processados apenas no seu aparelho e não são enviados
para nós.
</p>
</div>
</div>
<div class="flex items-center justify-between border-t border-zinc-200 px-7 py-5">
<span class="flex h-11 items-center px-4 text-sm font-semibold text-zinc-600"
>Cancelar</span
>
<span
class="flex h-12 items-center bg-indigo-600 px-6 text-sm font-bold text-white"
>Criar meu card</span
>
</div>
</div>
</div>
</div>
</div>
<div
class="relative mt-6 h-[844px] w-[390px] overflow-hidden border border-zinc-700 bg-zinc-300 text-zinc-950"
>
<div class="absolute inset-0 bg-zinc-950/60"></div>
<div class="absolute inset-x-0 bottom-0 bg-white">
<div class="mx-auto mt-3 h-1 w-10 bg-zinc-300"></div>
<div class="flex items-start justify-between border-b border-zinc-200 px-5 pt-4 pb-3">
<div>
<p class="text-xs font-semibold text-zinc-500">Card com seu nome</p>
<h3 class="mt-1 text-xl font-black">Personalize com seu nome</h3>
</div>
<span
class="flex h-11 w-11 items-center justify-center border border-zinc-300 text-xl"
>×</span
>
</div>
<div class="max-h-[620px] overflow-y-auto px-5 py-5">
<div
class="mx-auto flex aspect-[3/4] w-52 items-center justify-center border border-zinc-300 bg-zinc-50 p-5"
>
<p class="text-center text-2xl leading-tight font-black">
#SOU<br /><span class="my-3 block border-y-2 border-zinc-900 py-2">SEU NOME</span
>TÔ COM SOLLA
</p>
</div>
<label class="mt-5 block text-sm font-bold" for="mobile-name">Seu nome</label>
<input
id="mobile-name"
type="text"
value="Seu nome"
readonly
class="mt-2 flex h-12 items-center border-2 border-indigo-600 px-4 text-base"
/>
<p class="mt-2 text-xs leading-5 text-zinc-500">
A prévia mostra como o texto vai sair.
</p>
<p class="mt-4 border-t border-zinc-200 pt-4 text-xs leading-5 text-zinc-600">
Seu nome fica neste aparelho e não é enviado para nós.
</p>
</div>
<div
class="grid grid-cols-[0.75fr_1.25fr] gap-3 border-t border-zinc-200 px-5 pt-4 pb-6"
>
<span
class="flex h-12 items-center justify-center border border-zinc-300 text-sm font-semibold"
>Cancelar</span
>
<span
class="flex h-12 items-center justify-center bg-indigo-600 text-sm font-bold text-white"
>Criar meu card</span
>
</div>
</div>
</div>
</section>
<!-- Cena 4: compositor de foto -->
<section class="mt-14">
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
Cena 4 · Compositor de foto
</h2>
<p class="mt-1 text-xs text-zinc-500">
Quadrado no desktop e vertical no mobile para testar os dois extremos. Arrastar não é o
único controle: zoom e ajustes direcionais ficam visíveis.
</p>
<div class="mt-4 overflow-x-auto pb-3">
<div
class="relative flex h-[760px] w-[1280px] items-center justify-center overflow-hidden border border-zinc-700 bg-zinc-300 text-zinc-950"
>
<div class="absolute inset-0 bg-zinc-950/60"></div>
<div class="relative grid w-[1040px] grid-cols-[1.25fr_0.9fr] bg-white">
<div
class="flex min-h-[620px] items-center justify-center border-r border-zinc-200 bg-zinc-100 p-10"
>
<div
class="relative aspect-square w-[500px] overflow-hidden border border-zinc-400 bg-zinc-300"
>
<div
class="absolute inset-10 flex items-center justify-center border-2 border-white/80 text-sm text-zinc-600"
>
FOTO · ARRASTE PARA POSICIONAR
</div>
<div
class="absolute inset-x-0 bottom-0 flex h-24 items-center justify-center bg-zinc-700 text-xs font-bold text-white"
>
OVERLAY OFICIAL · 1000 × 1000
</div>
</div>
</div>
<div class="flex min-h-[620px] flex-col">
<div class="flex items-start justify-between border-b border-zinc-200 px-7 py-6">
<div>
<p class="text-xs font-semibold text-zinc-500">Moldura quadrada</p>
<h3 class="mt-1 text-2xl font-black">Enquadre sua foto</h3>
</div>
<span
class="flex h-11 w-11 items-center justify-center border border-zinc-300 text-xl"
>×</span
>
</div>
<div class="flex-1 px-7 py-6">
<p class="text-sm leading-5 text-zinc-600">
Arraste para posicionar e use os controles para aproximar ou ajustar.
</p>
<div class="mt-6">
<div
class="flex items-center justify-between text-xs font-semibold text-zinc-600"
>
<span>Zoom</span><span>100%</span>
</div>
<div class="mt-3 flex items-center gap-3">
<span class="text-lg">−</span>
<div class="relative h-2 flex-1 bg-zinc-200">
<div class="h-2 w-1/2 bg-indigo-600"></div>
<span
class="absolute top-1/2 left-1/2 h-5 w-5 -translate-1/2 bg-indigo-600"
></span>
</div>
<span class="text-lg">+</span>
</div>
</div>
<div class="mt-7">
<p class="text-xs font-semibold text-zinc-600">Ajuste fino</p>
<div class="mt-2 grid w-36 grid-cols-3 gap-1">
<span></span>
<span class="flex h-11 items-center justify-center border border-zinc-300"
>↑</span
>
<span></span>
<span class="flex h-11 items-center justify-center border border-zinc-300"
>←</span
>
<span class="flex h-11 items-center justify-center border border-zinc-300"
>↓</span
>
<span class="flex h-11 items-center justify-center border border-zinc-300"
>→</span
>
</div>
</div>
<div
class="mt-7 flex h-11 items-center border border-zinc-300 px-4 text-sm font-semibold text-zinc-700"
>
Trocar foto
</div>
<p class="mt-4 text-xs leading-5 text-zinc-500">
Sua foto fica neste aparelho e não é enviada para nós.
</p>
</div>
<div class="flex items-center justify-between border-t border-zinc-200 px-7 py-5">
<span class="flex h-11 items-center px-4 text-sm font-semibold text-zinc-600"
>Cancelar</span
>
<span
class="flex h-12 items-center bg-indigo-600 px-6 text-sm font-bold text-white"
>Criar meu card</span
>
</div>
</div>
</div>
</div>
</div>
<div
class="relative mt-6 h-[844px] w-[390px] overflow-hidden border border-zinc-700 bg-zinc-300 text-zinc-950"
>
<div class="absolute inset-0 bg-zinc-950/60"></div>
<div class="absolute inset-x-0 bottom-0 bg-white">
<div class="mx-auto mt-3 h-1 w-10 bg-zinc-300"></div>
<div class="flex items-start justify-between border-b border-zinc-200 px-5 pt-4 pb-3">
<div>
<p class="text-xs font-semibold text-zinc-500">Moldura vertical</p>
<h3 class="mt-1 text-xl font-black">Enquadre sua foto</h3>
</div>
<span
class="flex h-11 w-11 items-center justify-center border border-zinc-300 text-xl"
>×</span
>
</div>
<div class="max-h-[620px] overflow-y-auto px-5 py-4">
<div
class="relative mx-auto h-80 w-[222px] overflow-hidden border border-zinc-400 bg-zinc-300"
>
<div
class="absolute inset-8 flex items-center justify-center border-2 border-white/80 text-center text-xs text-zinc-600"
>
FOTO · ARRASTE PARA POSICIONAR
</div>
<div
class="absolute inset-x-0 bottom-0 flex h-16 items-center justify-center bg-zinc-700 px-3 text-center text-[10px] font-bold text-white"
>
OVERLAY OFICIAL · 1000 × 1440
</div>
</div>
<div
class="mt-4 flex items-center justify-between text-xs font-semibold text-zinc-600"
>
<span>Zoom</span><span>100%</span>
</div>
<div class="mt-2 flex items-center gap-3">
<span class="text-lg">−</span>
<div class="h-2 flex-1 bg-zinc-200">
<div class="h-2 w-1/2 bg-indigo-600"></div>
</div>
<span class="text-lg">+</span>
</div>
<div class="mt-4 grid grid-cols-2 gap-3">
<span
class="flex h-11 items-center justify-center border border-zinc-300 text-sm font-semibold"
>Ajustar posição</span
>
<span
class="flex h-11 items-center justify-center border border-zinc-300 text-sm font-semibold"
>Trocar foto</span
>
</div>
<p class="mt-4 text-xs leading-5 text-zinc-500">
Sua foto fica neste aparelho e não é enviada para nós.
</p>
</div>
<div
class="grid grid-cols-[0.75fr_1.25fr] gap-3 border-t border-zinc-200 px-5 pt-4 pb-6"
>
<span
class="flex h-12 items-center justify-center border border-zinc-300 text-sm font-semibold"
>Cancelar</span
>
<span
class="flex h-12 items-center justify-center bg-indigo-600 text-sm font-bold text-white"
>Criar meu card</span
>
</div>
</div>
</div>
</section>
<!-- Cena 5: resultado e erro -->
<section class="mt-14">
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
Cena 5 · Resultado e erro recuperável
</h2>
<p class="mt-1 text-xs text-zinc-500">
O resultado termina no download. O erro mantém uma saída clara para escolher outra foto.
</p>
<div class="mt-4 grid gap-6 xl:grid-cols-[1fr_390px]">
<div
class="relative flex min-h-[620px] items-center justify-center overflow-hidden border border-zinc-700 bg-zinc-300 text-zinc-950"
>
<div class="absolute inset-0 bg-zinc-950/60"></div>
<div class="relative grid w-[850px] grid-cols-[1fr_0.9fr] bg-white">
<div
class="flex items-center justify-center border-r border-zinc-200 bg-zinc-100 p-8"
>
<div
class="relative aspect-square w-80 overflow-hidden border border-zinc-300 bg-zinc-200"
>
<span
class="absolute inset-0 flex items-center justify-center text-xs text-zinc-500"
>RESULTADO 1000 × 1000</span
>
<span
class="absolute inset-x-0 bottom-0 flex h-16 items-center justify-center bg-zinc-700 text-[10px] font-bold text-white"
>ARTE-MESTRE</span
>
</div>
</div>
<div class="flex flex-col justify-center p-9">
<p class="text-xs font-bold tracking-[0.14em] text-zinc-500 uppercase">
Tudo pronto
</p>
<h3 class="mt-2 text-3xl font-black">Seu card está pronto para compartilhar.</h3>
<p class="mt-3 text-sm leading-6 text-zinc-600">
Baixe a imagem e publique onde quiser. O arquivo não fica salvo no site.
</p>
<div
class="mt-7 flex h-12 w-full items-center justify-center bg-indigo-600 text-sm font-bold text-white"
>
Baixar meu card
</div>
<div
class="mt-3 flex h-11 w-full items-center justify-center border border-zinc-300 text-sm font-semibold"
>
Criar outro card
</div>
</div>
</div>
</div>
<div
class="relative h-[620px] w-[390px] overflow-hidden border border-zinc-700 bg-zinc-300 text-zinc-950"
>
<div class="absolute inset-0 bg-zinc-950/60"></div>
<div class="absolute inset-x-0 bottom-0 bg-white">
<div class="mx-auto mt-3 h-1 w-10 bg-zinc-300"></div>
<div class="flex items-start justify-between px-5 pt-5">
<div>
<p class="text-xs font-semibold text-zinc-500">Moldura quadrada</p>
<h3 class="mt-1 text-xl font-black">Não foi possível usar esta foto</h3>
</div>
<span
class="flex h-11 w-11 items-center justify-center border border-zinc-300 text-xl"
>×</span
>
</div>
<div class="px-5 pt-5 pb-6">
<div
class="flex h-36 items-center justify-center border border-zinc-300 bg-zinc-100 px-8 text-center text-sm text-zinc-600"
>
Escolha outra imagem e tente novamente.
</div>
<div
class="mt-5 flex h-12 w-full items-center justify-center bg-indigo-600 text-sm font-bold text-white"
>
Escolher outra foto
</div>
<div
class="mt-3 flex h-11 w-full items-center justify-center border border-zinc-300 text-sm font-semibold"
>
Voltar aos modelos
</div>
</div>
</div>
</div>
</div>
<div class="mt-6 w-[390px] overflow-hidden border border-zinc-700 bg-white text-zinc-950">
<div class="p-5">
<div
class="mx-auto flex aspect-square w-full items-center justify-center border border-zinc-300 bg-zinc-100 text-xs text-zinc-500"
>
RESULTADO 1000 × 1000
</div>
<p class="mt-6 text-xs font-bold tracking-[0.14em] text-zinc-500 uppercase">
Tudo pronto
</p>
<h3 class="mt-2 text-3xl leading-tight font-black">
Seu card está pronto para compartilhar.
</h3>
<p class="mt-3 text-sm leading-5 text-zinc-600">
Baixe a imagem e publique onde quiser. O arquivo não fica salvo no site.
</p>
<div
class="mt-6 flex h-12 w-full items-center justify-center bg-indigo-600 text-sm font-bold text-white"
>
Baixar meu card
</div>
<div
class="mt-3 flex h-11 w-full items-center justify-center border border-zinc-300 text-sm font-semibold"
>
Criar outro card
</div>
</div>
</div>
</section>
</main>
</body>
</html>

View file

@ -0,0 +1,134 @@
# Cards personalizados da campanha no site público
Status: registrado (aguardando plano em main)
Atualizado em: 2026-09-12
Issue: #941
Priority: P1
Model: composer-2.5
Impeccable: C — fluxo público novo em `/cards` + encaixe na home de campanha
Rascunho UI: docs/plans/cards-personalizados-campanha-ui-draft.html
Appetite: ~3–4 dias eng; um fluxo completo da descoberta na home ao download de um PNG personalizado
Responsável: —
## Intenção
Dar ao visitante uma forma simples de mostrar apoio a Jorge Solla nas redes. A home faz o convite e apresenta os modelos; a página `/cards` concentra escolha, personalização, prévia e download.
Home e página formam um único funil. A pessoa não precisa criar conta nem entregar seus dados: nome e foto ficam no aparelho durante todo o processo.
## Persona e fluxo
- **Persona / contexto:** visitante do site, geralmente no celular, que quer manifestar apoio e publicar uma imagem com a identidade da campanha.
- **Job principal:** criar em poucos passos um card pessoal, com aparência oficial, pronto para baixar e compartilhar.
- **Fluxo desejado:** encontra o convite na home → escolhe um modelo ali ou entra em `/cards` → informa o nome ou escolhe uma foto → ajusta a prévia → gera e baixa o PNG.
- **Anti-goals de produto:** virar editor gráfico completo, galeria pública, rede social, cadastro de apoiador ou novo canal de coleta de dados.
### Esboço de fluxo (C)
```text
[home: convite + modelos] → [/cards: modelo escolhido]
→ [modal desktop | bottom drawer mobile] → [personalizar + conferir]
→ [card pronto] → [baixar PNG]
```
### Rascunho UI (C)
- Rascunho UI (gate): `docs/plans/cards-personalizados-campanha-ui-draft.html`
- Cenas: home em contexto, escolha em `/cards`, compositor de nome, compositor de foto, resultado e erro recuperável, em desktop e mobile.
- As artes aparecem como placeholders neutros porque o rascunho de gate não embute marca ou imagens reais. Os arquivos originais já estão acessíveis em `/home/fsolla/Documentos/cards/`.
## Objetivo e aceite
- A home ganha uma seção curta de convite com os três modelos e o CTA `Criar meu card`, sem alterar as seções existentes.
- A posição recomendada é depois de `Receba as novidades da campanha` e antes do rodapé, preservando a captura de contato como primeira conversão do fim da página.
- O catálogo mostra os três modelos lado a lado no desktop e como carrossel de um item com parte do próximo visível no mobile.
- O CTA geral leva ao início de `/cards`; tocar em um modelo na home leva ao mesmo endereço com aquele modelo selecionado e abre o compositor, sem um segundo editor na home.
- Quem entra diretamente em `/cards` encontra o catálogo e escolhe um modelo antes de abrir o compositor.
- O modelo de nome usa a base vazia `1080×1440`, insere somente o nome na área prevista e nunca corta texto silenciosamente. A frase final é `#SOU <nome> TÔ COM SOLLA`, como na arte oficial.
- Os dois modelos de foto permitem escolher, reposicionar e ampliar a imagem atrás da máscara transparente, sem alterar o overlay oficial.
- A moldura quadrada gera `1000×1000`; a moldura vertical gera `1000×1440`. Essas são as dimensões reais dos PNGs, apesar dos nomes dos arquivos indicarem largura `1080`.
- O compositor abre em modal central no desktop e bottom drawer no mobile. Fechar devolve a pessoa ao catálogo e ao modelo selecionado.
- Antes de escolher a foto, a pessoa vê que nome e imagem ficam no aparelho e não são enviados nem salvos.
- O estado final mostra a imagem pronta e permite baixar um arquivo `PNG`; `Criar outro card` retorna ao catálogo.
- Se uma foto não puder ser lida, o erro explica o problema e oferece `Escolher outra foto` sem deixar a pessoa presa.
- Escolha, ajuste, fechamento e download funcionam por toque e teclado; a seleção não depende apenas de cor ou gesto de arrastar.
- Proporções, área segura do nome, transparência e posição das faixas seguem os arquivos-mestre, sem aproximação visual; nomes com acentos do português devem continuar legíveis.
## Dados (intenção)
- **Vou apresentar dados?** Não.
- **Decisões desbloqueadas:** N/A — esta entrega não apresenta métricas nem dados para uma decisão operacional.
- **Forma:** _adiada ao plano de implementação_ — nome e foto são somente insumos locais da imagem; nenhum conteúdo pessoal entra em analytics.
## Dados da decisão (literais)
- ID reservado: `S13`
- Tipo: `feature`
- Rota canônica proposta: `/cards`
- Seleção de modelo na URL proposta: `model=eu-sou-solla` | `model=perfil-quadrado` | `model=perfil-retangular`
- Modelo `eu-sou-solla`: `Card com seu nome`
- Modelo `perfil-quadrado`: `Moldura quadrada`
- Modelo `perfil-retangular`: `Moldura vertical`
- Frase final do modelo `eu-sou-solla`: `#SOU <nome> TÔ COM SOLLA`
- Divergência resolvida no gate: o pedido inicial dizia `ESTOU COM SOLLA`; prevalece o `TÔ COM SOLLA` da arte-mestre.
- Eyebrow da home: `Faça parte`
- Título da home: `Mostre que você está com Solla`
- Corpo da home: `Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com sua gente e fortaleça nossa caminhada.`
- CTA da home: `Criar meu card`
- Título da página: `Crie seu card de apoio`
- Introdução da página: `Escolha um dos três modelos, personalize com seu nome ou sua foto e baixe para compartilhar.`
- Ações do compositor: `Criar meu card` | `Trocar foto` | `Cancelar`
- Resultado: `Seu card está pronto para compartilhar.`
- Ações do resultado: `Baixar meu card` | `Criar outro card`
- Aviso de privacidade: `Seu nome e sua foto são processados apenas no seu aparelho e não são enviados para nós.`
- Formato de saída: `PNG`
- Base vazia do nome: `/home/fsolla/Documentos/cards/eu-sou-solla/template-to-com-solla-site-sem-o-nome.jpg.jpeg` (`1080×1440`)
- Referência preenchida do nome: `/home/fsolla/Documentos/cards/eu-sou-solla/template-to-com-solla-site.jpg.jpeg` (`1080×1440`, exemplo `FULANO`)
- Máscara quadrada: `/home/fsolla/Documentos/cards/perfil-quadrado/card-solla-1080x1080-site.png` (`1000×1000`, RGBA)
- Máscara vertical: `/home/fsolla/Documentos/cards/perfil-retangular/card-solla-1080x1440-site.png` (`1000×1440`, RGBA)
- Fonte final do nome: `BREXTER-BREXTER-700.TTF` (direito de uso web confirmado no gate)
- Fonte excluída: `BREXTER-REGULAR DEMO.OTF`
## Direção no codebase (hipótese)
- **Áreas prováveis:** composição da home e nova rota no namespace `src/app/(frontend)`, componentes públicos próximos das seções de campanha, lógica pura de composição de imagem em `src/lib/` e assets estáticos da campanha.
- **Precedente a olhar:** `CampaignStorySection.tsx` e `CampaignNewsletterSection.tsx` para o convite; S1/S5/S6/S7 para cards e comportamento responsivo; overlays responsivos existentes apenas como referência de interação.
- **Risco de acoplamento:** duplicar o compositor entre home e página, transformar carrosséis específicos em uma abstração prematura ou reaproveitar o upload interno que persiste fotos.
## Dependências
- Nenhuma. O pacote original está disponível em `/home/fsolla/Documentos/cards/` e o direito de uso web da Brexter completa foi confirmado no gate.
## Fora de escopo
- Publicação direta ou integração com APIs de redes sociais.
- Galeria, histórico, conta, cadastro, upload ou persistência de nome, foto ou imagem gerada.
- Filtros, rotação, remoção de fundo, detecção de rosto, recorte livre, texto livre, cores e tipografia configuráveis.
- Novos modelos, gestão dos modelos pelo CMS e métricas de uso nesta primeira versão. Os arquivos `modelo-card-adesivaço-solla*` e `modelo-card-atividade-solla*` não entram nos três modelos iniciais.
- Alteração das artes-mestre ou redesenho das demais seções da home.
## Rabbit holes de produto
- **Editor de imagens completo.** Se alguém "só completar": aparecem filtros, recorte livre e controles tipográficos. **Corte neste item:** reposicionar e ampliar a foto dentro da área prevista.
- **Dois fluxos de criação.** Se alguém "só completar": a home ganha um compositor próprio e os comportamentos divergem. **Corte neste item:** `/cards` é a única superfície de edição.
- **Alteração das artes oficiais.** Se alguém "só completar": dimensões, marcas ou faixas são refeitas dentro do gerador. **Corte neste item:** compor sobre os arquivos-mestre sem redesenhá-los.
- **Compartilhamento direto.** Se alguém "só completar": cada rede traz API, permissão e fallback diferentes. **Corte neste item:** entregar um PNG para download.
## Questões em aberto (produto)
- **Qual frase vale no card de nome?** `#SOU <nome> TÔ COM SOLLA`; só o nome muda. _(decidido no gate — preservar a arte-mestre)_
- **Onde a seção entra na home?** Depois de `Receba as novidades da campanha` e antes do rodapé. _(decidido no gate — a captura continua sendo a primeira conversão)_
- **O que acontece ao tocar num modelo da home?** Navega para `/cards` com o modelo selecionado e abre o compositor ali. _(decidido no gate — um único editor)_
- **Como o catálogo se comporta no desktop?** Três modelos visíveis de uma vez; carrossel com um item e parte do próximo no mobile. _(decidido no gate)_
- **Como tratar nomes maiores que a área segura?** Reduzir e quebrar até o menor tamanho legível; acima desse limite, pedir um nome mais curto. Nunca cortar silenciosamente. _(decidido no gate)_
- **A campanha possui licença para incorporar a Brexter no site?** Sim, para `BREXTER-BREXTER-700.TTF`; o arquivo `DEMO` fica fora. _(confirmado no gate)_
## Referências
- GitHub Issue #941
- Rascunho UI (gate): `docs/plans/cards-personalizados-campanha-ui-draft.html`
- Artes originais: `/home/fsolla/Documentos/cards/` e arquivos listados em `Dados da decisão (literais)`
- `src/app/(frontend)/(home)/page.tsx` e `src/app/(frontend)/styles.css`
- `src/components/CampaignStorySection.tsx` e `src/app/(frontend)/(home)/CampaignNewsletterSection.tsx`
- `tests/e2e/frontend.e2e.spec.ts` e `tests/e2e/campaignNewsletter.e2e.spec.ts`
- `AGENTS.md` e `AGENTS-public.md`