refactor "about" page

assets/style/theme.scss

@@ -16,6 +16,10 @@ body {
 
   --alt-theme: #0e2d32;
   --on-alt-theme: #ffffff;
+
+  --artist-color: #FAC20A;
+  --school-color: #2093be;
+  --manager-color: #D8050B;
 }
 
 body {

components/About/Agenda.vue

@@ -1,23 +1,31 @@
 <template>
-    <LayoutContainer id="agenda" class="mb-12" >
-      <v-row class="custom-row align-center">
-        <v-col cols="4">
-          <h2 class="title">L'agenda Opentalent</h2>
+  <AnchoredSection id="agenda">
+    <LayoutContainer class="mb-12" >
+      <v-row class="custom-row align-center my-6">
+        <v-col cols="4" class="align-center">
+          <LayoutUITitle>
+            L'agenda Opentalent
+          </LayoutUITitle>
         </v-col>
 
         <v-col cols="4">
-          <div class="d-flex justify-center align-center">
-            <div class="carousel-button" @click="goPrevious">
-              <i class="fas fa-chevron-left" />
-            </div>
-            <div class="carousel-button" @click="goNext">
-              <i class="fas fa-chevron-right" />
-            </div>
+          <!-- Factoriser les controles du carousel dans un component -->
+          <div class="carousel-controls">
+            <v-btn
+              icon="fas fa-chevron-left"
+              @click="goPrevious"
+            />
+            <v-btn
+              icon="fas fa-chevron-right"
+              @click="goNext"
+            />
           </div>
         </v-col>
 
-        <v-col cols="4">
-          <v-btn class="btn-news" text> VOIR TOUS LES EVENEMENTS </v-btn>
+        <v-col cols="4" class="d-flex flex-row flex-1 justify-end align-center">
+          <v-btn class="btn-news" text>
+            Voir tous les évènements
+          </v-btn>
         </v-col>
       </v-row>
 
@@ -28,18 +36,19 @@
       </v-row>
 
       <v-row class="custom-row">
-        <v-col cols="12" lg="12" md="12">
-          <Carousel ref="carousel" :items-to-show="1" :items-to-scroll="2">
+        <v-col cols="12">
+          <Carousel
+            ref="carousel"
+            :items-to-show="3"
+            :items-to-scroll="2"
+          >
             <Slide
               v-for="(event, eventIndex) in events"
               :key="eventIndex"
-              class="slide-card"
+              class="card"
             >
               <v-card>
-                <div
-                  class="card-img"
-                  :style="{ backgroundImage: 'url(' + event.img + ')' }"
-                ></div>
+                <v-img :src="event.img" cover />
 
                 <v-card-title>
                   {{ event.title }}
@@ -49,32 +58,38 @@
                   {{ event.localisation }}
                 </v-card-text>
 
-                <div class="card-footer">
-                  <v-chip-group active-class="primary--text" column>
+                <footer>
+                  <v-chip-group column>
                     <v-chip
                       v-for="(tag, tagIndex) in event.tags"
                       :key="tagIndex"
-                      class="chip-custom"
                       :color="tagColor(tag)"
                       label
                     >
-                      <span :class="tagTextColor(tag)">{{ tag }}</span>
+                      <span
+                        :class="tagTextColor(tag)"
+                      >
+                        {{ tag }}
+                      </span>
                     </v-chip>
                   </v-chip-group>
-                </div>
+                </footer>
               </v-card>
             </Slide>
           </Carousel>
         </v-col>
       </v-row>
     </LayoutContainer>
+  </AnchoredSection>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
-const tagColor = (tag) => {
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Event } from "~/types/interface";
+
+const tagColor = (tag: string) => {
   switch (tag) {
     case "Payant":
       return "red";
@@ -85,7 +100,7 @@ const tagColor = (tag) => {
   }
 };
 
-const tagTextColor = (tag) => {
+const tagTextColor = (tag: string) => {
   switch (tag) {
     case "Payant":
       return "red--text";
@@ -95,7 +110,8 @@ const tagTextColor = (tag) => {
       return "black--text";
   }
 };
-const events = ref([
+
+const events: Array<Event> = [
   {
     rdv: "20h00",
     title: "LA NUIT DES RÊVES  ",
@@ -136,60 +152,55 @@ const events = ref([
     img: "/images/agenda/agenda1.jpg",
     tags: ["Festival", "Musique", "Tout public", "Payant"],
   },
-]);
+];
 
-let carousel;
+const carousel: Ref<typeof Carousel | null> = ref(null);
 
-const goPrevious = () => carousel.prev();
-const goNext = () => carousel.next();
+const goPrevious = () => carousel.value!.prev();
+const goNext = () => carousel.value!.next();
 </script>
 
 <style scoped>
-
 .v-container{
   padding: 0 !important;
 }
 
 .container{
-  background: #F8F8F8 
-}
-.card-footer{
-  text-align: left !important;
-}
-.v-card {
-  box-shadow: none !important;
-  margin-right: 1rem;
-  text-align: left;
-}
-.card-img {
-  width: 100%;
-  height: 300px;
-  background-size: cover;
-  background-position: center;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
+  background: #F8F8F8
 }
 
-.green--text {
-  color: green;
-}
 .custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.red--text {
-  color: red;
-}
-.black--text {
-  color: black;
+
+.carousel-controls {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .v-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 60px;
+    background-color: transparent;
+    border: 2px solid;
+    cursor: pointer;
+    margin-right: 1rem;
+    margin-bottom: 2rem;
+    border-radius: 0;
+  }
 }
+
 .btn-news {
-  color: #9edbdd;
-  border-radius: 2rem;
-  font-family: "Barlow";
+  color: var(--primary-color);
+  font-family: "Barlow", serif;
   background: transparent;
-  border: 1px solid #9edbdd;
+  border: 1px solid var(--primary-color);
   border-radius: 6px;
   font-style: normal;
   font-weight: 600;
@@ -201,36 +212,41 @@ const goNext = () => carousel.next();
   font-size: 10px;
   line-height: 15px;
 }
-.chip-custom {
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  text-align: center;
-}
 
-.carousel-button i {
-  color: #000000;
-}
+.card {
+  .v-card {
+    box-shadow: none !important;
+    margin-right: 1rem;
+    text-align: left;
+  }
 
-.card-date {
-  font-size: 0.8em;
-  color: #888;
-  margin-left: 1rem;
-}
+  .v-img {
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    width: 100%;
+    height: 300px;
 
-.card-footer {
-  display: flex;
-}
+    img {
+      background-position: center;
+    }
+  }
 
-.title,
-.carousel-button,
-.btn-news {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  footer{
+    display: flex;
+    text-align: left !important;
+
+    .v-chip {
+      color: white;
+      border: 1px solid #0e2d32;
+      border-radius: 3rem;
+      text-transform: uppercase;
+      display: flex;
+      align-items: center;
+      text-align: center;
+    }
+  }
 }
+
 .agenda-details {
   font-weight: 300;
   font-size: 16px;
@@ -240,23 +256,17 @@ const goNext = () => carousel.next();
   margin-bottom: 3rem;
   width: 15rem;
 }
-.title {
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 2rem;
-  color: #071b1f;
+
+/* -- Classes dynamiques pour les tags --*/
+.black--text {
+  color: black;
 }
 
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 60px;
-  height: 60px;
-  background-color: transparent;
-  border: 2px solid #000000;
-  cursor: pointer;
-  margin-right: 1rem;
+.green--text {
+  color: green;
+}
+
+.red--text {
+  color: red;
 }
 </style>

components/About/Banner.vue

@@ -1,12 +1,14 @@
 <template>
   <LayoutContainer>
-    <LayoutUITitlePage title="Qui sommes-nous ?" />
+    <LayoutUITitlePage class="mb-12">
+      Qui sommes-nous ?
+    </LayoutUITitlePage>
 
     <v-row>
       <v-col cols="12">
         <CommonBanner
-          :imageSrc="'/images/banner/about_opentalent.png'"
-          imageAlt="'line'"
+          imageSrc="/images/banner/about_opentalent.png"
+          imageAlt="banner"
         />
       </v-col>
     </v-row>
@@ -16,8 +18,8 @@
 <script setup></script>
 
 <style scoped>
-:deep().logiciel {
-  font-family: "Barlow";
+:deep(.logiciel) {
+  font-family: "Barlow", serif;
   font-style: normal;
   font-size: 3rem;
   line-height: 85px;
@@ -25,15 +27,4 @@
   color: #000000;
   width: 100%;
 }
-
-:deep().text-left,
-:deep().text-right,
-:deep().description,
-:deep().details-square,
-:deep().logo-square {
-  display: none;
-}
-:deep().text-right {
-  display: none;
-}
 </style>

components/About/Chronologie.vue

@@ -1,119 +1,121 @@
 <template>
-  <LayoutContainer id="story" v-if="!mdAndDown">
-    <v-container >
-      <v-row class="mb-6 mt-6">
-        <v-col cols="6">
-          <LayoutUISubTitle
-            :title-color="'#fff'"
-            :titleText="'découvrez toute notre histoire'"
-            class="mb-12"
-          />
-        </v-col>
+  <AnchoredSection id="history">
+    <LayoutContainer class="alt-theme">
+      <v-container >
+        <v-row class="mb-6 mt-6">
+          <v-col cols="6">
+            <LayoutUISubTitle>
+              Découvrez toute notre histoire
+            </LayoutUISubTitle>
+          </v-col>
 
-        <v-col cols="6">
-          <div class="d-flex align-center">
-            <div class="carousel-button" @click="previousAction">
-              <i class="fas fa-chevron-left"></i>
-            </div>
-            <div class="carousel-button" @click="nextAction">
-              <i class="fas fa-chevron-right"></i>
+          <v-col cols="6">
+            <div class="carousel-controls">
+              <v-btn
+                icon="fas fa-chevron-left"
+                @click="goPrevious"
+              />
+              <v-btn
+                icon="fas fa-chevron-right"
+                @click="goNext"
+              />
             </div>
-          </div>
-        </v-col>
-      </v-row>
-    </v-container>
-    <v-row class="mb-12">
-      <v-col cols="12">
-        <Carousel
-          ref="functionCarousel"
-          :items-to-show="2"
-          :items-to-scroll="1"
-          :wrap-around="true"
-        >
-          <v-row> </v-row>
-          <Slide
-            v-for="(slide, index) in slides"
-            :key="slide.id"
-            :class="{
-              'active-slide': index === activeSlide,
-              'inactive-slide': index !== activeSlide,
-            }"
-            @click="setActiveSlide(index)"
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <v-row class="mb-12">
+        <v-col cols="12">
+          <Carousel
+            v-model="activeSlide"
+            ref="carousel"
+            :items-to-show="2"
+            :items-to-scroll="1"
+            :wrap-around="true"
           >
-            <v-row justify="center" class="carousel-row">
-              <v-col cols="4" class="carousel-col">
-                <div
-                  class="carousel__item"
-                  :style="{ backgroundImage: 'url(' + slide.imageUrl + ')' }"
-                ></div>
-              </v-col>
+            <Slide
+              v-for="(slide, index) in slides"
+              :key="slide.title"
+              :class="{'active': index === activeSlide}"
+            >
+              <v-row justify="center">
+                <v-col cols="4">
+                  <div class="image-container">
+                    <v-img :src="slide.imageUrl" cover />
+                  </div>
+                </v-col>
 
-              <v-col cols="4" class="carousel-col">
-                <div class="description-container">
-                  <h3 class="year">{{ slide.year }}</h3>
-                  <h4 class="title-slide" v-html="slide.title"></h4>
-                  <p class="description mb-6" v-html="slide.description"></p>
-                </div>
-              </v-col>
-              <div class="timeline-container">
-                <div v-if="slide.year" class="timeline">
+                <v-col cols="4">
+                  <div class="description-container">
+                    <h3>
+                      {{ slide.year }}
+                    </h3>
+
+                    <h4>
+                      {{ slide.title }}
+                    </h4>
+
+                    <p class="mb-6">
+                      {{ slide.description }}
+                    </p>
+                  </div>
+                </v-col>
+
+                <div class="timeline-container">
                   <div
-                    class="timeline-point"
-                    :style="{
-                      left: calculateTimelinePosition(slide.year) + '%',
-                    }"
+                    v-if="slide.year"
+                    class="timeline"
                   >
-                    <p
-                      class="timeline-year"
-                      style="color: white; font-weight: bold"
+                    <div
+                      class="timeline-point"
+                      :style="{
+                        left: computePositionOnTimeline(slide.year) + '%',
+                      }"
                     >
-                      {{ slide.year }}
-                    </p>
+                      <p class="timeline-year">
+                        {{ slide.year }}
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </v-row>
-          </Slide>
-        </Carousel>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+              </v-row>
+            </Slide>
+          </Carousel>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useDisplay } from "vuetify";
-import { Carousel, Navigation, Slide } from "vue3-carousel";
+import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
-const functionCarousel = ref(null);
-const activeSlide = ref(0);
-const { smAndDown, mdAndDown } = useDisplay();
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { ChronologyItem } from "~/types/interface";
 
-const setActiveSlide = (index) => {
-  activeSlide.value = index;
-};
-const nextAction = () => {
-  functionCarousel.value.next();
-  activeSlide.value = activeSlide.value + 1;
-};
+const activeSlide: Ref<number> = ref(0);
 
-const previousAction = () => {
-  functionCarousel.value.prev();
-  activeSlide.value = activeSlide.value - 1;
-};
+const { mdAndDown } = useDisplay();
+
+const carousel: Ref<typeof Carousel | null> = ref(null);
+
+const goPrevious = () => carousel.value!.prev();
+const goNext = () => carousel.value!.next();
+
+const computePositionOnTimeline = (year: string) => {
+  const intYear = parseInt(year)
 
-const calculateTimelinePosition = (year) => {
-  if (!year) {
+  if (!intYear || isNaN(intYear)) {
     return 0;
   }
   const startYear = 2005;
   const endYear = 2024;
-  const position = ((year - startYear) / (endYear - startYear)) * 100;
-  return position;
+  return ((intYear - startYear) / (endYear - startYear)) * 100;
 };
 
-const slides = [
+const slides: Array<ChronologyItem> = [
   {
-    id: 1,
     year: "2005",
     title: "L'origine d'Opentalent",
     description:
@@ -121,7 +123,6 @@ const slides = [
     imageUrl: "/images/about/Origine-Opentalent-outil-collaboratif-pour-la-culture.jpg",
   },
   {
-    id: 2,
     year: "2006",
     title: "Développement et partenariat stratégique",
     description:
@@ -129,7 +130,6 @@ const slides = [
     imageUrl: "/images/about/Developpement-et-partenariat-stratégique-Opentalent.jpg",
   },
   {
-    id: 3,
     year: "2008",
     title: "Naissance de l'entreprise 2iOpenservice",
     description:
@@ -137,7 +137,6 @@ const slides = [
     imageUrl: "/images/about/idee.png",
   },
   {
-    id: 4,
     year: "2009",
     title: "MusAssos - la réponse aux besoins pour les petites structures",
     description:
@@ -145,7 +144,6 @@ const slides = [
     imageUrl: "/images/about/idee.png",
   },
   {
-    id: 5,
     year: "2010",
     title: "CMF Réseau <br> l'innovation communautaire",
     description:
@@ -153,7 +151,6 @@ const slides = [
     imageUrl: "/images/about/idee.png",
   },
   {
-    id: 6,
     year: "2014",
     title: "Vers une Culture Multidisciplinaire avec FFEC",
     description:
@@ -161,7 +158,6 @@ const slides = [
     imageUrl: "/images/about/idee.png",
   },
   {
-    id: 7,
     year: "2015",
     title: "Refonte Technologique",
     description:
@@ -169,7 +165,6 @@ const slides = [
     imageUrl: "/images/about/Refonte-du-site-internet-Opentalent-agenda-et-logiciels-culturels.jpg",
   },
   {
-    id: 8,
     year: "2019",
     title: "Nouvelle Génération Opentalent",
     description:
@@ -177,7 +172,6 @@ const slides = [
     imageUrl: "/images/about/Nouvelle-génération-Opentalent-moderne-securisee-experience-optimisee.jpg",
   },
   {
-    id: 9,
     year: "2024",
     title: "Relooking du site Opentalent",
     description:
@@ -185,7 +179,7 @@ const slides = [
     imageUrl: "/images/about/idee.png",
   },
   {
-    id: 10,
+    year: "",
     title: "LE FUTUR AVEC VOUS... ",
     description:
       "Opentalent, plus qu'une gamme de logiciels ou un agenda culturel, c'est une aventure collective. Ensemble, poursuivons cette quête d'innovation et de partage culturel. <br> Rejoignez-nous dans cette aventure passionnante et façonnons l'avenir de la culture. <br> <strong> Opentalent, c'est vous ! </strong>",
@@ -194,120 +188,124 @@ const slides = [
 ];
 </script>
 
-<style scoped>
-.active-slide {
-  opacity: 1;
-  transform: scale(1.1);
-  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-}
-
-.inactive-slide {
-  opacity: 0.5;
-  transition: opacity 0.3s ease-in-out;
-}
-.timeline-year {
-  position: relative;
-  top: 1rem;
-  left: -1rem;
-  font-size: 1.2rem;
-  color: white;
-  font-weight: bold;
-}
-.timeline-container {
-  width: 90%;
-  padding: 10px 0;
-}
-
-.timeline {
-  top: 1rem;
-  height: 1px;
-  background-color: #ddd;
-  position: relative;
+<style scoped lang="scss">
+.v-col {
+  padding: 0;
 }
 
-.timeline-point {
-  position: relative;
-  top: 15px;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background-color: white;
-}
-.carousel-button {
+.carousel-controls {
   display: flex;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: 60px;
-  height: 60px;
-  background-color: transparent;
-  border: 2px solid #fff;
-  cursor: pointer;
-  margin-right: 1rem;
-}
 
-.carousel-button i {
-  color: #fff;
-}
-.container {
-  background-color: #0e2d32;
-}
-.carousel-row {
-  height: 32rem;
+  .v-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 60px;
+    background-color: transparent;
+    border: 2px solid;
+    cursor: pointer;
+    margin-right: 1rem;
+    margin-bottom: 2rem;
+    border-radius: 0;
+  }
 }
 
-.carousel-col {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
+.carousel {
+  .carousel__slide {
+    opacity: 0.5;
+    transition: opacity 0.3s ease-in-out;
+  }
+  .carousel__slide.active {
+    opacity: 1;
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  }
 
-.carousel__item,
-.description-container {
-  height: 300px;
-  width: 300px;
-}
+  .v-row {
+    height: 32rem;
+  }
 
-.carousel__item {
-  width: 100%;
-  background-image: url("/images/about/idee.png");
-  background-size: cover;
-}
+  .v-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 
-.v-col {
-  padding: 0;
-}
+  .image-container,
+  .description-container {
+    height: 300px;
+    width: 300px;
+  }
 
-.description {
-  align-items: center;
-  padding: 1rem;
-  font-size: 0.8rem;
-  color: #95dee9;
-}
+  .image-container {
+    .v-img {
+      height: 100%;
+      width: 100%;
+      border-top-left-radius: 20%;
+      border-bottom-left-radius: 20%;
+    }
+  }
 
-.title-slide {
-  justify-content: flex-end;
-  align-items: center;
-  font-size: 1rem;
-}
+  .description-container {
+    padding: 1rem;
+    text-align: center;
+    margin-left: 1rem;
+    background-color: #091d20;
+    color: white;
+    border-top-right-radius: 20%;
+    border-bottom-right-radius: 20%;
 
-.year {
-  font-size: 1.8rem;
-}
+    h3 {
+      font-size: 1.8rem;
+    }
 
-.description-container {
-  padding: 1rem;
-  text-align: center;
-  margin-left: 1rem;
-  background-color: #091d20;
-  color: white;
-  border-top-right-radius: 20%;
-  border-bottom-right-radius: 20%;
+    h4 {
+      justify-content: flex-end;
+      align-items: center;
+      font-size: 1rem;
+    }
+
+    p {
+      align-items: center;
+      padding: 1rem;
+      font-size: 0.8rem;
+      color: #95dee9;
+    }
+  }
 }
-.carousel__item {
-  height: 300px;
-  width: 300px;
-  background-image: url("/images/about/idee.png");
-  border-top-left-radius: 20%;
-  border-bottom-left-radius: 20%;
+
+.timeline-container {
+  width: 90%;
+  padding: 10px 0;
+
+  .timeline {
+    top: 1rem;
+    height: 1px;
+    background-color: #ddd;
+    position: relative;
+  }
+
+  .timeline-point {
+    position: relative;
+    top: 15px;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: white;
+  }
+
+  .timeline-year {
+    position: relative;
+    top: 1rem;
+    left: -1rem;
+    font-size: 1.2rem;
+    color: white;
+    font-weight: bold;
+  }
 }
 </style>

components/About/Equipe.vue

@@ -1,154 +1,140 @@
 <template>
-  <LayoutContainer id="team">
-    <v-row class="mt-12 custom-row">
-      <LayoutUISubTitle
-        :iconSize="6"
-        :iconClasses="iconClasses"
-        :titleText="'notre équipe'"
-      />
-    </v-row>
-    <v-row class="custom-row">
-      <LayoutUITitle title="Une équipe spécialisée et passionnée" />
-      <h4 class="details ml-4 mt-6 mb-12">
-        Chez Opentalent, on recherche des compétences mais surtout des hommes et
-        des femmes qui souhaitent s'engager dans un projet porteur de sens.
-      </h4>
-    </v-row>
-
-    <v-row class="custom-row">
-      <v-col
-        cols="12"
-        sm="6"
-        md="4"
-        lg="3"
-        v-for="chef in chefs"
-        :key="chef.id"
-      >
-        <v-card>
-          <v-img :src="chef.photo" height="370px"></v-img>
-          <v-card-title class="name">{{ chef.nom }}</v-card-title>
-          <v-card-subtitle class="poste">{{ chef.poste }}</v-card-subtitle>
-          <!-- <v-card-text clas>{{ chef.description }}</v-card-text> -->
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <v-row class="custom-row">
-      <v-col
-        cols="12"
-        sm="6"
-        md="4"
-        lg="3"
-        v-for="employe in employes"
-        :key="employe.id"
-      >
-        <v-card>
-          <v-img :src="employe.photo" height="370px"></v-img>
-          <v-card-title class="name"> {{ employe.nom }}</v-card-title>
-          <v-card-subtitle class="poste">{{ employe.poste }}</v-card-subtitle>
-          <!-- <v-card-text>{{ employe.description }}</v-card-text> -->
-        </v-card>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+  <AnchoredSection id="team">
+    <LayoutContainer class="mb-12">
+      <v-row class="mt-12">
+        <LayoutUISubTitle>
+          Notre équipe
+        </LayoutUISubTitle>
+      </v-row>
+
+      <v-row>
+        <LayoutUITitle>
+          Une équipe spécialisée et passionnée
+        </LayoutUITitle>
+
+        <span class="details ml-4 mt-6 mb-12">
+          Chez Opentalent, on recherche des compétences mais surtout des hommes et
+          des femmes qui souhaitent s'engager dans un projet porteur de sens.
+        </span>
+      </v-row>
+
+      <v-row>
+        <v-col
+          cols="12" sm="6" md="4" lg="3"
+          v-for="associate in associates"
+          :key="associate.name"
+        >
+          <v-card>
+            <v-img
+              :src="associate.photo"
+              :height="370"
+            />
+
+            <v-card-title class="name">
+              {{ associate.name }}
+            </v-card-title>
+
+            <v-card-subtitle class="position">
+              {{ associate.position }}
+            </v-card-subtitle>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col
+          cols="12" sm="6" md="4" lg="3"
+          v-for="employee in employees"
+          :key="employee.name"
+        >
+          <v-card>
+            <v-img
+              :src="employee.photo"
+              :height="370"
+            />
+
+            <v-card-title class="name">
+              {{ employee.name }}
+            </v-card-title>
+
+            <v-card-subtitle class="position">
+              {{ employee.position }}
+            </v-card-subtitle>
+          </v-card>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </AnchoredSection>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { SocietyMember } from "~/types/interface";
 
-const chefs = ref([
+const associates: Array<SocietyMember> = [
   {
-    id: 1,
-    nom: "Guillaume",
-    poste: "Fondateur / DIRECTEUR COMMERCIAL",
+    name: "Guillaume",
+    position: "Fondateur / DIRECTEUR COMMERCIAL",
     photo: "/images/about/equipe/Guillaume_CORCOBA-co-fondateur_et_Gerant.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.",
   },
   {
-    id: 1,
-    nom: "Michel",
-    poste: "FONDATEUR / Directeur développement",
+    name: "Michel",
+    position: "FONDATEUR / Directeur développement",
     photo: "/images/about/equipe/Michel_PERNET-SOLLIET-Co-fondateur_et_Product_Owner.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.",
   },
-]);
+];
 
-const employes = ref([
+const employees: Array<SocietyMember> = [
   {
-    id: 1,
-    nom: "Johan",
-    poste: " FORMATEUR",
+    name: "Johan",
+    position: " FORMATEUR",
     photo: "/images/about/equipe/Johan_HAUDIQUET-Formateur_et_Assistance.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
   },
   {
-    id: 1,
-    nom: "Nathalie",
-    poste: "Ch. DEVELOPPEMENT COMMERCIAL",
+    name: "Nathalie",
+    position: "Ch. DEVELOPPEMENT COMMERCIAL",
     photo: "/images/about/equipe/Nathalie_CHEVALON-Chargee_de_developpement_commercial.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolorel",
   },
   {
-    id: 1,
-    nom: "Laetitia",
-    poste: "CH. COMMUNICATION & MARKETING",
+    name: "Laetitia",
+    position: "CH. COMMUNICATION & MARKETING",
     photo: "/images/about/equipe/Laetitia_SIFFOINTE-Chargee_de_Marketing_et_Communication.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
   },
   {
-    id: 1,
-    nom: "Florence",
-    poste: "ASSISTANTE ADMINISTRATIVE",
+    name: "Florence",
+    position: "ASSISTANTE ADMINISTRATIVE",
     photo: "/images/about/equipe/Florence_JOANNIDIS-ADV.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
   },
   {
-    id: 1,
-    nom: "Vincent",
-    poste: "LEAD DEVELOPPEUR",
+    name: "Vincent",
+    position: "LEAD DEVELOPPEUR",
     photo: "/images/about/equipe/Vincent_GUFFON-Lead_dev.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
   },
   {
-    id: 1,
-    nom: "Olivier",
-    poste: "DEVELOPPEUR",
+    name: "Olivier",
+    position: "DEVELOPPEUR",
     photo: "/images/about/equipe/Olivier_MASSOT-Developpeur.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
   },
   {
-    id: 1,
-    nom: "Sébastien",
-    poste: "DEVELOPPEUR",
+    name: "Sébastien",
+    position: "DEVELOPPEUR",
     photo: "/images/about/equipe/Sebastien_FAVRE-BONTE_Developpeur.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
   },
   {
-    id: 1,
-    nom: "Maha",
-    poste: "DEVELOPPEUSE",
+    name: "Maha",
+    position: "DEVELOPPEUSE",
     photo: "/images/about/equipe/Maha_BOUCHIBA-Developpeuse.png",
-    description:
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore",
   },
-]);
+];
 </script>
 
-<style scoped>
-.custom-row {
+<style scoped lang="scss">
+.v-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
+
 .v-card {
   max-width: 284px;
   border: none !important;
@@ -156,25 +142,23 @@ const employes = ref([
   background-color: transparent !important;
 }
 
+.v-card-subtitle {
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
 .details {
-  color: var(--Vert-100, #091d20);
-  font-family: Barlow;
+  color: var(--primary-color);
+  font-family: Barlow, serif;
   font-size: 16px;
   font-weight: 300;
   line-height: 20px;
   width: 30rem;
 }
 
-.v-card {
-  max-width: 284px;
-  border: none !important;
-  box-shadow: none !important;
-  background-color: transparent !important;
-}
-
 .description {
-  color: var(--Vert-100, #091d20);
-  font-family: Barlow;
+  color: var(--primary-color);
+  font-family: Barlow, serif;
   font-size: 14px;
   font-style: normal;
   font-weight: 300;
@@ -182,18 +166,17 @@ const employes = ref([
 }
 
 .name {
-  color: #112528;
-  /* Subtitle 1 */
-  font-family: Barlow;
+  color: var(--primary-color);
+  font-family: Barlow, serif;
   font-size: 22px;
   font-style: normal;
   font-weight: 500;
   line-height: 26px;
 }
 
-.poste {
-  color: #071b1f;
-  font-family: Barlow;
+.position {
+  color: var(--primary-color);
+  font-family: Barlow, serif;
   font-size: 10px;
   font-style: normal;
   font-weight: 600;
@@ -201,10 +184,4 @@ const employes = ref([
   letter-spacing: 1.8px;
   text-transform: uppercase;
 }
-.v-card-subtitle {
-  text-overflow: ellipsis;
-  white-space: normal;
-}
-
-
 </style>

components/About/FAQ.vue

@@ -1,51 +1,51 @@
 <template>
-  <LayoutContainer id="faq">
-    <v-row no-gutters>
-      <v-col cols="6">
-        <div class="help-img"></div>
-        <!-- <v-img class="help-img" src="/images/help/Help.png" /> -->
-      </v-col>
+  <AnchoredSection id="help">
+    <LayoutContainer>
+      <v-row no-gutters class="alt-theme">
+        <v-col cols="6">
+           <v-img
+             src="/images/help/Help.png"
+             cover
+           />
+        </v-col>
 
-      <v-col cols="6" class="help-col">
-        <div class="ml-6">
-          <h4 class="subtitle-team ml-12">
-            Chez Opentalent, nous avons à coeur de répondre à vos interrogations
-            et de vous apporter la solution faite pour vous.
-          </h4>
-          <nuxt-link to="/nous-contacter">
-            <v-btn class="button-faq ml-12 mt-12">
+        <v-col cols="6">
+          <div class="ml-6">
+            <h4 class="ml-12">
+              Chez Opentalent, nous avons à coeur de répondre à vos interrogations
+              et de vous apporter la solution faite pour vous.
+            </h4>
+
+            <v-btn
+              to="/nous-contacter"
+              class="ml-12 mt-12"
+            >
               Nous contacter
-            </v-btn></nuxt-link
-          >
-          <v-row> </v-row>
-        </div>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+            </v-btn>
+          </div>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </AnchoredSection>
 </template>
-<script setup></script>
 
-<style scoped>
-.button-faq {
-  width: 195px;
-  height: 53px;
-  background: #64afb7;
-  border-radius: 6px;
-  color: white;
-  padding: 19px 28px;
-  gap: 9px;
-  margin-left: 2rem;
+<script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+</script>
+
+<style scoped lang="scss">
+.v-col {
+  height: 20rem;
 }
 
 .help-img {
-  background-image: url(/images/help/Help.png);
   background-repeat: no-repeat;
-  background-size: cover;
   background-position: center;
   width: 100%;
   height: 20rem;
 }
-.subtitle-team {
+
+h4 {
   margin-bottom: 2rem;
   margin-top: 3rem;
   font-style: normal;
@@ -57,9 +57,14 @@
   color: white;
 }
 
-.help-col {
-  background: var(--Vert-90, #0e2d32);
-  height: 20rem;
-
+.v-btn {
+  width: 195px;
+  height: 53px;
+  background: #64afb7;
+  border-radius: 6px;
+  color: white;
+  padding: 19px 28px;
+  gap: 9px;
+  margin-left: 2rem;
 }
 </style>

components/About/Histoire.vue

@@ -1,127 +0,0 @@
-<template>
-  <LayoutContainer id="Qui-sommes-nous" >
-    <v-row class="mt-12 custom-row">
-      <v-col cols="4">
-        <LayoutUISubTitle :titleText="'Qui sommes-nous ?'" />
-      </v-col>
-
-      <v-col cols="8">
-        <h3 class="italic-title mr-8">
-          “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
-          la référence pour la gestion et la promotion du spectacle vivant sur
-          les territoires.”
-        </h3>
-      </v-col>
-    </v-row>
-
-    <v-row style="width: 80%; margin-left: auto; margin-right: auto" class="mb-12">
-      <v-col cols="6">
-        <div class="passion-img"></div>
-      </v-col>
-
-      <v-col cols="6">
-        <h2 class="passion-title">Une histoire de passionnés</h2>
-        <p class="passion-details">
-          En 2005, Guillaume CORCOBA, musicien depuis toujours et à ce moment là
-          président d'un orchestre d'harmonie, mais également membre du conseil
-          d'administration de sa fédération, réfléchit à un outil pour
-          centraliser les informations de sa structure, mais également au niveau
-          fédéral. Il souhaite simplifier la gestion des structures culturelles
-          et en faire la promotion, car pour lui, le milieu culturel est
-          indispensable. Il est rapidement rejoint par Michel   PERNET-SOLLIET,
-          lui aussi musicien, et ils montent ensemble Openassos, qui deviendra
-          quelques années plus tard, Opentalent. Opentalent c'est un ensemble de
-          3 logiciels spécialement dédiés à la culture et un agenda culturel
-          pour en faire la promotion.
-        </p>
-
-        <h2 class="culture-title">
-          La Culture au service du développement territorial
-        </h2>
-        <p class="culture-details">
-          Qui n'a jamais entendu que la culture coûtait trop cher ? On l'entend
-          , ha ça oui on l'a même trop entendu ! Mais la culture c'est avant
-          tout un facteur de lien social incroyable. On se retrouve, on échange,
-          on partage... on vit ensemble. On crée des vrais moments et on
-          développe des groupes de passionnés. On participe à rendre nos
-          collectivités attractives et surtout on les fait vivre, toute l'année,
-          à toutes les saisons. Depuis plusieurs décennies, un grand nombre de
-          territoires s'appuie sur le développement de la culture comme un outil
-          de développement territorial pour faire face à la
-          désindustrialisation, à une croissance démographique ralentie ou
-          encore une image défavorable. Ce modèle de développement par la
-          culture pour pallier un déficit d’attractivité touristique inspire de
-          plus en plus de politiques de développement territorial.
-        </p>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped>
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-.culture-details {
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
-  color: #091d20;
-  width: 30rem;
-  text-align: justify;
-}
-
-.culture-title {
-  font-weight: 400;
-  font-size: 34px;
-  line-height: 38px;
-  color: #071b1f;
-  margin-bottom: 3rem;
-  width: 25rem;
-  text-align: justify;
-}
-.passion-title {
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  flex: none;
-  margin-bottom: 3rem;
-}
-
-.passion-details {
-  text-align: justify;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
-  color: #091d20;
-  width: 30rem;
-  margin-bottom: 2rem;
-}
-
-.passion-img {
-  background-image: url(/images/about/passion.jpg);
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  width: 400px;
-  height: 100%;
-  border-radius: 20px;
-}
-
-.italic-title {
-  text-align: justify;
-  font-style: italic;
-  font-weight: 300;
-  font-size: 34px;
-  line-height: 40px;
-  color: #091d20;
-  width: 80%;
-  margin-left: auto;
-  margin-bottom: auto;
-}
-</style>

components/About/Logiciels.vue

@@ -1,53 +1,70 @@
 <template>
-  <LayoutContainer id="software">
-    <v-row class="mb-6 custom-row">
-      <LayoutUISubTitle titleText="Ce qui nous anime" />
-      <LayoutUITitle title="Nos logiciels dédiés à chaque acteur culturel" />
-    </v-row>
-
-    <v-row class="mb-12 custom-row">
-      <v-col cols="3">
-        <p style="text-align: justify" class="mr-4 ml-6">
-          Découvrez notre gamme de logiciels de gestion & de communication
-          adapté au secteur culturel. <br />
-          Des fonctionnalités complètes:
-        </p>
-        <div class="mb-6"></div>
-        <ul class="custom-list-style ml-6">
-          <li v-for="(feature, index) in features" :key="index">
-            {{ feature }}
-          </li>
-        </ul>
-        <p style="text-align: justify" class="mr-4 ml-6 mt-6">
-          À chaque logiciel sa spécificité !
-        </p>
-      </v-col>
-      <v-col cols="3" v-for="(item, index) in items" :key="index">
-
-        <div
-          class="container-image"
-          :style="{ backgroundImage: 'url(' + item.imageUrl + ')' }"
+  <AnchoredSection id="softwares">
+    <LayoutContainer>
+      <v-row class="mb-6 custom-row">
+        <LayoutUISubTitle>
+          Nos logiciels
+        </LayoutUISubTitle>
+
+        <LayoutUITitle>
+          Nos logiciels dédiés à chaque acteur culturel
+        </LayoutUITitle>
+      </v-row>
+
+      <v-row class="mb-12 custom-row">
+        <v-col cols="3">
+          <p class="text-justify mr-4 ml-6 mb-6">
+            Découvrez notre gamme de logiciels de gestion & de communication
+            adapté au secteur culturel. <br />
+            Des fonctionnalités complètes:
+          </p>
+
+          <ul class="ml-6">
+            <li
+              v-for="(feature, index) in features"
+              :key="index"
+            >
+              {{ feature }}
+            </li>
+          </ul>
+
+          <p class="text-justify mr-4 ml-6 mt-6">
+            À chaque logiciel sa spécificité !
+          </p>
+        </v-col>
+
+        <v-col
+          cols="3"
+          v-for="(item, index) in items"
+          :key="index"
+          :class="item.class"
         >
-          <div class="footer-container">
-            <v-img class="logo" :src="item.logoUrl"></v-img>
+          <v-img
+            :src="item.imageUrl"
+            cover
+            class="container-image"
+          >
+            <footer>
+              <v-img :src="item.logoUrl" class="logo" />
 
-            <nuxt-link :to="item.link">
               <v-btn
-                :style="{ backgroundColor: item.buttonColor }"
+                :to="item.link"
                 class="plus-button"
               >
                 <v-icon>fas fa-plus</v-icon>
               </v-btn>
-            </nuxt-link>
-          </div>
-        </div>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+            </footer>
+          </v-img>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </AnchoredSection>
 </template>
 
-<script setup>
-const features = [
+<script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+
+const features: Array<string> = [
   "Une gestion de vos contacts",
   "un agenda collaboratif et interactif",
   "Une gestion du matériel et du stock",
@@ -57,116 +74,53 @@ const features = [
   "Et bien plus encore...",
 ];
 
-const items = [
+const items: Array<{imageUrl: string, logoUrl: string, class: string, link: string}> = [
   {
     imageUrl: "/images/solutions/artist.jpg",
     logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
-    buttonColor: "#FAC20A",
+    class: "artist",
     link: "/opentalent_artist",
   },
   {
     imageUrl: "/images/solutions/school.jpg",
     logoUrl: "/images/logo/logiciels/School-Blanc.png",
-    buttonColor: "rgba(32, 147, 190)",
+    class: "school",
     link: "/opentalent_school",
   },
-
   {
     imageUrl: "/images/solutions/manager.png",
     logoUrl: "/images/logo/logiciels/Manager-Blanc.png",
-    buttonColor: "#D8050B",
+    class: "manager",
     link: "/opentalent_manager",
   },
 ];
 </script>
 
-<style scoped>
-.v-container {
-  padding: 0 !important;
-}
-
+<style scoped lang="scss">
 .container {
+  padding: 0 !important;
   margin-top: 1rem;
   background: #f8f8f8;
 }
-:deep().title {
-  width: 100% !important;
-}
+
 .custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.container-image {
-  position: relative;
-  background-image: url("/images/solutions/school.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  cursor: pointer;
-}
-
-
-.footer-container {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-}
-
-.logo {
-  width: 100px;
-  z-index: 2;
-  margin-right: 10px;
-}
-
 
-.plus-button {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background: var(--Vert-60, #64afb7);
-  color: white;
-}
-
-
-.container-image:hover .plus-button {
-  transform: scale(1.2); 
-  transition: all 0.3s ease-in-out;
-}
-
-.plus-button .v-icon {
-  color: #ffffff;
-  font-size: 2rem;
-}
-
-.plus-button,
-.v-btn {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  border-top-left-radius: 10% !important;
-}
-
-.custom-list-style {
+ul {
   list-style: none;
   padding-left: 0;
 }
 
-.custom-list-style li {
+li {
   margin-left: 0.8rem;
   position: relative;
   margin-bottom: 10px;
 }
 
-.custom-list-style li:before {
+li:before {
   content: "";
   position: absolute;
   left: -10px;
@@ -178,6 +132,63 @@ const items = [
   border-radius: 50%;
 }
 
+.container-image {
+  position: relative;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 370px;
+  z-index: 0;
 
+  footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+  }
+
+  .logo {
+    width: 100px;
+    z-index: 2;
+    margin-right: 10px;
+  }
+
+  .plus-button {
+    width: 80px;
+    height: 80px;
+    border-radius: 50% 0 0 0;
+    background: var(--primary-color);
+    color: var(--on-primary-color);
+    box-shadow: none !important;
+    border-top-left-radius: 10% !important;
+
+    .v-icon {
+      color: #ffffff;
+      font-size: 2rem;
+    }
+  }
+
+  :hover .plus-button {
+    transform: scale(1.2);
+    transition: all 0.3s ease-in-out;
+  }
+}
 
+.artist .plus-button {
+  background: var(--artist-color);
+}
+
+.school .plus-button {
+  background: var(--school-color);
+}
+
+.manager .plus-button {
+  background: var(--manager-color);
+}
 </style>

components/About/Presentation.vue

@@ -0,0 +1,134 @@
+<template>
+  <AnchoredSection id="about">
+    <LayoutContainer>
+      <v-row class="mt-12 custom-row">
+        <v-col cols="4">
+          <LayoutUISubTitle>
+            Qui sommes-nous ?
+          </LayoutUISubTitle>
+        </v-col>
+
+        <v-col cols="8">
+          <h3 class="italic-title mr-8">
+            “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
+            la référence pour la gestion et la promotion du spectacle vivant sur
+            les territoires.”
+          </h3>
+        </v-col>
+      </v-row>
+
+      <v-row class="history mb-12">
+        <v-col cols="6">
+          <v-img src="/images/about/passion.jpg" cover />
+        </v-col>
+
+        <v-col cols="6">
+          <h3>
+            Une histoire de passionnés
+          </h3>
+
+          <p class="mb-8">
+            En 2005, Guillaume CORCOBA, musicien depuis toujours et à ce moment là
+            président d'un orchestre d'harmonie, mais également membre du conseil
+            d'administration de sa fédération, réfléchit à un outil pour
+            centraliser les informations de sa structure, mais également au niveau
+            fédéral. Il souhaite simplifier la gestion des structures culturelles
+            et en faire la promotion, car pour lui, le milieu culturel est
+            indispensable. Il est rapidement rejoint par Michel   PERNET-SOLLIET,
+            lui aussi musicien, et ils montent ensemble Openassos, qui deviendra
+            quelques années plus tard, Opentalent. Opentalent c'est un ensemble de
+            3 logiciels spécialement dédiés à la culture et un agenda culturel
+            pour en faire la promotion.
+          </p>
+
+          <h4>
+            La Culture au service du développement territorial
+          </h4>
+
+          <p>
+            Qui n'a jamais entendu que la culture coûtait trop cher ? On l'entend
+            , ha ça oui on l'a même trop entendu ! Mais la culture c'est avant
+            tout un facteur de lien social incroyable. On se retrouve, on échange,
+            on partage... on vit ensemble. On crée des vrais moments et on
+            développe des groupes de passionnés. On participe à rendre nos
+            collectivités attractives et surtout on les fait vivre, toute l'année,
+            à toutes les saisons. Depuis plusieurs décennies, un grand nombre de
+            territoires s'appuie sur le développement de la culture comme un outil
+            de développement territorial pour faire face à la
+            désindustrialisation, à une croissance démographique ralentie ou
+            encore une image défavorable. Ce modèle de développement par la
+            culture pour pallier un déficit d’attractivité touristique inspire de
+            plus en plus de politiques de développement territorial.
+          </p>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </AnchoredSection>
+</template>
+
+<script setup lang="ts">
+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;
+  font-weight: 300;
+  font-size: 34px;
+  line-height: 40px;
+  color: #091d20;
+  width: 80%;
+  margin-left: auto;
+  margin-bottom: auto;
+}
+
+.v-row.history {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+
+  .v-img {
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 400px;
+    height: 100%;
+    border-radius: 20px;
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: 42px;
+    line-height: 42px;
+    flex: none;
+    margin-bottom: 3rem;
+  }
+
+  h4 {
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 38px;
+    color: #071b1f;
+    margin-bottom: 3rem;
+    width: 25rem;
+    text-align: justify;
+  }
+
+  p {
+    text-align: justify;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 20px;
+    width: 30rem;
+    margin-bottom: 2rem;
+  }
+}
+
+
+</style>

components/About/Valeurs.vue

@@ -1,19 +1,24 @@
 <template>
-  <LayoutContainer class="mt-12" id="valeurs">
-    <div id="valeurs">
-      <div class="v-row custom-row">
-        <LayoutUISubTitle :titleText="'Les valeurs qui nous portent'" />
-      </div>
+  <AnchoredSection id="values">
+    <LayoutContainer class="mt-12">
+      <v-row class="custom-row">
+        <LayoutUISubTitle>
+          Les valeurs qui nous portent
+        </LayoutUISubTitle>
+      </v-row>
 
       <v-row class="mt-6 custom-row align-center mb-12">
         <v-col cols="6">
-          <div class="valeur-img"></div>
+          <v-img
+            src="/images/about/valeurs/valeur.png"
+            cover
+            class="valeur-img"
+          />
         </v-col>
 
         <v-col cols="6">
-          <div class="valeur-container">
+          <div class="values">
             <v-row
-              class="row"
               v-for="(row, rowIndex) in values"
               :key="rowIndex"
             >
@@ -22,19 +27,29 @@
                 v-for="(value, valueIndex) in row"
                 :key="valueIndex"
               >
-                <v-img :src="value.img" class="icon-valeur" />
-                <h6 class="title-valeurs">{{ value.title }}</h6>
-                <p>{{ value.description }}</p>
+                <v-img :src="value.img" cover />
+
+                <h6>
+                  {{ value.title }}
+                </h6>
+
+                <p>
+                  {{ value.description }}
+                </p>
               </v-col>
             </v-row>
           </div>
         </v-col>
       </v-row>
-    </div>
-  </LayoutContainer>
+    </LayoutContainer>
+  </AnchoredSection>
 </template>
-<script setup>
-const values = [
+
+<script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { SocietyValue } from "~/types/interface";
+
+const values: Array<Array<SocietyValue>> = [
   [
     {
       img: "/images/about/valeurs/Management.svg",
@@ -44,7 +59,6 @@ const values = [
     },
     {
       img: "/images/about/valeurs/Satisfaction-client.svg",
-      icon: "fa-brands fa-react",
       title: "Satisfaction client",
       description:
         "Opentalent met un point d’honneur à satisfaire ses clients en leur proposant des solutions de qualité, un projet global dans lequel ils se retrouvent. L’intention de base est bel et bien de proposer un équilibre entre les solutions informatiques et la volonté personnelle en lien avec la production et les publics concernés.",
@@ -53,14 +67,12 @@ const values = [
   [
     {
       img: "/images/about/valeurs/Ecologie.svg",
-      icon: "fa-brands fa-react",
       title: "Écologie",
       description:
         "Proche des entreprises de l’Économie Sociale et Solidaire, Opentalent accorde une grande importance aux démarches liées à l’écologie et au développement durable. Le code des outils est par exemple optimisé pour limiter les ressources nécessaires des serveurs, réduisant ainsi leur empreinte carbone et améliorant le confort des utilisateurs au quotidien.",
     },
     {
       img: "/images/about/valeurs/Open-source.svg",
-      icon: "fa-brands fa-react",
       title: "Open source",
       description:
         "Opentalent est une entreprise qui croit profondément aux vertus des logiciels Open Source et qui par son action contribue à leur développement.",
@@ -68,80 +80,40 @@ const values = [
   ],
 ];
 </script>
-<style scoped>
+
+<style scoped lang="scss">
 .valeur-img {
-  background-image: url(/images/about/valeurs/valeur.png);
   background-repeat: no-repeat;
-  background-size: cover;
   background-position: center;
   height: 400px;
   width: 450px;
 }
+
 .custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.icon-valeur {
-  width: 50px;
-  height: 50px;
-  margin-bottom: 1rem;
-}
 
-.row {
-  border-top: 1px solid #e5e5e5;
-}
-.title-valeurs {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 22px;
-  line-height: 26px;
-  color: #091d20;
-  margin-bottom: 1rem;
-}
-.title-valeur {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 34px;
-  line-height: 38px;
-  color: #071b1f;
-  text-align: center;
-  margin-right: 19rem;
-  margin-left: 12rem;
-  text-align: left;
-}
+.values {
+  .v-row {
+    border-top: 1px solid #e5e5e5;
+  }
 
-.left-img {
-  position: relative;
-  right: 2rem;
-}
+  .v-img {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 1rem;
+  }
 
-.right-img {
-  position: relative;
-  left: 2rem;
-}
-.container-img {
-  margin-left: 14rem;
-}
-.bottom-img,
-.top-img {
-  margin-left: 4rem;
-}
-
-.top-img {
-  position: relative;
-  top: 4.5rem;
-}
-
-.bottom-img {
-  position: relative;
-  bottom: 4.5rem;
-}
-.image-ronde {
-  width: 170px;
-  height: 170px;
-  border-radius: 90px;
+  h6 {
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 26px;
+    color: #091d20;
+    margin-bottom: 1rem;
+  }
 }
 </style>

components/Formation/Presentation.vue

@@ -100,10 +100,10 @@ p {
 }
 
 .school {
-  color: #64afb7;
+  color: var(--school-color);
 }
 
 .manager {
-  color: #d8050b;
+  color: var(--manager-color);
 }
 </style>

components/Layout/UI/Title.vue

@@ -21,6 +21,5 @@
     font-size: 3rem;
     line-height: 3rem;
     margin-left: 1rem;
-    width: 35rem;
   }
 </style>

components/Webinaire/FAQ.vue

@@ -1,31 +1,48 @@
+<!--
+Foire aux questions
+-->
 <template>
   <LayoutContainer>
-    <v-row class="custom-row">
-      <LayoutUISubTitle
-        :iconSize="6"
-        :iconClasses="iconClasses"
-        :titleText="'Des questions ?'"
-      />
+    <v-row>
+      <LayoutUISubTitle>
+        Des questions ?
+      </LayoutUISubTitle>
     </v-row>
 
-    <LayoutUITitlePage title="Tout savoir sur nos webinaire en ligne" subtitle="Les questions les plus fréquentes" />
-    <div class="faq-container">
-      <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
-        <div class="question" @click="toggle(index)">
-          <i class="fa-solid fa-circle question-icon"></i> {{ item.question }}
+    <LayoutUITitlePage>
+      Tout savoir sur nos webinaire en ligne
+      <template #subtitle>Les questions les plus fréquentes</template>
+    </LayoutUITitlePage>
+
+    <div class="faq">
+      <div
+        v-for="(item, index) in faqItems"
+        :key="index"
+        class="faq-item"
+      >
+        <div
+          class="question"
+          @click="toggle(index)"
+        >
+          <v-icon icon="fas fa-circle" />
+          {{ item.question }}
+        </div>
+
+        <div
+          v-if="isOpen(index)"
+          class="answer"
+        >
+          {{ item.answer }}
         </div>
-        <div class="section-content" v-if="isActive(index)" v-html="item.answer"></div>
       </div>
     </div>
   </LayoutContainer>
 </template>
 
+<script setup lang="ts">
+import { FaqEntry } from "~/types/interface";
 
-
-<script setup>
-import { ref } from 'vue';
-
-const faqItems = ref([
+const faqItems: Array<FaqEntry> = [
   {
     question: 'Comment s’inscrire à un webinaire?',
     answer: 'Pour vous inscrire à un webinaire, suivez le lien "Inscrivez-vous" correspondant au cours qui vous intéresse.',
@@ -51,33 +68,31 @@ const faqItems = ref([
     answer: 'Il n\'y a pas de limite de participants lors de nos webinaires. Cependant, nous nous réservons le droit d\'annuler une session si le nombre de participants est inférieur à 3 personnes.',
   },
   {
-  question: 'J\'ai besoin d\'aide...',
-  answer: 'Notre équipe est là pour vous. <button style="background-color: #0E2D32; color: #fff; border: none;border-radius: 4px;padding: 0.5rem 1rem;cursor: pointer;"   class="contact-btn" onclick="window.location.href=\'/nous-contacter\'">Contactez-nous</button>'
-}
+    question: 'J\'ai besoin d\'aide...',
+    answer: 'Notre équipe est là pour vous. <button style="background-color: #0E2D32; color: #fff; border: none;border-radius: 4px;padding: 0.5rem 1rem;cursor: pointer;"   class="contact-btn" onclick="window.location.href=\'/nous-contacter\'">Contactez-nous</button>'
+}];
 
-]);
+const activeIndex: Ref<number | null> = ref(null);
 
-
-const activeIndex = ref(-1);
-
-function toggle(index) {
-  activeIndex.value = activeIndex.value === index ? -1 : index;
+function toggle(index: number) {
+  activeIndex.value = activeIndex.value === index ? null : index;
 }
 
-function isActive(index) {
+function isOpen(index: number) {
   return activeIndex.value === index;
 }
 </script>
 
 
-<style scoped>
-
-.custom-row {
+<style scoped lang="scss">
+.v-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.faq-container {
+
+
+.faq {
   padding: 1rem;
   width: 90%;
   margin-left: auto;
@@ -97,39 +112,23 @@ function isActive(index) {
   border-radius: 4px;
   display: flex;
   align-items: center;
-}
 
-.question:hover {
-  background-color: #555;
-}
-.question-icon {
-  font-size: 10px !important;
-  color: rgba(161, 225, 249, 0.6);
-  margin-right: 0.5rem;
+  :hover {
+    background-color: #555;
+  }
+
+  .v-icon {
+    font-size: 10px !important;
+    color: rgba(161, 225, 249, 0.6);
+    margin-right: 0.5rem;
+  }
 }
 
-.section-content {
+.answer {
   background-color: #C3E5E7;
   padding: 0.5rem 1rem;
   border: 1px solid #ccc;
   border-top: none;
   border-radius: 0 0 4px 4px;
 }
-
-:deep().subtitle {
-  font-size: 1.5rem;
-  font-weight: normal !important;
-  line-height: 2rem;
-  letter-spacing: .1rem;
-  margin-bottom: 1rem;
-}
-
-:deep().title {
-  font-size: 2rem;
-  line-height: 3.5rem;
-  letter-spacing: .1rem;
-  margin-top: 2rem;
-  margin-bottom: .5rem;
-  text-transform: uppercase;
-}
 </style>

pages/nous-rejoindre/index.vue

@@ -1,30 +1,30 @@
 <template>
   <LayoutNavigation />
-  <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <CommonStickyMenu
-      :shouldShowStickyMenu="shouldShowStickyMenu"
-      :squaresData="squaresData"
-    />
-  </div>
+
   <JoinUsBanner />
+
   <JoinUsMissions />
+
   <LayoutFooterPrefooter />
-  <LayoutFooter id="layout-footer" />
+
+  <LayoutFooter />
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 import { useMaestroRequestService } from "~/composables/useMaestroRequestService";
+
 const { apiRequestService } = useMaestroRequestService();
 
 const query = computed(() => {
   const queryParams: { page: number; type?: string; [key: string]: number | string } = {
     page: page.value,
-    type: 'ENTREPRISE' 
+    type: 'ENTREPRISE'
   };
 
   return queryParams;
 });
+
 // Base URL for API requests
 const totalItems = ref(0);
 const config = useRuntimeConfig();
@@ -58,7 +58,7 @@ const {
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 #sticky-menu {
   position: sticky;
   top: 20rem;

pages/qui-sommes-nous.vue

@@ -1,3 +1,7 @@
+<!--
+  Page "Qui sommes nous?"
+-->
+
 <template>
   <LayoutNavigation />
 
@@ -7,7 +11,7 @@
 
   <CommonStickyMenu />
 
-  <AboutHistoire />
+  <AboutPresentation />
 
   <AboutValeurs />
 
@@ -15,7 +19,7 @@
 
   <AboutAgenda />
 
-  <AboutChronologie />
+  <AboutChronologie v-if="lgAndUp"/>
 
   <AboutEquipe />
 
@@ -27,15 +31,20 @@
 </template>
 
 <script setup lang="ts">
-const menus = ref([
-  { id: "Qui-sommes-nous", label: "Qui sommes-nous", element: null },
-  { id: "valeurs", label: "Nos valeurs", element: null },
-  { id: "software", label: "Nos logiciels", element: null },
-  { id: "agenda", label: "L'agenda opentalent", element: null },
-  { id: "story", label: "Notre Histoire", element: null },
-  { id: "team", label: "Notre équipe", element: null },
-  { id: "faq", label: "Aide", element: null },
-]).value;
+import { MenuScroll } from "~/types/interface";
+import { useDisplay } from "vuetify";
+
+const { lgAndUp } = useDisplay()
+
+const menus: Array<MenuScroll> = [
+  { anchor: "about", label: "Qui sommes-nous" },
+  { anchor: "values", label: "Nos valeurs" },
+  { anchor: "softwares", label: "Nos logiciels" },
+  { anchor: "agenda", label: "L'agenda opentalent" },
+  { anchor: "history", label: "Notre Histoire" },
+  { anchor: "team", label: "Notre équipe" },
+  { anchor: "help", label: "Aide" },
+];
 </script>
 
 <style scoped>

pages/webinaires.vue

@@ -1,3 +1,6 @@
+<!--
+  Page FAQ
+-->
 <template>
   <LayoutNavigation />
 
@@ -9,7 +12,7 @@
 
   <WebinaireFAQ />
 
-  <LayoutPrefooter />
+  <LayoutFooterPrefooter />
 
   <LayoutFooter />
 </template>
@@ -18,4 +21,22 @@
 </script>
 
 <style scoped>
+
+/* TODO: review and harmonize with other titles */
+:deep(h2) {
+  font-size: 1.5rem;
+  font-weight: normal !important;
+  line-height: 2rem;
+  letter-spacing: .1rem;
+  margin-bottom: 1rem;
+}
+
+:deep(h1) {
+  font-size: 2rem;
+  line-height: 3.5rem;
+  letter-spacing: .1rem;
+  margin-top: 2rem;
+  margin-bottom: .5rem;
+  text-transform: uppercase;
+}
 </style>

types/interface.d.ts

@@ -105,5 +105,38 @@ interface Training {
   price: string;
   downloadLink: string;
   imageUrl?: string
-  additionalObjectives: Program[];
+  additionalObjectives?: Program[];
+}
+
+interface FaqEntry {
+  question: string,
+  answer: string
+}
+
+interface SocietyValue {
+  img: string,
+  title: string,
+  description: string
+}
+
+interface Event {
+  rdv: string,
+  title: string,
+  localisation: string,
+  date: string,
+  img: string,
+  tags: string[],
+}
+
+interface ChronologyItem {
+  year: string,
+  title: string,
+  description: string,
+  imageUrl: string
+}
+
+interface SocietyMember {
+  name: string,
+  position: string,
+  photo: string,
 }