Repository: 1024pix/pix
Pull request #11627: [FEATURE] Remplacement du bloc "Durant ce parcours" de la page de début d'évaluation (PIX-16944)
Author: login: dianeCdrPix
Labels: name: Tech Review OK
name: :rocket: Ready to Merge
name: Func Review OK
description: PO validated functionally the PR
name: team-prescription
description: Adopt US - La Team qui mange et parle fort
name: team-devcomp
description: Aka la Brigade du 🪩 Kool and the gang 🪩
Created: 2025-03-11T11:07:37Z | Merged: 2025-03-12T19:01:44Z

## :pancakes: Problème

Dans la page de début de campagne, le bloc répertoriant les infos de la campagne a été mis à jour côté Design.

## :bacon: Proposition

Mettre à jour le rendu du bloc. 

## 🧃 Remarques

- Nous avons décidé, pour être au plus proche de la maquette finale, d'intégrer les détails dans le bloc qui contient le bouton "Je commence".
- Un autre ticket existe pour les dernières modif' à faire côté rendu global

## :yum: Pour tester

- Afficher la page de début d'une campagne : https://app-pr11627.review.pix.fr/campagnes/EDUSIMPLE/presentation
- Vérifier que le bloc avec des instructions détaillés s'affiche correctement



Diff:
diff --git a/mon-pix/app/components/campaign-landing-page-details.gjs b/mon-pix/app/components/campaign-landing-page-details.gjs
new file mode 100644
index 00000000000..292a4bd9940
--- /dev/null
+++ b/mon-pix/app/components/campaign-landing-page-details.gjs
@@ -0,0 +1,39 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import CampaignStep from './campaigns/assessment/start-landing-page/campaign-step';
+
+export default class CampaignLandingPageDetails extends Component {
+  @service intl;
+
+  get steps() {
+    return [
+      {
+        title: this.intl.t('components.campaigns.start-landing-page.steps.step1.title'),
+        description: this.intl.t('components.campaigns.start-landing-page.steps.step1.description'),
+        image: {
+          src: '/images/rocket.svg',
+        },
+      },
+      {
+        title: this.intl.t('components.campaigns.start-landing-page.steps.step2.title'),
+        description: this.intl.t('components.campaigns.start-landing-page.steps.step2.description'),
+        image: { src: '/images/chart.svg' },
+      },
+      {
+        title: this.intl.t('components.campaigns.start-landing-page.steps.step3.title'),
+        description: this.intl.t('components.campaigns.start-landing-page.steps.step3.description'),
+        image: { src: '/images/book.svg' },
+      },
+    ];
+  }
+
+  <template>
+    <div class="campaign-landing-page-details">
+
+      {{#each this.steps as |step|}}
+        <CampaignStep @step={{step}} />
+      {{/each}}
+    </div>
+  </template>
+}
diff --git a/mon-pix/app/components/campaign-start-block.hbs b/mon-pix/app/components/campaign-start-block.hbs
index e0f474e063a..7a29bcf51cf 100644
--- a/mon-pix/app/components/campaign-start-block.hbs
+++ b/mon-pix/app/components/campaign-start-block.hbs
@@ -25,6 +25,9 @@
         class="campaign-landing-page__start-button"
         @loading-color="white"
       >{{this.buttonText}}</PixButton>
+      {{#if @campaign.isAssessment}}
+        <CampaignLandingPageDetails />
+      {{/if}}
       <p class="campaign-landing-page-start__legal">{{this.legalText}}</p>
     </div>
   </form>
diff --git a/mon-pix/app/components/campaigns/assessment/start-landing-page/campaign-step.gjs b/mon-pix/app/components/campaigns/assessment/start-landing-page/campaign-step.gjs
new file mode 100644
index 00000000000..d0005a1becf
--- /dev/null
+++ b/mon-pix/app/components/campaigns/assessment/start-landing-page/campaign-step.gjs
@@ -0,0 +1,7 @@
+<template>
+  <div class="campaign-step">
+    <img class="campaign-step__image" role="presentation" src={{@step.image.src}} width="60" height="60" />
+    <h3 class="campaign-step__title">{{@step.title}}</h3>
+    <p class="campaign-step__description">{{@step.description}}</p>
+  </div>
+</template>
diff --git a/mon-pix/app/styles/app.scss b/mon-pix/app/styles/app.scss
index 9f66e19440d..af5d836cee6 100644
--- a/mon-pix/app/styles/app.scss
+++ b/mon-pix/app/styles/app.scss
@@ -12,6 +12,8 @@
 
 /* components */
 @use '../components/campaigns/assessment/results/evaluation-results-hero/attestation-result' as *;
+@use 'components/campaigns/assessment/start-landing-page/campaign-landing-page-details' as *;
+@use 'components/campaigns/assessment/start-landing-page/campaign-step' as *;
 @use 'components/authentication/login-or-register-oidc' as *;
 @use 'components/authentication/oidc-reconciliation' as *;
 @use 'components/autonomous-course/landing-page-start-block' as *;
diff --git a/mon-pix/app/styles/components/campaigns/assessment/start-landing-page/campaign-landing-page-details.scss b/mon-pix/app/styles/components/campaigns/assessment/start-landing-page/campaign-landing-page-details.scss
new file mode 100644
index 00000000000..9443ee655d8
--- /dev/null
+++ b/mon-pix/app/styles/components/campaigns/assessment/start-landing-page/campaign-landing-page-details.scss
@@ -0,0 +1,6 @@
+.campaign-landing-page-details {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: var(--pix-spacing-4x);
+}
diff --git a/mon-pix/app/styles/components/campaigns/assessment/start-landing-page/campaign-step.scss b/mon-pix/app/styles/components/campaigns/assessment/start-landing-page/campaign-step.scss
new file mode 100644
index 00000000000..feee6e9ef5b
--- /dev/null
+++ b/mon-pix/app/styles/components/campaigns/assessment/start-landing-page/campaign-step.scss
@@ -0,0 +1,26 @@
+@use 'pix-design-tokens/typography';
+
+.campaign-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 260px;
+  padding: var(--pix-spacing-2x);
+
+  &__image {
+    max-width: 60px;
+    margin-bottom: var(--pix-spacing-2x);
+  }
+
+  &__title {
+    @extend %pix-title-xs;
+  }
+
+  &__description {
+    @extend %pix-body-s;
+
+    margin-top: var(--pix-spacing-1x);
+    color: var(--pix-neutral-500);
+    text-align: center;
+  }
+}
diff --git a/mon-pix/app/styles/pages/_campaign-landing-page.scss b/mon-pix/app/styles/pages/_campaign-landing-page.scss
index d0175464d03..03ca3072f83 100644
--- a/mon-pix/app/styles/pages/_campaign-landing-page.scss
+++ b/mon-pix/app/styles/pages/_campaign-landing-page.scss
@@ -101,77 +101,6 @@
   text-align: center;
 }
 
-/* ------------------------ DETAILS ------------------------ */
-
-.campaign-landing-page__details {
-  padding: 3rem 6rem 0;
-
-  @include breakpoints.device-is('mobile') {
-    padding-inline: 2rem;
-  }
-}
-
-.campaign-landing-page-details__title {
-  @extend %pix-title-s;
-
-  text-align: center;
-
-  &::after {
-    display: block;
-    width: 18rem;
-    max-width: 100%;
-    height: 2px;
-    margin: 1em auto 0;
-    background-color: var(--pix-primary-500);
-    content: '';
-  }
-}
-
-.campaign-landing-page-details__article {
-  display: flex;
-  align-items: center;
-  padding-block: 3rem;
-
-  @include breakpoints.device-is('mobile') {
-    flex-direction: column;
-  }
-
-  & + .campaign-landing-page-details__article {
-    border-top: 2px dashed var(--pix-neutral-20);
-  }
-
-  &-image {
-    display: block;
-    flex-shrink: 0;
-    min-width: 8.75rem;
-    margin-bottom: 1rem;
-
-    @include breakpoints.device-is('tablet') {
-      margin: 0 2rem;
-    }
-  }
-
-  &-text {
-    flex-grow: 1;
-
-    @include breakpoints.device-is('tablet') {
-      padding-inline: 2rem;
-    }
-
-    & > :not(:first-child) {
-      margin-top: 0.5rem;
-    }
-
-    h3 {
-      @extend %pix-title-xs;
-    }
-
-    p {
-      @extend %pix-body-m;
-    }
-  }
-}
-
 /* ------------------------ ERROR ------------------------ */
 
 .campaign-landing-page-error {
diff --git a/mon-pix/app/templates/campaigns/campaign-landing-page.hbs b/mon-pix/app/templates/campaigns/campaign-landing-page.hbs
index 30c84728367..bd1fad2272f 100644
--- a/mon-pix/app/templates/campaigns/campaign-landing-page.hbs
+++ b/mon-pix/app/templates/campaigns/campaign-landing-page.hbs
@@ -12,58 +12,6 @@
       <CampaignStartBlock @campaign={{@model}} @startCampaignParticipation={{this.startCampaignParticipation}} />
     {{/if}}
 
-    {{#if @model.isAssessment}}
-      <div class="campaign-landing-page__details rounded-panel">
-        <h2 class="campaign-landing-page-details__title">
-          {{t "pages.campaign-landing.assessment.details"}}
-        </h2>
-
-        <div class="campaign-landing-page-details__article">
-          <img
-            class="campaign-landing-page-details__article-image"
-            src="/images/illustrations/landing-page/icon-mesurer.svg"
-            alt=""
-          />
-          <div class="campaign-landing-page-details__article-text">
-            <h3 class="campaign-landing-page-details__article-title">
-              {{t "pages.campaign-landing.assessment.evaluate.title"}}
-            </h3>
-            <p>{{t "pages.campaign-landing.assessment.evaluate.description"}}</p>
-          </div>
-        </div>
-
-        <div class="campaign-landing-page-details__article">
-          <img
-            class="campaign-landing-page-details__article-image"
-            src="/images/illustrations/landing-page/icon-conseil.svg"
-            alt=""
-          />
-          <div class="campaign-landing-page-details__article-text">
-            <h3 class="campaign-landing-page-details__article-title">
-              {{t "pages.campaign-landing.assessment.develop.title"}}
-            </h3>
-            <p>{{t "pages.campaign-landing.assessment.develop.description"}}</p>
-          </div>
-
-        </div>
-
-        <div class="campaign-landing-page-details__article">
-          <img
-            class="campaign-landing-page-details__article-image"
-            src="/images/illustrations/landing-page/icon-certif.svg"
-            alt=""
-          />
-          <div class="campaign-landing-page-details__article-text">
-            <h3 class="campaign-landing-page-details__article-title">
-              {{t "pages.campaign-landing.assessment.certify.title"}}
-            </h3>
-            <p>{{t "pages.campaign-landing.assessment.certify.description"}}</p>
-          </div>
-
-        </div>
-      </div>
-    {{/if}}
-
     {{#if this.shouldDisplayLanguageSwitcher}}
       <div>
         <LanguageSwitcher @selectedLanguage={{this.selectedLanguage}} @onLanguageChange={{this.onLanguageChange}} />
diff --git a/mon-pix/public/images/book.svg b/mon-pix/public/images/book.svg
new file mode 100644
index 00000000000..158e2151835
--- /dev/null
+++ b/mon-pix/public/images/book.svg
@@ -0,0 +1,59 @@
+<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 626800">
+<path d="M0.5 30.5C0.5 14.2076 13.7076 1 30 1C46.2924 1 59.5 14.2076 59.5 30.5C59.5 46.7924 46.2924 60 30 60C13.7076 60 0.5 46.7924 0.5 30.5Z" fill="#FFF6CC"/>
+<path d="M0.5 30.5C0.5 14.2076 13.7076 1 30 1C46.2924 1 59.5 14.2076 59.5 30.5C59.5 46.7924 46.2924 60 30 60C13.7076 60 0.5 46.7924 0.5 30.5Z" stroke="#5E6C84"/>
+<g id="Group">
+<path id="Path" d="M30 47.0814C29.5236 47.0814 29.0418 47.3685 28.8036 47.9429C28.6087 48.4089 28.1323 48.6961 27.6343 48.6094L12.4817 45.9597C10.7548 45.6563 9.49341 44.1608 9.49341 42.4052V40.4654C9.49341 42.2156 10.7548 43.7165 12.4817 44.0199L30 47.0814Z" fill="#FF5722"/>
+<g id="Group_2" opacity="0.2">
+<path id="Path_2" d="M30 47.0814C29.5236 47.0814 29.0418 47.3685 28.8036 47.9429C28.6087 48.4089 28.1323 48.6961 27.6343 48.6094L12.4817 45.9597C10.7548 45.6563 9.49341 44.1608 9.49341 42.4052V40.4654C9.49341 42.2156 10.7548 43.7165 12.4817 44.0199L30 47.0814Z" fill="#5E6C84"/>
+</g>
+<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M27.5583 49.0482C27.6449 49.0645 27.7315 49.0699 27.8182 49.0699C28.4245 49.0699 28.9767 48.7015 29.2095 48.1163C29.361 47.7532 29.6534 47.5311 29.9944 47.5311C30.2272 47.5311 30.4221 47.3577 30.4383 47.1247C30.4546 46.8917 30.2976 46.6858 30.0702 46.6479L12.5573 43.581C11.0361 43.3155 9.93714 42.0042 9.93714 40.4654C9.93714 40.2215 9.73684 40.0211 9.49323 40.0211C9.24962 40.0211 9.04932 40.2215 9.04932 40.4654V42.4052C9.04932 44.3775 10.4623 46.0572 12.4057 46.3986L27.5583 49.0482ZM12.5625 45.5208C11.2741 45.2932 10.2888 44.3179 10.0181 43.0879C10.6136 43.7869 11.4473 44.2854 12.4109 44.4588L28.6733 47.3035C28.565 47.4389 28.4676 47.6015 28.3972 47.7749C28.2781 48.0567 28.002 48.2192 27.7151 48.1704L12.5625 45.5208Z" fill="#5E6C84"/>
+<path id="Path_3" d="M50.5119 40.46V42.3998C50.5119 44.1554 49.2559 45.6563 47.529 45.9543L32.3764 48.6039C31.8784 48.6906 31.402 48.4089 31.2071 47.9375C30.9689 47.3631 30.4925 47.0759 30.0161 47.0759L47.529 44.0091C49.2505 43.711 50.5119 42.2101 50.5119 40.46Z" fill="#FF5722"/>
+<g id="Group_3" opacity="0.2">
+<path id="Path_4" d="M50.5119 40.46V42.3998C50.5119 44.1554 49.2559 45.6563 47.529 45.9543L32.3764 48.6039C31.8784 48.6906 31.402 48.4089 31.2071 47.9375C30.9689 47.3631 30.4925 47.0759 30.0161 47.0759L47.529 44.0091C49.2505 43.711 50.5119 42.2101 50.5119 40.46Z" fill="#5E6C84"/>
+</g>
+<path id="Shape_2" fill-rule="evenodd" clip-rule="evenodd" d="M30.7904 48.1109C31.034 48.7015 31.5916 49.07 32.1925 49.07C32.2791 49.07 32.3657 49.0591 32.4415 49.0429L47.5941 46.3932C49.5376 46.0573 50.9451 44.3776 50.9451 42.3998V40.46C50.9451 40.2162 50.7448 40.0157 50.5012 40.0157C50.2576 40.0157 50.0573 40.2162 50.0573 40.46C50.0573 41.9988 48.9583 43.3101 47.4425 43.5756L29.9296 46.6425C29.7023 46.6804 29.5399 46.8917 29.5615 47.1193C29.5832 47.3469 29.7726 47.5257 30.0054 47.5257C30.3465 47.5257 30.6388 47.7424 30.7904 48.1109ZM31.6185 47.7695C31.5427 47.5961 31.4507 47.439 31.3424 47.2981L47.6048 44.4534C48.5684 44.2855 49.3967 43.787 49.9922 43.088C49.7215 44.318 48.7362 45.2933 47.4532 45.5155L32.3006 48.1651C32.0191 48.2139 31.7376 48.0513 31.6185 47.7695Z" fill="#5E6C84"/>
+<path id="Path_5" d="M30.0051 16.4616V47.076H29.9997L12.4868 44.0091C10.7599 43.7057 9.49854 42.2048 9.49854 40.4546V15.3562C9.49854 15.172 9.52019 14.9932 9.56891 14.8252C9.83418 13.8011 10.8519 13.1075 11.9509 13.2972L30.0051 16.4616Z" fill="#F7C714"/>
+<g id="Group_4" opacity="0.66">
+<path id="Path_6" d="M30.0051 46.2794V47.076H29.9997L12.4868 44.0091C10.7599 43.7057 9.49854 42.2047 9.49854 40.4546V15.3562C9.49854 15.172 9.52019 14.9932 9.56891 14.8252C9.59598 14.7331 9.62305 14.641 9.66094 14.5543V39.6852C9.66094 41.4353 10.9223 42.9362 12.6492 43.2397L30.0051 46.2794Z" fill="white"/>
+</g>
+<path id="Path_7" d="M50.5122 15.3616V40.46C50.5122 42.2101 49.2562 43.7111 47.5293 44.0145L30.0164 47.0814H30.011V16.467L48.0652 13.308C49.1588 13.1183 50.182 13.8119 50.4472 14.836C50.4851 14.9986 50.5122 15.1774 50.5122 15.3616Z" fill="#F7C714"/>
+<g id="Group_5" opacity="0.66">
+<path id="Path_8" d="M50.5122 15.3616V40.4599C50.5122 42.2101 49.2562 43.711 47.5293 44.0145L30.0164 47.0813H30.011V46.9188L46.6036 44.0145C48.3305 43.711 49.5865 42.2101 49.5865 40.4599V15.3616C49.5865 15.2586 49.581 15.1611 49.5648 15.0635C49.1371 14.7872 48.612 14.6626 48.0652 14.7547L30.011 17.9137V16.4561L47.9624 13.3134L48.0707 13.2917C49.1642 13.0966 50.1874 13.7956 50.4526 14.8197C50.4851 14.9985 50.5122 15.1773 50.5122 15.3616Z" fill="white"/>
+</g>
+<path id="Shape_3" fill-rule="evenodd" clip-rule="evenodd" d="M29.924 47.5202C29.9511 47.5257 29.9781 47.5257 30.0052 47.5257C30.2488 47.5257 30.4491 47.3252 30.4491 47.0759V16.4615C30.4491 16.2448 30.2921 16.0606 30.081 16.0227L12.0267 12.8637C10.7383 12.6361 9.46612 13.4489 9.1413 14.7114C9.08176 14.9173 9.05469 15.1394 9.05469 15.3616V40.46C9.05469 42.4323 10.4676 44.112 12.4111 44.4534L29.924 47.5202ZM10.0022 14.939C10.1917 14.2129 10.8575 13.7144 11.5938 13.7144C11.6858 13.7144 11.7778 13.7252 11.8807 13.7415L29.5668 16.8354V46.5504L12.5682 43.5756C11.047 43.3101 9.94805 41.9988 9.94805 40.46V15.3616C9.94805 15.2153 9.96429 15.0744 10.0022 14.939Z" fill="#5E6C84"/>
+<path id="Shape_4" fill-rule="evenodd" clip-rule="evenodd" d="M29.5613 47.0814C29.5613 47.3252 29.767 47.5257 30.0106 47.5257C30.0198 47.5257 30.0291 47.5251 30.0381 47.5245C30.0555 47.5233 30.0721 47.5221 30.0864 47.5257L47.5993 44.4588C49.5428 44.1175 50.9503 42.4377 50.9503 40.4654V15.3671C50.9503 15.1449 50.9232 14.9227 50.8691 14.7223C50.5443 13.4543 49.2721 12.6416 47.9837 12.8691L29.9294 16.0281C29.7183 16.066 29.5613 16.2503 29.5613 16.467V47.0814ZM30.4491 46.5504V16.8354L48.1352 13.7415C48.9743 13.5952 49.7918 14.1208 50.0083 14.9444C50.0462 15.0744 50.0625 15.2153 50.0625 15.3616V40.46C50.0625 41.9988 48.9635 43.3101 47.4477 43.5756L30.4491 46.5504Z" fill="#5E6C84"/>
+<path id="Path_9" d="M30.0053 44.2204L12.8605 41.3215C11.9889 41.1752 11.3501 40.4166 11.3501 39.5334V14.137C11.3501 13.01 12.3678 12.1538 13.4722 12.3489L30.0053 15.2424V44.2204Z" fill="white"/>
+<g id="Group_6" opacity="0.3">
+<path id="Path_10" d="M30.0055 15.5133V43.088C30.0001 43.0825 30.0001 43.0771 30.0001 43.0771L25.8749 42.3673C25.6638 42.3294 25.5122 42.1506 25.5122 41.9392V16.2177C25.5122 15.9089 25.7883 15.6705 26.0969 15.7192L29.7619 16.299C29.7619 16.2882 29.9513 15.8547 30.0055 15.5133Z" fill="#102770" fill-opacity="0.5"/>
+</g>
+<g id="Group_7" opacity="0.3">
+<path id="Path_11" d="M29.7615 44.3992V45.5425L11.0089 42.1559C10.1373 42.0096 9.49854 41.2511 9.49854 40.3678V14.9715C9.49854 13.8498 10.5109 12.9937 11.6207 13.1834C11.4474 13.4597 11.35 13.7848 11.35 14.1424V39.5388C11.35 40.422 11.9888 41.1806 12.8604 41.3269L29.7615 44.3992Z" fill="#5E6C84"/>
+</g>
+<path id="Path_12" d="M21.0352 18.6723C21.0135 18.6723 20.9918 18.6723 20.9702 18.6668L13.624 17.4043C13.4128 17.3664 13.2667 17.1659 13.3046 16.9492C13.3425 16.7379 13.5428 16.5916 13.7593 16.6295L21.1055 17.892C21.3167 17.9299 21.4628 18.1304 21.4249 18.3472C21.387 18.5368 21.2192 18.6723 21.0352 18.6723Z" fill="#5E6C84"/>
+<path id="Path_13" d="M21.0352 28.5556C21.0135 28.5556 20.9918 28.5556 20.9702 28.5502L13.624 27.2877C13.4128 27.2498 13.2667 27.0493 13.3046 26.8326C13.3425 26.6212 13.5428 26.4749 13.7593 26.5129L21.1055 27.7754C21.3167 27.8133 21.4628 28.0138 21.4249 28.2305C21.387 28.4202 21.2192 28.5556 21.0352 28.5556Z" fill="#5E6C84"/>
+<path id="Path_14" d="M25.3876 23.0125C25.3659 23.0125 25.3443 23.0125 25.3172 23.0071L13.5427 20.948C13.3315 20.9101 13.1854 20.7096 13.2233 20.4929C13.2612 20.2816 13.4669 20.1353 13.678 20.1732L25.4525 22.2322C25.6637 22.2701 25.8098 22.4706 25.7719 22.6874C25.7394 22.877 25.5716 23.0125 25.3876 23.0125Z" fill="#5E6C84"/>
+<path id="Path_15" d="M26.5246 25.2341C26.503 25.2341 26.4813 25.2341 26.4597 25.2287L13.5483 23.0071C13.3372 22.9692 13.191 22.7687 13.2289 22.5519C13.2668 22.3406 13.4671 22.1943 13.6836 22.2323L26.595 24.4538C26.8061 24.4918 26.9523 24.6922 26.9144 24.909C26.8819 25.0986 26.7141 25.2341 26.5246 25.2341Z" fill="#5E6C84"/>
+<path id="Path_16" d="M27.3362 38.3901C27.3145 38.3901 27.2929 38.3901 27.2712 38.3847L20.2336 37.1655C20.0225 37.1276 19.8763 36.9271 19.9142 36.7104C19.9521 36.4991 20.1578 36.3528 20.3689 36.3907L27.4066 37.6099C27.6177 37.6478 27.7639 37.8483 27.726 38.065C27.6881 38.2547 27.5203 38.3901 27.3362 38.3901Z" fill="#5E6C84"/>
+<path id="Path_17" d="M25.3876 27.136C25.3659 27.136 25.3443 27.136 25.3172 27.1306L13.5427 25.0715C13.3315 25.0336 13.1854 24.8331 13.2233 24.6164C13.2612 24.3996 13.4669 24.2588 13.678 24.2967L25.4525 26.3557C25.6637 26.3936 25.8098 26.5941 25.7719 26.8109C25.7394 27.0005 25.5716 27.136 25.3876 27.136Z" fill="#5E6C84"/>
+<path id="Path_18" d="M48.6603 14.137V39.5443C48.6603 40.4275 48.0269 41.1807 47.1607 41.3324L30.0051 44.3342V15.2424L34.8719 14.3917L38.3095 13.7903L46.5382 12.3489C47.334 12.2081 48.0865 12.6145 48.4437 13.2701C48.5791 13.5248 48.6603 13.8228 48.6603 14.137Z" fill="white"/>
+<g id="Group_8" opacity="0.3">
+<path id="Path_19" d="M47.7944 41.0886C47.7944 41.9718 47.161 42.7195 46.2948 42.8767L30.3139 45.6726L30.1624 44.3071L47.1556 41.3324C47.3938 41.289 47.6049 41.2078 47.7944 41.0886Z" fill="#5E6C84"/>
+</g>
+<g id="Group_9" opacity="0.3">
+<path id="Path_20" d="M43.2093 13.9961C43.7236 13.904 44.2 14.305 44.2 14.8306V39.1866C44.2 40.0644 43.5666 40.823 42.7004 40.9747L30.011 43.1963V16.2827L43.2093 13.9961Z" fill="#102770" fill-opacity="0.5"/>
+</g>
+<path id="Shape_5" fill-rule="evenodd" clip-rule="evenodd" d="M29.9402 44.6105C29.9618 44.6159 29.9835 44.6159 30.0051 44.6159C30.0972 44.6159 30.1892 44.5834 30.2596 44.5184C30.3516 44.448 30.4003 44.3342 30.4003 44.2204V15.2424C30.4003 15.0527 30.265 14.8902 30.0755 14.8577L13.5425 11.9642C12.8983 11.8504 12.2432 12.0238 11.7452 12.4464C11.2471 12.8691 10.9602 13.4814 10.9602 14.137V39.5334C10.9602 40.6171 11.7289 41.5328 12.7954 41.7116L29.9402 44.6105ZM12.2434 13.0533C12.5033 12.8312 12.8281 12.7174 13.1583 12.7174C13.2395 12.7174 13.3261 12.7228 13.4019 12.7445L29.6101 15.5838V43.7653L12.9201 40.9422C12.2326 40.823 11.7345 40.2324 11.7345 39.5388V14.1425C11.7345 13.7198 11.924 13.3243 12.2434 13.0533Z" fill="#5E6C84"/>
+<path id="Shape_6" fill-rule="evenodd" clip-rule="evenodd" d="M29.7509 44.6323C29.8267 44.6919 29.9133 44.7244 30.0053 44.7244C30.027 44.7244 30.0486 44.7244 30.0703 44.7189L47.2259 41.7171C48.2815 41.5329 49.0502 40.6172 49.0502 39.5443V14.1371C49.0502 13.7686 48.9582 13.4002 48.785 13.0805C48.3302 12.2514 47.3991 11.8017 46.468 11.9643L29.9349 14.8577C29.7454 14.8902 29.6101 15.0528 29.6101 15.2424V44.3342C29.6101 44.448 29.6642 44.5564 29.7509 44.6323ZM30.3949 43.8683V15.573L46.5977 12.7391C47.1986 12.6362 47.7995 12.9233 48.0919 13.4598C48.2056 13.6657 48.2651 13.8933 48.2651 14.1371V39.5443C48.2651 40.2379 47.7725 40.8285 47.0904 40.9477L30.3949 43.8683Z" fill="#5E6C84"/>
+<path id="Path_21" d="M32.3928 19.9348C32.2033 19.9348 32.0409 19.7993 32.0084 19.6097C31.9705 19.3984 32.1167 19.1925 32.3278 19.1545L39.674 17.892C39.8852 17.8541 40.0909 18.0004 40.1288 18.2117C40.1667 18.4231 40.0205 18.629 39.8094 18.6669L32.4632 19.9294C32.4361 19.9294 32.4144 19.9348 32.3928 19.9348Z" fill="#5E6C84"/>
+<path id="Path_22" d="M32.3928 25.2937C32.2033 25.2937 32.0409 25.1582 32.0084 24.9686C31.9705 24.7572 32.1167 24.5513 32.3278 24.5134L41.3685 22.9637C41.5796 22.9258 41.7853 23.0721 41.8232 23.2834C41.8611 23.4947 41.715 23.7006 41.5038 23.7386L32.4632 25.2883C32.4361 25.2883 32.4144 25.2937 32.3928 25.2937Z" fill="#5E6C84"/>
+<path id="Path_23" d="M32.3928 27.5911C32.2033 27.5911 32.0409 27.4556 32.0084 27.266C31.9705 27.0547 32.1167 26.8488 32.3278 26.8108L44.4813 24.741C44.6924 24.703 44.8981 24.8493 44.936 25.0607C44.9739 25.272 44.8278 25.4779 44.6166 25.5158L32.4632 27.5857C32.4361 27.5911 32.4144 27.5911 32.3928 27.5911Z" fill="#5E6C84"/>
+<path id="Path_24" d="M38.3043 13.7903V22.3786L36.5882 20.8072L34.8667 22.9367V14.3917L38.3043 13.7903Z" fill="#FF5722"/>
+<g id="Group_10" opacity="0.66">
+<path id="Path_25" d="M38.3043 13.6819V22.3731L37.4436 21.5874V15.6921C37.4436 15.237 37.0321 14.8902 36.5828 14.9661L34.8667 15.2641V14.2779L38.3043 13.6819Z" fill="white"/>
+</g>
+<path id="Shape_7" fill-rule="evenodd" clip-rule="evenodd" d="M34.4771 22.942C34.4771 23.1046 34.5799 23.2563 34.7369 23.3105C34.7802 23.3268 34.8235 23.3322 34.8668 23.3322C34.9859 23.3322 35.0996 23.278 35.1754 23.1805L36.6317 21.3761L38.0446 22.6657C38.1583 22.7741 38.3261 22.8012 38.4669 22.7361C38.6076 22.6765 38.6996 22.5357 38.6996 22.3785V13.7957C38.6996 13.6819 38.6455 13.5735 38.5589 13.4976C38.4723 13.4218 38.3532 13.3893 38.2395 13.4109L34.8019 14.0124C34.6124 14.0449 34.4771 14.2075 34.4771 14.3971V22.942ZM35.2616 21.8259V14.7222L37.9088 14.2562V21.4845L36.8478 20.5146C36.772 20.4387 36.6637 20.4008 36.5554 20.4116C36.4472 20.4225 36.3497 20.4712 36.2793 20.5579L35.2616 21.8259Z" fill="#5E6C84"/>
+<path id="Path_26" d="M30.0103 15.5134V15.2479C30.0306 15.3183 30.0306 15.4104 30.0103 15.5134Z" fill="#26316B"/>
+</g>
+</g>
+</svg>
diff --git a/mon-pix/public/images/chart.svg b/mon-pix/public/images/chart.svg
new file mode 100644
index 00000000000..d1f38be8b08
--- /dev/null
+++ b/mon-pix/public/images/chart.svg
@@ -0,0 +1,37 @@
+<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.5 30.5C0.5 14.2076 13.7076 1 30 1C46.2924 1 59.5 14.2076 59.5 30.5C59.5 46.7924 46.2924 60 30 60C13.7076 60 0.5 46.7924 0.5 30.5Z" fill="#E1FFEF"/>
+  <path d="M0.5 30.5C0.5 14.2076 13.7076 1 30 1C46.2924 1 59.5 14.2076 59.5 30.5C59.5 46.7924 46.2924 60 30 60C13.7076 60 0.5 46.7924 0.5 30.5Z" stroke="#5E6C84"/>
+  <path d="M51.2895 47.2523H8.71049C8.49045 47.2523 8.34375 47.1056 8.34375 46.8855C8.34375 46.6655 8.49045 46.5188 8.71049 46.5188H51.2895C51.5095 46.5188 51.6562 46.6655 51.6562 46.8855C51.6562 47.1056 51.4729 47.2523 51.2895 47.2523Z" fill="#5E6C84"/>
+  <path d="M19.8594 45.3452C19.8594 46.1521 19.1993 46.8122 18.3925 46.8122H14.9084C14.1015 46.8122 13.4414 46.1521 13.4414 45.3452V33.7928C13.4414 32.9859 14.1015 32.3258 14.9084 32.3258H18.3925C19.1993 32.3258 19.8594 32.9859 19.8594 33.7928V45.3452Z" fill="#FF4848"/>
+  <path d="M29.1016 45.3452C29.1016 46.1521 28.4415 46.8122 27.6346 46.8122H24.1506C23.3437 46.8122 22.6836 46.1521 22.6836 45.3452V38.7438C22.6836 37.937 23.3437 37.2769 24.1506 37.2769H27.6346C28.4415 37.2769 29.1016 37.937 29.1016 38.7438V45.3452Z" fill="#FBD000"/>
+  <path d="M38.3069 45.3452C38.3069 46.152 37.6468 46.8122 36.84 46.8122H33.3559C32.5491 46.8122 31.8889 46.152 31.8889 45.3452V28.2916C31.8889 27.4848 32.5491 26.8246 33.3559 26.8246H36.84C37.6468 26.8246 38.3069 27.4848 38.3069 28.2916V45.3452Z" fill="#75B600"/>
+  <path d="M47.5486 45.3452C47.5486 46.1521 46.8885 46.8122 46.0817 46.8122H42.5976C41.7908 46.8122 41.1306 46.1521 41.1306 45.3452V22.9738C41.1306 22.167 41.7908 21.5069 42.5976 21.5069H46.0817C46.8885 21.5069 47.5486 22.167 47.5486 22.9738V45.3452Z" fill="#3AD0F9"/>
+  <path d="M25.544 31.299C25.4707 31.299 25.3973 31.299 25.3607 31.2256L16.2654 25.5411C16.082 25.4311 16.0454 25.211 16.1554 25.0276C16.2654 24.8443 16.4855 24.8076 16.6688 24.9176L25.4707 30.4555L34.5293 19.1964C34.5659 19.1597 34.6026 19.1231 34.6393 19.0864L44.138 13.9886C44.3213 13.8786 44.5414 13.952 44.6514 14.1353C44.7614 14.3187 44.6881 14.5388 44.5047 14.6488L35.0427 19.7099L25.8374 31.1523C25.7641 31.2623 25.6541 31.299 25.544 31.299Z" fill="#5E6C84"/>
+  <path d="M25.6539 32.7659C26.9097 32.7659 27.9278 31.7479 27.9278 30.4921C27.9278 29.2363 26.9097 28.2183 25.6539 28.2183C24.3981 28.2183 23.3801 29.2363 23.3801 30.4921C23.3801 31.7479 24.3981 32.7659 25.6539 32.7659Z" fill="#3AD0F9"/>
+  <path d="M34.786 21.6901C36.0418 21.6901 37.0598 20.6721 37.0598 19.4163C37.0598 18.1605 36.0418 17.1425 34.786 17.1425C33.5302 17.1425 32.5122 18.1605 32.5122 19.4163C32.5122 20.6721 33.5302 21.6901 34.786 21.6901Z" fill="#FF4848"/>
+  <path d="M16.4489 27.4848C17.7047 27.4848 18.7227 26.4668 18.7227 25.211C18.7227 23.9552 17.7047 22.9372 16.4489 22.9372C15.1931 22.9372 14.175 23.9552 14.175 25.211C14.175 26.4668 15.1931 27.4848 16.4489 27.4848Z" fill="#FBD000"/>
+  <path d="M44.1747 16.5557C45.4305 16.5557 46.4485 15.5377 46.4485 14.2819C46.4485 13.0261 45.4305 12.0081 44.1747 12.0081C42.9189 12.0081 41.9009 13.0261 41.9009 14.2819C41.9009 15.5377 42.9189 16.5557 44.1747 16.5557Z" fill="#75B600"/>
+  <path d="M16.5589 27.8149C15.0553 27.8149 13.8083 26.5679 13.8083 25.0643C13.8083 23.5606 15.0553 22.3137 16.5589 22.3137C18.0626 22.3137 19.3095 23.5606 19.3095 25.0643C19.3095 26.5679 18.0626 27.8149 16.5589 27.8149ZM16.5589 23.0839C15.4587 23.0839 14.5785 23.964 14.5785 25.0643C14.5785 26.1645 15.4587 27.0447 16.5589 27.0447C17.6592 27.0447 18.5393 26.1645 18.5393 25.0643C18.5393 23.964 17.6592 23.0839 16.5589 23.0839Z" fill="#5E6C84"/>
+  <path d="M25.7274 33.316C24.2237 33.316 22.9768 32.0691 22.9768 30.5655C22.9768 29.0618 24.1871 27.8149 25.7274 27.8149C27.2677 27.8149 28.478 29.0618 28.478 30.5655C28.478 32.0691 27.2677 33.316 25.7274 33.316ZM25.7274 28.585C24.6272 28.585 23.747 29.4652 23.747 30.5655C23.747 31.6657 24.6272 32.5459 25.7274 32.5459C26.8276 32.5459 27.7078 31.6657 27.7078 30.5655C27.7078 29.4652 26.8276 28.585 25.7274 28.585Z" fill="#5E6C84"/>
+  <path d="M18.3925 44.6851H14.9084C14.1015 44.6851 13.4414 43.8416 13.4414 43.0348V45.3086C13.4414 46.1154 14.1015 46.7756 14.9084 46.7756H18.3925C19.1993 46.7756 19.8594 46.1154 19.8594 45.3086V43.0348C19.8594 43.8416 19.1993 44.6851 18.3925 44.6851Z" fill="#EA291C"/>
+  <path d="M27.6346 44.6851H24.1506C23.3437 44.6851 22.6836 43.8416 22.6836 43.0348V45.3086C22.6836 46.1154 23.3437 46.7756 24.1506 46.7756H27.6346C28.4415 46.7756 29.1016 46.1154 29.1016 45.3086V43.0348C29.1016 43.8416 28.4415 44.6851 27.6346 44.6851Z" fill="#F4B10B"/>
+  <path d="M46.0817 44.5018H42.5976C41.7908 44.5018 41.1306 43.8416 41.1306 43.0348V45.3086C41.1306 46.1154 41.7908 46.7756 42.5976 46.7756H46.0817C46.8885 46.7756 47.5486 46.1154 47.5486 45.3086V43.0348C47.5486 43.8416 46.8885 44.5018 46.0817 44.5018Z" fill="#00B3F9"/>
+  <path d="M34.7125 21.9469C33.2822 21.9469 32.1453 20.81 32.1453 19.3797C32.1453 17.9494 33.2822 16.8125 34.7125 16.8125C36.1428 16.8125 37.2797 17.9494 37.2797 19.3797C37.2797 20.81 36.1428 21.9469 34.7125 21.9469ZM34.7125 17.5093C33.6856 17.5093 32.8421 18.3528 32.8421 19.3797C32.8421 20.4066 33.6856 21.2501 34.7125 21.2501C35.7394 21.2501 36.5829 20.4066 36.5829 19.3797C36.5829 18.3528 35.7394 17.5093 34.7125 17.5093Z" fill="#5E6C84"/>
+  <path d="M36.84 44.6851H33.3559C32.5491 44.6851 31.8889 43.8416 31.8889 43.0348V45.3086C31.8889 46.1154 32.5491 46.7756 33.3559 46.7756H36.84C37.6468 46.7756 38.3069 46.1154 38.3069 45.3086V43.0348C38.3069 43.8416 37.6468 44.6851 36.84 44.6851Z" fill="#58990D"/>
+  <path d="M44.2481 16.8125C42.8178 16.8125 41.6809 15.6756 41.6809 14.2453C41.6809 12.815 42.8178 11.6781 44.2481 11.6781C45.6784 11.6781 46.8153 12.815 46.8153 14.2453C46.8153 15.6756 45.6784 16.8125 44.2481 16.8125ZM44.2481 12.3749C43.2212 12.3749 42.3777 13.2184 42.3777 14.2453C42.3777 15.2722 43.2212 16.1157 44.2481 16.1157C45.275 16.1157 46.1185 15.2722 46.1185 14.2453C46.1185 13.2184 45.275 12.3749 44.2481 12.3749Z" fill="#5E6C84"/>
+  <path d="M18.5759 47.2523H14.9084C13.8815 47.2523 13.0747 46.4454 13.0747 45.4185V34.0495C13.0747 33.0226 13.8815 32.2158 14.9084 32.2158H18.5759C19.6028 32.2158 20.4096 33.0226 20.4096 34.0495V45.4185C20.4096 46.4454 19.6028 47.2523 18.5759 47.2523ZM14.9084 32.9492C14.285 32.9492 13.8082 33.426 13.8082 34.0495V45.4185C13.8082 46.042 14.285 46.5188 14.9084 46.5188H18.5759C19.1993 46.5188 19.6761 46.042 19.6761 45.4185V34.0495C19.6761 33.426 19.1993 32.9492 18.5759 32.9492H14.9084Z" fill="#5E6C84"/>
+  <path d="M27.7446 47.2524H24.0771C23.0502 47.2524 22.2434 46.4455 22.2434 45.4186V38.8172C22.2434 37.7904 23.0502 36.9835 24.0771 36.9835H27.7446C28.7715 36.9835 29.5783 37.7904 29.5783 38.8172V45.4186C29.5783 46.4455 28.7715 47.2524 27.7446 47.2524ZM24.0771 37.717C23.4537 37.717 22.9769 38.1938 22.9769 38.8172V45.4186C22.9769 46.0421 23.4537 46.5189 24.0771 46.5189H27.7446C28.368 46.5189 28.8448 46.0421 28.8448 45.4186V38.8172C28.8448 38.1938 28.368 37.717 27.7446 37.717H24.0771Z" fill="#5E6C84"/>
+  <path d="M36.9133 47.2522H33.2458C32.2189 47.2522 31.4121 46.4454 31.4121 45.4185V28.5483C31.4121 27.5214 32.2189 26.7146 33.2458 26.7146H36.9133C37.9402 26.7146 38.747 27.5214 38.747 28.5483V45.4185C38.747 46.4454 37.9402 47.2522 36.9133 47.2522ZM33.2458 27.4481C32.6224 27.4481 32.1456 27.9248 32.1456 28.5483V45.4185C32.1456 46.042 32.6224 46.5188 33.2458 46.5188H36.9133C37.5367 46.5188 38.0135 46.042 38.0135 45.4185V28.5483C38.0135 27.9248 37.5367 27.4481 36.9133 27.4481H33.2458Z" fill="#5E6C84"/>
+  <path d="M46.0817 47.2523H42.781C41.7541 47.2523 40.9473 46.4455 40.9473 45.4186V23.0472C40.9473 22.0203 41.7541 21.2135 42.781 21.2135H46.0817C47.1086 21.2135 47.9154 22.0203 47.9154 23.0472V45.4186C47.9154 46.4455 47.1086 47.2523 46.0817 47.2523ZM42.781 21.947C42.1575 21.947 41.6808 22.4238 41.6808 23.0472V45.4186C41.6808 46.0421 42.1575 46.5188 42.781 46.5188H46.0817C46.7051 46.5188 47.1819 46.0421 47.1819 45.4186V23.0472C47.1819 22.4238 46.7051 21.947 46.0817 21.947H42.781Z" fill="#5E6C84"/>
+  <path d="M17.8058 25.6144C17.5858 25.6144 17.4024 25.4677 17.4024 25.2476C17.4024 24.8075 16.999 24.4775 16.5222 24.4775C16.0455 24.4775 15.642 24.8442 15.642 25.2476C15.642 25.431 15.4587 25.6144 15.2386 25.6144C15.0186 25.6144 14.8352 25.4677 14.8352 25.2476C14.8352 24.4408 15.5687 23.7806 16.4856 23.7806C17.4024 23.7806 18.1359 24.4408 18.1359 25.2476C18.2093 25.4677 18.0259 25.6144 17.8058 25.6144Z" fill="white"/>
+  <path d="M26.9744 30.7488C26.7544 30.7488 26.571 30.6021 26.571 30.382C26.571 29.9419 26.1676 29.6119 25.6908 29.6119C25.2141 29.6119 24.8106 29.9786 24.8106 30.382C24.8106 30.5654 24.6273 30.7488 24.4072 30.7488C24.1872 30.7488 24.0771 30.6021 24.0771 30.382C24.0771 29.5752 24.8106 28.915 25.7275 28.915C26.6444 28.915 27.3778 29.5752 27.3778 30.382C27.3778 30.6021 27.1945 30.7488 26.9744 30.7488Z" fill="white"/>
+  <path d="M35.8496 19.7464C35.6663 19.7464 35.5196 19.5997 35.5196 19.3797C35.5196 18.9396 35.1528 18.6095 34.7494 18.6095C34.3093 18.6095 33.9792 18.9763 33.9792 19.3797C33.9792 19.5631 33.8325 19.7464 33.6492 19.7464C33.4658 19.7464 33.3191 19.5997 33.3191 19.3797C33.3191 18.5729 33.9792 17.9127 34.7861 17.9127C35.5929 17.9127 36.253 18.5729 36.253 19.3797C36.1797 19.5997 36.033 19.7464 35.8496 19.7464Z" fill="white"/>
+  <path d="M45.3848 14.6487C45.2014 14.6487 45.0547 14.502 45.0547 14.2819C45.0547 13.8418 44.688 13.4751 44.2846 13.4751C43.8445 13.4751 43.5144 13.8418 43.5144 14.2819C43.5144 14.4653 43.3677 14.6487 43.1843 14.6487C43.0009 14.6487 42.8542 14.502 42.8542 14.2819C42.8542 13.4384 43.5144 12.7783 44.3212 12.7783C45.1281 12.7783 45.7882 13.4384 45.7882 14.2819C45.7149 14.4653 45.5682 14.6487 45.3848 14.6487Z" fill="white"/>
+  <path d="M18.5757 42.1179C18.3557 42.1179 18.209 41.9712 18.209 41.7511V40.2842C18.209 40.0641 18.3557 39.9174 18.5757 39.9174C18.7958 39.9174 18.9425 40.0641 18.9425 40.2842V41.7511C18.9425 41.9712 18.7958 42.1179 18.5757 42.1179Z" fill="white"/>
+  <path d="M18.5759 39.1839C18.3559 39.1839 18.2092 39.0005 18.2092 38.8171V34.4529C18.2092 34.2328 18.0258 34.0861 17.8424 34.0861H15.3119C15.0919 34.0861 14.9452 34.2695 14.9452 34.4529C14.9452 34.6729 14.7618 34.8196 14.5784 34.8196C14.3584 34.8196 14.2117 34.6363 14.2117 34.4529C14.2117 33.8294 14.7251 33.3527 15.3486 33.3527H17.8791C18.5026 33.3527 19.016 33.8661 19.016 34.4529V38.8171C18.9427 39.0005 18.7593 39.1839 18.5759 39.1839Z" fill="white"/>
+  <path d="M27.7447 43.9149C27.5246 43.9149 27.3779 43.7682 27.3779 43.5482V39.2573C27.3779 39.0739 27.1946 38.8905 26.9745 38.8172H24.554C24.334 38.8172 24.1873 38.6705 24.1873 38.4504C24.1873 38.2304 24.334 38.0837 24.554 38.0837H27.0112C27.0479 38.0837 27.0479 38.0837 27.0845 38.0837C27.6713 38.1937 28.1114 38.6705 28.1114 39.2573V43.5482C28.1114 43.7315 27.9647 43.9149 27.7447 43.9149Z" fill="white"/>
+  <path d="M36.9131 42.4846C36.6931 42.4846 36.5464 42.3379 36.5464 42.1179V38.4504C36.5464 38.2671 36.6931 38.0837 36.9131 38.0837C37.1332 38.0837 37.2799 38.2304 37.2799 38.4504V42.1179C37.2799 42.3379 37.1332 42.4846 36.9131 42.4846Z" fill="white"/>
+  <path d="M36.9134 36.58C36.6933 36.58 36.5466 36.4333 36.5466 36.2133V28.805C36.5466 28.695 36.51 28.6217 36.4366 28.5483C36.3999 28.5116 36.3266 28.5116 36.2532 28.5116C36.2166 28.5116 36.1799 28.5116 36.1799 28.5116H33.7227C33.5027 28.5116 33.356 28.365 33.356 28.1449C33.356 27.9249 33.5027 27.7782 33.7227 27.7782H36.1432C36.3999 27.7415 36.6933 27.7782 36.8767 27.9615C37.1334 28.1449 37.2801 28.475 37.2801 28.7684V36.1399C37.2801 36.3966 37.1334 36.58 36.9134 36.58Z" fill="white"/>
+  <path d="M46.0816 40.761C45.8615 40.761 45.7148 40.6143 45.7148 40.3942V37.3503C45.7148 37.1302 45.8615 36.9835 46.0816 36.9835C46.3016 36.9835 46.4483 37.1302 46.4483 37.3503V40.3942C46.4483 40.5776 46.3016 40.761 46.0816 40.761Z" fill="white"/>
+  <path d="M46.0817 35.3331C45.8617 35.3331 45.715 35.1864 45.715 34.9663V23.3772C45.715 23.3405 45.715 23.3405 45.715 23.3039C45.715 23.1938 45.6783 23.1572 45.6783 23.1205C45.6416 23.0838 45.5683 23.0471 45.4583 23.0471H45.4216H42.9644C42.7444 23.0471 42.5977 22.9004 42.5977 22.6804C42.5977 22.4603 42.7444 22.3137 42.9644 22.3137H45.3849C45.6783 22.277 45.9717 22.387 46.1918 22.607C46.3751 22.8271 46.4851 23.1205 46.4485 23.3772V34.9663C46.4485 35.1864 46.3018 35.3331 46.0817 35.3331Z" fill="white"/>
+</svg>
diff --git a/mon-pix/public/images/rocket.svg b/mon-pix/public/images/rocket.svg
new file mode 100644
index 00000000000..12c08718612
--- /dev/null
+++ b/mon-pix/public/images/rocket.svg
@@ -0,0 +1,34 @@
+<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_14411_117371)">
+    <rect y="0.5" width="60" height="60" rx="30" fill="#B7F0FF"/>
+    <path d="M37.5207 30.9855C37.5207 30.9855 41.5541 31.8217 41.5541 35.4125C41.5541 37.1833 41.1114 38.7574 40.6687 39.8887C40.1769 41.1184 39.6358 40.8725 39.3898 39.6919C39.0455 38.2163 38.3077 36.4947 36.7336 36.1504" fill="#F74541"/>
+    <path d="M21.4361 30.9855C21.4361 30.9855 17.4026 31.8217 17.4026 35.4125C17.4026 37.1833 17.8453 38.7574 18.288 39.8887C18.7799 41.1184 19.3209 40.8725 19.5669 39.6919C19.9112 38.2163 20.649 36.4947 22.2231 36.1504" fill="#F74541"/>
+    <path d="M40.0296 41.0693H39.9804C39.4885 41.0201 39.1442 40.5774 38.8983 39.692C38.6031 38.4131 37.9145 36.839 36.5864 36.5439C36.3405 36.4947 36.1437 36.1996 36.1929 35.9536C36.2421 35.7077 36.5372 35.5109 36.7832 35.6093C38.2588 35.9536 39.2918 37.2817 39.8329 39.446C39.882 39.692 39.9804 39.8887 40.0296 39.9871C40.0788 39.8887 40.128 39.7903 40.2264 39.5936C40.8166 38.1671 41.1118 36.7406 41.1118 35.3634C41.1118 32.2153 37.4718 31.4774 37.4226 31.4774C37.1767 31.4283 36.9799 31.1823 37.0291 30.8872C37.0783 30.6412 37.3242 30.4445 37.6194 30.4937C39.1442 30.7888 42.0955 32.2153 42.0955 35.3634C42.0955 36.8882 41.8004 38.4131 41.161 39.9871C41.0626 40.233 40.7183 41.0693 40.0296 41.0693Z" fill="#A03513"/>
+    <path d="M24.3875 44.906C24.3875 45.9882 25.0761 46.972 25.8631 46.972C26.6501 46.972 26.8469 47.759 26.8469 48.8411V53.3665C26.8469 54.4486 27.5355 55.334 28.3226 55.334C29.1096 55.334 29.7982 54.4486 29.7982 53.3665V48.3984C29.7982 47.3163 30.4869 46.4309 31.2739 46.4309C32.0609 46.4309 32.7004 47.0703 32.7004 47.8574C32.7004 48.6444 33.4382 49.4806 34.2252 49.4806C35.0122 49.4806 35.7009 48.3984 35.7009 47.3163V35.265C35.7009 34.1829 34.963 33.2975 34.2252 33.2975C33.4382 33.2975 32.7987 34.1337 32.7987 35.1667C32.7987 36.1996 32.1101 37.0358 31.3231 37.0358C30.536 37.0358 29.8474 37.9212 29.8474 39.0034V43.0369C29.8474 44.119 29.1588 45.0044 28.3717 45.0044C27.5847 45.0044 26.8961 44.119 26.8961 43.0369V36.6423C26.8961 35.5602 26.4534 34.6748 25.6664 34.6748C24.8793 34.6748 24.3875 35.5602 24.3875 36.6423V44.906Z" fill="white"/>
+    <path d="M38.4061 23.8532C38.4061 13.5236 29.7489 6.98151 29.7489 6.98151C29.7489 6.98151 21.0425 13.5728 21.0425 23.8532C21.0425 26.9521 21.7803 34.2813 22.0754 35.511C22.3706 36.7407 25.1743 39.2001 29.6997 39.2001C34.2251 39.2001 37.0288 36.7407 37.324 35.5602C37.6683 34.3796 38.4061 27.0013 38.4061 23.8532Z" fill="#F74541"/>
+    <path d="M29.6999 25.0337C31.7917 25.0337 33.4874 23.338 33.4874 21.2462C33.4874 19.1544 31.7917 17.4587 29.6999 17.4587C27.6081 17.4587 25.9124 19.1544 25.9124 21.2462C25.9124 23.338 27.6081 25.0337 29.6999 25.0337Z" fill="#3AD0F9"/>
+    <path d="M29.6999 19.2295C31.4215 19.2295 32.8972 20.41 33.3399 22.0332C33.4382 21.7381 33.4874 21.3938 33.4874 21.0494C33.4874 18.9835 31.815 17.2619 29.6999 17.2619C27.634 17.2619 25.9124 18.9343 25.9124 21.0494C25.9124 21.3938 25.9615 21.7381 26.0599 22.0332C26.5026 20.41 27.9291 19.2295 29.6999 19.2295Z" fill="#00B3F9"/>
+    <path d="M29.7981 25.8208C27.3386 25.8208 25.3711 23.8532 25.3711 21.3938C25.3711 18.9343 27.3386 16.9668 29.7981 16.9668C32.2575 16.9668 34.2251 18.9343 34.2251 21.3938C34.2251 23.8532 32.2575 25.8208 29.7981 25.8208ZM29.7981 17.9998C27.9289 17.9998 26.4041 19.5246 26.4041 21.3938C26.4041 23.263 27.9289 24.7878 29.7981 24.7878C31.6673 24.7878 33.1921 23.263 33.1921 21.3938C33.1921 19.5246 31.6673 17.9998 29.7981 17.9998Z" fill="#A03513"/>
+    <path d="M29.7488 12.0479C31.2245 12.0479 32.6017 11.7528 33.8807 11.2117C31.7655 8.40796 29.7488 6.83392 29.7488 6.83392C29.7488 6.83392 27.6829 8.40796 25.6169 11.2117C26.8467 11.7528 28.2731 12.0479 29.7488 12.0479Z" fill="white"/>
+    <path opacity="0.3" d="M38.1604 27.3948C37.8161 28.7229 34.7172 31.4283 29.7 31.4283C24.6827 31.4283 21.5838 28.6737 21.2395 27.3457C21.1903 27.2473 21.1903 27.0997 21.1411 26.903C21.3871 30.297 21.8298 34.478 22.0265 35.3634C22.3216 36.5931 25.1254 39.0526 29.6508 39.0526C34.1761 39.0526 36.9799 36.5931 37.275 35.4126C37.521 34.5272 37.9637 30.3462 38.1604 26.9521C38.2096 27.1489 38.2096 27.2965 38.1604 27.3948Z" fill="#A81000"/>
+    <path d="M29.5521 39.5936C24.8791 39.5936 21.8786 36.9866 21.4851 35.5601C21.19 34.232 20.4521 26.9521 20.4521 23.804C20.4521 13.376 28.9126 6.8831 29.2569 6.58797C29.4537 6.4404 29.6504 6.4404 29.8472 6.58797C30.1915 6.8831 38.652 13.376 38.652 23.804C38.652 26.8045 37.9633 34.2812 37.619 35.6093C37.2255 37.0358 34.1758 39.5936 29.5521 39.5936ZM29.5521 7.62093C28.0764 8.89984 21.4359 14.9501 21.4359 23.804C21.4359 26.8045 22.1738 34.0845 22.4689 35.3142C22.7148 36.2488 25.2235 38.6098 29.5521 38.6098C33.8807 38.6098 36.4385 36.2488 36.6844 35.3634C36.9796 34.232 37.7174 26.9029 37.7174 23.8532C37.6682 14.9501 31.0277 8.89984 29.5521 7.62093Z" fill="#A03513"/>
+    <path d="M19.0259 41.0693C18.3864 41.0693 18.0421 40.2331 17.9437 39.9379C17.3535 38.3639 17.0583 36.839 17.0583 35.3142C17.0583 32.1661 19.9113 30.7888 21.4361 30.4445C21.6821 30.3953 21.928 30.5429 22.0264 30.838C22.0756 31.084 21.928 31.3791 21.6329 31.4283C21.387 31.4775 17.9929 32.2153 17.9929 35.3634C17.9929 37.085 18.4356 38.6098 18.8291 39.5936C18.8783 39.7904 18.9767 39.8887 19.0259 39.9871C19.0751 39.8887 19.1243 39.7412 19.2227 39.446C19.7637 37.2325 20.7967 35.9045 22.2232 35.6093C22.4691 35.5601 22.7642 35.7077 22.8134 35.9536C22.8626 36.1996 22.7151 36.4947 22.4691 36.5439C21.141 36.839 20.5016 38.4131 20.2064 39.692C20.0097 40.5774 19.6654 41.0201 19.1735 41.0693C19.0259 41.0693 19.0259 41.0693 19.0259 41.0693Z" fill="#A03513"/>
+    <path d="M59.9016 40.8726C58.967 40.1839 57.8357 39.7904 56.606 39.7904C53.4579 39.7904 50.9493 42.299 50.9493 45.4471C50.9493 45.7422 50.9984 46.0374 51.0476 46.3325C50.6049 46.2341 50.2114 46.1849 49.7195 46.1849C46.7682 46.1849 44.3088 48.4968 44.0628 51.399C43.5218 51.2022 42.9315 51.1038 42.3412 51.1038C40.5212 51.1038 38.8488 51.9892 37.8159 53.3665C36.8321 51.7433 35.0121 50.6119 32.9954 50.6119C30.8311 50.6119 28.9619 51.8416 27.9781 53.6124C26.9451 52.6779 25.6171 52.0876 24.1414 52.0876C23.1576 52.0876 22.223 52.3335 21.3868 52.7762C21.1409 49.9233 18.6814 47.6606 15.7793 47.6606C14.7955 47.6606 13.8609 47.9066 13.0739 48.3492C13.0739 48.2017 13.0739 48.0541 13.0739 47.9065C13.0739 44.7585 10.5653 42.2498 7.41722 42.2498C4.61346 42.2498 2.30159 44.3158 1.85889 46.972C7.17127 56.9081 17.5993 63.6961 29.6505 63.6961C36.4386 63.6961 42.7347 61.5318 47.8996 57.8919C47.9487 57.6951 47.9979 57.4492 47.9979 57.2524C48.1947 57.3016 48.3914 57.3508 48.5882 57.4C53.999 53.3173 58.0324 47.513 59.9016 40.8726Z" fill="white"/>
+    <path d="M29.8475 36.1504C26.6995 36.1504 23.6498 34.8223 21.3871 32.4613C21.1903 32.2645 21.1903 31.9694 21.3871 31.7726C21.5838 31.5759 21.879 31.5759 22.0757 31.7726C24.1908 33.9369 26.9454 35.1667 29.8475 35.1667C32.6021 35.1667 35.2583 34.0845 37.275 32.1169C37.4718 31.9202 37.7669 31.9202 37.9637 32.1169C38.1604 32.3137 38.1604 32.6088 37.9637 32.8056C35.7502 34.9699 32.848 36.1504 29.8475 36.1504Z" fill="#A03513"/>
+    <path d="M1.51465 46.1849C1.76059 46.6768 2.00654 47.1686 2.30167 47.6605C2.35086 44.8568 4.85948 42.5449 7.66324 42.5449C10.5162 42.5449 12.5821 44.9551 12.5821 47.8081C12.5821 47.9557 12.5821 48.1032 12.5821 48.2508C12.5821 48.4475 12.6313 48.5951 12.8281 48.6935C12.9756 48.7919 13.1724 48.7919 13.3199 48.6935C14.0578 48.3 15.1399 47.9557 16.0253 47.9557C18.7307 47.9557 20.6983 50.12 20.9442 52.8253C20.9442 52.9729 21.0426 53.1205 21.1901 53.2189C21.3377 53.3172 21.5345 53.3172 21.682 53.2189C22.4199 52.7762 23.5512 52.3826 24.3874 52.3826C25.7155 52.3826 26.6993 53.0713 27.6831 53.9567C27.7814 54.0551 27.929 54.1043 28.0766 54.1043C28.2241 54.0551 28.3717 54.0059 28.4209 53.8583C29.3063 52.1367 31.323 50.907 33.1922 50.907C35.0122 50.907 36.4387 51.9891 37.3732 53.6124C37.4716 53.7599 37.6192 53.8583 37.7668 53.8583C37.9143 53.8583 38.0619 53.8091 38.1603 53.6616C39.144 52.3335 40.3738 51.4481 41.997 51.4481C42.9808 51.4481 43.3251 51.694 43.8662 51.8416C44.0137 51.8908 44.1613 51.8416 44.3089 51.7924C44.4564 51.694 44.5056 51.5464 44.5056 51.3989C44.7516 48.3 47.6537 45.9881 50.851 46.7259C50.9985 46.7751 51.1953 46.7259 51.2937 46.6276C51.392 46.5292 51.4904 46.3324 51.4412 46.1849C51.392 45.8897 51.392 45.5946 51.392 45.3487C51.392 42.4465 53.7039 40.1346 56.5569 40.1346C57.7374 40.1346 58.8687 40.5282 59.7049 41.2168C59.8033 40.8725 59.9017 40.5282 60.0001 40.1838C59.0163 39.4952 57.8358 39.1017 56.5569 39.1017C53.1628 39.1017 50.4083 41.9054 50.4083 45.3487C50.4083 45.447 50.4083 45.3978 50.4083 45.4962C46.9651 45.4962 44.2105 47.5621 43.6202 50.7102C43.1775 50.6119 42.4889 50.4151 42.0462 50.4151C40.3246 50.4151 38.9965 51.2513 37.8159 52.5302C36.6354 51.0054 35.1106 49.9232 33.1922 49.9232C31.1263 49.9232 28.962 51.1037 27.8306 52.8253C26.7485 51.9891 25.6663 51.3989 24.3382 51.3989C23.5512 51.3989 22.5182 51.694 21.7804 52.0383C21.2393 49.1362 18.9767 46.9719 16.0253 46.9719C15.2875 46.9719 14.2545 47.2178 13.5659 47.513C13.4183 44.2173 10.7129 41.6103 7.4173 41.6103C4.61354 41.6103 2.20329 43.5287 1.51465 46.1849Z" fill="#5E6C84"/>
+    <path d="M59.8032 41.2169C57.7372 41.8071 56.1632 43.7747 56.1632 46.0374C56.1632 46.1357 56.1632 46.2341 56.1632 46.3325C55.081 46.9227 54.1956 47.8573 53.8021 49.0379C51.5394 49.5298 49.8178 51.5465 49.8178 53.9567C49.8178 54.2519 49.867 54.547 49.9162 54.793C49.5227 54.6946 49.1292 54.6454 48.7357 54.6454C46.8173 54.6454 45.1449 55.7275 44.3087 57.3016C43.5217 56.8097 42.5871 56.3178 41.6033 56.3178C39.1439 56.3178 37.0779 58.3345 36.6353 60.6956C35.9958 60.4005 35.4547 60.2529 34.7169 60.2529C33.5364 60.2529 32.3558 60.6464 31.5196 61.2859C30.8802 59.2691 29.1094 57.7935 26.8467 57.7935C25.0759 57.7935 23.4035 58.6789 22.4689 60.0561C21.6327 58.3837 19.9603 57.2524 17.9435 57.2524C17.5008 57.2524 17.0581 57.3016 16.6646 57.4491C16.7138 57.2032 16.7138 57.0064 16.7138 56.7605C16.7138 54.0059 14.4511 51.7432 11.6966 51.7432C11.2539 51.7432 10.8112 51.7924 10.4176 51.8908C10.4176 51.7924 10.4176 51.6941 10.4176 51.5957C10.4176 48.8411 7.95821 46.4801 5.15445 46.4801C3.97392 46.4801 3.08852 47.0211 2.20312 47.7098C7.66308 57.2524 17.8943 63.6961 29.6504 63.6961C43.9152 63.6961 55.9664 54.2027 59.8032 41.2169Z" fill="#E4F5F9"/>
+    <path opacity="0.5" d="M40.128 37.3309H40.0788C39.8328 37.2817 39.6361 37.0358 39.6361 36.7899C39.9804 34.0845 38.6031 33.3466 38.5539 33.2974C38.308 33.1499 38.2096 32.8548 38.3572 32.658C38.5047 32.4121 38.7507 32.3137 38.9966 32.4612C39.095 32.5104 41.0134 33.4942 40.6199 36.9374C40.6199 37.1342 40.3739 37.3309 40.128 37.3309Z" fill="white"/>
+    <path opacity="0.5" d="M36.4387 28.2802C36.0943 28.231 35.8484 28.0343 35.8976 27.7391C35.8976 27.6899 36.2911 23.7056 35.8976 20.41C35.7992 19.7214 35.6025 18.9343 35.2581 18.1473C35.1598 17.9014 35.3073 17.6062 35.6025 17.5079C35.8976 17.4095 36.1927 17.5571 36.3403 17.803C36.7338 18.6884 36.9797 19.5246 37.0289 20.3116C37.4224 23.7056 37.0289 27.6899 37.0289 27.8375C36.9797 28.0834 36.7338 28.2802 36.4387 28.2802Z" fill="white"/>
+    <path opacity="0.5" d="M34.717 16.4749C34.5695 16.4749 34.3727 16.3766 34.3235 16.229C33.5857 14.8517 32.8971 13.9171 32.8479 13.9171C32.7003 13.7204 32.7003 13.3761 32.8971 13.1793C33.0938 12.9825 33.3889 13.0317 33.5857 13.2285C33.6349 13.2777 34.3727 14.2615 35.1597 15.6879C35.3073 15.9339 35.2089 16.229 34.963 16.3766C34.9138 16.4749 34.8154 16.4749 34.717 16.4749Z" fill="white"/>
+    <path opacity="0.5" d="M23.0102 26.3618C22.7643 26.3618 22.5184 26.1651 22.5184 25.9191C22.2232 21.4429 22.9119 19.8197 22.9119 19.7213C23.0102 19.4754 23.3054 19.377 23.6005 19.4754C23.8464 19.5738 23.994 19.8689 23.8956 20.1148C23.8956 20.164 23.2562 21.6889 23.5513 25.8699C23.5513 26.1159 23.3054 26.3618 23.0102 26.3618Z" fill="white"/>
+    <path opacity="0.5" d="M18.829 36.5931C18.5831 36.5931 18.3371 36.3963 18.3371 36.1504C18.1404 33.5926 20.0588 32.5104 20.1571 32.4612C20.4031 32.3137 20.6982 32.4121 20.8458 32.658C20.9933 32.9039 20.895 33.1991 20.649 33.3466C20.5998 33.3958 19.1734 34.1828 19.3209 36.1012C19.3209 36.3472 19.1242 36.5439 18.829 36.5931Z" fill="white"/>
+    <path d="M29.3555 23.8532C29.0604 23.8532 28.8636 23.6565 28.8145 23.3613C28.8145 23.0662 29.0112 22.8694 29.3063 22.8202C31.1755 22.7219 31.2247 21.443 31.2247 21.3938C31.2247 21.0986 31.4706 20.9019 31.7658 20.9019C32.0609 20.9019 32.3069 21.1478 32.3069 21.3938C32.2577 22.1808 31.6674 23.7548 29.3555 23.8532Z" fill="white"/>
+    <path opacity="0.5" d="M30.0441 37.626C26.1582 37.626 23.1577 35.6093 23.1085 35.5601C22.8626 35.4125 22.8134 35.1174 22.9609 34.8714C23.1085 34.6255 23.4036 34.5763 23.6496 34.7239C23.8955 34.8714 29.6506 38.7574 35.4549 34.9698C35.7008 34.8223 35.996 34.8714 36.1435 35.1174C36.2911 35.3633 36.2419 35.6585 35.996 35.806C33.9792 37.1833 31.9133 37.626 30.0441 37.626Z" fill="white"/>
+  </g>
+  <rect x="0.5" y="1" width="59" height="59" rx="29.5" stroke="#5E6C84"/>
+  <defs>
+    <clipPath id="clip0_14411_117371">
+      <rect y="0.5" width="60" height="60" rx="30" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/mon-pix/tests/integration/components/campaigns/assessment/start-landing-page/campaign-landing-page-details-test.gjs b/mon-pix/tests/integration/components/campaigns/assessment/start-landing-page/campaign-landing-page-details-test.gjs
new file mode 100644
index 00000000000..ad0c1b0a780
--- /dev/null
+++ b/mon-pix/tests/integration/components/campaigns/assessment/start-landing-page/campaign-landing-page-details-test.gjs
@@ -0,0 +1,44 @@
+import { render } from '@1024pix/ember-testing-library';
+import { t } from 'ember-intl/test-support';
+import CampaignLandingPageDetails from 'mon-pix/components/campaign-landing-page-details';
+import { module, test } from 'qunit';
+
+import setupIntlRenderingTest from '../../../../../helpers/setup-intl-rendering';
+
+module(
+  'Integration | Components | Campaigns | Assessment | Start Landing Page | Campaign Landing Page Details',
+  function (hooks) {
+    setupIntlRenderingTest(hooks);
+
+    test('it should display the three steps', async function (assert) {
+      // given
+      const expectedTitles = [
+        t('components.campaigns.start-landing-page.steps.step1.title'),
+        t('components.campaigns.start-landing-page.steps.step2.title'),
+        t('components.campaigns.start-landing-page.steps.step3.title'),
+      ];
+
+      const expectedDescriptions = [
+        t('components.campaigns.start-landing-page.steps.step1.description'),
+        t('components.campaigns.start-landing-page.steps.step2.description'),
+        t('components.campaigns.start-landing-page.steps.step3.description'),
+      ];
+
+      const expectedImagesSrc = ['/images/rocket.svg', '/images/chart.svg', '/images/book.svg'];
+
+      // when
+      const screen = await render(<template><CampaignLandingPageDetails /></template>);
+
+      // then
+      const stepTitles = screen.getAllByRole('heading', { level: 3 }).map((el) => el.textContent);
+      const stepDescriptions = screen.getAllByRole('paragraph').map((el) => el.textContent);
+      const stepImages = screen.getAllByRole('presentation');
+
+      assert.deepEqual(stepTitles, expectedTitles);
+      assert.deepEqual(stepDescriptions, expectedDescriptions);
+      stepImages.forEach((stepImage, index) => {
+        assert.dom(stepImage).hasAttribute('src', expectedImagesSrc[index]);
+      });
+    });
+  },
+);
diff --git a/mon-pix/tests/integration/components/campaigns/assessment/start-landing-page/campaign-step-test.gjs b/mon-pix/tests/integration/components/campaigns/assessment/start-landing-page/campaign-step-test.gjs
new file mode 100644
index 00000000000..04ff496e201
--- /dev/null
+++ b/mon-pix/tests/integration/components/campaigns/assessment/start-landing-page/campaign-step-test.gjs
@@ -0,0 +1,29 @@
+import { render } from '@1024pix/ember-testing-library';
+import CampaignStep from 'mon-pix/components/campaigns/assessment/start-landing-page/campaign-step';
+import { module, test } from 'qunit';
+
+import setupIntlRenderingTest from '../../../../../helpers/setup-intl-rendering';
+
+module('Integration | Components | Campaigns | Assessment | Start Landing Page | Campaign Step', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('it displays an image, a title and a description', async function (assert) {
+    // given
+    const step = {
+      description: 'ma super description',
+      image: {
+        alt: 'mon alt',
+        src: 'path',
+      },
+      title: 'mon titre',
+    };
+
+    // when
+    const screen = await render(<template><CampaignStep @step={{step}} /></template>);
+
+    // then
+    assert.dom(screen.getByRole('presentation')).hasAttribute('src', step.image.src);
+    assert.dom(screen.getByRole('heading', { level: 3, name: step.title }));
+    assert.dom(screen.getByText('ma super description'));
+  });
+});
diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json
index 331b35acd77..ffa4ca9f677 100644
--- a/mon-pix/translations/en.json
+++ b/mon-pix/translations/en.json
@@ -267,6 +267,22 @@
         },
         "subtitle": "One moment, please! I'll be as quick as I can.",
         "title": "Calculate your current score..."
+      },
+      "start-landing-page": {
+        "steps": {
+          "step1": {
+            "description": "Answer questions adapted to your level",
+            "title": "Pass test"
+          },
+          "step2": {
+            "description": "Discover your strengths and areas for improvement",
+            "title": "Discover your score"
+          },
+          "step3": {
+            "description": "Access training tailored to your results",
+            "title": "Make progress"
+          }
+        }
       }
     },
     "invited": {
diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json
index 1f0c5383e72..c5c695cf92b 100644
--- a/mon-pix/translations/es.json
+++ b/mon-pix/translations/es.json
@@ -273,6 +273,22 @@
         },
         "subtitle": "¡Un momento, por favor! Seré tan rápido como pueda.",
         "title": "Calcular su puntuación actual..."
+      },
+      "start-landing-page": {
+        "steps": {
+          "step1": {
+            "description": "Answer questions adapted to your level",
+            "title": "Pass test"
+          },
+          "step2": {
+            "description": "Discover your strengths and areas for improvement",
+            "title": "Discover your score"
+          },
+          "step3": {
+            "description": "Access training tailored to your results",
+            "title": "Make progress"
+          }
+        }
       }
     },
     "invited": {
diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json
index cbd05ddb3aa..d928e05897f 100644
--- a/mon-pix/translations/fr.json
+++ b/mon-pix/translations/fr.json
@@ -267,6 +267,22 @@
         },
         "subtitle": "Un instant, s’il vous plaît ! Je vais faire au plus vite.",
         "title": "Calcul de votre score en cours..."
