[EN-6251] feat: page orienter

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 (
+    <Section container="large" style="muted">
+      <H2
+        title={
+          <>
+            Vous souhaitez <span className="orange">en savoir plus</span> sur
+            LinkedOut&nbsp;?
+          </>
+        }
+        color="black"
+        center
+      />
+      <StyledEnSavoirPlusButtonContainer>
+        <MultipleCTA
+          data={[
+            {
+              button: {
+                label: 'Nous contacter',
+                onClick: () => {
+                  gaEvent(GA_TAGS.PAGE_ORIENTER_CONTACT_CLIC);
+                  openModal(<ModalInterestLinkedOut />);
+                },
+              },
+            },
+            {
+              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',
+              },
+            },
+          ]}
+        />
+      </StyledEnSavoirPlusButtonContainer>
+    </Section>
+  );
+};

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;
+`;

src/components/partials/EnSavoirPlus/index.ts

@@ -0,0 +1 @@
+export * from './EnSavoirPlus';

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;

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}
     >
-      <StyledImageTitle className={`${isDesktop ? 'desktop' : ''}`}>
+      <StyledImageTitle
+        className={`${isDesktop ? 'desktop' : ''}`}
+        textColor={textColor || 'white'}
+      >
         <H1
           title={title}
-          color="white"
+          color={textColor || 'white'}
           effect="cls: uk-animation-slide-left uk-animation-fade; delay: 200;"
         />
         <p data-uk-scrollspy="cls: uk-animation-slide-left uk-animation-fade; delay: 200;">

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;
+`;

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 (
+      <CarouselSwiper
+        slidesPerview={logosPerLine}
+        slides={logos.map(({ key, link, bis }) => {
+          return (
+            <StyledCarouselItem key={key}>
+              <Logo logoKey={key} link={link} bis={bis} />
+            </StyledCarouselItem>
+          );
+        })}
+      />
+    );
+  }
+  return (
+    <LogoListFlexContainer
+      className={`${background ? 'background' : 'border-rounded'} ${
+        padding ? 'padding' : ''
+      }`}
+    >
+      {logos.map(({ key, link, bis }) => {
+        return (
+          <LogoListFlexItem
+            width={`calc(100% * 1 / ${logosPerLine <= 3 ? 3 : logosPerLine})`}
+          >
+            <Logo logoKey={key} link={link} bis={bis} />
+          </LogoListFlexItem>
+        );
+      })}
+    </LogoListFlexContainer>
+  );
+};

src/components/partials/LogoList/index.ts

@@ -0,0 +1 @@
+export * from './LogoList';

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 = ({
                 <div className="uk-flex uk-flex-bottom uk-flex-center uk-margin-small-bottom">
                   <Img
                     src={item.img}
-                    alt={item.title}
+                    alt={item.title.toString()}
                     height={150}
                     width={260}
                   />
@@ -115,7 +116,7 @@ export const MultipleCTA = ({
                     >
                       <Button
                         href={item.button.href}
-                        style="secondary"
+                        style={item.button.style || 'secondary'}
                         isExternal={item.button.external}
                         newTab={item.button.external}
                         toggle={item.button.modal}