page formation, about, joinus

components/About/Logiciels.vue

@@ -318,8 +318,6 @@ font-style: normal;
 font-weight: 600;
 font-size: 10px;
 line-height: 15px;
-
-/* identical to box height, or 150% */
 display: flex;
 align-items: center;
 letter-spacing: 0.18em;

components/Formation/Banner.vue

@@ -0,0 +1,112 @@
+<template>
+  <LayoutContainer>
+    <div class="container-title">
+      <v-col cols="12" >
+        <h1 class="formation">Formation</h1>
+        <h4 class="subtitle-formation">Prise en main ou piqûre de rappel, on est toujours à vos côtés.</h4>
+      </v-col>
+    </div>
+
+    <v-row>
+      <v-col cols="12">
+          <img
+            src="/images/formation/banner.jpg"
+            alt="line"
+            class="cover-image"
+          />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <div v-for="menu in menus" :key="menu.label">
+          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">{{
+            menu.label
+          }}</v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+const state = ref({
+  activeMenu: "Présentation",
+});
+
+const menus = [
+  { label: "Présentation" },
+  { label: "catalogue" },
+  { label: "FINANCEMENT" },
+  { label: "CERTIFICATION" },
+  { label: "INSCRIPTION" },
+  { label: "ÉVALUATION" }
+];
+</script>
+
+<style scoped>
+
+.subtitle-formation {
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 30px;
+line-height: 35px;
+text-align: center;
+color: #000000;
+margin-left: 34rem;
+margin-right: 34rem;
+}
+
+.formation {
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 90px;
+line-height: 85px;
+text-align: center;
+color: #000000;
+margin-bottom: 1rem;
+}
+.container-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+
+.cover-image {
+  width: 100%;
+  height: 35rem;
+  object-fit: cover;
+  object-position: center 10%;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
+
+</style>

components/Formation/Catalogue.vue

@@ -0,0 +1,372 @@
+<template>
+  <LayoutContainer>
+      <h4 class="title">Découvrez notre catalogue de formation</h4>
+
+    <v-row>
+      <v-col cols="12">
+        <h4 class="catalog">Catalogue</h4>
+      </v-col>
+    </v-row>
+
+    <v-row no-gutters class="centered-row">
+      <v-col cols="4" class="col-card">
+        <v-row>
+          <div class="title-card-container">
+            <span class="number-card">03</span>
+            <h4 class="card-title">Formation initiale</h4>
+            <v-img
+              class="logo-img"
+              src="/images/opentalent_school_black.jpg"
+            ></v-img>
+          </div>
+
+          <p class="details-card">
+            Centralisez toutes vos informations sur un seul et même outil et ne
+            perdez plus de temps avec des fichiers sur diverses applications.
+          </p>
+        </v-row>
+
+        <v-row>
+          <div class="container-blue">
+            <h6 class="title-obj">Objectifs pédagogiques</h6>
+            <ul class="list-obj">
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+            </ul>
+          </div>
+        </v-row>
+
+        <v-row>
+          <v-chip class="badge-time">Durée : 14h</v-chip>
+        </v-row>
+
+        <div class="container-blue">
+          <h6 class="title-obj">Objectifs pédagogiques</h6>
+
+          <v-row>
+            <v-col cols="6">
+              <ul class="list-obj">
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+              </ul>
+            </v-col>
+
+            <v-col cols="6">
+              <ul class="list-obj">
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+              </ul>
+            </v-col>
+          </v-row>
+        </div>
+
+        <v-row>
+          <v-chip class="badge-time">1 580 € H.T</v-chip>
+        </v-row>
+
+        <v-row>
+          <v-chip class="chip-download"
+            >Télécharger le programme de formation</v-chip
+          >
+        </v-row>
+      </v-col>
+
+      <v-col cols="4" class="col-card">
+        <v-row>
+          <div class="title-card-container">
+            <span class="number-card">03</span>
+            <h4 class="card-title">Formation initiale</h4>
+            <v-img
+              class="logo-img"
+              src="/images/opentalent_school_black.jpg"
+            ></v-img>
+          </div>
+
+          <p class="details-card">
+            Centralisez toutes vos informations sur un seul et même outil et ne
+            perdez plus de temps avec des fichiers sur diverses applications.
+          </p>
+        </v-row>
+
+        <v-row>
+          <div class="container-blue">
+            <h6 class="title-obj">Objectifs pédagogiques</h6>
+            <ul class="list-obj">
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+            </ul>
+          </div>
+        </v-row>
+
+        <v-row>
+          <v-chip class="badge-time">Durée : 14h</v-chip>
+        </v-row>
+
+        <div class="container-blue">
+          <h6 class="title-obj">Objectifs pédagogiques</h6>
+
+          <v-row>
+            <v-col cols="6">
+              <ul class="list-obj">
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+              </ul>
+            </v-col>
+
+            <v-col cols="6">
+              <ul class="list-obj">
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+              </ul>
+            </v-col>
+          </v-row>
+        </div>
+
+        <v-row>
+          <v-chip class="badge-time">1 580 € H.T</v-chip>
+        </v-row>
+
+        <v-row>
+          <v-chip class="chip-download"
+            >Télécharger le programme de formation</v-chip
+          >
+        </v-row>
+      </v-col>
+
+      <v-col cols="4" class="col-card">
+        <v-row>
+          <div class="title-card-container">
+            <span class="number-card">03</span>
+            <h4 class="card-title">Formation initiale</h4>
+            <v-img
+              class="logo-img"
+              src="/images/opentalent_school_black.jpg"
+            ></v-img>
+          </div>
+
+          <p class="details-card">
+            Centralisez toutes vos informations sur un seul et même outil et ne
+            perdez plus de temps avec des fichiers sur diverses applications.
+          </p>
+        </v-row>
+
+        <v-row>
+          <div class="container-blue">
+            <h6 class="title-obj">Objectifs pédagogiques</h6>
+            <ul class="list-obj">
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+              <li>Ajuster la configuration du logiciel</li>
+            </ul>
+          </div>
+        </v-row>
+
+        <v-row>
+          <v-chip class="badge-time">Durée : 14h</v-chip>
+        </v-row>
+
+        <div class="container-blue">
+          <h6 class="title-obj">Objectifs pédagogiques</h6>
+
+          <v-row>
+            <v-col cols="6">
+              <ul class="list-obj">
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+              </ul>
+            </v-col>
+
+            <v-col cols="6">
+              <ul class="list-obj">
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+                <li>Accès et interface</li>
+              </ul>
+            </v-col>
+          </v-row>
+        </div>
+
+        <v-row>
+          <v-chip class="badge-time">1 580 € H.T</v-chip>
+        </v-row>
+
+        <v-row>
+          <v-chip class="chip-download"
+            >Télécharger le programme de formation</v-chip
+          >
+        </v-row>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.centered-row {
+    margin: auto;
+    justify-content: center; /* Utilisez ceci si vous utilisez flexbox */
+  }
+.catalog{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 42px;
+line-height: 42px;
+color: #071B1F;
+margin-bottom: 3rem;
+
+}
+
+.title{
+margin-bottom: 3rem;
+font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 10px;
+line-height: 15px;
+display: flex;
+align-items: center;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+width: 13rem;
+color: #071B1F;
+}
+.chip-download {
+  width: 70%;
+  background: #e34461;
+  color: black;
+  background-color: azure;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.badge-time {
+  width: 70%;
+  background: #e34461;
+  color: black;
+  background-color: #fff;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.list-obj {
+  margin-top: 0.5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 18px;
+
+  color: #000000;
+}
+
+.title-obj {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+  color: #0e2d32;
+}
+
+.container-blue {
+  justify-content: space-between;
+  align-items: center;
+  background: #c3e5e7;
+  padding: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 1rem;
+  padding-left: 1.5rem;
+  width: 70%;
+}
+
+
+
+.details-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
+  color: #091d20;
+  margin-top: 1rem;
+  width: 21rem;
+}
+
+.number-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #e34461;
+  margin-right: 1rem;
+}
+
+/** pour title-card : flex avec un espaece between */
+.title-card-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.3rem;
+  border-bottom: 1px solid #0e2d32;
+}
+
+.logo-img {
+  width: 4rem;
+  height: 3rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 4rem;
+}
+
+.container{
+  margin-bottom: 3rem;
+}
+</style>

