plan(PUB5): slogan 'Mais saúde mais futuro' no hero e rodapé #16
5 changed files with 215 additions and 0 deletions
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
132
docs/plans/slogan-mais-saude-mais-futuro-ui-draft.html
Normal file
132
docs/plans/slogan-mais-saude-mais-futuro-ui-draft.html
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!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 — Slogan do hero e footer</title>
|
||||
</head>
|
||||
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||||
<main class="mx-auto max-w-5xl p-8">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Visitante da home da campanha — troca do slogan no hero e no rodapé: "Um mandato do tamanho
|
||||
da Bahia" → "Mais saúde mais futuro". Referência visual: hero do Penpot (duas linhas,
|
||||
uppercase). Cenas abaixo: hero desktop, hero mobile, rodapé desktop.
|
||||
</p>
|
||||
|
||||
<section
|
||||
data-shot="hero-desktop"
|
||||
class="mt-6 overflow-hidden rounded-xl ring-1 ring-zinc-700"
|
||||
>
|
||||
<div class="relative bg-zinc-900 px-8 py-14">
|
||||
<div class="max-w-xl">
|
||||
<h1
|
||||
class="font-sans text-5xl font-black leading-[1.12] tracking-tight uppercase text-zinc-100"
|
||||
>
|
||||
<span class="block font-semibold">Mais saúde</span>
|
||||
<span class="block font-black">Mais futuro</span>
|
||||
</h1>
|
||||
<p class="mt-4 max-w-md text-sm leading-snug uppercase text-zinc-300">
|
||||
Médico sanitarista. Criou o SAMU 192 e o Brasil Sorridente. Já comandou a saúde em
|
||||
Vitória da Conquista, na Bahia e no Brasil — e leva o mandato aos 417 municípios, da
|
||||
saúde à educação.
|
||||
</p>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<a
|
||||
class="inline-flex min-h-11 items-center justify-center rounded-[10px] border-2 border-zinc-400 px-3 text-center text-sm font-extrabold text-zinc-100"
|
||||
>
|
||||
Conhecer bandeiras
|
||||
</a>
|
||||
<a
|
||||
class="inline-flex min-h-11 items-center justify-center rounded-[10px] bg-zinc-100 px-3 text-center text-sm font-black text-zinc-900"
|
||||
>
|
||||
Quero apoiar — 30 segundos
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8 text-xs leading-relaxed text-zinc-400">
|
||||
<p><strong class="text-zinc-200">DIAP</strong> entre os 40 melhores da Câmara</p>
|
||||
<p class="mt-1">
|
||||
<strong class="text-zinc-200">Mais votado</strong> do PT-BA em 2022
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-shot="hero-mobile"
|
||||
class="mt-6 w-[390px] overflow-hidden rounded-xl ring-1 ring-zinc-700"
|
||||
>
|
||||
<div class="relative bg-zinc-900 px-6 py-12">
|
||||
<h1
|
||||
class="font-sans text-3xl font-black leading-[1.12] tracking-tight uppercase text-zinc-100"
|
||||
>
|
||||
<span class="block font-semibold">Mais saúde</span>
|
||||
<span class="block font-black">Mais futuro</span>
|
||||
</h1>
|
||||
<p class="mt-4 text-xs leading-snug uppercase text-zinc-300">
|
||||
Médico sanitarista. Criou o SAMU 192 e o Brasil Sorridente. Já comandou a saúde em
|
||||
Vitória da Conquista, na Bahia e no Brasil — e leva o mandato aos 417 municípios, da
|
||||
saúde à educação.
|
||||
</p>
|
||||
<div class="mt-6 grid grid-cols-2 gap-3">
|
||||
<a
|
||||
class="inline-flex min-h-11 items-center justify-center rounded-[10px] border-2 border-zinc-400 px-3 text-center text-sm font-extrabold text-zinc-100"
|
||||
>
|
||||
Conhecer bandeiras
|
||||
</a>
|
||||
<a
|
||||
class="inline-flex min-h-11 items-center justify-center rounded-[10px] bg-zinc-100 px-3 text-center text-sm font-black text-zinc-900"
|
||||
>
|
||||
Quero apoiar
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8 text-xs leading-relaxed text-zinc-400">
|
||||
<p><strong class="text-zinc-200">DIAP</strong> entre os 40 melhores da Câmara</p>
|
||||
<p class="mt-1"><strong class="text-zinc-200">Mais votado</strong> do PT-BA em 2022</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
data-shot="footer-desktop"
|
||||
class="mt-6 overflow-hidden rounded-xl ring-1 ring-zinc-700"
|
||||
>
|
||||
<footer class="bg-zinc-900 px-8 py-10">
|
||||
<div class="grid gap-6 md:grid-cols-[2fr_1fr_1fr]">
|
||||
<div>
|
||||
<h4 class="text-base font-extrabold text-zinc-100">Jorge Solla 1313</h4>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
Deputado Federal · PT · Bahia
|
||||
<br />
|
||||
Mais saúde mais futuro.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-bold text-zinc-100">Navegue</h4>
|
||||
<ul class="mt-2 grid list-none gap-1.5 p-0 text-sm text-zinc-400">
|
||||
<li>Bandeiras</li>
|
||||
<li>Quero apoiar</li>
|
||||
<li>Privacidade</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-bold text-zinc-100">Redes</h4>
|
||||
<ul class="mt-2 grid list-none gap-1.5 p-0 text-sm text-zinc-400">
|
||||
<li>Instagram</li>
|
||||
<li>YouTube</li>
|
||||
<li>Facebook</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-zinc-700 pt-5 text-xs leading-relaxed text-zinc-500">
|
||||
Jorge José Santos Pereira Solla · Candidato a Deputado Federal · Nº 1313 · Federação
|
||||
Brasil da Esperança (PT/PCdoB/PV) · CNPJ: 68.430.467/0001-05 · Propaganda eleitoral
|
||||
gratuita. Site de campanha — conteúdo sob responsabilidade do candidato. Eleições 2026 ·
|
||||
1º turno: 04/10/2026.
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
83
docs/plans/slogan-mais-saude-mais-futuro.md
Normal file
83
docs/plans/slogan-mais-saude-mais-futuro.md
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
# Slogan da campanha: "Mais saúde mais futuro" no hero e no rodapé
|
||||
|
||||
Status: registrado
|
||||
Atualizado em: 2026-08-17
|
||||
Issue: #15
|
||||
Priority: P1
|
||||
Model: composer-2.5
|
||||
Impeccable: B — encaixe de copy em `CampaignHero` e `CampaignFooter` (superfícies existentes, sem layout novo)
|
||||
Rascunho UI: docs/plans/slogan-mais-saude-mais-futuro-ui-draft.html + PNGs embutidos abaixo
|
||||
Appetite: ~0,25–0,5 dia eng; troca de strings + ajuste de testes; sem migration
|
||||
Responsável: —
|
||||
|
||||
## Intenção
|
||||
|
||||
O diretor de comunicação da campanha pediu a troca do slogan "Um mandato do tamanho da Bahia" por
|
||||
**"Mais saúde mais futuro"** no hero e no rodapé do site de campanha (jorgesolla1313.com.br). O
|
||||
slogan anterior pertencia ao discurso do mandato vigente; o novo fala da campanha 2026 — saúde é o
|
||||
tema-âncora do candidato (médico sanitarista, criador do SAMU e do Brasil Sorridente) e o hero já
|
||||
vende essa biografia. A referência visual é o hero alterado no Penpot: slogan em duas linhas,
|
||||
uppercase, com a segunda linha em peso maior.
|
||||
|
||||
## Persona e fluxo
|
||||
|
||||
- **Persona / contexto:** eleitor baiano visitando a home pública da campanha (desktop e celular), primeiro contato com o candidato.
|
||||
- **Job principal:** reconhecer em 2 segundos o que a campanha propõe — "mais saúde, mais futuro" — antes de ler a biografia e decidir se apoia.
|
||||
- **Fluxo desejado:** abre a home → lê o slogan novo no hero → (opcional) continua para biografia/apoio → no fim da página, o rodapé repete a mesma frase como assinatura da campanha.
|
||||
- **Anti-goals de produto:** não redesenhar hero/rodapé (é troca de copy); não alterar CTAs, imagens, biografia ou provas parlamentares; não criar campo editável no admin (fora do pedido — copy fixa no componente, como hoje).
|
||||
|
||||
### Rascunho UI (B)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Objetivo e aceite
|
||||
|
||||
- O h1 do hero exibe "MAIS SAÚDE / MAIS FUTURO" (duas linhas, uppercase, segunda linha com peso maior), no lugar de "UM MANDATO DO / TAMANHO DA BAHIA".
|
||||
- O `aria-label` do h1 acompanha o texto novo (acessibilidade de leitor de tela).
|
||||
- O rodapé exibe "Mais saúde mais futuro." no bloco de identificação, no lugar de "Um mandato do tamanho da Bahia.".
|
||||
- A frase antiga deixa de aparecer em qualquer superfície pública do site de campanha (hero e rodapé da home).
|
||||
- Testes existentes que pinam o slogan antigo (`tests/unit/campaignHero.unit.spec.tsx`, `tests/unit/campaignHome.unit.spec.tsx`, `tests/e2e/frontend.e2e.spec.ts`) são atualizados para o novo.
|
||||
|
||||
## Dados (intenção)
|
||||
|
||||
Dados: N/A — troca de copy sem métrica nova.
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
- **Áreas prováveis:** `src/components/CampaignHero.tsx` (h1 em dois spans + `aria-label`), `src/components/CampaignFooter.tsx` (linha do bloco de identificação); home pública em `src/app/(frontend)/(home)/page.tsx` (apenas importa os dois componentes).
|
||||
- **Precedente a olhar:** o próprio componente atual (a estrutura de duas linhas já existe — muda só o texto); referência visual no Penpot (hero editado pelo diretor).
|
||||
- **Risco de acoplamento:** nenhum além dos testes que pinam a string — atualizar juntos.
|
||||
|
||||
## Dependências
|
||||
|
||||
- Nenhuma.
|
||||
|
||||
## Fora de escopo
|
||||
|
||||
- Redesenho do hero/rodapé (layout, imagens, CTAs) — a referência do Penpot vale só para o texto do slogan.
|
||||
- Cabeçalho da página de artigos (`src/app/(frontend)/artigos/page.tsx`, "O mandato do tamanho da Bahia") — outra superfície; tratar só se o diretor pedir.
|
||||
- Documentos históricos que citam o slogan antigo (`docs/campanha/*`, `.opencode/agent/designer-campanha-solla.md`, skills de comunicação) — registro, não superfície pública.
|
||||
- Slogan em materiais externos (redes sociais, WhatsApp) — fora deste repo.
|
||||
|
||||
## Rabbit holes de produto
|
||||
|
||||
- **Redesign no vácuo.** Se alguém "só completar" e resolver que a frase nova merece mais destaque ou novo layout: explode para redesenho do hero. **Corte neste item:** copy fixa na anatomia atual; a referência do Penpot não muda layout.
|
||||
- **Caça a todas as ocorrências.** A frase existe em docs históricos e agent docs; editar isso não é o pedido e cria ruído. **Corte:** só superfícies públicas (hero + rodapé) + testes que pinam.
|
||||
|
||||
## Questões em aberto (produto)
|
||||
|
||||
**Decidido no gate (2026-08-17):**
|
||||
|
||||
- Cabeçalho da página de artigos: **não muda** — escopo é hero + rodapé.
|
||||
- Rodapé: **sentence case com ponto** ("Mais saúde mais futuro.") — padrão tipográfico atual do rodapé.
|
||||
|
||||
## Referências
|
||||
|
||||
- GitHub Issue: https://git.solla.dev/fsolla/teqo/issues/15
|
||||
- Referência visual: hero da campanha no Penpot (slogan "Mais saúde" / "Mais futuro", uppercase, segunda linha em peso maior)
|
||||
- `src/components/CampaignHero.tsx`, `src/components/CampaignFooter.tsx`
|
||||
- Testes que pinam a string: `tests/unit/campaignHero.unit.spec.tsx`, `tests/unit/campaignHome.unit.spec.tsx`, `tests/e2e/frontend.e2e.spec.ts`
|
||||
Loading…
Reference in a new issue