Design system

Componentes

Tudo aqui é reutilizável. Antes de criar um componente novo, procure nesta página — e se precisar de uma variação, adicione a prop no componente existente em vez de duplicar.

Captação

O formulário é uma peça só, usada de dois jeitos. Nome, e-mail e telefone são fixos — são regra do ambiente, não escolha da página. O que muda é a moldura, o tom e as perguntas próprias da edição.

Na página

Garanta sua vaga

Leva menos de um minuto.

<FormularioCaptura client:load evento={evento.slug} indicacao={indicacao} />

Com campos da edição

Conte um pouco de você

Duas perguntas a mais para personalizar sua trilha.

camposExtras={[
  { name: 'cargo', label: 'Seu cargo' },
  {
    name: 'experiencia',
    label: 'Experiência com IA',
    tipo: 'escolha',
    obrigatorio: true,
    opcoes: ['Nunca usei', 'Uso às vezes', 'Uso todo dia'],
  },
]}

Sobre fundo escuro

Entre para a lista

Vagas limitadas por turma.

<FormularioCaptura client:load evento={evento.slug} tom="escuro" />

Dentro de um diálogo

Para página de texto longo, em que o formulário no meio da leitura interrompe.

<CapturaEmModal
  evento={evento.slug}
  indicacao={indicacao}
  rotuloGatilho="Garantir minha vaga"
/>

Prop	Valores	Para quê
evento	slug da edição	Obrigatório. É o que amarra a página ao evento.
indicacao	código	Vem da query ou do cookie. Credita quem convidou.
tom	claro · escuro	Escuro para viver sobre imagem, vídeo ou seção escura.
moldura	cartao · solto	Solto desenha só os campos, para quem já tem cartão à volta.
camposExtras	lista	Perguntas da edição, depois dos três fixos.
semAtalho	booleano	Some com o "continuar como" de um clique.
titulo · descricao · rotuloBotao	texto	A copy da peça.
aceite	texto	Texto do aceite. Vazio esconde a caixa.

Campo extra vira name no envio e chave no de-para do ActiveCampaign — cadastre o mesmo nome em Eventos, Integração, para ele chegar lá.

Ações

Link externo

NovoPublicadoEm andamentoEncerradoBloqueadoEm breve

Formulário

Todo campo mora dentro de <Field>, que cuida de rótulo, dica, erro e da ligação de acessibilidade.

Sobreposições

Popover e dialog nativos: fechar no Esc, clique fora e foco preso já vêm do navegador.

Preciso saber programar?

Não. As trilhas partem do zero e cada uma tem um caminho por nível.

Por quanto tempo tenho acesso?

Enquanto o passe estiver ativo, com todo o conteúdo novo incluído.

Posso trocar de trilha?

Pode. O passe dá acesso às quatro.

Conteúdo e estado

Informação

Base zerada, pronta pra receber conteúdo.

Tudo certo

Lead registrado com sucesso.

Atenção

A fonte da marca ainda não foi adicionada.

Falhou

Não foi possível registrar agora.

Create

Card escuro com glow da trilha

Growth

Card escuro com glow da trilha

Agents

Card escuro com glow da trilha

Build

Card escuro com glow da trilha