refatctor Fonctios, Network and Formations sections of manager page

components/Common/Avantages.vue

@@ -6,7 +6,7 @@
       </LayoutUISubTitle>
 
       <LayoutUITitle>
-        Des avantages concrets
+        {{ title }}
       </LayoutUITitle>
     </v-row>
 

components/Common/Banner/Banner.vue

@@ -24,7 +24,7 @@
             </v-row>
           </div>
 
-          <div class="logo-square alt-theme">
+          <div :class="'logo-square' + (logoAltTheme ? ' alt-theme' : '')">
             <img :src="logoSrc" :alt="logoAlt"/>
           </div>
         </div>
@@ -55,6 +55,10 @@ const props = defineProps({
   logoAlt: {
     type: String,
     default: ""
+  },
+  logoAltTheme: {
+    type: Boolean,
+    default: false
   }
 });
 </script>
@@ -104,6 +108,9 @@ const props = defineProps({
     margin-top: 2.5rem;
   }
 }
+.logo-square:not(.alt-theme) {
+  background: var(--primary-color);
+}
 
 .description {
   color: var(--on-secondary-color);

components/Common/StickyMenu.vue

@@ -2,7 +2,7 @@
 Menu d'actions rapides (appel, contact, ...), qui reste accroché au bord droit
 de l'écran (ou au bas de l'écran sur les petits écrans)
 -->
-
+<!-- TODO: implémenter le theming ici -->
 <template>
   <!-- Écrans larges : menu lateral -->
   <div class="sticky-menu lateral" v-if="lgAndUp">
@@ -191,6 +191,10 @@ const onActionClick = (action: StickyMenuAction) => {
   background: #d8050b;
 }
 
+.blue-square {
+  background: #2093be;
+}
+
 .logo-square {
   background: var(--Bleu-School-60, rgba(32, 147, 190));
 }

components/Logiciels/Manager/Avantages.vue

@@ -1,52 +1,25 @@
 
 
-  <template>
-  <div id="Avantages">
-    <LayoutContainer>
-      <v-row class=" row-custom" >
-     
-
-        <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Découvrez les avantages de la solution'"
-          :iconColor="'#E34461'"
-        />
-        <LayoutUITitle title="Des avantages concrets pour un outil..." />
-
-      </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"
-            :dynamicNumberColor="'#E34461'"
-
-          />
-        </v-col>
-
-      </v-row>
-    </LayoutContainer>
-  </div>
+<template>
+  <AnchoredSection id="benefits">
+    <CommonAvantages
+      :benefits="benefits"
+      title="Des avantages concrets pour un outil..."
+    />
+  </AnchoredSection>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Benefit } from "~/types/interface";
 
