site_logiciels/components/Webinaire/FAQ.vue

<!--
Foire aux questions
-->
<template>
  <LayoutContainer>
    <v-row class="center-90">
      <LayoutUISubTitle> Des questions ? </LayoutUISubTitle>
    </v-row>

    <v-row class="center-90">
      <v-col cols="12" class="section-title">
        <h3>Tout savoir sur nos webinaire en ligne</h3>

        <div class="strong-label">Les questions les plus fréquentes</div>
      </v-col>
    </v-row>

    <div class="faq center-90">
      <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
        <div
          :class="'question' + (isOpen(index) ? ' open' : '')"
          @click="toggle(index)"
        >
          <v-icon v-if="isOpen(index)" icon="fas fa-angle-down" />
          <v-icon v-else icon="fas fa-angle-right" />
          {{ item.question }}
        </div>

        <div v-if="isOpen(index)" class="answer" v-html="item.answer" />
      </div>
    </div>
  </LayoutContainer>
</template>

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

const faqItems: Array<FaqEntry> = [
  {
    question: "Comment s’inscrire à un webinaire?",
    answer:
      'Pour vous inscrire à un webinaire, suivez le lien "Inscrivez-vous" correspondant au cours qui vous intéresse.',
  },
  {
    question: "Combien de temps dure nos webinaires ?",
    answer:
      "Nos webinaires durent en moyenne 1H30. Les sessions de questions/réponses peuvent parfois prolonger la durée prévue de nos webinaires.",
  },
  {
    question: "Comment se passe un webinaire ?",
    answer:
      "Inscrivez-vous à l'un de nos webinaires en choisissant une date sur l'agenda et renseignez vos informations. " +
      "Vous recevrez à la suite de votre inscription sur notre site, un email de confirmation avec un rappel de la date et de l'horaire de participation ainsi que l'URL de connexion pour le webinaire. " +
      "Un mail de relance à J-1 vous sera envoyer vous rappelant votre participation au webinaire. " +
      "Le jour J, cliquez sur l'URL de connexion. Nous vous encourageons à arriver quelques minutes en avance pour vous assurer de pouvoir accéder au webinaire sans aucun problème technique. " +
      "Lors du début du webinaire, toutes les instructions nécessaires vous seront fournies.",
  },
  {
    question: "De quel matériel aurais-je besoin pour suivre le webinaire ?",
    answer:
      "Pour plus de confort, il est recommandé d'être équipé d'un outil (de préférence un ordinateur) disposant d'un micro et de haut-parleur.",
  },
  {
    question: "Y-a-t'il une limite de participants ?",
    answer:
      "Il n'y a pas de limite de participants lors de nos webinaires. Cependant, nous nous réservons le droit d'annuler une session si le nombre de participants est inférieur à 3 personnes.",
  },
  {
    question: "J'ai besoin d'aide...",
    answer:
      'Notre équipe est là pour vous. <br/><button style="background-color: #0E2D32; color: #fff; border: none;border-radius: 4px;padding: 0.5rem 1rem;cursor: pointer;margin-top: 6px;"   class="contact-btn" onclick="window.location.href=\'/nous-contacter\'">Contactez-nous</button>',
  },
];

const activeIndex: Ref<number | null> = ref(null);

function toggle(index: number) {
  activeIndex.value = activeIndex.value === index ? null : index;
}

function isOpen(index: number) {
  return activeIndex.value === index;
}
</script>

<style scoped lang="scss">
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;

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

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

.faq {
  padding: 1rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.question {
  background-color: var(--primary-color);
  color: var(--on-primary-color);
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;

  :hover {
    background-color: var(--neutral-color-alt-strong);
  }

  .v-icon {
    font-size: 16px !important;
    color: var(--on-primary-color-alt);
    margin-right: 0.5rem;
  }
}

.question.open {
  border-radius: 4px 4px 0 0;
}

.answer {
  background-color: var(--secondary-color-light);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0 0 4px 4px;
  box-shadow: -1px 2px 6px 3px var(--on-neutral-color-extra-light);
}
</style>