<template>
    <div id="head" class="flex justify-center md:flexBox h-[77.692vw] md:h-[40.625vw] relative mt-0 md:mt-[7.4vw]">
        <img src="/public/images/HeaderBg.jpg" class="absolute top-0 left-0 w-full h-full object-cover -z-[1] scale-x-[-1] md:scale-x-[1]" alt="">
        <div class=" flex w-[81.04%] text-white">
            <div class="flex flex-col text-start">
                <h2 class="w-[25vw] text-[5.751vw] md:text-[2.188vw] font-bold mt-[25vw] md:mt-[0.052vw]">
                  {{ headers.data?.value.header }}
                </h2>
                <p class="hidden md:block mt-[1.25vw] text-[1.055vw] leading-[30.38px] mb-[2.917vw]">
                    {{ headers.data?.value.titleText }}
                </p>
                <nuxt-link to="/courses"
                    class="greenButton h-[8.974vw] md:h-[3.125vw] px-0 flexBox rounded-[2.051vw] md:rounded-[0.521vw] w-[26.41vw] md:w-[14.01vw] text-[3.19vw] md:text-[1.055vw] mt-[10vw] md:mt-0">شروع
                    یادگیری   </nuxt-link>
            </div>
        </div>
    </div>
</template>

<script setup>

const headers = await useFetch("/api/settings")
</script>