fix hero-img + add section

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

@@ -15,6 +15,9 @@
       {
         'text-lg lg:text-[20px]': size === '300',
       }, // 16px
+      {
+        'text-[15px]': size === '250',
+      }, // 15px
       {
         'text-[13px]': size === '200',
       }, // 14px

src/layout/UiFooter/UiFooter.vue

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

src/layout/UiHeader/UiHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <header class="py-4 container mx-auto">
-    <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 cursor-pointer !text-primary">

src/layout/UiLayout.vue

@@ -1,6 +1,6 @@
 <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-0"
   >
     <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"

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>

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;