add hero-banner

src/App.vue

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

src/layout/UiFooter/UiFooter.vue

@@ -13,7 +13,7 @@
             </a></UiParagraph
           >
         </div>
-        <div class="flex items-end">
+        <div v-if="route.path === '/'" class="flex items-end">
           <UiParagraph tag="span" size="300" class="[&]:text-secondary"
             ><a href="https://www.litres.ru/" target="_blank">
               Реферальная ссылка на ЛитРес
@@ -29,4 +29,7 @@
 import UiParagraph from '@/components/Typography/UiParagraph.vue'
 import UiNav from '@/components/UiNav/UiNav.vue'
 import { footerNavigation } from '@/layout/UiFooter/_data'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 </script>

src/layout/UiLayout.vue

@@ -4,12 +4,16 @@
   >
     <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"
-    >
+    />
+    <div
+      class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain after:pointer-events-none"
+    />
     <UiHeader />
-      <UiMain class="!min-h-[800px]" />
+    <UiMain class="!min-h-[800px] text-primary">
+      <slot />
+    </UiMain>
     <UiFooter />
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">

src/pages/mainPage/_ui/heroBanner.vue

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

src/pages/mainPage/indexPage.vue

@@ -1,3 +1,8 @@
 <template>
-  <div>main</div>
+  <section>
+    <HeroBanner />
+  </section>
 </template>
+<script setup lang="ts">
+import HeroBanner from './_ui/heroBanner.vue'
+</script>