{"version":3,"file":"wellnessRetreat-BkLNrMoN.js","sources":["../../../app/assets/images/wellness/intro_1.jpg","../../../app/assets/images/wellness/intro_2.jpg","../../../app/assets/images/wellness/intro_3.jpg","../../../app/assets/images/wellness/intro_4.jpg","../../../app/assets/images/wellness/intro_5.jpg","../../../app/javascript/src/modules/WellnessRetreat/MasterClass.vue","../../../app/assets/images/wellness/map.png","../../../app/javascript/src/modules/WellnessRetreat/Components/DestinationList.vue","../../../app/javascript/src/modules/WellnessRetreat/Destinations.vue","../../../app/assets/images/wellness/text_review_photo_1.png","../../../app/assets/images/wellness/text_review_photo_2.png","../../../app/assets/images/wellness/text_review_photo_3.png","../../../app/assets/images/wellness/text_review_photo_4.png","../../../app/assets/images/wellness/retreat_1.jpg","../../../app/assets/images/wellness/retreat_2.jpg","../../../app/assets/images/wellness/retreat_3.jpg","../../../app/javascript/src/modules/WellnessRetreat/GetStarted.vue","../../../app/javascript/src/modules/WellnessRetreat/BookCall.vue","../../../app/javascript/src/views/WellnessRetreat.vue","../../../app/javascript/entrypoints/wellnessRetreat.js"],"sourcesContent":["export default \"__VITE_ASSET__KO5ZsbFC__\"","export default \"__VITE_ASSET__BFzvAY67__\"","export default \"__VITE_ASSET__DZjmrF6N__\"","export default \"__VITE_ASSET__DBHBn2vn__\"","export default \"__VITE_ASSET__CpZSsGAE__\"","<template>\n  <section class=\"wellness-section\">\n    <TwinColorTitle class=\"title\" width=\"450px\">\n      Free retreat planning <em>masterclass series</em>\n    </TwinColorTitle>\n\n    <div class=\"text\">We’ve created a free retreat planning masterclass, a 7-part series covering crucial topics like how to choose a location, how to price your retreat, and more. Sign up below!\n    </div>\n\n    <a :href=\"ctaUrl\" target=\"_blank\" id=\"wellness-masterclass\">\n      <Button class=\"btn\" color=\"blue\" text=\"Sign up for free\"/>\n    </a>\n\n    <FloatingContainerWithIndicator\n      :show=\"mobile\"\n      :count=\"captions.length\"\n      parent=\".cards\"\n      child=\".card\"\n      v-slot=\"{ scroll }\"\n    >\n      <div class=\"cards\" @scroll=\"scroll()\">\n        <a\n          v-for=\"(caption, i) in captions\"\n          class=\"card\"\n          :class=\"{ active: activeCard === i }\"\n          :href=\"ctaUrl\"\n          target=\"_blank\"\n          @mouseenter=\"activeCard = i\"\n        >\n          <div class=\"caption\" v-text=\"caption\"></div>\n        </a>\n      </div>\n    </FloatingContainerWithIndicator>\n  </section>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\nimport { useShared } from \"@/helpers/vueHelpers.js\";\nimport Button from \"@/components/Theme2/Button.vue\";\nimport TwinColorTitle from \"@/components/Theme2/TwinColorTitle.vue\";\nimport FloatingContainerWithIndicator from \"@/components/Containers/FloatingContainerWithIndicator.vue\";\n\nconst captions = ref([\n  'How to choose a location',\n  'What to do with pricing and markups',\n  'What activities and add-ons are suitable',\n  'How to promote your retreat',\n]);\nconst activeCard = ref(0);\nconst { mobile } = useShared();\nconst ctaUrl = 'https://tourhe.ro/wellness-masterclass-pdf-lp';\n</script>\n\n<style lang=\"scss\" scoped>\nsection.wellness-section {\n  @include main-rewrap;\n\n  align-items: center;\n  padding-block: 64px;\n\n  @include mobile {\n    padding-inline: 0;\n  }\n\n  .title {\n    margin-bottom: 16px;\n  }\n\n  .text {\n    max-width: 573px;\n    text-align: center;\n    margin-bottom: 32px;\n\n    @include mobile {\n      font-size: 14px;\n      line-height: 22px;\n      padding: 0 20px;\n    }\n  }\n\n  .btn {\n    margin-bottom: 32px;\n  }\n\n  .cards {\n    width: 100%;\n    display: flex;\n    gap: 16px;\n    aspect-ratio: 1312/278;\n    overflow-x: auto;\n    scroll-snap-type: x mandatory;\n    margin-bottom: 32px;\n\n    @include mobile {\n      aspect-ratio: initial;\n      padding: 0 20px;\n    }\n  }\n\n  .card {\n    flex: 1;\n    height: 100%;\n    display: flex;\n    border-radius: 15px;\n    background-position: center;\n    background-size: cover;\n    background-repeat: no-repeat;\n    transition: all 100ms linear;\n    user-select: none;\n    scroll-snap-align: center;\n\n    &.active {\n      flex: calc(430 / 278);\n    }\n\n    @include mobile {\n      min-width: calc(100% - 10px);\n      aspect-ratio: 1/1;\n    }\n  }\n\n  .card:nth-child(1) {\n    background-image: url('app/assets/images/wellness/masterclass_1.jpg')\n  }\n\n  .card:nth-child(2) {\n    background-image: url('app/assets/images/wellness/masterclass_2.jpg')\n  }\n\n  .card:nth-child(3) {\n    background-image: url('app/assets/images/wellness/masterclass_3.jpg')\n  }\n\n  .card:nth-child(4) {\n    background-image: url('app/assets/images/wellness/masterclass_4.jpg')\n  }\n\n  .caption {\n    width: 100%;\n    color: white;\n    border-radius: 15px;\n    background: rgba(0, 0, 0, 0.40);\n    backdrop-filter: blur(20px);\n    margin: auto 24px 32px;\n    padding: 8px 16px;\n    height: 60px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n  }\n\n  &::v-deep(.scroll-indicator .dot.active) {\n    background-color: $green-300;\n  }\n}\n</style>\n","export default \"__VITE_ASSET__DM2tPRQV__\"","<template>\n  <div class=\"dest-table\">\n    <header>\n      <div class=\"continent\">Central America</div>\n      <div class=\"badge\">Most popular</div>\n    </header>\n    <div class=\"country-list\">\n      <div>🇲🇽 Mexico</div>\n      <div>🇨🇷 Costa Rica</div>\n    </div>\n    <div class=\"hr\"></div>\n\n    <div class=\"continent\">South America</div>\n    <div class=\"country-list\">\n      <div>🇨🇴 Colombia</div>\n      <div>🇵🇪 Peru</div>\n    </div>\n    <div class=\"hr\"></div>\n\n    <div class=\"continent\">Europe</div>\n    <div class=\"country-list\">\n      <div>🇮🇹 Italy</div>\n      <div>🇵🇹 Portugal</div>\n      <div>🇪🇸 Spain</div>\n      <div>🇫🇷 France</div>\n    </div>\n    <div class=\"hr\"></div>\n\n    <div class=\"continent\">Africa</div>\n    <div class=\"country-list\">\n      <div>🇲🇦 Morocco</div>\n    </div>\n    <div class=\"hr\"></div>\n\n    <div class=\"continent\">Asia</div>\n    <div class=\"country-list\">\n      <div>🇮🇩 Indonesia</div>\n      <div>🇮🇳 India</div>\n      <div>🇹🇭 Thailand</div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.dest-table {\n  border-radius: 16px;\n  background-color: white;\n  padding: 48px;\n\n  @include mobile {\n    padding: 24px 16px;\n  }\n}\n\n.continent {\n  color: $blue-500;\n  font-size: 24px;\n  font-weight: 600;\n  line-height: 140%; /* 33.6px */\n}\n\n.hr {\n  border-bottom: 1px solid $gray-lighter;\n  margin: 24px 0;\n}\n\n.country-list {\n  padding-top: 24px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  row-gap: 12px;\n  column-gap: 24px;\n\n  @include mobile {\n    grid-template-columns: 1fr;\n  }\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  @include mobile {\n    align-items: flex-start;\n    flex-direction: column;\n    gap: 12px;\n  }\n}\n\n.badge {\n  display: flex;\n  padding: 6px 12px;\n  color: $brand-tertiary;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 16px; /* 114.286% */\n  border-radius: 15px;\n  border: 1px solid $green-300;\n}\n</style>","<template>\n  <section class=\"wellness-section\">\n    <div ref=\"leftEl\" class=\"left\">\n      <TwinColorTitle class=\"title\">\n        Nurture <em>your community</em>, wherever the journey takes you\n      </TwinColorTitle>\n      <div class=\"text\">With us, you plan the perfect trip—your way. No pre-made itineraries, no rigid schedules. We handle the logistics, payments, and create a custom page for your group. You get\n        full freedom, we take care of the rest.\n      </div>\n      <div class=\"map-wrapper\">\n        <div ref=\"mapEl\" class=\"map\">\n          <img src=\"app/assets/images/wellness/map.png\" alt=\"map\">\n        </div>\n      </div>\n    </div>\n    <DestinationList />\n  </section>\n</template>\n\n<script setup>\nimport { computed, ref } from \"vue\";\nimport { watchDebounced, useElementBounding } from \"@vueuse/core\";\nimport TwinColorTitle from \"@/components/Theme2/TwinColorTitle.vue\";\nimport DestinationList from \"@/modules/WellnessRetreat/Components/DestinationList.vue\";\n\nconst leftEl = ref(null);\nconst mapEl = ref(null);\nconst leftElBox = useElementBounding(leftEl);\nconst mapElBox = useElementBounding(mapEl);\nconst leftElExtraBottomMargin = computed(() => Math.max(mapElBox.bottom.value - leftElBox.bottom.value, 0));\nwatchDebounced(leftElExtraBottomMargin, margin => leftEl.value.style.marginBottom = `${margin}px`, { debounce: 200 });\n</script>\n\n<style lang=\"scss\" scoped>\nsection.wellness-section {\n  @include main-rewrap;\n\n  padding-block: 64px 180px;\n  margin-bottom: 64px;\n  display: grid;\n  align-items: start;\n  grid-template-columns: 535fr 645fr;\n  column-gap: 132px;\n  row-gap: 24px;\n  border-radius: 16px;\n  background: linear-gradient(134deg, $green-50 33.38%, #E3F2FD 109.52%);\n\n  @include mobile {\n    grid-template-columns: 1fr;\n    padding: 32px 20px;\n  }\n\n  .left {\n    padding: 60px 40px 43%;\n    @include flex-column(22px);\n    background-color: white;\n    border-radius: 16px;\n\n    @include mobile {\n      padding: 24px 16px 53%;\n    }\n  }\n\n  .title {\n    font-size: 36px;\n    text-align: left;\n  }\n\n  .map-wrapper {\n    position: relative;\n  }\n\n  .map {\n    position: absolute;\n    top: 6px;\n    left: 0;\n    right: 0;\n    border-radius: 16px;\n    background: $green-50;\n    padding: 10px;\n    display: flex;\n\n    img {\n      border-radius: 12px;\n      background-color: white;\n      width: 100%;\n      box-shadow: 0 4px 12px 0 rgba(34, 82, 91, 0.10);\n      padding: 8px 4px 2px;\n    }\n  }\n}\n</style>","export default \"__VITE_ASSET__BV6t5HQE__\"","export default \"__VITE_ASSET__Ad2GOdGR__\"","export default \"__VITE_ASSET__B$M2DIaa__\"","export default \"__VITE_ASSET__DyHWxdeD__\"","export default \"__VITE_ASSET__DE4ACJ87__\"","export default \"__VITE_ASSET__BAKpxIvk__\"","export default \"__VITE_ASSET__BcG43Ciq__\"","<template>\n  <section class=\"wellness-section\">\n    <TwinColorTitle class=\"title\" width=\"420px\">\n      Transform your retreat ideas <em>into reality</em>\n    </TwinColorTitle>\n\n    <StepSliderText :steps/>\n\n    <FloatingContainer>\n      <div class=\"images\">\n        <img src=\"app/assets/images/wellness/retreat_1.jpg\">\n        <img src=\"app/assets/images/wellness/retreat_2.jpg\">\n        <img src=\"app/assets/images/wellness/retreat_3.jpg\">\n      </div>\n    </FloatingContainer>\n\n    <div class=\"cta-wrapper\">\n      <a href=\"#calendar\" id=\"wellness-banner-bookcall\" class=\"cta\">\n        <div class=\"text\">Have a retreat idea? Book a free call with us!</div>\n        <Button color=\"white\" text=\"Book a call\"/>\n      </a>\n    </div>\n  </section>\n</template>\n\n<script setup>\nimport Button from \"@/components/Theme2/Button.vue\";\nimport TwinColorTitle from \"@/components/Theme2/TwinColorTitle.vue\";\nimport FloatingContainer from \"@/components/Containers/FloatingContainer.vue\";\nimport StepSliderText from \"@/components/StepSliderText.vue\";\n\nconst steps = [\n  `Book a call; tell us your preference`,\n  `We'll present itinerary options; choose the one you love most for further customization`,\n  `Discuss pricing and your earnings for your trip. Don’t worry, we’ll guide you throughout the process`,\n  `Launch your trip by sharing with your community! We'll take care of the rest`,\n];\n</script>\n\n<style lang=\"scss\" scoped>\nsection.wellness-section {\n  align-items: center;\n\n  @include mobile {\n    @include main-unwrap;\n    overflow-x: hidden;\n  }\n\n  .title {\n    margin-bottom: 32px;\n  }\n\n  .images {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    align-items: flex-end;\n    justify-content: center;\n    gap: 20px;\n    margin-bottom: 64px;\n    overflow: hidden;\n\n    img {\n      width: 100%;\n    }\n\n    @include mobile {\n\n      img {\n        width: 156px;\n      }\n    }\n  }\n\n  .cta-wrapper {\n    width: 100%;\n    @include mobile {\n      padding-inline: var(--site-px);\n    }\n  }\n\n  .cta {\n    border-radius: 24px;\n    background: linear-gradient(90deg, $green-300 0%, $green-100 100%);\n    display: flex;\n    padding: 47.5px 32px;\n    justify-content: space-between;\n    align-items: center;\n\n    @include mobile {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 24px;\n      padding: 24px;\n    }\n\n    .text {\n      color: white;\n      font-size: 32px;\n      font-weight: 600;\n      line-height: 110%;\n    }\n  }\n}\n</style>\n","<template>\n  <section class=\"wellness-section\">\n    <div class=\"text\">\n      <TwinColorTitle class=\"title\">\n        Your next retreat is <em>waiting for you</em>\n      </TwinColorTitle>\n      <div>Try us out! It’s free to book a call.</div>\n    </div>\n    <div class=\"calendly-inline-widget\"\n         data-url=\"https://calendly.com/d/ckvq-mmv-z7y/wellness-retreat-with-tourhero?hide_event_type_details=1&hide_gdpr_banner=1\"\n         style=\"width: 100%; height: 700px;\"\n    ></div>\n  </section>\n</template>\n\n<script setup>\nimport { useScriptTag } from '@vueuse/core'\nimport TwinColorTitle from \"@/components/Theme2/TwinColorTitle.vue\";\n\nuseScriptTag('https://assets.calendly.com/assets/external/widget.js')\n</script>\n\n<style lang=\"scss\" scoped>\nsection.wellness-section {\n  @include main-rewrap;\n\n  border-radius: 16px;\n  background: url('app/assets/images/heroDashboard/color-bg.jpg') lightgray 50% / cover no-repeat;\n\n  display: grid;\n  column-gap: 20px;\n  padding-block: 20px 50px;\n  grid-template-columns: 320px 1fr;\n  align-items: center;\n\n  @include mobile {\n    padding: 32px 20px;\n    grid-template-columns: 1fr;\n    margin-bottom: 50px;\n  }\n\n  .text {\n    @include flex-column(22px);\n\n    @include mobile {\n      text-align: center;\n      margin-bottom: 32px;\n      align-items: center;\n    }\n  }\n\n  .title {\n    text-align: left;\n    font-size: 32px;\n    line-height: 40px;\n\n    @include mobile {\n      text-align: center;\n    }\n  }\n}\n</style>\n","<template>\n  <main class=\"wellness-retreat\">\n    <Intro />\n    <MasterClass />\n    <VideoReviews />\n    <Earnings />\n    <Destinations />\n    <TextReviews />\n    <WellnessTrips />\n    <GetStarted />\n    <WellnessFaqs />\n    <BookCall id=\"calendar\" />\n  </main>\n</template>\n\n<script setup>\nimport { useSmoothScroll } from \"@/helpers/vueHelpers.js\";\nimport Intro from '@/modules/WellnessRetreat/Intro.vue';\nimport MasterClass from '@/modules/WellnessRetreat/MasterClass.vue';\nimport VideoReviews from '@/modules/WellnessRetreat/VideoReviews.vue';\nimport Earnings from '@/modules/WellnessRetreat/Earnings.vue';\nimport Destinations from '@/modules/WellnessRetreat/Destinations.vue';\nimport TextReviews from '@/modules/WellnessRetreat/TextReviews.vue';\nimport WellnessTrips from '@/modules/WellnessRetreat/WellnessTrips.vue';\nimport GetStarted from '@/modules/WellnessRetreat/GetStarted.vue';\nimport WellnessFaqs from '@/modules/WellnessRetreat/WellnessFaqs.vue';\nimport BookCall from '@/modules/WellnessRetreat/BookCall.vue';\n\nuseSmoothScroll();\n</script>\n\n<style lang=\"scss\" scoped>\n.wellness-retreat {\n  font-size: $text-base;\n  line-height: $leading-snug;\n  font-weight: $font-medium;\n  @include flex-column;\n}\n\nmain > section {\n  @include flex-column;\n}\n</style>","import { initVueAppOnLoad } from \"@/app\";\nimport App from '@/views/WellnessRetreat.vue';\n\ninitVueAppOnLoad('#wellness-retreat', App);"],"names":["_imports_0$2","_imports_1$1","_imports_2$1","_imports_3","_imports_4","ctaUrl","captions","ref","activeCard","mobile","useShared","_imports_0$1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_1","leftEl","mapEl","leftElBox","useElementBounding","mapElBox","leftElExtraBottomMargin","computed","watchDebounced","margin","Photo1","Photo2","Photo3","Photo4","_imports_0","_imports_1","_imports_2","steps","useScriptTag","useSmoothScroll","initVueAppOnLoad","App"],"mappings":"gmCAAA,MAAeA,EAAA,oCCAAC,EAAA,oCCAAC,EAAA,oCCAAC,EAAA,oCCAAC,EAAA,u3BCmDTC,EAAS,iFARf,MAAMC,EAAWC,EAAI,CACnB,2BACA,sCACA,2CACA,6BACF,CAAC,EACKC,EAAaD,EAAI,CAAC,EAClB,CAAE,OAAAE,CAAQ,EAAGC,EAAW,kwGClDfC,GAAA,8DCCb,SAAAC,GAAAC,EAAAC,EAAA,CADF,OAAAC,EAAA,EAAAC,EAAA,MAAAC,GAAAH,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,k2CCyBA,MAAMI,EAASX,EAAI,IAAI,EACjBY,EAAQZ,EAAI,IAAI,EAChBa,EAAYC,EAAmBH,CAAM,EACrCI,EAAWD,EAAmBF,CAAK,EACnCI,EAA0BC,EAAS,IAAM,KAAK,IAAIF,EAAS,OAAO,MAAQF,EAAU,OAAO,MAAO,CAAC,CAAC,EAC1G,OAAAK,EAAeF,EAAyBG,GAAUR,EAAO,MAAM,MAAM,aAAe,GAAGQ,CAAM,KAAM,CAAE,SAAU,GAAG,CAAE,q7CC9BrGC,GAAA,gDCAAC,GAAA,gDCAAC,GAAA,gDCAAC,GAAA,gnDCAAC,GAAA,sCCAAC,GAAA,sCCAAC,GAAA,8LC+Bf,MAAMC,EAAQ,CACZ,uCACA,0FACA,uGACA,8EACF,22ICjBA,OAAAC,EAAa,uDAAuD,6jBCSpE,OAAAC,EAAiB,sJCzBjBC,EAAiB,oBAAqBC,EAAG"}