site_logiciels/pages/poc.vue

<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>

        <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
          style="
            padding: 2rem;
            max-width: 90%;
            margin-left: auto;
            margin-right: auto;
          "
          class="custom-row"
        >
          <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="toggleDetails(course)">
                  Inscrivez-vous
                </v-chip>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </div>

      <div v-if="course.showDetails" class="container-inscription">
        <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[course.title]"
          width="700"
          height="700"
        ></iframe>
          <v-row>
            <v-col cols="12">
              <v-btn @click="toggleDetails(course)">Fermer</v-btn>
            </v-col>
          </v-row>
        </div>
      </div>
    </LayoutContainer>
  </div>
</template>

<script setup>
import { ref } from "vue";


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();
};

const closeModal = () => {
  currentWebinaire.value = null;
};
const downloadPdf = (pdfUrl) => {
  window.open(pdfUrl, "_blank");
};
const courses = [
  {
    imageUrl: "/images/logo/logiciels/&_Jaune.png",
    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.. ",
    objectives: [
      "Découvrir le logiciel Opentalent Artist",
      "Présentation des principales fonctionnalités",
      "Quelles sont les différences entre les versions Standard & Premium ?",
      "Qu'est ce que l'Agenda culturel et l'annuaire ? ",
    ],
    duration: "1H30",
    additionalObjectives: [
      {
        id: 1,
        objectives: [
          "Accès et interface",
          "Configuration",
          "Répertoire",
          "Agenda",
        ],
      },
      {
        id: 2,
        objectives: [
          "Parc matériel",
          "Rapport d’activité",
          "Site internet",
          "Communication",
        ],
      },
    ],
    price: "Gratuit",
    downloadLink:
      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_2-jours.pdf",
  },
  {
    // number: "02",
    title: "Webinaire School",
    imageUrl: "/images/logo/logiciels/&_Bleu.png",
    description:
      " Rejoignez notre webinaire dédié aux petits comme aux GRANDS établissements d'enseignement artistique et découvrez comment optimiser votre travail grâce à un outil professionnel.",
    objectives: [
      "Découvrir le logiciel Opentalent School",
      "Comprendre l'écosystème de l'outil",
      "Présentation des principales fonctionnalités",
      "Identifier les avantages de cet outil pour votre structure",
    ],
    duration: "1h",
    additionalObjectives: [
      {
        id: 1,
        objectives: [
          "Accès et interface",
          "Configuration",
          "Répertoire",
          "Agenda",
        ],
      },
      {
        id: 2,
        objectives: [
          "Parc matériel",
          "Rapport d’activité",
          "Site internet",
          "Communication",
        ],
      },
    ],
    price: "Gratuit",
    downloadLink:
      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
  },
  {
    title: "Webinaire Manager",
    imageUrl: "/images/logo/logiciels/&_Rouge.png",
    description:
      "Ces webinaires  sont spécialement conçues pour les utilisateurs du logiciel fédéral de la CMF (Confédération Musicale de France). Gagner en temps administratif, booster vos performances et optimiser l'utilisation du logiciel.",
    objectives: [
      "Configurer l'appel de cotisation",
      "Suivre l'appel de cotisation",
      "Gérer votre site internet (débutants)",
      "Gérer votre site internet (confirmés)",
    ],
    duration: "1H30",
    additionalObjectives: [
      {
        id: 1,
        objectives: [
          "Mieux connaitre votre logiciel",
          "Optimiser votre temps administratif",
        ],
      },
      {
        id: 2,
        objectives: [
          "Communiquer avec votre réseau",
          "Promouvoir votre organisation",
        ],
      },
    ],
    price: "Gratuit",
    downloadLink:
      " https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-Typo3-2023-02_1-jour.pdf",
  },
];
courses.forEach(course => course.showDetails = false);
const toggleDetails = (course) => {
  course.showDetails = !course.showDetails;
};

</script>
<style scoped>
.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.v-card {
  border: none !important;
  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;

  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;
  height: 11rem;
}

.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;
}

.title-card-container {
  border-bottom: 1px solid #0e2d32;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.card-title {
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}

.logo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
}

: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;
}

:deep().title {
  font-size: 2rem;
  line-height: 3.5rem;
  letter-spacing: 0.1rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.title-inscription {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 2rem;
  line-height: 18px;
  color: #fff;
  margin-bottom: 2rem;
}

.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;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(14, 45, 50, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-green {
  background-color: #0e2d32;
  padding: 4rem;
}
</style>