refactor the Video section of the software pages

components/Common/ContainerVideo.vue

@@ -1,97 +1,65 @@
 <template>
-  <div id="Presentation">
-    <LayoutContainer>
-      <div class="container-green">
-        <v-row class="mt-12">
-          <v-row>
-            <v-col cols="6">
-              <LayoutUISubTitle
-                class="mt-6"
-                :iconSize="5"
-                :iconColor="iconColor"
-                :titleText="titleText"
-                :titleColor="'#ffffff'"
-              />
-              <p class="citation-school">
-                {{ currentCitation }}
-              </p>
-            </v-col>
+  <LayoutContainer>
+    <div class="container-green">
+      <v-row class="mt-12">
+        <v-row>
+          <v-col cols="6">
+            <LayoutUISubTitle class="mt-6">
+              {{ title }}
+            </LayoutUISubTitle>
 
-            <v-col cols="6">
-              <div class="screen-img-3"></div>
-              <div class="play-icon-container">
-                <i class="fas fa-play"></i>
-              </div>
-            </v-col>
-          </v-row>
-        </v-row>
-      </div>
-    </LayoutContainer>
-  </div>
-</template>
+            <p class="quote">
+              {{ quote }}
+            </p>
+          </v-col>
 
-<script setup>
-import { computed } from "vue";
-import { useRoute } from "vue-router";
+          <v-col cols="6">
+            <div class="screen-img-3" />
 
-const route = useRoute();
-
-const titleText = computed(() => {
-  if (/^\/opentalent_school(\/|$)/.test(route.path)) {
-    return "Logiciel OpenTalent School";
-  } else if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
-    return "Logiciel OpenTalent Artist";
-  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
-    return "Logiciel OpenTalent Manager";
-  }
-});
-
-const currentCitation = computed(() => {
-  if (/^\/opentalent_school(\/|$)/.test(route.path)) {
-    return "Pour les petits comme pour les grands établissements d’enseignement artistique.";
-  } else if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
-    return "Le logiciel de gestion et communication au service de votre passion";
-  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
-    return "Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel.";
-  } else {
-    return "Citation par défaut";
-  }
-});
+            <div class="play-icon-container">
+              <i class="fas fa-play"></i>
+            </div>
+          </v-col>
+        </v-row>
+      </v-row>
+    </div>
+  </LayoutContainer>
+</template>
 
-const iconColor = computed(() => {
-  if (/^\/opentalent_school(\/|$)/.test(route.path)) {
-    return "rgba(32, 147, 190, 0.6)";
-  } else if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
-    return "#fac20a";
-  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
-    return "rgb(216, 5, 11)";
-  } else {
-    return "rgba(32, 147, 190, 0.6)";
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  quote: {
+    type: String,
+    required: true
   }
-});
+})
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.v-container {
+  padding: 0 !important;
+}
+
+.v-row {
+  width: 90% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
 
 .play-icon-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 3rem; 
-  color: white; 
+  font-size: 3rem;
+  color: white;
   cursor: pointer;
 }
 
-
-.v-row {
-  width: 90% !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-.v-container {
-  padding: 0 !important;
-}
 .screen-img-3 {
   background-image: url("/images/logiciels/school/screen2.png");
   background-size: cover;
@@ -100,14 +68,13 @@ const iconColor = computed(() => {
   height: 650px;
 }
 
-.citation-school {
+.quote {
   font-style: italic;
   font-weight: 300;
   font-size: 2rem;
   width: 35rem;
   line-height: 40px;
   color: #ffffff;
-  font-style: italic;
   margin-top: 27rem;
   margin-left: 2rem;
 }
@@ -115,6 +82,7 @@ const iconColor = computed(() => {
 .icon-logiciel {
   margin-right: 1rem;
 }
+
 .container-green {
   background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
     rgba(7, 27, 31, 0.3);

components/Logiciels/Artist/Avantages.vue

@@ -1,43 +1,44 @@
+<!--
+Section "Avantages" de la page du logiciel Artist
+-->
+<template>
+  <AnchoredSection id="benefits">
+    <div>
+      <LayoutContainer>
+        <v-row class="row-custom">
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Découvrez les avantages de la solution'"
+            :iconColor="'#fac20a'"
+          />
+          <LayoutUITitle title="Des avantages concrets" />
+        </v-row>
 
-  <template>
-    <AnchoredSection id="benefits">
-      <div>
-        <LayoutContainer>
-          <v-row class="row-custom">
-            <LayoutUISubTitle
-              :iconSize="6"
-              :iconClasses="iconClasses"
-              :titleText="'Découvrez les avantages de la solution'"
-              :iconColor="'#fac20a'"
+        <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="'#fac20a'"
 
             />
-            <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"
-                :dynamicNumberColor="'#fac20a'"
-
-              />
-            </v-col>
-          </v-row>
-        </LayoutContainer>
-      </div>
-    </AnchoredSection>
-  </template>
+          </v-col>
+        </v-row>
+      </LayoutContainer>
+    </div>
+  </AnchoredSection>
+</template>
 
 <script setup>
 import { ref } from "vue";

components/Logiciels/Artist/Presentation.vue

@@ -9,6 +9,8 @@
     />
 
     <CommonContainerVideo
+      title="Logiciel OpenTalent Artist"
+      quote="Le logiciel de gestion et communication au service de votre passion"
       image-url="/images/logiciels/school/screen2.png"
     />
   </AnchoredSection>

components/Logiciels/Manager/Presentation.vue

@@ -15,6 +15,8 @@
     </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>

components/Logiciels/School/Presentation.vue

@@ -14,6 +14,12 @@
       image-url="/images/logiciels/school/screen2.png"
 
     />
+
+    <CommonContainerVideo
+      title="Logiciel OpenTalent School"
+      quote="Pour les petits comme pour les grands établissements d’enseignement artistique"
+      image-url="/images/logiciels/school/screen2.png"
+    />
   </LayoutContainer>
 </template>