add pages

pages/question/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <section class="relative z-50 ml-4">
+    <div v-for="({ question, answer }, index) in questions" :key="index" class="mb-16">
+      <button
+        type="button"
+        @click="toggleFAQ(index)"
+        class="flex gap-12 mb-5 items-baseline font-bold"
+      >
+        <UiParagraph as="span" size="600">
+          {{ question }}
+        </UiParagraph>
+        <img
+          src="/assets/icon/arrow.svg"
+          alt="question"
+          class="duration-500"
+          :class="activeIndex === index ? 'rotate-90' : 'rotate-0'"
+        />
+      </button>
+      <Transition name="slide">
+        <div v-show="activeIndex === index">
+          <UiParagraph size="300">
+            {{ answer }}
+          </UiParagraph>
+        </div>
+      </Transition>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import UiParagraph from '~/components/Typography/UiParagraph.vue'
+import questions from './_data/question-answer.json'
+
+const activeIndex = ref<null | number>(null)
+
+const toggleFAQ = (index: number) => {
+  activeIndex.value = activeIndex.value === index ? null : index
+}
+
+useHead({
+  title: 'Вопрос - ответ | Vino Galante',
+})
+</script>