full page

package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.8",
+        "@vueuse/head": "^2.0.0",
         "pinia": "^3.0.3",
+        "swiper": "^11.2.8",
         "tailwindcss": "^4.1.8",
         "vue": "^3.5.13",
         "vue-router": "4"
@@ -2209,6 +2211,76 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@unhead/dom": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.20.tgz",
+      "integrity": "sha512-jgfGYdOH+xHJF/j8gudjsYu3oIjFyXhCWcgKaw3vQnT616gSqyqnGQGOItL+BQtQZACKNISwIfx5PuOtztMKLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/schema": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.11.20.tgz",
+      "integrity": "sha512-0zWykKAaJdm+/Y7yi/Yds20PrUK7XabLe9c3IRcjnwYmSWY6z0Cr19VIs3ozCj8P+GhR+/TI2mwtGlueCEYouA==",
+      "license": "MIT",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/shared": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.11.20.tgz",
+      "integrity": "sha512-1MOrBkGgkUXS+sOKz/DBh4U20DNoITlJwpmvSInxEUNhghSNb56S0RnaHRq0iHkhrO/cDgz2zvfdlRpoPLGI3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "packrup": "^0.1.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/ssr": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.11.20.tgz",
+      "integrity": "sha512-j6ehzmdWGAvv0TEZyLE3WBnG1ULnsbKQcLqBDh3fvKS6b3xutcVZB7mjvrVE7ckSZt6WwOtG0ED3NJDS7IjzBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/vue": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.11.20.tgz",
+      "integrity": "sha512-sqQaLbwqY9TvLEGeq8Fd7+F2TIuV3nZ5ihVISHjWpAM3y7DwNWRU7NmT9+yYT+2/jw1Vjwdkv5/HvDnvCLrgmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20",
+        "hookable": "^5.5.3",
+        "unhead": "1.11.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -2571,6 +2643,21 @@
         }
       }
     },
+    "node_modules/@vueuse/head": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-2.0.0.tgz",
+      "integrity": "sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/dom": "^1.7.0",
+        "@unhead/schema": "^1.7.0",
+        "@unhead/ssr": "^1.7.0",
+        "@unhead/vue": "^1.7.0"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -4595,6 +4682,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/packrup": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/packrup/-/packrup-0.1.2.tgz",
+      "integrity": "sha512-ZcKU7zrr5GlonoS9cxxrb5HVswGnyj6jQvwFBa6p5VFw7G71VAHcUKL5wyZSU/ECtPM/9gacWxy2KFQKt1gMNA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5158,6 +5254,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz",
+      "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.8.tgz",
@@ -5341,6 +5456,21 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/unhead": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.11.20.tgz",
+      "integrity": "sha512-3AsNQC0pjwlLqEYHLjtichGWankK8yqmocReITecmpB1H0aOabeESueyy+8X1gyJx4ftZVwo9hqQ4O3fPWffCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unhead/dom": "1.11.20",
+        "@unhead/schema": "1.11.20",
+        "@unhead/shared": "1.11.20",
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/unicorn-magic": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
@@ -5774,6 +5904,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
     }
   }
 }

package.json

@@ -13,7 +13,9 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.8",
+    "@vueuse/head": "^2.0.0",
     "pinia": "^3.0.3",
+    "swiper": "^11.2.8",
     "tailwindcss": "^4.1.8",
     "vue": "^3.5.13",
     "vue-router": "4"
@@ -28,14 +30,14 @@
     "eslint": "^9.22.0",
     "eslint-plugin-vue": "~10.0.0",
     "husky": "^9.1.7",
+    "jiti": "^2.4.2",
+    "npm-run-all2": "^7.0.2",
+    "playwright": "^1.52.0",
     "prettier": "3.5.3",
     "typescript": "~5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-vue-devtools": "^7.7.2",
-    "vue-tsc": "^2.2.8",
+    "vue-tsc": "^2.2.8"
-    "jiti": "^2.4.2",
-    "npm-run-all2": "^7.0.2",
-    "playwright": "^1.52.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/UiButton/UiButton.params.ts

@@ -4,7 +4,10 @@ export const colorVariants = {
     'bg-transparent',
     'text-primary',
     'hover:bg-accent-50',
-    'border:bg-accent-50',
+    'border-accent-50',
     'border',
+    'hover:bg-accent-100',
+    'active:bg-accent-150',
+    'cursor-pointer',
   ],
 }

src/layout/UiFooter/UiFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="mx-auto container">
+  <footer class="mx-auto container max-2xl:pl-4">
     <div class="relative z-10 max-w-[1280px] mx-auto">
       <div class="flex space-x-5 xl:space-x-[51px] mb-5">
         <UiNav :nav-content="footerNavigation" />

