Criar um site institucional one-page em Next.js + Tailwind CSS + shadcn/ui para uma
campanha de conscientização sobre feminicídio direcionada a homens, chamada "Isso
Também É Sobre Nós" / "Causa Comum".
--background: oklch(0.12 0.005 250) /* preto quase puro /
--surface: oklch(0.16 0.008 250) / fundo de cards /
--surface-elevated: oklch(0.20 0.01 250)
--graphite: oklch(0.19 0.012 255) / camada intermediária entre preto e surface /
--foreground: oklch(0.97 0.005 250) / texto principal, quase branco /
--muted-foreground: oklch(0.68 0.01 250) / texto secundário /
--blood: oklch(0.55 0.24 27) / vermelho de destaque — NÃO rosa, NÃO laranja */
--border: oklch(0.25 0.01 250)
Tipografia:
Navbar: fixa, fundo com backdrop-blur, logo "ISSO TAMBÉM É SOBRE NÓS" (a palavra
NÓS em vermelho), links de navegação à direita, usar componente shadcn Sheet para
menu mobile.
1. HERO — fundo com gradiente radial sutil (substituindo vídeo):
radial-gradient(ellipse at 20% 0%, blood/25%, transparent 55%), linear-gradient(180deg, background-escuro, background).
Badge "Campanha de conscientização" com ponto pulsante vermelho (usar animação
keyframe de pulse, não Tailwind padrão). Título gigante "ISSO TAMBÉM É SOBRE NÓS."
(NÓS em vermelho), fonte Bebas Neue, leading apertado (0.95). Parágrafo de contexto.
2 CTAs: botão sólido vermelho "Entenda o tema" (shadcn Button variant default) e
botão outline "Como denunciar" com ícone de telefone. Número "1467" gigante como
marca d'água translúcida (opacity 0.12) no canto direito, contando de 0 até 1467
via IntersectionObserver quando entra na viewport. Estatística de apoio abaixo dos
CTAs: "1.467 mulheres vítimas de feminicídio no Brasil em 2023. Uma morte a cada
6 horas. Fonte: FBSP".
2. O QUE É FEMINICÍDIO (eyebrow "01 · Definição")
3 cards (shadcn Card) lado a lado, cada um com ícone (lucide-react: Skull, Scale,
Gavel) em badge circular vermelho translúcido, título e texto. Abaixo, um bloco de
citação com borda esquerda vermelha grossa (border-left 4px blood), texto em
Bebas Neue tamanho grande: "Feminicídio é o ponto final de uma trajetória de
violência ignorada, normalizada ou silenciada por todos que estavam ao redor."
3. O CICLO DA VIOLÊNCIA (eyebrow "02 · Padrão")
Diagrama circular SVG interativo (custom, não shadcn) com 4 fases posicionadas nos
4 pontos cardinais do círculo (Tensão-topo, Explosão-direita, Lua de mel-baixo,
Calmaria-esquerda). Ao passar mouse OU focar OU tocar em cada label, o arco
correspondente acende em vermelho (transição de opacidade), o ponto cresce, e o
texto central do círculo atualiza mostrando a descrição da fase ativa (fonte serif
itálico). Em mobile, versão compacta: círculo menor sem labels ao redor + lista
abaixo em formato accordion (shadcn Accordion) onde tocar expande a descrição —
NÃO duplicar como cards estáticos, o accordion É a interação.
4. SINAIS DE ALERTA (eyebrow "03 · Atenção")
Lista numerada em 2 colunas (grid), SEM cards/caixas — cada item é uma linha com
número grande em serif (ex: "01") à esquerda, título Bebas Neue + descrição à
direita, separados por border-bottom fina. Ao hover/focus, uma barra vermelha
fina aparece na borda esquerda do item (transição de scale). 8 itens: Controle
excessivo, Isolamento social, Controle financeiro, Humilhação, Ciúme patológico,
Ameaças, Coação sexual, Violência física (usar descrições completas — ver conteúdo
de referência anexo).
5. O PAPEL DO HOMEM (eyebrow "04 · Para você")
Layout 2 colunas assimétrico (grid-cols-12, split 5/7): coluna esquerda STICKY
(sticky top-28) com título e texto de contexto fixos durante o scroll; coluna
direita com 6 cards empilhados (shadcn Card), cada um com número grande em
Bebas Neue + título + descrição, hover muda a borda pra vermelha.
6. LEGISLAÇÃO DE PROTEÇÃO (eyebrow "05 · Lei")
2 cards grandes lado a lado (shadcn Card), um deles com destaque visual (borda
vermelha + fundo vermelho translúcido 6%) para "Lei Maria da Penha", outro neutro
para "Lei do Feminicídio". Cada card tem ícone Shield, tag da lei, título grande,
lista de 4 pontos com bullet vermelho.
7. DADOS (eyebrow "06 · Realidade")
Grid de 4 cards (shadcn Card) com número gigante em Bebas Neue vermelho (contador
animado via IntersectionObserver), label abaixo, fonte em caps pequena. Hover eleva
o card (-translate-y-1) e a borda fica vermelha. Dados: 1.467 feminicídios (2023),
258.941 casos de violência doméstica, 68% mortas pelo parceiro/ex, 6h intervalo
médio. Fonte: FBSP/Atlas da Violência.
8. DENUNCIE. SALVE UMA VIDA. (eyebrow "07 · Aja agora")
ÚNICA seção com fundo vermelho sólido (bg-blood), invertendo toda a paleta. Título
gigante branco. 3 cards clicáveis (tags <a href="tel:...">) com fundo preto
translúcido + backdrop-blur, número de telefone gigante, título e descrição: 180
(Central de Atendimento à Mulher, 24h), 190 (Polícia Militar, emergência), 197
(Polícia Civil, B.O.). Aviso final em card com borda branca translúcida: "Em caso
de risco iminente, ligue 190 imediatamente."
FOOTER
Frase de impacto grande: "ENQUANTO UM HOMEM CALAR, OUTRA MULHER MORRE." (segunda
linha em vermelho). 3 colunas: Fontes legais, Fontes de dados, Canais oficiais.
.reveal / .reveal.is-visibleprefers-reduced-motion: reduce — desabilitar todas as animaçõesscroll-behavior: smooth no htmlSite estático, sem formulários nem autenticação nessa primeira versão. Priorizar
fidelidade tipográfica e a interação do diagrama circular — esses dois elementos
são os mais difíceis de acertar e o maior teste real da capacidade do v0.