Merge branch 'V_-5728-factorize-fonts-and-sections' into feature/V8-5674-recette--refactoring-du-site-log

app.vue

@@ -2,8 +2,8 @@
   <nuxt-page />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 
-<!-- TODO: définir la police Barlow de manière générique et la virer partout ailleurs -->
 <!-- TODO: voir si possible de factoriser les consignes 'custom-row' un peu partout -->
 <!-- TODO: voir si possible d'utilser des sections pour factoriser les marges entre les sections d'une page -->

assets/style/main.scss

@@ -1,9 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&display=swap');
 
-h1, h2, h3, h4, h5, h6, p, small, .btn-event, .btn-contact, .formation-btn, td, .button-faq, li, .btn-school,
-.btn-artist, .btn-manager, .name, .school, .view-button, .presentation-title, .subtitle .status {
+body {
   font-family: "Barlow", serif;
   font-style: normal;
+
+  --banner-center-image: 20%;
 }
 
 .table-row {
@@ -15,8 +16,14 @@ h1, h2, h3, h4, h5, h6, p, small, .btn-event, .btn-contact, .formation-btn, td,
 .table-data-left {
   text-align: left;
 }
-.row-custom{
+
+.center-90 {
   width: 90%;
   margin-right: auto;
   margin-left: auto;
 }
+.v-row.center-90 {
+  margin: -12px auto;
+}
+
+

assets/style/theme.scss

@@ -36,7 +36,7 @@ body {
     color: var(--on-alt-theme) !important;
   }
 
-  // Thème alernatif
+  // Thème alternatif
   .alt-theme {
     background-color: var(--alt-theme);
     color: var(--on-alt-theme) !important;
@@ -45,6 +45,7 @@ body {
       border-color: var(--on-alt-theme);
     }
   }
+
   .alt-theme * {
     color: var(--on-alt-theme) !important;
   }

components/About/Banner.vue

@@ -1,30 +0,0 @@
-<template>
-  <LayoutContainer>
-    <LayoutUITitlePage class="mb-12">
-      Qui sommes-nous ?
-    </LayoutUITitlePage>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="/images/banner/about_opentalent.png"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped>
-:deep(.logiciel) {
-  font-family: "Barlow", serif;
-  font-style: normal;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  width: 100%;
-}
-</style>

components/About/Equipe.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="team">
     <LayoutContainer class="mb-12">
-      <v-row class="mt-12">
+      <v-row class="mt-12 center-90">
         <LayoutUISubTitle>
           Notre équipe
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <LayoutUITitle>
           Une équipe spécialisée et passionnée
         </LayoutUITitle>
@@ -18,7 +18,7 @@
         </span>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <v-col
           cols="12" sm="6" md="4" lg="3"
           v-for="associate in associates"
@@ -41,7 +41,7 @@
         </v-col>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <v-col
           cols="12" sm="6" md="4" lg="3"
           v-for="employee in employees"
@@ -129,12 +129,6 @@ const employees: Array<SocietyMember> = [
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .v-card {
   max-width: 284px;
   border: none !important;
@@ -149,7 +143,6 @@ const employees: Array<SocietyMember> = [
 
 .details {
   color: var(--primary-color);
-  font-family: Barlow, serif;
   font-size: 16px;
   font-weight: 300;
   line-height: 20px;
@@ -158,27 +151,21 @@ const employees: Array<SocietyMember> = [
 
 .description {
   color: var(--primary-color);
-  font-family: Barlow, serif;
   font-size: 14px;
-  font-style: normal;
   font-weight: 300;
   line-height: 18px;
 }
 
 .name {
   color: var(--primary-color);
-  font-family: Barlow, serif;
   font-size: 22px;
-  font-style: normal;
   font-weight: 500;
   line-height: 26px;
 }
 
 .position {
   color: var(--primary-color);
-  font-family: Barlow, serif;
   font-size: 10px;
-  font-style: normal;
   font-weight: 600;
   line-height: 15px;
   letter-spacing: 1.8px;

components/About/FAQ.vue

@@ -48,7 +48,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 h4 {
   margin-bottom: 2rem;
   margin-top: 3rem;
-  font-style: normal;
   font-weight: 400;
   font-size: 2rem;
   line-height: 34px;

components/About/Logiciels.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="softwares">
     <LayoutContainer>
-      <v-row class="mb-6 custom-row">
+      <v-row class="mb-6 center-90">
         <LayoutUISubTitle>
           Nos logiciels
         </LayoutUISubTitle>
@@ -11,7 +11,7 @@
         </LayoutUITitle>
       </v-row>
 
-      <v-row class="mb-12 custom-row">
+      <v-row class="mb-12 center-90">
         <v-col cols="3">
           <p class="text-justify mr-4 ml-6 mb-6">
             Découvrez notre gamme de logiciels de gestion & de communication
@@ -103,12 +103,6 @@ const items: Array<{imageUrl: string, logoUrl: string, class: string, link: stri
   background: #f8f8f8;
 }
 
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 ul {
   list-style: none;
   padding-left: 0;

components/About/MenuScroll.vue

@@ -1,125 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col
-        cols="12"
-        class="menu-container"
-        :class="{ 'sticky-menu': isSticky }"
-      >
-        <div v-for="menu in menus" :key="menu.label" @click="navigate(menu)">
-          <v-chip v-if="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>
-import { ref, onMounted, onUnmounted, reactive } from "vue";
-
-const refs = reactive({
-  about: null,
-  valeurs: null,
-  logiciels: null,
-  agenda: null,
-  histoire: null,
-  equipe: null,
-});
-
-const menus = [
-  { label: "Qui sommes-nous" },
-  { label: "Nos valeurs" },
-  { label: "Nos logiciels" },
-  { label: "L'agenda opentalent" },
-  { label: "Notre Histoire" },
-  { label: "Notre équipe" },
-];
-
-const isSticky = ref(false);
-
-const handleScroll = () => {
-  const scrollPosition = window.scrollY;
-
-  if (scrollPosition > 800) { 
-    isSticky.value = true;
-  } else {
-    isSticky.value = false;
-  }
-
-  for (const key of Object.keys(refs)) {
-    const element = refs[key];
-    if (element) {
-      const top = element.offsetTop;
-      const bottom = top + element.offsetHeight;
-      if (scrollPosition >= top && scrollPosition < bottom) {
-        activeMenu.value = key;
-        break;
-      }
-    }
-  }
-};
-
-onMounted(() => {
-  Object.keys(refs).forEach(key => {
-    refs[key] = document.getElementById(key);
-  });
-
-  window.addEventListener('scroll', handleScroll);
-});
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-});
-
-
-const activeMenu = ref(menus[0].label);
-
-const navigate = (menu) => {
-  activeMenu.value = menu.label;
-  const element = document.getElementById(menu.label);
-  if (element) {
-    element.scrollIntoView({ behavior: "smooth" });
-  }
-};
-</script>
-
-<style scoped>
-
-.sticky-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-.menu-container {
-  z-index: 3;
-  display: flex;
-  justify-content: space-around;
-  background: white;
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  line-height: 19px;
-  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: var(--Vert-100, #091D20);;
-  color: white;
-}
-
-.menu-container div:hover {
-  cursor: pointer;
-  text-decoration: underline;
-  z-index: 15;
-}
-</style>

components/About/Presentation.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="about">
     <LayoutContainer>
-      <v-row class="mt-12 custom-row">
+      <v-row class="mt-12 center-90">
         <v-col cols="4">
           <LayoutUISubTitle>
             Qui sommes-nous ?
@@ -71,12 +71,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .italic-title {
   text-align: justify;
   font-style: italic;

components/About/Valeurs.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="values">
     <LayoutContainer class="mt-12">
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle>
           Les valeurs qui nous portent
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row class="mt-6 custom-row align-center mb-12">
+      <v-row class="mt-6 center-90 align-center mb-12">
         <v-col cols="6">
           <v-img
             src="/images/about/valeurs/valeur.png"
@@ -89,12 +89,6 @@ const values: Array<Array<SocietyValue>> = [
   width: 450px;
 }
 
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .values {
   .v-row {
     border-top: 1px solid #e5e5e5;
@@ -107,8 +101,6 @@ const values: Array<Array<SocietyValue>> = [
   }
 
   h6 {
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 500;
     font-size: 22px;
     line-height: 26px;

components/Common/Agenda.vue

@@ -4,7 +4,7 @@ Section "Agenda des évènements"
 <template>
   <AnchoredSection id="agenda">
     <LayoutContainer class="mb-12" >
-      <v-row class="custom-row align-center my-6">
+      <v-row class="center-90 align-center my-6">
         <v-col cols="4" class="align-center">
           <LayoutUITitle>
             L'agenda Opentalent
@@ -32,13 +32,13 @@ Section "Agenda des évènements"
         </v-col>
       </v-row>
 
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <p class="agenda-details">
           Retrouvez tous les évènements culturels autour de chez vous.
         </p>
       </v-row>
 
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <v-col cols="12">
           <Carousel
             ref="carousel"
@@ -172,12 +172,6 @@ const goNext = () => carousel.value!.next();
   background: #F8F8F8
 }
 
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .carousel-controls {
   display: flex;
   flex-direction: row;
@@ -201,11 +195,9 @@ const goNext = () => carousel.value!.next();
 
 .btn-news {
   color: var(--primary-color);
-  font-family: "Barlow", serif;
   background: transparent;
   border: 1px solid var(--primary-color);
   border-radius: 6px;
-  font-style: normal;
   font-weight: 600;
   text-transform: uppercase;
   display: flex;

components/Common/Avantages.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-row>
+    <v-row class="center-90">
       <LayoutUISubTitle>
         Découvrez les avantages de la solution
       </LayoutUISubTitle>
@@ -10,7 +10,7 @@
       </LayoutUITitle>
     </v-row>
 
-    <v-row>
+    <v-row class="center-90">
       <v-col
         cols="12"
         md="4"
@@ -48,8 +48,5 @@ const props = defineProps({
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
 }
 </style>

components/Common/Banner/Banner.vue → components/Common/Banner.vue

@@ -27,6 +27,10 @@
           <div v-if="logoSrc" :class="'logo-square' + (logoAltTheme ? ' alt-theme' : '')">
             <img :src="logoSrc" :alt="logoAlt"/>
           </div>
+
+          <div class="image-text mt-12">
+            <slot name="watermark" />
+          </div>
         </div>
       </v-col>
     </v-row>
@@ -69,6 +73,18 @@ const props = defineProps({
 .banner-container {
   position: relative;
   overflow: hidden;
+
+  .image-text {
+    position: absolute;
+    top: 40px;
+    left: 20px;
+    color: white;
+    font-size: 3rem;
+    width: 30rem;
+    font-style: italic;
+    font-weight: 300;
+    line-height: 40px;
+  }
 }
 
 .cover-image {
@@ -76,7 +92,7 @@ const props = defineProps({
   min-height: 400px;
   max-height: 400px;
   object-fit: cover;
-  object-position: center 20%;
+  object-position: center var(--banner-center-image);
   transition: transform 0.2s;
   margin: 0 auto;
   transform: scaleX(-1);

components/Common/Card/Benefit.vue

@@ -42,12 +42,6 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 hr {
   opacity: 70%;
 }

components/Common/Carousel/Clients.vue

@@ -77,7 +77,6 @@ const goToNext = () => {
 
 h2 {
   margin-bottom: 2rem;
-  font-style: normal;
   text-align: center;
   font-weight: 600;
   font-size: 42px;

components/Common/MenuScroll.vue

@@ -68,7 +68,6 @@ const handleScroll = () => {
   justify-content: space-around;
   background: white;
   color: #071b1f;
-  font-family: "Barlow", serif;
   font-size: 1rem;
   line-height: 19px;
   align-items: center;

components/Common/Presentation.vue

@@ -4,7 +4,7 @@ Section "Présentation" d'une page Logiciel
 <template>
   <div id="Presentation">
     <LayoutContainer>
-      <v-row>
+      <v-row class="center-90">
 
         <!-- Colonne 1 (sous-titre, illustration logiciels, prix) -->
         <v-col cols="5">
@@ -145,12 +145,6 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .pricing-rectangle {
   display: flex;
   flex-direction: row;
@@ -237,7 +231,6 @@ const props = defineProps({
 h3 {
   color: var(--on-primary-color);
   font-size: 34px;
-  font-style: normal;
   font-weight: 400;
   line-height: 38px;
 }

components/Common/ReviewSection.vue

@@ -1,6 +1,6 @@
 <template>
     <LayoutContainer>
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <v-col cols="3">
           <div class="controls-section">
             <h3>
@@ -86,12 +86,6 @@ const goNext = () => {
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .v-container {
   padding: 0 !important;
 }

components/Common/Share.vue

@@ -67,9 +67,7 @@
 .share {
   display: flex;
   gap: 10px;
-  font-family: "Barlow", serif;
   font-size: 16px;
-  font-style: normal;
   font-weight: 400;
   line-height: 28px;
 

components/Common/StickyMenu.vue

@@ -160,7 +160,6 @@ const onActionClick = (action: StickyMenuAction) => {
 
 .square {
   position: relative;
-  font-family: "Barlow", serif;
   width: 7rem;
   padding: 1rem;
   cursor: pointer;

components/Common/Table/Comparatif.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-row>
+    <v-row class="center-90">
       <table>
         <thead>
           <tr>
@@ -105,9 +105,6 @@ const props = defineProps({
   display: flex;
   flex-direction: row;
   justify-content: center;
-  margin-left: auto;
-  margin-right: auto;
-  width: 90%;
 }
 
 table {
@@ -121,8 +118,6 @@ table {
 
 th {
   height: 8rem;
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 400;
   font-size: 30px;
   line-height: 34px;
@@ -144,8 +139,6 @@ td {
 td:first-child {
   text-align: left;
   padding-left: 20px;
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 16px;
@@ -155,7 +148,6 @@ td:first-child {
 }
 
 .standard {
-  font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 16px;

components/Formation/Banner.vue

@@ -1,53 +0,0 @@
-<template>
-  <LayoutContainer>
-    <LayoutUITitlePage>
-      Formation
-      <template #subtitle>
-        Prise en main ou piqûre de rappel,on est toujours à vos côtés.
-      </template>
-    </LayoutUITitlePage>
-
-    <v-row>
-      <!-- TODO: remplacer par le component CommonBanner comme dans WebinaireBanner -->
-      <v-col cols="12" class="banner-container">
-        <v-img
-          src="/images/formation/banner.jpg"
-          alt="banner"
-          cover
-          class="cover-image"
-        />
-
-        <div class="image-text mt-12">
-          Et si vous passiez rapidement à la vitesse supérieure...
-        </div>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<style scoped lang="scss">
-  .banner-container {
-    position: relative;
-    height: 35rem;
-
-    :deep(img) {
-      width: 100%;
-      height: 100%;
-      object-position: center 30%;
-      transform: scaleX(-1);
-    }
-
-    .image-text {
-      position: absolute;
-      top: 40px;
-      left: 20px;
-      font-family: "Barlow", serif;
-      color: white;
-      font-size: 3rem;
-      width: 30rem;
-      font-style: italic;
-      font-weight: 300;
-      line-height: 40px;
-    }
-  }
-</style>

components/Formation/Catalogue.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="catalog">
     <LayoutContainer>
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle>
           Découvrez notre catalogue de formation
         </LayoutUISubTitle>
@@ -11,7 +11,7 @@
         </LayoutUITitle>
       </v-row>
 
-      <v-row class="custom-row catalog">
+      <v-row class="center-90 catalog">
         <v-col
           v-for="(course, index) in courses"
           :key="index"
@@ -207,17 +207,8 @@ const courses: Array<Training> = [
   text-align: justify;
 }
 
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .catalog {
   padding: 2rem;
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
 
   .v-card {
     border: none !important;
@@ -230,8 +221,6 @@ const courses: Array<Training> = [
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 600;
     font-size: 1.2rem;
     width: 31rem;
@@ -239,8 +228,6 @@ const courses: Array<Training> = [
     padding: 1rem 0;
 
     .number-card {
-      font-family: "Barlow", serif;
-      font-style: normal;
       font-weight: 500;
       font-size: 1.3rem;
       color: #b9e5e7;
@@ -249,8 +236,6 @@ const courses: Array<Training> = [
   }
 
   .details-card {
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 300;
     font-size: 1rem;
     line-height: 1rem;
@@ -271,8 +256,6 @@ const courses: Array<Training> = [
     height: 13rem;
 
     h6 {
-      font-family: "Barlow", serif;
-      font-style: normal;
       font-weight: 500;
       font-size: 16px;
       line-height: 20px;
@@ -281,8 +264,6 @@ const courses: Array<Training> = [
 
     ul {
       margin-top: 0.5rem;
-      font-family: "Barlow", serif;
-      font-style: normal;
       font-weight: 300;
       font-size: 14px;
       line-height: 18px;
@@ -293,8 +274,6 @@ const courses: Array<Training> = [
     color: white;
     border: 1px solid #0e2d32;
     border-radius: 3rem;
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 500;
     font-size: 14px;
     line-height: 18px;
@@ -311,8 +290,6 @@ const courses: Array<Training> = [
 
   .chip-register {
     border-radius: 3rem;
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 500;
     font-size: 14px;
     line-height: 18px;

components/Formation/Certification.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="certification">
     <LayoutContainer>
-      <v-row>
+      <v-row class="center-90">
         <v-col cols="5">
           <LayoutUISubTitle>
             DES FORMATIONS CERTIFIÉES
@@ -47,12 +47,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .bloc-certif {
   text-align: justify;
 }

components/Formation/OPCA.vue

@@ -1,14 +1,14 @@
 <template>
   <AnchoredSection id="financing">
     <LayoutContainer class="alt-theme py-6 my-6">
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle>
           Financement des formations
         </LayoutUISubTitle>
       </v-row>
 
       <v-container>
-        <v-row class="align-center custom-row">
+        <v-row class="align-center center-90">
           <v-col cols="6">
             <v-img
               src="/images/formation/programme.jpg"
@@ -56,18 +56,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-@media (min-width: 1200px) {
-  .custom-row {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .opca-img {
   height: 400px;
   width: 450px;

components/Formation/Participation.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="inscription">
     <LayoutContainer class="alt-theme">
-      <v-row>
+      <v-row class="center-90">
         <v-col cols="12">
           <LayoutUISubTitle>
             Accessibilité
@@ -13,7 +13,7 @@
         Vous souhaitez participer à une formation ?
       </h3>
 
-      <v-row class="mb-12">
+      <v-row class="mb-12 center-90">
         <v-col cols="12">
           <v-img
             src="/images/formation/participation.jpg"
@@ -22,7 +22,7 @@
         </v-col>
       </v-row>
 
-      <v-row class="mb-12">
+      <v-row class="mb-12 center-90">
         <v-col cols="12">
           <div class="details-participations">
             <p class="mb-6">
@@ -56,12 +56,6 @@
 </template>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 @media (min-width: 1200px) {
   .v-row {
     min-width: 100%;
@@ -69,8 +63,6 @@
 }
 
 h3 {
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;

components/Formation/Presentation.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="presentation">
     <LayoutContainer>
-      <v-row class="mt-6">
+      <v-row class="mt-6 center-90">
         <LayoutUISubTitle>
           Présentation de nos formations
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row class="mb-12">
+      <v-row class="mb-12 center-90">
         <v-col cols="6">
           <v-img
             src="/images/formation/programme2.jpg"
@@ -38,7 +38,7 @@
         </v-col>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <v-col cols="6">
           <h3 class="title-programme mb-6 mt-4">
             Des formations à la demande et sur-mesure
@@ -68,12 +68,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .v-img {
   width: 80%;
   height: 100%;
@@ -81,8 +75,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 }
 
 h3, p {
-    font-family: "Barlow", serif;
-    font-style: normal;
     width: 35rem;
 }
 

components/Formation/Solutions.vue

@@ -134,9 +134,6 @@
   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;
@@ -155,8 +152,6 @@
 }
 
 .solution-name {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1.5rem;
   line-height: 1.5rem;
@@ -169,8 +164,6 @@
   align-items: center;
 }
 .solution-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 1.5rem;

components/Home/Besoin.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer :overflow="false">
+  <LayoutContainer>
     <v-row
       v-if="!mdAndDown"
       class="mt-6"

components/Home/EventAgenda.vue

@@ -2,7 +2,7 @@
 Section "Agenda" de la page d'accueil
 -->
 <template>
-  <LayoutContainer :overflow="false">
+  <LayoutContainer>
     <div class="container">
       <div class="d-flex align-center justify-center">
         <h2>

components/Home/Help.vue

@@ -93,8 +93,6 @@ li {
 
 h4 {
   margin-bottom: 0.7rem;
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 400;
   font-size: 2rem;
   line-height: 34px;
@@ -103,8 +101,6 @@ h4 {
 
 p {
   width: 25rem;
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 300;
   font-size: 1.1rem;
   line-height: 1.4rem;
@@ -114,8 +110,6 @@ p {
 ul {
   margin-top: 20px;
   max-height: 160px;
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 500;
   color: #0e2d32;
   font-size: 1.2rem;
@@ -152,7 +146,6 @@ ul {
 
   p {
     width: 30rem;
-    font-style: normal;
     font-weight: 300;
     font-size: 1.1rem;
     line-height: 1.4rem;

components/Home/News.vue

@@ -188,8 +188,6 @@ const actus = ref([
   color: #000000;
 }
 .card-text {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 16px;
   line-height: 18px;
@@ -197,8 +195,6 @@ const actus = ref([
   color: #091d20;
 }
 .card-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 16px;
@@ -252,8 +248,6 @@ const actus = ref([
   object-position: center;
 }
 .small-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   width: 12rem;
   font-size: 12px;
@@ -266,8 +260,6 @@ const actus = ref([
 
 .title {
   margin-top: 2rem;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
@@ -281,12 +273,9 @@ const actus = ref([
   margin-left: 25rem;
   margin-top: 8rem;
   top: 6rem;
-  border-radius: 2rem;
-  font-family: "Barlow";
   background: transparent;
   border: 1px solid #9edbdd;
   border-radius: 6px;
-  font-style: normal;
   font-weight: 600;
   text-transform: uppercase;
   display: flex;

components/Home/Reviews.vue

@@ -321,8 +321,6 @@ const items: Ref<Array<{ src: string }>> = ref([
       .v-card-title {
         margin-left: 1rem;
         font-weight: 500;
-        font-family: "Barlow", serif;
-        font-style: normal;
         font-size: 1.4rem;
         color: #9edbdd;
       }

components/Home/Solution.vue

@@ -3,7 +3,7 @@ Section "Solutions" de la page d'accueil
 -->
 
 <template>
-  <LayoutContainer :overflow="false">
+  <LayoutContainer>
 
     <div class="d-flex justify-center align-center flex-column">
       <v-icon
@@ -19,7 +19,7 @@ Section "Solutions" de la page d'accueil
       Trouvez la solution faites pour vous
     </h3>
 
-    <v-row class="solutions">
+    <v-row class="solutions center-90">
       <v-col
         v-for="(solution, index) in solutions"
         :key="index"
@@ -189,9 +189,6 @@ h3 {
 }
 
 .v-row.solutions {
-  width: 90%;
-  margin-right: auto;
-  margin-left: auto;
 
   small {
     font-weight: 600;
@@ -217,12 +214,10 @@ h3 {
   }
 
   p {
-    font-family: "Barlow", serif;
     font-size: 1.3rem;
     line-height: 1.5rem;
     margin-top: 1rem;
     color: #eff9fb;
-    font-style: normal;
     width: 20rem;
   }
 
@@ -313,11 +308,9 @@ h3 {
     }
 
     li {
-      font-family: "Barlow", serif;
       font-size: 0.8rem;
       width: 10rem;
       margin-left: 1rem;
-      font-style: normal;
       line-height: 18px;
       color: #091d20;
     }

components/JoinUs/Banner.vue

@@ -1,52 +0,0 @@
-<template>
-  <LayoutContainer>
-    <LayoutUITitlePage>
-      Nous rejoindre
-    </LayoutUITitlePage>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="/images/join/join.jpg"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-
-    <h3 id="join-us-anchor" class="mt-6">
-      Opentalent, où l'innovation & la passion se rencontrent !
-    </h3>
-
-    <span class="subtitle">
-      Découvrez nos opportunités et rejoignez-nous dans cette aventure
-      passionnante.
-    </span>
-  </LayoutContainer>
-</template>
-
-<script setup>
-</script>
-
-<style scoped>
-
-h3, .subtitle {
-  font-family: "Barlow", serif;
-  line-height: 2.5rem;
-  text-align: center;
-}
-
-
-h3 {
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.5rem;
-}
-
-.subtitle {
-  display: block;
-  font-weight: 300;
-  font-size: 1.5rem;
-  width: 100%;
-}
-
-</style>

components/JoinUs/MissionDetail.vue

@@ -1,14 +1,5 @@
 <template>
   <LayoutContainer>
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="/images/actu/pub.png"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-
     <div class="job-section">
       <v-row class="mb-6">
         <v-col class="d-flex align-items-center">
@@ -74,7 +65,7 @@
           <v-row>
             <p
               v-html="job.content"
-              class="custom-row description mb-12"
+              class="center-90 description mb-12"
             />
           </v-row>
 
@@ -87,7 +78,7 @@
             </v-btn>
           </v-row>
 
-          <v-row class="d-flex justify-space-between custom-row">
+          <v-row class="d-flex justify-space-between center-90">
             <p>
               MOTS CLÉS
             </p>
@@ -96,7 +87,7 @@
             </div>
           </v-row>
 
-          <v-row class="d-flex justify-space-between mb-8 custom-row">
+          <v-row class="d-flex justify-space-between mb-8 center-90">
             <p class="key-word mt-3">
               <!-- TODO: remplacer par la bonne prop -->
               ROCK CONCERT FESTIVAL
@@ -134,12 +125,6 @@ const formatDate = (date: string) => {
 </script>
 
 <style scoped lang="scss">
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .progress {
   margin: 32px auto 128px auto;
 }
@@ -160,8 +145,6 @@ const formatDate = (date: string) => {
 
     div {
       margin: 12px 0;
-      font-family: "Barlow", serif;
-      font-style: normal;
       font-weight: 500;
       font-size: 25px;
       line-height: 18px;
@@ -171,9 +154,7 @@ const formatDate = (date: string) => {
   .description {
     color: #0e2d32;
     text-align: justify;
-    font-family: "Barlow", serif;
     font-size: 1.875rem;
-    font-style: normal;
     font-weight: 500;
     line-height: 2.125rem;
   }
@@ -193,10 +174,8 @@ const formatDate = (date: string) => {
   padding: 25px 28px;
   align-items: center;
   gap: 9px;
-  font-family: "Barlow", serif;
   font-size: 0.9rem;
   border-radius: 5px;
-  font-style: normal;
   font-weight: 700;
   line-height: 15px;
   letter-spacing: 1.3px;

components/JoinUs/Missions.vue

@@ -235,8 +235,6 @@ const sendApplication = () => {
     padding: 10px 10px 10px 1px;
 
     .title {
-      font-family: "Barlow",serif;
-      font-style: normal;
       font-weight: 600;
       font-size: 1.5rem;
       line-height: 39px;
@@ -305,8 +303,6 @@ const sendApplication = () => {
 }
 
 .v-dialog {
-  font-family: Barlow, serif;
-
   .btn-more {
     width: 128px;
   }

components/Layout/Container.vue

@@ -1,33 +1,18 @@
 <template>
   <v-container class="container">
     <v-row justify="center" align="center">
-      <v-col cols="12" sm="12" md="12">
+      <v-col cols="12">
         <slot />
       </v-col>
     </v-row>
   </v-container>
 </template>
 
-<script setup>
-import { ref } from "vue";
-
-const props = defineProps({
-  overflow: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const overflow = ref(props.overflow);
-</script>
-
-<style scoped>
+<style scoped lang="scss">
 .container {
   position: relative;
   max-width: 100%;
-  min-width: 100; 
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
-
 </style>

components/Layout/FAQ.vue

@@ -88,13 +88,11 @@
 }
 
 h3 {
-  font-family: "Barlow", serif;
   margin-left: 3rem;
   margin-right: 15rem;
   width: 28rem;
   margin-bottom: 3rem;
   font-size: 30px;
-  font-style: normal;
   font-weight: 400;
 }
 
@@ -103,8 +101,6 @@ h3 {
   height: 3.5rem;
   margin-left: 3rem;
   border-radius: 6px;
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 500;
   font-size: 0.8rem;
   z-index: 1;
@@ -119,9 +115,7 @@ h3 {
     height: 5.5rem;
     margin-left: 3rem;
     border-radius: 6px;
-    font-family: "Barlow", serif;
     background: transparent;
-    font-style: normal;
     font-weight: 500;
     font-size: 0.8rem;
     line-height: 1rem;
@@ -144,8 +138,6 @@ h3 {
     }
 
     p {
-      font-family: "Barlow", serif;
-      font-style: normal;
       font-weight: 500;
       font-size: 16px;
       line-height: 26px;

components/Layout/Footer/Footer.vue

@@ -326,8 +326,6 @@ const onIntersect = (isIntersecting) => {
 }
 
 .container {
-  font-family: "Barlow", serif;
-  font-style: normal;
   padding-top: 32px;
 }
 
@@ -394,8 +392,6 @@ a {
     flex-direction: column;
     justify-content: space-between;
     text-align: left;
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 700;
     font-size: 1.5rem;
     cursor: pointer;
@@ -407,8 +403,6 @@ a {
     }
 
     a {
-      font-family: "Barlow", serif;
-      font-style: normal;
       font-weight: 300;
       font-size: 1.3rem;
       line-height: 20px;

components/Layout/Footer/Solutions.vue

@@ -141,8 +141,6 @@ const props = defineProps({
   border: 1px solid #0e2d32;
   border-radius: 3rem;
   text-transform: uppercase;
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 500;
   font-size: 10px;
   line-height: 16px;
@@ -162,8 +160,6 @@ const props = defineProps({
 }
 
 .solution-title {
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 1.5rem;

components/Layout/Navigation.vue

@@ -219,8 +219,6 @@ const withAnimation = (callback: () => void) => {
 }
 
 .menuItem, .menuItem .v-list-item-title {
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 500;
   font-size: 0.9rem;
   letter-spacing: 0.1em;

components/Layout/Navigation/Topbar.vue

@@ -32,8 +32,6 @@ const { mdAndDown } = useDisplay();
   align-items: center;
   height: 54px;
   background-color: #dbdbdb;
-  font-family: "Barlow", serif;
-  font-style: normal;
   font-weight: 700;
   font-size: 0.7rem;
 }

components/Logiciels/Artist/Abonnement.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="subscription">
     <LayoutContainer>
-      <v-row class="mt-12">
+      <v-row class="mt-12 center-90">
         <v-col cols="4">
           <LayoutUISubTitle>
             S'abonner dès maintenant
@@ -93,19 +93,11 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.v-container {
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .subscription-steps ol {
   list-style-type: decimal;
   padding-left: 2rem;
   color: #000;
-  font-family: Barlow, serif;
   font-size: 16px;
-  font-style: normal;
   font-weight: 300;
   line-height: 20px;
   margin-left: 3rem;
@@ -135,9 +127,7 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   justify-content: center;
   color: var(--on-secondary-color);
   text-align: center;
-  font-family: "Barlow", serif;
   font-size: 1rem;
-  font-style: normal;
   font-weight: 300;
   line-height: 18px;
 }
@@ -158,7 +148,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 }
 
 h5 {
-  font-family: "Barlow", serif;
   color: #091d20;
   margin-bottom: 4rem;
   font-size: 42px;
@@ -194,9 +183,7 @@ h5 {
   margin-bottom: 2rem;
   color: #071b1f;
   width: 40rem;
-  font-family: Barlow, serif;
   font-size: 34px;
-  font-style: normal;
   font-weight: 400;
   line-height: 38px;
 }

components/Logiciels/Artist/Banner.vue

@@ -1,14 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          image-src="/images/logiciels/artist/banner.jpg"
-          image-alt="banner artist"
-          square-text="Orchestres, chorales, compagnies de danse, de cirque et de théâtre"
-          logo-src="/images/logo/logiciels/Artist-noir.png"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>

components/Logiciels/Artist/Formations.vue

@@ -3,7 +3,7 @@
     <LayoutContainer>
       <div class="alt-theme">
         <v-container>
-          <v-row class="custom-row">
+          <v-row class="center-90">
             <LayoutUISubTitle class="mt-12" >
               Pour aller plus loin
             </LayoutUISubTitle>
@@ -45,7 +45,7 @@
       TODO: Déplacer le "Quelques chiffres" dans un composant à part,
       voir comment gérer ça avec les anchored sections
       -->
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle class="mb-12">
           Quelques chiffres
         </LayoutUISubTitle>
@@ -113,12 +113,6 @@ const items: Ref<Array<{ src: string }>> = ref([
   color: var(--on-primary-color-alt);
 }
 
-.custom-row {
-  width: 90%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
 .formation {
   .v-img {
     width: 600px;

components/Logiciels/Manager/Banner.vue

@@ -1,33 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <CommonBannerTitle
-        :leftText="'School'"
-        :title="'Opentalent Manager'"
-        :rightText="'Artist'"
-      />
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          :imageSrc="'/images/logiciels/manager/banner-manager.png'"
-          imageAlt="'line'"
-          :squareText="'Fédérations, confédérations et collectivités'"
-          :logoSrc="'/images/logo/logiciels/Manager-noir.png'"
-          :squareColor="'#d8050b'"
-          :blueSquareColor="'#FFF'"
-          :textColor="'#FFF'"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<style scoped>
-
-
-:deep().cover-image {
-  object-position: center 40% !important;
-}
-</style>

components/Logiciels/Manager/Formation.vue

@@ -149,8 +149,6 @@ const items = ref([
 
 .formation {
   .v-btn {
-    font-family: "Barlow", serif;
-    font-style: normal;
     width: 30rem;
     height: 4rem;
     font-weight: 500;

components/Logiciels/Manager/Network.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="network">
     <LayoutContainer>
-      <v-row class="mt-12">
+      <v-row class="mt-12  center-90">
         <LayoutUISubTitle>
           Un réseau pyramidal
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <v-col cols="12" lg="6" md="6">
           <LayoutUITitle>
             Opentalent Manager, un logiciel adapté à chacun
@@ -34,12 +34,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 @media (min-width: 2000px) {
   .v-row {
     width: 70%;
@@ -48,7 +42,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 .pyramide-details {
   font-size: 2.125rem;
-  font-style: normal;
   font-weight: 400;
   line-height: 2.375rem;
   width: 40rem;

components/Logiciels/Manager/Solutions.vue

@@ -125,9 +125,6 @@ const hideSchoolRow = route.path.includes("opentalent_school");
   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;
@@ -147,8 +144,6 @@ const hideSchoolRow = route.path.includes("opentalent_school");
 }
 
 .solution-name {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1.5rem;
   line-height: 1.5rem;
@@ -161,8 +156,6 @@ const hideSchoolRow = route.path.includes("opentalent_school");
   align-items: center;
 }
 .solution-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 1.5rem;

components/Logiciels/School/Banner.vue

@@ -1,36 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <CommonBannerTitle
-        title="Opentalent School"
-        left-text="Artist"
-        right-text="Manager"
-      />
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          image-src="/images/solutions/school.jpg"
-          image-alt="line"
-          square-text="École de musique, d'art, de danse, de cirque, conservatoires et MJC"
-          logo-src="/images/logo/logiciels/School-Blanc.png"
-          :logo-alt-theme="true"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<style scoped lang="scss">
-.v-container {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-:deep(.cover-image) {
-  object-position: center 40% !important;
-}
-</style>
-<script setup lang="ts">
-</script>

components/Logiciels/School/Contact.vue

@@ -38,7 +38,7 @@
       </v-row>
 
       <!-- Section "Adhérent CMF" -->
-      <v-row class="custom-row" >
+      <v-row class="center-90" >
         <v-col cols="6" >
           <LayoutUISubTitle>
             Adhérents CMF
@@ -88,11 +88,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped>
-.custom-row {
-  width: 90%;
-  margin: auto;
-}
-
 .help-img {
   width: 100%;
   height: 90%;

components/Logiciels/School/Formations.vue

@@ -159,8 +159,6 @@ const items: Array<{ src: string }> = [
 
 .formation {
   .v-btn {
-    font-family: "Barlow", serif;
-    font-style: normal;
     width: 30rem;
     height: 4rem;
     font-weight: 500;

components/Logiciels/School/Solutions.vue

@@ -134,9 +134,6 @@
   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;
@@ -154,8 +151,6 @@
 }
 
 .solution-name {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1.5rem;
   line-height: 1.5rem;
@@ -168,8 +163,6 @@
   align-items: center;
 }
 .solution-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 1.5rem;

components/Common/Banner/BannerTitle.vue → components/Logiciels/Title.vue

@@ -4,43 +4,24 @@
     <div class="container-title">
       <v-col cols="3" class="lateral-text">
         <span>
-          {{ leftText }}
+          <slot name="left-text"/>
         </span>
       </v-col>
       <v-col cols="6">
         <h1>
-          {{ title }}
+          <slot />
         </h1>
       </v-col>
       <v-col cols="3" class="lateral-text">
         <span>
-          {{ rightText }}
+          <slot name="right-text" />
         </span>
       </v-col>
     </div>
   </LayoutContainer>
 </template>
 
-<script setup lang="ts">
-const props = defineProps({
-  title: {
-    type: String,
-    required: true
-  },
-  leftText: {
-    type: String,
-    required: false,
-    default: ""
-  },
-  rightText: {
-    type: String,
-    required: false,
-    default: ""
-  },
-});
-</script>
-
-<style scoped>
+<style scoped lang="scss">
 .container-title {
   display: flex;
   justify-content: space-around;
@@ -66,8 +47,6 @@ h1 {
   opacity: 0.08;
   margin-top: 2rem;
   margin-bottom: 2rem;
-  font-style: normal;
-
 }
 
 .lateral-text:first-child {

components/News/Details.vue

@@ -10,7 +10,7 @@
     </v-row>
 
     <div class="news-section">
-      <v-row class="mb-6 custom-row">
+      <v-row class="mb-6 center-90">
         <v-col class="d-flex align-items-center">
           <v-btn
             to="/actualites"
@@ -34,7 +34,7 @@
         </div>
 
         <div v-else-if="newsItem !== null" class="news">
-          <v-row class="custom-row">
+          <v-row class="center-90">
             <v-col cols="6">
               <v-img :src="getImageUrl(newsItem.attachment)"/>
             </v-col>
@@ -46,7 +46,7 @@
             </v-col>
           </v-row>
 
-          <v-row class="custom-row">
+          <v-row class="center-90">
             <p
               v-html="newsItem.bodyText"
               class="description"
@@ -59,7 +59,7 @@
             </v-btn>
           </v-row>
 
-          <v-row class="d-flex justify-space-between custom-row">
+          <v-row class="d-flex justify-space-between center-90">
             <p>
               MOTS CLÉS
             </p>
@@ -68,7 +68,7 @@
             </div>
           </v-row>
 
-          <v-row class="d-flex justify-space-between mb-8 custom-row">
+          <v-row class="d-flex justify-space-between mb-8 center-90">
             <p class="key-word mt-3">
               <!-- TODO: remplacer par la bonne prop -->
               ROCK CONCERT FESTIVAL
@@ -108,12 +108,6 @@ const getImageUrl = (attachment: string): string | null => {
 </script>
 
 <style scoped>
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .news {
   .v-img {
     width: 80%;
@@ -125,18 +119,14 @@ const getImageUrl = (attachment: string): string | null => {
     margin-top: 11rem;
     text-decoration: none;
     text-transform: uppercase;
-    font-family: Barlow, serif;
     font-size: 36px;
-    font-style: normal;
     font-weight: 600;
   }
 
   .description {
     color: #0e2d32;
     text-align: justify;
-    font-family: "Barlow", serif;
     font-size: 30px;
-    font-style: normal;
     font-weight: 500;
     line-height: 34px;
     margin-left: 3.5rem;
@@ -152,10 +142,8 @@ const getImageUrl = (attachment: string): string | null => {
     padding: 25px 28px;
     align-items: center;
     gap: 9px;
-    font-family: Barlow, serif;
     font-size: 0.9rem;
     border-radius: 5px;
-    font-style: normal;
     font-weight: 700;
     line-height: 15px;
     letter-spacing: 1.3px;
@@ -167,9 +155,7 @@ const getImageUrl = (attachment: string): string | null => {
 .back-button {
   text-decoration: none;
   color: #000000;
-  font-family: Barlow, serif;
   font-size: 0.9rem;
-  font-style: normal;
   font-weight: 700;
   line-height: 15px;
   letter-spacing: 1.8px;
@@ -178,9 +164,7 @@ const getImageUrl = (attachment: string): string | null => {
 
 .key-word {
   color: #000;
-  font-family: Barlow, serif;
   font-size: 20px;
-  font-style: normal;
   font-weight: 500;
   line-height: 24px;
 }

components/News/List.vue

@@ -205,9 +205,7 @@ h1 {
   color: #d1cdc7; /* TODO: pqoi cette couleur ici? */
   margin-left: 3rem;
   margin-top: 2rem;
-  font-family: Barlow, serif;
   font-size: 4rem;
-  font-style: normal;
   font-weight: 600;
   line-height: 42px;
 }
@@ -247,9 +245,7 @@ h1 {
 
     .v-card-title {
       color: #fff;
-      font-family: Barlow, serif;
       font-size: 36px;
-      font-style: normal;
       font-weight: 600;
       line-height: 39px;
     }
@@ -261,9 +257,7 @@ h1 {
     .v-card-text {
       td {
         color: #fff;
-        font-family: Barlow, serif;
         font-size: 22px;
-        font-style: normal;
         font-weight: 500;
         line-height: 26px;
         margin-left: 1rem;
@@ -278,10 +272,8 @@ h1 {
       padding: 25px 28px;
       align-items: center;
       gap: 9px;
-      font-family: Barlow, serif;
       font-size: 0.9rem;
       border-radius: 5px;
-      font-style: normal;
       font-weight: 700;
       line-height: 15px;
       letter-spacing: 1.3px;

components/Webinaire/Banner.vue

@@ -1,18 +0,0 @@
-<template>
-  <LayoutContainer>
-    <LayoutUITitlePage>
-      Webinaires
-      <template #subtitle>Partez à la découverte de vos logiciels Opentalent.</template>
-    </LayoutUITitlePage>
-
-    <v-row>
-      <v-col cols="12">
-        <CommonBanner
-          imageSrc="images/banner/Visuel_page_Webinaires.png"
-          imageAlt="banner"
-        />
-      </v-col>
-    </v-row>
-
-  </LayoutContainer>
-</template>

components/Webinaire/Catalogue.vue

@@ -1,13 +1,13 @@
 <template>
   <LayoutContainer>
     <div class="grey-container">
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle>
           Des webinaires pour tous
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUITitlePage>
           SIMPLIFIEZ LA GESTION ET LA COMMUNICATION DE VOTRE STRUCTURE CULTURELLE
           <template #subtitle>
@@ -16,7 +16,7 @@
         </LayoutUITitlePage>
       </v-row>
 
-      <v-row class="custom-row catalog">
+      <v-row class="center-90 catalog">
         <v-col
           v-for="(course, index) in courses"
           :key="index"
@@ -271,12 +271,6 @@ const closeModal = () => {
 </script>
 
 <style scoped lang="scss">
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .v-card {
   border: none !important;
   box-shadow: none !important;
@@ -285,9 +279,6 @@ const closeModal = () => {
 
 .catalog {
   padding: 2rem;
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
 
   .title-card-container {
     display: flex;
@@ -314,8 +305,6 @@ const closeModal = () => {
   }
 
   .details-card {
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 300;
     font-size: 1rem;
     line-height: 1rem;
@@ -336,8 +325,6 @@ const closeModal = () => {
     height: 11rem;
 
     h6 {
-      font-family: "Barlow", serif;
-      font-style: normal;
       font-weight: 500;
       font-size: 16px;
       line-height: 20px;
@@ -346,8 +333,6 @@ const closeModal = () => {
 
     ul {
       margin-top: 0.5rem;
-      font-family: "Barlow", serif;
-      font-style: normal;
       font-weight: 300;
       font-size: 14px;
       line-height: 18px;
@@ -355,7 +340,6 @@ const closeModal = () => {
   }
 
   .v-chip {
-    font-family: "Barlow", serif;
     justify-content: center;
     align-items: center;
     display: flex;
@@ -364,7 +348,6 @@ const closeModal = () => {
     line-height: 18px;
     font-weight: 500;
     font-size: 14px;
-    font-style: normal;
   }
 
   .badge-time {
@@ -394,8 +377,6 @@ const closeModal = () => {
   }
 
   h4 {
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 600;
     font-size: 2rem;
     line-height: 18px;
@@ -405,8 +386,6 @@ const closeModal = () => {
   .close-button {
     background-color: #e34461;
     color: #fff;
-    font-family: "Barlow", serif;
-    font-style: normal;
     font-weight: 500;
     font-size: 14px;
     line-height: 18px;

components/Webinaire/FAQ.vue

@@ -3,7 +3,7 @@ Foire aux questions
 -->
 <template>
   <LayoutContainer>
-    <v-row>
+    <v-row class="center-90">
       <LayoutUISubTitle>
         Des questions ?
       </LayoutUISubTitle>
@@ -85,13 +85,6 @@ function isOpen(index: number) {
 
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
 .faq {
   padding: 1rem;
   width: 90%;

pages/formations.vue

@@ -1,7 +1,21 @@
 <template>
   <LayoutNavigation />
 
-  <FormationBanner />
+  <LayoutUITitlePage>
+    Formation
+    <template #subtitle>
+      Prise en main ou piqûre de rappel,on est toujours à vos côtés.
+    </template>
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="images/formation/banner.jpg"
+    imageAlt="banner"
+  >
+    <template #watermark>
+      Et si vous passiez rapidement à la vitesse supérieure...
+    </template>
+  </CommonBanner>
 
   <CommonMenuScroll :menus="menus" class="mb-6" />
 

pages/index.vue

@@ -3,11 +3,10 @@
 
   <CommonStickyMenu />
 
-  <LayoutUITitlePage
-    title="LOGICIELS CULTURELS"
-    subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE"
-    :class="mdAndDown ? 'mt-12' : ''"
-  />
+  <LayoutUITitlePage :class="mdAndDown ? 'mt-12' : ''">
+    LOGICIELS CULTURELS
+    <template #subtitle>UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</template>
+  </LayoutUITitlePage>
 
   <HomeCaroussel v-if="mdAndUp"/>
 

pages/nous-rejoindre/[id].vue

@@ -1,6 +1,11 @@
 <template>
   <LayoutNavigation />
 
+  <CommonBanner
+    imageSrc="/images/actu/pub.png"
+    imageAlt="banner"
+  />
+
   <JoinUsMissionDetail />
 
   <LayoutFooterPrefooter />

pages/nous-rejoindre/index.vue

@@ -1,7 +1,23 @@
 <template>
   <LayoutNavigation />
 
-  <JoinUsBanner />
+  <LayoutUITitlePage>
+    Nous rejoindre
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="/images/join/join.jpg"
+    imageAlt="banner"
+  />
+
+  <h3 id="join-us-anchor" class="mt-6">
+    Opentalent, où l'innovation & la passion se rencontrent !
+  </h3>
+
+  <span class="subtitle">
+    Découvrez nos opportunités et rejoignez-nous dans cette aventure
+    passionnante.
+  </span>
 
   <JoinUsMissions />
 
@@ -9,3 +25,22 @@
 
   <LayoutFooter />
 </template>
+
+<style scoped lang="scss">
+h3, .subtitle {
+  line-height: 2.5rem;
+  text-align: center;
+}
+
+h3 {
+  font-weight: 600;
+  font-size: 1.5rem;
+}
+
+.subtitle {
+  display: block;
+  font-weight: 300;
+  font-size: 1.5rem;
+  width: 100%;
+}
+</style>

pages/opentalent_artist.vue

@@ -4,14 +4,19 @@
 
     <CommonStickyMenu :actions="stickyMenuActions" />
 
-    <CommonBannerTitle
-      title="Opentalent Artist"
-      leftText="School"
-      rightText="Manager"
+    <LogicielsTitle>
+      <template #left-text>School</template>
+      Opentalent Artist
+      <template #right-text>Manager</template>
+    </LogicielsTitle>
+
+    <CommonBanner
+      image-src="/images/logiciels/artist/banner.jpg"
+      image-alt="banner artist"
+      square-text="Orchestres, chorales, compagnies de danse, de cirque et de théâtre"
+      logo-src="/images/logo/logiciels/Artist-noir.png"
     />
 
-    <LogicielsArtistBanner />
-
     <CommonMenuScroll :menus="menus" class="mb-6" />
 
     <LogicielsArtistPresentation />
@@ -73,7 +78,7 @@ const stickyMenuActions: Array<StickyMenuAction> = [
 ];
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .theme-artist {
   --primary-color: #ffffff;
   --secondary-color: #fef3ce;

pages/opentalent_manager.vue

@@ -2,7 +2,26 @@
   <div class="theme-manager">
     <LayoutNavigation />
 
-    <LogicielsManagerBanner />
+    <CommonBannerTitle
+      leftText="School"
+      title="Opentalent Manager"
+      rightText="Artist"
+    />
+    <LogicielsTitle>
+      <template #left-text>School</template>
+      Opentalent Manager
+      <template #right-text>Artist</template>
+    </LogicielsTitle>
+
+    <CommonBanner
+      imageSrc="/images/logiciels/manager/banner-manager.png"
+      imageAlt="line"
+      squareText="Fédérations, confédérations et collectivités"
+      logoSrc="/images/logo/logiciels/Manager-noir.png"
+      squareColor="#d8050b"
+      blueSquareColor="#FFF"
+      textColor="#FFF"
+    /> <!-- TODO: theming -->
 
     <CommonMenuScroll :menus="menus" class="mb-6" />
 

pages/opentalent_school.vue

@@ -2,7 +2,19 @@
   <div class="theme-school">
     <LayoutNavigation />
 
-    <LogicielsSchoolBanner />
+    <LogicielsTitle>
+      <template #left-text>Artist</template>
+      Opentalent School
+      <template #right-text>Manager</template>
+    </LogicielsTitle>
+
+    <CommonBanner
+      image-src="/images/solutions/school.jpg"
+      image-alt="line"
+      square-text="École de musique, d'art, de danse, de cirque, conservatoires et MJC"
+      logo-src="/images/logo/logiciels/School-Blanc.png"
+      :logo-alt-theme="true"
+    />
 
     <CommonMenuScroll :menus="menus" class="mb-6" />
 
@@ -88,5 +100,7 @@ const stickyMenuActions: Array<StickyMenuAction> = [
   --on-primary-color: #0e2d32;
   --primary-color-alt: #262626;
   --on-primary-color-alt: #c3e5e7;
+
+  --banner-center-image: 40%;
 }
 </style>

pages/qui-sommes-nous.vue

@@ -5,7 +5,14 @@
 <template>
   <LayoutNavigation />
 
-  <AboutBanner />
+  <LayoutUITitlePage class="mb-12">
+    Qui sommes-nous ?
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="/images/banner/about_opentalent.png"
+    imageAlt="banner"
+  />
 
   <CommonMenuScroll :menus="menus" class="mb-6" />
 

pages/webinaires.vue

@@ -1,12 +1,17 @@
-<!--
-  Page FAQ
--->
 <template>
   <LayoutNavigation />
 
   <CommonStickyMenu />
 
-  <WebinaireBanner />
+  <LayoutUITitlePage>
+    Webinaires
+    <template #subtitle>Partez à la découverte de vos logiciels Opentalent.</template>
+  </LayoutUITitlePage>
+
+  <CommonBanner
+    imageSrc="images/banner/Visuel_page_Webinaires.png"
+    imageAlt="banner"
+  />
 
   <WebinaireCatalogue />