migrate on nuxt3

layouts/UiFooter/UiFooter.vue

@@ -0,0 +1,32 @@
+<template>
+  <footer class="mx-auto container max-2xl:pl-4">
+    <div class="relative z-50 max-w-[1280px] mx-auto">
+      <div class="flex justify-between mb-5">
+        <UiNav :nav-content="footerNavigation" />
+      </div>
+      <div class="pb-7 flex justify-between">
+        <div>
+          <UiParagraph as="span" size="250"
+            >По всем вопросам:<br />
+            <a href="mailto:vinogalante@yandex.ru" target="_blank">
+              vinogalante@yandex.ru
+            </a></UiParagraph
+          >
+        </div>
+
+        <div class="flex flex-col [&>[data-ui=ui-nav]]:text-secondary" v-if="route.path === '/'">
+          <UiNav :nav-content="refLitres" />
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import UiNav from '@/components/UiNav/UiNav.vue'
+import { footerNavigation, refLitres } from '@/layouts/UiFooter/_data'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>

layouts/UiFooter/_data/footer-navigation.data.ts

@@ -0,0 +1,36 @@
+const footerNavigation = [
+  {
+    name: 'Главная',
+    path: '/',
+  },
+  {
+    name: 'Книга I',
+    path: '/books/1',
+  },
+  {
+    name: 'Книга II',
+    path: '/books/2',
+  },
+  {
+    name: 'Отзывы',
+    path: '/feedback',
+  },
+  {
+    name: 'Корзина',
+    path: '/cart',
+  },
+  {
+    name: 'Оплата',
+    path: '/buy',
+  },
+  {
+    name: 'Вопрос-ответ',
+    path: '/question',
+  },
+  {
+    name: 'Политика конфидинциальности',
+    path: '/privacy',
+  },
+]
+
+export default footerNavigation

layouts/UiFooter/_data/index.ts

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

layouts/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

layouts/UiHeader/UiHeader.vue

@@ -0,0 +1,25 @@
+<template>
+  <header class="py-4 container mx-auto max-2xl:pl-4">
+    <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">
+          <UiParagraph as="span" class="[&]:text-5xl">
+            <RouterLink to="/"> Vino Galante </RouterLink>
+          </UiParagraph>
+        </div>
+        <div class="flex flex-wrap space-x-10">
+          <UiNav :nav-content="headerNavigation" />
+        </div>
+      </div>
+    </div>
+    <slot name="right-icons" />
+  </header>
+</template>
+
+<script setup lang="ts">
+import UiNav from '@/components/UiNav/UiNav.vue'
+import { RouterLink } from 'vue-router'
+import { headerNavigation } from './_data'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+</script>

layouts/UiHeader/_data/header-navigation.data.ts

@@ -0,0 +1,24 @@
+const headerNavigation = [
+  {
+    name: 'Главная',
+    path: '/',
+  },
+  {
+    name: 'Книга I',
+    path: '/books/1',
+  },
+  {
+    name: 'Книга II',
+    path: '/books/2',
+  },
+  {
+    name: 'Купить',
+    path: '/buy',
+  },
+  {
+    name: 'Отзывы',
+    path: '/feedback',
+  },
+]
+
+export default headerNavigation

layouts/UiHeader/_data/index.ts

@@ -0,0 +1 @@
+export { default as headerNavigation } from '@/layouts/UiHeader/_data/header-navigation.data'

layouts/UiMain/UiMain.vue

@@ -0,0 +1,11 @@
+<template>
+  <main class="mt-10 px-6 min-h-screen h-full">
+    <div class="max-w-[1280px] mx-auto">
+      <Suspense>
+        <slot />
+      </Suspense>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts"></script>

layouts/default.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="min-h-svh overflow-x-hidden lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-full before:w-full before:bg-[url(/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-contain before:z-40"
+    :class="
+      route.path === '/books/1' || route.path === '/books/2'
+        ? 'bg-[linear-gradient(135deg,rgba(17,17,30,1)_10%,rgba(183,32,76,1)_170%)]'
+        : 'bg-black-50'
+    "
+  >
+    <div
+      v-if="route.path === '/'"
+      class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain"
+    />
+    <div
+      v-if="route.path === '/'"
+      class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[1120px] after:h-[1800px] after:bg-[url(/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-cover"
+    />
+    <div
+      v-if="route.path === '/'"
+      class="relative z-40 before:content-[''] before:absolute before:top-0 before:left-0 before:w-[1120px] before:h-[1000px] before:bg-[url(/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-[1200px] text-primary relative">
+      <Suspense>
+        <slot />
+      </Suspense>
+    </UiMain>
+    <UiFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiFooter from './UiFooter/UiFooter.vue'
+import UiHeader from './UiHeader/UiHeader.vue'
+import UiMain from './UiMain/UiMain.vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>