|
|
@@ -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>
|
Olivier Massot