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 in courses" :key="course.key" 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="selectedWebinar = course.key"
                >
                  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> = [
  {
    key: 'artist',
    imageUrl: '/images/logos/opentalent/Logo_Opentalent_Artist_Griffe.png',
    imageAlt: 'Esperluette du logo Opentalent Artist',
    title: 'Webinaire Opentalent 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",
    key: 'school',
    title: 'Webinaire Opentalent 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',
  },
  {
    key: 'manager',
    title: 'Webinaire Opentalent 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 Confédération Musicale de France. Gagnez en temps administratif, boostez vos performances et optimisez l'utilisation du logiciel.",
    objectives: [
      "Paramétrer et gérer le suivi l'appel à cotisation (suivi, relance, facture, saisie des règlements)",
      'Transmission des sommes à votre fédération parente',
      'Gérer les membres du CA et les structures adhérentes (entrées, sorties, coordonnées, mots de passe ...)',
      'Communiquer avec son réseau',
    ],
    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> = {
  artist:
    'https://widget.weezevent.com/ticket/E1054691/?code=1227&locale=fr-FR&width_auto=1&color_primary=00AEEF',
  school:
    'https://widget.weezevent.com/ticket/E1054694/?code=44289&locale=fr-FR&width_auto=1&color_primary=00AEEF',
  manager:
    'https://widget.weezevent.com/ticket/E1054695/?code=76806&locale=fr-FR&width_auto=1&color_primary=00AEEF',
}

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>