refacto webinaire

assets/css/main.css

@@ -1,4 +1,4 @@
-h1, h2, h3, h4, h5, h6, p, .btn-contact, td, .button-faq {
+h1, h2, h3, h4, h5, h6, p, .btn-contact, td, .button-faq, li {
   font-family: "Barlow";
   font-style: normal;
 }

components/Formation/Catalogue.vue

@@ -13,64 +13,50 @@
           </v-col>
         </v-row>
 
-        <v-row no-gutters class="centered-row ml-12">
+
+        <v-row no-gutters=""  class="centered-row ml-12">
           <v-col v-for="(course, index) in courses" :key="index" cols="4">
-            <v-row>
-              <div class="title-card-container">
-                <span class="number-card">{{ course.number }}</span>
-                <h4 class="card-title">{{ course.title }}</h4>
-                <v-img class="logo-img" :src="course.imageUrl" />
-              </div>
-              <p class="details-card">{{ course.description }}</p>
-            </v-row>
-            <v-row>
-              <div class="container-blue">
-                <h6 class="title-obj">Objectifs pédagogiques</h6>
-                <ul class="list-obj">
-                  <li
-                    v-for="(objective, objIndex) in course.objectives"
-                    :key="objIndex"
-                  >
-                    {{ objective }}
-                  </li>
-                </ul>
-              </div>
-            </v-row>
-            <v-row>
-              <v-chip class="badge-time">Durée : {{ course.duration }}</v-chip>
-            </v-row>
-            <div class="container-blue">
-              <h6 class="title-obj">Objectifs pédagogiques</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-row>
-              <v-chip class="badge-time">{{ course.price }}</v-chip>
-            </v-row>
-            <v-row>
-              <v-chip
-                class="chip-download"
-                @click="downloadPdf(course.downloadLink)"
-              >
-                Télécharger le programme de formation
-              </v-chip>
-            </v-row>
-          </v-col>
-        </v-row>
+    <v-card class="mb-4"> <!-- Added margin bottom for spacing -->
+      <v-card-text>
+        <div class="title-card-container">
+          <span class="number-card">{{ course.number }}</span>
+          <h4 class="card-title">{{ course.title }}</h4>
+          <v-img class="logo-img" :src="course.imageUrl" />
+        </div>
+        <p class="details-card">{{ course.description }}</p>
+
+        <div class="container-blue">
+          <h6 class="title-obj">Objectifs pédagogiques</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">Objectifs pédagogiques</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">Durée : {{ course.duration }}</v-chip>
+        <v-chip class="badge-time">{{ course.price }}</v-chip>
+        <v-chip class="chip-download" @click="downloadPdf(course.downloadLink)">
+          Télécharger le programme de formation
+        </v-chip>
+      </v-card-text>
+    </v-card>
+  </v-col>
+</v-row>
+
       </div>
     </LayoutContainer>
   </div>
@@ -174,6 +160,11 @@ const courses = [
 </script>
 
 <style scoped>
+.v-card {
+  border: none !important; 
+  box-shadow: none !important; 
+  background-color: transparent !important;
+}
 .grey-container {
   background-color: #f8f8f8;
   padding: 4rem;

components/Home/Reviews.vue

@@ -247,9 +247,11 @@ const items = ref([
 
 .left {
   bottom: 12rem;
+  position: relative;
 }
 
 .right {
+  position: relative;
   bottom: 7rem;
 
 }

components/Webinaire/Catalogue.vue

@@ -7,60 +7,78 @@
           :iconClasses="iconClasses"
           :titleText="'Des webinaires pour tous'"
         />
-        <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 : " />
+        <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 no-gutters class="centered-row ml-12 mt-12">
-          <v-col v-for="(course, index) in courses" :key="index" cols="4">
-            <v-row>
-              <div class="title-card-container">
-                <span class="number-card">{{ course.number }}</span>
-                <h4 class="card-title">{{ course.title }}</h4>
-                <v-img class="logo-img" :src="course.imageUrl" />
-              </div>
-              <p class="details-card">{{ course.description }}</p>
-            </v-row>
-            <v-row>
-              <div class="container-blue">
-                <h6 class="title-obj">Objectifs</h6>
-                <ul class="list-obj">
-                  <li
-                    v-for="(objective, objIndex) in course.objectives"
-                    :key="objIndex"
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+            v-for="(course, index) in courses"
+            :key="index"
+          >
+            <v-card class="mb-4">
+              <v-card-text>
+                <v-row>
+                  <div class="title-card-container">
+                    <span class="number-card">{{ course.number }}</span>
+                    <h4 class="card-title">{{ course.title }}</h4>
+                    <v-img class="logo-img" :src="course.imageUrl" />
+                  </div>
+                  <p class="details-card">{{ course.description }}</p>
+                </v-row>
+                <v-row>
+                  <div class="container-blue">
+                    <h6 class="title-obj">Objectifs</h6>
+                    <ul class="list-obj">
+                      <li
+                        v-for="(objective, objIndex) in course.objectives"
+                        :key="objIndex"
+                      >
+                        {{ objective }}
+                      </li>
+                    </ul>
+                  </div>
+                </v-row>
+                <v-row>
+                  <v-chip class="badge-time"
+                    >Durée : {{ course.duration }}</v-chip
                   >
-                    {{ objective }}
-                  </li>
-                </ul>
-              </div>
-            </v-row>
-            <v-row>
-              <v-chip class="badge-time">Durée : {{ course.duration }}</v-chip>
-            </v-row>
-            <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"
+                </v-row>
+                <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"
                     >
-                      {{ objective }}
-                    </li>
-                  </ul>
-                </v-col>
-              </v-row>
-            </div>
-            <v-row>
-              <v-chip class="badge-time">{{ course.price }}</v-chip>
-            </v-row>
-            <v-row>
-              <v-chip class="chip-download" @click="showModal(course.title)">
-                Inscrivez-vous
-              </v-chip>
-            </v-row>
+                      <ul class="list-obj">
+                        <li
+                          v-for="(objective, objIndex) in column.objectives"
+                          :key="objIndex"
+                        >
+                          {{ objective }}
+                        </li>
+                      </ul>
+                    </v-col>
+                  </v-row>
+                </div>
+                <v-row>
+                  <v-chip class="badge-time">{{ course.price }}</v-chip>
+                </v-row>
+                <v-row>
+                  <v-chip
+                    class="chip-download"
+                    @click="showModal(course.title)"
+                  >
+                    Inscrivez-vous
+                  </v-chip>
+                </v-row>
+              </v-card-text>
+            </v-card>
           </v-col>
         </v-row>
       </div>
@@ -68,12 +86,14 @@
       <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>
+            :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"
@@ -115,7 +135,7 @@ const downloadPdf = (pdfUrl) => {
 };
 const courses = [
   {
-    number: "01",
+    // number: "01",
     title: "Webinaire Artist ",
     description:
       "Ce webinaire est destiné aux acteurs culturels tels que les orchestres, les chorales, les compagnies et troupes de danse, théâtre et cirque. Il vous permettra de découvrir les fonctionnalités du logiciels, les avantages et les différentes versions.. ",
@@ -151,7 +171,7 @@ const courses = [
       "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_2-jours.pdf",
   },
   {
-    number: "02",
+    // number: "02",
     title: "Webinaire School",
     // imageUrl: "/images/opentalent_school_black.jpg",
     description:
@@ -188,7 +208,7 @@ const courses = [
       "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
   },
   {
-    number: "03",
+    // number: "03",
     title: "Webinaire Manager",
     // imageUrl: "/images/opentalent_school_black.jpg",
     description:
@@ -224,23 +244,28 @@ const courses = [
 </script>
 
 <style scoped>
+.v-card {
+  border: none !important; 
+  box-shadow: none !important; 
+  background-color: transparent !important;
+}
 :deep().subtitle {
   font-size: 1.5rem;
   font-weight: normal !important;
   line-height: 2rem;
-  letter-spacing: .1rem;
+  letter-spacing: 0.1rem;
   margin-bottom: 1rem;
 }
 
 :deep().title {
   font-size: 2rem;
   line-height: 3.5rem;
-  letter-spacing: .1rem;
+  letter-spacing: 0.1rem;
   margin-top: 2rem;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   text-transform: uppercase;
 }
-.title-inscription{
+.title-inscription {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
@@ -357,8 +382,6 @@ const courses = [
   background: #e34461;
   color: black;
   background-color: #fff;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 14px;
   line-height: 18px;
@@ -371,8 +394,6 @@ const courses = [
 
 .list-obj {
   margin-top: 0.5rem;
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 14px;
   line-height: 18px;
@@ -381,8 +402,6 @@ const courses = [
 }
 
 .title-obj {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
@@ -403,8 +422,6 @@ const courses = [
 }
 
 .details-card {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1rem;
   line-height: 1rem;

pages/artist.vue

@@ -1,7 +0,0 @@
-<template>
-  <LayoutUIContainerVideo
-    citation-text="Custom citation text here."
-    subtitle="Custom Subtitle Here"
-    image-url="/images/logiciels/school/screen2.png"
-  />
-</template>

pages/poc.vue

@@ -0,0 +1,330 @@
+<template>
+  <div id="Catalogue">
+    <LayoutContainer>
+      <div class="grey-container">
+        <div class="title-container mt-12 mb-6">
+          <v-icon size="6" class="fa-solid fa-circle icon-title" />
+          <h4 class="subtitle">Découvrez notre catalogue de formation</h4>
+        </div>
+
+        <v-row>
+          <v-col cols="12">
+            <h4 class="catalog ml-6">Catalogue</h4>
+          </v-col>
+        </v-row>
+
+
+        <v-row no-gutters=""  class="centered-row ml-12">
+          <v-col v-for="(course, index) in courses" :key="index" cols="4">
+    <v-card class="mb-4"> <!-- Added margin bottom for spacing -->
+      <v-card-text>
+        <div class="title-card-container">
+          <span class="number-card">{{ course.number }}</span>
+          <h4 class="card-title">{{ course.title }}</h4>
+          <v-img class="logo-img" :src="course.imageUrl" />
+        </div>
+        <p class="details-card">{{ course.description }}</p>
+
+        <div class="container-blue">
+          <h6 class="title-obj">Objectifs pédagogiques</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">Objectifs pédagogiques</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">Durée : {{ course.duration }}</v-chip>
+        <v-chip class="badge-time">{{ course.price }}</v-chip>
+        <v-chip class="chip-download" @click="downloadPdf(course.downloadLink)">
+          Télécharger le programme de formation
+        </v-chip>
+      </v-card-text>
+    </v-card>
+  </v-col>
+</v-row>
+
+      </div>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup>
+const downloadPdf = (pdfUrl) => {
+  window.open(pdfUrl, "_blank");
+};
+const courses = [
+  {
+    number: "01",
+    title: "Formation initiale ",
+    description:
+      "Cette formation est destinée aux nouveaux utilisateurs. Elle est obligatoire lors de l'acquisition du logiciel. Elle est également utile lors d'un changement de personnel dans la structure. ",
+    objectives: [
+      "Ajuster la configuration du logiciel",
+      "Gérer les élèves et leurs familles",
+      "Générer des factures et faire le suivi des règlements",
+      "Gérer le planning des cours",
+      "Evaluer les élèves et générer des bulletins",
+      "Communiquer avec les personnes du répertoire",
+    ],
+    duration: "14h",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: [
+          "Accès et interface",
+          "Configuration",
+          "Répertoire",
+          "Agenda",
+        ],
+      },
+      {
+        id: 2,
+        objectives: [
+          "Parc matériel",
+          "Suivi pédagogique",
+          "Facturation",
+          "Communication",
+        ],
+      },
+    ],
+    price: "1 580 € TTC",
+    downloadLink:
+      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_2-jours.pdf",
+  },
+  {
+    number: "02",
+    title: "Formation complémentaire",
+    // imageUrl: "/images/opentalent_school_black.jpg",
+    description:
+      "Cette formation suppose d’avoir les connaissances de base sur le logiciel. Elle permet d’avoir une remise à niveau sur sur des fonctionnalités qui ont été incorrectement comprises / configurées, ou qui ont été récemment développées.",
+    objectives: [
+      "Ajuster la configuration du logiciel",
+      "Gérer les élèves et leurs familles",
+    ],
+    duration: "7h",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: ["Accès et interface", "Configuration"],
+      },
+      {
+        id: 2,
+        objectives: ["Répertoire"],
+      },
+    ],
+    price: "790€ TTC",
+    downloadLink:
+      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
+  },
+  {
+    number: "03",
+    title: "Formation Typo 3",
+    // imageUrl: "/images/opentalent_school_black.jpg",
+    description:
+      "Cette formation est destinée aux nouveaux utilisateurs Typo3. Elle est optionnelle et permet d'aller plus loin dans la gestion du site internet intégré.",
+    objectives: [
+      "Gérer les pages et leur accès",
+      "Gérer le contenu des pages et leur accès",
+      "Configurer les options du site internet côté logiciel",
+    ],
+    duration: "7h",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: ["Gestion des pages", "Gestion des blocs"],
+      },
+      {
+        id: 2,
+        objectives: ["Configuration côté logiciel"],
+      },
+    ],
+    price: "790€ TTC",
+    downloadLink:
+      " https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-Typo3-2023-02_1-jour.pdf",
+  },
+];
+</script>
+
+<style scoped>
+.v-card {
+  border: none !important; 
+  box-shadow: none !important; 
+  background-color: transparent !important;
+}
+.grey-container {
+  background-color: #f8f8f8;
+  padding: 4rem;
+}
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 20rem;
+  margin-left: 2rem;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
+
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
+
+.centered-row {
+  margin: auto;
+  justify-content: center;
+}
+.catalog {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  margin-bottom: 3rem;
+}
+.chip-download {
+  width: 31rem;
+  background: #e34461;
+  color: black;
+  background-color: azure;
+  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 {
+  width: 31rem;
+  background: #e34461;
+  color: black;
+  background-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;
+}
+
+.list-obj {
+  margin-top: 0.5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 18px;
+
+  color: #000000;
+}
+
+.title-obj {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+  color: #0e2d32;
+}
+
+.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;
+  width: 31rem;
+  height: 11rem;
+}
+
+.details-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
+  color: #091d20;
+  margin-top: 1rem;
+  width: 31rem;
+  height: 4rem;
+}
+
+.number-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.3rem;
+  color: #e34461;
+  margin-right: 1rem;
+}
+
+.title-card-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.2rem;
+  width: 31rem;
+  border-bottom: 1px solid #0e2d32;
+}
+
+.logo-img {
+  width: 10rem;
+  height: 3rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 4rem;
+}
+</style>

pages/school.vue

@@ -1,48 +0,0 @@
-
-<template>
-  <div>
-    <LayoutUIPresentation
-      :pictoImages="pictoData"
-      :presentationText="presentationData"
-      :logoSrc="'images/logo/logiciels/Artist-Blanc.png'"
-      :pricingAmount="'15€'"
-      :backgroundColor="'rgba(250, 194, 10, 0.2)'"
-    />
-  </div>
-
-  <LayoutUIContainerVideo
-      image-url="/images/logiciels/school/screen2.png"
-    />
-</template>
-
-<script setup>
-
-const pictoData = [
-  { src: '/images/logiciels/artist/picto1.png', text: 'Logiciel de gestion et communication full web' },
-  { src: '/images/logiciels/artist/picto2.png', text: 'Site web intégré & simple d\'usage' },
-  { src: '/images/logiciels/artist/picto3.png', text: 'Boostez votre visibilité & communication' },
-  { src: '/images/logiciels/artist/picto4.png', text: 'Communiquez en réseau' },
-  { src: '/images/logiciels/artist/picto4.png', text: 'Communiquez en réseau' },
-  { 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 é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>
-
-:deep().row-custom {
-  margin-top: -10rem;
-}
-
-</style>