site_logiciels/components/Webinaire/FAQ.vue

<template>
  <LayoutContainer>
    <v-row class="custom-row">
      <LayoutUISubTitle
        :iconSize="6"
        :iconClasses="iconClasses"
        :titleText="'Des questions ?'"
      />
    </v-row>

    <LayoutUITitlePage title="Tout savoir sur nos webinaire en ligne" subtitle="Les questions les plus fréquentes" />
    <div class="faq-container">
      <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
        <div class="question" @click="toggle(index)">
          <i class="fa-solid fa-circle question-icon"></i> {{ item.question }}
        </div>
        <div class="section-content" v-if="isActive(index)" v-html="item.answer"></div>
      </div>
    </div>
  </LayoutContainer>
</template>



<script setup>
import { ref } from 'vue';

const faqItems = ref([
  {
    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. <button style="background-color: #0E2D32; color: #fff; border: none;border-radius: 4px;padding: 0.5rem 1rem;cursor: pointer;"   class="contact-btn" onclick="window.location.href=\'/nous-contacter\'">Contactez-nous</button>'
}

]);


const activeIndex = ref(-1);

function toggle(index) {
  activeIndex.value = activeIndex.value === index ? -1 : index;
}

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


<style scoped>

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

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

.question {
  background-color: #0E2D32;
  color: #fff;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.question:hover {
  background-color: #555;
}
.question-icon {
  font-size: 10px !important;
  color: rgba(161, 225, 249, 0.6);
  margin-right: 0.5rem;
}

.section-content {
  background-color: #C3E5E7;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

:deep().subtitle {
  font-size: 1.5rem;
  font-weight: normal !important;
  line-height: 2rem;
  letter-spacing: .1rem;
  margin-bottom: 1rem;
}

:deep().title {
  font-size: 2rem;
  line-height: 3.5rem;
  letter-spacing: .1rem;
  margin-top: 2rem;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
</style>