{"version":3,"file":"SectionMultiple.global.b791e222.js","sources":["../../../../components/section/multiple/MultipleImage.vue","../../../../components/section/multiple/MultipleImages.vue","../../../../components/section/multiple/MultipleListItem.vue","../../../../components/section/multiple/SectionMultiple.global.vue"],"sourcesContent":["<template>\n  <div\n    class=\"absolute left-1/2 top-1/2 h-full max-h-[600px] w-full max-w-[600px] -translate-x-1/2 -translate-y-1/2\"\n  >\n    <div\n      class=\"z-1 transform-gpu transition-all duration-500 ease-back-out\"\n      :class=\"isActiveFeature === idx ? 'scale-100 opacity-100 ' : 'scale-75 opacity-0'\"\n    >\n      <Image\n        v-if=\"data.media\"\n        loading=\"lazy\"\n        class=\"w-max max-w-md rounded-[40px] xl:max-w-[600px]\"\n        :class=\"[\n          data.mediaStyle === MEDIA_STYLES.RECTANGLE && 'rounded-[40px]',\n          data.mediaStyle === MEDIA_STYLES.CIRCLE && 'rounded-full',\n          data.mediaStyle === MEDIA_STYLES.CIRCLE_LEFT && 'rounded-l-full rounded-r-[1400px]',\n          data.mediaStyle === MEDIA_STYLES.CIRCLE_RIGHT && 'rounded-l-[1400px] rounded-r-full'\n        ]\"\n        :src=\"data.media.responsiveImage ? data.media.responsiveImage?.src : data.media.url\"\n        :srcset=\"data.media.responsiveImage ? data.media.responsiveImage?.webpSrcSet : undefined\"\n        :width=\"data.media.responsiveImage ? data.media.responsiveImage.width : data.media.width\"\n        :height=\"data.media.responsiveImage ? data.media.responsiveImage.height : data.media.height\"\n        :alt=\"data.media.alt ? data.media.alt : ''\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nenum MEDIA_STYLES {\n  RECTANGLE = 'Rectangle',\n  CIRCLE = 'Circle',\n  CIRCLE_RIGHT = 'CircleRight',\n  CIRCLE_LEFT = 'CircleLeft'\n}\n\nconst isActiveFeature = useState('activeFeature')\n\ndefineProps({\n  data: {\n    type: Object,\n    default: () => {}\n  },\n  idx: {\n    type: Number,\n    default: 0\n  }\n})\n</script>\n","<template>\n  <div ref=\"pinRef\" class=\"absolute top-0 right-0 hidden h-screen w-1/2 lg:block\">\n    <MultipleImage\n      v-for=\"(item, idx) in data\"\n      :key=\"idx\"\n      :data=\"item\"\n      :idx=\"idx\"\n      :count=\"data.length\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport { breakpointsTailwind } from '@vueuse/core'\n\nconst breakpoints = useBreakpoints(breakpointsTailwind)\nconst isDesktop = breakpoints.greater('lg')\n\nconst pinRef = ref<HTMLElement | null>(null)\n\nconst tween = ref<null | any>(null)\nuseState('activeFeature', () => 0)\n\nconst props = defineProps({\n  data: {\n    type: Object,\n    default: () => {}\n  },\n  duration: {\n    type: Number,\n    required: true\n  }\n})\n\nonMounted(() => {\n  useTimeoutFn(() => {\n    if (pinRef.value && isDesktop.value) {\n      gsap.registerPlugin(ScrollTrigger)\n\n      tween.value = gsap.to(pinRef.value, {\n        scrollTrigger: {\n          id: 'featuresImages',\n          trigger: pinRef.value,\n          pin: true,\n          start: 'center center',\n          markers: false,\n          end: () => {\n            return '+=' + (props.duration - props.duration / props.data.length)\n          }\n        }\n      })\n      ScrollTrigger.refresh()\n    }\n  }, 1500)\n})\n\nonUnmounted(() => {\n  tween.value?.kill()\n})\n</script>\n","<template>\n  <div ref=\"sectionRef\" class=\"py-24 text-white lg:min-h-screen lg:items-center lg:py-0\">\n    <div class=\"grid-default flex items-center lg:min-h-screen\">\n      <div class=\"col-span-12 transform-gpu lg:col-span-6\">\n        <AboveTitle\n          v-if=\"data.tagline\"\n          :content=\"data.tagline\"\n          class=\"mb-3 before:!bg-white lg:mb-6\"\n        />\n        <Heading v-if=\"data.title\" :content=\"data.title\" :level=\"2\" class=\"mb-6 font-bold\" />\n        <div\n          v-if=\"data.body\"\n          class=\"prose mb-6 max-w-md text-base text-white lg:mb-10 lg:text-xl\"\n          v-html=\"data.body\"\n        ></div>\n        <CallToAction\n          v-if=\"Array.isArray(data.buttons) && data.buttons.length\"\n          class=\"mb-4\"\n          :data=\"data.buttons\"\n          theme=\"dark\"\n          is-transparent-bg-neutral\n          :size=\"isDesktop ? 'default' : 'medium'\"\n        />\n      </div>\n      <div class=\"relative col-span-12 lg:col-span-6 lg:min-h-full\">\n        <div ref=\"pinRef\" class=\"relative w-fit lg:hidden\">\n          <Image\n            v-if=\"data.media.responsiveImage\"\n            loading=\"lazy\"\n            class=\"relative rounded-[40px] object-cover lg:w-fit\"\n            :class=\"[\n              data.mediaStyle === MEDIA_STYLES.RECTANGLE && 'rounded-[40px]',\n              data.mediaStyle === MEDIA_STYLES.CIRCLE && 'rounded-full',\n              data.mediaStyle === MEDIA_STYLES.CIRCLE_LEFT && 'rounded-[40px] rounded-l-full',\n              data.mediaStyle === MEDIA_STYLES.CIRCLE_RIGHT && 'rounded-[40px] rounded-r-full'\n            ]\"\n            :src=\"data.media.responsiveImage ? data.media.responsiveImage?.src : data.media.url\"\n            :srcset=\"\n              data.media.responsiveImage ? data.media.responsiveImage?.webpSrcSet : undefined\n            \"\n            :width=\"\n              data.media.responsiveImage ? data.media.responsiveImage.width : data.media.width\n            \"\n            :height=\"\n              data.media.responsiveImage ? data.media.responsiveImage.height : data.media.height\n            \"\n            :alt=\"data.media.alt ? data.media.alt : ''\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport { breakpointsTailwind, useElementBounding } from '@vueuse/core'\n\nenum MEDIA_STYLES {\n  RECTANGLE = 'Rectangle',\n  CIRCLE = 'Circle',\n  CIRCLE_RIGHT = 'CircleRight',\n  CIRCLE_LEFT = 'CircleLeft'\n}\n\nconst breakpoints = useBreakpoints(breakpointsTailwind)\nconst isDesktop = breakpoints.greater('lg')\n\nconst sectionRef = ref<HTMLElement | null>(null)\n\nconst pinRef = ref<HTMLElement | null>(null)\nconst { height } = useElementBounding(pinRef)\nconst tween = ref<null | any>(null)\n\nconst isActiveFeature = useState('activeFeature')\n\nconst props = defineProps({\n  data: {\n    type: Object,\n    default: () => {}\n  },\n  idx: {\n    type: Number,\n    default: 0\n  }\n})\n\nonMounted(async() => {\n  await nextTick(() => {\n    if (pinRef.value && isDesktop.value) {\n      gsap.registerPlugin(ScrollTrigger)\n\n      tween.value = gsap.to(pinRef.value, {\n        scrollTrigger: {\n          id: 'featureSection',\n          trigger: pinRef.value,\n          pin: true,\n          start: 'center-=200px center',\n          markers: false,\n          end: () => {\n            return '+=' + height.value\n          },\n          onEnter: () => {\n            isActiveFeature.value = props.idx\n          },\n          onEnterBack: () => {\n            if (props.idx !== 0) {\n              isActiveFeature.value = props.idx - 1\n            }\n          }\n        }\n      })\n      ScrollTrigger.refresh()\n    }\n  })\n})\n\nonUnmounted(() => {\n  tween.value?.kill()\n})\n</script>\n","<template>\n  <div\n    id=\"features\"\n    ref=\"sectionRef\"\n    class=\"pb-[15vh] lg:pt-[15vh] overflow-hidden transition-colors duration-500 ease-linear bg-neutral-800 text-white\"\n  >\n    <div class=\"container relative\">\n      <MultipleImages :data=\"data.content\" :duration=\"height\" />\n      <MultipleList :data=\"data.content\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useElementBounding } from '@vueuse/core'\nimport { SectionMultipleRecord } from '~/types/generated'\n\nconst sectionRef = ref<HTMLElement | null>(null)\nconst { height } = useElementBounding(sectionRef)\n\ndefineProps({\n  data: {\n    type: Object as PropType<SectionMultipleRecord>,\n    default: () => {}\n  }\n})\n</script>\n"],"names":["isActiveFeature","useState","isDesktop","useBreakpoints","breakpointsTailwind","pinRef","ref","tween","props","__props","onMounted","useTimeoutFn","gsap","ScrollTrigger","onUnmounted","_a","sectionRef","height","useElementBounding","nextTick"],"mappings":"0uBAoCM,MAAAA,EAAkBC,EAAS,eAAe,uoCClB1C,MAAAC,EADcC,EAAeC,CAAmB,EACxB,QAAQ,IAAI,EAEpCC,EAASC,EAAwB,IAAI,EAErCC,EAAQD,EAAgB,IAAI,EACzBL,EAAA,gBAAiB,IAAM,CAAC,EAEjC,MAAMO,EAAQC,EAWd,OAAAC,EAAU,IAAM,CACdC,EAAa,IAAM,CACbN,EAAO,OAASH,EAAU,QAC5BU,EAAK,eAAeC,CAAa,EAEjCN,EAAM,MAAQK,EAAK,GAAGP,EAAO,MAAO,CAClC,cAAe,CACb,GAAI,iBACJ,QAASA,EAAO,MAChB,IAAK,GACL,MAAO,gBACP,QAAS,GACT,IAAK,IACI,MAAQG,EAAM,SAAWA,EAAM,SAAWA,EAAM,KAAK,OAEhE,CAAA,CACD,EACDK,EAAc,QAAQ,IAEvB,IAAI,CAAA,CACR,EAEDC,EAAY,IAAM,QAChBC,EAAAR,EAAM,QAAN,MAAAQ,EAAa,MAAK,CACnB,4iBCOK,MAAAb,EADcC,EAAeC,CAAmB,EACxB,QAAQ,IAAI,EAEpCY,EAAaV,EAAwB,IAAI,EAEzCD,EAASC,EAAwB,IAAI,EACrC,CAAE,OAAAW,CAAA,EAAWC,EAAmBb,CAAM,EACtCE,EAAQD,EAAgB,IAAI,EAE5BN,EAAkBC,EAAS,eAAe,EAE1CO,EAAQC,EAWd,OAAAC,EAAU,SAAW,CACnB,MAAMS,EAAS,IAAM,CACfd,EAAO,OAASH,EAAU,QAC5BU,EAAK,eAAeC,CAAa,EAEjCN,EAAM,MAAQK,EAAK,GAAGP,EAAO,MAAO,CAClC,cAAe,CACb,GAAI,iBACJ,QAASA,EAAO,MAChB,IAAK,GACL,MAAO,uBACP,QAAS,GACT,IAAK,IACI,KAAOY,EAAO,MAEvB,QAAS,IAAM,CACbjB,EAAgB,MAAQQ,EAAM,GAChC,EACA,YAAa,IAAM,CACbA,EAAM,MAAQ,IACAR,EAAA,MAAQQ,EAAM,IAAM,EAExC,CACF,CAAA,CACD,EACDK,EAAc,QAAQ,EACxB,CACD,CAAA,CACF,EAEDC,EAAY,IAAM,QAChBC,EAAAR,EAAM,QAAN,MAAAQ,EAAa,MAAK,CACnB,giECvGK,MAAAC,EAAaV,EAAwB,IAAI,EACzC,CAAE,OAAAW,CAAA,EAAWC,EAAmBF,CAAU"}