first commit

src/components/FAQSection.vue

@@ -0,0 +1,45 @@
+<template>
+  <slide-template title="FAQ__title">
+    <div
+      class="q-pa-md w100 flex justify-center"
+      style="max-width: 800px"
+      >
+      <q-list separator>
+        <q-expansion-item
+          group="FAQgroup"
+          v-for="item in 5"
+          :key="item"
+          switch-toggle-side
+          header-class="text-h5"
+          expand-icon="mdi-plus"
+          expanded-icon="mdi-close"
+          >
+          <template #header="{ expanded }">
+            <div :class="expanded ? 'text-brand' : ''" class="w100">
+              {{ $t('faq__question_' + item) }}
+            </div>
+          </template>
+          <q-card>
+            <q-card-section class="text-h6">
+              {{ $t('faq__answer_' + item) }}
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+      </q-list>
+    </div>
+  </slide-template>
+</template>
+
+<script setup lang="ts">
+  import SlideTemplate from 'components/SlideTemplate.vue';
+  
+</script>
+
+<style scoped>
+.custom-expansion.q-expansion-item--collapsed :deep(.q-item__section--side .q-icon) {
+  transition: transform 0.3s;
+}
+.custom-expansion.q-expansion-item--expanded :deep(.q-item__section--side .q-icon) {
+  transform: rotate(180deg);
+}
+</style>