<template>
  <div
    class="min-h-svh bg-black-50 lato-regular relative overflow-visible before:content-[''] before:absolute before:bottom-0 before:h-[520px] before:w-full before:bg-[url(/src/assets/img/webp/footer-flowers.webp)] before:bg-no-repeat before:bg-bottom before:bg-cover before:z-0"
  >
    <div
      class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain after:pointer-events-none"
    />
    <div
      class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[1400px] after:bg-[url(/src/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-cover after:pointer-events-none"
    />
    <UiHeader class="relative z-50" />
    <UiMain class="!min-h-[1800px] text-primary relative z-50">
      <slot />
    </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>
