{"version":3,"file":"MentalFitness.8f96d904.js","sources":["../../src/components/FAQs.vue","../../src/components/WorkoutsThisWeek.vue","../../src/views/MentalFitness.vue"],"sourcesContent":["<template>\n  <div class=\"faqs-content\">\n    <template v-for=\"qa in pageState.questionAnswers\" :key=\"qa.id\">\n      <div class=\"question collapsed\" data-bs-toggle=\"collapse\" :href=\"`#collapseAnswer${qa.id}`\" role=\"button\"\n        aria-expanded=\"false\" aria-controls=\"collapseAnswer1\">\n        <strong>{{ qa.question }}</strong>\n        <i class=\"fa-regular fa-angle-up text-black\"></i>\n      </div>\n      <div class=\"answer collapse\" :id=\"`collapseAnswer${qa.id}`\">\n        <div class=\"mw-273-531\">\n          <div v-html=\"qa.answer\"></div>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n\nimport { watch, reactive } from \"vue\";\n\nconst props = defineProps({\n  FAQs: {\n    type: Array,\n    required: true,\n  },\n});\n\n// on mounted, add unique id to each question\nconst pageState: {\n  questionAnswers: {\n    id?: number;\n    question: string;\n    answer: string;\n  }[];\n} = reactive({\n  questionAnswers: [],\n});\n\nwatch(\n  () => props.FAQs,\n  (newVal) => {\n    pageState.questionAnswers = newVal.map((qa: { question: string; answer: string }, index: number) => {\n      return {\n        id: index,\n        question: qa.question,\n        answer: qa.answer,\n      };\n    });\n  },\n  { immediate: true }\n);\n\n\n</script>\n\n<style lang=\"scss\" scoped>\nh2 {\n  font-size: 61px;\n  font-weight: bold;\n}\n\n.faq-expand-icon {\n  vertical-align: bottom;\n}\n\n.question {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 19px;\n  padding: 20px 15px 20px 0;\n  line-height: 120%;\n\n  strong {\n    display: inline-block;\n    max-width: 531px;\n  }\n\n  &:not(:first-child) {\n    border-top: 1px solid #00219e;\n  }\n\n  .fa-regular.fa-angle-up {\n    transition: all .3s;\n  }\n\n  &.collapsed {\n    .fa-regular.fa-angle-up {\n      transform: rotateZ(180deg);\n    }\n  }\n}\n\n.answer>* {\n  font-size: 16px;\n  line-height: 120%;\n  letter-spacing: -0.02em;\n}\n\n.mw-273-531 {\n  max-width: 531px;\n}\n\n@media (max-width: 1180px) {\n  section.faqs {\n    padding-top: 56px;\n\n    .question {\n      padding: 20px 0;\n    }\n  }\n}\n\n@media (max-width: 767px) {\n  section.faqs {\n    padding-top: 56px;\n  }\n\n  .header {\n    padding-top: 40px;\n  }\n\n  strong,\n  .mw-273-531 {\n    max-width: 273px !important;\n  }\n}\n\n@media (max-width: 576px) {\n  section.faqs {\n    padding-top: 48px;\n  }\n}\n</style>\n","<template>\n  <div class=\"scrolling-wrapper\">\n    <div v-if=\"schedule\" class=\"day\" v-bind:key=\"day.date.toString()\" v-for=\"day in schedule\">\n      <div class=\"workout-date-card\">\n        <h3>\n          {{ formatDate(day.date) }}\n        </h3>\n      </div>\n      <div v-bind:key=\"workout.id\" v-for=\"workout in day.workouts\"\n        :class=\"[workout.workout.category.shortName, 'workout-card']\">\n        <h4>{{ workout.workout.title }}</h4>\n        <h5>{{ workout.workout.subtitle }}</h5>\n        <div class=\"workout-info-row\">\n          <p class=\"workout-time\">\n            <i class=\"far fa-clock\"></i>\n            {{ getStartTime(workout.startedAt) }}\n          </p>\n          <p class=\"workout-category\">\n            {{ getWorkoutCat(workout.workout.category.shortName) }}\n          </p>\n        </div>\n        <div class=\"workout-description\">\n          {{ removeMultipleNewLines(stripHtml(workout.workout.description)) }}\n        </div>\n        <!-- <div @click=\"jumpToSignupRedirect(workout.id)\" class=\"workout-book-button\">\n            Book workout!\n          </div> -->\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useUserStore } from '@/store/modules/user';\nimport dayjs from 'dayjs';\nimport { computed } from 'vue';\nimport { stripHtml, removeMultipleNewLines } from '@/common/utils';\n\nconst userStore = useUserStore();\n\nconst schedule: any = computed(() => {\n  return userStore.getSchedule;\n});\n\n// const jumpToSignup = () => {\n//   router.push('/signup');\n// };\n\n// const jumpToWaitlist = () => {\n//   router.push('/waiting-list');\n// };\n\n// const jumpToSignupRedirect = (id) => {\n//   router.push('/signup?redirect=/workout-detail/' + id);\n// };\n\nconst getWorkoutCat = (catCode) => {\n  switch (catCode) {\n    case 'MF':\n      return 'Mental Flexibility';\n    case 'ME':\n      return 'Mental Energy';\n    case 'MS':\n      return 'Mental Strength';\n    case 'GT':\n      return 'Global Think Tank';\n  }\n};\nconst formatDate = (day) => {\n  // day = new Date(day);\n  // const today = new Date();\n  day = dayjs(day).local().startOf('day').format();\n  const today = dayjs().local().startOf('day').format();\n  let tomorrow: Date | string = new Date();\n  tomorrow.setDate(tomorrow.getDate() + 1);\n  tomorrow = dayjs(tomorrow).local().startOf('day').format();\n\n  if (day === today) {\n    return 'Today';\n  }\n\n  if (day === tomorrow) {\n    return 'Tomorrow';\n  }\n  return dayjs(day).format('dddd');\n\n  // const options = { weekday: 'long' };\n  // return day.toLocaleString('en-US', options);\n};\nconst getStartTime = (scheduled_time) => {\n  const dt_from = new Date(scheduled_time);\n  dt_from.setHours(dt_from.getHours());\n  const t_from = dt_from.toLocaleString('sv-SE', {\n    hour: 'numeric',\n    minute: 'numeric',\n  });\n\n  return t_from;\n};\n\n\n</script>\n\n\n<style lang=\"scss\" scoped>\n\n.scrolling-wrapper {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  padding-left: 10%;\n  padding-right: 10%;\n  width: 100%;\n  overflow-x: scroll;\n}\n\n.day {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n}\n\n.workout-card,\n.workout-date-card {\n  background-color: #eee;\n  height: 300px;\n  width: 300px;\n  margin: 10px;\n  border-radius: 4px;\n  position: relative;\n  white-space: break-spaces;\n\n  h3 {\n    font-size: 18px;\n  }\n}\n\n.workout-date-card {\n  width: 170px;\n  background-color: white;\n\n  border: 4px solid #000;\n\n  h3 {\n    font-weight: bold;\n    text-align: center;\n    top: 45%;\n    width: 100%;\n    padding: 0 0px;\n    position: absolute;\n  }\n}\n\n\n\n.workout-card {\n  display: flex;\n  flex-direction: column;\n\n  h4 {\n    margin: 20px 20px 4px 20px;\n    font-size: 16px;\n    font-weight: bold;\n  }\n\n  h5 {\n    margin: 0px 20px;\n    font-size: 14px;\n    font-weight: normal;\n  }\n\n  .workout-info-row {\n    display: flex;\n    flex-direction: row;\n    margin: 15px 20px;\n    justify-content: space-between;\n  }\n\n  .workout-info-row>* {\n    font-size: 12px;\n    margin: 0;\n  }\n\n  .workout-description {\n    margin: 0px 20px;\n    font-size: 13px;\n    max-height: 155px;\n    overflow: hidden;\n  }\n\n  .workout-book-button {\n    background-color: grey;\n    position: absolute;\n    bottom: 30px;\n    width: 80%;\n    margin-left: 10%;\n    padding: 8px 0px;\n    text-align: center;\n    font-weight: bold;\n    color: white;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n}\n\n.workout-card.ME {\n  background-color: #e8f2fb;\n\n  h3,\n  h4,\n  h5,\n  .workout-info-row {\n    color: #00219b;\n  }\n\n  .workout-book-button {\n    background-color: #00219b;\n  }\n}\n\n.workout-card.MF {\n  background-color: #ffe3db;\n\n  h3,\n  h4,\n  h5,\n  .workout-info-row {\n    color: #cc2d00;\n  }\n\n  .workout-book-button {\n    background-color: #ff4611;\n  }\n}\n\n.workout-card.MS {\n  background-color: #c4f5e9;\n\n  h3,\n  h4,\n  h5,\n  .workout-info-row {\n    color: #045caf;\n  }\n\n  .workout-book-button {\n    background-color: #3edeb6;\n  }\n}\n\n.workout-card.UK,\n.workout-card.CC,\n.workout-card.GT {\n  display: none;\n}\n\n</style>\n","<template>\n  <div class=\"public-layout\">\n    <div class=\"header\">\n      <section class=\"header-contents\">\n        <h1>Mental Fitness<br />workouts</h1>\n        <p>\n          Upotential offers a bunch of Mental Fitness workouts where you train your\n          mental skills to boost your personal development, and work on your everyday\n          growth.\n        </p>\n        <div>\n          <div class=\"cta-btn-container\">\n            <button class=\"cta-btn\" @click=\"\">Join waiting list</button>\n            <p>Stay tuned for more info</p>\n          </div>\n        </div>\n      </section>\n\n      <div class=\"bottom-angle\"></div>\n    </div>\n    <div class=\"mental-fitness\">\n\n\n      <section class=\"intro\">\n        <h2>\n          What is <strong>Mental Fitness?</strong>\n        </h2>\n        <div class=\"section-content\">\n          <div class=\"deco\">\n            <p>\n              “…it’s a proactive process of taking care of our mental well-being and becoming the best version of\n              ourselves”\n            </p>\n          </div>\n          <div class=\"content\">\n            <p>\n              Mental health is often equated with the absence of mental illnesses or problems. However, mental health is\n              much more than just the absence of diseases. It's not an all-or-nothing state. It is a proactive process of\n              taking care of our mental well-being and becoming the best version of ourselves.\n            </p>\n            <p>\n              Mental fitness is not a one-time accomplishment or an end goal. Instead, it's a journey that we embark on\n              every day, and we can always improve. Just like physical fitness, it’s an ongoing process that requires\n              continuous effort and commitment.\n            </p>\n            <p>\n              By prioritizing our mental fitness, we can develop resilience, improve focus and productivity, enhance our\n              relationships with others, improve our performance, and overall have a more fulfilling life. Even when we\n              face constant and daily challenges in our lives.\n            </p>\n          </div>\n        </div>\n      </section>\n\n\n      <section class=\"why-intro\">\n        <h2><strong>Develop</strong> your mental skills</h2>\n        <p>\n          Personal growth is about leveling up and becoming the best version of yourself! It’s a journey of\n          self-improvement and honing your mental skills to unlock your true potential. It’s an investment in your\n          overall happiness and a vital ingredient for a balanced and fulfilling life.\n        </p>\n      </section>\n\n      <section class=\"why\">\n\n        <div class=\"text\">\n\n          <h3>Build your future path</h3>\n          <p>\n            Building your future path is a journey that begins with setting clear goals. By defining your aspirations and\n            envisioning the life you desire, you can pave the way for meaningful progress. Each step forward, aligned with\n            your goals, propels you closer to realizing your dreams and shaping a future that reflects your true\n            potential.\n          </p>\n\n          <h3>Get to know yourself better</h3>\n          <p>\n            When you take the time to truly understand yourself, magical things happen. No matter where you are in life or\n            what you do, self-awareness is about getting in tune with your own thoughts, emotions, and actions, which will\n            help you make wiser decisions that can make your relationships flourish, and positively impact every area of\n            your life.\n          </p>\n\n          <h3>Manage your emotions</h3>\n          <p>\n            Emotional intelligence is like having a superpower that lets you navigate your world of emotions. It’s about\n            being in tune with yourself, understanding and managing your own emotions, while also being able to empathize\n            with others. This incredible skill is amazing for building healthy relationships, both with yourself and those\n            around you.\n          </p>\n\n          <!-- <div class=\"cta-btn-container\">\n            <button class=\"cta-btn\" @click=\"\">Join our waiting list</button>\n            <p>Stay tuned for more info</p>\n          </div> -->\n        </div>\n\n        <img alt=\"Upotential Logo\" class=\"deco\" src=\"~@/assets/images/logo-deco.svg\" />\n\n      </section>\n\n\n      <section class=\"muscles\" id=\"muscles\">\n        <h2><strong>Training</strong> for all your mental needs</h2>\n        <p>\n          When training your body physically, you have different needs at different\n          times. Your mind is the same, and Upotential has made sure to cover all your\n          mental needs. We have mental fitness workouts from three different\n          categories, each one representing a key element of mental fitness: Mental\n          Energy, Mental Flexibility and Mental Strength.\n        </p>\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <img\n              alt=\"Upotential Mental Flexibility Icon. A vibrant cartoon perspective shot of an athlete in white tee-shirt and jogging shorts running towards the viewer.\"\n              src=\"~@/assets/images/musc-2.svg\" />\n            <h3><span class=\"black-highlight\">Mental Flexibility</span></h3>\n            <p>\n              Face your perspectives, learn to adapt and approach opportunities and\n              challenges from different angles – muscle up your growth mindset.\n            </p>\n          </div>\n          <div class=\"col-md-4\">\n            <img\n              alt=\"Upotential Mental Energy Icon. A vibrant cartoon image of a male figure sitting cross-legged, facing away from the viewer.\"\n              src=\"~@/assets/images/musc-1.svg\" />\n            <h3><span class=\"black-highlight\">Mental Energy</span></h3>\n            <p>\n              Recover and reload – go inward and connect your inner thoughts to your\n              core.\n            </p>\n          </div>\n          <div class=\"col-md-4\">\n            <img\n              alt=\"Upotential Mental Strength Icon. A vibrant cartoon image of a female figure leaping through the air, with a wide smile, her hair blowing in the wind.\"\n              src=\"~@/assets/images/musc-3.svg\" />\n            <h3><span class=\"black-highlight\">Mental Strength</span></h3>\n            <p>\n              Challenge yourself, your emotions, and your thoughts. Overcome mental\n              barriers and strengthen your resilience and grit.\n            </p>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"schedule\" id=\"mental-workouts\">\n        <div class=\"title-with-subtitle\">\n          <h2>\n            <span class=\"black-highlight\">Workouts this week</span>\n            <!-- <p>(Pick one and jump right in with a free workout!)</p> -->\n          </h2>\n        </div>\n      </section>\n\n      <WorkoutsThisWeek />\n\n      <section class=\"what-happens\">\n        <h2>What happens in a <strong>Mental Workout?</strong></h2>\n        <p>\n          Every workout is designed to help you train and develop your mental skills\n          and grow to the next level as a human being.\n        </p>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <div class=\"what-happens-item\">\n              <h3>On Demand Workouts</h3>\n              <p>\n                Train on your own by watching pre-recorded workouts whenever you like. In each workout you will\n                learn one science based mental fitness tools. Try different workouts to increase your toolset, and\n                repeat your favorites to refine your skills even further.\n              </p>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"what-happens-item\">\n              <h3>LIVE Workouts</h3>\n              <p>\n                Join LIVE online group workouts and be guided by certified Performance Trainer through a mental\n                fitness tool. The workouts include active thinking, journaling and human interaction.\n              </p>\n            </div>\n          </div>\n        </div>\n      </section>\n\n\n      <section class=\"selection-of-workouts\">\n        <h2>Selection of <strong>Mental Workouts</strong></h2>\n        <div class=\"workouts\">\n          <div @click=\"gotoWorkout(workout.id)\" :class=\"[workout.category.shortName]\"\n            class=\"workout workout-card levitate\" v-for=\"workout in pageState.workouts\" :key=\"workout.id\">\n            <div class=\"muscle-tag\">\n              <span class=\"icon-detail-type\" :class=\"[\n                `icon-type-${workout.category.shortName}`,\n              ]\">\n                <SvgIcon size=\"18\" :name=\"`${workout.category.shortName}-1`\" />\n              </span>\n              <span class=\"me-1\">{{\n                workout.category.name\n              }}</span>\n            </div>\n            <h3>{{ workout.title }}</h3>\n            <h4>{{ workout.subtitle }}</h4>\n            <p>{{ workout.description }}</p>\n            <button class=\"learn-more\">Learn more</button>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"faqs\">\n        <h2>Some frequently asked questions</h2>\n        <FAQs :FAQs=\"pageState.FAQs\"></FAQs>\n\n      </section>\n\n\n    </div>\n\n    <!-- <SignupForm /> -->\n\n  </div>\n\n  <Footer></Footer>\n</template>\n\n<script lang=\"ts\" setup>\n\nimport Footer from '@/components/Footer.vue';\nimport FAQs from '@/components/FAQs.vue';\nimport WorkoutsThisWeek from '@/components/WorkoutsThisWeek.vue';\nimport { ref } from 'vue';\nimport SvgIcon from '@/components/SvgIcon.vue';\nimport router from '@/router';\n\nconst pageState = ref({\n\n  workouts: [\n    {\n      id: 5,\n      title: 'Discover your life',\n      subtitle: 'Work-life balance',\n      description: 'Do you want to improve your work-life balance?',\n      category: {\n        shortName: 'MF',\n        name: 'Mental Flexibility',\n      },\n    },\n    {\n      id: 1,\n      title: 'Finding your \\'why\\'',\n      subtitle: 'Values',\n      description: 'Do you want to find out what’s truly valuable to you and understand what guides your journey in life?',\n      category: {\n        shortName: 'ME',\n        name: 'Mental Energy',\n      },\n    },\n    {\n      id: 12,\n      title: 'Overcome your mental barriers',\n      subtitle: 'Mental barriers',\n      description: 'Do you want to learn how you can twist your behaviors to overcome your mental barriers?',\n      category: {\n        shortName: 'MS',\n        name: 'Mental Strength',\n      },\n    },\n    {\n      id: 15,\n      title: 'Calm down and breathe',\n      subtitle: 'Breathing',\n      description: 'Do you want to take a break and connect with your breathing?',\n      category: {\n        shortName: 'ME',\n        name: 'Mental Energy',\n      },\n    },\n    {\n      id: 54,\n      title: 'Your special place',\n      subtitle: 'Visualization',\n      description: 'Do you want to learn how you can use guided imagery to reduce stress and anxiety, promote relaxation, and improve focus and mental clarity?',\n      category: {\n        shortName: 'ME',\n        name: 'Mental Energy',\n      },\n    },\n    {\n      id: 2,\n      title: 'Explore your attitudes',\n      subtitle: 'Core beliefs',\n      description: 'Do you want to explore how your beliefs have changed over time, and decide what beliefs you want to have moving on?',\n      category: {\n        shortName: 'MF',\n        name: 'Mental Flexibility',\n      },\n    },\n    {\n      id: 3,\n      title: 'Pep yourself up!',\n      subtitle: 'Self-talk',\n      description: 'Do you want to develop a productive way of thinking to deal with your self-talk?',\n      category: {\n        shortName: 'MS',\n        name: 'Mental Strength',\n      },\n    },\n    {\n      id: 7,\n      title: 'Sharpen up your message',\n      subtitle: 'Communication',\n      description: 'Do you want to learn how to communicate better and make yourself understood?',\n      category: {\n        shortName: 'MF',\n        name: 'Mental Flexibility',\n      },\n    },\n    {\n      id: 10,\n      title: 'Dream Big 1.0',\n      subtitle: 'Life vision',\n      description: 'Do you want to dive into your dream, create a first draft of it, and create an overall plan on how to get there?',\n      category: {\n        shortName: 'ME',\n        name: 'Mental Energy',\n      },\n    },\n    {\n      id: 6,\n      title: 'Get clear on your goals',\n      subtitle: 'Goals',\n      description: 'Do you want to get a deeper understanding of one of your goals and what you need to make it a reality?',\n      category: {\n        shortName: 'MF',\n        name: 'Mental Flexibility',\n      },\n    },\n    {\n      id: 65,\n      title: 'Thank you!',\n      subtitle: 'Gratitude',\n      description: 'Do you want to practice gratitude and discover how it can help you enhance your overall mental well-being?',\n      category: {\n        shortName: 'ME',\n        name: 'Mental Energy',\n      },\n    },\n    {\n      id: 13,\n      title: 'Can you feel it?',\n      subtitle: 'Emotions',\n      description: 'Do you want to become more self-aware and learn how to identify, recognize and understand your feelings better?',\n      category: {\n        shortName: 'MS',\n        name: 'Mental Strength',\n      },\n    },\n\n\n  ],\n\n  FAQs: [\n    // {\n    //   question: 'How much does it cost to be a member at Upotential?',\n    //   answer: '<p>Membership costs €95 per month. You can train as much as you want, and cancel your subscription whenever you like.</p>'\n    // },\n    {\n      question: 'How can I benefit from training my mental skills?',\n      answer: '<p>By prioritizing your mental fitness, you can develop resilience, improve focus and productivity, enhance your relationships with others, improve your performance, and overall have a more fulfilling life.</p>'\n    }, {\n      question: 'Does mental fitness training work?',\n      answer: '<p>Our mental athletes think so! Read what they had to say <a href=\"/#reviews\">here</a>.</p>'\n    }, {\n      question: 'How often should I train?',\n      answer: '<p>We recommend that you train on a regular basis. One workout per week will take you far.</p>'\n    }\n  ]\n\n\n\n});\n\nconst gotoWorkout = (id: number) => {\n  router.push(`/workout/${id}`);\n};\n\n\n\n</script>\n\n<style lang=\"scss\" scoped>\np {\n  max-width: 800px;\n  margin-bottom: 30px;\n}\n\nh1 {\n  font-size: 50px !important;\n}\n\nh2 {\n  font-size: 36px;\n\n  strong {\n    clear: both;\n    display: block;\n    font-size: 48px;\n  }\n}\n\n.header {\n  background-image: url(../assets/images/mental-fitness-header.jpg);\n  background-position: center;\n\n  .header-contents {\n    color: black;\n  }\n}\n\n.workout {\n  flex-basis: 30%;\n  background-color: pink;\n  padding: 22px;\n\n  h3 {\n    font-size: 24px;\n    margin-bottom: 10px;\n  }\n\n  h4 {\n    text-transform: uppercase;\n    font-size: 14px;\n  }\n\n  p {\n    font-size: 16px;\n  }\n}\n\n.workout-card:hover .learn-more {\n  background-color: #fff;\n  color: #000;\n  box-shadow: #000 0px 0px 0px 1px inset, #000 0px 0px 0px 0px;\n  transform: translateY(3px);\n}\n\n.workout-card.ME {\n  background-color: #e8f2fb;\n\n  h3,\n  h4,\n  h5,\n  .workout-info-row {\n    color: #00219b;\n  }\n\n  .workout-book-button {\n    background-color: #00219b;\n  }\n}\n\n.workout-card.MF {\n  background-color: #ffe3db;\n\n  h3,\n  h4,\n  h5,\n  .workout-info-row {\n    color: #cc2d00;\n  }\n\n  .workout-book-button {\n    background-color: #ff4611;\n  }\n}\n\n.workout-card.MS {\n  background-color: #c4f5e9;\n\n  h3,\n  h4,\n  h5,\n  .workout-info-row {\n    color: #045caf;\n  }\n\n  .workout-book-button {\n    background-color: #3edeb6;\n  }\n}\n\n.workout-card.UK,\n.workout-card.CC {\n  display: none;\n}\n\n.workout-card {\n  padding-bottom: 60px;\n}\n\n.muscle-tag {\n  display: flex;\n  align-items: center;\n  margin-bottom: 7px;\n\n  .icon-detail-type {\n    margin-right: 7px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n  }\n}\n\n.learn-more {\n  background-color: #000;\n  color: #fff;\n  padding: 10px 20px;\n  border-radius: 5px;\n  font-size: 16px;\n  font-weight: bold;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: #000 0px 0px 0px 2px inset, #000 0px 3px 0px 0px;\n  transform: translateY(0px);\n  position: absolute;\n  bottom: 22px;\n  left: 20px;\n}\n\n.workouts {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 30px 1px;\n  flex-direction: row;\n}\n\n\nbutton,\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"tel\"] {\n  all: unset;\n}\n\n// checkbox input\ninput[type=\"checkbox\"] {\n  margin-right: 5px;\n  border: 1px solid #000;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.header-contents {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n}\n\n\n.intro .section-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: stretch;\n\n  margin-bottom: 50px;\n\n  .deco {\n    // width: 55%;\n    // height: 300px;\n    background-color: #000;\n    // border-radius: 5px;\n    margin-left: calc(50% - 50vw);\n    // margin-right: calc(50% - 50vw);\n    // padding-left: calc(35vw - 200px);\n    padding-right: 30px;\n    color: white;\n    // align-self: center;\n\n    display: flex;\n    flex: 1;\n    justify-content: flex-end;\n\n    p {\n      align-self: center;\n      font-size: 30px;\n      font-family: SharpGroteskSm;\n      font-weight: bold;\n      max-width: 550px;\n      // margin: auto;\n    }\n  }\n\n  .content {\n    width: 45%;\n    padding: 0 20px;\n  }\n}\n\n.why-intro {\n  margin-top: 70px;\n}\n\n.why {\n  margin-top: 35px;\n  position: relative;\n\n  .deco {\n    // display: none;\n    position: absolute;\n    right: calc(70% + 100px);\n    top: -10px;\n    height: auto;\n    width: min(30vw, 533px);\n  }\n\n  .text {\n    padding-left: 25%;\n  }\n\n  h3 {\n    margin-top: 30px;\n  }\n\n  .cta-btn {\n    margin-top: 25px;\n  }\n}\n\n\nsection.muscles {\n  margin-top: 100px;\n  margin-bottom: 70px;\n\n  img {\n    padding: 10px;\n  }\n}\n\ndiv.muscles {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  width: 100%;\n\n}\n\n.what-happens {\n  display: block;\n  margin-top: 100px;\n  margin-bottom: 70px;\n\n  h3 {\n    display: block;\n    background-color: black;\n    font-size: 30px;\n    color: white;\n    text-align: center;\n    font-weight: normal;\n    padding: 28px 10px;\n    margin-top: 20px;\n  }\n}\n\n.what-happens-item {\n  display: block;\n  width: 90%;\n}\n\n\n// todo move to app.vue\n.cta-btn {\n  text-shadow: none;\n  margin-bottom: 10px;\n  background-color: #fff;\n  color: #000;\n  padding: 15px 25px;\n  border-radius: 5px;\n  font-size: 24px;\n  font-weight: bold;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: #000 0px 0px 0px 2px inset, #000 0px 3px 0px 0px;\n  transform: translateY(0px);\n\n  &:hover {\n    background-color: #000;\n    color: #fff;\n    box-shadow: #000 0px 0px 0px 1px inset, #000 0px 0px 0px 0px;\n    transform: translateY(3px);\n  }\n\n  &.mini {\n    padding: 10px 20px;\n    font-size: 18px;\n  }\n\n}\n\n.cta-btn-container {\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 250px;\n\n  p {\n    font-size: 14px;\n    font-weight: bold;\n    margin: 0;\n  }\n}\n\n\n\n\n\n\n\n.faqs {\n  padding: 0 5vw;\n  margin-bottom: 80px;\n\n  h2 {\n    font-size: 30px;\n    font-family: SharpGrotesk;\n    margin-top: 100px;\n  }\n}\n\n\n\n\n\n@media (max-width: 1150px) {\n\n\n  h2 {\n    font-size: 35px;\n    margin-bottom: 28px;\n  }\n\n  .why {\n\n    h2,\n    p {\n      // width: 100%;\n      margin-left: 0px;\n    }\n\n    .deco {\n      display: none;\n      position: relative;\n      right: auto;\n      width: 80%;\n      margin: 0 auto;\n    }\n\n    .text {\n      padding-left: 0px;\n    }\n  }\n\n  div.muscles {\n    flex-direction: column;\n  }\n}\n\n\n\n@media (max-width: 800px) {\n\n  h2 {\n    font-size: 22px;\n\n    strong {\n      clear: both;\n      display: block;\n      font-size: 28px;\n    }\n  }\n\n  .header {\n    background-position: left center;\n  }\n\n\n  .cta-btn {\n    font-size: 20px;\n  }\n\n  section.muscles {\n    img {\n      width: 80%;\n      margin: 0 auto;\n    }\n  }\n\n  .workout {\n    flex-basis: 100%;\n  }\n\n  .intro .section-content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 50px;\n\n    .deco {\n      width: 100%;\n      height: 300px;\n      background-color: #000;\n      margin-bottom: 20px;\n\n      p {\n        font-size: 20px;\n        padding: 20px;\n        margin: 0;\n      }\n    }\n\n    .content {\n      width: 100%;\n      padding: 0px;\n    }\n  }\n\n\n}\n</style>\n"],"names":["pageState","reactive","questionAnswers","watch","props","FAQs","newVal","map","qa","index","id","question","answer","immediate","userStore","useUserStore","schedule","computed","getSchedule","getWorkoutCat","catCode","formatDate","day","dayjs","local","startOf","format","today","tomorrow","Date","setDate","getDate","getStartTime","scheduled_time","dt_from","setHours","getHours","toLocaleString","hour","minute","ref","workouts","title","subtitle","description","category","shortName","name","router","push"],"mappings":"26BA6BMA,EAMFC,EAAS,CACXC,gBAAiB,YAGnBC,GACE,IAAMC,EAAMC,OACXC,IACCN,EAAUE,gBAAkBI,EAAOC,KAAI,CAACC,EAA0CC,KACzE,CACLC,GAAID,EACJE,SAAUH,EAAGG,SACbC,OAAQJ,EAAGI,aAIjB,CAAEC,WAAW,2vBCZf,MAAMC,EAAYC,IAEZC,EAAgBC,GAAS,IACtBH,EAAUI,cAebC,EAAiBC,IACb,OAAAA,GACD,IAAA,KACI,MAAA,qBACJ,IAAA,KACI,MAAA,gBACJ,IAAA,KACI,MAAA,kBACJ,IAAA,KACI,MAAA,sBAGPC,EAAcC,IAGZA,EAAAC,EAAMD,GAAKE,QAAQC,QAAQ,OAAOC,SAClC,MAAAC,EAAQJ,IAAQC,QAAQC,QAAQ,OAAOC,SACzC,IAAAE,EAA0B,IAAIC,KAIlC,OAHAD,EAASE,QAAQF,EAASG,UAAY,GAC3BH,EAAAL,EAAMK,GAAUJ,QAAQC,QAAQ,OAAOC,SAE9CJ,IAAQK,EACH,QAGLL,IAAQM,EACH,WAEFL,EAAMD,GAAKI,OAAO,SAKrBM,EAAgBC,IACd,MAAAC,EAAU,IAAIL,KAAKI,GACjBC,EAAAC,SAASD,EAAQE,YAMlB,OALQF,EAAQG,eAAe,QAAS,CAC7CC,KAAM,UACNC,OAAQ,6tPC6IZ,MAAMvC,EAAYwC,EAAI,CAEpBC,SAAU,CACR,CACE/B,GAAI,EACJgC,MAAO,qBACPC,SAAU,oBACVC,YAAa,iDACbC,SAAU,CACRC,UAAW,KACXC,KAAM,uBAGV,CACErC,GAAI,EACJgC,MAAO,qBACPC,SAAU,SACVC,YAAa,wGACbC,SAAU,CACRC,UAAW,KACXC,KAAM,kBAGV,CACErC,GAAI,GACJgC,MAAO,gCACPC,SAAU,kBACVC,YAAa,0FACbC,SAAU,CACRC,UAAW,KACXC,KAAM,oBAGV,CACErC,GAAI,GACJgC,MAAO,wBACPC,SAAU,YACVC,YAAa,+DACbC,SAAU,CACRC,UAAW,KACXC,KAAM,kBAGV,CACErC,GAAI,GACJgC,MAAO,qBACPC,SAAU,gBACVC,YAAa,8IACbC,SAAU,CACRC,UAAW,KACXC,KAAM,kBAGV,CACErC,GAAI,EACJgC,MAAO,yBACPC,SAAU,eACVC,YAAa,sHACbC,SAAU,CACRC,UAAW,KACXC,KAAM,uBAGV,CACErC,GAAI,EACJgC,MAAO,mBACPC,SAAU,YACVC,YAAa,mFACbC,SAAU,CACRC,UAAW,KACXC,KAAM,oBAGV,CACErC,GAAI,EACJgC,MAAO,0BACPC,SAAU,gBACVC,YAAa,+EACbC,SAAU,CACRC,UAAW,KACXC,KAAM,uBAGV,CACErC,GAAI,GACJgC,MAAO,gBACPC,SAAU,cACVC,YAAa,mHACbC,SAAU,CACRC,UAAW,KACXC,KAAM,kBAGV,CACErC,GAAI,EACJgC,MAAO,0BACPC,SAAU,QACVC,YAAa,yGACbC,SAAU,CACRC,UAAW,KACXC,KAAM,uBAGV,CACErC,GAAI,GACJgC,MAAO,aACPC,SAAU,YACVC,YAAa,6GACbC,SAAU,CACRC,UAAW,KACXC,KAAM,kBAGV,CACErC,GAAI,GACJgC,MAAO,mBACPC,SAAU,WACVC,YAAa,kHACbC,SAAU,CACRC,UAAW,KACXC,KAAM,qBAOZ1C,KAAM,CAKJ,CACEM,SAAU,oDACVC,OAAQ,sNACP,CACDD,SAAU,qCACVC,OAAQ,gGACP,CACDD,SAAU,4BACVC,OAAQ,yZAQOF,YACZsC,EAAAC,KAAK,YAAYvC,KADN,IAACA"}