add heroblock

src/components/Typography/UiParagraph.vue

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

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"
-    :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/layout/UiFooter/UiFooter.vue

@@ -1,7 +1,7 @@
 <template>
   <footer class="mx-auto container">
     <div class="relative z-10">
-      <div class="flex space-x-[51px] mb-5">
+      <div class="flex flex-wrap space-x-[51px] mb-5">
         <UiNav :nav-content="footerNavigation" />
       </div>
       <div class="xl:max-w-[1225px] pb-7 flex justify-between">

src/layout/UiHeader/UiHeader.vue

@@ -8,7 +8,7 @@
             <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>

src/layout/UiLayout.vue

@@ -6,10 +6,13 @@
       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"
     />
     <div
-      class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[1400px] 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 after:pointer-events-none"
+    />
+    <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 z-50">
+    <UiMain class="!min-h-[1800px] text-primary relative">
       <slot />
     </UiMain>
     <UiFooter />

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/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>
+  <div
-    <HeroBanner />
+    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>
+  >
+    <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>