mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-14 08:53:11 +00:00
docs(plans): registra S14 — cards personalizados: ajustes de fidelidade e experiência
This commit is contained in:
parent
e29fb8df1d
commit
1ff755a8ad
2 changed files with 437 additions and 0 deletions
325
docs/plans/cards-personalizados-ajustes-ui-draft.html
Normal file
325
docs/plans/cards-personalizados-ajustes-ui-draft.html
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
<!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 — S14 · Cards personalizados: ajustes de fidelidade e experiência</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">
|
||||
S14 · Cards personalizados — ajustes de fidelidade e experiência
|
||||
</h1>
|
||||
<p class="mt-2 max-w-4xl text-sm leading-6 text-zinc-400">
|
||||
Visitante da home pública, principalmente no celular. O compositor passa a abrir na própria
|
||||
home (sem navegar para <code>/cards</code>) e o CTA da home sai — tocar num modelo já abre a
|
||||
criação; o nome fica alinhado à esquerda com o "SOU" no card e no tile; a seção muda de
|
||||
posição; o modal perde o vão interno e o texto de ajuda ganha contraste. Cenas estáticas em
|
||||
cinza neutro com um único acento indigo. Arte real omitida — este rascunho valida interface,
|
||||
não redesenha os arquivos oficiais.
|
||||
</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"
|
||||
>
|
||||
GEOMETRIA DO NOME · borda esquerda x≈213/1080 · tinta ≤714px · cap 106px · Brexter 700 ·
|
||||
#ffec01
|
||||
</div>
|
||||
|
||||
<!-- Cena 1: home desktop, nova ordem + compositor aberto -->
|
||||
<section class="mt-12">
|
||||
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
|
||||
Cena 1 · Home desktop — nova ordem + compositor aberto no lugar
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
A seção "Mostre que você está com Solla" sobe para antes de "Receba as novidades da
|
||||
campanha" (mantém a captura como último bloco). Tocar num modelo abre o modal sobre a
|
||||
home; a URL não muda e a rolagem fica onde está. Sem CTA: os três modelos são o único
|
||||
gatilho.
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="relative mt-4 w-full max-w-[1160px] overflow-hidden border border-zinc-700 bg-white text-zinc-950"
|
||||
>
|
||||
<!-- bandas de contexto, na ordem -->
|
||||
<div class="border-b border-zinc-200 bg-zinc-100 px-10 py-6">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">Hero</p>
|
||||
<div class="mt-2 h-4 w-64 bg-zinc-300"></div>
|
||||
<div class="mt-2 h-3 w-40 bg-zinc-200"></div>
|
||||
</div>
|
||||
<div class="border-b border-zinc-200 px-10 py-4">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">
|
||||
Prova (números)
|
||||
</p>
|
||||
<div class="mt-2 grid grid-cols-3 gap-6">
|
||||
<div class="h-3 bg-zinc-200"></div>
|
||||
<div class="h-3 bg-zinc-200"></div>
|
||||
<div class="h-3 bg-zinc-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-b border-zinc-200 bg-zinc-50 px-10 py-4">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">
|
||||
Últimas notícias
|
||||
</p>
|
||||
<div class="mt-2 grid grid-cols-4 gap-3">
|
||||
<div class="h-10 bg-zinc-200"></div>
|
||||
<div class="h-10 bg-zinc-200"></div>
|
||||
<div class="h-10 bg-zinc-200"></div>
|
||||
<div class="h-10 bg-zinc-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-b border-zinc-200 bg-zinc-100 px-10 py-4">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">
|
||||
Por que essa eleição importa
|
||||
</p>
|
||||
<div class="mt-2 h-3 w-80 bg-zinc-300"></div>
|
||||
</div>
|
||||
<div class="border-b border-zinc-200 px-10 py-4">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">
|
||||
Nossa caminhada
|
||||
</p>
|
||||
<div class="mt-2 grid grid-cols-3 gap-3">
|
||||
<div class="h-8 bg-zinc-200"></div>
|
||||
<div class="h-8 bg-zinc-200"></div>
|
||||
<div class="h-8 bg-zinc-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-b border-zinc-200 bg-zinc-50 px-10 py-4">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">
|
||||
Acompanhe de perto
|
||||
</p>
|
||||
<div class="mt-2 grid grid-cols-4 gap-3">
|
||||
<div class="h-8 bg-zinc-200"></div>
|
||||
<div class="h-8 bg-zinc-200"></div>
|
||||
<div class="h-8 bg-zinc-200"></div>
|
||||
<div class="h-8 bg-zinc-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- seção de cards, agora aqui -->
|
||||
<div class="border-y-2 border-indigo-500 bg-zinc-100 px-10 py-6">
|
||||
<p class="text-[10px] font-bold tracking-wider text-indigo-600 uppercase">
|
||||
Faça parte · nova posição
|
||||
</p>
|
||||
<div class="mt-2 grid grid-cols-[1fr_1.4fr] items-center gap-10">
|
||||
<div>
|
||||
<div class="h-4 w-56 bg-zinc-400"></div>
|
||||
<div class="mt-2 h-3 w-72 bg-zinc-300"></div>
|
||||
<p class="mt-4 text-[11px] font-semibold text-zinc-500">
|
||||
Sem CTA — tocar num modelo abre o compositor
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="flex h-24 flex-col border border-zinc-400 bg-zinc-200">
|
||||
<div class="m-1 h-3 w-14 self-start bg-zinc-400"></div>
|
||||
<div class="mx-1 h-2 w-20 bg-zinc-300"></div>
|
||||
<div class="mx-1 mt-1 h-2 w-12 bg-zinc-300"></div>
|
||||
</div>
|
||||
<div class="h-24 border border-zinc-400 bg-zinc-300"></div>
|
||||
<div class="h-24 border border-zinc-400 bg-zinc-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-b border-zinc-200 bg-zinc-50 px-10 py-4">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">
|
||||
Receba as novidades da campanha
|
||||
</p>
|
||||
<div class="mt-2 h-8 w-72 border border-zinc-300 bg-white"></div>
|
||||
</div>
|
||||
<div class="bg-zinc-100 px-10 py-4">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">Rodapé</p>
|
||||
</div>
|
||||
|
||||
<!-- modal sobre a home -->
|
||||
<div class="absolute inset-0 bg-zinc-950/50">
|
||||
<div
|
||||
class="absolute top-1/2 left-1/2 w-[420px] -translate-x-1/2 -translate-y-1/2 border border-zinc-400 bg-white p-0 text-zinc-950 shadow-xl"
|
||||
>
|
||||
<div class="flex items-start gap-3 px-5 pt-5">
|
||||
<div>
|
||||
<p class="text-base font-black">Personalize com seu nome</p>
|
||||
</div>
|
||||
<span class="ml-auto text-lg leading-none text-zinc-500">×</span>
|
||||
</div>
|
||||
<div class="px-5 pt-4 pb-5">
|
||||
<div class="mx-auto flex h-56 w-40 flex-col border border-zinc-300 bg-zinc-200 p-3">
|
||||
<div class="h-4 w-16 bg-zinc-400"></div>
|
||||
<div class="mt-2 h-5 w-32 bg-zinc-500"></div>
|
||||
<div class="mt-3 h-3 w-24 self-center bg-zinc-400"></div>
|
||||
<div class="mt-auto h-4 w-28 self-center bg-zinc-500"></div>
|
||||
</div>
|
||||
<p class="mt-4 text-sm font-bold text-zinc-950">Seu nome</p>
|
||||
<div class="mt-2 h-10 border border-zinc-300 bg-white"></div>
|
||||
<p class="mt-2 text-xs text-zinc-600">
|
||||
Use seu primeiro nome ou o nome pelo qual as pessoas conhecem você.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-3 border-t border-zinc-300 px-5 py-4">
|
||||
<div
|
||||
class="flex h-10 flex-1 items-center justify-center border border-zinc-300 text-xs font-bold"
|
||||
>
|
||||
Cancelar
|
||||
</div>
|
||||
<div
|
||||
class="flex h-10 flex-1 items-center justify-center bg-indigo-600 text-xs font-bold text-white"
|
||||
>
|
||||
Criar meu card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-zinc-500">
|
||||
Nota: o modal abre sobre a home e fecha de volta à seção; nenhuma navegação.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Cena 2: mobile com drawer -->
|
||||
<section class="mt-12">
|
||||
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
|
||||
Cena 2 · Home mobile (~390px) — drawer do compositor
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
Mesma ilha, casca inferior; fechar devolve à seção sem perder a posição de rolagem.
|
||||
</p>
|
||||
|
||||
<div class="mt-4 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-4">
|
||||
<p class="text-[10px] font-bold tracking-wider text-zinc-400 uppercase">
|
||||
Acompanhe de perto
|
||||
</p>
|
||||
<div class="mt-2 h-8 bg-zinc-200"></div>
|
||||
</div>
|
||||
<div class="border-y-2 border-indigo-500 px-5 py-5">
|
||||
<p class="text-[10px] font-bold tracking-wider text-indigo-600 uppercase">Faça parte</p>
|
||||
<div class="mt-2 h-4 w-48 bg-zinc-400"></div>
|
||||
<div class="mt-2 h-3 w-64 bg-zinc-300"></div>
|
||||
<div class="mt-4 flex snap-x gap-3 overflow-hidden">
|
||||
<div
|
||||
class="flex h-40 w-[78%] shrink-0 flex-col border border-zinc-400 bg-zinc-200 p-2"
|
||||
>
|
||||
<div class="h-3 w-14 bg-zinc-400"></div>
|
||||
<div class="mt-1 h-4 w-24 bg-zinc-500"></div>
|
||||
<div class="mt-2 h-2 w-16 bg-zinc-400"></div>
|
||||
</div>
|
||||
<div class="h-40 w-[78%] shrink-0 border border-zinc-400 bg-zinc-300"></div>
|
||||
</div>
|
||||
<p class="mt-3 text-[11px] font-semibold text-zinc-500">
|
||||
Sem CTA — tocar num modelo abre o drawer
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative h-72 bg-zinc-950/50">
|
||||
<div class="absolute inset-x-0 bottom-0 border-t border-zinc-400 bg-white">
|
||||
<div class="mx-auto mt-2 h-1 w-10 rounded-full bg-zinc-300"></div>
|
||||
<div class="flex items-start gap-3 px-5 pt-4">
|
||||
<p class="text-base font-black">Enquadre sua foto</p>
|
||||
<span class="ml-auto text-lg leading-none text-zinc-500">×</span>
|
||||
</div>
|
||||
<div class="px-5 pt-3 pb-4">
|
||||
<p class="text-sm text-zinc-700">
|
||||
Arraste para posicionar e use os controles para aproximar ou ajustar.
|
||||
</p>
|
||||
<div class="mx-auto mt-3 h-32 w-32 border border-zinc-300 bg-zinc-200"></div>
|
||||
<div class="mt-3 flex gap-3">
|
||||
<div class="h-10 flex-1 border border-zinc-300"></div>
|
||||
<div class="h-10 flex-1 bg-indigo-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cena 3: fidelidade do tile de nome -->
|
||||
<section class="mt-12">
|
||||
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
|
||||
Cena 3 · Tile do modelo de nome — fiel ao resultado
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
O tile passa a repetir a geometria do card real: nome na mesma borda esquerda do "SOU",
|
||||
fonte display em peso forte, maior, na cor de destaque. Arte real omitida.
|
||||
</p>
|
||||
|
||||
<div class="mt-4 flex flex-wrap items-start gap-8">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-zinc-400">Hoje — centralizado e menor</p>
|
||||
<div class="mt-2 flex h-64 w-48 flex-col border border-zinc-600 bg-zinc-200 p-4">
|
||||
<div class="h-4 w-16 bg-zinc-400"></div>
|
||||
<div class="mt-3 h-4 w-32 self-center bg-zinc-500"></div>
|
||||
<div class="mt-6 h-3 w-24 self-center bg-zinc-400"></div>
|
||||
<div class="mt-auto h-4 w-28 bg-zinc-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-indigo-400">
|
||||
Proposto — alinhado à esquerda com "SOU"
|
||||
</p>
|
||||
<div class="mt-2 flex h-64 w-48 flex-col border border-indigo-500 bg-zinc-200 p-4">
|
||||
<div class="h-4 w-16 bg-zinc-400"></div>
|
||||
<div class="mt-3 h-6 w-36 bg-zinc-600"></div>
|
||||
<div class="mt-6 h-3 w-24 self-center bg-zinc-400"></div>
|
||||
<div class="mt-auto h-4 w-28 bg-zinc-500"></div>
|
||||
</div>
|
||||
<p class="mt-2 max-w-48 text-[11px] leading-4 text-zinc-500">
|
||||
Exemplo literal: <span class="font-semibold text-zinc-300">SEU NOME</span> · borda
|
||||
esquerda igual à do "SOU" · Brexter 700 · #ffec01
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cena 4: modal enxuto + ajuda legível -->
|
||||
<section class="mt-12">
|
||||
<h2 class="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
|
||||
Cena 4 · Compositor de foto — moldura enxuta e ajuda legível
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
Sem o vão interno de 32px: o conteúdo encosta na moldura com o respiro próprio do
|
||||
componente. A ajuda usa cinza escuro com contraste ≥ 4.5:1 sobre branco.
|
||||
</p>
|
||||
|
||||
<div class="mt-4 flex flex-wrap items-start gap-8">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-zinc-400">
|
||||
Hoje — vão interno grande + ajuda clara
|
||||
</p>
|
||||
<div class="mt-2 w-[380px] border border-zinc-600 bg-white p-8 text-zinc-950">
|
||||
<p class="text-sm font-bold">Enquadre sua foto</p>
|
||||
<p class="mt-1 text-sm text-zinc-300">
|
||||
Arraste para posicionar e use os controles para aproximar ou ajustar.
|
||||
</p>
|
||||
<div class="mx-auto mt-4 h-40 w-40 border border-zinc-300 bg-zinc-200"></div>
|
||||
<div class="mt-4 flex gap-3">
|
||||
<div class="h-10 flex-1 border border-zinc-300"></div>
|
||||
<div class="h-10 flex-1 bg-indigo-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-indigo-400">Proposto — encostado + ajuda escura</p>
|
||||
<div class="mt-2 w-[380px] border border-indigo-500 bg-white p-0 text-zinc-950">
|
||||
<div class="px-5 pt-5">
|
||||
<p class="text-sm font-bold">Enquadre sua foto</p>
|
||||
<p class="mt-1 text-sm text-zinc-700">
|
||||
Arraste para posicionar e use os controles para aproximar ou ajustar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-5 pt-3 pb-5">
|
||||
<div class="mx-auto h-40 w-40 border border-zinc-300 bg-zinc-200"></div>
|
||||
</div>
|
||||
<div class="flex gap-3 border-t border-zinc-200 px-5 py-4">
|
||||
<div class="h-10 flex-1 border border-zinc-300"></div>
|
||||
<div class="h-10 flex-1 bg-indigo-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 max-w-80 text-[11px] leading-4 text-zinc-500">
|
||||
Moldura: borda fina e raio preservados; só o padding base de 32px do desktop é
|
||||
neutralizado.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
112
docs/plans/cards-personalizados-ajustes.md
Normal file
112
docs/plans/cards-personalizados-ajustes.md
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
# Cards personalizados: ajustes de fidelidade e experiência (S14)
|
||||
|
||||
Status: rascunho
|
||||
Atualizado em: 2026-09-12
|
||||
Issue: #959
|
||||
Priority: P1
|
||||
Model: composer-2.5
|
||||
Impeccable: C — ajustes de fidelidade e interação no funil público de cards (home + compositor)
|
||||
Rascunho UI: docs/plans/cards-personalizados-ajustes-ui-draft.html
|
||||
Appetite: ~1–1,5 dia eng; seis ajustes verificáveis no funil já entregue, sem fluxo novo
|
||||
Responsável: —
|
||||
|
||||
## Intenção
|
||||
|
||||
O S13 (#941) entregou o funil de cards e está em produção: a seção `Mostre que você está com Solla` na home e o compositor em `/cards`. O humano revisou o funil e pediu seis ajustes de fidelidade e experiência: o modelo da home deve abrir o compositor ali mesmo; o nome no card gerado deve alinhar à esquerda com a linha `SOU`; o tile do modelo de nome deve ser fiel ao resultado real; a seção precisa de uma posição melhor na home; a moldura do modal tem um vão interno grande demais; e o texto de ajuda está ilegível por baixo contraste.
|
||||
|
||||
É um refinamento do que já existe — nenhum modelo, rota ou mecanismo novo. A promessa ao visitante continua a mesma: mostrar apoio com a identidade oficial, sem conta e sem que nome ou foto saiam do aparelho.
|
||||
|
||||
**Decisões do humano (2026-09-12, gate):** a home passa a abrir o MESMO compositor de `/cards` (modal no desktop, drawer no mobile), mantendo a pessoa na homepage; o CTA `Criar meu card` da home é removido — os três modelos passam a ser o único gatilho. Isso reverte deliberadamente a decisão do gate do S13 de que `/cards` seria a única superfície de edição; o anti-goal "dois fluxos de criação" permanece — há um único editor, não dois.
|
||||
|
||||
## 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 um card pessoal com aparência oficial em poucos passos, sem sair de onde está nem entregar dados.
|
||||
- **Fluxo desejado:** vê a seção na home → toca em um modelo → o compositor abre ali mesmo (modal no desktop, drawer no mobile) → personaliza e confere → gera e baixa o PNG → fecha e continua na home. Quem chega direto em `/cards` (ou por link `?model=`) mantém o fluxo canônico.
|
||||
- **Anti-goals de produto:** virar editor gráfico completo, galeria, rede social, cadastro de apoiador, segundo editor ou novo canal de coleta de dados.
|
||||
|
||||
### Esboço de fluxo (C)
|
||||
|
||||
```text
|
||||
[home: seção "Mostre que você está com Solla"]
|
||||
→ [toca num modelo]
|
||||
→ [modal desktop | drawer mobile — compositor aberto na home]
|
||||
→ [personalizar + conferir] → [card pronto] → [baixar PNG] → [fechar → continua na home]
|
||||
(caminho canônico preservado: /cards e /cards?model=<id>)
|
||||
```
|
||||
|
||||
### Rascunho UI (C)
|
||||
|
||||
- Rascunho UI (gate): `docs/plans/cards-personalizados-ajustes-ui-draft.html`
|
||||
- Cenas: home com o compositor aberto em desktop e mobile, tile de nome fiel ao resultado, modal sem vão interno, ajuda legível e a nova ordem das seções.
|
||||
|
||||
## Objetivo e aceite
|
||||
|
||||
- Tocar em um modelo na home abre o compositor ali mesmo, sem navegar; a pessoa permanece na homepage e, ao fechar, volta à seção.
|
||||
- O CTA `Criar meu card` sai da seção da home: os três modelos são o único gatilho e abrem o compositor ali mesmo.
|
||||
- O nome no card gerado fica alinhado à esquerda com a linha `SOU` (borda x≈213), em uma e duas linhas, sem cortar texto; o ajuste de tamanho/quebra atual permanece.
|
||||
- O tile do modelo de nome reproduz o resultado real: mesma borda esquerda do `SOU`, fonte `Brexter 700`, mesma relação de tamanho/cap height e cor `#ffec01`, com `SEU NOME` como exemplo.
|
||||
- A seção é reposicionada na ordem da home: imediatamente antes de `Receba as novidades da campanha` e depois de `Acompanhe de perto`, mantendo a captura de contato como último bloco de conversão.
|
||||
- A moldura do modal do compositor encosta no conteúdo (sem o vão interno atual), preservando borda fina e raio.
|
||||
- O texto de ajuda `Arraste para posicionar e use os controles para aproximar ou ajustar.` fica legível nos dois shells (contraste ≥ 4.5:1 sobre branco).
|
||||
- Guardrails: nome e foto continuam 100% no aparelho (sem PII em rede/analytics, sem persistência); arte-mestre intocada; `/cards` e o deep-link `/cards?model=<id>` seguem funcionando; um único editor; as demais seções da home não mudam.
|
||||
|
||||
## 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 seguem insumos locais da imagem; nenhum conteúdo pessoal entra em analytics.
|
||||
|
||||
## Dados da decisão (literais)
|
||||
|
||||
- ID reservado: `S14`; Tipo: `feature`; Priority proposta: `P1`; Model: `composer-2.5`.
|
||||
- Frase de ajuda literal: `Arraste para posicionar e use os controles para aproximar ou ajustar.`
|
||||
- Placeholder literal do tile: `SEU NOME`.
|
||||
- Geometria-mestre do nome: borda esquerda x≈213 (canvas de 1080 de largura), tinta máxima 714px, cap height 106px, fill `#ffec01`, fonte `Brexter 700`.
|
||||
- Tokens de contraste: `--campaign-muted: #6c615e`, `--campaign-ink: #000000`.
|
||||
- Rota canônica preservada: `/cards` e deep-link `/cards?model=<id>`.
|
||||
- Seção na home: `id="cards"`, `data-home-section="cards"`, título `Mostre que você está com Solla`; o CTA `Criar meu card` é removido da home (os modelos são o único gatilho).
|
||||
- Nova ordem da home (decidida no gate): `… → Acompanhe de perto → cards → Receba as novidades da campanha → rodapé`.
|
||||
- Arquivos-mestre de referência: `/home/fsolla/Documentos/cards/eu-sou-solla/template-to-com-solla-site.jpg.jpeg` (preenchido) e `/home/fsolla/Documentos/cards/eu-sou-solla/template-to-com-solla-site-sem-o-nome.jpg.jpeg` (base).
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
- **Áreas prováveis:** seção e ordem da home em `src/app/(frontend)/(home)/`, componentes e catálogo em `src/components/cards/`, geometria/render em `src/lib/card*`, tokens em `src/app/(frontend)/styles.css`.
|
||||
- **Precedente a olhar:** o próprio S13 (`docs/plans/cards-personalizados-campanha.md` + `-impl.md`); `CardsStudio`/`CardComposer` para reusar a ilha na home sem duplicar editor; `CardModelTile`/`NAME_CARD_SLOT` para a fidelidade do tile.
|
||||
- **Risco de acoplamento:** o vão do modal nasce da classe base `sm:p-8` sobrevivendo ao override `p-0` (twMerge só remove a variante sem breakpoint); o contraste da ajuda vem de `DialogDescription`/`DrawerDescription` usarem `text-muted-foreground`, que `[data-theme='campaign-site']` não redefine (cai no near-white do `:root`). Resolver no menor blast radius, sem criar tema paralelo.
|
||||
|
||||
## Dependências
|
||||
|
||||
- Nenhuma.
|
||||
|
||||
## Fora de escopo
|
||||
|
||||
- Novos modelos, CMS de modelos ou métricas de uso.
|
||||
- Redesenho das demais seções da home ou da página `/cards`.
|
||||
- Remover `/cards` ou quebrar o deep-link `?model=`.
|
||||
- Compartilhamento direto em redes sociais.
|
||||
- Alterar as artes-mestre (compor por cima, nunca redesenhar).
|
||||
|
||||
## Rabbit holes de produto
|
||||
|
||||
- **Segundo editor na home.** Se alguém "só completar": nasce um compositor próprio na home e os comportamentos divergem. **Corte neste item:** a home abre o mesmo compositor, com o mesmo estado e a mesma ilha de edição.
|
||||
- **Redesenhar o modal inteiro.** Se alguém "só completar": vira repaginação do compositor. **Corte neste item:** corrigir o vão da moldura e o contraste da ajuda, sem mudar estrutura.
|
||||
- **Trocar a arte para "melhorar" a fidelidade.** Se alguém "só completar": a arte oficial é reeditada. **Corte neste item:** o resultado segue a arte-mestre; o ajuste é do desenho/tile.
|
||||
- **Medir fidelidade "no olho".** Se alguém "só completar": aproximação visual vira critério. **Corte neste item:** usar a geometria do mestre (borda x≈213, tinta 714, cap 106, Brexter 700, `#ffec01`).
|
||||
|
||||
## Questões em aberto (produto)
|
||||
|
||||
- **Onde a seção entra na home?** **Decidido no gate (2026-09-12): antes de `Receba as novidades da campanha` e depois de `Acompanhe de perto`** — mantém a captura de contato como último bloco de conversão.
|
||||
- **O que faz o CTA `Criar meu card` da home?** **Decidido no gate (2026-09-12): o CTA é removido da home** — tocar num modelo já abre o compositor de criação; a seção fica só com os três modelos como gatilho.
|
||||
- **`/cards` continua existindo?** **Decidido no gate (2026-09-12): sim**, como página canônica e deep-link; a mudança é só o comportamento da home.
|
||||
|
||||
## Referências
|
||||
|
||||
- GitHub Issue #941 (S13, entregue)
|
||||
- `docs/plans/cards-personalizados-campanha.md` e `docs/plans/cards-personalizados-campanha-impl.md`
|
||||
- `docs/changelog/2026-09-12-s13-cards-personalizados.md`
|
||||
- Rascunho UI (gate): `docs/plans/cards-personalizados-ajustes-ui-draft.html`
|
||||
- `src/app/(frontend)/(home)/CampaignCardsSection.tsx`, `src/app/(frontend)/(home)/page.tsx`, `src/app/(frontend)/(home)/cards/page.tsx`
|
||||
- `src/components/cards/{CardsStudio,CardComposer,CardModelGallery,CardModelTile}.tsx`, `src/lib/{cardModels,cardNameFit,cardRender}.ts`
|
||||
- `src/app/(frontend)/styles.css` e `src/app/(frontend)/fonts.ts`
|
||||
- `AGENTS.md` e `AGENTS-public.md`
|
||||
Loading…
Reference in a new issue