-const cards = ref([
+const benefits: Array<Benefit> = [
   {
     title: "Sur-mesure",
     number: "01",
     description:
       "S'adapte à tous les réseaux de type pyramidal, quelque soit le nombre de niveaux :",
-    numberColor: "#f9d648",
-    listItems: ["Fédérations", "Institutions publiques"],
+    list: ["Fédérations", "Institutions publiques"],
     image: "/images/avantages/manager/Sur-mesure.jpg",
   },
   {
@@ -54,62 +27,36 @@ const cards = ref([
     number: "02",
     description:
       "Chaque structure du réseau dispose de sa propre solution indépendante et connectée au réseau :",
-    numberColor: "#f9d648",
-    listItems: ["Opentalent manager", "Opentalent school", "Opentalent artist"],
+    list: ["Opentalent manager", "Opentalent school", "Opentalent artist"],
     image: "/images/avantages/manager/Adapte.jpg",
-
   },
   {
     title: "Économique",
     number: "03",
     description:
       "Une solution éprouvée au niveau national, sans avoir à supporter de coûts de développement importants pour ce type de logiciel.",
-    numberColor: "#f9d648",
     image: "/images/avantages/manager/Economique.jpg",
-
   },
   {
     title: "De pilotage",
     number: "04",
     description:
       "Pilotez votre réseau de manière quotidienne et en temps réel. Gagnez du temps avec notre solution qui génère automatiquement un rapport d'activité complet.",
-    numberColor: "#f9d648",
     image: "/images/avantages/manager/Pilotage.jpg",
-
   },
   {
     title: "En réseau",
     number: "05",
     description:
       "Mise à jour automatique des coordonnées publiques entre les membres du réseau.",
-    numberColor: "#f9d648",
     image: "/images/avantages/manager/En-reseau.jpg",
-
   },
   {
     title: "Confidentiel",
     number: "06",
     description:
       "Chaque structure garde son indépendance et reste entièrement maître des informations et des données qu'elle saisit.",
-    numberColor: "#f9d648",
     image: "/images/avantages/manager/Confidentiel-les-donnees-appartiennent-aux-structures.jpg",
-
   },
-]);
+];
 </script>
-
-<style>
-:deep().description-container {
-  height: 15rem;
-}
-
-.row-custom{
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-</style>

components/Logiciels/Manager/Fonctionnalites.vue

@@ -1,29 +1,25 @@
 <template>
-  <div id="Fonctionnalites">
-    <LayoutContainer>
-      
+  <AnchoredSection id="functionalities">
+    <div>
+      <LayoutContainer>
         <v-row>
           <v-col cols="12">
             <CommonCarouselFonctionnalite
               :cards="cards"
-              :functionCarousel="functionCarousel"
-              :itemsToShow="itemsToShow"
             />
           </v-col>
         </v-row>
- 
-    </LayoutContainer>
-  </div>
+      </LayoutContainer>
+    </div>
+  </AnchoredSection>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
 import "vue3-carousel/dist/carousel.css";
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Functionality } from "~/types/interface";
 
-
-const functionCarousel = ref(null);
-
-const cards = [
+const cards: Array<Functionality> = [
   {
     logo:"images/logiciels/manager/fonctionnalites/Espaces_dedies.svg",
     title: "ESPACES DÉDIÉS *",
@@ -67,7 +63,7 @@ const cards = [
       "Création de modèles de courriers, mails ou SMS",
       "Outil de publipostage intégré pour un envoi personnalisé",
     ],
-    option: "* en option",
+    options: ["* en option"]
   },
   {
     logo: "images/logiciels/manager/fonctionnalites/Site_internet.svg",
@@ -107,9 +103,3 @@ const cards = [
   },
 ];
 </script>
-
-<style scoped>
-.container-green {
-  background-color: #0e2d32;
-}
-</style>

components/Logiciels/Manager/Formation.vue

@@ -1,72 +1,75 @@
 <template>
-  <div id="Formations">
+  <AnchoredSection id="webinars">
     <LayoutContainer>
-      <div class="container-green mt-12">
+      <div class="alt-theme pt-6 mt-12">
         <v-row>
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Nos accompagnements pour aller plus loin '"
-            title-color="#fff"
-            class="mb-6 mt-6"
-          />
+          <LayoutUISubTitle class="mb-6 mt-6">
+            Nos accompagnements pour aller plus loin
+          </LayoutUISubTitle>
         </v-row>
-        <v-row class="mb-6">
-          <v-col cols="6" v-for="(formation, index) in formations" :key="index">
-            <div class="image-wrapper mb-6">
-              <div :class="formation.overlayClass"></div>
-              <div
-                :style="{ backgroundImage: 'url(' + formation.image + ')' }"
+
+        <v-row class="formation pb-6 align-center">
+          <v-col
+            cols="6"
+            v-for="(formation, index) in formations"
+            :key="index"
+          >
+            <div class="mb-6">
+              <v-img
+                :src="formation.image"
                 class="background-img"
-              ></div>
+              />
             </div>
-            <div class="col-details">
-              <h4 class="session-title">
+
+            <div>
+              <h4>
                 {{ formation.sessions }}
               </h4>
-              <h3 class="formation-title">{{ formation.title }}</h3>
-              <p class="formation-details">{{ formation.description }}</p>
-              <br />
+
+              <h3>
+                {{ formation.title }}
+              </h3>
+
+              <p class="details mb-5">
+                {{ formation.description }}
+              </p>
+
+              <v-btn :to="formation.link">
+                {{ formation.buttonText }}
+              </v-btn>
             </div>
-            <nuxt-link :to="formation.link">
-              <v-btn class="formation-btn mt-6">{{
-                formation.buttonText
-              }}</v-btn>
-            </nuxt-link>
           </v-col>
         </v-row>
       </div>
-      <v-row>
-        <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="' Quelques chiffres'"
-          class="mt-6 mb-12"
-        />
+
+      <v-row class="align-center">
+        <LayoutUISubTitle>
+          Quelques chiffres
+        </LayoutUISubTitle>
       </v-row>
 
       <v-container>
-        <v-row class="card-container mb-12">
+        <v-row class="card-container justify-center mb-12">
           <v-col
             cols="3"
             class="d-flex justify-center align-center small-padding"
           >
             <CommonCardStat
-              :number="140"
+              number="140"
               text="Structures en réseau"
               backgroundColor="#d8050b"
             />
           </v-col>
           <v-col cols="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :number="'300 000'"
+              number="300 000"
               text="Utilisateurs"
               backgroundColor="#d8050b"
             />
           </v-col>
           <v-col cols="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :number="12"
+              number="12"
               text="Années de collaboration"
               backgroundColor="#d8050b"
             />
@@ -75,22 +78,24 @@
       </v-container>
 
       <v-row>
-        <v-col cols="12">
-          <h2 class="text-center" style="font-size: 2rem">
+        <v-col cols="12" class="justify-center">
+          <span class="cmf-trust-statement">
             La plus grande Confédération Musicale de France nous fait confiance
-          </h2>
+          </span>
         </v-col>
       </v-row>
 
-      <!-- <h4 class="text-center title-cmf">
-        La plus grande Confédération Musicale de France nous fait confiance
-      </h4> -->
-      <v-img src="/images/logiciels/manager/cmf.jpg" class="cmf-img mb-6" />
+      <v-img
+        src="/images/logiciels/manager/cmf.jpg"
+        class="cmf-img mb-6"
+      />
     </LayoutContainer>
-  </div>
+  </AnchoredSection>
 </template>
 
 <script setup>
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+
 const formations = ref([
   {
     id: 1,
@@ -126,90 +131,72 @@ const items = ref([
 </script>
 
 <style scoped>
-:deep(.card) {
-  color: white;
-}
-
-:deep(.chiffre) {
-  color: white;
-}
-.v-container {
-  padding: 0 !important;
-}
 .v-row {
   max-width: 1600px;
-  margin-right: auto;
-  margin-left: auto;
+  margin: 0 auto;
 }
-.cmf-img {
-  width: 30rem;
-  height: 18rem;
-  margin-top: 2rem;
-  margin-right: auto;
-  margin-left: auto;
-}
-.image-wrapper {
-  position: relative;
+
+:deep(h2) {
+  width: 60rem;
 }
+
 .background-img {
   width: 600px;
-  margin-left: 5rem;
   height: 400px;
   background-size: cover;
   background-position: center;
 }
 
-.col-details {
-  margin-right: 6rem;
-  margin-left: 5rem;
-  height: 15rem;
-}
+.formation {
+  .v-btn {
+    font-family: "Barlow", serif;
+    font-style: normal;
+    width: 30rem;
+    height: 4rem;
+    font-weight: 500;
+    font-size: 1.5rem;
+    line-height: 18px;
+    background: transparent;
+    color: #eff9fb;
+    border: 1px solid #eff9fb;
+    border-radius: 0.5rem;
+    text-transform: none;
+  }
 
-.formation-btn {
-  margin-left: 5rem;
-  font-family: "Barlow";
-  font-style: normal;
-  width: 30rem;
-  height: 4rem;
-  font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 18px;
-  background: transparent;
-  color: #eff9fb;
-  border: 1px solid #eff9fb;
-  border-radius: 0.5rem;
-  text-transform: none;
-}
-.formation-details {
-}
-.formation-title {
-  font-weight: 500;
-  font-size: 1.8rem;
-  line-height: 26px;
-  color: #ffffff;
-  margin-bottom: 3rem;
-}
+  h3 {
+    font-weight: 500;
+    font-size: 1.8rem;
+    line-height: 26px;
+    color: #ffffff;
+    margin-bottom: 3rem;
+  }
 
-.session-title {
-  font-weight: 500;
-  font-size: 1.8rem;
-  line-height: 26px;
-  color: #ffffff;
-  margin-bottom: 3rem;
-}
+  h4 {
+    font-weight: 500;
+    font-size: 1.8rem;
+    line-height: 26px;
+    color: #ffffff;
+    margin-bottom: 3rem;
+  }
 
-.container-green {
-  background-color: #0e2d32;
-  padding: 20px;
-  margin-bottom: 20px;
-  color: white;
+  .details {
+    font-weight: 300;
+    font-size: 1.2rem;
+    line-height: 1.5rem;
+    color: #eff9fb;
+  }
 }
 
-.card-container {
-  margin-left: auto;
+.cmf-img {
+  width: 30rem;
+  height: 18rem;
+  margin-top: 2rem;
   margin-right: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  margin-left: auto;
+}
+
+.cmf-trust-statement {
+  font-size: 2rem;
+  text-align: center;
 }
 </style>

components/Logiciels/Manager/Network.vue

@@ -0,0 +1,56 @@
+<template>
+  <AnchoredSection id="network">
+    <LayoutContainer>
+      <v-row class="mt-12">
+        <LayoutUISubTitle>
+          Un réseau pyramidal
+        </LayoutUISubTitle>
+      </v-row>
+
+      <v-row>
+        <v-col cols="12" lg="6" md="6">
+          <LayoutUITitle>
+            Opentalent Manager, un logiciel adapté à chacun
+          </LayoutUITitle>
+
+          <p class="pyramide-details ml-3 mt-6">
+            Notre système s'adapte à toutes les structures de réseau pyramidal, quel que soit le nombre de niveau.
+          </p>
+        </v-col>
+
+        <v-col cols="12" lg="6" md="6">
+          <v-img
+            src="/images/logiciels/manager/reseau.png"
+            class="schema-manager"
+          />
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </AnchoredSection>
+</template>
+
+<script setup lang="ts">
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+</script>
+
+<style scoped lang="scss">
+.v-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 2000px) {
+  .v-row {
+    width: 70%;
+  }
+}
+
+.pyramide-details {
+  font-size: 2.125rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 2.375rem;
+  width: 40rem;
+}
+</style>

components/Logiciels/Manager/Presentation.vue

@@ -1,29 +1,32 @@
 <template>
-  <LayoutContainer>
-    <div id="Presentation">
-      <CommonPresentation
-        title="Présentation d'Opentalent Manager"
-        section1title="La solution de mise en réseau des organisations culturelles"
-        :features="features"
-        :pictos="pictos"
-        logo-src="/images/logo/logiciels/OT_Manager-BLANC.png"
-        pricing-alt-text="Sur devis"
-        pricing-announcement-text=""
-        pricing-from-text=""
-        pricing-period-text=""
-      />
-    </div>
+  <AnchoredSection id="presentation">
+    <LayoutContainer>
+      <div>
+        <CommonPresentation
+          title="Présentation d'Opentalent Manager"
+          section1title="La solution de mise en réseau des organisations culturelles"
+          :features="features"
+          :pictos="pictos"
+          logo-src="/images/logo/logiciels/OT_Manager-BLANC.png"
+          pricing-alt-text="Sur devis"
+          pricing-announcement-text=""
+          pricing-from-text=""
+          pricing-period-text=""
+        />
+      </div>
 
-    <CommonContainerVideo
-      title="Logiciel OpenTalent Manager"
-      quote="Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel"
-      image-url="/images/logiciels/school/screen2.png"
-    />
-  </LayoutContainer>
+      <CommonContainerVideo
+        title="Logiciel OpenTalent Manager"
+        quote="Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel"
+        image-url="/images/logiciels/school/screen2.png"
+      />
+    </LayoutContainer>
+  </AnchoredSection>
 </template>
 
 <script setup lang="ts">
 import { FeaturePicto } from "~/types/interface";
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 const features: Array<string> = [
   "Logiciel de gestion et communication en ligne ",

components/Logiciels/Manager/Pyramide.vue

@@ -1,67 +0,0 @@
-<template>
-  <div id="détails">
-    <LayoutContainer>
-        <v-row class="mt-12 custom-row">
-        <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Un réseau pyramidal '"
-          :iconColor="'#E34461'"
-        />
-      </v-row>
-
-      <v-row class="custom-row">
-        <v-col cols="12" lg="6" md="6">
-          <LayoutUITitle
-          title="Opentalent Manager, un logiciel adapté à chacun "
-        />
-        <p class="pyramide-details ml-3 mt-6">Notre système s'adapte à toutes les structures de réseau pyramidal, quel que soit le nombre de niveau.</p>
-        </v-col>
-
-        <v-col cols="12" lg="6" md="6">
-          <v-img
-            src="/images/logiciels/manager/reseau.png"
-            class="schema-manager"
-          />
-        </v-col>
-      </v-row>
-
-
-    </LayoutContainer>
-  </div>
-</template>
-
-<script setup></script>
-
-<style scoped>
-
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@media (min-width: 2000px) {
-  .custom-row {
-    width: 70%;
-  }
-}
-
-.pyramide-details {
-  color: #071B1F;
-font-size: 2.125rem;
-font-style: normal;
-font-weight: 400;
-line-height: 2.375rem; 
-width: 40rem;
-}
-
-.v-row {
-  margin-top: 0px !important;
-  margin-left: auto;
-  margin-right: auto;
-}
-.schema-manager {
-}
-
-</style>

components/Logiciels/Manager/Reviews.vue

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

components/Logiciels/School/Banner.vue

@@ -15,6 +15,7 @@
           image-alt="line"
           square-text="École de musique, d'art, de danse, de cirque, conservatoires et MJC"
           logo-src="/images/logo/logiciels/School-Blanc.png"
+          :logo-alt-theme="true"
         />
       </v-col>
     </v-row>
@@ -31,3 +32,5 @@
   object-position: center 40% !important;
 }
 </style>
+<script setup lang="ts">
+</script>

components/Logiciels/School/Formations.vue

@@ -15,11 +15,10 @@
             :key="index"
           >
             <div class="mb-6">
-              <div :class="formation.overlayClass"></div>
-              <div
-                :style="{ backgroundImage: 'url(' + formation.image + ')' }"
+              <v-img
+                :src="formation.image"
                 class="background-img"
-              ></div>
+              />
             </div>
 
             <div>

pages/opentalent_manager.vue

@@ -12,9 +12,11 @@
 
     <LogicielsManagerAvantages />
 
-    <LogicielsManagerFonctionnalites />
+    <div v-if="mdAndUp" class="alt-theme">
+      <LogicielsManagerFonctionnalites />
+    </div>
 
-    <LogicielsManagerPyramide />
+    <LogicielsManagerNetwork />
 
     <LogicielsManagerFormation />
 
@@ -29,15 +31,19 @@
 </template>
 
 <script setup lang="ts">
-import { StickyMenuAction } from "~/types/interface";
+import { MenuScroll, StickyMenuAction } from "~/types/interface";
 import { StickyMenuActionType } from "~/types/enum/layout";
+import { useDisplay } from "vuetify";
 
-const menus = ref([
-  { id: "Presentation", label: "Présentation", element: null },
-  { id: "Avantages", label: "Avantages", element: null },
-  { id: "Fonctionnalites", label: "Fonctionnalités", element: null },
-  { id: "Formations", label: "Formations", element: null },
-  { id: "Temoignages", label: "Témoignages", element: null },
+const { mdAndUp } = useDisplay()
+
+const menus: Array<MenuScroll> = ref([
+  { anchor: "presentation", label: "Présentation" },
+  { anchor: "benefits", label: "Avantages" },
+  { anchor: "functionalities", label: "Fonctionnalités" },
+  { anchor: "network", label: "Réseau" },
+  { anchor: "webinars", label: "Formations" },
+  { anchor: "testimonials", label: "Témoignages" },
 ]).value;
 
 const stickyMenuActions: Array<StickyMenuAction> = [

types/interface.d.ts

@@ -57,12 +57,14 @@ interface FeaturePicto {
   text: string
 }
 
+// TODO: vérifier l'utilité des props list et isMemberCmf
 interface Benefit {
   title: string;
   number: string;
   description: string;
   image: string;
-  isMemberCMF: boolean;
+  list?: string[],
+  isMemberCMF?: boolean;
 }
 
 interface Functionality {