Hero

Pronto

Cabeçalho grande de página com título display, subtítulo e CTA. Estabelece tom editorial — Source Serif italic + brass accent.

Usar quando

Topo de página principal (Painel, landing). Marketing pages. Estado de boas-vindas no onboarding.

Não usar quando

Páginas internas operacionais (use header simples). Listas (header pequeno basta).

Variantes

Padrão (display + sub + CTA)

Gestão jurídica desenhada para advogados.

Captura processos, organiza prazos, automatiza cobranças. Discrição e precisão de software jurídico premium.

Com gradient sutil de brass

O escritório do futuro é digital.

Tudo que sua banca precisa em uma plataforma só. IA que lê intimações, capta prazos, e gera petições.

Com 2 CTAs (primary + ghost)

Bem-vindo de volta, Paulo.

Você tem 3 prazos esta semana e 2 intimações novas para revisar.

Compacto (padding reduzido)

Modelos premium

152 templates curados por especialistas em cada área do direito.

Microinterações

Microinteração	Disparada por	Comportamento	Timing
Mount stagger	componente entra	Título → sub → CTA aparecem com 80ms de stagger	`500ms total (3 × 80ms)`
Italic glow	render	Palavras em italic brass têm leve glow text-shadow	`static`
CTA hover	mouseenter no CTA primário	Padrão Button (background ink → ink-2)	`150ms`
Gradient pan (parallax sutil)	scroll (opcional)	Background-position move 2-5% conforme scroll	`scroll-bound`

Acessibilidade

Acessibilidade — checklist

ARIA esperado

<h1> dentro do hero (apenas 1 h1 por página)
CTA: <button> ou <a> com texto descritivo
role="region" aria-labelledby="hero-title"

Notas

h1 é único na página — hero é onde ele vive.
Italic brass é decoração editorial — texto plano também precisa fazer sentido.
Display tipo grande (40-80px) precisa de letter-spacing apertado (-0.022em).
Em mobile, reduza display de 5xl/6xl para 3xl.

Código

'use client';
import { ArrowRight } from 'lucide-react';
import { T, FONT, TYPE, WEIGHT, TRACK, SP, RADIUS } from '@/lib/tokens';

export function Hero({ title, italic, sub, cta, secondary }: HeroProps) {
  return (
    <section
      style={{
        padding: `${SP[20]}px ${SP[6]}px`,
        textAlign: 'center',
        background: `radial-gradient(ellipse at 50% 0%, rgba(164,124,43,0.06) 0%, transparent 60%), ${T.canvas}`,
      }}
      role="region" aria-labelledby="hero-title"
    >
      <h1 id="hero-title" style={{
        fontFamily: FONT.display,
        fontSize: TYPE['5xl'],
        fontWeight: WEIGHT.semibold,
        letterSpacing: TRACK.displayTight,
        lineHeight: 1.05,
        color: T.ink,
        margin: 0,
      }}>
        {title}{' '}
        <span style={{ fontStyle: 'italic', color: T.brass, letterSpacing: TRACK.displayItalic }}>
          {italic}
        </span>
      </h1>
      <p style={{
        fontSize: TYPE.lg,
        color: T.inkMuted,
        margin: `${SP[4]}px auto 0`,
        maxWidth: 560,
        lineHeight: 1.5,
      }}>
        {sub}
      </p>
      {cta && (
        <button style={{ /* padrão Button primary */ }}>
          {cta} <ArrowRight size={14} />
        </button>
      )}
    </section>
  );
}

Regras

Faça

✓Título display Source Serif (TYPE 4xl-5xl em desktop).
✓Italic brass na palavra de destaque (1-2 palavras MAX).
✓Subtítulo em sans muted, máx 2 linhas (~120 caracteres).
✓CTA primário visível e único.
✓Padding generoso (SP[20]+ vertical).
✓Em mobile, reduza display proporcionalmente.

Não faça

✗Não use mais de 1 hero por página.
✗Não use 3+ palavras em italic (perde impacto).
✗Não use 2 CTAs primários competindo.
✗Não use gradient agressivo (brass-tint sutil).
✗Não esqueça a hierarquia: h1 só aqui.
✗Não force imagem decorativa atrás do hero.

Tokens usados

Token	Valor	Papel
`T.canvas`	`#FBFAF6`	background
`T.brass`	`#A47C2B`	palavra italic destacada
`T.ink`	`#0A0A0A`	título display + CTA primary bg
`T.inkMuted`	`#5A5A5E`	subtítulo
`FONT.display`	`Source Serif Pro`	h1
`TYPE.5xl`	`80`	fontSize do h1
`TRACK.displayTight`	`-0.022em`	letter-spacing
`SP[20]`	`80`	padding vertical