feat(campagne): Accueil, Page Employeur, Page Apprenti (#3356)

* refactor(campagne): réorganise assertions des tests

* feat(campagne): affiche une section verbatim et son titre

* docs(storybook): fix le nom de la commande

* feat(campagne): affiche une liste de verbatims

* refactor(campagne): factorise l'alternance des couleurs de fond

* feat(campagne): masque la section de redirections externes

* feat(campagne): affiche la bannière de la campagne

* feat(campagne): masque l'encart de redirections internes

* feat(campagne): affiche une sous-section FAQ sur la page employeur

* feat(campagne): remplace l'image de présentation de la page apprenti

* feat(campagne): remplace l'image de présentation de la page employeur

* refactor(campagne): déplace les couleurs de la campagne dans les variables scss

* fix(campagne): étend le menu pour ne plus cacher le lien -Je recrute un apprenti-

* feat(campagne): masque les vidéos sur la page employeur

docs/docs/onboarding/2-aller-plus-loin.md

@@ -22,7 +22,7 @@ sidebar_position: 2
 | npm run e2e (headless)     | Lance les tests cypress (nécessite que le site tourne)                   |
 | npm run e2e:open           | Lance les tests cypress (nécessite que le site tourne)                   |
 | npm run storybook          | Lance la documentation interactive des composants / assets Sass en local |
-| npm run build:storybook    | Build une version statique de la documentation storybook                 |
+| npm run storybook:build    | Build une version statique de la documentation storybook                 |
 | docker-compose up -d redis | Lance redis en local (nécessite de réaffecter la variable `REDIS_URL`)   |
 
 ## Configuration locale du CMS et de Meilisearch

src/client/components/features/CampagneApprentissage/CampagneApprentissage.module.scss

@@ -1,4 +1,3 @@
-@use "@styles/utilities-deprecated";
 @use "@styles/utilities";
 
 .avoidLineBreakInside {
@@ -18,14 +17,15 @@
   }
 }
 
+
 .titrePage {
   & h1 {
     @extend %headline;
     font-weight: bold;
   }
 
   & .hero {
-    background-color: utilities-deprecated.$color-background;
+    background-color: inherit;
 
     & p {
       color: utilities.$color-text-primary;
@@ -54,3 +54,24 @@
     }
   }
 }
+
+.sectionVerbatims {
+  padding: 1.75rem 1rem;
+
+  @include utilities.media(large) {
+    padding: 5rem 1rem;
+  }
+
+  & h2 {
+    @extend %headline;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 2.5rem;
+  }
+
+  & .temoignage {
+    max-width: 22.5rem;
+    width: 100%;
+    height: 100%;
+  }
+}

src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx

