change font-size 20px -> 15px

feat privacy page
feat titles-page

src/pages/books/_slug/_data/1.json

@@ -34,5 +34,6 @@
       "svg": "/img/svg/books/1/stash_target.svg"
     }
   ],
-  "href": "https://www.litres.ru/58125553/"
+  "href": "https://www.litres.ru/58125553/",
+  "hrefTitles": "title-1"
 }

src/pages/books/_slug/_data/2.json

@@ -34,5 +34,6 @@
       "svg": "/img/svg/books/1/stash_target.svg"
     }
   ],
-  "href": "https://www.litres.ru/vino-galante/kak-vlubit-v-sebya-lubogo-tonkaya-igra/"
+  "href": "https://www.litres.ru/vino-galante/kak-vlubit-v-sebya-lubogo-tonkaya-igra/",
+  "hrefTitles": "title-2"
 }

src/pages/books/_slug/_titlesSlug/_data/title-1.json

@@ -0,0 +1,187 @@
+{
+  "id": "title-1",
+  "title": "Оглавление",
+  "titleMeta": "Оглавление - Книга I",
+  "sections": [
+    {
+      "title": "Благодарности"
+    },
+    {
+      "title": "Введение",
+      "subsections": [
+        {
+          "title": "Работа с любым печатным материалом"
+        }
+      ]
+    },
+    {
+      "title": "Глава 1. Перезагрузка",
+      "subsections": [
+        {
+          "title": "Введение"
+        },
+        {
+          "title": {
+            "text": "Убеждения соблазнительницы",
+            "img": "/img/svg/books/1/titles-1/flowbite_wine-glass-solid.svg"
+          },
+          "items": [
+            "Всё всегда хорошо",
+            "Другие девушки не помеха для меня",
+            "Парней много, я одна",
+            "Использовать мужчин – это естественно и приятно",
+            "Отшивать мужчин – это естественно",
+            "Ты имеешь ровно то, что заслужила",
+            "Ты достойна гораздо больше того, что имеешь на данный момент",
+            "Все, о чем ты способна мечтать, ты способна иметь",
+            "Проявлять активность успешной девушке естественно",
+            "Все мужчины, с которыми ты общаешься до замужества – всего лишь твои тренажеры",
+            "Мужчина должен относиться к тебе уважительно",
+            "Среди мужчин встречается идиоты",
+            "Тебе выгодно, если мужчина хочет тебя",
+            "Мужчина общается с тобой только тогда, когда ему от тебя что-то нужно",
+            "Пока мужчина тебя не трахнул, ты не проиграла",
+            "Если ты получаешь удовольствие от общения с мужчиной – все идет по плану",
+            "Ты ничего не должна мужчине, даже если он подарил тебе дворец и яхту",
+            "Соблазнение – всего лишь очень интересная игра, в которой нет проигравших",
+            "У мужчин две ахиллесовых пяты – это и секс. Это в сто раз важнее секса",
+            "Мужчины – очень хорошие создания",
+            "Мужчины не примитивные",
+            "Мужчинам нужен далеко не только секс (Мужчине нужен от тебя только секс, если ты больше ничего ему дать не можешь)",
+            "Смысл жизни – развитие",
+            "Иметь запасной аэродром правильно и естественно для женщины",
+            "Сексом мужчину не удержать",
+            "Общение с мужчиной должно приносить радость",
+            "Мужчины стремятся не к хорошим, а к высокоранговым женщинам",
+            "Мир вокруг тебя – отражение тебя самой"
+          ]
+        },
+        {
+          "title": {
+            "text": "Секс на первом свидании",
+            "img": "/img/svg/books/1/titles-1/healthicons_sexual-reproductive-health.svg"
+          }
+        }
+      ]
+    },
+    {
+      "title": "Глава 2. Свобода",
+      "subsections": [
+        {
+          "title": "Введение"
+        },
+        {
+          "title": {
+            "text": "Поля-тараканы",
+            "img": "/img/svg/books/1/titles-1/simple-icons_cockroachlabs.svg"
+          }
+        },
+        {
+          "title": "Техника безопасности при работе в полях"
+        },
+        {
+          "title": "Восстановление сил"
+        },
+        {
+          "title": "Главный принцип развития"
+        },
+        {
+          "title": "Техники выхода в аптайм"
+        },
+        {
+          "title": "Действия"
+        },
+        {
+          "title": "Результат"
+        },
+        {
+          "title": {
+            "text": "Калибровка",
+            "img": "/img/svg/books/1/titles-1/material-symbols_editor-choice-rounded.svg"
+          },
+          "subsections": [
+            {
+              "title": "Азбука калибровки"
+            },
+            {
+              "title": "Как наблюдать, не вызывая подозрений"
+            }
+          ]
+        },
+        {
+          "title": {
+            "text": "Стратегия сближений",
+            "img": "/img/svg/books/1/titles-1/ph_strategy-fill.svg"
+          },
+          "subsections": [
+            {
+              "title": "Определение и классификация"
+            },
+            {
+              "title": "Псевдопассивная. Этап первый"
+            },
+            {
+              "title": "Псевдопассивная. Этап второй"
+            },
+            {
+              "title": "Активный тип стратегии"
+            },
+            {
+              "title": "Третий этап. Степени кокетства"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Глава 3. Затравка",
+      "subsections": [
+        {
+          "title": "Введение"
+        },
+        {
+          "title": {
+            "text": "Теория женской привлекательности",
+            "img": "/img/svg/books/1/titles-1/icon-park-outline_women.svg"
+          },
+          "subsections": [
+            {
+              "title": "Введение"
+            }
+          ]
+        },
+        {
+          "title": "Физическое здоровье"
+        },
+        {
+          "title": "Ментальный посыл. Стильность"
+        },
+        {
+          "title": "Ментальный посыл. Внутреннее ощущение мира"
+        },
+        {
+          "title": {
+            "text": "Ошибки резидента",
+            "img": "/img/svg/books/1/titles-1/si_error-line.svg"
+          },
+          "items": [
+            "Косак 1",
+            "Косак 2",
+            "Полукосак 3",
+            "Косак 4",
+            "МетаКосак 5 – опасный",
+            "МетаКосак 6 – опасный",
+            "Косак 7",
+            "МетаКосак 8 – крайне опасно",
+            "МетаКосак 9 – опасно",
+            "Косак 10",
+            "Косак 11"
+          ]
+        },
+        {
+          "title": "В следующей книге"
+        }
+      ]
+    }
+  ]
+}

src/pages/books/_slug/_titlesSlug/_data/title-2.json

@@ -0,0 +1,170 @@
+{
+  "id": "title-1",
+  "title": "Оглавление",
+  "titleMeta": "Оглавление - Книга II",
+  "sections": [
+    {
+      "title": "Введение"
+    },
+    {
+      "title": "Глава 1. Перед боем",
+      "subsections": [
+        {
+          "title": {
+            "text": "Закон Вино Галанте или закон неотвратимости успеха",
+            "img": "/img/svg/books/2/titles-2/octicon_law-24.svg"
+          }
+        },
+        {
+          "title": {
+            "text": "Запасной аэродром",
+            "img": "/img/svg/books/2/titles-2/mingcute_airplane-line.svg"
+          },
+          "subsections": [
+            {
+              "title": "Экскурс в историю"
+            },
+            {
+              "title": "Правила формирования запасного аэродрома"
+            },
+            {
+              "title": "Подробнее о пятом пункте или как не врать"
+            },
+            {
+              "title": "Следствия наличия запасного аэродрома"
+            }
+          ]
+        },
+        {
+          "title": {
+            "text": "Свидания",
+            "img": "/img/svg/books/2/titles-2/mdi_heart-outline (1).svg"
+          },
+          "subsections": [
+            {
+              "title": "Одежда"
+            },
+            {
+              "title": "Правильные места для свиданий"
+            },
+            {
+              "title": "Самое важное в свиданиях"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Глава 2. Ближний бой",
+      "subsections": [
+        {
+          "title": "Введение"
+        },
+        {
+          "title": {
+            "text": "Техника влюбления",
+            "img": "/img/svg/books/2/titles-2/Vector (4).svg"
+          },
+          "items": [
+            "Механизм мужской и женской влюбленностей",
+            "Главный секрет влюбления",
+            "Ментальная подстройка",
+            "Подстройка по ценностям",
+            "Качество девушки",
+            "Поведение",
+            "Как правильно хвалить мужчину",
+            "Игра “Ближе-дальше”",
+            "Дикий крышечок “Полярный разрыв”",
+            "Полярный разрыв в действии или крышечок на грани фола",
+            "Фишка “Рассмеяться как зло”",
+            "Фишка “АХ”",
+            "Техника влюбления “Отмененная помощь”",
+            "Техника влюбления “Не тот поворот”",
+            "Техника влюбления “Неожиданный разрыв”",
+            "Техника влюбления “Обещанный звонок”",
+            "Техника влюбления “Парень – подружка”",
+            "Фишка “Бросок кобры”",
+            "Фишка “Мягкий язык”",
+            "Вызов ревности"
+          ]
+        },
+        {
+          "title": {
+            "text": "Типичные неэффективные фишки девушек",
+            "img": "/img/svg/books/2/titles-2/Group.svg"
+          },
+          "items": ["Я выхожу замуж", "Я скучаю по парню", "Желание казаться круче, чем ты есть"]
+        },
+        {
+          "title": {
+            "text": "Чего никогда нельзя делать",
+            "img": "/img/svg/books/2/titles-2/Group (1).svg"
+          },
+          "subsections": [
+            {
+              "title": "Введение"
+            },
+            {
+              "title": "Оральные ласки"
+            },
+            {
+              "title": "Минет"
+            }
+          ]
+        },
+        {
+          "title": {
+            "text": "СМС-переписка",
+            "img": "/img/svg/books/2/titles-2/Vector (6).svg"
+          },
+          "subsections": [
+            {
+              "title": "Российские школы соблазнения"
+            },
+            {
+              "title": "Как найти соблазнителя"
+            },
+            {
+              "title": "История рождения одного термина"
+            }
+          ]
+        },
+        {
+          "title": {
+            "text": "Секс и девичья невинность",
+            "img": "/img/svg/books/2/titles-2/Vector (7).svg"
+          },
+          "subsections": [
+            {
+              "title": "Как парни воспринимают секс"
+            },
+            {
+              "title": "Девичья невинность"
+            },
+            {
+              "title": "Прожим девственницы. Метод Галанте."
+            },
+            {
+              "title": "Прожим девственницы. Классический метод."
+            },
+            {
+              "title": "Прожим девственницы. Метод пикапера."
+            },
+            {
+              "title": "Вместо эпилога"
+            }
+          ]
+        },
+        {
+          "title": "Что делать, если попался «сложный красавчик»"
+        },
+        {
+          "title": {
+            "text": "Словарь",
+            "img": "/img/svg/books/2/titles-2/Vector (8).svg"
+          }
+        }
+      ]
+    }
+  ]
+}

src/pages/books/_slug/_titlesSlug/indexTitlesPage.vue

@@ -0,0 +1,148 @@
+<template>
+  <div v-if="titles" class="relative z-50 min-h-screen text-white mb-[208px]">
+    <section class="flex flex-col relative z-40 mt-40 ml-18">
+      <UiHeading tag="H1" class="whitespace-pre-line [&]:font-normal mb-10 -ml-5" size="500">
+        {{ titles.title }}
+      </UiHeading>
+
+      <div class="flex flex-col gap-6">
+        <div v-for="(section, index) in titles.sections" :key="index" class="flex flex-col gap-4">
+          <!-- Main section title -->
+          <UiHeading tag="H2" size="300" class="text-three [&]:font-normal">
+            {{ section.title }}
+          </UiHeading>
+
+          <!-- Subsections -->
+          <div v-if="section.subsections" class="ml-6 flex flex-col gap-4">
+            <div
+              v-for="(subsection, subIndex) in section.subsections"
+              :key="subIndex"
+              class="flex flex-col gap-2"
+            >
+              <!-- Subsection with image -->
+              <div
+                v-if="typeof subsection.title === 'object'"
+                class="flex items-center gap-3 -ml-10"
+              >
+                <img
+                  v-if="subsection.title.img"
+                  :src="subsection.title.img"
+                  :alt="subsection.title.text"
+                  class="w-6 h-6"
+                />
+                <UiHeading tag="H3" size="300" class="[&]:font-normal">
+                  {{ subsection.title.text }}
+                </UiHeading>
+              </div>
+              <!-- Regular subsection -->
+              <UiHeading v-else tag="H3" size="300" class="[&]:text-gray-200 [&]:font-normal">
+                {{ subsection.title }}
+              </UiHeading>
+
+              <!-- Items list -->
+              <ul v-if="subsection.items" class="ml-6 flex flex-col gap-2 list-decimal">
+                <li v-for="(item, itemIndex) in subsection.items" :key="itemIndex">
+                  <UiParagraph size="300" class="[&]:text-gray-200 [&]:font-normal"
+                    >&nbsp;{{ item }}</UiParagraph
+                  >
+                </li>
+              </ul>
+
+              <!-- Nested subsections -->
+              <div v-if="subsection.subsections" class="flex flex-col gap-2">
+                <div v-for="(nestedSub, nestedIndex) in subsection.subsections" :key="nestedIndex">
+                  <UiHeading tag="H4" size="300" class="[&]:text-gray-200 [&]:font-normal">
+                    {{ nestedSub.title }}
+                  </UiHeading>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div v-else class="text-white text-center py-20">Содержание не найдено.</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import { useHead } from '@vueuse/head'
+
+interface SubsectionTitle {
+  text: string
+  img?: string
+}
+
+interface Subsection {
+  title: string | SubsectionTitle
+  items?: string[]
+  subsections?: Array<{
+    title: string
+  }>
+}
+
+interface Section {
+  title: string
+  subsections?: Subsection[]
+}
+
+interface TitlesData {
+  title: string
+  titleMeta: string
+  sections: Section[]
+}
+
+const route = useRoute()
+
+const currentTitlesData = ref<TitlesData | null>(null)
+
+const titles = computed(() => currentTitlesData.value)
+
+const loadTitlesData = async (slug: string) => {
+  try {
+    console.log('Loading titles data for slug:', slug)
+    const module = await import(`./_data/${slug}.json`)
+    console.log('Loaded module:', module)
+    currentTitlesData.value = module.default as TitlesData
+  } catch (error) {
+    console.error(`Ошибка при загрузке содержания с slug '${slug}':`, error)
+    currentTitlesData.value = null
+  }
+}
+
+watch(
+  () => route.params.titlesSlug,
+  async (newSlug) => {
+    console.log('Route params changed:', route.params)
+    console.log('New titlesSlug:', newSlug)
+    if (newSlug) {
+      await loadTitlesData(newSlug as string)
+    }
+  },
+  { immediate: true },
+)
+
+watch(titles, (newTitles) => {
+  if (newTitles) {
+    useHead({
+      title: `${newTitles.titleMeta} | Vino Galante`,
+      meta: [
+        {
+          name: 'description',
+          content: 'Содержание книги Vino Galante',
+        },
+      ],
+      link: [
+        {
+          rel: 'canonical',
+          href: `https://ebook.miduway.space/books/${route.params.slug}/${route.params.titlesSlug}`,
+        },
+      ],
+    })
+  }
+})
+</script>

src/pages/books/_slug/indexBookPage.vue

@@ -1,145 +1,169 @@
 <template>
-  <div v-if="book" class="relative z-50 min-h-screen text-white mb-[208px]">
-    <!--верхний блок-->
-    <section
-      class="flex flex-row relative z-40 before:content-[''] before:absolute before:top-[-140px] before:bg-top before:left-0 before:w-[1200px] before:h-[1000px] before:bg-[url(/src/assets/img/webp/vino-galante.webp)] before:bg-no-repeat before:bg-contain mt-40"
-    >
-      <!--левый блок контента-->
-      <section class="relative top-[-20px] min-w-[570px]">
-        <div class="flex flex-col items-center">
-          <img :src="book.img" :alt="book.buttonText" width="100%" height="100%" />
-        </div>
-      </section>
-      <!--правый блок контента-->
-      <section>
-        <div class="w-11/12 h-full flex flex-col justify-start">
+  <template v-if="book">
+    <div class="relative z-50 min-h-screen text-white mb-[208px]">
+      <template v-if="!route.params.titlesSlug">
+        <!--верхний блок-->
+        <section
+          class="flex flex-row relative z-40 before:content-[''] before:absolute before:top-[-140px] before:bg-top before:left-0 before:w-[1200px] before:h-[1000px] before:bg-[url(/src/assets/img/webp/vino-galante.webp)] before:bg-no-repeat before:bg-contain mt-40"
+        >
+          <!--левый блок контента-->
+          <section class="relative top-[-20px] min-w-[570px]">
+            <div class="flex flex-col items-center">
+              <img :src="book.img" :alt="book.buttonText" width="100%" height="100%" />
+            </div>
+          </section>
+          <!--правый блок контента-->
+          <section>
+            <div class="w-11/12 h-full flex flex-col justify-start">
+              <div>
+                <UiHeading tag="H1" class="whitespace-pre-line [&]:font-bold" size="300">
+                  {{ book.title }}
+                </UiHeading>
+                <UiParagraph class="mb-10" size="250">
+                  {{ book.subtitle }}
+                </UiParagraph>
+                <UiParagraph size="250" class="mb-20">
+                  {{ book.subdesc }}
+                </UiParagraph>
+                <UiParagraph size="250" class="whitespace-pre-line min-h-62">
+                  {{ book.description }}
+                </UiParagraph>
+              </div>
+            </div>
+          </section>
+        </section>
+        <!--средний блок-->
+        <section class="flex flex-row items-center ml-18 justify-between">
+          <!--левый-->
+          <div class="flex flex-col items-center min-h-[310px]">
+            <div class="flex flex-row">
+              <UiParagraph class="[&]:text-6xl">{{ book.price }}&nbsp;</UiParagraph>
+              <img src="/img/svg/books/ruble.svg" alt="ruble" />
+            </div>
+            <div class="mr-10 flex items-center flex-col gap-3">
+              <UiButton class="max-w-[380px] !font-normal !px-2 !py-4 mt-24">
+                {{ book.buttonText }}
+              </UiButton>
+              <UiParagraph size="200">
+                {{ book.buttonFormat }}
+              </UiParagraph>
+            </div>
+          </div>
+          <!--правый-->
+          <div class="min-h-[310px]">
+            <!--о книге-->
+            <div>
+              <ul class="flex flex-row mr-14 items-center justify-between lg:whitespace-nowrap">
+                <li class="flex flex-row mr-14 gap-3 items-center">
+                  <img
+                    src="/img/svg/books/book-pages.svg"
+                    alt="страниц"
+                    width="100%"
+                    height="100%"
+                  />
+                  <UiParagraph size="250" as="span">
+                    {{ book.pages }}
+                  </UiParagraph>
+                </li>
+                <li class="flex flex-row mr-14 gap-3 items-center">
+                  <img
+                    src="/img/svg/books/book-illustrations.svg"
+                    alt="иллюстраций"
+                    width="100%"
+                    height="100%"
+                  />
+                  <UiParagraph size="250" as="span">
+                    {{ book.illust }}
+                  </UiParagraph>
+                </li>
+                <li class="flex flex-row mr-14 gap-3 items-center">
+                  <img
+                    src="/img/svg/books/book-formats.svg"
+                    alt="формат"
+                    width="100%"
+                    height="100%"
+                  />
+                  <UiParagraph size="250" as="span">
+                    {{ book.format }}
+                  </UiParagraph>
+                </li>
+              </ul>
+            </div>
+
+            <!--навигация по книге-->
+            <div class="mt-24">
+              <ul class="flex flex-row mr-32 items-end justify-between lg:whitespace-nowrap">
+                <li class="flex flex-row gap-3 items-center">
+                  <RouterLink to="#" class="flex flex-col items-center gap-3 cursor-pointer">
+                    <img src="/img/svg/books/read.svg" alt="Читай отрывок" width="50" height="50" />
+                    <UiParagraph size="250" as="span"> Читай отрывок </UiParagraph>
+                  </RouterLink>
+                </li>
+                <li class="flex flex-row gap-3 items-center">
+                  <RouterLink to="#" class="flex flex-col items-center gap-3 cursor-pointer">
+                    <img
+                      src="/img/svg/books/download.svg"
+                      alt="Скачай отрывок"
+                      width="50"
+                      height="50"
+                    />
+                    <UiParagraph size="250" as="span"> Скачай отрывок </UiParagraph>
+                  </RouterLink>
+                </li>
+                <li class="flex flex-row gap-3 items-center">
+                  <RouterLink
+                    :to="{
+                      name: 'book-titles',
+                      params: {
+                        slug: route.params.slug,
+                        titlesSlug: book.hrefTitles,
+                      },
+                    }"
+                    class="flex flex-col items-center gap-3 cursor-pointer"
+                  >
+                    <img src="/img/svg/books/titles.svg" alt="Содержание" width="50" height="50" />
+                    <UiParagraph size="250" as="span"> Содержание </UiParagraph>
+                  </RouterLink>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+        <!--нижний блок-->
+        <section class="ml-18 mt-32">
           <div>
-            <UiHeading tag="H1" class="whitespace-pre-line [&]:font-bold" size="300">
-              {{ book.title }}
-            </UiHeading>
-            <UiParagraph class="mb-10" size="250">
-              {{ book.subtitle }}
-            </UiParagraph>
-            <UiParagraph size="250" class="mb-20">
-              {{ book.subdesc }}
-            </UiParagraph>
-            <UiParagraph size="250" class="whitespace-pre-line min-h-62">
-              {{ book.description }}
+            <UiHeading tag="H2" size="300" class="text-three"> Что ты узнаешь </UiHeading>
+            <ul class="flex mt-20 flex-row items-center justify-between">
+              <li
+                class="flex flex-col-reverse justify-end w-38 gap-4 h-64 items-center transition-transform transform hover:scale-110"
+                v-for="({ svg, text }, index) in book.whoUKnows"
+                :key="index"
+              >
+                <UiParagraph class="text-center" size="250">
+                  {{ text }}
+                </UiParagraph>
+                <img :src="`${svg}`" alt="Вопрос" width="45" height="45" />
+              </li>
+            </ul>
+          </div>
+          <div class="flex justify-center text-center mt-36">
+            <UiParagraph>
+              Или купи на ЛитРес - <br /><a class="text-three" :href="book.href" target="_blank"
+                >Реферальная ссылка для поддержки автора</a
+              >
             </UiParagraph>
           </div>
-        </div>
-      </section>
-    </section>
-    <!--средний блок-->
-    <section class="flex flex-row items-center ml-18 justify-between">
-      <!--левый-->
-      <div class="flex flex-col items-center min-h-[310px]">
-        <div class="flex flex-row">
-          <UiParagraph class="[&]:text-6xl">{{ book.price }}&nbsp;</UiParagraph>
-          <img src="/img/svg/books/ruble.svg" alt="ruble" />
-        </div>
-        <div class="mr-10 flex items-center flex-col gap-3">
-          <UiButton class="max-w-[380px] !font-normal !px-2 !py-4 mt-24">
-            {{ book.buttonText }}
-          </UiButton>
-          <UiParagraph size="200">
-            {{ book.buttonFormat }}
-          </UiParagraph>
-        </div>
-      </div>
-      <!--правый-->
-      <div class="min-h-[310px]">
-        <!--о книге-->
-        <div>
-          <ul class="flex flex-row mr-14 items-center justify-between lg:whitespace-nowrap">
-            <li class="flex flex-row mr-14 gap-3 items-center">
-              <img src="/img/svg/books/book-pages.svg" alt="страниц" width="100%" height="100%" />
-              <UiParagraph size="250" as="span">
-                {{ book.pages }}
-              </UiParagraph>
-            </li>
-            <li class="flex flex-row mr-14 gap-3 items-center">
-              <img
-                src="/img/svg/books/book-illustrations.svg"
-                alt="иллюстраций"
-                width="100%"
-                height="100%"
-              />
-              <UiParagraph size="250" as="span">
-                {{ book.illust }}
-              </UiParagraph>
-            </li>
-            <li class="flex flex-row mr-14 gap-3 items-center">
-              <img src="/img/svg/books/book-formats.svg" alt="формат" width="100%" height="100%" />
-              <UiParagraph size="250" as="span">
-                {{ book.format }}
-              </UiParagraph>
-            </li>
-          </ul>
-        </div>
-
-        <!--навигация по книге-->
-        <div class="mt-24">
-          <ul class="flex flex-row mr-32 items-end justify-between lg:whitespace-nowrap">
-            <li class="flex flex-row gap-3 items-center">
-              <RouterLink to="#" class="flex flex-col items-center gap-3 cursor-pointer">
-                <img src="/img/svg/books/read.svg" alt="Читай отрывок" width="50" height="50" />
-                <UiParagraph size="250" as="span"> Читай отрывок </UiParagraph>
-              </RouterLink>
-            </li>
-            <li class="flex flex-row gap-3 items-center">
-              <RouterLink to="#" class="flex flex-col items-center gap-3 cursor-pointer">
-                <img
-                  src="/img/svg/books/download.svg"
-                  alt="Скачай отрывок"
-                  width="50"
-                  height="50"
-                />
-                <UiParagraph size="250" as="span"> Скачай отрывок </UiParagraph>
-              </RouterLink>
-            </li>
-            <li class="flex flex-row gap-3 items-center">
-              <RouterLink to="#" class="flex flex-col items-center gap-3 cursor-pointer">
-                <img src="/img/svg/books/titles.svg" alt="Содержание" width="50" height="50" />
-                <UiParagraph size="250" as="span"> Содержание </UiParagraph>
-              </RouterLink>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </section>
-    <!--нижний блок-->
-    <section class="ml-18 mt-32">
-      <div>
-        <UiHeading tag="H2" size="300" class="text-three"> Что ты узнаешь </UiHeading>
-        <ul class="flex mt-20 flex-row items-center justify-between">
-          <li
-            class="flex flex-col-reverse justify-end w-38 gap-4 h-64 items-center transition-transform transform hover:scale-110"
-            v-for="({ svg, text }, index) in book.whoUKnows"
-            :key="index"
-          >
-            <UiParagraph class="text-center" size="250">
-              {{ text }}
-            </UiParagraph>
-            <img :src="`${svg}`" alt="Вопрос" width="45" height="45" />
-          </li>
-        </ul>
-      </div>
-      <div class="flex justify-center text-center mt-36">
-        <UiParagraph>
-          Или купи на ЛитРес - <br /><a class="text-three" :href="book.href" target="_blank"
-            >Реферальная ссылка для поддержки автора</a
-          >
-        </UiParagraph>
-      </div>
-    </section>
-  </div>
+        </section>
+      </template>
+      <RouterView />
+    </div>
+  </template>
   <div v-else class="text-white text-center py-20">Книга не найдена.</div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, RouterView } from 'vue-router'
 import UiHeading from '@/components/Typography/UiHeading.vue'
 import UiParagraph from '@/components/Typography/UiParagraph.vue'
 import UiButton from '@/components/UiButton/UiButton.vue'
@@ -164,6 +188,7 @@ interface BookDetail {
     svg: string
   }>
   href: string
+  hrefTitles: string
 }
 
 const route = useRoute()

src/pages/privacy/privacyPage.vue

@@ -0,0 +1,87 @@
+<template>
+  <section>
+    <UiHeading size="300" tag="H1" class="mb-5"> Политика конфиденциальности </UiHeading>
+    <UiParagraph size="300"
+      >Настоящая политика конфиденциальности описывает, как мы собираем, используем и защищаем
+      личную информацию, которую пользователи предоставляют при использовании нашего
+      сайта.</UiParagraph
+    >
+
+    <UiHeading size="300" tag="H2">1. Сбор информации</UiHeading>
+    <UiParagraph size="300"
+      >При оформлении заказа на сайте вы предоставляете персональные данные, которые
+      включают:</UiParagraph
+    >
+    <ul class="list-disc pl-5">
+      <li><UiParagraph size="300">Адрес электронной почты</UiParagraph></li>
+      <li><UiParagraph size="300">Имя (по желанию)</UiParagraph></li>
+    </ul>
+
+    <UiHeading size="300" tag="H2">2. Использование информации</UiHeading>
+    <UiParagraph size="300">Ваши личные данные используются исключительно для:</UiParagraph>
+    <ul class="list-disc pl-5">
+      <li><UiParagraph size="300">Обработки и выполнения вашего заказа.</UiParagraph></li>
+      <li><UiParagraph> Связи с вами по вопросам вашего заказа. </UiParagraph></li>
+      <li>
+        <UiParagraph size="300">
+          Уведомления о важных обновлениях и новостях сайта (только если вы явно согласились на
+          рассылку).</UiParagraph
+        >
+      </li>
+    </ul>
+
+    <UiHeading size="300" tag="H2">3. Защита личных данных</UiHeading>
+    <UiParagraph size="300">
+      Мы предпринимаем необходимые меры для защиты ваших личных данных от несанкционированного
+      доступа, изменения, разглашения или уничтожения. Доступ к личным данным имеют только
+      сотрудники, непосредственно участвующие в обработке заказов.
+    </UiParagraph>
+
+    <UiHeading size="300" tag="H2">4. Передача информации третьим лицам</UiHeading>
+    <UiParagraph size="300">
+      Мы не передаём ваши личные данные третьим лицам, за исключением случаев, предусмотренных
+      законодательством Российской Федерации.
+    </UiParagraph>
+
+    <UiHeading size="300" tag="H2">5. Cookies (Куки-файлы)</UiHeading>
+    <UiParagraph size="300">
+      Мы используем файлы cookie, чтобы улучшить ваш пользовательский опыт. Вы можете отключить
+      файлы cookie в настройках вашего браузера, однако это может ограничить доступ к некоторым
+      функциям сайта.
+    </UiParagraph>
+
+    <UiHeading size="300" tag="H2">6. Изменения в политике конфиденциальности</UiHeading>
+    <UiParagraph size="300">
+      Мы можем периодически обновлять настоящую политику конфиденциальности. Об изменениях мы
+      уведомим вас, разместив новую версию политики на данной странице.
+    </UiParagraph>
+
+    <UiHeading size="300" tag="H2">7. Ваше согласие</UiHeading>
+    <UiParagraph size="300"
+      >Используя наш сайт, вы соглашаетесь с условиями данной политики
+      конфиденциальности.</UiParagraph
+    >
+    <UiParagraph size="300">
+      Если у вас возникнут вопросы или пожелания относительно обработки ваших персональных данных,
+      пожалуйста, свяжитесь с нами по электронной почте:
+      <a href="mailto:vinogalante@yandex.ru">vinogalante@yandex.ru</a>.
+    </UiParagraph>
+  </section>
+</template>
+
+<script setup lang="ts">
+import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import { useHead } from '@vueuse/head'
+
+useHead({
+  title: 'Поликита конфиденциальности | Vino Galante',
+  meta: [{ name: 'description', content: 'Онлайн магазин книг автора Vino Galante' }],
+  link: [
+    {
+      rel: 'canonical',
+      href: `https://ebook.miduway.space/privacy`,
+    },
+  ],
+})
+</script>