add pages

2025-06-21 09:00:38 +04:00
parent f8a632b6df
commit e396883830
19 changed files with 490 additions and 81 deletions
--- a/pages/question/_data/question-answer.json
+++ b/pages/question/_data/question-answer.json
@ -0,0 +1,46 @@
+[
+  {
+    "question": "1. Как купить книгу?",
+    "answer": "Чтобы купить книгу, просто перейдите на страницу соответствующей книги и нажмите кнопку «Купить». Вы будете перенаправлены в корзину, где можно подтвердить заказ и выбрать способ оплаты."
+  },
+  {
+    "question": "2. Какие способы оплаты доступны?",
+    "answer": "На сайте доступны самые удобные и безопасные способы оплаты: банковские карты (Visa, Mastercard, Мир), Система Быстрых Платежей (СБП) и сервис SberPay. Вы можете выбрать любой из них при оформлении заказа."
+  },
+  {
+    "question": "3. Можно ли скачать книгу сразу после покупки?",
+    "answer": "Да, после подтверждения покупки, ссылка на скачивание книги будет доступна сразу. Вы получите файл на указанный при заказе email, либо сможете скачать книгу непосредственно с сайта."
+  },
+  {
+    "question": "4. Что делать, если я не могу скачать книгу?",
+    "answer": "Если у вас возникли проблемы с скачиванием книги, пожалуйста, свяжитесь с нами через контактный email vinogalante@yandex.ru, и мы постараемся решить ваш вопрос как можно скорее."
+  },
+  {
+    "question": "5. Есть ли пробный отрывок книги?",
+    "answer": "Да, на каждой странице книги есть возможность ознакомиться с аннотацией и скачать отрывок или читать его прямо на сайте. Это поможет вам оценить стиль и содержание книги перед покупкой."
+  },
+  {
+    "question": "6. Как читать книгу на мобильном устройстве?",
+    "answer": "Книги можно читать на мобильных устройствах в любом формате (например, PDF). Просто скачайте файл и откройте его с помощью подходящего приложения, например, Adobe Reader для PDF."
+  },
+  {
+    "question": "7. Можно ли вернуть книгу, если она не понравилась?",
+    "answer": "К сожалению, электронные книги не подлежат возврату, поскольку они могут быть скачаны сразу после покупки. Мы рекомендуем ознакомиться с отрывком книги перед покупкой, чтобы убедиться, что она соответствует вашим ожиданиям."
+  },
+  {
+    "question": "8. Как связаться с автором?",
+    "answer": "Вы можете связаться со мной по электронной почте vinogalante@yandex.ru. Я всегда рад услышать отзывы о книгах и ответить на вопросы."
+  },
+  {
+    "question": "9. Как узнать, когда выйдет следующая книга?",
+    "answer": "На данный момент автор не планирует продолжать писать книги по данной теме. Сейчас автор сосредоточен на других проектах."
+  },
+  {
+    "question": "10. Есть ли скидки на книги?",
+    "answer": "Да, при оплате двух книг сразу предоставляется скидка 10%. Просто добавьте обе книги в корзину, и скидка будет автоматически применена при оформлении заказа."
+  },
+  {
+    "question": "11. Могу ли я получить книгу в другом формате?",
+    "answer": "На данный момент книги доступны в формате PDF, ePub. Если вам нужен другой формат, пожалуйста, свяжитесь с нами, и мы постараемся помочь."
+  }
+]
--- a/pages/question/index.vue
+++ b/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>