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 CULTURELLE
          </h3>

          <div class="strong-label">
            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 :
          </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="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 -->
    <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/logo/logiciels/&_Jaune.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: [
      "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",
    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: [
      "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",
    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 (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",
  },
];

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;
  align-items: center;

  h3 {
    font-size: 2rem;
    letter-spacing: .1rem;
    line-height: 3.5rem;
    margin-bottom: .5rem;
    margin-top: 2rem;
    text-transform: uppercase;
  }

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

.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);
    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(--neutral-color);
    border: 1px solid var(--primary-color);
  }

  .badge-time span {
    color: var(--primary-color);
  }
}

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