Algumas páginas usando flexbox

Boa tarde

Gostaria de cotar a construção de algumas páginas para as quais deverá ser utilizado flexbox.
Tenho as seguintes diretrizes a serem seguidas:

Segue o PDF com o layout que deve ser colocado no lugar do conteúdo que temos hoje na tela de Como Participar (versão desk e mobile).

Em anexo estão as imagens em svg que está no arquivo, o restante são todos componentes em html mesmo.
Os demais ícones estão no fontawesome que já está disponível no site.

Segue a lista de cores:
image.png

A fonte da página toda é a Catamaran que já está inclusa.

--------------------------------
Observações técnicas
1) A tela deve ser responsiva no breakpoint de 768px (no bootstrap, é o 'sm')
2) A imagem dos produtos pode usar o link: https://www.msd-saude-animal.com.br/images/cattle/borgal.png
3) Cada seção da página está bem definida e deve ocupar a altura total da tela
4) Os botões no inferior devem servir para navegação entre as seções (pra cima: seção anterior, para baixo: próxima seção)

3 elementos principais
- Cabeçalho (flutuante: position absolute)
- Primeira linha (contendo o quadro de cada venda dos produtos + componente de imagem de vitória)
- Segunda linha (contem o componente de imagem de dúvida + componente de clique e entenda)

Sobre o cabeçalho,
div:position absolute
--- div:position relative
-------div do triangulo com position absolute
-------div do texto centralizada no pai dela

Sobre a primeira linha,
div:display flex
---div com o conteúdo do quadro tendo um flex: 2
---div com o componente da imagem tendo um flex: 3 e position relative
-------imagem
-------div com position absolute e o texto Você é uma peça fundamental...

Sobre a segunda linha
div:display: flex
---div com o componente da imagem tendo um flex: 1 e position relative
-------imagem
-------div com position absolute e o texto Mas como funciona?
---div com position relative
------div com o texto clique e entenda
------div com position absolute circular com o ícone no meio