diff --git a/assets/icons/orienter-carte-solidaire.svg b/assets/icons/orienter-carte-solidaire.svg new file mode 100644 index 000000000..b8cc49a80 --- /dev/null +++ b/assets/icons/orienter-carte-solidaire.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/orienter-sablier.svg b/assets/icons/orienter-sablier.svg new file mode 100644 index 000000000..11564c752 --- /dev/null +++ b/assets/icons/orienter-sablier.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/img/orienter-banner.jpg b/public/static/img/orienter-banner.jpg new file mode 100644 index 000000000..520eadb2e Binary files /dev/null and b/public/static/img/orienter-banner.jpg differ diff --git a/public/static/img/orienter-banner.png b/public/static/img/orienter-banner.png new file mode 100644 index 000000000..d8be6b049 Binary files /dev/null and b/public/static/img/orienter-banner.png differ diff --git a/public/static/img/orienter-calendrier.png b/public/static/img/orienter-calendrier.png new file mode 100644 index 000000000..08e043a92 Binary files /dev/null and b/public/static/img/orienter-calendrier.png differ diff --git a/public/static/img/orienter-cv.png b/public/static/img/orienter-cv.png new file mode 100644 index 000000000..2f6320327 Binary files /dev/null and b/public/static/img/orienter-cv.png differ diff --git a/public/static/img/orienter-decouvrir-2.png b/public/static/img/orienter-decouvrir-2.png new file mode 100644 index 000000000..1c89b46e2 Binary files /dev/null and b/public/static/img/orienter-decouvrir-2.png differ diff --git a/public/static/img/orienter-diffuser.png b/public/static/img/orienter-diffuser.png new file mode 100644 index 000000000..bc9a2ca17 Binary files /dev/null and b/public/static/img/orienter-diffuser.png differ diff --git a/public/static/img/orienter-emploi.png b/public/static/img/orienter-emploi.png new file mode 100644 index 000000000..570dbd97b Binary files /dev/null and b/public/static/img/orienter-emploi.png differ diff --git a/public/static/img/orienter-publier.jpg b/public/static/img/orienter-publier.jpg new file mode 100644 index 000000000..7c0407f38 Binary files /dev/null and b/public/static/img/orienter-publier.jpg differ diff --git a/src/components/partials/Aider/H2/H2.tsx b/src/components/partials/Aider/H2/H2.tsx deleted file mode 100644 index 23eafd749..000000000 --- a/src/components/partials/Aider/H2/H2.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import DoubleCarresIcon from 'assets/icons/double-carres.svg'; -import { StyledTitleSection } from 'src/components/partials/Aider/H2/H2.styles'; - -interface TitleSectionProps { - title: string; - titleColor: string; - svgStroke?: string; - svgColor: string; -} - -export const TitleSection = ({ - title, - titleColor, - svgStroke = 'white', - svgColor, -}: TitleSectionProps) => { - return ( - - -
-

{title}

-
- - - ); -}; diff --git a/src/components/partials/Aider/H2/index.ts b/src/components/partials/Aider/H2/index.ts deleted file mode 100644 index 37addaecf..000000000 --- a/src/components/partials/Aider/H2/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './H2'; diff --git a/src/components/partials/EnSavoirPlus/EnSavoirPLus.tsx b/src/components/partials/EnSavoirPlus/EnSavoirPLus.tsx new file mode 100644 index 000000000..26ee4235d --- /dev/null +++ b/src/components/partials/EnSavoirPlus/EnSavoirPLus.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { MultipleCTA } from '../MultipleCTA'; +import { openModal } from 'src/components/modals/Modal'; +import { ModalInterestLinkedOut } from 'src/components/modals/Modal/ModalGeneric/StepperModal/ModalInterestLinkedOut'; +import { Section } from 'src/components/utils'; +import { H2 } from 'src/components/utils/Headings'; +import { GA_TAGS } from 'src/constants/tags'; +import { gaEvent } from 'src/lib/gtag'; +import { StyledEnSavoirPlusButtonContainer } from './EnSavoirPlus.styles'; + +export const EnSavoirPlus = () => { + return ( +
+

+ Vous souhaitez en savoir plus sur + LinkedOut ? + + } + color="black" + center + /> + + { + gaEvent(GA_TAGS.PAGE_ORIENTER_CONTACT_CLIC); + openModal(); + }, + }, + }, + { + button: { + label: 'Télécharger la brochure', + href: process.env.ASSOCIATION_BROCHURE, + external: true, + onClick: () => { + gaEvent(GA_TAGS.PAGE_ORIENTER_BROCHURE_CLIC); + }, + style: 'custom-primary-inverted', + }, + }, + ]} + /> + +

