Merge pull request 'production' (#4) from production into develop

Reviewed-on: #4

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/App.vue

@@ -6,4 +6,5 @@
 
 <script setup lang="ts">
 import UiLayout from './layout/UiLayout.vue'
+import { RouterView } from 'vue-router'
 </script>

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
-    official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/Typography/UiHeading.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="tag"
-    class="font-semibold text-twilight-900"
+    class="font-semibold"
     :class="[
       {
         'text-3xl md:text-4xl lg:text-5xl 2xl:text-6xl': size === '600',

src/components/Typography/UiParagraph.vue

@@ -16,7 +16,10 @@
         'text-lg lg:text-[20px]': size === '300',
       }, // 16px
       {
-        'text-sm': size === '200',
+        'text-[15px]': size === '250',
+      }, // 15px
+      {
+        'text-[13px]': size === '200',
       }, // 14px
     ]"
   >

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/components/UiButton/UiButton.vue

@@ -1,8 +1,8 @@
 <template>
   <component
     :is="tag"
-    class="px-24 py-4 rounded-[20px] text-[30px] cursor-pointer"
+    class="px-14 py-4 rounded-[20px] text-[30px] cursor-pointer shadow-[0px_16px_50px_-16px_rgba(229,30,125,1)]"
-    :class="{ baseStyle, size }"
+    :class="[baseStyle, size]"
     data-ui="ui-button"
   >
     <slot />
@@ -31,7 +31,7 @@ const props = defineProps({
   },
 })
 
