Produtos participantes

Seção “Produtos participantes” de uma campanha: título, introdução, carrossel de produtos e o botão “Quero Participar”. O carrossel mostra 1 produto por vez quando o bloco tem menos de 880px de largura e 3 a partir daí (o corte segue o espaço do bloco, não a janela), avança pelas setas (desabilitadas nas pontas) ou rolando no toque e no trackpad, sem rolagem automática. Usa Container, Typography, AppButton e ícones, com cores dos tokens, então segue a marca e o modo da página.

const Default = () => <ProdutosParticipantes
    title="Produtos participantes"
    intro="Confira abaixo os produtos participantes da promoção e aproveite as ofertas exclusivas para quem participa."
    products={CORES.map((cor, index) => ({
      image: produto(`Produto ${index + 1}`, cor),
      imageAlt: `Embalagem do produto ${index + 1}`,
      name: `Produto ${index + 1}`,
      reference: `Ref. 00${index + 1}-PROMO`,
    }))}
    disclaimer="*Imagem meramente ilustrativa"
    ctaLabel="Quero Participar" />;

O que adaptar

Prop	O que é
`title`	Título da seção (`h2`).
`intro`	Texto de introdução; aceita elementos.
`products`	Lista de produtos: `image` (URL), `imageAlt` (descreva o produto), `name` e `reference` (referência ou número de série).
`disclaimer`	Aviso sobre a imagem, ex.: “*Imagem meramente ilustrativa” (opcional).
`ctaLabel`	Texto do botão de ação.
`onCtaClick`	Função chamada ao clicar no botão (ex.: levar ao login ou cadastro).

Acessibilidade

O carrossel é uma região rotulada (“Lista de produtos”) que recebe foco e rola pelo teclado; cada produto anuncia a posição (“1 de 6”). As setas são botões com nome (“Produtos anteriores”, “Próximos produtos”) e ficam desabilitadas nas pontas. Com “reduzir movimento” ativo no sistema, a rolagem não é animada.