+ ); +}; diff --git a/src/components/partials/EnSavoirPlus/EnSavoirPlus.styles.tsx b/src/components/partials/EnSavoirPlus/EnSavoirPlus.styles.tsx new file mode 100644 index 000000000..685aa27ea --- /dev/null +++ b/src/components/partials/EnSavoirPlus/EnSavoirPlus.styles.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +export const StyledEnSavoirPlusButtonContainer = styled.div` + display: block; + max-width: 550px; + margin: 40px auto 0; +`; diff --git a/src/components/partials/EnSavoirPlus/index.ts b/src/components/partials/EnSavoirPlus/index.ts new file mode 100644 index 000000000..1dbf0452e --- /dev/null +++ b/src/components/partials/EnSavoirPlus/index.ts @@ -0,0 +1 @@ +export * from './EnSavoirPlus'; diff --git a/src/components/partials/ImageTitle/ImageTitle.styles.ts b/src/components/partials/ImageTitle/ImageTitle.styles.ts index af81a3772..5ae87654b 100644 --- a/src/components/partials/ImageTitle/ImageTitle.styles.ts +++ b/src/components/partials/ImageTitle/ImageTitle.styles.ts @@ -14,23 +14,16 @@ export const StyledImageTitle = styled.section` h1 { margin: 0; - font-size: 24px; - color: white; - font-weight: 700; } p { font-size: 14px; line-height: 20px; padding-right: 40px; - flex: 1; - display: flex; - align-items: center; + margin-top: 16px; + color: ${(props) => props.textColor}; } &.desktop { padding: 40px 55% 40px 40px; - h1 { - font-size: 32px; - } p { font-size: 20px; line-height: 30px; diff --git a/src/components/partials/ImageTitle/ImageTitle.tsx b/src/components/partials/ImageTitle/ImageTitle.tsx index dae64d952..e521d0095 100644 --- a/src/components/partials/ImageTitle/ImageTitle.tsx +++ b/src/components/partials/ImageTitle/ImageTitle.tsx @@ -12,18 +12,19 @@ interface CTAProps { onClick: () => void; label: string; href?: string; - style: UIKIT_BUTTON_STYLES_SPEC; + style?: UIKIT_BUTTON_STYLES_SPEC; isExternal?: boolean; newTab?: boolean; - dataTest: string; + dataTest?: string; } interface ImageTitleProps { - title: string; - description: string; img: string; imgMobile?: string; + title: React.ReactNode; + description: React.ReactNode; alt?: string; + textColor?: string; cta?: CTAProps | CTAProps[]; } @@ -34,6 +35,7 @@ export const ImageTitle = ({ imgMobile, alt, cta, + textColor, }: ImageTitleProps) => { const isDesktop = useIsDesktop(); @@ -45,10 +47,13 @@ export const ImageTitle = ({ isHero hasCta={!!cta} > - +

diff --git a/src/components/partials/LogoList.tsx b/src/components/partials/LogoList.tsx deleted file mode 100644 index 68fdf89bd..000000000 --- a/src/components/partials/LogoList.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { Grid, Carousel, Logo } from 'src/components/utils'; - -interface LogoListProps { - logos: { - key: string; - link: string; - bis?: boolean; - }[]; - carousel?: boolean; - padding?: boolean; - background?: boolean; -} - -export const LogoList = ({ - logos, - carousel, - padding, - background, -}: LogoListProps) => { - const logosPerLine = Math.floor(logos.length / 3 + 1); - - if (carousel) { - return ( - - {logos.map(({ key, link, bis }) => { - return ( -

- -
- ); - })} - - ); - } - return ( -
- { - return ; - })} - /> -
- ); -}; - -LogoList.defaultProps = { - carousel: false, - padding: false, - background: false, -}; diff --git a/src/components/partials/LogoList/LogoList.styles.tsx b/src/components/partials/LogoList/LogoList.styles.tsx new file mode 100644 index 000000000..1c319ff21 --- /dev/null +++ b/src/components/partials/LogoList/LogoList.styles.tsx @@ -0,0 +1,33 @@ +import styled from 'styled-components'; + +export const LogoListFlexContainer = styled.div` + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style: none; + margin-left: -15px; + justify-content: center; + align-items: center; + &.background { + background-color: #fff; + } + &.border-rounded { + border-radius: 5px; + } + &.padding { + } + padding: 15px; +`; + +export const LogoListFlexItem = styled.div` + box-sizing: border-box; + padding-left: 15px; + width: ${({ width }) => { + return width; + }}; +`; + +export const StyledCarouselItem = styled.div` + margin: 0 40px !important; +`; diff --git a/src/components/partials/LogoList/LogoList.tsx b/src/components/partials/LogoList/LogoList.tsx new file mode 100644 index 000000000..8b28424e6 --- /dev/null +++ b/src/components/partials/LogoList/LogoList.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Logo } from 'src/components/utils'; +import { CarouselSwiper } from 'src/components/utils/CarouselSwiper'; +import { + LogoListFlexContainer, + LogoListFlexItem, + StyledCarouselItem, +} from './LogoList.styles'; + +interface LogoListProps { + logos: { + key: string; + link: string; + bis?: boolean; + }[]; + carousel?: boolean; + padding?: boolean; + background?: boolean; +} + +export const LogoList = ({ + logos, + carousel, + padding, + background, +}: LogoListProps) => { + const logosPerLine = logos.length > 12 ? 5 : Math.floor(logos.length / 3 + 1); + if (carousel) { + return ( + { + return ( + + + + ); + })} + /> + ); + } + return ( + + {logos.map(({ key, link, bis }) => { + return ( + + + + ); + })} + + ); +}; diff --git a/src/components/partials/LogoList/index.ts b/src/components/partials/LogoList/index.ts new file mode 100644 index 000000000..1290f4875 --- /dev/null +++ b/src/components/partials/LogoList/index.ts @@ -0,0 +1 @@ +export * from './LogoList'; diff --git a/src/components/partials/MultipleCTA.tsx b/src/components/partials/MultipleCTA.tsx index 32a926977..d3147fd37 100644 --- a/src/components/partials/MultipleCTA.tsx +++ b/src/components/partials/MultipleCTA.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ChevronRightIcon from 'assets/icons/chevron-right.svg'; -import { UIKIT_BUTTON_SIZES } from '../variables'; +import { UIKIT_BUTTON_SIZES, UIKIT_BUTTON_STYLES_SPEC } from '../variables'; import { Button, Img, Grid } from 'src/components/utils'; interface MultipleCTAProps { @@ -10,7 +10,7 @@ interface MultipleCTAProps { spacing?: 'small' | 'medium' | 'large'; className?: string; data: { - title?: string; + title?: React.ReactNode; text?: React.ReactNode; img?: string; button?: { @@ -20,6 +20,7 @@ interface MultipleCTAProps { modal?: string; onClick?: () => void; size?: UIKIT_BUTTON_SIZES; + style?: UIKIT_BUTTON_STYLES_SPEC; }; }[]; animate?: boolean; @@ -58,7 +59,7 @@ export const MultipleCTA = ({
{item.title} @@ -115,7 +116,7 @@ export const MultipleCTA = ({ > +
+ + +
+ +
+
+
+

+ La personne que vous accompagnez est intéressée par notre + programme d’accompagnement de 6 mois pour retrouver un emploi. +

+ +
+ + + + ); +}; diff --git a/src/components/partials/pages/Orienter/Decouvrir/index.ts b/src/components/partials/pages/Orienter/Decouvrir/index.ts new file mode 100644 index 000000000..05851fab5 --- /dev/null +++ b/src/components/partials/pages/Orienter/Decouvrir/index.ts @@ -0,0 +1 @@ +export * from './Decouvrir'; diff --git a/src/components/partials/pages/Orienter/Impact/Impact.tsx b/src/components/partials/pages/Orienter/Impact/Impact.tsx new file mode 100644 index 000000000..be265510b --- /dev/null +++ b/src/components/partials/pages/Orienter/Impact/Impact.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { NumberGrid } from 'src/components/partials/NumberGrid'; +import { Section } from 'src/components/utils'; +import { H2 } from 'src/components/utils/Headings'; +import { Subtitle } from 'src/components/utils/Subtitle'; + +const numbers = [ + { + value: '93%', + description: + "des candidats se déclarent remobilisés dans leur recherche d'emploi", + }, + { + value: '61%', + description: 'des candidats retrouvent un emploi dans les 6 mois', + }, + { + value: '92%', + description: + 'des structures sociales partenaires sont satisfaites de leur expérience', + }, + { + value: '100%', + description: + 'des partenaires perçoivent LinkedOut comme un apport complémentaire', + }, +]; + +export const Impact = () => { + // Component logic here + + return ( +
+

+ Notre impact + + } + color="black" + center + /> + + Source : Mesure d'impact 2021 Archipel & Co} + center + /> +

+ ); +}; diff --git a/src/components/partials/pages/Orienter/Impact/index.ts b/src/components/partials/pages/Orienter/Impact/index.ts new file mode 100644 index 000000000..d87878409 --- /dev/null +++ b/src/components/partials/pages/Orienter/Impact/index.ts @@ -0,0 +1 @@ +export * from './Impact'; diff --git a/src/components/partials/pages/Orienter/Inscrire/Inscrire.styles.tsx b/src/components/partials/pages/Orienter/Inscrire/Inscrire.styles.tsx new file mode 100644 index 000000000..7af94f5e8 --- /dev/null +++ b/src/components/partials/pages/Orienter/Inscrire/Inscrire.styles.tsx @@ -0,0 +1,57 @@ +import styled from 'styled-components'; +import { COLORS } from 'src/constants/styles'; + +export const StyledOrienterBackground = styled.div` + background-color: #fef8f5; +`; + +export const StyledOrienterInscrireContainer = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10%; + .image-container { + width: 40%; + position: relative; + img { + border-radius: 40px; + } + } + .text-container { + width: 50%; + ul { + color: ${COLORS.primaryOrange}; + padding: 5px 0; + li { + list-style: none; + margin-bottom: 12px; + display: flex; + flex-direction: row; + align-items: center; + svg { + min-width: 35px; + margin-right: 10px; + } + } + } + p:last-of-type { + margin-bottom: 44px; + } + } + &.mobile { + .image-container { + width: 100%; + margin-bottom: 20px; + height: 340px; + } + .text-container { + width: 100%; + ul { + padding: 5px 0; + li { + margin-bottom: 10px; + } + } + } + } +`; diff --git a/src/components/partials/pages/Orienter/Inscrire/Inscrire.tsx b/src/components/partials/pages/Orienter/Inscrire/Inscrire.tsx new file mode 100644 index 000000000..3e16e3330 --- /dev/null +++ b/src/components/partials/pages/Orienter/Inscrire/Inscrire.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import CarteSolidaireIcon from 'assets/icons/orienter-carte-solidaire.svg'; +import SablierIcon from 'assets/icons/orienter-sablier.svg'; +import { openModal } from 'src/components/modals/Modal'; +import { CandidateContactModal } from 'src/components/modals/Modal/ModalGeneric/CandidateContactModal'; +import { Button, Img, Section } from 'src/components/utils'; +import { H3 } from 'src/components/utils/Headings'; +import { GA_TAGS } from 'src/constants/tags'; +import { useIsDesktop } from 'src/hooks/utils'; +import { gaEvent } from 'src/lib/gtag'; +import { + StyledOrienterBackground, + StyledOrienterInscrireContainer, +} from './Inscrire.styles'; + +export const Inscrire = () => { + const isDesktop = useIsDesktop(); + return ( + +
+ {!isDesktop && ( +

+ )} + +
+ +
+
+ {isDesktop && ( +

+ )} +
    +
  • + {' '} +
    2 heures par semaine pendant 6 mois, en présentiel
    +
    • +
  • + {' '} +
    + Programme disponible en Ile de France, Lille, Lorient, Lyon, + Rennes +
    +
    • +
+
+

L’intégration du candidat au parcours LinkedOut comprend :

+

+ + Un accompagnement personnalisé par un coach bénévole + {' '} + (2h/semaine) +

+

+ + L’accès au catalogue d’événements du parcours collectif + {' '} + : théâtre d’improvisation, ateliers pour booster la recherche + d’emploi, week-ends de la communauté, etc. +

+

+ La mise en lien avec des professionnels engagés{' '} + : rencontres avec des professionnels pour bénéficier d’un coup + de pouce ( conseil, contact, simulation d’entretien) +

+

+ L’utilisation de la plateforme LinkedOut pour + créer le CV, le publier, accéder aux offres d’emploi et y + répondre. +

+
+ +

+ +

+ + ); +}; diff --git a/src/components/partials/pages/Orienter/Inscrire/index.ts b/src/components/partials/pages/Orienter/Inscrire/index.ts new file mode 100644 index 000000000..7b4a2ff99 --- /dev/null +++ b/src/components/partials/pages/Orienter/Inscrire/index.ts @@ -0,0 +1 @@ +export * from './Inscrire'; diff --git a/src/components/partials/pages/Orienter/Opportunites/Opportunite.tsx b/src/components/partials/pages/Orienter/Opportunites/Opportunite.tsx new file mode 100644 index 000000000..ba5826ce0 --- /dev/null +++ b/src/components/partials/pages/Orienter/Opportunites/Opportunite.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Img } from 'src/components/utils'; +import { H6 } from 'src/components/utils/Headings'; +import { useIsDesktop } from 'src/hooks/utils'; +import { StyledOrienterOpportunitesItem } from './Opportunites.styles'; + +interface OpportuniteProps { + title: string; + paragraph: string; + src: string; +} + +export const Opportunite = ({ title, paragraph, src }: OpportuniteProps) => { + const isDesktop = useIsDesktop(); + return ( + +
+ {title} +
+
+
+
+

{paragraph}

+ + ); +}; diff --git a/src/components/partials/pages/Orienter/Opportunites/Opportunites.styles.tsx b/src/components/partials/pages/Orienter/Opportunites/Opportunites.styles.tsx new file mode 100644 index 000000000..3f0c98b04 --- /dev/null +++ b/src/components/partials/pages/Orienter/Opportunites/Opportunites.styles.tsx @@ -0,0 +1,35 @@ +import styled from 'styled-components'; + +export const StyledOrienterOpportunitesContainer = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; +`; + +export const StyledOrienterOpportunitesItem = styled.div` + width: 25%; + padding: 24px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + > .text-container { + padding-top: 20px; + height: 45px; + } + > .image-container { + height: 150px; + width: 150px; + position: relative; + } + &.mobile { + width: 100%; + > .image-container { + height: 100px; + width: 100px; + position: relative; + } + } +`; diff --git a/src/components/partials/pages/Orienter/Opportunites/Opportunites.tsx b/src/components/partials/pages/Orienter/Opportunites/Opportunites.tsx new file mode 100644 index 000000000..67d43f7d7 --- /dev/null +++ b/src/components/partials/pages/Orienter/Opportunites/Opportunites.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { StyledOrienterBackground } from '../Inscrire/Inscrire.styles'; +import { Section } from 'src/components/utils'; +import { H2, H5 } from 'src/components/utils/Headings'; +import { Opportunite } from './Opportunite'; +import { StyledOrienterOpportunitesContainer } from './Opportunites.styles'; + +const content = [ + { + title: 'Un CV humain et convaincant', + paragraph: + "Un CV qui casse les codes et valorise le parcours du candidat quel qu'il soit et incite à la rencontre", + src: '/static/img/orienter-cv.png', + }, + { + title: 'Une diffusion élargie du CV', + paragraph: + 'Grâce aux partages du grand public sur les réseaux sociaux via la plateforme', + src: '/static/img/orienter-diffuser.png', + }, + { + title: 'Des opportunités d’emplois supplémentaires', + paragraph: + "Des offres d'emplois des entreprises partenaires et des coups de pouce de citoyens engagés", + src: '/static/img/orienter-emploi.png', + }, + { + title: 'Des temps forts collectifs', + paragraph: + 'Des expériences humaines formatrices, fédératrices et positives', + src: '/static/img/orienter-calendrier.png', + }, +]; + +export const Opportunites = () => { + return ( + +
+

+

+ + {content.map(({ title, paragraph, src }, index) => { + return ( + + ); + })} + +
+ + ); +}; diff --git a/src/components/partials/pages/Orienter/Opportunites/index.ts b/src/components/partials/pages/Orienter/Opportunites/index.ts new file mode 100644 index 000000000..e85f8bce8 --- /dev/null +++ b/src/components/partials/pages/Orienter/Opportunites/index.ts @@ -0,0 +1 @@ +export * from './Opportunites'; diff --git a/src/components/partials/pages/Orienter/Publier/Publier.styles.tsx b/src/components/partials/pages/Orienter/Publier/Publier.styles.tsx new file mode 100644 index 000000000..4d809e67e --- /dev/null +++ b/src/components/partials/pages/Orienter/Publier/Publier.styles.tsx @@ -0,0 +1,54 @@ +import styled from 'styled-components'; +import { COLORS } from 'src/constants/styles'; + +export const StyledOrienterPublierContainer = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10%; + .image-container { + width: 40%; + position: relative; + img { + border-radius: 40px; + } + } + .text-container { + width: 50%; + ul { + color: ${COLORS.primaryOrange}; + padding: 5px 0; + li { + list-style: none; + margin-bottom: 12px; + display: flex; + flex-direction: row; + align-items: center; + svg { + min-width: 35px; + margin-right: 10px; + } + } + } + p:last-of-type { + margin-bottom: 44px; + } + } + &.mobile { + flex-direction: column-reverse; + .image-container { + width: 100%; + margin-bottom: 20px; + height: 340px; + } + .text-container { + width: 100%; + ul { + padding: 5px 0; + li { + margin-bottom: 10px; + } + } + } + } +`; diff --git a/src/components/partials/pages/Orienter/Publier/Publier.tsx b/src/components/partials/pages/Orienter/Publier/Publier.tsx new file mode 100644 index 000000000..42229fd30 --- /dev/null +++ b/src/components/partials/pages/Orienter/Publier/Publier.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import CarteSolidaireIcon from 'assets/icons/orienter-carte-solidaire.svg'; +import SablierIcon from 'assets/icons/orienter-sablier.svg'; +import { Button, Img, Section } from 'src/components/utils'; +import { H3 } from 'src/components/utils/Headings'; +import { GA_TAGS } from 'src/constants/tags'; +import { useIsDesktop } from 'src/hooks/utils'; +import { gaEvent } from 'src/lib/gtag'; +import { StyledOrienterPublierContainer } from './Publier.styles'; + +export const Publier = () => { + const isDesktop = useIsDesktop(); + return ( +
+ {!isDesktop && ( +

+ )} + +
+ {isDesktop && ( +

+ )} +
    +
  • +
    Accompagnement à distance
    +
    • +
  • + {' '} +
    + Programme disponible en Ile de France, Lille, Lorient, Lyon, + Rennes +
    +
    • +
+
+

+ + Ce format inclut donc essentiellement l’accès à la plateforme + {' '} + LinkedOut pour créer le CV du candidat, le publier sur la + plateforme, accéder aux offres d’emploi de nos entreprises + partenaires et y répondre en toute autonomie. +

+
+ +

+
+ +
+ +

+ ); +}; diff --git a/src/components/partials/pages/Orienter/Publier/index.ts b/src/components/partials/pages/Orienter/Publier/index.ts new file mode 100644 index 000000000..94e043c59 --- /dev/null +++ b/src/components/partials/pages/Orienter/Publier/index.ts @@ -0,0 +1 @@ +export * from './Publier'; diff --git a/src/components/partials/pages/Orienter/VideoSection/VideoSection.tsx b/src/components/partials/pages/Orienter/VideoSection/VideoSection.tsx new file mode 100644 index 000000000..4e64ddefe --- /dev/null +++ b/src/components/partials/pages/Orienter/VideoSection/VideoSection.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import LiteYouTubeEmbed from 'react-lite-youtube-embed'; +import { StyledOrienterBackground } from '../Inscrire/Inscrire.styles'; +import { Section } from 'src/components/utils'; + +interface VideoSectionProps { + videoId: string; + coloredBackground?: boolean; + videoTitle: string; +} + +export const VideoSection = ({ + videoId, + videoTitle, + coloredBackground, +}: VideoSectionProps) => { + const content = ( +
+ +
+ ); + + return coloredBackground ? ( + {content} + ) : ( + content + ); +}; diff --git a/src/components/partials/pages/Orienter/VideoSection/index.ts b/src/components/partials/pages/Orienter/VideoSection/index.ts new file mode 100644 index 000000000..8d10aef54 --- /dev/null +++ b/src/components/partials/pages/Orienter/VideoSection/index.ts @@ -0,0 +1 @@ +export * from './VideoSection'; diff --git a/src/components/partials/Travailler/Participer/Participer.styles.ts b/src/components/partials/pages/Travailler/Participer/Participer.styles.tsx similarity index 100% rename from src/components/partials/Travailler/Participer/Participer.styles.ts rename to src/components/partials/pages/Travailler/Participer/Participer.styles.tsx diff --git a/src/components/partials/Travailler/Participer/Participer.tsx b/src/components/partials/pages/Travailler/Participer/Participer.tsx similarity index 100% rename from src/components/partials/Travailler/Participer/Participer.tsx rename to src/components/partials/pages/Travailler/Participer/Participer.tsx diff --git a/src/components/partials/Travailler/Participer/index.ts b/src/components/partials/pages/Travailler/Participer/index.ts similarity index 100% rename from src/components/partials/Travailler/Participer/index.ts rename to src/components/partials/pages/Travailler/Participer/index.ts diff --git a/src/components/partials/Travailler/Rejoindre/Rejoindre.styles.ts b/src/components/partials/pages/Travailler/Rejoindre/Rejoindre.styles.tsx similarity index 100% rename from src/components/partials/Travailler/Rejoindre/Rejoindre.styles.ts rename to src/components/partials/pages/Travailler/Rejoindre/Rejoindre.styles.tsx diff --git a/src/components/partials/Travailler/Rejoindre/Rejoindre.tsx b/src/components/partials/pages/Travailler/Rejoindre/Rejoindre.tsx similarity index 96% rename from src/components/partials/Travailler/Rejoindre/Rejoindre.tsx rename to src/components/partials/pages/Travailler/Rejoindre/Rejoindre.tsx index fa0ffb4b8..4dfb12021 100644 --- a/src/components/partials/Travailler/Rejoindre/Rejoindre.tsx +++ b/src/components/partials/pages/Travailler/Rejoindre/Rejoindre.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { StyledRejoindre } from 'src/components/partials/Travailler/Rejoindre/Rejoindre.styles'; import { Section, Button, Img } from 'src/components/utils'; import { H2, H6 } from 'src/components/utils/Headings'; import { BulletListElement as BulletList } from 'src/components/utils/Lists'; +import { StyledRejoindre } from './Rejoindre.styles'; export const Rejoindre = ({ cta }: { cta: (label: string) => void }) => { return ( diff --git a/src/components/partials/Travailler/Rejoindre/index.ts b/src/components/partials/pages/Travailler/Rejoindre/index.ts similarity index 100% rename from src/components/partials/Travailler/Rejoindre/index.ts rename to src/components/partials/pages/Travailler/Rejoindre/index.ts diff --git a/src/components/partials/Travailler/Steps/Steps.styles.ts b/src/components/partials/pages/Travailler/Steps/Steps.styles.tsx similarity index 100% rename from src/components/partials/Travailler/Steps/Steps.styles.ts rename to src/components/partials/pages/Travailler/Steps/Steps.styles.tsx diff --git a/src/components/partials/Travailler/Steps/Steps.tsx b/src/components/partials/pages/Travailler/Steps/Steps.tsx similarity index 96% rename from src/components/partials/Travailler/Steps/Steps.tsx rename to src/components/partials/pages/Travailler/Steps/Steps.tsx index 34af0d495..c5b26236b 100644 --- a/src/components/partials/Travailler/Steps/Steps.tsx +++ b/src/components/partials/pages/Travailler/Steps/Steps.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { StyledSteps } from 'src/components/partials/Travailler/Steps/Steps.styles'; import { Section, Button } from 'src/components/utils'; import { H2 } from 'src/components/utils/Headings'; +import { StyledSteps } from './Steps.styles'; export const Steps = ({ cta }: { cta: (label: string) => void }) => { return ( diff --git a/src/components/partials/Travailler/Steps/index.ts b/src/components/partials/pages/Travailler/Steps/index.ts similarity index 100% rename from src/components/partials/Travailler/Steps/index.ts rename to src/components/partials/pages/Travailler/Steps/index.ts diff --git a/src/components/utils/Button/Button.styles.ts b/src/components/utils/Button/Button.styles.ts index 84d63f6a2..509ab55c2 100644 --- a/src/components/utils/Button/Button.styles.ts +++ b/src/components/utils/Button/Button.styles.ts @@ -20,6 +20,7 @@ export const StyledButton = styled.button` align-items: center; justify-content: center; padding: 11px 20px !important; + scroll-behavior: smooth; svg:first-child { margin-right: 8px; diff --git a/src/components/utils/CarouselSwiper/CarouselSwiper.tsx b/src/components/utils/CarouselSwiper/CarouselSwiper.tsx index c98921e8d..720590141 100644 --- a/src/components/utils/CarouselSwiper/CarouselSwiper.tsx +++ b/src/components/utils/CarouselSwiper/CarouselSwiper.tsx @@ -12,11 +12,13 @@ import { interface CarouselSwiperProps { slides: React.ReactNode[]; backgroundColor?: string; + slidesPerview?: number; } export const CarouselSwiper = ({ slides, backgroundColor, + slidesPerview, }: CarouselSwiperProps) => { if (slides.length === 0) { return null; @@ -25,12 +27,13 @@ export const CarouselSwiper = ({ {slides.map((slide) => { return {slide}; diff --git a/src/components/utils/CarouselSwiper/swiper-augmentation.d.ts b/src/components/utils/CarouselSwiper/swiper-augmentation.d.ts index bdd19fa31..7532ba940 100644 --- a/src/components/utils/CarouselSwiper/swiper-augmentation.d.ts +++ b/src/components/utils/CarouselSwiper/swiper-augmentation.d.ts @@ -17,6 +17,7 @@ declare module 'swiper/react' { pagination: { clickable: boolean; }; + slidesPerView: number; } export const Swiper: FunctionComponent< diff --git a/src/components/utils/Headings/H1.tsx b/src/components/utils/Headings/H1.tsx index 204cdf784..7e231a1a2 100644 --- a/src/components/utils/Headings/H1.tsx +++ b/src/components/utils/Headings/H1.tsx @@ -8,7 +8,7 @@ export const H1 = ({ color, center = false, }: { - title: string; + title: React.ReactNode; effect?: string; color: string; center?: boolean; diff --git a/src/components/utils/Headings/H2.tsx b/src/components/utils/Headings/H2.tsx index 34f13ca2b..7394714ef 100644 --- a/src/components/utils/Headings/H2.tsx +++ b/src/components/utils/Headings/H2.tsx @@ -8,7 +8,7 @@ export const H2 = ({ color, center = false, }: { - title: string; + title: React.ReactNode; type?: string; color?: string; center?: boolean; diff --git a/src/components/utils/Headings/Headings.styles.ts b/src/components/utils/Headings/Headings.styles.ts index 8a0c872b3..f6c72e8e7 100644 --- a/src/components/utils/Headings/Headings.styles.ts +++ b/src/components/utils/Headings/Headings.styles.ts @@ -50,6 +50,9 @@ export const StyledH2 = styled.h2` font-size: 24px; } } + span.orange { + color: ${COLORS.primaryOrange}; + } `; export const StyledH3 = styled.h3` diff --git a/src/components/utils/Subtitle/Subtitle.styles.tsx b/src/components/utils/Subtitle/Subtitle.styles.tsx new file mode 100644 index 000000000..d47cbe2a6 --- /dev/null +++ b/src/components/utils/Subtitle/Subtitle.styles.tsx @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +export const StyledSubtitle = styled.div` + color: #999 !important; + margin-top: 40px; + margin-bottom: 0 !important; + font-style: italic; + font-size: 15px; + width: 100%; + text-align: ${({ center }) => { + return center ? 'center' : 'left'; + }}; +`; diff --git a/src/components/utils/Subtitle/Subtitle.tsx b/src/components/utils/Subtitle/Subtitle.tsx new file mode 100644 index 000000000..149cde4d5 --- /dev/null +++ b/src/components/utils/Subtitle/Subtitle.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { StyledSubtitle } from './Subtitle.styles'; + +interface SubtitleProps { + text: React.ReactNode; + center?: boolean; +} + +export const Subtitle = ({ text, center }: SubtitleProps) => { + return {text}; +}; diff --git a/src/components/utils/Subtitle/index.ts b/src/components/utils/Subtitle/index.ts new file mode 100644 index 000000000..acbe66edd --- /dev/null +++ b/src/components/utils/Subtitle/index.ts @@ -0,0 +1 @@ +export * from './Subtitle'; diff --git a/src/constants/tags.ts b/src/constants/tags.ts index 9b4aa729f..f10face36 100644 --- a/src/constants/tags.ts +++ b/src/constants/tags.ts @@ -386,6 +386,9 @@ export const GA_TAGS = { BACKOFFICE_CV_AIDE: { action: 'Backoffice_CV_Aide', }, + PAGE_ORIENTER_CLASSIQUE_ENVOYER_CLIC: { + action: 'Page_Orienter_Classique_Envoyer_Clic', + }, } as const; export const FB_TAGS = { diff --git a/src/pages/aider.tsx b/src/pages/aider.tsx index 9251b29c6..e75d8cdf5 100644 --- a/src/pages/aider.tsx +++ b/src/pages/aider.tsx @@ -1,11 +1,10 @@ import React from 'react'; - import { Layout } from 'src/components/Layout'; import { NewsletterPartial, SharePartial } from 'src/components/partials'; -import { CoachContainer } from 'src/components/partials/Aider/CoachContainer/CoachContainer'; -import { HelpCards } from 'src/components/partials/Aider/HelpCards/HelpCards'; -import { InfoContainer } from 'src/components/partials/Aider/InfoContainer/InfoContainer'; import { ImageTitle } from 'src/components/partials/ImageTitle'; +import { CoachContainer } from 'src/components/partials/pages/Aider/CoachContainer'; +import { HelpCards } from 'src/components/partials/pages/Aider/HelpCards'; +import { InfoContainer } from 'src/components/partials/pages/Aider/InfoContainer'; import { Grid, Section } from 'src/components/utils'; import { GA_TAGS } from 'src/constants/tags'; diff --git a/src/pages/entreprises/index.tsx b/src/pages/entreprises/index.tsx index 1b5a2da2e..7c9670627 100644 --- a/src/pages/entreprises/index.tsx +++ b/src/pages/entreprises/index.tsx @@ -77,11 +77,8 @@ const reviews = [ companyInfo: '20 salariés', review: ( <> - Par son expérience,{' '} - - il apporte quelque chose de radicalement différent. - {' '} - Si je pouvais embaucher 2 Kenny, je le ferais ! + “Par son expérience, il apporte quelque chose de radicalement + différent. Si je pouvais embaucher 2 Kenny, je le ferais !“ ), }, @@ -93,14 +90,11 @@ const reviews = [ companyInfo: '31 salariés', review: ( <> - Avec Miah c’est une réussite. Là où notre compétence s’arrête, on est - rassurés par le fait que{' '} - - LinkedOut est là pour nous accompagner.{' '} - - Si on peut s’inscrire dans des actions comme celles-ci tout en gardant + “Avec Miah c’est une réussite. Là où notre compétence s’arrête, on + est rassurés par le fait que LinkedOut est là pour nous accompagner. Si + on peut s’inscrire dans des actions comme celles-ci tout en gardant notre efficacité, en y ajoutant le sourire de quelqu’un qui a envie, on - le fait ! + le fait !“ ), }, @@ -112,28 +106,10 @@ const reviews = [ industry: 'partenaire LinkedOut', review: ( <> - Nous étions à mille lieux des problématiques des personnes en précarité.{' '} - - Maintenant, chez Advens, on entend des mots comme “résilience”, - “deuxième chance”, “rebond”, “inclusion”. - {' '} - Les collaborateurs sont très fiers ! - - ), - }, - { - image: '/static/img/temoignage-candidat-amelie.jpg', - author: 'Amélie', - authorStatus: 'Ancienne candidate LinkedOut', - review: ( - <> - C'est vraiment un bon dispositif. Avec mon coach, on ne parle pas - simplement du travail, il me donne des conseils. Ce sont des choses dont - j'avais besoin, surtout que je n'ai pas de famille ici.{' '} - - J'ai parcouru beaucoup d'autres dispositifs et là c'est - différent, LinkedOut est très présent. - + “Nous étions à mille lieux des problématiques des personnes en + précarité. Maintenant, chez Advens, on entend des mots comme + “résilience”, “deuxième chance”, “rebond”, “inclusion”. Les + collaborateurs sont très fiers !“ ), }, @@ -395,15 +371,7 @@ const Entreprises = ({ nbPublishedCVs }: { nbPublishedCVs: number }) => {

- - Ce que LinkedOut{' '} - leur a apporté - - } - /> +

Ils ont recruté avec diff --git a/src/pages/entreprises/sinformer.js b/src/pages/entreprises/sinformer.tsx similarity index 99% rename from src/pages/entreprises/sinformer.js rename to src/pages/entreprises/sinformer.tsx index 3fd037227..fbb1323f6 100644 --- a/src/pages/entreprises/sinformer.js +++ b/src/pages/entreprises/sinformer.tsx @@ -21,14 +21,13 @@ const Sinformer = () => { Pourquoi et comment devenir une  entreprise inclusive } - text={ + description={ <> En tant qu'entreprise, comment agir concrètement en faveur de l'inclusion ? LinkedOut propose plusieurs solutions selon diff --git a/src/pages/merci/[type].js b/src/pages/merci/[type].tsx similarity index 100% rename from src/pages/merci/[type].js rename to src/pages/merci/[type].tsx diff --git a/src/pages/merci/index.js b/src/pages/merci/index.tsx similarity index 89% rename from src/pages/merci/index.js rename to src/pages/merci/index.tsx index cac33a07a..80007cf8a 100644 --- a/src/pages/merci/index.js +++ b/src/pages/merci/index.tsx @@ -36,18 +36,22 @@ const thankYouMessages = {

), -}; +} as const; + +type ThankYouMessageType = keyof typeof thankYouMessages; const Merci = () => { const { query: { type }, } = useRouter(); + const currentType = type as ThankYouMessageType; + return (
<> - {thankYouMessages[type] || ( + {thankYouMessages[currentType] || (

Merci beaucoup d'avoir répondu au formulaire !

@@ -57,7 +61,7 @@ const Merci = () => {

L'équipe LinkedOut

- - - -
- - À qui s'adresse - LinkedOut ? + Travaillons ensemble pour + l'accès à l’emploi } - content={ + textColor="black" + description={ <> - LinkedOut s'adresse à des personnes motivées et en capacité de - travailler, mais qui en raison d'un parcours de vie difficile - et les situations d'exclusion rencontrées, peinent à retrouver - un emploi par leurs propres moyens. -
-
- Nos candidats sont : -
- - - Domiciliés à Paris, dans le 92 et le 93, à Lille, à Lyon, à - Rennes ou à Lorient - - , - <> - - Disponibles pour travailler immédiatement - {' '} - et consacrer du temps à la recherche d’emploi - , - <> - - Suffisamment à l'aise en Français - {' '} - pour passer un entretien d'embauche - , - ]} - /> + Vous accompagnez des personnes en situation d‘exclusion ? Avec + LinkedOut, accélérez leur retour à l“emploi ! } - imgSrc="/static/img/orientation_who.jpg" - animate - direction="left" - style="default" - cta={ - - } /> + + + + +
+ + + +
+ + + + + + {/* change style */} - Plus de{' '} - 60 entreprises partenaires{' '} - ont fait confiance à LinkedOut - - } + title="Plus de 60 entreprises partenaires nous font confiance à LinkedOut" /> -
-

- Ils travaillent avec - LinkedOut -

- -
-
-

- Notre impact -

- -
-

- Source : Mesure d'impact 2021 Archipel & Co -

-
-
-
-

- Vous souhaitez en savoir plus{' '} - sur LinkedOut ? -

-
- -
- -
- {/* - - */} -
-
+ + {/* already done => only remove uikit */} + {isDesktop && ( +
+

+ Ils travaillent avec LinkedOut + + } + color="black" + center + /> + +

+ )} + + ); }; diff --git a/src/pages/travailler.tsx b/src/pages/travailler.tsx index 9cac86cb7..931966b0c 100644 --- a/src/pages/travailler.tsx +++ b/src/pages/travailler.tsx @@ -17,9 +17,9 @@ import { } from 'src/components/partials'; import { ImageTitle } from 'src/components/partials/ImageTitle'; import { Partners } from 'src/components/partials/PartnersNew'; -import { Participer } from 'src/components/partials/Travailler/Participer'; -import { Rejoindre } from 'src/components/partials/Travailler/Rejoindre'; -import { Steps } from 'src/components/partials/Travailler/Steps'; +import { Participer } from 'src/components/partials/pages/Travailler/Participer'; +import { Rejoindre } from 'src/components/partials/pages/Travailler/Rejoindre'; +import { Steps } from 'src/components/partials/pages/Travailler/Steps'; import { Section } from 'src/components/utils'; import { ANTENNE_INFO } from 'src/constants'; import { FB_TAGS, GA_TAGS } from 'src/constants/tags';