Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(apprentissage): termine la campagne et pérennise le contenu des … #3567

Merged
merged 1 commit into from
Jan 24, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,33 +1,21 @@
import React from 'react';

import styles from '~/client/components/features/CampagneApprentissage/CampagneApprentissage.module.scss';
import EnSavoirPlusApprentissageEntreprises
from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises';
import {
InformationSurEmbaucheApprenti,
} from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti';
import {
NewInformationSurEmbaucheApprenti,
} from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti';
import {
VerbatimsEmployeursApprentis,
} from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/VerbatimsEmployeursApprentis/VerbatimsEmployeursApprentis';
import {
Raisons,
RaisonsDeChoisirApprentissage,
} from '~/client/components/features/CampagneApprentissage/RaisonsDeChoisirApprentissage/RaisonsDeChoisirApprentissage';
import VideosCampagneApprentissage
from '~/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage';
import { HeroWithIllustration } from '~/client/components/ui/Hero/Hero';
import { Link } from '~/client/components/ui/Link/Link';
import { TYPE_SIMULATEUR } from '~/pages/apprentissage/simulation/index.page';
import { VideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage';

interface CampagneApprentissageEntreprisesProps {
videos: Array<VideoCampagneApprentissage> | null
}

export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissageEntreprisesProps) {
export function CampagneApprentissageEntreprises() {
const raisons: Raisons[] = [
{
iconName: 'award',
Expand All @@ -51,38 +39,6 @@ export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissa
},
];

const campagneApprentissageEstEnCours = process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE === '1';

function nouveauBandeauDeCampagne() {
return (
<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>
<Link href={'/apprentissage/deposer-offre'} appearance={'asPrimaryButton'} className={styles.cta}>
Déposer mon offre d’apprentissage
<Link.Icon />
</Link>
</HeroWithIllustration>
);
}

function ancienBandeauDeCampagne() {
return (
<HeroWithIllustration image={'/images/campagne-apprentissage-entreprise-avec-texte.webp'} className={styles.hero}>
<h1>L’apprentissage, pour mon entreprise <span
className={styles.avoidLineBreakInside}>c’est le bon choix&nbsp;!</span></h1>
<Link href={`/apprentissage/simulation?simulateur=${TYPE_SIMULATEUR.EMPLOYEUR}`}
appearance={'asPrimaryButton'}
className={styles.cta}>
<span className={styles.mobileOnly}>Simuler le coût d’embauche</span>
<span className={styles.desktopOnly}>Simuler le coût de l’embauche d’un apprenti</span>
<Link.Icon />
</Link>
</HeroWithIllustration>
);
}

const verbatimsApprentisListe = [
{
imageUrl: '/images/campagne-verbatim-fabrice.webp',
Expand Down Expand Up @@ -119,26 +75,19 @@ export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissa
return (
<>
<header className={styles.titrePage}>
{campagneApprentissageEstEnCours ? nouveauBandeauDeCampagne()
: ancienBandeauDeCampagne()}
<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>
<Link href={'/apprentissage/deposer-offre'} appearance={'asPrimaryButton'} className={styles.cta}>
Déposer mon offre d’apprentissage
<Link.Icon />
</Link>
</HeroWithIllustration>
</header>
<RaisonsDeChoisirApprentissage titre="5 bonnes raisons de choisir l’apprentissage :" raisons={raisons} />
{(!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} />
)}
{(campagneApprentissageEstEnCours ? (
<>
<VerbatimsEmployeursApprentis verbatimsListe={verbatimsApprentisListe} />
<NewInformationSurEmbaucheApprenti />
</>
) :
<InformationSurEmbaucheApprenti />)}
<VerbatimsEmployeursApprentis verbatimsListe={verbatimsApprentisListe} />
<InformationSurEmbaucheApprenti />
</>
);
}
Original file line number Diff line number Diff line change
@@ -1,30 +1,15 @@
@use '@styles/utilities-deprecated';
@use '@styles/utilities';

.informationSurEmbauche {
max-width: 100%;

@include utilities-deprecated.media(large) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2.5rem;

max-width: 100%;
margin: 0;
padding: 0 2rem;
}

& .renseignement {
& span {
display: inline-block;
}
}

& .renseignement, & .aideFinanciere {
& .aideFinanciere {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.75rem 1rem;

@include utilities-deprecated.media(large) {
@include utilities.media(large) {
gap: 2.5rem;
padding: 5rem 1rem
}
Expand All @@ -36,16 +21,25 @@

& h2 {
@extend %subheading;
color: utilities-deprecated.$color-primary;
color: utilities.$color-primary;
flex-grow: 1;

@include utilities-deprecated.media(large) {
@include utilities.media(large) {
text-align: center;
}
}

& h2 + p {
@extend %subheading;
color: utilities.$color-title-primary-contrast;

@include utilities.media(large) {
text-align: center;
}
}

& .description {
@include utilities-deprecated.media(large) {
@include utilities.media(large) {
text-align: center;
}
}
Expand All @@ -56,7 +50,7 @@
justify-content: center;
align-self: center;

@include utilities-deprecated.media(large) {
@include utilities.media(large) {
max-width: fit-content;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,18 @@ import { Container } from '~/client/components/layouts/Container/Container';
import { Link } from '~/client/components/ui/Link/Link';

export function InformationSurEmbaucheApprenti() {
const embaucherUnApprentiLink = 'https://travail-emploi.gouv.fr/formation-professionnelle/formation-en-alternance-10751/apprentissage/embaucher-un-apprenti/';
const enSavoirPlusSurAideLink = 'https://travail-emploi.gouv.fr/formation-professionnelle/entreprise-et-alternance/aides-au-recrutement-d-un-alternant/article/aide-2023-aux-employeurs-qui-recrutent-en-alternance';

return (
<Container className={styles.informationSurEmbauche}>
<section aria-labelledby={'titre-section-renseignement'} className={styles.renseignement}>
<h2 id={'titre-section-renseignement'}>
Comme eux, vous souhaitez faire <span>le choix de l’apprentissage&nbsp;?</span>
</h2>
<Link href={embaucherUnApprentiLink} appearance={'asSecondaryButton'} className={styles.link}>
Se renseigner sur l’embauche
<Link.Icon />
</Link>
</section>
<section aria-labelledby={'titre-section-aide'} className={styles.aideFinanciere}>
<h2 id={'titre-section-aide'}>
Vous envisagez de recruter un apprenti&nbsp;? <span>Vous pouvez bénéficier d’une aide financière</span>
</h2>
<p className={styles.description}>
Cette aide de 6000 euros maximum est versée pour la première année de contrat, jusqu’au niveau master
</p>
<Link href={enSavoirPlusSurAideLink} appearance={'asSecondaryButton'} className={styles.link}>
En savoir plus
<hgroup>
<h2 id={'titre-section-aide'}>
Vous voulez en savoir plus sur l’apprentissage ?
</h2>
<p>Nous avons toutes les réponses à vos questions !</p>
</hgroup>
<Link href={'/faq/apprentissage-employeurs-apprentis'} appearance={'asPrimaryButton'} className={styles.link}>
Consultez notre FAQ
<Link.Icon />
</Link>
</section>
Expand Down

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -48,49 +48,24 @@ export function CampagneApprentissageJeunes({ videos }: CampagneApprentissageJeu
},
];

const campagneApprentissageEstEnCours = process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE === '1';

function nouveauBandeauDeCampagne() {
return (
<HeroWithIllustration image={'/images/campagne-apprentissage-jeune-oct-2024.webp'}
className={classNames(styles.hero, stylesApprenti.hero)}>
<h1>Avec l’apprentissage, vous apprenez directement <span
className={styles.avoidLineBreakInside}>sur le terrain</span> <span className={styles.avoidLineBreakInside}>et vous êtes payés !</span>
</h1>
<Link href={`/apprentissage/simulation?simulateur=${TYPE_SIMULATEUR.ALTERNANT}`}
appearance={'asPrimaryButton'}
className={styles.cta}>
<span>
Simuler votre rémunération <span className={styles.desktopOnly}>en tant qu’apprenti</span>
</span>
<Link.Icon />
</Link>
</HeroWithIllustration>
);
}

function ancienBandeauDeCampagne() {
return (
<HeroWithIllustration image={'/images/campagne-apprentissage-jeune-avec-texte.webp'} className={styles.hero}>
<h1>Avec l’apprentissage, vous apprenez directement <span
className={styles.avoidLineBreakInside}>sur le terrain</span> <span className={styles.avoidLineBreakInside}>et vous êtes payés !</span>
</h1>
<Link href={`/apprentissage/simulation?simulateur=${TYPE_SIMULATEUR.ALTERNANT}`}
appearance={'asPrimaryButton'}
className={styles.cta}>
<span>
Simuler votre rémunération <span className={styles.desktopOnly}>en tant qu’apprenti</span>
</span>
<Link.Icon />
</Link>
</HeroWithIllustration>
);
}

return (
<>
<header className={styles.titrePage}>
{campagneApprentissageEstEnCours ? nouveauBandeauDeCampagne() : ancienBandeauDeCampagne()}
<HeroWithIllustration image={'/images/campagne-apprentissage-jeune-oct-2024.webp'}
className={classNames(styles.hero, stylesApprenti.hero)}>
<h1>Avec l’apprentissage, vous apprenez directement <span
className={styles.avoidLineBreakInside}>sur le terrain</span> <span
className={styles.avoidLineBreakInside}>et vous êtes payés !</span>
</h1>
<Link href={`/apprentissage/simulation?simulateur=${TYPE_SIMULATEUR.ALTERNANT}`}
appearance={'asPrimaryButton'}
className={styles.cta}>
<span>
Simuler votre rémunération <span className={styles.desktopOnly}>en tant qu’apprenti</span>
</span>
<Link.Icon />
</Link>
</HeroWithIllustration>
</header>
<RaisonsDeChoisirApprentissage titre="5 bonnes raisons de choisir l’apprentissage" raisons={raisons} />
{ videos.length > 0 && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const employeurNav = (): NavigationItemWithChildren => ({
{ label: 'Je deviens mentor', link: '/je-deviens-mentor' },
{ label: 'Je propose des immersions', link: '/immersions' },
{ label: 'Je forme les jeunes grâce à l‘emploi', link: '/je-recrute-afpr-poei' },
...(process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE === '1' ? [{ label: 'Je recrute un apprenti', link: '/apprentissage-entreprises' }] : []),
{ label: 'Je recrute un apprenti', link: '/apprentissage-entreprises' },
],
label: 'Recruter et agir pour les jeunes',
},
Expand Down
Loading
Loading