migrate on nuxt3

pages/index/_ui/forYouSection/forYouSection.vue

@@ -0,0 +1,54 @@
+<template>
+  <section>
+    <UiHeading tag="H2" size="300" class="text-three">
+      Книги для тебя, если ты не знаешь...
+    </UiHeading>
+    <ul class="flex mt-20 flex-row items-center justify-between">
+      <li
+        class="flex flex-col-reverse justify-end w-38 gap-4 h-64 items-center transition-transform transform hover:scale-110"
+        v-for="({ img, text }, index) in questions.data"
+        :key="index"
+      >
+        <UiParagraph class="text-center" size="250">
+          {{ text }}
+        </UiParagraph>
+        <img :src="`${img}`" alt="Вопрос" width="101" height="101" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import { reactive } from 'vue'
+
+const questions = reactive({
+  data: [
+    {
+      img: '/img/svg/ellipse1.svg',
+      text: 'Что делать, если у тебя ноги не "от ушей" и ты далеко не Мисс Мира?',
+    },
+    {
+      img: '/img/svg/ellipse2.svg',
+      text: 'Как начать легко общаться с противоположным полом и о чем надо помолчать?',
+    },
+    {
+      img: '/img/svg/ellipse3.svg',
+      text: 'Как относиться к сексу и на сколько важна девичья невинность?',
+    },
+    {
+      img: '/img/svg/ellipse4.svg',
+      text: 'Сколько нужно заниматься, чтобы обрести НОВУЮ себя?',
+    },
+    {
+      img: '/img/svg/ellipse5.svg',
+      text: 'Как выработать стратегию долгосрочных отношений?',
+    },
+    {
+      img: '/img/svg/ellipse6.svg',
+      text: 'Как добиться того, чтоб парень делал так, как ты хочешь, но думал, что он сам так решил?',
+    },
+  ],
+})
+</script>