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>