-const { tag, variants } = toRefs(props)
+const { tag, variants, size } = toRefs(props)
 
 const colorClasses: Record<'primary' | 'secondary', string[]> = {
   primary: colorVariants.primary,

src/components/UiNav/UiNav.vue

@@ -1,14 +1,20 @@
 <template>
   <UiParagraph
     class="cursor-pointer"
-    tag="span"
+    as="span"
     size="300"
     v-for="({ path, name, target }, index) in navContent"
     :key="index"
+    data-ui="ui-nav"
+  >
+    <component
+      data-ui="ui-nav-btn"
+      :is="target ? 'a' : 'RouterLink'"
+      :to="path"
+      :href="path"
+      :target="target"
+      >{{ name }}</component
     >
-    <component :is="target ? 'a' : 'RouterLink'" :to="path" :href="path" :target="target">{{
-      name
-    }}</component>
   </UiParagraph>
 </template>
 <script setup lang="ts">

src/config/router/index.ts

@@ -1,8 +1,8 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import routes from './routes'
 
 const router = createRouter({
-  history: createWebHashHistory(import.meta.env.VITE_URL),
+  history: createWebHistory(import.meta.env.VITE_URL),
   routes,
 })
 

src/layout/UiFooter/UiFooter.vue

@@ -1,33 +1,32 @@
 <template>
-  <footer class="mx-auto container">
+  <footer class="mx-auto container max-2xl:pl-4">
-    <div class="relative z-10">
+    <div class="relative z-50 max-w-[1280px] mx-auto">
-      <div class="flex space-x-[51px] mb-5">
+      <div class="flex space-x-5 xl:space-x-[51px] mb-5">
         <UiNav :nav-content="footerNavigation" />
       </div>
       <div class="xl:max-w-[1225px] pb-7 flex justify-between">
         <div>
-          <UiParagraph tag="span" size="300"
+          <UiParagraph as="span" size="300"
             >По всем вопросам:<br />
             <a href="mailto:vinogalante@yandex.ru" target="_blank">
               vinogalante@yandex.ru
             </a></UiParagraph
           >
         </div>
-        <div>
+
-          <UiParagraph tag="span" size="300" class="[&]:text-secondary"
+        <div class="flex flex-col [&>[data-ui=ui-nav]]:text-secondary" v-if="route.path === '/'">
-            ><a href="https://www.litres.ru/" target="_blank">
+          <UiNav :nav-content="refLitres" />
-              Реферальная ссылка на ЛитРес
-            </a></UiParagraph
-          >
         </div>
       </div>
     </div>
-    <!-- <img class="absolute top-6" src="/src/assets/img/webp/footer-flowers.webp" /> -->
   </footer>
 </template>
 
 <script setup lang="ts">
 import UiParagraph from '@/components/Typography/UiParagraph.vue'
 import UiNav from '@/components/UiNav/UiNav.vue'
-import { footerNavigation } from '@/layout/UiFooter/_data'
+import { footerNavigation, refLitres } from '@/layout/UiFooter/_data'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 </script>

src/layout/UiFooter/_data/index.ts

@@ -1 +1,3 @@
 export { default as footerNavigation } from '@/layout/UiFooter/_data/footer-navigation.data'
+
+export { default as refLitres } from '@/layout/UiFooter/_data/ref-litres.data'

src/layout/UiFooter/_data/ref-litres.data.ts

@@ -0,0 +1,14 @@
+const refLitres = [
+  {
+    name: 'Реферальная ссылка на ЛитРес - Книга I',
+    path: 'https://www.litres.ru/58125553/',
+    target: '_blank',
+  },
+  {
+    name: 'Реферальная ссылка на ЛитРес - Книга II',
+    path: 'https://www.litres.ru/vino-galante/kak-vlubit-v-sebya-lubogo-tonkaya-igra/',
+    target: '_blank',
+  },
+]
+
+export default refLitres

src/layout/UiHeader/UiHeader.vue

@@ -1,12 +1,14 @@
 <template>
-  <header class="[&]:bg-accent text-white 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">
+    <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">
-        <div class="russo-one-regular">
+        <div class="russo-one-regular cursor-pointer !text-primary">
-          <UiParagraph tag="span" class="[&]:text-5xl">Vino Galante</UiParagraph>
+          <UiParagraph as="span" class="[&]:text-5xl">
+            <RouterLink to="/"> Vino Galante </RouterLink>
+          </UiParagraph>
         </div>
-        <div class="flex space-x-10">
+        <div class="flex flex-wrap space-x-10">
           <UiNav :nav-content="headerNavigation" />
         </div>
       </div>
@@ -17,6 +19,7 @@
 
 <script setup lang="ts">
 import UiNav from '@/components/UiNav/UiNav.vue'
+import { RouterLink } from 'vue-router'
 import { headerNavigation } from './_data'
 import UiParagraph from '@/components/Typography/UiParagraph.vue'
 </script>

src/layout/UiLayout.vue

@@ -1,9 +1,20 @@
 <template>
   <div
-    class="min-h-svh 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"
   >
-    <UiHeader />
+    <div
-    <UiMain />
+      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"
+    />
+    <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"
+    />
+    <UiHeader class="relative z-50" />
+    <UiMain class="!min-h-[1800px] text-primary relative">
+      <slot />
+    </UiMain>
     <UiFooter />
   </div>
 </template>

src/layout/UiMain/UiMain.vue

@@ -1,6 +1,6 @@
 <template>
-  <main class="pt-16 mt-10 px-6 min-h-screen h-full">
+  <main class="mt-10 px-6 min-h-screen h-full">
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-[1280px] mx-auto">
       <Suspense>
         <slot />
       </Suspense>

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/forYouSection/forYouSection.vue

@@ -0,0 +1,54 @@
+<template>
+  <section>
+    <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="({ img, text }, index) in questions.data"
+        :key="index"
+      >
+        <UiParagraph class="text-center" size="250">
+          {{ text }}
+        </UiParagraph>
+        <img :src="`${img}`" alt="Вопрос" width="101" height="101" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import { reactive } from 'vue'
+
+const questions = reactive({
+  data: [
+    {
+      img: '/img/svg/ellipse1.svg',
+      text: 'Что делать, если у тебя ноги не "от ушей" и ты далеко не Мисс Мира?',
+    },
+    {
+      img: '/img/svg/ellipse2.svg',
+      text: 'Как начать легко общаться с противоположным полом и о чем надо помолчать?',
+    },
+    {
+      img: '/img/svg/ellipse3.svg',
+      text: 'Как относиться к сексу и на сколько важна девичья невинность?',
+    },
+    {
+      img: '/img/svg/ellipse4.svg',
+      text: 'Сколько нужно заниматься, чтобы обрести НОВУЮ себя?',
+    },
+    {
+      img: '/img/svg/ellipse5.svg',
+      text: 'Как выработать стратегию долгосрочных отношений?',
+    },
+    {
+      img: '/img/svg/ellipse6.svg',
+      text: 'Как добиться того, чтоб парень делал так, как ты хочешь, но думал, что он сам так решил?',
+    },
+  ],
+})
+</script>

src/pages/mainPage/_ui/heroBanner/_ui/buyContent.vue

@@ -0,0 +1,35 @@
+import UiParagraph from '@/components/Typography/UiParagraph.vue';
+<template>
+  <div
+    v-for="({ topContent, button, botContent }, index) in content.data"
+    :key="index"
+    class="flex flex-col items-center max-w-96"
+  >
+    <UiParagraph size="300" class="mb-12 h-32">{{ topContent }} </UiParagraph>
+    <UiButton variants="primary" class="mb-3 w-full">{{ button }} </UiButton>
+    <UiParagraph as="span" size="200"> {{ botContent }}</UiParagraph>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import UiButton from '@/components/UiButton/UiButton.vue'
+import { reactive } from 'vue'
+
+const content = reactive({
+  data: [
+    {
+      topContent:
+        '💡 Узнай, как думает мужчина, что его действительно цепляет, и что делает женщину незабываемой.',
+      button: 'КУПИТЬ КНИГУ I',
+      botContent: 'PDF + EPUB сразу после оплаты',
+    },
+    {
+      topContent:
+        '💡 Продолжение для тех, кто готов перейти от флирта к глубокому контакту. Как строить притяжение, не теряя себя.',
+      button: 'КУПИТЬ КНИГУ II',
+      botContent: 'PDF + EPUB сразу после оплаты',
+    },
+  ],
+})
+</script>

src/pages/mainPage/_ui/heroBanner/heroBanner.vue

@@ -0,0 +1,18 @@
+<template>
+  <section>
+    <div class="relative z-50">
+      <img
+        src="/src/assets/img/webp/hero-banner-content.webp"
+        alt="Книги"
+        width="100%"
+        height="100%"
+      />
+    </div>
+    <div class="flex flex-row justify-between pl-16 pr-24">
+      <BuyContent />
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import BuyContent from './_ui/buyContent.vue'
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <section class="flex flex-row">
+    <div class="lg:w-5/12 pl-5 pr-5 shadow-md bg-[url('/src/assets/img/png/shadow.png')]">
+      <UiHeading tag="H2" size="300" class="text-three mb-4 mt-5">
+        💔 Ты не одна.
+        <br />Я знаю, через что ты<br />
+        проходишь.
+      </UiHeading>
+      <UiParagraph size="250" class="xl:max-w-[392px] mb-5"
+        >Когда ты снова и снова отдаёшь сердце, а в ответ — тишина или игра, это ранит. Я знаю это
+        чувство. Я был по ту сторону: манипулировал, очаровывал, уходил.
+
+        <br /><br />Я — бывший Казанова. И однажды я понял: больше так нельзя.
+
+        <br /><br />Эти книги — не теория. Это ключ к пониманию, как устроена мужская психология,
+        чего на самом деле хочет мужчина, и как перестать теряться в отношениях.
+
+        <br /><br />Я написал их для тебя — чтобы ты могла быть счастливой, не прогибаясь, не
+        умоляя, не теряя себя. Если ты устала «играть», если хочешь любви по-настоящему — начни с
+        первой страницы. В этих книгах нет воды. Только правда.</UiParagraph
+      >
+    </div>
+    <div class="lg:w-7/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,3 +1,25 @@
 <template>
-  <div>main</div>
+  <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>

src/style.css

@@ -3,7 +3,7 @@
 @theme {
   --color-primary: rgba(255, 255, 255, 1);
   --color-secondary: rgba(229, 30, 125, 1);
-  --color-three: #e20c66;
+  --color-three: rgba(245, 75, 126, 1);
 
   --color-accent-50: #f54378;
   --color-accent-100: #e51e7d;