{"version":3,"file":"BlMY6SLb.js","sources":["../../../../src/pages/vdv/404/index.vue"],"sourcesContent":["<template>\n  <ContainerBasic container-type=\"FULL_WIDTH\">\n    <div class=\"bg-[#99b6b8]\">\n      <ContainerBasic\n        container-type=\"PAGE\"\n        classes=\"pt-md md:pt-xl pb-sm md:pb-md\"\n      >\n        <div class=\"flex flex-col justify-between md:flex-row\">\n          <div\n            class=\"px-md md:px-0 max-w-[690px] order-2 md:order-1 pt-md md:pt-0\"\n          >\n            <h1 class=\"text-left text-white\">\n              {{ t('404.pageNotFound') }}\n            </h1>\n            <div class=\"text-left text-white py-sm\">\n              <p>{{ t('404.pageNotFoundDetails') }}</p>\n            </div>\n            <BasicButton\n              classes=\"mt-auto text-white\"\n              :type=\"EButtonType.ROUTERLINK\"\n              :label=\"t('404.toHome')\"\n              target=\"/\"\n            />\n          </div>\n          <div class=\"order-1 px-md md:px-0 md:order-2\">\n            <img\n              src=\"~/assets/images/404_teeth.png\"\n              class=\"object-contain\"\n              style=\"max-height: 175px\"\n            />\n          </div>\n        </div>\n        <div class=\"flex flex-auto w-full pt-md\">\n          <img :src=\"imageSrc\" class=\"flex flex-auto object-contain\" />\n        </div>\n      </ContainerBasic>\n    </div>\n\n    <div class=\"w-full bg-vdv-base h-[36px]\" />\n\n    <div class=\"bg-[#346e73a6]\">\n      <ContainerBasic container-type=\"PAGE\" classes=\"px-sm py-md  md:p-md\">\n        <div class=\"flex flex-col md:flex-row gap-sm md:gap-x-md md:gap-y-0\">\n          <div\n            class=\"bg-[#99b6b8] w-[314px] sm:w-[450px] max-h-[162px] py-md mx-auto md:mx-0\"\n          >\n            <HeadlineDynamic\n              :headline=\"t('404.toSpecialDepartments')\"\n              level=\"h2\"\n              class=\"text-white fill-white stroke-white w-[270px]\"\n              :has-decoration=\"true\"\n            />\n          </div>\n\n          <div\n            class=\"flex flex-wrap flex-row gap-sm md:gap-x-md md:gap-y-0 w-[314px] sm:w-[450px] md:w-full mx-auto md:mx-0\"\n          >\n            <div\n              v-for=\"(area, index) in areas\"\n              :key=\"index\"\n              class=\"basis-1/2 md:basis-1/5 shrink-0 w-full cursor-pointer max-w-[149px] h-[149px] sm:max-w-[140px] sm:h-[140px] md:max-w-[162px] md:h-[162px] p-sm grid content-between text-base md:text-lg text-white\"\n              :style=\"`background-color: ${area.color};`\"\n              @click=\"onNavigateToArea(area)\"\n            >\n              <p>{{ area.title }}</p>\n              <FaIcon\n                :icon=\"{ ...area.icon, iconSet: 'fas-icons' }\"\n                classes=\"!w-[46px] !h-[46px] md:!w-[50px] md:!h-[50px] color-[#FFFFFF33]\"\n                :style=\"`color: #FFFFFF33`\"\n              />\n            </div>\n          </div>\n        </div>\n      </ContainerBasic>\n    </div>\n  </ContainerBasic>\n</template>\n\n<script setup lang=\"ts\">\nimport { EButtonType } from '~/@types/basic-button';\nimport { useAreaStore } from '@/stores/useArea';\nimport BasicButton from '~~/src/components/components/core/basic-button/vdv/basic-button.vue';\nimport ContainerBasic from '@/components/components/container-basic.vue';\nimport HeadlineDynamic from '@/components/components/core/headline-dynamic/vdv/headline-dynamic.vue';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport { useImages } from '@/composables/useImages';\nimport { useNav } from '~~/src/stores/useNav';\nimport type { AreaData } from '~~/src/server/transformers/EntityTransformers/areaTransformer';\nimport FaIcon from '@/components/fa-icon.vue';\n\nconst areaStore = useAreaStore();\nareaStore.setDefaultArea();\n\nconst navStore = useNav();\nnavStore.mainNav_setActiveItemByUri('/');\n\nuseHead({\n  title: 'van der Ven - 404',\n  meta: [\n    {\n      name: 'description',\n      content: '404 - Page not found',\n    },\n  ],\n  style: [\n    {\n      id: 'areaStyles',\n      innerHTML: `:root {${areaStore.areaStyles};${areaStore.activeAreaStyles}}`,\n    },\n  ],\n});\nconst { t } = useTrans();\nconst isMobile = inject(mq_breakpointIsMobile);\nconst areas = await areaStore.get404Areas;\n\nconst imageSrc = computed(() => {\n  if (import.meta.server) return useImages().getImageSrc('404_background.png');\n\n  if (isMobile.value) {\n    return useImages().getImageSrc('404_background_mobile.png');\n  } else {\n    return useImages().getImageSrc('404_background.png');\n  }\n});\n\nfunction onNavigateToArea(area: AreaData) {\n  const route = area.title.toLowerCase().replace(' ', '-');\n  navigateTo(`/${route}`);\n}\n</script>\n"],"names":["areaStore","useAreaStore","useNav","useHead","t","useTrans","isMobile","inject","mq_breakpointIsMobile","areas","__temp","__restore","_withAsyncContext","imageSrc","computed","useImages","onNavigateToArea","area","route","navigateTo"],"mappings":"i6CA0FA,MAAMA,EAAYC,IAClBD,EAAU,eAAe,EAERE,IACR,2BAA2B,GAAG,EAE/BC,EAAA,CACN,MAAO,oBACP,KAAM,CACJ,CACE,KAAM,cACN,QAAS,sBACX,CACF,EACA,MAAO,CACL,CACE,GAAI,aACJ,UAAW,UAAUH,EAAU,UAAU,IAAIA,EAAU,gBAAgB,GACzE,CACF,CAAA,CACD,EACK,KAAA,CAAE,EAAAI,GAAMC,IACRC,EAAWC,EAAOC,CAAqB,EACvCC,GAAQ,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMZ,EAAU,WAAU,mBAElCa,EAAWC,EAAS,IAGpBR,EAAS,MACJS,EAAY,EAAA,YAAY,2BAA2B,EAEnDA,EAAY,EAAA,YAAY,oBAAoB,CAEtD,EAED,SAASC,EAAiBC,EAAgB,CACxC,MAAMC,EAAQD,EAAK,MAAM,YAAc,EAAA,QAAQ,IAAK,GAAG,EAC5CE,EAAA,IAAID,CAAK,EAAE,CACxB"}