refactor Presentation section of software pages

assets/style/theme.scss

@@ -1,6 +1,7 @@
 
 body {
   --neutral-color: #ffffff;
+  --primary-color-alt: #fef3ce;
   --on-neutral-color: #000000;
   --primary-color: #0e2d32;
   --on-primary-color: #ffffff;

components/Common/Presentation.vue

@@ -1,279 +1,252 @@
+<!--
+Section "Présentation" d'une page Logiciel
+-->
 <template>
   <div id="Presentation">
     <LayoutContainer>
-      <v-row class="custom-row" >
+      <v-row>
+
+        <!-- Colonne 1 (sous-titre, illustration logiciels, prix) -->
         <v-col cols="5">
-          <LayoutUISubTitle
-            :iconSize="5"
-            :iconColor="iconColor"
-            :titleText="titleText"
-            class="ml-8"
+          <LayoutUISubTitle class="ml-8" >
+            {{ title }}
+          </LayoutUISubTitle>
+
+          <v-img
+            src="/images/logiciels/Opentalent-disponible-su-Multi-support.png"
+            class="w-100"
           />
-          <!-- <div class="screen-img"></div> -->
-          <v-img src="/images/logiciels/Opentalent-disponible-su-Multi-support.png" class="screen-img" />
 
-          <div
-            :style="{ backgroundColor: backgroundColor }"
-            class="rectangle-4 ml-6"
-          >
-            <div :style="{ backgroundColor: circleColor }" class="black-circle">
-              <div class="content-flex  ml-6">
-                <v-img :src="logoSrc" class="logo-manager" />
-                <div class="pricing-details">
-                  <p class="pricing-small-text">{{ pricingFromText }}</p>
-                  <p class="pricing-big-text">
-                    {{ pricingAmount }}
-                    <span class="smaller-text">{{ pricingPeriodText }}</span>
-                  </p>
-                  <p class="pricing-small-text">
-                    {{ pricingAnnouncementText }}
-                  </p>
-                </div>
+          <div class="pricing-rectangle rectangle-4 ml-6">
+            <div class="logo-circle">
+              <div class="content-flex ml-6">
+                <v-img
+                  :src="logoSrc"
+                  class="software-logo"
+                />
               </div>
             </div>
+
+            <div v-if="pricingAmount" class="details">
+              <p class="small-text">
+                {{ pricingFromText }}
+              </p>
+              <p class="big-text">
+                {{ pricingAmount }}
+                <span class="smaller-text">
+                  {{ pricingPeriodText }}
+                </span>
+              </p>
+              <p class="small-text">
+                {{ pricingAnnouncementText }}
+              </p>
+            </div>
+            <div v-else class="details medium-text">
+              {{ pricingAltText }}
+            </div>
           </div>
         </v-col>
 
+        <!-- Colonne 2 (présentation, pictogrammes des fonctionnalités) -->
         <v-col cols="6">
-          <LayoutUITitle :title="presentationText.toolTitle" />
-          <ul class="outil-ul ml-12 mt-6">
+          <h3>
+            {{ section1title }}
+          </h3>
+
+          <ul class="ml-12 mt-6">
             <li
-              class="outil-list"
-              v-for="item in presentationText.toolList"
+              v-for="item in features"
               :key="item"
             >
               {{ item }}
             </li>
           </ul>
-          <h2 class="mt-12 ml-6 presentation-caracteristique">
-            {{ presentationText.characteristicsTitle }}
-          </h2>
-            <div class="picto-container">
-              <div
-                class="picto-group"
-                v-for="picto in pictoImages"
-                :key="picto.text"
-              >
-                <div
-                  :style="{ backgroundImage: 'url(' + picto.src + ')' }"
-                  class="picto-img"
-                ></div>
-                <p class="picto-text" :style="{ color: pictoColor }">
-                  {{ picto.text }}
-                </p>
-              </div>
+
+          <h3 class="mt-12 ml-6">
+            {{ section2title }}
+          </h3>
+
+          <div class="d-flex flex-row">
+            <div
+              v-for="picto in pictos"
+              :key="picto.text"
+              class="picto"
+            >
+              <v-img :src="picto.src" class="img" />
+
+              <p class="text">
+                {{ picto.text }}
+              </p>
             </div>
+          </div>
         </v-col>
       </v-row>
     </LayoutContainer>
   </div>
 </template>
 
-<script setup>
-import { computed } from "vue";
-import { useRoute } from "vue-router";
+<script setup lang="ts">
+import { PropType } from "@vue/runtime-core";
+import { FeaturePicto } from "~/types/interface";
 
 const route = useRoute();
 
-const pricingAmount = computed(() => {
-  if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
-    return "14€";
-  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
-    return "20€";
-  }else {
-    return "Sur devis";
-  }
-});
-
-const logoSrc = computed(() => {
-  if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
-    return "/images/logo/logiciels/OT_Artist-BLANC.png";
-  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
-    return "/images/logo/logiciels/OT_School-blanc.png";
-  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
-    return "/images/logo/logiciels/OT_Manager-BLANC.png";
-  }
-});
-
-const titleText = computed(() => {
-  if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
-    return "Présentation d'Opentalent Artist";
-  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
-    return "Présentation d'Opentalent School";
-  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
-    return "Présentation d'Opentalent Manager";
-  } else {
-    return "Titre par défaut"; 
-  }
-});
-
-const iconColor = computed(() => {
-  if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
-    return "#fac20a";
-  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
-    return "rgba(32, 147, 190, 0.6)";
-  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
-    return "#d8050b";
-  } else {
-    return "rgba(32, 147, 190, 0.6)"; 
-  }
-});
-
-// on affiche " à partir de" sur opentalent_school et artist
-const pricingFromText = computed(() => {
-  if (/^\/opentalent_artist(\/|$)/.test(route.path) || /^\/opentalent_school(\/|$)/.test(route.path)) {
-    return "à partir de";
-  }else{
-    return ''
-  }
-
-})
 const props = defineProps({
-  pictoImages: {
-    type: Array,
-    default: () => [],
+  title: {
+    type: String,
+    required: true
   },
-  pictoColor: {
+  section1title: {
     type: String,
-    default: "#000000",
+    required: false,
+    default: "Un outil complet en ligne"
+  },
+  section2title: {
+    type: String,
+    required: false,
+    default: "Des caractéristiques uniques & dédiée"
+  },
+  features: {
+    type: Object as PropType<Array<string>>,
+    required: true
   },
-  presentationText: {
-    type: Object,
-    default: () => ({
-      toolTitle: "Default Title",
-      toolList: [],
-      characteristicsTitle: "Default Characteristics Title",
-    }),
+  pictos: {
+    type: Array as PropType<Array<FeaturePicto>>,
+    required: true
   },
   logoSrc: {
     type: String,
     default: "",
   },
   pricingFromText: {
-    type: String
+    type: String,
+    required: false,
+    default: "à partir de"
   },
   pricingAmount: {
     type: String,
-    default: "sur devis",
-    class: "pricing-big-text",
+    default: ""
   },
   pricingPeriodText: {
     type: String,
+    required: false,
+    default: "mois"
   },
   pricingAnnouncementText: {
     type: String,
+    required: false,
+    default: "payable annuellement"
   },
-  backgroundColor: {
-    type: String,
-    default: "rgba(32, 147, 190, 0.2)",
-  },
-  circleColor: {
-    type: String,
-    default: "#091d20",
-  },
+  pricingAltText: {
+    required: false,
+    default: ""
+  }
 });
-
-
 </script>
 
-<style scoped>
-
-.custom-row {
+<style scoped lang="scss">
+.v-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.picto-img {
-  width: 200px;
-  height: 200px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
 
-.presentation-caracteristique {
-  color: #071b1f;
-  font-size: 34px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 38px;
-}
-.pricing-details {
+.pricing-rectangle {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: black;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-left: 7rem;
-  margin-top: -3rem;
-  width: 10rem;
-}
+  flex-direction: row;
+  background-color: var(--secondary-color);
+  width: 380px;
+  height: 6rem;
+  border-radius: 3rem;
+  margin-top: 2rem;
 
-.pricing-small-text {
-  font-size: 0.6em;
-}
+  .logo-circle {
+    background-color: var(--on-primary-color);
+    border-radius: 3rem;
+    width: 7rem;
+    height: 6rem;
+  }
 
-.pricing-big-text {
-  font-size: 2.5rem;
-  font-weight: bold;
-  line-height: 2rem;
-  margin-left: 1rem;
-}
+  .software-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top:1rem;
+    right: .5rem;
+  }
 
-.smaller-text {
-  font-size: 0.6em;
-}
-.black-circle {
-  border-radius: 3rem;
-  background: #091d20;
-  width: 7rem;
-  height: 6rem;
-}
+  .details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: black;
+    font-weight: 500;
+    font-size: 1rem;
+    width: 10rem;
+    margin-left: 18px;
+  }
 
+  .small-text {
+    font-size: 0.6em;
+  }
 
-.logo-manager {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top:1rem;
-  right: .5rem;
-}
-.rectangle-4 {
-  width: 380px;
-  height: 6rem;
-  background: rgba(32, 147, 190, 0.2);
-  border-radius: 3rem;
-  margin-top: 2rem;
-}
-.picto-text {
-  font-weight: 300;
-  font-size: 0.9rem;
-  margin-top: -3rem;
-  text-align: center;
-  width: 60%;
-  margin-right: auto;
-  margin-left: auto;
-}
-.picto-container {
-  display: flex;
-  flex-direction: row;
+  .big-text {
+    font-size: 2.5rem;
+    font-weight: bold;
+    line-height: 2rem;
+    margin-left: 1rem;
+  }
+
+  .smaller-text {
+    font-size: 0.6em;
+  }
+
+  .medium-text {
+    font-size: 1.5rem;
+    font-weight: 400;
+  }
 }
-.picto-group {
+
+.picto {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-left: -4rem;
+
+  .text {
+    font-weight: 300;
+    font-size: 0.9rem;
+    margin-top: -3rem;
+    text-align: center;
+    width: 60%;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .img {
+    width: 200px;
+    height: 200px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
 }
 
-.picto-container {
-  display: flex;
-  flex-direction: row;
+h3 {
+  color: var(--on-primary-color);
+  font-size: 34px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 38px;
 }
 
-.screen-img {
-  width: 100%;
+h3:first-child {
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 3rem;
+  margin-left: 1rem;
+  width: 35rem;
 }
 </style>

components/Layout/UI/SubTitle.vue

@@ -1,70 +1,37 @@
+<!--
+Titre H4 précédé d'une puce
+-->
 <template>
   <LayoutContainer>
-    <div class="title-container">
+    <div class="container">
       <v-icon
+        :icon="icon"
         :size="iconSize"
-        :style="{ color: iconColor }"
-        :class="iconClasses"
       />
-      <h4 class="presentation-title" :style="{ color: titleColor }">
-        {{ titleText }}
-      </h4>
+      <h2>
+        <slot />
+      </h2>
     </div>
   </LayoutContainer>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const router = useRouter();
 
-const iconColor = ref("#2093BE4D");
-
-const updateIconColor = computed(() => {
-  const path = router.currentRoute.value.path;
-
-  if (/^\/opentalent_school\/?$/.test(path)) {
-    return "#2093BE4D";
-  } else if (/^\/opentalent_artist\/?$/.test(path)) {
-    return "#FAC20A";
-  } else if (/^\/opentalent_manager\/?$/.test(path)) {
-    return "#D8050B";
-  } else {
-    return "#9edbdd";
-  }
-});
-
-watch(
-  () => router.currentRoute.value,
-  () => {
-    iconColor.value = updateIconColor.value;
-  },
-  { immediate: true }
-);
-
 const props = defineProps({
+  icon: {
+    type: String,
+    default: "fas fa-circle",
+  },
   iconSize: {
     type: [String, Number],
     default: 5,
   },
-  iconClasses: {
-    type: String,
-    default: "fa-solid fa-circle icon-title",
-  },
-  titleText: {
-    type: String,
-    default: "default title",
-  },
-  iconColor: {
-    type: String,
-  },
-  titleColor: {
-    type: String,
-    default: "#071b1f",
-  },
 });
 </script>
 
-<style scoped>
-.title-container {
+<style scoped lang="scss">
+.container {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -77,13 +44,17 @@ const props = defineProps({
   text-transform: uppercase;
 }
 
-.presentation-title {
-  font-weight: 500;
-  color: var(--Vert-90, #0E2D32); 
+.v-icon {
+  color: var(--on-primary-color-alt);
+}
 
+h2 {
+  color: var(--on-neutral-color);
+  font-weight: 500;
   font-size: 1rem;
   line-height: 15px;
   letter-spacing: 1px;
   text-transform: uppercase;
 }
+
 </style>

components/Layout/UI/Title.vue

@@ -1,26 +1,18 @@
+<!-- Titre H2 -->
 <template>
   <LayoutContainer>
-    <h2
-      class="title"
-      :style="{ color: titleColor }"
-    >
-      {{ title }}
+    <h2>
+      <slot />
     </h2>
   </LayoutContainer>
 </template>
 
 <script setup lang="ts">
-  const props = defineProps({
-    title: String,
-    titleColor: {
-      type: String,
-      default: "#0E2D32",
-    },
-  });
 </script>
 
 <style scoped lang="scss">
-  .title {
+  h2 {
+    color: var(--on-primary-color);
     font-weight: 600;
     font-size: 3rem;
     line-height: 3rem;

components/Logiciels/Artist/Presentation.vue

@@ -1,21 +1,30 @@
 <template>
   <AnchoredSection id="presentation">
     <CommonPresentation
-      :pictoImages="pictoData"
-      :presentationText="presentationData"
-      :backgroundColor="'rgba(250, 194, 10, 0.2)'"
-      pricingPeriodText="/mois"
-      pricingAnnouncementText="payable annuellement"
+      title="Présentation d'Opentalent Artist"
+      :features="features"
+      :pictos="pictos"
+      logo-src="/images/logo/logiciels/OT_Artist-BLANC.png"
+      pricingAmount="14€"
     />
 
-    <CommonContainerVideo image-url="/images/logiciels/school/screen2.png" />
+    <CommonContainerVideo
+      image-url="/images/logiciels/school/screen2.png"
+    />
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
-const pictoData = [
+const features = [
+  "Logiciel de gestion et communication en ligne",
+  "Destiné aux structures culturelles (tout statut juridique)",
+  "Gestion complète (membres, événements, planning, matériel,...)",
+  "Une solution simple d'utilisation, intuitive et collaborative"
+]
+
+const pictos = [
   {
     src: "/images/logiciels/artist/picto1.png",
     text: "Logiciel de gestion et communication full web",
@@ -30,15 +39,4 @@ const pictoData = [
   },
   { src: "/images/logiciels/artist/picto4.png", text: "Communiquez en réseau" },
 ];
-
-const presentationData = {
-  toolTitle: "Un outil complet en ligne",
-  toolList: [
-    "Logiciel de gestion et communication en ligne",
-    "Destiné aux structures culturelles (tout statut juridique)",
-    "Gestion complète (membres, événements, planning, matériel,...)",
-    "Une solution simple d'utilisation, intuitive et collaborative",
-  ],
-  characteristicsTitle: "Des caractéristiques uniques & dédiées",
-};
 </script>

components/Logiciels/Manager/Presentation.vue

@@ -2,18 +2,35 @@
   <LayoutContainer>
     <div id="Presentation">
       <CommonPresentation
-        :pictoImages="pictoData"
-        :presentationText="presentationData"
-        :backgroundColor="'rgba(216, 5, 11, 0.2)'"
+        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 image-url="/images/logiciels/school/screen2.png" />
+    <CommonContainerVideo
+      image-url="/images/logiciels/school/screen2.png"
+    />
   </LayoutContainer>
 </template>
 
-<script setup>
-const pictoData = [
+<script setup lang="ts">
+import { FeaturePicto } from "~/types/interface";
+
+const features: Array<string> = [
+  "Logiciel de gestion et communication en ligne ",
+  "Répond aux besoins globaux des réseaux culturels ",
+  "Gestion collaborative ",
+  "Mise en valeur des activités des membres du réseau ",
+]
+
+const pictos: Array<FeaturePicto> = [
   {
     src: "/images/logiciels/manager/picto1.png",
     text: "Logiciel de gestion et communication full web",
@@ -39,36 +56,4 @@ const pictoData = [
     text: "Pout tout type de réseau pyramidal",
   },
 ];
-
-const presentationData = {
-  toolTitle: "La solution de mise en réseau des organisations culturelles ",
-  toolList: [
-    "Logiciel de gestion et communication en ligne ",
-    "Répond aux besoins globaux des réseaux culturels ",
-    "Gestion collaborative ",
-    "Mise en valeur des activités des membres du réseau ",
-  ],
-  characteristicsTitle: "Des caractéristiques uniques & dédiées",
-};
 </script>
-
-<style scoped>
-:deep().pricing-big-text {
-  font-size: 1.5rem;
-  font-weight: normal;
-  line-height: 1.5rem;
-  margin-top: 1.5rem;
-}
-
-:deep().picto-group {
-  display: flex;
-  flex-direction: column;
-  margin-left: -4rem;
-}
-
-:deep().picto-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-</style>

components/Logiciels/School/Presentation.vue

@@ -2,25 +2,32 @@
   <LayoutContainer>
     <div id="Presentation">
       <CommonPresentation
-        :pictoImages="pictoData"
-        :presentationText="presentationData"
-        :pricing-amount="'20€'"
-        pricingFromText="à partir de"
-        pricingPeriodText="/mois"
-        pricingAnnouncementText="payable annuellement"
-        
+        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"
-      
+
     />
   </LayoutContainer>
 </template>
 
-<script setup>
-const pictoData = [
+<script setup lang="ts">
+import { FeaturePicto } from "~/types/interface";
+
+const features = [
+  "Logiciel de gestion et communication en ligne",
+  "Destiné aux établissements d'enseignement artistique",
+  "Gestion quotidienne et en temps réel",
+  "Pilotage complet de votre structure",
+]
+
+const pictos: Array<FeaturePicto> = [
   {
     src: "/images/logiciels/school/picto1.png",
     text: "Logiciel de gestion et communication full web",
@@ -35,19 +42,4 @@ const pictoData = [
   },
   { src: "/images/logiciels/school/picto4.png", text: "Communiquez en réseau" },
 ];
-
-const presentationData = {
-  toolTitle: "Un outil complet en ligne",
-  toolList: [
-    "Logiciel de gestion et communication en ligne",
-    "Destiné aux établissements d'enseignement artistique",
-    "Gestion quotidienne et en temps réel",
-    "Pilotage complet de votre structure",
-  ],
-  characteristicsTitle: "Des caractéristiques uniques & dédiées",
-};
 </script>
-
-<style scoped>
-
-</style>

pages/opentalent_artist.vue

@@ -40,7 +40,7 @@
 import { StickyMenuActionType } from "~/types/enum/layout";
 import { MenuScroll, StickyMenuAction } from "~/types/interface";
 
-const menus = [
+const menus: Array<MenuScroll> = [
   { anchor: "presentation", label: "Présentation" },
   { anchor: "benefits", label: "Avantages" },
   { anchor: "functionalities", label: "Fonctionnalités" },
@@ -71,6 +71,7 @@ const stickyMenuActions: Array<StickyMenuAction> = [
 <style lang="scss">
 .theme-artist {
   --primary-color: #ffffff;
+  --secondary-color: #fef3ce;
   --on-primary-color: #0e2d32;
   --on-primary-color-alt: #fac20a;
 }

pages/opentalent_manager.vue

@@ -1,30 +1,31 @@
 <template>
-  <LayoutNavigation />
+  <div class="theme-manager">
+    <LayoutNavigation />
 
-  <LogicielsManagerBanner />
+    <LogicielsManagerBanner />
 
-  <CommonMenuScroll :menus="menus" class="mb-6" />
+    <CommonMenuScroll :menus="menus" class="mb-6" />
 
-  <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonStickyMenu :actions="stickyMenuActions" />
 
-  <LogicielsManagerPresentation />
+    <LogicielsManagerPresentation />
 
-  <LogicielsManagerAvantages />
+    <LogicielsManagerAvantages />
 
-  <LogicielsManagerFonctionnalites />
+    <LogicielsManagerFonctionnalites />
 
-  <LogicielsManagerPyramide />
+    <LogicielsManagerPyramide />
 
-  <LogicielsManagerFormation />
+    <LogicielsManagerFormation />
 
-  <LogicielsManagerReviews />
+    <LogicielsManagerReviews />
 
-  <LayoutFAQ />
+    <LayoutFAQ />
 
-  <LayoutFooterSolutionsFooter />
-
-  <LayoutFooter />
+    <LayoutFooterSolutionsFooter />
 
+    <LayoutFooter />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -65,4 +66,10 @@ const stickyMenuActions: Array<StickyMenuAction> = [
 
 
 <style scoped>
+.theme-manager {
+  --primary-color: #ffffff;
+  --secondary-color: #f7cdce;
+  --on-primary-color: #0e2d32;
+  --on-primary-color-alt: #d8050b;
+}
 </style>

pages/opentalent_school.vue

@@ -81,6 +81,7 @@ const stickyMenuActions: Array<StickyMenuAction> = [
 <style scoped lang="scss">
 .theme-school {
   --primary-color: #ffffff;
+  --secondary-color: #c3e5e7;
   --on-primary-color: #0e2d32;
   --on-primary-color-alt: #c3e5e7;
 }

types/interface.d.ts

@@ -51,3 +51,8 @@ interface MenuScroll {
   label: string,
   anchor: string
 }
+
+interface FeaturePicto {
+  src: string,
+  text: string
+}