site_logiciels/components/Webinaire/Catalogue.vue

<template>
  <LayoutContainer>
    <div>
      <v-row class="background-block">
        <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>
      </v-row>
    </div>

    <!-- Modale d'inscription -->
    <v-dialog
      v-model="modalShowing"
      max-width="800"
      :retain-focus="false"
      :scrollable="true"
      class="calendar-modal"
    >
      <v-card
        title="Inscrivez-vous"
        class="d-flex flex-column align-center alt-theme"
      >
        <v-card-text>
          <h4 class="title-inscription text-center mt-4">
            Vous y êtes presque !
          </h4>

          <iframe :src="webinaireCalendars[selectedWebinar]" height="700" />
        </v-card-text>

        <v-card-actions>
          <v-btn class="close-button" @click="closeModal()"> Fermer </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </LayoutContainer>
</template>

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

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çus pour les utilisateurs du logiciel fédéral de la CMF (Confédération Musicale de France). Gagnez en temps administratif, boostez vos performances et optimisez 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/E1054691/?code=1227&locale=fr-FR&width_auto=1&color_primary=00AEEF',
  'Webinaire School':
    'https://widget.weezevent.com/ticket/E1054694/?code=44289&locale=fr-FR&width_auto=1&color_primary=00AEEF',
  'Webinaire Manager':
    'https://widget.weezevent.com/ticket/E1054695/?code=76806&locale=fr-FR&width_auto=1&color_primary=00AEEF',
}

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;
    line-height: 3.5rem;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
  }

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

.background-block {
  background: var(--neutral-color-alt-light);
  padding: 4rem;
}
.catalog {
  .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);
    background: var(--neutral-color);
    width: 100%;
    height: 36px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 12px;
    vertical-align: center;
    padding-top: 6px;
  }
}

.calendar-modal {
  h4 {
    font-weight: 600;
    font-size: 2rem;
    line-height: 32px;
    margin-bottom: 2rem;
  }

  .v-card {
    border: none !important;
    box-shadow: none !important;
    background-color: var(--primary-color) !important;
    width: 100%;
  }

  .v-card-text {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;

    iframe {
      width: 100%;
    }
  }

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