full page

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
-    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="pt-28 relative z-50">
-      <HeroBanner />
+  <div>
+    <section class="relative z-50">
+      <HeroBanner
+        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"
+      />
       <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>