refactor the Catalog section of the webinar page

components/Common/Banner/Banner.vue

@@ -9,7 +9,7 @@
             class="cover-image"
           />
 
-          <div class="details-square">
+          <div v-if="logoSrc" class="details-square">
             <v-row>
               <div class="content-row">
                 <img
@@ -24,7 +24,7 @@
             </v-row>
           </div>
 
-          <div :class="'logo-square' + (logoAltTheme ? ' alt-theme' : '')">
+          <div v-if="logoSrc" :class="'logo-square' + (logoAltTheme ? ' alt-theme' : '')">
             <img :src="logoSrc" :alt="logoAlt"/>
           </div>
         </div>
@@ -33,7 +33,7 @@
   </LayoutContainer>
 </template>
 
-<script setup>
+<script setup lang="ts">
 
 const props = defineProps({
   imageSrc: {
@@ -49,11 +49,13 @@ const props = defineProps({
     default: "École de musique, d'art, de danse, de cirque, conservatoires et MJC"
   },
   logoSrc: {
-    type: String,
-    required: true
+    type: String as PropType<string | null>,
+    required: false,
+    default: null
   },
   logoAlt: {
     type: String,
+    required: false,
     default: ""
   },
   logoAltTheme: {

components/Formation/Banner.vue

@@ -8,6 +8,7 @@
     </LayoutUITitlePage>
 
     <v-row>
+      <!-- TODO: remplacer par le component CommonBanner comme dans WebinaireBanner -->
       <v-col cols="12" class="banner-container">
         <v-img
           src="/images/formation/banner.jpg"

components/Formation/Catalogue.vue

@@ -84,7 +84,7 @@
               </v-chip>
 
               <v-chip
-                class="chip-download"
+                class="chip-register"
                 @click="downloadPdf(course.downloadLink)"
               >
                 Télécharger le programme de formation
@@ -309,7 +309,7 @@ const courses: Array<Training> = [
     }
   }
 
-  .chip-download {
+  .chip-register {
     border-radius: 3rem;
     font-family: "Barlow", serif;
     font-style: normal;

components/Webinaire/Banner.vue

@@ -1,54 +1,18 @@
 <template>
   <LayoutContainer>
-    <LayoutUITitlePage
-      title="webinaires"
-      subtitle="Partez à la découverte de vos logiciels Opentalent. "
-    />
+    <LayoutUITitlePage>
+      Webinaires
+      <template #subtitle>Partez à la découverte de vos logiciels Opentalent.</template>
+    </LayoutUITitlePage>
 
     <v-row>
       <v-col cols="12">
         <CommonBanner
-          :imageSrc="'images/banner/Visuel_page_Webinaires.png'"
-          imageAlt="'line'"
+          imageSrc="images/banner/Visuel_page_Webinaires.png"
+          imageAlt="banner"
         />
       </v-col>
     </v-row>
 
   </LayoutContainer>
 </template>
-
-<script setup></script>
-
-<style scoped>
-
-:deep().text-left,
-:deep().text-right,
-:deep().description,
-:deep().details-square,
-:deep().logo-square {
-  display: none;
-}
-:deep().text-right {
-  display: none;
-}
-.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: 0.1rem;
-  margin-bottom: 1rem;
-}
-
-</style>

components/Webinaire/Catalogue.vue

@@ -1,138 +1,150 @@
 <template>
-  <div id="Catalogue">
-    <LayoutContainer>
-      <div class="grey-container">
-        <v-row class="custom-row">
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Des webinaires pour tous'"
-          />
-        </v-row>
+  <LayoutContainer>
+    <div class="grey-container">
+      <v-row class="custom-row">
+        <LayoutUISubTitle>
+          Des webinaires pour tous
+        </LayoutUISubTitle>
+      </v-row>
 
-        <v-row class="custom-row">
-          <LayoutUITitlePage
-            title="SIMPLIFIEZ LA GESTION ET LA COMMUNICATION DE VOTRE STRUCTURE CULTURELLE"
-            subtitle="Votre orchestre, école de danse ou votre fédération mérite les outils les plus performants du marché pour briller en toute simplicité. Découvrez comment nos outils peuvent transformer votre quotidien : "
-          />
-        </v-row>
+      <v-row class="custom-row">
+        <LayoutUITitlePage>
+          SIMPLIFIEZ LA GESTION ET LA COMMUNICATION DE VOTRE STRUCTURE CULTURELLE
+          <template #subtitle>
+            Votre orchestre, école de danse ou votre fédération mérite les outils les plus performants du marché pour briller en toute simplicité. Découvrez comment nos outils peuvent transformer votre quotidien :
+          </template>
+        </LayoutUITitlePage>
+      </v-row>
 
-        <v-row
-          style="
-            padding: 2rem;
-            max-width: 90%;
-            margin-left: auto;
-            margin-right: auto;
-          "
-          class="custom-row"
+      <v-row class="custom-row catalog">
+        <v-col
+          v-for="(course, index) in courses"
+          :key="index"
+          cols="4"
         >
-          <v-col v-for="(course, index) in courses" :key="index" cols="4">
-            <v-card class="mb-4">
-              <v-card-text>
-                <div class="title-card-container d-flex align-center">
-                  <v-img class="logo-img mr-2" :src="course.imageUrl"></v-img>
-                  <h4 class="card-title">{{ course.title }}</h4>
-                </div>
-                <p class="details-card">{{ course.description }}</p>
-
-                <div class="container-blue mt-6">
-                  <h6 class="title-obj">Objectifs</h6>
-                  <ul class="list-obj">
-                    <li
-                      v-for="(objective, objIndex) in course.objectives"
-                      :key="objIndex"
-                    >
-                      {{ objective }}
-                    </li>
-                  </ul>
-                </div>
-
-                <div class="container-blue">
-                  <h6 class="title-obj">Programme</h6>
-                  <v-row>
-                    <v-col
-                      v-for="column in course.additionalObjectives"
-                      :key="column.id"
-                      cols="6"
-                    >
-                      <ul class="list-obj">
-                        <li
-                          v-for="(objective, objIndex) in column.objectives"
-                          :key="objIndex"
-                        >
-                          {{ objective }}
-                        </li>
-                      </ul>
-                    </v-col>
-                  </v-row>
-                </div>
-                <v-chip class="badge-time">
-                  <span>Durée : {{ course.duration }}</span></v-chip
-                >
-                <v-chip class="badge-time">
-                  <span>{{ course.price }}</span></v-chip
-                >
-
-                <v-chip class="chip-download" @click="showModal(course.title)">
-                  Inscrivez-vous
-                </v-chip>
-              </v-card-text>
-            </v-card>
+          <v-card class="mb-4">
+            <v-card-text>
+              <div class="title-card-container">
+                <v-img
+                  :src="course.imageUrl"
+                />
+
+                <h4>
+                  {{ course.title }}
+                </h4>
+              </div>
+
+              <p class="details-card">
+                {{ course.description }}
+              </p>
+
+              <div class="objectives mt-6">
+                <h6>
+                  Objectifs
+                </h6>
+
+                <ul>
+                  <li
+                    v-for="(objective, objIndex) in course.objectives"
+                    :key="objIndex"
+                  >
+                    {{ objective }}
+                  </li>
+                </ul>
+              </div>
+
+              <div class="program">
+                <h6>
+                  Programme
+                </h6>
+
+                <v-row>
+                  <v-col
+                    v-for="column in course.additionalObjectives"
+                    :key="column.id"
+                    cols="6"
+                  >
+                    <ul>
+                      <li
+                        v-for="(objective, objIndex) in column.objectives"
+                        :key="objIndex"
+                      >
+                        {{ objective }}
+                      </li>
+                    </ul>
+                  </v-col>
+                </v-row>
+              </div>
+
+              <v-chip class="badge-time">
+                <span>
+                  Durée : {{ course.duration }}
+                </span>
+              </v-chip>
+
+              <v-chip class="badge-time">
+                <span>
+                  {{ course.price }}
+                </span>
+              </v-chip>
+
+              <v-chip
+                class="chip-register"
+                @click="showModal(course.title)"
+              >
+                Inscrivez-vous
+              </v-chip>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- Modale d'inscription -->
+    <div
+      v-if="selectedWebinar"
+      class="calendar-modal"
+    >
+      <div class="alt-theme">
+        <LayoutUISubTitle>
+          Inscrivez vous
+        </LayoutUISubTitle>
+
+        <h4 class="title-inscription text-center mt-4">
+          Vous y êtes presque !
+        </h4>
+
+        <iframe
+          :src="webinaireCalendars[selectedWebinar]"
+          width="700"
+          height="700"
+        />
+
+        <v-row>
+          <v-col cols="12">
+            <v-btn
+              class="close-button"
+              @click="closeModal()"
+            >
+              Fermer
+            </v-btn>
           </v-col>
         </v-row>
       </div>
-
-      <div v-if="currentWebinaire" class="calendar-modal">
-        <div class="container-green">
-          <LayoutUISubTitle
-            :titleColor="'#fff'"
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Inscrivez vous'"
-          />
-          <h3 class="title-inscription text-center mt-4">
-            Vous y êtes presque !
-          </h3>
-          <iframe
-            :src="webinaireCalendars[currentWebinaire]"
-            width="700"
-            height="700"
-          ></iframe>
-          <v-row>
-            <v-col cols="12">
-              <v-btn class="close-button" @click="closeModal()">Fermer</v-btn>
-            </v-col>
-          </v-row>
-        </div>
-      </div>
-    </LayoutContainer>
-  </div>
+    </div>
+  </LayoutContainer>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
 
-const currentWebinaire = ref(null);
-const webinaireCalendars = {
-  "Webinaire Artist":
-    "https://widget.weezevent.com/ticket/E920851/?code=62708&locale=fr-FR&width_auto=1&color_primary=0e2d32",
-  "Webinaire School":
-    "https://widget.weezevent.com/ticket/E963899/?code=47365&locale=fr-FR&width_auto=1&color_primary=0e2d32",
-  "Webinaire Manager":
-    "https://widget.weezevent.com/ticket/E923624/?code=4857&locale=fr-FR&width_auto=1&color_primary=0e2d32",
-};
 
-const showModal = (webinaireTitle) => {
-  currentWebinaire.value = webinaireTitle.trim();
-};
+import { Training } from "~/types/interface";
 
-const closeModal = () => {
-  currentWebinaire.value = null;
-};
-const downloadPdf = (pdfUrl) => {
+const downloadPdf = (pdfUrl: string) => {
   window.open(pdfUrl, "_blank");
 };
-const courses = [
+
+const courses: Array<Training> = [
   {
     imageUrl: "/images/logo/logiciels/&_Jaune.png",
     title: "Webinaire Artist ",
@@ -239,8 +251,28 @@ const courses = [
       " https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-Typo3-2023-02_1-jour.pdf",
   },
 ];
+
+const selectedWebinar: Ref<string | null> = ref(null);
+
+const webinaireCalendars: Record<string, string> = {
+  "Webinaire Artist":
+    "https://widget.weezevent.com/ticket/E920851/?code=62708&locale=fr-FR&width_auto=1&color_primary=0e2d32",
+  "Webinaire School":
+    "https://widget.weezevent.com/ticket/E963899/?code=47365&locale=fr-FR&width_auto=1&color_primary=0e2d32",
+  "Webinaire Manager":
+    "https://widget.weezevent.com/ticket/E923624/?code=4857&locale=fr-FR&width_auto=1&color_primary=0e2d32",
+};
+
+const showModal = (webinaireTitle: string) => {
+  selectedWebinar.value = webinaireTitle.trim();
+};
+
+const closeModal = () => {
+  selectedWebinar.value = null;
+};
 </script>
-<style scoped>
+
+<style scoped lang="scss">
 .custom-row {
   width: 90%;
   margin-left: auto;
@@ -252,152 +284,101 @@ const courses = [
   box-shadow: none !important;
   background-color: transparent !important;
 }
-.grey-container {
-  background-color: #f8f8f8;
-}
-.chip-download {
-  border-radius: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.badge-time {
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.badge-time span {
-  color: var(--Vert-90, #0e2d32);
-}
 
-.list-obj {
-  margin-top: 0.5rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 14px;
-  line-height: 18px;
+.catalog {
+  padding: 2rem;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
 
-  color: #000000;
-}
+  .title-card-container {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #0e2d32;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
 
-.title-obj {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 20px;
-  color: #0e2d32;
-}
+    .v-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 50px;
+      height: 50px;
+      margin-right: 4px;
+    }
 
-.container-blue {
-  justify-content: space-between;
-  align-items: center;
-  background: #c3e5e7;
-  padding: 1rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  border-radius: 1rem;
-  padding-left: 1.5rem;
-  height: 11rem;
-}
+    h4 {
+      font-weight: 600;
+      font-size: 1.2rem;
+      margin-bottom: 0.8rem;
+    }
+  }
 
-.details-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  color: #091d20;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-  height: 5rem;
-}
+  .details-card {
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 1rem;
+    line-height: 1rem;
+    color: #091d20;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    height: 5rem;
+  }
 
-.title-card-container {
-  border-bottom: 1px solid #0e2d32;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-}
+  .objectives, .program {
+    justify-content: space-between;
+    align-items: center;
+    background: #c3e5e7;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 1rem;
+    padding: 1rem 1rem 1rem 1.5rem;
+    height: 11rem;
 
-.card-title {
-  font-weight: 600;
-  font-size: 1.2rem;
-  margin-bottom: 0.8rem;
-}
+    h6 {
+      font-family: "Barlow", serif;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 20px;
+      color: #0e2d32;
+    }
 
-.logo-img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50px;
-  height: 50px;
-}
+    ul {
+      margin-top: 0.5rem;
+      font-family: "Barlow", serif;
+      font-style: normal;
+      font-weight: 300;
+      font-size: 14px;
+      line-height: 18px;
+    }
+  }
 
-:deep().subtitle {
-  font-size: 1.5rem;
-  font-weight: normal !important;
-  line-height: 2rem;
-  letter-spacing: 0.1rem;
-  margin-bottom: 1rem;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-}
+  .v-chip {
+    font-family: "Barlow", serif;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    line-height: 18px;
+    font-weight: 500;
+    font-size: 14px;
+    font-style: normal;
+  }
 
-:deep().title {
-  font-size: 2rem;
-  line-height: 3.5rem;
-  letter-spacing: 0.1rem;
-  margin-top: 2rem;
-  margin-bottom: 0.5rem;
-  text-transform: uppercase;
-}
+  .badge-time {
+    color: var(--neutral-color);
+    border: 1px solid var(--primary-color);
+  }
 
-.title-inscription {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 2rem;
-  line-height: 18px;
-  color: #fff;
-  margin-bottom: 2rem;
+  .badge-time span {
+    color: var(--primary-color);
+  }
 }
 
-.close-button {
-  background-color: #e34461;
-  color: #fff;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 .calendar-modal {
   position: fixed;
   top: 0;
@@ -409,10 +390,33 @@ const courses = [
   display: flex;
   justify-content: center;
   align-items: center;
-}
 
-.container-green {
-  background-color: #0e2d32;
-  padding: 4rem;
+  > div {
+    padding: 4rem;
+  }
+
+  h4 {
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 2rem;
+    line-height: 18px;
+    margin-bottom: 2rem;
+  }
+
+  .close-button {
+    background-color: #e34461;
+    color: #fff;
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 18px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

pages/formations.vue

@@ -23,9 +23,9 @@
 
   <LayoutFAQ />
 
-  <LayoutFooterSolutions id="layout-footer" />
+  <LayoutFooterSolutions />
 
-  <LayoutFooter id="layout-footer" />
+  <LayoutFooter />
 </template>
 
 <script setup lang="ts">

types/interface.d.ts

@@ -96,12 +96,14 @@ interface Program {
 }
 
 interface Training {
-  number: string;
+  number?: string;
   title: string;
   description: string;
   objectives: string[];
   duration: string;
-  program: Program[];
+  program?: Program[];
   price: string;
   downloadLink: string;
+  imageUrl?: string
+  additionalObjectives: Program[];
 }