Hero

O Hero é a primeira seção da página. Ele traz o título principal (o único h1 da página inicial), o texto de apoio, o botão principal e, se houver, um segundo botão, uma frase de segurança abaixo dos botões e uma nota de prova ou avaliação. Você escolhe a variante na composição e o conteúdo nos dados do projeto.

As quatro variantes:

• center-video: texto centralizado sobre uma imagem de vídeo. A imagem é um link com um rótulo visível; o HTML inicial não tem iframe nem script para o vídeo.
• background-carousel: texto fixo sobre imagens de fundo que giram sozinhas. O intervalo padrão é de 6000 ms e o nome padrão do carrossel é «Destaques». Os botões anterior e próximo só aparecem depois que o script carrega.
• split-image: texto à esquerda e foto à direita, lado a lado; no celular, empilhados. A proporção padrão das colunas é 6/6.
• split-form: texto em 7 colunas e formulário de lead em 5. O formulário é a ação, então o botão principal é opcional nesta variante; use um botão só quando a página precisa de outra rota, como o WhatsApp.

Hero

Pasta: ui/sections/hero

Variantes

Id	Variante	Tom
hero-center-video-light	center-video	light
hero-center-video-gray	center-video	gray
hero-center-video-dark	center-video	dark
hero-center-video-accent	center-video	accent
hero-center-video-secondary-cta-light	center-video · secondary-cta	light
hero-split-image-light	split-image	light
hero-split-image-7-5-light	split-image · 7/5	light
hero-split-image-proof-light	split-image · proof-note	light
hero-split-image-rating-light	split-image · rating	light
hero-split-form-light	split-form	light
hero-split-form-email-light	split-form · email	light
hero-split-form-rating-wrap-light	split-form · long rating label	light
hero-background-carousel-dark	background-carousel	dark
hero-background-carousel-secondary-cta-dark	background-carousel · secondary-cta	dark
hero-background-carousel-rating-dark	background-carousel · rating	dark

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
variant	"center-video" | "background-carousel" | "split-image" | "split-form"	Não	—
video	{ readonly href: string; readonly poster: UiImage; readonly label?: string; }	Não	—
eyebrow	string	Não	—
title	string	Sim	—
subtitle	string	Sim	—
cta	Cta	Não	—
secondaryCta	Cta	Não	Second button, after `cta`, with the secondary style.
proofNote	string	Não	Small reassurance line below the buttons (e.g. "Sem cartão de crédito").
rating	{ readonly value: number; readonly count: number; }	Não	—
ratingLabel	string	Não	—
tone	Tone	Não	—
density	Density	Não	—
width	Width	Não	—
id	string	Não	—
slides	readonly UiImage[]	Não	—
interval	number	Não	Milliseconds between slides; default 6000.
label	string	Não	Accessible name of the carousel; default "Destaques".
image	UiImage	Não	—
ratio	"6/6" | "7/5"	Não	Columns of the text and of the image out of 12; default "6/6".
form	LeadFormProps	Não	—

Onde aparece nos templates

• split-form: templates/landing-page/models/captura/files/src/data/content.ts:32, o único modelo com formulário.
• split-image: templates/landing-page/models/produto/files/src/data/content.ts:34, templates/landing-page/models/evento/files/src/data/content.ts:34, templates/multi-page/files/src/data/pages/home.ts:11 e templates/multi-page/models/catalogo/files/src/data/pages/home.ts:14.
• background-carousel: templates/one-page/files/src/data/content.ts:37 e templates/landing-page/models/lancamento/files/src/data/content.ts:35.

Nenhum template usa center-video; a variante existe em ui/, e a composição de uma página pode usá-la.

Captura da primeira variante do catálogo (center-video, tom claro, em 1280 px):

A mesma variante em 360 px: