Blocos

Um bloco é uma composição de componentes da biblioteca para uma seção de campanha (como “Como participar” ou “Prêmios”). Blocos ficam fora do pacote npm: você copia o código para o seu hotsite e troca os textos e dados.

Quando um bloco vira componente

Enquanto só uma campanha usa a seção, ela é um bloco, com o conteúdo escrito direto no código. Quando duas ou mais campanhas a reutilizam, ela passa a ser um componente da biblioteca, recebendo dados e callbacks por props.

Blocos disponíveis

Bloco	O que é
Header	Logo, navegação e cadastro ou acesso à conta, com menu móvel.
Hero	Abertura da campanha com título, arte e chamadas para ação.
Footer	Redes sociais, informações legais, links e crédito.
Como participar	Título, introdução, passos numerados e botão de ação.
Cadastro de cupom	CPF com máscara, número da nota, validação e mensagem de sucesso.
Produtos participantes	Carrossel de produtos (1 por vez no celular, 3 a partir de 880px de largura) e botão de ação.
FAQ	Perguntas frequentes em acordeão, uma aberta por vez.
Login	Acesso com CPF ou e-mail e senha, ao lado do convite para cadastro.
Recuperar senha	Pedido por e-mail, aviso de envio, nova senha com requisitos e conclusão.
Confirmação	Resultado de cupom, atendimento ou senha, com dados para conferir.
Números da sorte	Bilhetes do participante com status, estado vazio e paginação.
Banner de cookies	Aceite rápido e preferências por categoria.