refactor title, banner and menu of fomations page

components/Formation/Banner.vue

@@ -1,96 +1,52 @@
 <template>
   <LayoutContainer>
-    <LayoutUITitlePage title="Formation" subtitle="Prise en main ou piqûre de rappel,on est toujours à vos côtés. " />
-    
+    <LayoutUITitlePage>
+      Formation
+      <template #subtitle>
+        Prise en main ou piqûre de rappel,on est toujours à vos côtés.
+      </template>
+    </LayoutUITitlePage>
+
     <v-row>
-      <v-col cols="12" style="position: relative">
-        <img
+      <v-col cols="12" class="banner-container">
+        <v-img
           src="/images/formation/banner.jpg"
-          alt="line"
+          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>
-
-    <v-row>
-      <v-col cols="12" class="menu-container">
-        <div v-for="menu in menus" :key="menu.label">
-          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">
-            {{ menu.label }}
-          </v-chip>
-          <span v-else>{{ menu.label }}</span>
-        </div>
-      </v-col>
-    </v-row>
   </LayoutContainer>
 </template>
 
-<script setup>
-
-</script>
-
-<style scoped>
-.image-text {
-  position: absolute;
-  top: 40px;
-  left: 20px;
-  font-family: "Barlow";
-  color: white;
-  font-size: 3rem;
-  width: 30rem;
-  font-style: italic;
-  font-weight: 300;
-  line-height: 40px;
-}
-
-:deep().subtitle {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  letter-spacing: .1rem;
-  margin-bottom: 1rem;
-}
-
-.formation {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 90px;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  margin-bottom: 1rem;
-}
-
-.menu-container {
-  display: flex;
-  justify-content: space-around;
-  padding: 1rem 10rem;
-  background: white;
-  color: #bbb8b8;
-  font-family: "Barlow";
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
-.v-chip.active-menu {
-  background: black;
-  color: white;
-}
-
-.cover-image {
-  width: 100%;
-  height: 35rem;
-  object-fit: cover;
-  object-position: center 30%;
-  margin: 0 auto;
-  transform: scaleX(-1);
-}
+<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,5 +1,5 @@
 <template>
-  <div id="Catalogue">
+  <AnchoredSection id="catalog">
     <LayoutContainer v-if="!mdAndDown">
       <div class="grey-container">
         <v-row class="custom-row">
@@ -11,7 +11,7 @@
 
         <LayoutUITitle title="Catalogue" />
         </v-row>
- 
+
 
         <v-row  class="custom-row" style="  padding: 2rem; max-width: 90%; margin-left: auto; margin-right: auto;">
           <v-col v-for="(course, index) in courses" :key="index" cols="4">
@@ -74,12 +74,13 @@
         </v-row>
       </div>
     </LayoutContainer>
-  </div>
+  </AnchoredSection>
 </template>
 
 <script setup>
 
 import { useDisplay } from "vuetify";
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 const { smAndDown, mdAndDown } = useDisplay();
 
 const downloadPdf = (pdfUrl) => {
@@ -228,7 +229,7 @@ const courses = [
 }
 
 .badge-time span {
-  color: var(--Vert-90, #0E2D32); 
+  color: var(--Vert-90, #0E2D32);
 }
 
 .list-obj {

components/Formation/Certification.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="Certification">
+  <AnchoredSection id="certification">
     <LayoutContainer>
       <v-row class="custom-row">
         <v-col cols="5">
@@ -36,10 +36,12 @@
         </v-col>
       </v-row>
     </LayoutContainer>
-  </div>
+  </AnchoredSection>
 </template>
 
-<script setup></script>
+<script setup>
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+</script>
 
 <style scoped>
 

components/Formation/OPCA.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="Financement">
+  <AnchoredSection id="financing">
     <LayoutContainer >
       <v-row class="custom-row">
         <LayoutUISubTitle
@@ -47,10 +47,11 @@
         </v-row>
       </v-container>
     </LayoutContainer>
-  </div>
+  </AnchoredSection>
 </template>
 
 <script setup>
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped>

components/Formation/Participation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="Inscription">
+  <AnchoredSection id="inscription">
     <LayoutContainer>
       <v-row class="custom-row">
         <v-col cols="12">
@@ -56,7 +56,7 @@
         </v-col>
       </v-row>
     </LayoutContainer>
-  </div>
+  </AnchoredSection>
 </template>
 
 <style scoped>
@@ -133,3 +133,6 @@
   color: #ffffff;
 }
 </style>
+<script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+</script>

components/Formation/Presentation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="Presentation">
+  <AnchoredSection id="presentation">
     <LayoutContainer>
       <v-row class="custom-row mt-6">
         <LayoutUISubTitle
@@ -54,10 +54,12 @@
         </v-col>
       </v-row>
     </LayoutContainer>
-  </div>
+  </AnchoredSection>
 </template>
 
-<script setup></script>
+<script setup>
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+</script>
 
 <style scoped>
 

components/Formation/Reviews.vue

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

components/Formation/Solutions.vue

@@ -1,3 +1,5 @@
+<!-- TODO: voir si utilisé? -->
+
 <template>
   <LayoutContainer>
     <v-row>

components/Layout/UI/TitlePage.vue

@@ -1,66 +1,46 @@
 <template>
-  <div>
-    <h1 style="text-align: center" :class="mdAndDown ? 'title-md ' : 'title '">
-      {{ title }}
+  <div class="mb-4">
+    <h1>
+      <slot />
     </h1>
-    <h2
-      style="text-align: center"
-      :class="mdAndDown ? 'subtitle-md ' : 'subtitle '"
-    >
-      {{ subtitle }}
+    <h2>
+      <slot name="subtitle" />
     </h2>
   </div>
 </template>
 
-<script setup>
-import { useDisplay } from "vuetify";
-const { mdAndDown } = useDisplay();
-
-const props = defineProps({
-  title: String,
-  subtitle: String,
-});
-</script>
-
-<style scoped>
-.text-center {
+<style scoped lang="scss">
+h1, h2 {
   text-align: center;
+  text-transform: uppercase;
 }
 
-.title {
+h1 {
   font-size: 4rem;
   line-height: 3.5rem;
   letter-spacing: 0.3rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
-  text-transform: uppercase;
-}
-
-.title-md {
-  font-size: 2rem;
-  line-height: 2.5rem;
-  letter-spacing: 0.2rem;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-
-  text-transform: uppercase;
 }
 
-.subtitle {
+h2 {
   font-size: 1.5rem;
   line-height: 2rem;
-  letter-spacing: 0.5rem;
-  margin-bottom: 8rem;
-  text-transform: uppercase;
+  letter-spacing: 0.2rem;
   margin-left: 1rem;
   margin-right: 1rem;
 }
 
-.subtitle-md {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  letter-spacing: 0.1rem;
-  text-transform: uppercase;
-  width: 100%;
+@media (max-width: 960px) {
+  h1 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+
+  h2 {
+    letter-spacing: 0.1rem;
+    width: 100%;
+  }
 }
+
 </style>

components/Logiciels/Manager/Reviews.vue

@@ -1,46 +1,49 @@
 <template>
   <AnchoredSection id="testimonials">
-    <LayoutContainer>
-      <CommonReviewSection :cards="cards" />
-    </LayoutContainer>
+    <div>
+      <LayoutContainer>
+        <CommonReviewSection :cards="cards" />
+      </LayoutContainer>
+    </div>
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Review } from "~/types/interface";
 
-const cards = [
+const cards: Array<Review> = [
   {
-    description:
+    review:
       "L'outil répond à toutes les demandes d'une structure de notre taille et la connexion avec le site internet est très pratique.",
     name: "Christophe MORIZOT",
     status: "Président ",
     structure: "Confédération Musicale de France (92)",
   },
   {
-    description:
+    review:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
     name: "Eric TAUVRON ",
     status: "Vice-président",
     structure: "CMF Rhône - Grand Lyon (69)",
   },
   {
-    description:
+    review:
       "C'est un outil de travail très intéressant, complet et intuitif quand on comprend certaines subtilités. Il a très bien évolué aussi bien pour les chorales que les harmonie. Mes remarques ont toujours été prises en compte.",
     name: "Noëlle ROBERT",
     status: "Président",
     structure: "CMF Côte d'or (21)",
   },
   {
-    description:
+    review:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
     name: "Laurent Lebon",
     status: "Chef d'orchestre",
     structure: "Conservatoire de Lyon",
   },
   {
-    description:
+    review:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
     name: "Laurent Lebon",
     status: "Chef d'orchestre",
@@ -51,13 +54,7 @@ const cards = [
 
 
 <style scoped>
-
-
-.v-container{
+.v-container {
   padding: 0 !important;
 }
-:deep().reviewer-name {
-  color: #e34461;
-}
-
 </style>

pages/formations.vue

@@ -27,15 +27,14 @@
 </template>
 
 <script setup lang="ts">
-const menus = ref([
-  { id: "Presentation", label: "Présentation", element: null },
-  { id: "Catalogue", label: "Catalogue", element: null },
-  { id: "Financement", label: "Financement", element: null },
-  { id: "Certification", label: "Certification", element: null },
-  { id: "Inscription", label: "Inscription", element: null },
-  { id: "Temoignages", label: "Temoignages", element: null }
-]).value;
+import { MenuScroll } from "~/types/interface";
+
+const menus: Array<MenuScroll> = [
+  { anchor: "presentation", label: "Présentation" },
+  { anchor: "catalog", label: "Catalogue" },
+  { anchor: "financing", label: "Financement" },
+  { anchor: "certification", label: "Certification" },
+  { anchor: "inscription", label: "Inscription" },
+  { anchor: "testimonials", label: "Témoignages" }
+];
 </script>
-
-<style scoped>
-</style>