[EN-6251] feat: page orienter (#168)

cypress/e2e/parcours-orienter.cy.js

@@ -14,51 +14,9 @@ describe('Parcours Orienter', () => {
     cy.visit('/orienter');
   });
 
-  describe('Nous contacter', () => {
-    it('Remplir le formulaire, envoyer et fermer', () => {
-      cy.get('[data-testid="button-contact"]').first().click();
-
-      cy.wait(500);
-
-      cy.get('.ReactModalPortal div').first().should('be.visible');
-
-      cy.get('#form-interest-lastName').scrollIntoView().type('Doe');
-
-      cy.get('#form-interest-firstName').scrollIntoView().type('John');
-
-      cy.get('#form-interest-email').scrollIntoView().type('johndoe@gmail.com');
-
-      cy.get('#form-interest-phone').scrollIntoView().type('0698754321');
-
-      cy.get('#form-interest-structure').scrollIntoView().type('Test');
-
-      cy.get('#form-interest-message').scrollIntoView().type('Form test');
-
-      cy.get('#form-interest-heardAbout-container')
-        .should('be.visible')
-        .scrollIntoView()
-        .click()
-        .find('.option')
-        .contains('Autre')
-        .click();
-
-      cy.get('label[for="form-interest-cgu"]').scrollIntoView().click();
-
-      cy.get('button').contains('Envoyer').click();
-
-      cy.wait('@postContact');
-
-      cy.get('[data-testid="success-modal-content"]').should('be.visible');
-
-      cy.get('[data-testid="success-close-modal"]').click();
-
-      cy.get('[data-testid="success-modal-content"]').should('not.exist');
-    });
-  });
-
   describe('Orienter un candidat', () => {
     it('Remplir le formulaire, envoyer et fermer', () => {
-      cy.get('[data-testid="button-orientate"]').first().click();
+      cy.get('[data-testid="button-orienter"]').first().click();
 
       cy.wait(500);
 
@@ -282,5 +240,51 @@ describe('Parcours Orienter', () => {
 
       cy.get('.ReactModalPortal div').should('not.exist');
     });
-  });
+  })
+
+
+  describe('Nous contacter', () => {
+    it('Remplir le formulaire, envoyer et fermer', () => {
+      cy.get('[data-testid="button-contact"]')
+        .scrollIntoView()
+        .first()
+        .click();
+
+      cy.wait(500);
+
+      cy.get('.ReactModalPortal div').first().should('be.visible');
+
+      cy.get('#form-interest-lastName').scrollIntoView().type('Doe');
+
+      cy.get('#form-interest-firstName').scrollIntoView().type('John');
+
+      cy.get('#form-interest-email').scrollIntoView().type('johndoe@gmail.com');
+
+      cy.get('#form-interest-phone').scrollIntoView().type('0698754321');
+
+      cy.get('#form-interest-structure').scrollIntoView().type('Test');
+
+      cy.get('#form-interest-message').scrollIntoView().type('Form test');
+
+      cy.get('#form-interest-heardAbout-container')
+        .should('be.visible')
+        .scrollIntoView()
+        .click()
+        .find('.option')
+        .contains('Autre')
+        .click();
+
+      cy.get('label[for="form-interest-cgu"]').scrollIntoView().click();
+
+      cy.get('button').contains('Envoyer').click();
+
+      cy.wait('@postContact');
+
+      cy.get('[data-testid="success-modal-content"]').should('be.visible');
+
+      cy.get('[data-testid="success-close-modal"]').click();
+
+      cy.get('[data-testid="success-modal-content"]').should('not.exist');
+    });
+  });;
 });

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/EnSavoirPlus.tsx

@@ -0,0 +1,53 @@
+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 />);
+                },
+                dataTestId: 'button-contact',
+              },
+            },
+            {
+              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/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;
+`;