@@ -83,7 +83,7 @@ describe('CampagneApprentissageEntreprises', () => {
 			});
 		});
 		describe('Encart redirections internes vers la FAQ et le dépot d’offre', () => {
-			it('je vois les informations pour accéder à la FAQ parents-enfants', () => {
+			it('affiche les informations pour accéder à la FAQ parents-enfants', () => {
 				render(
 					<DependenciesProvider youtubeService={aVideoService()}>
 						<CampagneApprentissageEntreprises videos={[]} />
@@ -95,7 +95,7 @@ describe('CampagneApprentissageEntreprises', () => {
 				})).toBeVisible();
 				expect(screen.getByRole('link', { name: 'Consulter la FAQ' })).toHaveAttribute('href', '/faq/apprentissage-employeurs-apprentis');
 			});
-			it('je vois les informations pour accéder à la page d‘apprentissage pour les employeurs', () => {
+			it('affiche les informations pour accéder à la page d‘apprentissage pour les employeurs', () => {
 				render(
 					<DependenciesProvider youtubeService={aVideoService()}>
 						<CampagneApprentissageEntreprises videos={[]} />
@@ -269,28 +269,28 @@ describe('CampagneApprentissageEntreprises', () => {
 		describe('Section redirections externes sur l’embauche d’un apprenti', () => {
 			describe('affiche une sous section pour se renseigner', () => {
 				it('comprenant un titre', () => {
-					// WHEN
+					// When
 					render(
 						<DependenciesProvider youtubeService={aVideoService()}>
 							<CampagneApprentissageEntreprises videos={[]} />
 						</DependenciesProvider>,
 					);
 
-					// THEN
+					// Then
 					const section = screen.getByRole('region', { name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' });
 					const titre = within(section).getByRole('heading', { level: 2, name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' });
 					expect(titre).toBeVisible();
 				});
 
 				it('comprenant un lien externe vers des renseignements', () => {
-					// WHEN
+					// When
 					render(
 						<DependenciesProvider youtubeService={aVideoService()}>
 							<CampagneApprentissageEntreprises videos={[]} />
 						</DependenciesProvider>,
 					);
 
-					// THEN
+					// Then
 					const section = screen.getByRole('region', { name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' });
 					const link = within(section).getByRole('link', { name: 'Se renseigner sur l’embauche - nouvelle fenêtre' });
 					expect(link).toBeVisible();
@@ -299,10 +299,10 @@ describe('CampagneApprentissageEntreprises', () => {
 			});
 			describe('affiche une sous section pour l’aide financière', () => {
 				it('comprenant un titre et une description', () => {
-					// WHEN
+					// When
 					render(<CampagneApprentissageEntreprises videos={[]} />);
 
-					// THEN
+					// Then
 					const section = screen.getByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' });
 					const titre = within(section).getByRole('heading', { level: 2, name: /Vous envisagez de recruter un apprenti ?/i });
 					const description = within(section).getByText('Cette aide de 6000 euros maximum est versée pour la première année de contrat, jusqu’au niveau master');
@@ -311,10 +311,10 @@ describe('CampagneApprentissageEntreprises', () => {
 				});
 
 				it('comprenant un lien externe vers une explication sur l’aide financière', () => {
-					// WHEN
+					// When
 					render(<CampagneApprentissageEntreprises videos={[]} />);
 
-					// THEN
+					// Then
 					const section = screen.getByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' });
 					const link = within(section).getByRole('link', { name: 'En savoir plus - nouvelle fenêtre' });
 					expect(link).toBeVisible();
@@ -338,9 +338,9 @@ describe('CampagneApprentissageEntreprises', () => {
 						<CampagneApprentissageEntreprises videos={[]} />
 					</DependenciesProvider>,
 				);
-				const titre = screen.queryByRole('heading', { level: 1, name: 'L’apprentissage, pour mon entreprise c’est le bon choix\u00A0!' });
 
 				// Then
+				const titre = screen.queryByRole('heading', { level: 1, name: 'L’apprentissage, pour mon entreprise c’est le bon choix\u00A0!' });
 				expect(titre).not.toBeInTheDocument();
 			});
 			it('affiche le nouveau titre', () => {
@@ -350,9 +350,9 @@ describe('CampagneApprentissageEntreprises', () => {
 						<CampagneApprentissageEntreprises videos={[]} />
 					</DependenciesProvider>,
 				);
-				const titre = screen.getByRole('heading', { level: 1, name: 'Avec l’apprentissage, recrutez la future pépite de votre entreprise\u00A0!' });
 
 				// Then
+				const titre = screen.getByRole('heading', { level: 1, name: 'Avec l’apprentissage, recrutez la future pépite de votre entreprise\u00A0!' });
 				expect(titre).toBeVisible();
 			});
 
@@ -385,6 +385,92 @@ describe('CampagneApprentissageEntreprises', () => {
 				expect(simulation).toHaveAttribute('href', '/apprentissage/deposer-offre');
 			});
 		});
+		describe('Encart redirections internes vers la FAQ et le dépot d’offre', () => {
+			it('masque les informations pour accéder à la FAQ parents-enfants', () => {
+				render(
+					<DependenciesProvider youtubeService={aVideoService()}>
+						<CampagneApprentissageEntreprises videos={[]} />
+					</DependenciesProvider>,
+				);
+				expect(screen.queryByRole('heading', {
+					level: 2,
+					name: 'On répond à toutes vos questions sur l’apprentissage',
+				})).not.toBeInTheDocument();
+			});
+			it('masque les informations pour accéder à la page d‘apprentissage pour les employeurs', () => {
+				render(
+					<DependenciesProvider youtubeService={aVideoService()}>
+						<CampagneApprentissageEntreprises videos={[]} />
+					</DependenciesProvider>,
+				);
+				expect(screen.queryByRole('heading', {
+					level: 2,
+					name: 'Vous êtes à la recherche d’un apprenti ?',
+				})).not.toBeInTheDocument();
+			});
+		});
+		describe('Section témoignages vidéos', () => {
+			it('masque les vidéos', () => {
+				// Given
+				const serverSideVideos = null;
+
+				// When
+				render(
+					<DependenciesProvider youtubeService={aVideoService()}>
+						<CampagneApprentissageEntreprises videos={serverSideVideos} />
+					</DependenciesProvider>,
+				);
+				// Then
+				expect(screen.queryByRole('region', { name: /Ils ont choisi d’embaucher un apprenti ! Pourquoi pas vous ?/i })).not.toBeInTheDocument();
+			});
+		});
+		describe('Section verbatims apprentis', () => {
+		  it('affiche une section titrée', () => {
+		    // When
+				render(
+					<DependenciesProvider youtubeService={aVideoService()}>
+						<CampagneApprentissageEntreprises videos={[]} />
+					</DependenciesProvider>,
+				);
+		    // Then
+				const section = screen.getByRole('region', { name: 'Découvrez les témoignages de ces personnes.' });
+				const titre = within(section).getByRole('heading', { level: 2, name: 'Pour vous, le plus compliqué sera de trouver un apprenti. Découvrez les témoignages de ces personnes.' });
+				expect(titre).toBeVisible();
+		  });
+		});
+		describe('Section redirections externes sur l’embauche d’un apprenti', () => {
+			it('masque la sous-section pour se renseigner', () => {
+				// When
+				render(
+					<DependenciesProvider youtubeService={aVideoService()}>
+						<CampagneApprentissageEntreprises videos={[]} />
+					</DependenciesProvider>,
+				);
+
+				// Then
+				const section = screen.queryByRole('region', { name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' });
+				expect(section).not.toBeInTheDocument();
+			});
+			it('masque la sous-section pour l’aide financière', () => {
+				// When
+				render(<CampagneApprentissageEntreprises videos={[]} />);
+
+				// Then
+				const section = screen.queryByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' });
+				expect(section).not.toBeInTheDocument();
+			});
+			it('affiche une sous-section redirection FAQ', () => {
+				// When
+				render(<CampagneApprentissageEntreprises videos={[]} />);
+
+				// Then
+				const section = screen.getByRole('region', { name: 'Vous souhaitez en savoir plus sur l’apprentissage ?' });
+				const cta = within(section).getByRole('link', { name: 'Découvrez la FAQ' });
+				expect(section).toBeVisible();
+				expect(cta).toBeVisible();
+				expect(cta).toHaveAttribute('href', '/faq/apprentissage-employeurs-apprentis');
+			});
+		});
 	});
 
 	describe('Invariants', () => {

src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx

@@ -6,19 +6,25 @@ import EnSavoirPlusApprentissageEntreprises
 import {
 	InformationSurEmbaucheApprenti,
 } from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti';
+import {
+	NewInformationSurEmbaucheApprenti,
+} from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti';
 import {
 	Raisons,
 	RaisonsDeChoisirApprentissage,
 } from '~/client/components/features/CampagneApprentissage/RaisonsDeChoisirApprentissage/RaisonsDeChoisirApprentissage';
 import VideosCampagneApprentissage
 	from '~/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage';
+import { Container } from '~/client/components/layouts/Container/Container';
+import { PresentationCard } from '~/client/components/ui/Card/Presentation/PresentationCard';
 import { HeroWithIllustration } from '~/client/components/ui/Hero/Hero';
 import { Link } from '~/client/components/ui/Link/Link';
+import SeeMoreItemList from '~/client/components/ui/SeeMore/SeeMoreItemList';
 import { TYPE_SIMULATEUR } from '~/pages/apprentissage/simulation/index.page';
 import { VideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage';
 
 interface CampagneApprentissageEntreprisesProps {
-	videos: Array<VideoCampagneApprentissage>
+	videos: Array<VideoCampagneApprentissage> | null
 }
 
 export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissageEntreprisesProps) {
@@ -49,7 +55,7 @@ export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissa
 
 	function nouveauBandeauDeCampagne() {
 		return (
-			<HeroWithIllustration image={'/images/campagne-apprentissage-entreprise-avec-texte.webp'} className={styles.hero}>
+			<HeroWithIllustration image={'/images/campagne-apprentissage-employeur.webp'} className={styles.hero}>
 				<h1>Avec l’apprentissage, recrutez la future pépite de votre entreprise&nbsp;!</h1>
 				<p>Des milliers de jeunes motivés, avec des compétences à revendre, n’attendent que
 				vous pour démarrer leur contrat d’apprentissage.</p>
@@ -77,21 +83,81 @@ export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissa
 		);
 	}
 
+	const verbatimsApprentisListe = [
+		{
+			imageUrl: '/images/campagne-verbatim-fabrice.webp',
+			nomApprenti: 'Fabrice, maître d’apprentissage d’Emma',
+			verbatim: 'En venant en entreprise, les jeunes vont apprendre à connaître et respecter ses règles, ses processus, mais aussi l’esprit d’entreprise. C’est tout aussi important que les compétences techniques.',
+		},
+		{
+			imageUrl: '/images/campagne-verbatim-gael.webp',
+			nomApprenti: 'Gaël, maître d’apprentissage de Benoît',
+			verbatim: 'J’ai été apprenti il y a 20 ans, j’ai été très bien formé et j’ai à cœur de bien transmettre à mon tour.',
+		},
+		{
+			imageUrl: '/images/campagne-verbatim-julien.webp',
+			nomApprenti: 'Julien, maître d’apprentissage de Céline',
+			verbatim: 'Nous, notre travail, c’est leur donner la confiance aussi, leur faire comprendre qu’ils peuvent y arriver. Il n’y a pas d’âge pour apprendre.',
+		},
+		{
+			imageUrl: '/images/campagne-verbatim-emma.webp',
+			nomApprenti: 'Emma, en apprentissage avec Fabrice',
+			verbatim: 'L’apprentissage, c’est que du plus : j’ai un diplôme et de l’expérience et c’est ça qui est important pour la suite.',
+		},
+		{
+			imageUrl: '/images/campagne-verbatim-benoit.webp',
+			nomApprenti: 'Benoît, en apprentissage avec Gaël',
+			verbatim: 'L’entreprise, c’est là où on s’amuse le plus, c’est là où on voit le plus de choses, que ce soit côté humain ou côté professionnel.',
+		},
+		{
+			imageUrl: '/images/campagne-verbatim-celine.webp',
+			nomApprenti: 'Céline, en apprentissage avec Julien',
+			verbatim: 'Avec l’apprentissage, je suis une vraie salariée. C’est une fierté de voir le salaire arriver sur mon compte chaque mois grâce à mon travail.',
+		},
+	];
+
 	return (
 		<>
 			<header className={styles.titrePage}>
 				{campagneApprentissageEstEnCours ? nouveauBandeauDeCampagne()
 					: ancienBandeauDeCampagne()}
 			</header>
 			<RaisonsDeChoisirApprentissage titre="5 bonnes raisons de choisir l’apprentissage :" raisons={raisons} />
-			<EnSavoirPlusApprentissageEntreprises />
-			{ videos.length > 0 && (
+			{(!campagneApprentissageEstEnCours &&
+				<EnSavoirPlusApprentissageEntreprises />
+			)}
+			{ videos && videos.length > 0 && (
 				<VideosCampagneApprentissage
 					titre={'Ils ont choisi d’embaucher un apprenti ! Pourquoi pas vous ?'}
 					description={'Découvrez les témoignages des maîtres d’apprentissage et des apprentis qu’ils accompagnent au quotidien.'}
 					videos={videos} />
 			)}
-			<InformationSurEmbaucheApprenti />
+			{campagneApprentissageEstEnCours && (
+				<section aria-labelledby={'titre-section-verbatims'} className={styles.sectionVerbatims}>
+					<Container>
+						<h2>Pour vous, le plus compliqué sera de trouver un apprenti. <span id={'titre-section-verbatims'}>Découvrez les témoignages de ces personnes.</span></h2>
+						<SeeMoreItemList
+							itemList={verbatimsApprentisListe.map((verbatim, index) => {
+								return (
+									<PresentationCard
+										className={styles.temoignage}
+										key={index}
+										imageSrc={verbatim.imageUrl}
+										titleLabel={verbatim.nomApprenti}
+										titleHeadingTag="h3"
+										imageFit="cover">
+										{verbatim.verbatim}
+									</PresentationCard>
+								);
+							})}
+							numberOfVisibleItems={3}
+							seeMoreAriaLabel={'Voir plus de témoignages'}
+							seeLessAriaLabel={'Voir moins de témoignages'} />
+					</Container>
+				</section>
+			)}
+			{(campagneApprentissageEstEnCours ? <NewInformationSurEmbaucheApprenti /> :
+				<InformationSurEmbaucheApprenti />)}
 		</>
 	);
 }

src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises.module.scss

@@ -6,13 +6,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 2.5rem;
-  }
 
-  &DepotOffre {
-    background-color: utilities-deprecated.$color-background-white-lilac;
-    @include utilities-deprecated.media(large) {
-      background-color: revert;
-    }
+    max-width: 100%;
+    margin: 0;
+    padding: 0 2rem;
   }
 
   &Faq, &DepotOffre {