refactor banned and Avantages sections of school page

components/About/Banner.vue

@@ -28,9 +28,9 @@
 
 :deep().text-left,
 :deep().text-right,
-:deep().description-square,
-:deep().black-square,
-:deep().blue-square {
+:deep().description,
+:deep().details-square,
+:deep().logo-square {
   display: none;
 }
 :deep().text-right {

components/Common/Avantages.vue

@@ -0,0 +1,55 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <LayoutUISubTitle>
+        Découvrez les avantages de la solution
+      </LayoutUISubTitle>
+
+      <LayoutUITitle>
+        Des avantages concrets
+      </LayoutUITitle>
+    </v-row>
+
+    <v-row>
+      <v-col
+        cols="12"
+        md="4"
+        offset-md="1"
+        v-for="(benefit, index) in benefits"
+        :key="index"
+      >
+        <CommonCardBenefit
+          :benefit="benefit"
+        />
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+import { Benefit } from "~/types/interface";
+
+const props = defineProps({
+  benefits: {
+    type: Array as PropType<Array<Benefit>>,
+    required: true
+  },
+  title: {
+    type: String,
+    required: false,
+    default: "Des avantages concrets"
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.v-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>

components/Common/Banner/Banner.vue

@@ -8,7 +8,8 @@
             :alt="imageAlt"
             class="cover-image"
           />
-          <div class="black-square" :style="{ backgroundColor: squareColor }">
+
+          <div class="details-square">
             <v-row>
               <div class="content-row">
                 <img
@@ -16,19 +17,15 @@
                   alt="icon instrument de musique"
                   class="custom-icon"
                 />
-                <p class="description-square" :style="{ color: textColor }">
+                <p class="description">
                   {{ squareText }}
                 </p>
               </div>
             </v-row>
           </div>
 
-          <div class="blue-square" :style="{ backgroundColor: blueSquareColor }">
-            <img
-              :src="logoSrc"
-              :alt="logoAlt"
-              class="logo-image"
-            />
+          <div class="logo-square alt-theme">
+            <img :src="logoSrc" :alt="logoAlt"/>
           </div>
         </div>
       </v-col>
@@ -47,22 +44,10 @@ const props = defineProps({
     type: String,
     default: ""
   },
-  squareColor: {
-    type: String,
-    default: "#9edbdd"
-  },
-  textColor: {
-    type: String,
-    default: "#091d20"
-  },
   squareText: {
     type: String,
     default: "École de musique, d'art, de danse, de cirque, conservatoires et MJC"
   },
-  blueSquareColor: {
-    type: String,
-    default: "#0e2d32"
-  },
   logoSrc: {
     type: String,
     required: true
@@ -74,7 +59,22 @@ const props = defineProps({
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.banner-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  min-height: 400px;
+  max-height: 400px;
+  object-fit: cover;
+  object-position: center 20%;
+  transition: transform 0.2s;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
 
 .custom-icon {
   width: 3rem;
@@ -82,37 +82,37 @@ const props = defineProps({
   margin-top: .5rem;
 }
 
-.black-square {
+.details-square {
   position: absolute;
   bottom: 0.4rem;
   right: 0;
   width: 13rem;
   height: 10rem;
-  background-color: black;
-  background: #9edbdd;
+  background: var(--secondary-color);
 }
 
-.blue-square {
+.logo-square {
   position: absolute;
   bottom: 0.4rem;
   right: 13rem;
   width: 13rem;
   height: 10rem;
-  background: #0e2d32;
+
+  img {
+    width: 100%;
+    height: 50%;
+    margin-top: 2.5rem;
+  }
 }
 
-.description-square {
+.description {
+  color: var(--on-secondary-color);
   font-weight: 300;
   font-size: 0.8rem;
   text-align: center;
-  color: #091d20;
   display: flex;
   align-items: center;
-  text-align: center;
-  margin-top: 0.5rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-bottom: 1rem;
+  margin: 0.5rem 2rem 1rem;
 }
 
 .content-row {
@@ -128,26 +128,4 @@ const props = defineProps({
   margin-left: 2rem;
   margin-right: 2rem;
 }
-
-.logo-image {
-  width: 100%;
-  height: 50%;
-  margin-top: 2.5rem;
-}
-
-.banner-container {
-  position: relative;
-  overflow: hidden;
-}
-
-.cover-image {
-  width: 100%;
-  min-height: 400px;
-  max-height: 400px;
-  object-fit: cover;
-  object-position: center 20%;
-  transition: transform 0.2s;
-  margin: 0 auto;
-  transform: scaleX(-1);
-}
 </style>

components/Common/StickyMenu.vue

@@ -191,7 +191,7 @@ const onActionClick = (action: StickyMenuAction) => {
   background: #d8050b;
 }
 
-.blue-square {
+.logo-square {
   background: var(--Bleu-School-60, rgba(32, 147, 190));
 }
 

components/JoinUs/Banner.vue

@@ -31,9 +31,9 @@
 }
 :deep().text-left,
 :deep().text-right,
-:deep().description-square,
-:deep().black-square,
-:deep().blue-square {
+:deep().description,
+:deep().details-square,
+:deep().logo-square {
   display: none;
 }
 :deep().text-right {

components/Logiciels/Artist/Avantages.vue

@@ -3,33 +3,7 @@ Section "Avantages" de la page du logiciel Artist
 -->
 <template>
   <AnchoredSection id="benefits">
-    <div>
-      <LayoutContainer>
-        <v-row>
-          <LayoutUISubTitle>
-            Découvrez les avantages de la solution
-          </LayoutUISubTitle>
-
-          <LayoutUITitle>
-            Des avantages concrets
-          </LayoutUITitle>
-        </v-row>
-
-        <v-row>
-          <v-col
-            cols="12"
-            md="4"
-            offset-md="1"
-            v-for="(benefit, index) in benefits"
-            :key="index"
-          >
-            <CommonCardBenefit
-              :benefit="benefit"
-            />
-          </v-col>
-        </v-row>
-      </LayoutContainer>
-    </div>
+    <CommonAvantages :benefits="benefits" />
   </AnchoredSection>
 </template>
 
@@ -64,15 +38,3 @@ const benefits: Ref<Array<Benefit>> = ref([
   },
 ]);
 </script>
-
-<style scoped lang="scss">
-.v-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-</style>

components/Logiciels/Artist/Banner.vue

@@ -3,20 +3,12 @@
     <v-row>
       <v-col cols="12">
         <CommonBanner
-          imageSrc="/images/logiciels/artist/banner.jpg"
-          imageAlt="line"
-          squareText="Orchestres, chorales, compagnies de danse, de cirque et de théâtre"
-          logoSrc="/images/logo/logiciels/Artist-noir.png"
-          squareColor="#fac20a"
-          blueSquareColor="#FFF"
+          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>
-
-<script setup>
-</script>
-
-<style scoped>
-</style>

components/Logiciels/Artist/Presentation.vue

@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { FeaturePicto } from "~/types/interface";
 
 const features = [
   "Logiciel de gestion et communication en ligne",
@@ -26,7 +27,7 @@ const features = [
   "Une solution simple d'utilisation, intuitive et collaborative"
 ]
 
-const pictos = [
+const pictos: Array<FeaturePicto> = [
   {
     src: "/images/logiciels/artist/picto1.png",
     text: "Logiciel de gestion et communication full web",

components/Logiciels/School/Avantages.vue

@@ -1,48 +1,24 @@
+<!--
+Section "Avantages" de la page du logiciel School
+-->
 <template>
-  <div id="Avantages">
-    <LayoutContainer>
-      <v-row class=" row-custom" >
-     
-
-        <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Découvrez les avantages de la solution'"
-          />
-          <LayoutUITitle title="Des avantages concrets" />
-
-      </v-row>
-
-      <v-row class="row-custom"  >
-
-        <v-col cols="12" md="4" offset-md="1"  v-for="(card, index) in cards" :key="index">
-          <CommonCardAvantageCard
-            :title="card.title"
-            :number="card.number"
-            :description="card.description"
-            :image="card.image"
-            :isMemberCMF="card.isMemberCMF"
-            :numberColor="card.numberColor"
-          />
-        </v-col>
-
-      </v-row>
-    </LayoutContainer>
-  </div>
+  <AnchoredSection id="benefits">
+    <CommonAvantages :benefits="benefits" />
+  </AnchoredSection>
 </template>
 
-<script setup>
-import { ref } from 'vue';
+<script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Benefit } from "~/types/interface";
 
 // Exemple de données pour les cartes
-const cards = ref([
+const benefits: Ref<Array<Benefit>> = ref([
   {
     title: 'Un gain de temps',
     number: '01',
     description: 'Centralisez toutes vos informations sur un seul et même outil et ne perdez plus de temps avec des fichiers sur diverses applications.',
     image: '/images/avantages/school/temps.jpg',
     isMemberCMF: true,
-    
   },
   {
     title: 'Une activité structurée',
@@ -61,17 +37,3 @@ const cards = ref([
 ]);
 
 </script>
-
-<style scoped>
-
-.row-custom{
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-</style>

components/Logiciels/School/Banner.vue

@@ -2,36 +2,32 @@
   <LayoutContainer>
     <v-row>
       <CommonBannerTitle
-        :leftText="'Artist'"
-        :title="'Opentalent School'"
-        :rightText="'Manager'"
+        title="Opentalent School"
+        left-text="Artist"
+        right-text="Manager"
       />
     </v-row>
 
     <v-row>
       <v-col cols="12">
         <CommonBanner
-          :imageSrc="'/images/solutions/school.jpg'"
-          imageAlt="'line'"
-          :squareText="'École de musique, d\'art, de danse, de cirque, conservatoires et MJC'"
-          :logoSrc="'/images/logo/logiciels/School-Blanc.png'"
+          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"
         />
       </v-col>
     </v-row>
   </LayoutContainer>
 </template>
 
-<script setup></script>
-
-<style scoped>
-
-.v-container{
+<style scoped lang="scss">
+.v-container {
   padding-left: 0;
   padding-right: 0;
 }
 
-:deep().cover-image {
+:deep(.cover-image) {
   object-position: center 40% !important;
 }
-
 </style>

components/Logiciels/School/Comparatif.vue

@@ -1,27 +1,31 @@
 <template>
-  <div id="Comparatif">
-    <LayoutContainer class="mt-6">
-      <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="' Comparatif de nos solutions'"
-        />
-        <LayoutUITitle
-          title="Choisissez la version qui vous convient ! "
-        />
+  <AnchoredSection id="comparative">
+    <div id="Comparatif">
+      <LayoutContainer class="mt-6">
+        <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="' Comparatif de nos solutions'"
+          />
+          <LayoutUITitle
+            title="Choisissez la version qui vous convient ! "
+          />
 
-        <CommonTableComparatif
-        :standardPrice="'32,90€'"
-        :premiumPrice="'46,20€'"
-        :color="'#0e2d32'"
-        :stripeColor="'rgba(32, 147, 190, 0.2)'"
-        :items="tableData"
-      />
-    </LayoutContainer>
-  </div>
+          <CommonTableComparatif
+          :standardPrice="'32,90€'"
+          :premiumPrice="'46,20€'"
+          :color="'#0e2d32'"
+          :stripeColor="'rgba(32, 147, 190, 0.2)'"
+          :items="tableData"
+        />
+      </LayoutContainer>
+    </div>
+  </AnchoredSection>
 </template>
 
 <script setup>
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+
 const tableData = [
   {
     id: 1,

components/Logiciels/School/Fonctionnalites.vue

@@ -1,26 +1,29 @@
 <template>
-  <div id="Fonctionnalites">
-    <LayoutContainer>
-      <div class="container-green" v-if="!mdAndDown">
-        <v-row>
-          <v-col cols="12">
-            <CommonCarouselFonctionnalite
-              :cards="cards"
-              :functionCarousel="functionCarousel"
-              :itemsToShow="itemsToShow"
-              pricingFromText="à partir de"
-            />
-          </v-col>
-        </v-row>
-      </div>
-    </LayoutContainer>
-  </div>
+  <AnchoredSection id="functionalities">
+    <div id="Fonctionnalites">
+      <LayoutContainer>
+        <div class="container-green" v-if="!mdAndDown">
+          <v-row>
+            <v-col cols="12">
+              <CommonCarouselFonctionnalite
+                :cards="cards"
+                :functionCarousel="functionCarousel"
+                :itemsToShow="itemsToShow"
+                pricingFromText="à partir de"
+              />
+            </v-col>
+          </v-row>
+        </div>
+      </LayoutContainer>
+    </div>
+  </AnchoredSection>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify/lib/framework.mjs";
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 const { width, mdAndDown } = useDisplay();
 const functionCarousel = ref(null);

components/Logiciels/School/Formations.vue

@@ -1,4 +1,5 @@
 <template>
+  <AnchoredSection id="webinars">
     <LayoutContainer id="Formations">
       <div class="container-green mt-12">
         <v-row>
@@ -90,9 +91,12 @@
 
       <CommonCarouselClients :items="items" />
     </LayoutContainer>
+  </AnchoredSection>
 </template>
 
 <script setup>
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+
 const formations = ref([
   {
     id: 1,

components/Logiciels/School/Presentation.vue

@@ -1,18 +1,11 @@
 <template>
-  <LayoutContainer>
-    <div id="Presentation">
-      <CommonPresentation
-        title="Présentation d'Opentalent School"
-        :features="features"
-        :pictos="pictos"
-        logo-src="/images/logo/logiciels/OT_School-blanc.png"
-        pricing-amount="20€"
-      />
-    </div>
-
-    <CommonContainerVideo
-      image-url="/images/logiciels/school/screen2.png"
-
+  <AnchoredSection id="presentation">
+    <CommonPresentation
+      title="Présentation d'Opentalent School"
+      :features="features"
+      :pictos="pictos"
+      logo-src="/images/logo/logiciels/OT_School-blanc.png"
+      pricing-amount="20€"
     />
 
     <CommonContainerVideo
@@ -20,10 +13,11 @@
       quote="Pour les petits comme pour les grands établissements d’enseignement artistique"
       image-url="/images/logiciels/school/screen2.png"
     />
-  </LayoutContainer>
+  </AnchoredSection>
 </template>
 
 <script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 import { FeaturePicto } from "~/types/interface";
 
 const features = [
@@ -46,6 +40,9 @@ const pictos: Array<FeaturePicto> = [
     src: "/images/logiciels/school/picto3.png",
     text: "Boostez votre visibilité & communication",
   },
-  { src: "/images/logiciels/school/picto4.png", text: "Communiquez en réseau" },
+  {
+    src: "/images/logiciels/school/picto4.png",
+    text: "Communiquez en réseau"
+  },
 ];
 </script>

components/Logiciels/School/Projet.vue

@@ -1,5 +1,6 @@
 <template>
-  <LayoutContainer id="Contact">
+  <AnchoredSection id="contact">
+    <LayoutContainer id="Contact">
       <v-row >
         <v-col cols="6">
           <!-- <div class="help-img">
@@ -56,9 +57,12 @@
           <div class="logo-cmf mt-12"></div>
         </v-col>
       </v-row>
-  </LayoutContainer>
+    </LayoutContainer>
+  </AnchoredSection>
 </template>
-<script setup></script>
+<script setup>
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+</script>
 
 <style scoped>
 

components/Logiciels/School/Reviews.vue

@@ -1,12 +1,16 @@
 <template>
-  <div id="Temoignages">
-    <LayoutContainer>
-      <CommonReviewCard :cards="cards" />
-    </LayoutContainer>
-  </div>
+  <AnchoredSection id="testimonials">
+    <div id="Temoignages">
+      <LayoutContainer>
+        <CommonReviewCard :cards="cards" />
+      </LayoutContainer>
+    </div>
+  </AnchoredSection>
 </template>
 
 <script setup>
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+
 const cards = [
   {
     description:

components/Logiciels/School/StickyMenu.vue

@@ -4,21 +4,21 @@
       <v-row class="outil-row">
         <v-col cols="3">
           <div class="container-square">
-            <v-row class="blue-square">
+            <v-row class="logo-square">
               <div>
                 <v-icon class="fa-regular fa-comments icon" />
                 <p class="text-square">Nous contacter</p>
               </div>
             </v-row>
 
-            <v-row class="blue-square">
+            <v-row class="logo-square">
               <div>
                 <v-icon class="fa-regular fa-circle-info icon" />
                 <p class="text-square">Demander une demo</p>
               </div>
             </v-row>
 
-            <v-row class="blue-square">
+            <v-row class="logo-square">
               <div>
                 <v-icon class="fa-brands fa-readme icon" />
                 <p class="text-square">Brochure</p>
@@ -54,7 +54,7 @@
   text-transform: uppercase;
 }
 
-.blue-square,
+.logo-square,
 .darkblue-square {
   display: flex;
   justify-content: center;
@@ -65,7 +65,7 @@
   padding: 1rem;
 }
 
-.blue-square {
+.logo-square {
   background:blue;
 }
 
@@ -94,7 +94,7 @@
   position: sticky;
   top: 10rem;
   z-index: 10;
-  left: 0; 
+  left: 0;
   margin-bottom: -40rem;
 }
 

components/Webinaire/Banner.vue

@@ -23,9 +23,9 @@
 
 :deep().text-left,
 :deep().text-right,
-:deep().description-square,
-:deep().black-square,
-:deep().blue-square {
+:deep().description,
+:deep().details-square,
+:deep().logo-square {
   display: none;
 }
 :deep().text-right {

pages/actualites/[id].vue

@@ -246,9 +246,9 @@ const goNext = () => carousel.next();
 }
 :deep().text-left,
 :deep().text-right,
-:deep().description-square,
-:deep().black-square,
-:deep().blue-square {
+:deep().description,
+:deep().details-square,
+:deep().logo-square {
   display: none;
 }
 :deep().text-right {

pages/nous-rejoindre/[id].vue

@@ -166,9 +166,9 @@ const getImageUrl = (attachment: string) => {
 
 :deep().text-left,
 :deep().text-right,
-:deep().description-square,
-:deep().black-square,
-:deep().blue-square {
+:deep().description,
+:deep().details-square,
+:deep().logo-square {
   display: none;
 }
 :deep().text-right {

pages/opentalent_school.vue

@@ -31,19 +31,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { StickyMenuAction } from "~/types/interface";
+import { MenuScroll, StickyMenuAction } from "~/types/interface";
 import { StickyMenuActionType } from "~/types/enum/layout";
 
-const menus = ref([
-  { id: "Presentation", label: "Présentation", element: null },
-  { id: "Avantages", label: "Avantages", element: null },
-  { id: "Fonctionnalites", label: "Fonctionnalités", element: null },
-  { id: "Comparatif", label: "Comparatif", element: null },
-  { id: "Contact", label: "Contact", element: null },
-  { id: "Formations", label: "Formations", element: null },
-  { id: "Temoignages", label: "Temoignages", element: null },
-]).value;
+const menus: Array<MenuScroll> = [
+  { anchor: "presentation", label: "Présentation" },
+  { anchor: "benefits", label: "Avantages" },
+  { anchor: "functionalities", label: "Fonctionnalités" },
+  { anchor: "comparative", label: "Comparatif" },
+  { anchor: "contact", label: "Contact" },
+  { anchor: "webinars", label: "Wébinaires" },
+  { anchor: "testimonials", label: "Témoignages" },
+];
+
 
 
 const stickyMenuActions: Array<StickyMenuAction> = [