Como participar

Seção “Como participar” de uma campanha: título, introdução, quatro passos (Compre, Cadastre, Vale brinde, Concorra) e o botão “Quero Participar”. Usa Container, Grid, Typography, AppButton e ícones, com cores dos tokens, então segue a marca e o modo da página.

const Default = () => <ComoParticipar
    title="Como participar"
    intro={(<>Veja como é fácil participar da <strong>“Sua promo é um sucesso”</strong>, seguindo os passos abaixo. Vamos
              conectar sua empresa na melhor plataforma de promoção.
            </>)}
    steps={[
      {
        title: 'Compre',
        description: 'R$650,00 em produtos da Linha Promo quero Mais da idPlugger',
        icon: <IconShoppingCart size={36} />,
      },
      {
        title: 'Cadastre',
        description: 'O cupom fiscal aqui no site da promoção da idPlugger',
        icon: <IconReceiptLong size={36} />,
      },
      {
        title: 'Vale brinde',
        description: 'Aos sorteios semanais, além de um mega prêmio final',
        icon: <IconCardGiftcard size={36} />,
      },
      {
        title: 'Concorra',
        description: 'Aos sorteios semanais, além de um mega prêmio final',
        icon: <IconEmojiEvents size={36} />,
      },
    ]}
    ctaLabel="Quero Participar" />;

O que adaptar

O bloco recebe tudo por props; troque o conteúdo no seu hotsite.

Prop	O que é
`title`	Título da seção (`h2`).
`intro`	Texto de introdução; aceita elementos (ex.: `<strong>`).
`steps`	Lista de passos: `title`, `description` e `icon` (um ícone decorativo da biblioteca).
`ctaLabel`	Texto do botão de ação.
`onCtaClick`	Função chamada ao clicar no botão (ex.: levar ao login ou cadastro).

Os passos são numerados automaticamente na ordem do array. A grade usa 4 colunas (Grid columns={4}); ajuste conforme o número de passos.