add heroblock

src/pages/mainPage/_ui/heroBanner.vue

@@ -1,6 +0,0 @@
-<template>
-  <section>
-    <img src="/src/assets/img/webp/hero-banner-content.webp" alt="Книги" />
-  </section>
-</template>
-<script setup lang="ts"></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 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/indexPage.vue

@@ -1,8 +1,12 @@
 <template>
-  <section>
-    <HeroBanner />
-  </section>
+  <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 />
+    </section>
+  </div>
 </template>
 <script setup lang="ts">
-import HeroBanner from './_ui/heroBanner.vue'
+import HeroBanner from './_ui/heroBanner/heroBanner.vue'
 </script>