{"version":3,"file":"science.Dyf_3U36.js","sources":["../../../../assets/analyse.svg","../../../../pages/science.vue"],"sourcesContent":["export default \"__VITE_ASSET__BnBjppd2__\"","<script lang=\"ts\" setup>\nimport { useI18n } from \"vue-i18n\";\nimport { buildMeta } from \"~~/utils/meta-builder\";\nimport { smoxyResearchData } from \"~~/utils/research\";\n\n\nconst isSticky = ref(false)\nconst sectionheader = ref<any>(null)\nconst i18n = useI18n();\nconst router = useRouter()\nconst route = useRoute()\nconst research = smoxyResearchData()\n\n\n//const decimalFormat = new Intl.NumberFormat(i18n.locale.value, {  maximumFractionDigits: 1, minimumFractionDigits: 1  })\nconst nrFomat =  new Intl.NumberFormat(i18n.locale.value, {  maximumFractionDigits: 2, minimumFractionDigits: 0  })\n\nconst successRate = `${nrFomat.format(research.successRate)}%`\nconst notSmokedFor4Weeks = `${nrFomat.format(research.notSmokedFor4Weeks)}%`\nconst successRateStrategy = `${nrFomat.format(research.successRateStrategy)}%`\nconst basedOnUserCount = nrFomat.format(research.users)\nconst date = new Intl.DateTimeFormat(i18n.locale.value, { year: 'numeric', month: 'long' }).format(research.ts)\n\nuseHead(buildMeta({ key:'science',  follow: true, descriptionReplace: {'success_rate': successRate } }))\n\nconst advantages = ref([\n  {image:\"/icon_strategy.svg\", color: '#A864FF', title: i18n.t('science.advantages.list.success')},\n  {image:\"/icon_help.svg\", color: '#FE9191', title: i18n.t('science.advantages.list.help')},\n  {image:\"/icon_bulb.svg\", color: '#8EC9FF', title: i18n.t('science.advantages.list.knowlege')},\n  {image:\"/icon_imagine.svg\", color: '#72DEB7', title: i18n.t('science.advantages.list.mood')},\n  {image:\"/icon_mental.svg\", color: '#B2B6FF', title: i18n.t('science.advantages.list.stress')},\n  {image:\"/icon_motivation.svg\", color: '#FD8900', title: i18n.t('science.advantages.list.motivation')},\n])\n\nconst onIntersect = (hash: string)=>{\n  //console.log(\"1. on intersect:\", hash)\n  if(route.hash === hash)return;\n  console.log(\"2. on intersect:\", hash)\n  router.push(hash)\n}\n\nconst intersect = ref(onIntersect)\n\nonMounted(() => {\n  let sticky = sectionheader.value.offsetTop;\n  window.onscroll = function() {onScroll()};\n\n  function onScroll(){\n    if(sticky === 0 && !isSticky.value){\n      sticky = sectionheader.value.offsetTop\n      // inital the offsetTop is not calculated correctly...\n    }\n    if (window.pageYOffset > sticky-4) {\n      isSticky.value = true;\n    } else {\n      isSticky.value = false;\n    }\n  }\n})\n\nonUnmounted(()=>{\n  window.onscroll = null;\n})\n\n</script>\n\n<template>\n  <div>\n    <div class=\"w-full relative\">\n        <div class=\"w-full h-full absolute -z-10\">\n            <div class=\"header w-full h-full overflow-x-hidden\">\n              <svg class=\"absolute right-0\" width=\"688\" height=\"780\" viewBox=\"0 0 688 780\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g filter=\"url(#filter0_f_14818_112467)\">\n                <circle cx=\"522.5\" cy=\"257.5\" r=\"278.5\" fill=\"#FFA5A5\" fill-opacity=\"0.79\"/>\n                </g>\n                <defs>\n                <filter id=\"filter0_f_14818_112467\" x=\"0\" y=\"-265\" width=\"1045\" height=\"1045\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n                <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n                <feGaussianBlur stdDeviation=\"122\" result=\"effect1_foregroundBlur_14818_112467\"/>\n                </filter>\n                </defs>\n              </svg>\n\n               <svg class=\"absolute\" width=\"377\" height=\"565\" viewBox=\"0 0 377 565\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g filter=\"url(#filter0_f_14818_112466)\">\n                <circle cx=\"9\" cy=\"197\" r=\"194\" fill=\"#B5FBFF\"/>\n                </g>\n                <defs>\n                <filter id=\"filter0_f_14818_112466\" x=\"-359\" y=\"-171\" width=\"736\" height=\"736\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n                <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n                <feGaussianBlur stdDeviation=\"87\" result=\"effect1_foregroundBlur_14818_112466\"/>\n                </filter>\n                </defs>\n              </svg>\n\n              <svg class=\"mx-auto\" width=\"1131\" height=\"612\" viewBox=\"0 0 1131 612\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g filter=\"url(#filter0_f_14818_112468)\">\n                <circle cx=\"590\" cy=\"22\" r=\"206\" fill=\"#A864FF\"/>\n                </g>\n                <defs>\n                <filter id=\"filter0_f_14818_112468\" x=\"0\" y=\"-568\" width=\"1180\" height=\"1180\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n                <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n                <feGaussianBlur stdDeviation=\"192\" result=\"effect1_foregroundBlur_14818_112468\"/>\n                </filter>\n                </defs>\n              </svg>\n\n            </div>\n        </div>\n        <Header theme=\"light\" />\n    \n        <div class=\"flex flex-col-reverse lg:flex-row max-w-screen-lg gap-10 px-10 pt-10 mx-auto items-center justify-center\">\n          \n            <div class=\"flex flex-col text-center lg:text-left flex-1 pb-40\">\n                <h1 class=\"text-6xl lg:text-7xl text-[#290B50] font-owners font-bold pb-6 pt-2\" v-html=\"$t('science.headline')\"></h1>\n                <p class=\"text-black/75 text-lg font-light\">{{$t('science.body')}}</p>\n            </div>\n            \n            <div class=\"flex mx-auto w-full items-center justify-center flex-1 overflow-x-hidden\">\n              <svg class=\"mx-auto mb-20\" width=\"292\" height=\"252\" viewBox=\"0 0 292 252\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path opacity=\"0.5\" d=\"M0 163.096C0 156.468 5.37258 151.096 12 151.096H70.7432C77.3706 151.096 82.7432 156.468 82.7432 163.096V251.827H0V163.096Z\" fill=\"url(#paint0_linear_14803_112332)\"/>\n                <path opacity=\"0.7\" d=\"M104.328 109.133C104.328 102.505 109.701 97.1328 116.328 97.1328H175.072C181.699 97.1328 187.072 102.505 187.072 109.133V251.827H104.328V109.133Z\" fill=\"url(#paint1_linear_14803_112332)\"/>\n                <path d=\"M208.657 12C208.657 5.37258 214.029 0 220.657 0H279.4C286.027 0 291.4 5.37258 291.4 12V251.827H208.657V12Z\" fill=\"url(#paint2_linear_14803_112332)\"/>\n                <defs>\n                <linearGradient id=\"paint0_linear_14803_112332\" x1=\"41.3716\" y1=\"151.096\" x2=\"41.3716\" y2=\"251.827\" gradientUnits=\"userSpaceOnUse\">\n                <stop stop-color=\"white\"/>\n                <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"/>\n                </linearGradient>\n                <linearGradient id=\"paint1_linear_14803_112332\" x1=\"145.7\" y1=\"97.1328\" x2=\"145.7\" y2=\"251.827\" gradientUnits=\"userSpaceOnUse\">\n                <stop stop-color=\"white\"/>\n                <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"/>\n                </linearGradient>\n                <linearGradient id=\"paint2_linear_14803_112332\" x1=\"250.028\" y1=\"0\" x2=\"250.028\" y2=\"251.827\" gradientUnits=\"userSpaceOnUse\">\n                <stop stop-color=\"white\"/>\n                <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"/>\n                </linearGradient>\n                </defs>\n                </svg>\n            </div>\n        </div>\n\n    </div> \n    \n    <!-- Sub Nav :class=\"{'sticky-nav': isSticky}\" -->\n    <div class=\"w-full -mt-12 mx-auto max-w-screen-lg h-28 px-2 md:px-6 lg:px-0\" :class=\"{'px-0': isSticky}\"> \n      <div ref=\"sectionheader\" :class=\"{'non-sticky-nav': !isSticky, 'sticky-nav': isSticky}\" \n      class=\"z-50 gap-4 md:gap-6 lg:gap-10 tracking-wide text-center text-slate-500 px-4 leading-4 text-base md:text-lg lg:text-2xl w-full bg-white flex flex-row justify-center items-center transition-all duration-500\">\n        <NuxtLink to=\"#approach\" class=\"pb-2\" :class=\"{'text-slate-900 font-semibold tracking-normal border-b-2 border-primary-500': $route.hash === '#approach'}\" >{{$t('science.approach.title')}}</NuxtLink>\n        <NuxtLink to=\"#research\" class=\"pb-2\" :class=\"{'text-slate-900 font-semibold tracking-normal border-b-2 border-primary-500': $route.hash === '#research'}\" >{{$t('science.research.title')}}</NuxtLink>\n        <NuxtLink to=\"#advantages\" class=\"pb-2\" :class=\"{'text-slate-900 font-semibold tracking-normal border-b-2 border-primary-500': $route.hash === '#advantages'}\" >{{$t('science.advantages.title')}}</NuxtLink>\n      </div>\n    </div>\n   \n    <!-- approach -->\n    <Intersection @enter=\"intersect('#approach')\" :threshold=\".0\" root-margin=\"0px 100px\">\n       <div id=\"approach\" class=\"relative md:max-w-screen-lg mx-auto px-6 lg:px-0 pb-28\" >\n    \n        <h4 class=\"text-lg pt-20 text-slate-600 mx-auto text-center\">{{$t('science.approach.title')}}</h4>\n        <h2 class=\"text-3xl md:text-4xl pt-6 font-gothic  leading-snug text-black/40 text-center mx-auto\">{{$t('science.approach.quote')}}</h2>\n        <div class=\"flex flex-col  md:flex-row gap-6 md:gap-10 lg:gap-20 pt-20\">\n            <div class=\"bg-[#FFAF51] rounded-xl w-full flex-1 shadow-[#FF5C00]/30 shadow-2xl\">\n              <img class=\"mx-auto py-10\" src=\"@/assets/analyse.svg\" alt=\"analyse chart\">\n            </div>\n            <div class=\"flex-1 w-full flex flex-col justify-center\">\n               <h3 class=\"font-bold font-owners text-3xl\">{{$t('science.research.headline')}}</h3>\n               <p class=\"text-md mt-4 text-slate-700\">{{$t('science.research.body', {'success_rate': successRate })}}</p>\n            </div>\n           \n        </div>\n      </div>\n    </Intersection>\n     \n<!-- research -->\n    <Intersection @enter=\"intersect('#research')\" :threshold=\".0\"   >\n      \n      <div id=\"research\" class=\"max-w-screen-lg mx-auto px-6 lg:px-0 flex flex-col justify-center  overflow-hidden pb-10\">\n        <h4 class=\"text-lg text-slate-600 mx-auto mt-20  mb-10\">{{$t('science.research.title')}}</h4>  \n        <div class=\"flex flex-col md:flex-row gap-6 items-center lg:items-start\" >\n          <div class=\"flex-1\">\n            <p class=\"stats-number\">{{Math.floor(research.successRate)}}</p>\n            <p class=\"stats-label\">{{$t('science.research.stats.quit_quote', {'value': successRate})}}</p>\n          </div>\n          <div class=\"flex-1\">\n            <p class=\"stats-number\">{{Math.floor(research.notSmokedFor4Weeks)}}</p>\n            <p class=\"stats-label\">{{$t('science.research.stats.four_weeks', {'value': notSmokedFor4Weeks})}}</p>\n          </div>\n          <div class=\"flex-1\">\n            <p class=\"stats-number\">{{Math.floor(research.successRateStrategy)}}</p>\n            <p class=\"stats-label\">{{$t('science.research.stats.strategy_quote', {'value': successRateStrategy})}}</p>\n          </div>\n        </div>\n\n        <p class=\"text-xs text-gray-500 mt-10 text-right max-w-xs ml-auto\">\n          {{$t('science.research.stats_note', {'user_count': basedOnUserCount, 'month_year': date})}}\n        </p>\n      </div>\n    </Intersection>\n\n      <!-- advantages -->\n    <Intersection @enter=\"intersect('#advantages')\" :threshold=\".0\">\n      <div class=\"bg-amber-50 w-full\">\n        <div id=\"advantages\" class=\"pt-20 md:max-w-screen-lg mx-auto px-10 md:px-6 lg:px-0 text-center pb-20\" >\n\n        <h4 class=\"text-lg text-slate-600\">{{$t('science.advantages.title')}}</h4>\n        <h2 class=\"text-3xl font-bold font-owners max-w-xl mx-auto text-slate-900\">{{$t('science.advantages.headline')}}</h2>\n        <p class=\"text-md text-slate-900 md:max-w-3xl mx-auto mt-4\">{{$t('science.advantages.body')}}</p>\n        \n        <!-- Icons -->\n        <div class=\"grid grid-cols-1 md:grid-cols-3 mt-20 gap-6 w-full text-left\">\n            <div v-for=\"item in advantages\" class=\"flex flex-row items-center w-full\">\n              <img :src=\"item.image\" alt=\"icon\" \n              :style=\"{'background-color': item.color}\" class=\"h-24 aspect-square p-2 rounded-3xl\">\n              <p class=\"font-bold ml-6 text-xl md:text-base\">{{item.title}}</p>\n\n           </div> \n        </div>\n      </div>\n      </div>\n      \n    </Intersection>\n    <Footer />\n   \n  </div>\n</template>\n\n"],"names":["_imports_0","URL","url","href","isSticky","ref","sectionheader","i18n","useI18n","router","useRouter","route","useRoute","research","smoxyResearchData","nrFomat","Intl","NumberFormat","locale","value","maximumFractionDigits","minimumFractionDigits","successRate","format","notSmokedFor4Weeks","successRateStrategy","basedOnUserCount","users","date","DateTimeFormat","year","month","ts","useHead","buildMeta","key","follow","descriptionReplace","success_rate","advantages","image","color","title","t","intersect","hash","push","onMounted","sticky","offsetTop","window","onscroll","pageYOffset","onUnmounted"],"mappings":"8VAAA,MAAeA,EAAA,GAAA,IAAAC,IAAA,mCAAAC,KAAAC,64KCMT,MAAAC,EAAWC,GAAI,GACfC,EAAgBD,EAAS,MACzBE,GAAOC,IACPC,GAASC,IACTC,GAAQC,IACRC,GAAWC,IAIXC,GAAW,IAAIC,KAAKC,aAAaV,GAAKW,OAAOC,MAAO,CAAGC,sBAAuB,EAAGC,sBAAuB,IAExGC,GAAc,GAAGP,GAAQQ,OAAOV,GAASS,gBACzCE,GAAqB,GAAGT,GAAQQ,OAAOV,GAASW,uBAChDC,GAAsB,GAAGV,GAAQQ,OAAOV,GAASY,wBACjDC,GAAmBX,GAAQQ,OAAOV,GAASc,OAC3CC,GAAO,IAAIZ,KAAKa,eAAetB,GAAKW,OAAOC,MAAO,CAAEW,KAAM,UAAWC,MAAO,SAAUR,OAAOV,GAASmB,IAE5GC,EAAQC,EAAU,CAAEC,IAAI,UAAYC,QAAQ,EAAMC,mBAAoB,CAACC,aAAgBhB,OAEvF,MAAMiB,GAAalC,EAAI,CACrB,CAACmC,MAAM,qBAAsBC,MAAO,UAAWC,MAAOnC,GAAKoC,EAAE,oCAC7D,CAACH,MAAM,iBAAkBC,MAAO,UAAWC,MAAOnC,GAAKoC,EAAE,iCACzD,CAACH,MAAM,iBAAkBC,MAAO,UAAWC,MAAOnC,GAAKoC,EAAE,qCACzD,CAACH,MAAM,oBAAqBC,MAAO,UAAWC,MAAOnC,GAAKoC,EAAE,iCAC5D,CAACH,MAAM,mBAAoBC,MAAO,UAAWC,MAAOnC,GAAKoC,EAAE,mCAC3D,CAACH,MAAM,uBAAwBC,MAAO,UAAWC,MAAOnC,GAAKoC,EAAE,yCAU3DC,GAAYvC,GAPGwC,IAEhBlC,GAAMkC,OAASA,GAElBpC,GAAOqC,KAAKD,EAAI,WAKlBE,GAAU,KACJ,IAAAC,EAAS1C,EAAca,MAAM8B,UACjCC,OAAOC,SAAW,YAElB,WACgB,IAAXH,GAAiB5C,EAASe,QAC3B6B,EAAS1C,EAAca,MAAM8B,WAG3BC,OAAOE,YAAcJ,EAAO,EAC9B5C,EAASe,OAAQ,EAEjBf,EAASe,OAAQ,CAErB,GAZuC,CAYvC,IAGFkC,GAAY,KACVH,OAAOC,SAAW,IAAA"}