+      },
+      "start-landing-page": {
+        "steps": {
+          "step1": {
+            "description": "Répondez à des questions qui s'adaptent à votre niveau",
+            "title": "Passez le test"
+          },
+          "step2": {
+            "description": "Découvrez vos forces et axes de progression",
+            "title": "Découvrez votre score"
+          },
+          "step3": {
+            "description": "Accédez à des formations adaptées à vos résultats",
+            "title": "Progressez"
+          }
+        }
       }
     },
     "invited": {
diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json
index d593d166ea2..015e2f95edb 100644
--- a/mon-pix/translations/nl.json
+++ b/mon-pix/translations/nl.json
@@ -273,6 +273,22 @@
         },
         "subtitle": "Een ogenblikje, alstublieft! Ik zal zo snel mogelijk zijn.",
         "title": "Je huidige score berekenen..."
+      },
+      "start-landing-page": {
+        "steps": {
+          "step1": {
+            "description": "Answer questions adapted to your level",
+            "title": "Pass test"
+          },
+          "step2": {
+            "description": "Discover your strengths and areas for improvement",
+            "title": "Discover your score"
+          },
+          "step3": {
+            "description": "Access training tailored to your results",
+            "title": "Make progress"
+          }
+        }
       }
     },
     "invited": {


Reviews:
user: login: yannbertrand
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T15:12:45Z
user: login: yannbertrand
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-12T08:52:05Z
user: login: er-lim
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T09:26:10Z
user: login: yannbertrand
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-12T09:30:07Z
user: login: yannbertrand
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-12T09:34:50Z
user: login: yannbertrand
body: LGTM ✨ 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-12T09:35:00Z
user: login: lionelB
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-12T13:05:57Z
user: login: Alexandre-Monney
body: 🐈‍⬛ 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T13:54:27Z
user: login: machestla
body: tech review ok ✅ 🐕 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T16:11:15Z

Review comments:
diff_hunk: @@ -0,0 +1,5 @@
+.campaign-landing-page-details {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--pix-spacing-4x);
+}
path: mon-pix/app/styles/components/campaigns/assessment/start-landing-page/campaign-landing-page-details.scss
user: login: yannbertrand
body: ```suggestion
.campaign-landing-page-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--pix-spacing-4x);
}
```

