Cadastro de cupom

Card de cadastro de cupom fiscal: CPF com máscara, número da nota e botão de envio. Valida os campos obrigatórios, mostra os erros nos próprios campos e uma mensagem de sucesso depois do envio. Usa AppInput, AppButton e Typography, com cores dos tokens, então segue a marca e o modo da página.

const Default = () => <CadastroCupom
    title="Cadastre seu cupom"
    description="Preencha os dados da nota para receber seus números da sorte."
    submitLabel="Participar"
    successMessage="Cupom cadastrado! Seus números da sorte chegam por e-mail." />;

O que adaptar

O bloco recebe os textos e a ação de envio por props; troque o conteúdo no seu hotsite.

Prop	O que é
`title`	Título do card (`h2`).
`description`	Texto de apoio abaixo do título.
`submitLabel`	Texto do botão de envio.
`successMessage`	Mensagem exibida depois de um envio válido.
`onSubmit`	Recebe `{ cpf, nota }` (CPF só com dígitos) depois da validação; ligue à API da campanha.

A validação cobre só o preenchimento (CPF com 11 dígitos e nota não vazia). Regras da campanha, como dígitos verificadores do CPF ou nota já cadastrada, ficam na API.