{"version":3,"file":"Dwvdcna0.js","sources":["../../../../components/btn/BtnIcon.vue","../../../../components/hero/HeroHome.vue","../../../../pages/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst props = defineProps<{\n  active: boolean\n}>()\n</script>\n\n<template>\n  <button\n    class=\"h-3.4rem w-3.4rem flex items-center justify-center overflow-hidden focus hover:focusActive rounded-full bg-starline-secondary transition duration-500\"\n    :class=\"props.active ? 'focusActive' : ''\"\n  >\n    <slot />\n  </button>\n</template>\n\n<style scoped>\n\n</style>\n","<script setup lang=\"ts\">\nimport { breakpointsTailwind } from '@vueuse/core'\n\nconst props = defineProps<{\n  data: {\n    image_day: string\n    image_night: string\n    hero_video?: DirectusFile\n    hero_video_mobile?: DirectusFile\n    translations: DirectusTranslation<{\n      title: string\n      intro_text: string\n      cta_button_text?: string\n      cta_button_link?: string\n    }>\n  }\n}>()\n\nconst theme = useCookie<'light' | 'dark'>('home-theme', {\n  default: () => 'light',\n\n})\n\nfunction setTheme(button: 'light' | 'dark') {\n  theme.value = button\n};\n\nconst config = useRuntimeConfig()\n\nconst _assetRoot = `${config.public.directus.url}/assets/`\n\nconst videoAssetRoot = `${config.public.directus.remote_file_storage}/`\n\nconst mustBeLight = computed(() => {\n  if (props.data.hero_video)\n    return 'dark'\n  else\n    return theme.value\n})\n\nconst breakpoints = useBreakpoints(breakpointsTailwind)\n\nconst heroVideo = computed(() => {\n  if (props.data.hero_video_mobile && breakpoints.smaller('md').value) {\n    return props.data.hero_video_mobile\n  }\n  else {\n    return props.data.hero_video\n  }\n})\n</script>\n\n<template>\n  <div>\n    <BlockBase :is-light=\"mustBeLight === 'light'\" class=\"bg-starline-secondary duration-1s ease-out block-light:bg-neutral-white\">\n      <div\n        class=\"relative min-h-screen bg-starline-secondary duration-1s ease-out md:block block-light:bg-neutral-white\"\n        :class=\"props.data.hero_video ? '' : 'hidden'\"\n      >\n        <template v-if=\"!props.data.hero_video\">\n          <div class=\"pointer-events-none absolute bottom-0 right-0 w-full\">\n            <NuxtPicture\n              provider=\"directus\"\n              :src=\"props.data.image_day\"\n              class=\"h-full w-full bg-bottom object-cover\"\n              alt=\"\"\n              :img-attrs=\"{\n                class: 'h-full w-full object-cover bg-bottom',\n              }\"\n            />\n          </div>\n          <div\n            class=\"pointer-events-none absolute bottom-0 right-0 w-full transition-opacity duration-1s ease-out\"\n            :class=\"theme === 'dark' ? 'opacity-100' : 'opacity-0'\"\n          >\n            <NuxtPicture\n              provider=\"directus\"\n              :src=\"props.data.image_night\"\n              alt=\"\"\n              :img-attrs=\"{\n                class: 'h-full w-full bg-bottom object-cover',\n              }\"\n            />\n          </div>\n        </template>\n        <template v-if=\"props.data.hero_video\">\n          <div class=\"pointer-events-none absolute inset-0\">\n            <video :key=\"`video-${heroVideo.id}`\" disablepictureinpicture loop muted playsinline autoplay class=\"h-full w-full object-cover\">\n              <source :src=\"videoAssetRoot + heroVideo.filename_disk\" :type=\"heroVideo.type\">\n            </video>\n          </div>\n          <div class=\"pointer-events-none absolute inset-0 bg-starline-secondary/60\" />\n          <div class=\"hero-gradient pointer-events-none absolute inset-0\" />\n        </template>\n\n        <Container class=\"relative pb-20rem pt-14rem\">\n          <h1\n            class=\"mb-2rem max-w-6xl text-balance text-neutral-white textH1 block-light:text-neutral-black\"\n          >\n            {{ hyphen(dt(props.data.translations)?.title) }}\n          </h1>\n          <p class=\"mb-2rem textSubtitle\">\n            {{ $t('home.every_moment') }}\n          </p>\n          <div v-if=\"!data.hero_video\" class=\"flex items-center gap-1rem\">\n            <BtnIcon :active=\"theme === 'light'\" @click=\"setTheme('light')\">\n              <IconSun />\n            </BtnIcon>\n            <BtnIcon :active=\"theme === 'dark'\" @click=\"setTheme('dark')\">\n              <IconMoon />\n            </BtnIcon>\n          </div>\n        </Container>\n        <div class=\"gradient-down absolute inset-x-0 bottom-0 h-8rem\" />\n      </div>\n      <div class=\"bg-starline-secondary duration-1s ease-out block-light:bg-neutral-white\">\n        <Container class=\"relative mb-8 pt-14rem\" :class=\"props.data.hero_video ? 'hidden' : 'md:hidden'\">\n          <h1\n            class=\"mb-2rem max-w-6xl text-balance text-neutral-white duration-1s textH1 block-light:text-neutral-black\"\n          >\n            {{ dt(props.data.translations)?.title }}\n          </h1>\n          <p class=\"mb-2rem textSubtitle\">\n            {{ $t('home.every_moment') }}\n          </p>\n          <div v-if=\"!data.hero_video\" class=\"flex items-center gap-1rem\">\n            <BtnIcon :active=\"theme === 'light'\" @click=\"setTheme('light')\">\n              <IconSun />\n            </BtnIcon>\n            <BtnIcon :active=\"theme === 'dark'\" @click=\"setTheme('dark')\">\n              <IconMoon />\n            </BtnIcon>\n          </div>\n        </Container>\n      </div>\n      <div class=\"pointer-events-none relative inset-0 mb-8 md:hidden\">\n        <template v-if=\"!data.hero_video\">\n          <NuxtPicture\n            provider=\"directus\"\n            :src=\"props.data.image_day\"\n            class=\"h-full w-full object-cover\"\n            alt=\"\"\n            :img-attrs=\"{\n              class: 'h-full w-full object-cover',\n            }\"\n          />\n          <div\n            class=\"pointer-events-none absolute inset-0 transition-opacity duration-1s ease-out\"\n            :class=\"theme === 'dark' ? 'opacity-100' : 'opacity-0'\"\n          >\n            <NuxtPicture\n              provider=\"directus\"\n              :src=\"props.data.image_night\"\n              alt=\"\"\n              :img-attrs=\"{\n                class: 'h-full w-full object-cover',\n              }\"\n            />\n          </div>\n        </template>\n      </div>\n    </BlockBase>\n    <section class=\"bg-starline-secondary\">\n      <div class=\"relative z-10 w-full pb-10rem\">\n        <Container class=\"relative z-10 flex flex-col items-center justify-center\">\n          <p class=\"mb-4rem max-w-57rem text-center textNormal\">\n            {{ dt(props.data.translations)?.intro_text }}\n          </p>\n          <BtnPrimary\n            v-if=\"dt(props.data.translations)?.cta_button_link\n              && dt(props.data.translations)?.cta_button_text\"\n            :link=\"dt(props.data.translations)?.cta_button_link ?? ''\"\n            :text=\"dt(props.data.translations)?.cta_button_text ?? ''\"\n          />\n        </Container>\n        <!-- <BlockBase as=\"div\" class=\"gradient-top-to-bottom pointer-events-none absolute z-0 h-40rem w-full -top-30rem\" /> -->\n      </div>\n    </section>\n  </div>\n</template>\n\n<style scoped>\n.hero-gradient {\n  background:\n    linear-gradient(180deg, #000b1a 0%, rgba(0, 11, 26, 0) 32.29%),\n    linear-gradient(0deg, #000b1a 1.88%, rgba(0, 11, 26, 0) 29.15%);\n}\n.gradient-left-to-right {\n  background: linear-gradient(to right, #000710 50%, transparent 100%);\n}\n\n.gradient-left-to-right-light {\n  background: linear-gradient(to right, #ffffff 50%, transparent 100%);\n}\n\n.gradient-right-to-left {\n  background: linear-gradient(to left, #000710 50%, transparent 100%);\n}\n\n.gradient-right-to-light {\n  background: linear-gradient(to left, #ffffff 50%, transparent 100%);\n}\n\n.gradient-down {\n  background-image: linear-gradient(to bottom, transparent 0%, #000b1a 100%);\n}\n</style>\n","<script lang=\"ts\" setup>\nimport {\n  BlockCarouselManualFields,\n  BlockFooterCTAFields,\n  BlockImageTextFields,\n  BlockPoolAnimationFields,\n  BlockPoolNavigationFields,\n  BlockQuoteCarouselFields,\n  BlockSingleQuoteFields,\n} from '~/utils/CmsBlockFields'\n\nconst { $directus, $readSingleton } = useNuxtApp()\n\nconst { data } = await useAsyncData('homepage', async () => {\n  return $directus.request($readSingleton('homepage', {\n    fields: ['*', {\n      hero_video: ['*'],\n      hero_video_mobile: ['*'],\n      seo: ['*', {\n        translations: ['*'],\n      }],\n      translations: ['*'],\n      blocks: [\n        'collection',\n        'id',\n        {\n          item: {\n            block_carousel_manual: BlockCarouselManualFields,\n            block_pool_animation: BlockPoolAnimationFields,\n            block_pool_navigation: BlockPoolNavigationFields,\n            block_single_quote: BlockSingleQuoteFields,\n            block_image_text: BlockImageTextFields,\n            block_footer_cta: BlockFooterCTAFields,\n            block_quote_carousel: BlockQuoteCarouselFields,\n          },\n        },\n      ],\n    }],\n  }))\n})\n\nuseDirectusSEO(data?.value?.seo)\n</script>\n\n<template>\n  <div>\n    <HeroHome :data=\"(data as any)\" />\n    <div>\n      <div v-for=\"block in data?.blocks\" :key=\"block.id\">\n        <BlockPoolAnimation v-if=\"block.collection === 'block_pool_animation'\" :data=\"block.item\" />\n        <BlockPoolNavigation v-if=\"block.collection === 'block_pool_navigation'\" />\n        <BlockSingleQuote v-if=\"block.collection === 'block_single_quote'\" :data=\"block.item\" />\n        <BlockImageText v-if=\"block.collection === 'block_image_text'\" :data=\"block.item\" />\n        <BlockCarouselManual v-if=\"block.collection === 'block_carousel_manual'\" :data=\"block.item\" />\n        <BlockFooterCTA v-if=\"block.collection === 'block_footer_cta'\" :data=\"block.item\" />\n        <BlockQuoteCarousel v-if=\"block.collection === 'block_quote_carousel'\" :data=\"block.item\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.gradient-top-to-bottom {\n  background: linear-gradient(to top, #000b1a 55%, transparent 100%);\n}\n</style>\n"],"names":["props","__props","theme","useCookie","setTheme","button","config","useRuntimeConfig","videoAssetRoot","mustBeLight","computed","breakpoints","useBreakpoints","breakpointsTailwind","heroVideo","$directus","$readSingleton","useNuxtApp","data","__temp","__restore","_withAsyncContext","useAsyncData","BlockCarouselManualFields","BlockPoolAnimationFields","BlockPoolNavigationFields","BlockSingleQuoteFields","BlockImageTextFields","BlockFooterCTAFields","BlockQuoteCarouselFields","useDirectusSEO","_a"],"mappings":"qxHACA,MAAMA,EAAQC,q9LCEd,MAAMD,EAAQC,EAeRC,EAAQC,GAA4B,aAAc,CACtD,QAAS,IAAM,OAAA,CAEhB,EAED,SAASC,EAASC,EAA0B,CAC1CH,EAAM,MAAQG,CAAA,CAGhB,MAAMC,EAASC,GAAiB,EAEV,GAAAD,EAAO,OAAO,SAAS,MAE7C,MAAME,EAAiB,GAAGF,EAAO,OAAO,SAAS,mBAAmB,IAE9DG,EAAcC,EAAS,IACvBV,EAAM,KAAK,WACN,OAEAE,EAAM,KAChB,EAEKS,EAAcC,GAAeC,EAAmB,EAEhDC,EAAYJ,EAAS,IACrBV,EAAM,KAAK,mBAAqBW,EAAY,QAAQ,IAAI,EAAE,MACrDX,EAAM,KAAK,kBAGXA,EAAM,KAAK,UAErB,wmHCtCD,KAAM,CAAE,UAAAe,EAAW,eAAAC,CAAe,EAAIC,GAAW,EAE3C,CAAE,KAAAC,IAAS,CAAAC,EAAAC,CAAA,EAAAC,GAAA,IAAMC,GAAa,WAAY,SACvCP,EAAU,QAAQC,EAAe,WAAY,CAClD,OAAQ,CAAC,IAAK,CACZ,WAAY,CAAC,GAAG,EAChB,kBAAmB,CAAC,GAAG,EACvB,IAAK,CAAC,IAAK,CACT,aAAc,CAAC,GAAG,CAAA,CACnB,EACD,aAAc,CAAC,GAAG,EAClB,OAAQ,CACN,aACA,KACA,CACE,KAAM,CACJ,sBAAuBO,EACvB,qBAAsBC,EACtB,sBAAuBC,EACvB,mBAAoBC,EACpB,iBAAkBC,EAClB,iBAAkBC,EAClB,qBAAsBC,CAAA,CACxB,CACF,CAEH,CAAA,CAAA,CACF,CAAC,CACH,CAAA,mBAEc,OAAAC,IAAAC,EAAAb,GAAA,YAAAA,EAAM,QAAN,YAAAa,EAAa,GAAG"}