mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-12 22:13:05 +00:00
docs(plans): S13 — cards personalizados da campanha
This commit is contained in:
parent
3aad110e48
commit
581cb933a8
2 changed files with 933 additions and 0 deletions
799
docs/plans/cards-personalizados-campanha-ui-draft.html
Normal file
799
docs/plans/cards-personalizados-campanha-ui-draft.html
Normal 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>
|
||||
134
docs/plans/cards-personalizados-campanha.md
Normal file
134
docs/plans/cards-personalizados-campanha.md
Normal 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`
|
||||
Loading…
Reference in a new issue