fix hero-img + add section

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 h-64 items-center"
+        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: '/src/assets/img/webp/Ellipse_1.webp',
+      text: 'Что делать, если у тебя ноги не "от ушей" и ты далеко не Мисс Мира?',
+    },
+    {
+      img: '/src/assets/img/webp/Ellipse_2.webp',
+      text: 'Как начать легко общаться с противоположным полом и о чем надо помолчать?',
+    },
+    {
+      img: '/src/assets/img/webp/Ellipse_3.webp',
+      text: 'Как относиться к сексу и на сколько важна девичья невинность?',
+    },
+    {
+      img: '/src/assets/img/webp/Ellipse_4.webp',
+      text: 'Сколько нужно заниматься, чтобы обрести НОВУЮ себя?',
+    },
+    {
+      img: '/src/assets/img/webp/Ellipse_5.webp',
+      text: 'Как выработать стратегию долгосрочных отношений?',
+    },
+    {
+      img: '/src/assets/img/webp/Ellipse_6.webp',
+      text: 'Как добиться того, чтоб парень делал так, как ты хочешь, но думал, что он сам так решил?',
+    },
+  ],
+})
+</script>

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

@@ -3,7 +3,7 @@ import UiParagraph from '@/components/Typography/UiParagraph.vue';
   <div
     v-for="({ topContent, button, botContent }, index) in content.data"
     :key="index"
-    class="flex flex-col items-center w-96"
+    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>

src/pages/mainPage/indexPage.vue

@@ -4,9 +4,11 @@
   >
     <section class="pt-28 relative z-50">
       <HeroBanner />
+      <ForYouSection class="mt-40 pl-16 pr-24" />
     </section>
   </div>
 </template>
 <script setup lang="ts">
+import ForYouSection from './_ui/forYouSection/forYouSection.vue'
 import HeroBanner from './_ui/heroBanner/heroBanner.vue'
 </script>