<template> <div v-if="backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden"> <NuxtPicture loading="lazy" class="w-full h-full object-cover object-center" :src="baseUrl + backdrop.url" :imgAttrs="{ class: 'w-full h-full object-cover object-center' }" /> <img v-if="logo" class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + logo.url" /> <img v-else class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" src="/favicon.png" /> <img class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 p-2 box-content rounded-full bg-white cursor-pointer" src="/chevrons-down.svg" @click="scroll()" /> </div> <Header /> <slot /> <Footer /> </template> <script setup lang="ts"> import provideGlobal from "../composables/provideGlobal"; import type Homepage from "../types/single/homepage"; const runtimeConfig = useRuntimeConfig(); const baseUrl = runtimeConfig.public.strapi.url; const { findOne } = useStrapi(); const { logo } = await provideGlobal(); const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage")); const { backdrop } = homepage.value?.data ?? {}; function scroll() { window.scrollTo({ top: window.innerHeight - 96, behavior: "smooth" }); } </script>