components/Formation/Certification.vue

@@ -0,0 +1,103 @@
+<template>
+  <LayoutContainer>
+    <div class="title-container">
+      <v-icon class="fa-brands fa-react icon-title"></v-icon>
+      <h6 class="subtitle-certification">DES FORMATIONS CERTIFIFIÉES</h6>
+    </div>
+    <h2 class="title-certification">Certification</h2>
+
+    <v-row>
+      <v-col cols="4">
+        <h2 class="title-certification">Qualiopi : Marque de certification</h2>
+        <p class="details-certifications">
+          Nos formations sont certifiées Qualiopi - Actions de formation.
+        </p>
+
+        <p class="details-certifications">La marque « Qualiopi » vise à :</p>
+        <ul class="list-qualiopi">
+          <li>
+            attester de la qualité du processus mis en œuvre par les
+            prestataires d’actions concourant au développement des compétences ;
+          </li>
+          <li>
+            permettre une plus grande lisibilité de l’offre de formation auprès
+            des entreprises et des usagers.
+          </li>
+        </ul>
+      </v-col>
+
+      <v-col cols="5">
+        <v-img
+          src="/images/formation/qualiopi.jpg"
+          class="qualiopi-img"
+        ></v-img>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.qualiopi-img {
+  margin-bottom: 3rem;
+  bottom: 4rem;
+}
+
+.list-qualiopi {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  margin-top: 1rem
+}
+.details-certifications {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  margin-top: 1rem
+}
+
+.title-certification {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+  margin-bottom: 2rem;
+}
+
+.icon-title {
+  color: #9edbdd;
+  font-size: 2rem;
+  margin-right: 1rem;
+}
+.title-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
+  margin-top: 4rem;
+}
+.subtitle-certification {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #071b1f;
+}
+</style>