Pour éviter l'effet tout à gauche
<img width="388" alt="image" src="https://github.com/user-attachments/assets/ad7f0965-ed20-41ed-b5c5-87d880b9386d" />

<img width="514" alt="image" src="https://github.com/user-attachments/assets/5b9144ef-c7ba-4cec-a0ee-8d183552f338" />

created_at: 2025-03-11T15:12:45Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,7 @@
+<template>
+  <div class="campaign-step">
+    <img class="campaign-step__image" role="presentation" src={{@step.image.src}} />
path: mon-pix/app/components/campaigns/assessment/start-landing-page/campaign-step.gjs
user: login: yannbertrand
body: Pour éviter du [layout shift](https://web.dev/articles/cls?hl=fr)
```suggestion
    <img class="campaign-step__image" role="presentation" src={{@step.image.src}} width="60" height="60" />
```
created_at: 2025-03-12T08:52:05Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,7 @@
+<template>
+  <div class="campaign-step">
+    <img class="campaign-step__image" role="presentation" src={{@step.image.src}} />
path: mon-pix/app/components/campaigns/assessment/start-landing-page/campaign-step.gjs
user: login: er-lim
body: plus de détails sur l'optimisation : https://web.dev/articles/optimize-cls?hl=fr#images-without-dimensions
created_at: 2025-03-12T09:26:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,5 @@
+.campaign-landing-page-details {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--pix-spacing-4x);
+}
path: mon-pix/app/styles/components/campaigns/assessment/start-landing-page/campaign-landing-page-details.scss
user: login: yannbertrand
body: Vu et validé avec @QuentinChapelain-ui 
created_at: 2025-03-12T09:30:07Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,7 @@
+<template>
+  <div class="campaign-step">
+    <img class="campaign-step__image" role="presentation" src={{@step.image.src}} width="60" height="60" />
path: mon-pix/app/components/campaigns/assessment/start-landing-page/campaign-step.gjs
user: login: yannbertrand
body: Revérifié avec VoiceOver : pas besoin de `alt` quand une image a le rôle `presentation`
created_at: 2025-03-12T09:34:50Z
author_association: MEMBER

