src/layout/UiFooter/UiFooter.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer>tesst</footer>
+</template>
+
+<script setup lang="ts"></script>

src/layout/UiHeader/UiHeader.vue

@@ -0,0 +1,11 @@
+<template>
+  <header class="[&]:bg-accent text-white py-4 px-2 border-b border-b-white">
+    <div class="flex flex-row-reverse justify-end gap-4 items-center">
+      <slot name="content" />
+      <div class="flex"></div>
+    </div>
+    <slot name="right-icons" />
+  </header>
+</template>
+
+<script setup lang="ts"></script>

src/layout/UiLayout.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="min-h-screen">
+    <UiHeader />
+    <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'
+</script>

src/layout/UiMain/UiMain.vue

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

src/layout/_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