components/Formation/FAQ.vue

@@ -0,0 +1,183 @@
+<template>
+  <LayoutContainer>
+    <div class="container-img">
+      <v-row>
+        <v-col cols="6">
+          <div class="container-left">
+
+            <div class="container-title">
+            <v-icon class="fa-brands fa-react icon-title"></v-icon>
+            <h5 class="subtitle-faq">
+              Vous voulez tirer le meilleur de notre logiciel ?
+            </h5>
+          </div>
+          <h3 class="title-faq">
+            Quelle que soit votre demande, notre équipe est à vos côtés pour
+            vous guider
+          </h3>
+
+          <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+          </div>
+
+        </v-col>
+
+        <v-col cols="6">
+
+          <div class="btn-container">
+            <v-btn class="btn-faq-tuto">
+            <div class="container-button">
+        <v-icon class="fa-brands fa-react icon-button"></v-icon>
+        <p class="text-btn">De nombreux articles tutoriels accessibles 24h/24</p>
+      </div>
+          </v-btn>
+
+          <v-btn class="btn-faq-tuto">
+            <div class="container-button">
+        <v-icon class="fa-brands fa-react icon-button"></v-icon>
+        <p class="text-btn">De nombreux articles tutoriels accessibles 24h/24</p>
+      </div>
+          </v-btn>
+          </div>
+
+        </v-col>
+      </v-row>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.container-left{
+  margin-left: 6rem;
+}
+
+.text-btn {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 26px;
+  color: #F0E8E4;
+}
+.btn-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10rem;
+  margin-right: 15rem;
+  
+}
+
+.container-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 20rem;
+  height: 3.5rem;
+}
+
+.icon-button{
+  color: #fff;
+  font-size: 2rem;
+  margin-right: 1rem;
+  margin-left: 2rem;
+}
+.btn-faq-tuto{
+  width: 20rem;
+  height: 5.5rem;
+  margin-left: 3rem;
+  border-radius: 6px;
+  font-family: "Barlow";
+  background: transparent;
+  color: #fff;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  line-height: 1rem;
+  border: 1px white solid;
+  margin-bottom: 2rem;
+  text-transform: none !important;
+}
+
+.subtitle-faq{
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #fff;
+  margin-top: 5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  margin-right: 25rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.btn-faq {
+  width: 14rem;
+  height: 3.5rem;
+  margin-left: 3rem;
+  background: #ffffff;
+  border-radius: 6px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  text-transform: none !important;
+  line-height: 1rem;
+  
+}
+.title-faq {
+  font-size: 2rem;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 2rem;
+  font-family: "Barlow";
+  margin-left: 3rem;
+  margin-right: 15rem;
+}
+.container-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 3rem;
+}
+
+.icon-title {
+  font-size: 1rem;
+  color: #64afb7;
+  margin-right: 0.5rem;
+  margin-top: 3rem;
+}
+.subtitle-faq {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 2rem;
+  margin-top: 5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.container-img {
+  background-image: url("/images/logiciels/school/faq.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 35rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>

components/Formation/OPCA.vue

@@ -0,0 +1,100 @@
+<template>
+  <LayoutContainer>
+    <div class="title">
+      <v-icon class="fa-brands fa-react icon"></v-icon>
+      <h4>Présentation d'opentalent school</h4>
+    </div>
+
+    <v-row class="row">
+      <v-col cols="6">
+        <v-img src="/images/formation/programme.jpg" class="opca-img"></v-img>
+      </v-col>
+
+      <v-col cols="6" class="col-opca">
+        <v-row>
+          <h3 class="title-opca">Des formations éligibles par votre OPCA</h3>
+        </v-row>
+
+        <v-row>
+          <div class="details-opca">
+            <p>
+              Les formations dispensées par Opentalent entrent dans le cadre de
+              la formation professionnelle continue et peuvent être pris en
+              charge par votre OPCA (Uniformation, AFDAS, ...). Si votre
+              formation est prise en charge par un organisme accrédité, des
+              documents pourront vous être demandés (convention de
+              formation...). Nous pouvons vous fournir tous les éléments
+              nécessaires mais les démarches restent de votre responsabilité.
+              Afin de réduire le coût,nos formations sont exonérées de TVA.
+            </p>
+
+            <p>
+              Enregistrée sous le n° 82 74 02696 74. Cet enregistrement ne vaut
+              pas l’agrément de l’état.
+            </p>
+          </div>
+        </v-row>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.row,
+.title {
+  margin-left: 5rem;
+  margin-right: 5rem;
+}
+
+.opca-img {
+  width: 70%;
+  border-radius: 2rem;
+}
+
+.details-opca {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  margin-right: 15rem;
+  margin-top: 2rem;
+  color: #ffffff;
+}
+
+.title-opca {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #ffffff;
+  margin-top: 2rem;
+  margin-right: 8rem;
+}
+.icon {
+  margin-right: 0.5rem;
+}
+.title {
+  display: flex;
+  align-items: center;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin-top: 4rem;
+  color: #ffffff;
+}
+
+.container {
+  background: #0e2d32;
+}
+</style>

components/Formation/Participation.vue

@@ -0,0 +1,103 @@
+<template>
+  <LayoutContainer>
+    <div class="container-title">
+      <v-icon class="fa-brands fa-react icon-title"></v-icon>
+      <h6 class="subtitle-inscription text-center">Inscription</h6>
+    </div>
+    <h2 class="title-participation text-center">
+      Vous souhaitez participer à une formation ?
+    </h2>
+    <v-row>
+      <v-col cols="12">
+        <v-img
+          class="participation-img"
+          src="/images/formation/participation.jpg"
+        ></v-img>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <p class="details-participations">
+        Utilisez le menu "Contact" situé en haut et en bas de la page pour plus
+        d'informations. Nous vous répondons sous 48h (hors week-ends). Délais
+        d'accès: Après accord, nous mettons tout en oeuvre pour vous mettre à
+        disposition un formateur sous 1 mois.
+      </p>
+
+      <p class="details-participations">
+        Nos formations peuvent être accessibles aux personnes en situation de
+        handicap. Chaque situation étant unique, nous vous demandons de préciser
+        à l’inscription votre handicap. Nous pourrons ainsi confirmer l’ensemble
+        des possibilités afin de vous permettre de suivre la formation dans les
+        meilleures conditions en accord avec votre employeur. Pour toutes
+        informations complémentaires, nous vous conseillons les structures
+        suivantes : ONISEP, AGEFIPH et FIPHFP. Pour le bon déroulement de la
+        formation, il est nécessaire de disposer d’un espace de travail calme et
+        équipé d’au moins un ordinateur, connecté à internet, et dont le
+        navigateur (Mozilla Firefox, Google Chrome, ou Apple Safari) est à jour.
+        Nous recommandons d’utiliser un ordinateur par personne. Les
+        participants devront également avoir des ordinateurs équipés de micros
+        et de haut-parleurs, préférablement des micro-casques pour un meilleur
+        confort d’écoute.
+      </p>
+      </v-col>
+
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<style scoped>
+
+.details-participations {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  margin-top: 1rem;
+  display: flex ;
+  margin-left: 23rem;
+  margin-right: 23rem;
+}
+
+.participation-img{
+  margin-top: 2rem;
+  width: 40%;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 20%;
+}
+.title-participation {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  text-align: center;
+  color: #ffffff;
+}
+.icon-title {
+  font-size: 1rem;
+  margin-right: 1rem;
+}
+.container-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+.container {
+  background-color: #0e2d32;
+  color: #ffffff;
+}
+.subtitile-inscription {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  margin-top: 1rem;
+}
+</style>

components/Formation/Programme.vue

@@ -0,0 +1,87 @@
+<template>
+  <LayoutContainer>
+    <v-row class="container-programme">
+      <v-col cols="6">
+        <img class="programme-img1" src="/images/formation/programme2.jpg" />
+      </v-col>
+
+      <v-col cols="6">
+        <h3 class="title-programme">
+          Un programme de formation complet sur nos logiciels
+        </h3>
+        <p class="details-programme">
+          Nous avons défini un programme de formation complet pour l’utilisation
+          de notre logiciel Opentalent School pour lequel la formation est
+          nécessaire lors de sa mise en place. Au terme de cette formation,
+          votre logiciel sera complètement paramétré et vous serez complètement
+          autonome. Dans le cadre de notre solution Opentalent Manager, nous
+          pouvons organiser, selon vos besoins, des sessions de formation et
+          initiation (individuel, en groupe, pour des évènements particuliers
+          tels que des congrès, universités d’été, séminaires...
+        </p>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="6">
+        <h3 class="title-programme ml-16">
+          Des formations à la demande et sur-mesure
+        </h3>
+        <p class="details-programme ml-16">
+          Afin de prendre en compte les évolutions de votre structure, nous
+          pouvons enseuite organiser des sessions de formations spécifiques pour
+          répondre à vos besoins : outils complets, mise en route,
+          fonctionnalités spécifiques, utilisation du site web...).
+        </p>
+      </v-col>
+      <v-col cols="6">
+        <img class="programme-img2" src="/images/formation/programme.jpg" />
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.details-programme {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  width: 35rem;
+}
+
+.title-programme {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  width: 35rem;
+  margin-bottom: 3rem;
+  margin-top: 4rem;
+}
+
+.container-programme {
+  margin-top: 5%;
+  margin-bottom: 5%;
+}
+
+.programme-img1 {
+  width: 60%;
+  height: 100%;
+  border-radius: 10%;
+  margin-left: 5rem;
+}
+
+.programme-img2 {
+  width: 60%;
+  height: 100%;
+  border-radius: 10%;
+  margin-left: 5rem;
+}
+</style>

components/Formation/Reviews.vue

@@ -0,0 +1,160 @@
+<template>
+  <LayoutContainer>
+    <div class="container-green">
+      <v-row>
+        <v-col cols="4">
+          <h3 class="reviews-title">C'est eux qui en parlent le mieux</h3>
+        </v-col>
+
+        <v-col cols="8">
+          <div class="card-container">
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text class="card-text">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
+
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text class="card-text">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
+
+            <v-card class="card">
+              <v-card-item>
+                <v-card-text class="card-text">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
+                  exercitationem deleniti aspernatur illo rem deserunt sapiente
+                  tempore dolorem ipsa aliquid vel nihil eius.
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
+
+                  <p class="reviewer-status">Chef d'orchestre</p>
+                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                </div>
+              </v-card-item>
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script></script>
+
+<style scoped>
+
+.card-text{
+  color: #fff;
+}
+
+.reviewer-name{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 20px;
+line-height: 24px;
+color: #E34461;
+}
+
+.reviewer-status{
+  font-family: 'Barlow';
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 12px;
+line-height: 16px;
+display: flex;
+align-items: center;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+color: #fff;
+}
+
+.reviewer-structure{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 0.8rem;
+line-height: 14px;
+display: flex;
+align-items: center;
+color: #fff;
+}
+
+.card-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 5.5rem;
+  margin-top: 3rem;
+}
+
+.card-text{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 1rem;
+line-height: 1rem;
+margin-left: 1.5rem;
+margin-right: 1.5rem;
+height: 12rem;
+}
+.reviews-title {
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 42px;
+line-height: 42px;
+color: #091D20;
+margin-top: 2rem;
+margin-left: 2rem;
+margin-right: 8rem;
+}
+
+.card {
+  width: 70rem;
+  height: 23rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  border-radius: 1rem;
+  background: #0E2D32;
+}
+
+.card-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 5rem;
+  margin-bottom: 3rem;
+}
+
+</style>

components/Formation/Solutions.vue

@@ -0,0 +1,193 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="12">
+        <h4 class="solution-title text-center">Ces solutions peuvent vous intéresser</h4>
+      </v-col>
+    </v-row>
+  
+    <v-row class="row-artist">
+      <v-col cols="3">
+        <v-img
+        src="/images/opentalent_artist_black.png"
+        class="logo"
+        >
+        </v-img>
+      </v-col>
+      
+      <v-col cols="2">
+        <h5 class="solution-name">Opentalent Artist</h5>
+      </v-col>
+  
+      <v-col cols="7">
+        <!-- list v-chip-->
+        <v-chip-group
+        active-class="primary--text"
+        column
+        >
+          <v-chip
+          class="ma-2 chip"
+          label
+          >
+            <span>Agenda</span>
+          </v-chip>
+          <v-chip
+          class="ma-2"
+          label
+          >
+            <span>Facturation</span>
+          </v-chip>
+          <v-chip
+          class="ma-2 chip"
+          label
+          >
+            <span>Comptabilité</span>
+          </v-chip>
+          <v-chip
+          class="ma-2 chip"
+          label
+          >
+            <span>Communication</span>
+          </v-chip>
+          <v-chip
+          class="ma-2 chip"
+          label
+          >
+            <span>Site internet</span>
+          </v-chip>
+      </v-chip-group>
+      </v-col>
+  
+    </v-row>
+  
+    <v-row class="row-artist">
+      <v-col cols="3">
+        <v-img
+        src="/images/opentalent_manager_black.jpg"
+        class="logo"
+  
+        >
+        </v-img>
+      </v-col>
+      
+      <v-col cols="2">
+        <h5 class="solution-name">Opentalent Manager</h5>
+      </v-col>
+  
+      <v-col cols="7">
+        <!-- list v-chip-->
+        <v-chip-group
+        active-class="primary--text"
+        column
+        >
+          <v-chip
+          class="ma-2 chip"
+          color="primary"
+          label
+          >
+            <span>Agenda</span>
+          </v-chip>
+          <v-chip
+          class="ma-2 chip"
+          color="primary"
+          label
+          >
+            <span>Facturation</span>
+          </v-chip>
+          <v-chip
+          class="ma-2 chip"
+          color="primary"
+          label
+          >
+            <span>Comptabilité</span>
+          </v-chip>
+          <v-chip
+          class="ma-2 chip"
+          color="primary"
+          label
+          >
+            <span>Communication</span>
+          </v-chip>
+          <v-chip
+          class="ma-2 chip"
+          color="primary"
+          label
+          >
+            <span>Site internet</span>
+          </v-chip>
+      </v-chip-group>
+      </v-col>
+  
+    </v-row>
+  </LayoutContainer>
+  
+  </template>
+  
+  <script setup>
+  </script>
+  
+  <style scoped>
+  
+  .chip {
+    /* position: inherit; */
+    color: black;
+    border: 1px solid #0E2D32;
+    border-radius: 3rem; 
+    text-transform: uppercase;
+  
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  
+  /* identical to box height, or 114% */
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.2em;
+  }
+  
+  .row-artist{
+    border-top: 1px solid #D1CDC7;
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+  
+  
+  .solution-name{
+    font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  color: #0E2D32;
+  
+  
+  }
+  
+  .row-artist{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .solution-title{
+    font-family: "Barlow";
+    font-style: normal;
+    font-weight: 500;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+    color: #000000;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    text-align: center;
+  
+  }
+  
+  .logo{
+    width: 10rem;
+    height: 10rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+  </style>

components/JoinUs/Banner.vue

@@ -0,0 +1,67 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="12" class="title">
+        <h1 class="text-center">Nous rejoindre</h1>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <div class="banner-container">
+          <img src="/images/join/join.jpg" alt="line" class="cover-image" />
+        </div>
+      </v-col>
+    </v-row>
+
+    <h3 class="text-center join-title">
+      Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est
+      ipsa laborum sed internos dolor in pariatur vitae. Et quis nostrum non
+      praesentium impedit 33 doloribus cumque et adipisci velit!
+    </h3>
+
+
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.join-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.5rem;
+  line-height: 2.5rem;
+  text-align: center;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  margin-left: 30rem;
+  margin-right: 30rem;
+}
+.title {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  text-align: center;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+}
+
+.banner-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  height: 25rem;
+  object-fit: cover;
+  transition: transform 0.2s;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
+</style>

components/JoinUs/Missions.vue

@@ -0,0 +1,192 @@
+<template>
+  <LayoutContainer>
+    <div class="mission-container" v-for="(job, index) in jobs" :key="index">
+      <v-row>
+        <v-col cols="2">
+          <v-img class="logo-img" :src="job.image"></v-img>
+        </v-col>
+
+        <v-col cols="6">
+          <v-row class="job-details">
+            <h6 class="title-job">{{ job.title }}</h6>
+            <h6 class="contrat-job">{{ job.contractType }}</h6>
+            <h6 class="location-job">{{ job.location }}</h6>
+            <p class="description-job">{{ job.description }}</p>
+          </v-row>
+
+          <v-row>
+            <div class="container-btn">
+              <v-btn class="btn-apply" text> Postuler </v-btn>
+              <v-btn class="btn-more ml-4" text> En savoir plus </v-btn>
+            </div>
+          </v-row>
+        </v-col>
+
+        <v-col cols="3">
+          <v-chip
+            class="ma-2"
+            v-for="(property, index) in job.properties"
+            :key="index"
+          >
+            <span class="white--text">{{ property }}</span>
+          </v-chip>
+        </v-col>
+      </v-row>
+    </div>
+
+    <v-row class="apply-row">
+      <h3 class="apply">Candidature spontanée</h3>
+      <p class="apply-now">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
+        quae fugit maxime illo reiciendis excepturi laborum sed dicta impedit
+        minima minus eveniet, ipsam voluptatum beatae asperiores aut accusamus
+        autem magnam.
+      </p>
+      <v-btn class="btn-apply">
+        Envoyer ma candidature
+      </v-btn>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+const jobs = ref([
+  {
+    id: 1,
+    image: "/images/Opentalent.png",
+    title: "Assistant(e) Commercial(e) h/f",
+    contractType: "CDI",
+    location: "Paris",
+    description:
+      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
+    properties: ["CDI", "Paris", "Commercial"],
+  },
+  {
+    id: 1,
+    image: "/images/Opentalent.png",
+    title: "Assistant(e) Commercial(e) h/f",
+    contractType: "CDI",
+    location: "Paris",
+    description:
+      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
+    properties: ["CDI", "Paris", "Commercial"],
+  },
+  {
+    id: 1,
+    image: "/images/Opentalent.png",
+    title: "Assistant(e) Commercial(e) h/f",
+    contractType: "CDI",
+    location: "Paris",
+    description:
+      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
+    properties: ["CDI", "Paris", "Commercial"],
+  },
+]);
+</script>
+
+<style scoped>
+
+.apply-row{
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+  margin-left: 4rem;
+  margin-right: 4rem;
+}
+
+.apply{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2.5rem;
+  line-height: 39px;
+  color: #0e2d32;
+  margin-top: 5rem;
+  margin-bottom: 1rem;
+}
+
+.apply-now{
+  font-family: 'Barlow';
+font-style: italic;
+font-weight: 300;
+font-size: 34px;
+line-height: 40px;
+color: #091D20;
+margin-bottom: 2rem;
+}
+.description-job {
+  font-family: "Barlow";
+  font-style: italic;
+  font-weight: 300;
+  font-size: 1.3rem;
+  line-height: 40px;
+  color: #091d20;
+}
+
+.btn-apply {
+  background: #f4aa2a;
+  border-radius: 0.5rem;
+}
+
+.btn-more {
+  background: #ffffff;
+  border: 0.1rem solid #f4aa2a;
+  border-radius: 0.5rem;
+  color: #f4aa2a;
+}
+
+.container-btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.location-job {
+  font-weight: 600;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.6rem;
+  line-height: 39px;
+  color: #444444;
+}
+
+.contrat-job {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 39px;
+  color: #444444;
+}
+.job-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.title-job {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 36px;
+  line-height: 1rem;
+  margin-bottom: 1rem;
+  color: #0e2d32;
+  margin-top: 2rem;
+}
+
+.logo-img {
+  width: 70%;
+  height: 80%;
+  margin-left: 1rem;
+}
+
+.mission-container {
+  margin-top: 5rem;
+  margin-bottom: 5%;
+}
+
+.mission-container:nth-child(even) {
+  background: rgba(14, 45, 50, 0.3);
+}
+</style>

pages/formation.vue

@@ -0,0 +1,19 @@
+<template>
+  <LayoutNavigation/>
+  <FormationBanner />
+  <FormationProgramme />
+  <FormationCatalogue />
+  <FormationOPCA />
+  <FormationCertification />
+  <FormationParticipation />
+  <FormationReviews />
+  <FormationFAQ />
+  <FormationSolutions />
+  <LayoutFooter />
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>

pages/join.vue

@@ -0,0 +1,12 @@
+<template>
+  <LayoutNavigation />
+  <JoinUsBanner />
+  <JoinUsMissions />
+  <LayoutFooter />
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>