site_logiciels/components/Webinaire/Catalogue.vue

<template>
  <LayoutContainer>
    <div class="grey-container">
      <v-row class="center-90">
        <LayoutUISubTitle>
          Des webinaires pour tous
        </LayoutUISubTitle>
      </v-row>

      <v-row class="center-90">
        <v-col cols="12" class="section-title">
          <h3>
            Simplifiez la gestion et la communication de votre structure
          </h3>

          <div class="strong-label">
            Votre structure culturelle, établissement d’enseignement artistique ou 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 :
          </div>
        </v-col>
      </v-row>

      <v-row class="center-90 catalog">
        <v-col
          v-for="(course, index) in courses"
          :key="index"
          cols="12"
          md="4"
        >
          <v-card class="mb-4">
            <v-card-text>
              <div class="title-card-container">
                <v-img
                  :src="course.imageUrl"
                  :alt="course.imageAlt"
                />

                <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="badge-time">
                Durée : {{ course.duration }}
              </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>

              <div class="badge-time">
                {{ course.price }}
              </div>

              <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 -->
    <v-dialog
      v-model="modalShowing"
      max-width="800"
      class="calendar-modal"
    >
      <div class="alt-theme d-flex flex-column align-center">
        <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>
    </v-dialog>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { Training } from "~/types/interface";

const downloadPdf = (pdfUrl: string) => {
  window.open(pdfUrl, "_blank");
};

const courses: Array<Training> = [
  {
    imageUrl: "/images/logos/opentalent/Logo_Opentalent_Artist_Griffe.png",
    imageAlt: "Esperluette du logo Opentalent Artist",
    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: [
      "Obtenir une présentation du logiciel Opentalent Artist",
      "Présentation des principales fonctionnalités",
      "Qu'est ce que l'agenda culturel et l'annuaire ? ",
      "Quelles différences entre la version Standard & Premium ?",
    ],
    duration: "1H30",
    additionalObjectives: [
      {
        id: 1,
        objectives: [
          "Accès et interface",
          "Configuration",
          "Répertoire",
          "Agenda",
        ],
      },
      {
        id: 2,
        objectives: [
          "Parc matériel",
          "Rapport d’activité",
          "Communication",
          "Site internet",
        ],
      },
    ],
    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/logos/opentalent/Logo_Opentalent_School_Griffe.png",
    imageAlt: "Esperluette du logo Opentalent School",
    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: [
      "Obtenir une présentation du logiciel Opentalent School",
      "Comprendre l'écosystème de l'outil",
      "Identifier les avantages qu'offre ce logiciel pour votre structure",
      "Apprendre à gérer votre propre site internet",
    ],
    duration: "1h",
    additionalObjectives: [
      {
        id: 1,
        objectives: [
          "Accès et interface",
          "Configuration",
          "Répertoire",
          "Agenda",
        ],
      },
      {
        id: 2,
        objectives: [
          "Parc matériel",
          "Facturation",
          "Communication",
          "Site internet",
        ],
      },
    ],
    price: "Gratuit",
    downloadLink:
      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
  },
  {
    title: "Webinaire Manager",
    imageUrl: "/images/logos/opentalent/Logo_Opentalent_Manager_Griffe.png",
    imageAlt: "Esperluette du logo Opentalent Manager",
    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 (pour les débutants)",
      "Gérer votre site internet (pour les 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",
  },
];

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 modalShowing = computed(() => selectedWebinar.value)

const closeModal = () => {
  selectedWebinar.value = null;
};
</script>

<style scoped lang="scss">
.v-card {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.section-title {
  display: flex;
  flex-direction: column;

  h3 {
    font-size: 42px;
    letter-spacing: .1rem;
    line-height: 3.5rem;
    margin-bottom: .5rem;
    margin-top: 2rem;

  }

  .strong-label {
    font-size: 1.5rem;
    font-weight: 400 !important;
    letter-spacing: .1rem;
    line-height: 2rem;
    margin-bottom: 1rem;
  }
}

.catalog {
  padding: 2rem;

  .title-card-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--primary-color);
    width: 80%;
    margin-left: auto;
    margin-right: auto;

    .v-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      margin-right: 4px;
    }

    h4 {
      font-weight: 600;
      font-size: 1.2rem;
      margin-bottom: 0.8rem;
    }
  }

  .details-card {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1rem;
    color: var(--primary-color);
    margin-top: 1rem;
    margin-bottom: 0.5rem;

    @media (min-width: 600px) {
      height: 5rem;
    }
  }

  .objectives, .program {
    justify-content: space-between;
    align-items: center;
    background: var(--secondary-color-light);
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    padding: 1rem 1rem 1rem 1.5rem;

    @media (min-width: 600px) {
      height: 11rem;
    }

    h6 {
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: var(--primary-color);
    }

    ul {
      margin-top: 0.5rem;
      font-weight: 300;
      font-size: 14px;
      line-height: 18px;
    }
  }

  .v-chip {
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 18px;
    font-weight: 500;
    font-size: 14px;
  }

  .badge-time {
    color: var(--primary-color);
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
  }
}

.calendar-modal {

  h4 {
    font-weight: 600;
    font-size: 2rem;
    line-height: 18px;
    margin-bottom: 2rem;
  }

  .close-button {
    background-color: #e34461;  /* TODO: pqoi cette couleur ici? */
    color: var(--on-primary-color);
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>