src/layout/UiHeader/UiHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="py-4 container mx-auto">
+  <header class="py-4 container mx-auto max-2xl:pl-4">
     <div class="flex flex-row-reverse justify-end gap-4 items-center max-w-[1280px] mx-auto">
       <slot name="content" />
       <div class="flex items-center gap-32">

src/layout/UiLayout.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="min-h-svh overflow-x-hidden bg-black-50 lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-[520px] before:w-full before:bg-[url(/src/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-cover before:z-0"
+    class="min-h-svh overflow-x-hidden bg-black-50 lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-[520px] before:w-full before:bg-[url(/src/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-cover before:z-40"
   >
     <div
-      class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain after:pointer-events-none"
+      class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain"
     />
     <div
-      class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[1120px] after:h-[1800px] after:bg-[url(/src/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-cover after:pointer-events-none"
+      class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[1120px] after:h-[1800px] after:bg-[url(/src/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-cover"
     />
     <div
       class="relative z-40 before:content-[''] before:absolute before:top-0 before:left-0 before:w-[1120px] before:h-[1000px] before:bg-[url(/src/assets/img/webp/hero-flowers.webp)] before:bg-no-repeat before:bg-left before:bg-contain"

src/main.ts

@@ -1,11 +1,15 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { createHead } from '@vueuse/head'
+
 import './style.css'
 import App from './App.vue'
 import router from '@/config/router/index'
 
 const app = createApp(App)
+const head = createHead()
 
+app.use(head)
 app.use(createPinia())
 app.use(router)
 

src/pages/mainPage/_ui/feedbackSection/_data/feedback.data.ts

@@ -0,0 +1,16 @@
+const feedbackData = [
+  {
+    text: 'Классная книга! Понятная и увлекательная. По моему мнению, проблема только в том, что женщине самой (без поддержки), выполнить всё, что написано в книге чрезвычайно сложно.\nИдеи супер: \n – первый секс – козырный туз женщины и не надо отдавать его в начале :)\n – жизнь взяток не берет! Надо действовать.',
+  },
+  {
+    text: 'Интересная книга, читаешь «не отрывая глаз», те рекомендации, которые я применяла – действительно рабочие!! Всем советую! По моему мнению видно, что автор действительно очень хорошо знает и понимаем женскую психологию.',
+  },
+  {
+    text: 'Книга содержит знания, которыми жалко делиться ;) нигде ничего подобного не встречала. Очень много авторских формул и примеров, автор - опытный соблазнитель :) кое-что уже успешно применяла на практике',
+  },
+  {
+    text: 'Книга для всех девушек, кто только начинают строить отношения. Это вакцина от девичьих ошибок, дает понимание, чего они хотят. Учит не наступать на их уловки. Благодаря ей я стала более уверена в себе.',
+  },
+]
+
+export default feedbackData

src/pages/mainPage/_ui/feedbackSection/feedbackSection.vue

@@ -0,0 +1,129 @@
+<template>
+  <section class="feedback-section">
+    <UiHeading tag="H2" size="300" class="text-three mb-4 pl-16 pr-24">
+      Что говорят читатели
+    </UiHeading>
+
+    <!-- Slider main container -->
+
+    <div class="swiper feedback-swiper relative">
+      <!-- If we need pagination -->
+
+      <!-- Additional required wrapper -->
+      <div class="swiper-wrapper">
+        <!-- Slides -->
+        <div
+          v-for="(feedback, index) in feedbackData"
+          :key="index"
+          class="swiper-slide feedback-slide !w-[356px] !h-[325px]"
+        >
+          <div class="feedback-card !w-full !h-full">
+            <UiParagraph size="250" class="card-text">{{ feedback.text }}</UiParagraph>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex items-center flex-col">
+      <UiParagraph size="250" class="text-center mt-20">
+        Твое мнение важно!<br />
+        Если книга была полезной или вызвала эмоции, оставь отзыв.<br />
+        Это поможет другим и вдохновит на новые главы. <br />
+        Спасибо!
+      </UiParagraph>
+      <UiButton @click="console.log(1)" class="mt-10" variants="secondary">Написать отзыв</UiButton>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue' // Добавляем onMounted
+import Swiper from 'swiper'
+import { Pagination, Autoplay } from 'swiper/modules'
+import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import feedbackData from './_data/feedback.data'
+
+import 'swiper/css'
+import 'swiper/css/pagination'
+import UiButton from '@/components/UiButton/UiButton.vue'
+
+onMounted(() => {
+  new Swiper('.feedback-swiper', {
+    modules: [Pagination, Autoplay],
+    direction: 'horizontal',
+    loop: true,
+    autoplay: {
+      delay: 3000,
+      disableOnInteraction: false,
+    },
+    slidesPerView: 'auto',
+    spaceBetween: 72,
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: false,
+    },
+  })
+})
+</script>
+
+<style lang="css" scoped>
+.feedback-section {
+  overflow: hidden;
+}
+
+.feedback-swiper {
+  width: 100%;
+  height: auto;
+  padding-bottom: 40px;
+  position: relative;
+}
+
+.feedback-slide {
+  width: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.feedback-card {
+  background-color: #1a1a1a;
+  border-radius: 10px;
+  padding: 20px;
+  color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-title {
+  margin-bottom: 10px;
+}
+
+.card-text {
+  white-space: pre-line;
+  margin-bottom: 10px;
+}
+
+.swiper-pagination {
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  display: flex;
+  justify-content: center;
+}
+
+.swiper-pagination-bullet {
+  background-color: #fff;
+  opacity: 0.4;
+  margin: 0 4px;
+}
+
+.swiper-pagination-bullet-active {
+  background-color: #fff;
+  opacity: 1;
+}
+</style>

src/pages/mainPage/_ui/youNotAloneSection/youNotAloneSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="flex flex-row">
+    <div class="lg:w-4/12 mr-20">
+      <UiHeading tag="H2" size="300" class="text-three mb-4">
+        💔 Ты не одна.
+        <br />Я знаю, через что ты<br />
+        проходишь.
+      </UiHeading>
+      <UiParagraph size="250" class="xl:max-w-[322px]"
+        >Когда ты снова и снова отдаёшь сердце, а в ответ — тишина или игра, это ранит. Я знаю это
+        чувство. Я был по ту сторону: манипулировал, очаровывал, уходил.
+
+        <br /><br />Я — бывший Казанова. И однажды я понял: больше так нельзя.
+
+        <br /><br />Эти книги — не теория. Это ключ к пониманию, как устроена мужская психология,
+        чего на самом деле хочет мужчина, и как перестать теряться в отношениях.
+
+        <br /><br />Я написал их для тебя — чтобы ты могла быть счастливой, не прогибаясь, не
+        умоляя, не теряя себя. Если ты устала «играть», если хочешь любви по-настоящему — начни с
+        первой страницы. В этих книгах нет воды. Только правда.</UiParagraph
+      >
+    </div>
+    <div class="lg:w-9/12">
+      <img alt="meeting" width="100%" height="100%" src="/img/webp/meetingAlone.webp" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+</script>

src/pages/mainPage/indexPage.vue

@@ -1,14 +1,25 @@
 <template>
-  <div
+  <div>
-    class="bg-[url('/src/assets/img/png/bg.png')] z-50 bg-no-repeat bg-[400px] rounded-[50px] relative after:absolute after:bg-[url('/src/assets/img/webp/header-flowers-4.webp')] after:top-0 after:w-[418px] after:right-0 after:h-[230px] after:z-20 after:content-[''] after:bg-contain after:bg-no-repeat after:bg-right"
+    <section class="relative z-50">
-  >
+      <HeroBanner
-    <section class="pt-28 relative z-50">
+        class="pt-28 bg-[url('/src/assets/img/png/bg.png')] z-40 bg-no-repeat bg-[400px] rounded-[50px] relative after:absolute after:bg-[url('/src/assets/img/webp/header-flowers-4.webp')] after:top-0 after:w-[418px] after:right-0 after:h-[230px] after:z-20 after:content-[''] after:bg-contain after:bg-no-repeat after:bg-right"
-      <HeroBanner />
+      />
       <ForYouSection class="mt-40 pl-16 pr-24" />
+      <YouNotAloneSection class="mt-40 pl-16 pr-24 mb-40" />
+      <FeedbackSection class="mt-40 mb-52" />
     </section>
   </div>
 </template>
 <script setup lang="ts">
+import FeedbackSection from './_ui/feedbackSection/feedbackSection.vue'
 import ForYouSection from './_ui/forYouSection/forYouSection.vue'
 import HeroBanner from './_ui/heroBanner/heroBanner.vue'
+import YouNotAloneSection from './_ui/youNotAloneSection/youNotAloneSection.vue'
+
+import { useHead } from '@vueuse/head'
+
+useHead({
+  title: 'Vino Galante',
+  meta: [{ name: 'description', content: 'Онлайн магазин книг автора Vino Galante' }],
+})
 </script>