Cta

A seção Cta é o convite para a ação, com um título, um texto curto e um botão ou um formulário. Nos templates ela fecha a página.

Ela tem duas variantes:

• band: uma faixa escura, em largura larga, com um botão.
• card: um cartão em tom cinza. A ação pode ser um botão (kind: "cta") ou um formulário de lead (kind: "lead"). Nenhum modelo usa o formulário dentro do Cta: o formulário de captura fica no Hero (split-form, modelo captura). Nos modelos, a ação é um botão de WhatsApp ou um link (veja Regras de UX e grade).

Cta

Pasta: ui/sections/cta

Variantes

Id	Variante	Tom
cta	buttons	light
cta-band-light	band	light
cta-band-gray	band	gray
cta-band-dark	band	dark
cta-band-accent	band	accent
cta-card-cta-light	card · cta	light
cta-card-cta-dark	card · cta	dark
cta-card-lead-gray	card · lead	gray
cta-card-lead-dark	card · lead	dark

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
variant	"band" | "card"	Não	—
cta	Cta	Não	—
title	string	Sim	—
text	string	Não	—
tone	Tone	Não	—
density	Density	Não	—
width	Width	Não	—
id	string	Não	—
action	CtaCardAction	Não	—

Onde aparece nos templates

• templates/one-page/files/src/pages/home.ts:60 e templates/landing-page/models/evento/files/src/pages/home.ts:72 montam CtaSection(c.cta, uiHost) no fim da página.
• templates/multi-page/files/src/pages/service.ts:90 usa a variante band no fim de cada página de serviço.
• templates/multi-page/models/catalogo/files/src/pages/catalog.ts:56 e :120 fecham a lista de itens e a página de cada categoria com o mesmo bloco.

Captura da primeira variante do catálogo (band, em 1280 px):

A mesma seção em 360 px:

O tom da seção é fixo pela variante: a faixa é dark e o cartão é gray. Para trocar, use a propriedade tone quando o componente aceitar (veja a tabela acima).