src/components/UiNav/UiNav.vue

@@ -1,14 +1,20 @@
 <template>
   <UiParagraph
     class="cursor-pointer"
-    tag="span"
+    as="span"
     size="300"
     v-for="({ path, name, target }, index) in navContent"
     :key="index"
+    data-ui="ui-nav"
+  >
+    <component
+      data-ui="ui-nav-btn"
+      :is="target ? 'a' : 'RouterLink'"
+      :to="path"
+      :href="path"
+      :target="target"
+      >{{ name }}</component
     >
-    <component :is="target ? 'a' : 'RouterLink'" :to="path" :href="path" :target="target">{{
-      name
-    }}</component>
   </UiParagraph>
 </template>
 <script setup lang="ts">

src/layout/UiFooter/UiFooter.vue

@@ -6,19 +6,16 @@
       </div>
       <div class="xl:max-w-[1225px] pb-7 flex justify-between">
         <div>
-          <UiParagraph tag="span" size="300"
+          <UiParagraph as="span" size="300"
             >По всем вопросам:<br />
             <a href="mailto:vinogalante@yandex.ru" target="_blank">
               vinogalante@yandex.ru
             </a></UiParagraph
           >
         </div>
-        <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">
-              Реферальная ссылка на ЛитРес
-            </a></UiParagraph
-          >
+
+        <div class="flex flex-col [&>[data-ui=ui-nav]]:text-secondary" v-if="route.path === '/'">
+          <UiNav :nav-content="refLitres" />
         </div>
       </div>
     </div>
@@ -28,7 +25,7 @@
 <script setup lang="ts">
 import UiParagraph from '@/components/Typography/UiParagraph.vue'
 import UiNav from '@/components/UiNav/UiNav.vue'
-import { footerNavigation } from '@/layout/UiFooter/_data'
+import { footerNavigation, refLitres } from '@/layout/UiFooter/_data'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()

src/layout/UiFooter/_data/index.ts

@@ -1 +1,3 @@
 export { default as footerNavigation } from '@/layout/UiFooter/_data/footer-navigation.data'
+
+export { default as refLitres } from '@/layout/UiFooter/_data/ref-litres.data'

src/layout/UiFooter/_data/ref-litres.data.ts

@@ -0,0 +1,14 @@
+const refLitres = [
+  {
+    name: 'Реферальная ссылка на ЛитРес - Книга I',
+    path: 'https://www.litres.ru/58125553/',
+    target: '_blank',
+  },
+  {
+    name: 'Реферальная ссылка на ЛитРес - Книга II',
+    path: 'https://www.litres.ru/vino-galante/kak-vlubit-v-sebya-lubogo-tonkaya-igra/',
+    target: '_blank',
+  },
+]
+
+export default refLitres

src/layout/UiHeader/UiHeader.vue

@@ -4,7 +4,7 @@
       <slot name="content" />
       <div class="flex items-center gap-32">
         <div class="russo-one-regular cursor-pointer !text-primary">
-          <UiParagraph tag="span" class="[&]:text-5xl">
+          <UiParagraph as="span" class="[&]:text-5xl">
             <RouterLink to="/"> Vino Galante </RouterLink>
           </UiParagraph>
         </div>

src/layout/UiLayout.vue

@@ -6,10 +6,10 @@
       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"
+      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"
     />
-    <UiHeader />
-    <UiMain class="!min-h-[800px] text-primary">
+    <UiHeader class="relative z-50" />
+    <UiMain class="!min-h-[1800px] text-primary relative z-50">
       <slot />
     </UiMain>
     <UiFooter />