PR comments:
user: login: pix-bot-github
created_at: 2025-03-11T11:09:07Z
body: Une fois les applications déployées, elles seront accessibles via les liens suivants :
  * [App (.fr)](https://app-pr11627.review.pix.fr)
  * [App (.org)](https://app-pr11627.review.pix.org)
  * [Orga (.fr)](https://orga-pr11627.review.pix.fr)
  * [Orga (.org)](https://orga-pr11627.review.pix.org)
  * [Certif (.fr)](https://certif-pr11627.review.pix.fr)
  * [Certif (.org)](https://certif-pr11627.review.pix.org)
  * [Junior](https://junior-pr11627.review.pix.fr)
  * [Admin](https://admin-pr11627.review.pix.fr)
  * [API](https://api-pr11627.review.pix.fr/api/)
  * [API MaDDo](https://pix-api-maddo-review-pr11627.osc-fr1.scalingo.io/api/)
  * [Audit Logger](https://pix-audit-logger-review-pr11627.osc-fr1.scalingo.io/api/)

Les variables d'environnement seront accessibles via les liens suivants :
  * [scalingo front](https://dashboard.scalingo.com/apps/osc-fr1/pix-front-review-pr11627/environment)
  * [scalingo api](https://dashboard.scalingo.com/apps/osc-fr1/pix-api-review-pr11627/environment)
  * [scalingo api-maddo](https://dashboard.scalingo.com/apps/osc-fr1/pix-api-maddo-review-pr11627/environment)
  * [scalingo audit-logger](https://dashboard.scalingo.com/apps/osc-fr1/pix-audit-logger-review-pr11627/environment)

author_association: NONE
user: login: Faraopix
created_at: 2025-03-12T17:11:45Z
body: 👍 
author_association: CONTRIBUTOR