migrate on nuxt3

pages/index/_ui/heroBanner/_ui/buyContent.vue

@@ -0,0 +1,35 @@
+import UiParagraph from '@/components/Typography/UiParagraph.vue';
+<template>
+  <div
+    v-for="({ topContent, button, botContent }, index) in content.data"
+    :key="index"
+    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>
+    <UiParagraph as="span" size="200"> {{ botContent }}</UiParagraph>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import UiButton from '@/components/UiButton/UiButton.vue'
+import { reactive } from 'vue'
+
+const content = reactive({
+  data: [
+    {
+      topContent:
+        '💡 Узнай, как думает мужчина, что его действительно цепляет, и что делает женщину незабываемой.',
+      button: 'КУПИТЬ КНИГУ I',
+      botContent: 'PDF + EPUB сразу после оплаты',
+    },
+    {
+      topContent:
+        '💡 Продолжение для тех, кто готов перейти от флирта к глубокому контакту. Как строить притяжение, не теряя себя.',
+      button: 'КУПИТЬ КНИГУ II',
+      botContent: 'PDF + EPUB сразу после оплаты',
+    },
+  ],
+})
+</script>

pages/index/_ui/heroBanner/heroBanner.vue

@@ -0,0 +1,18 @@
+<template>
+  <section>
+    <div class="relative z-50">
+      <img
+        src="/assets/img/webp/hero-banner-content.webp"
+        alt="Книги"
+        width="100%"
+        height="100%"
+      />
+    </div>
+    <div class="flex flex-row justify-between pl-16 pr-24">
+      <BuyContent />
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import BuyContent from './_ui/buyContent.vue'
+</script>