{"version":3,"file":"HowMiobWorks-AkYH7TmN.js","sources":["../../../resources/css/images/bg/how_works/mobile_card_1.png?w=410","../../../resources/css/images/bg/how_works/card_1.png?w=747","../../../resources/css/images/bg/how_works/card_2.png?w=747","../../../resources/css/images/bg/how_works/card_3.png?w=747","../../../resources/landing/Pages/Home/Sections/HowMiobWorks.vue","../../../resources/css/images/bg/how_works/card_1.png?format=webp","../../../resources/css/images/bg/how_works/card_1.png?w=747&format=webp","../../../resources/css/images/bg/how_works/card_1.png","../../../resources/css/images/bg/how_works/mobile_card_1.png?w=8200&format=webp","../../../resources/css/images/bg/how_works/mobile_card_1.png?w=410&format=webp","../../../resources/css/images/bg/how_works/mobile_card_1.png?w=8200","../../../resources/css/images/bg/how_works/card_2.png?format=webp","../../../resources/css/images/bg/how_works/card_2.png?w=747&format=webp","../../../resources/css/images/bg/how_works/card_2.png","../../../resources/css/images/bg/how_works/mobile_card_2.png?w=820&format=webp","../../../resources/css/images/bg/how_works/mobile_card_2.png?w=410&format=webp","../../../resources/css/images/bg/how_works/mobile_card_2.png?w=820","../../../resources/css/images/bg/how_works/mobile_card_2.png?w=410","../../../resources/css/images/bg/how_works/card_3.png?format=webp","../../../resources/css/images/bg/how_works/card_3.png?w=747&format=webp","../../../resources/css/images/bg/how_works/card_3.png","../../../resources/css/images/bg/how_works/mobile_card_3.png?w=820&format=webp","../../../resources/css/images/bg/how_works/mobile_card_3.png?w=410&format=webp","../../../resources/css/images/bg/how_works/mobile_card_3.png?w=820","../../../resources/css/images/bg/how_works/mobile_card_3.png?w=410"],"sourcesContent":["export default \"__VITE_ASSET__DeerGqyy__\";","export default \"__VITE_ASSET__CbRc1Z9k__\";","export default \"__VITE_ASSET__lFfi0vph__\";","export default \"__VITE_ASSET__9zNynCqC__\";","<script setup>\nimport {ref} from \"vue\";\nimport {useWindowSize} from \"@vueuse/core\";\nimport ArrowIcon from \"@/Components/Icons/Home/ArrowIcon.vue\";\nimport Button from \"@/Components/Buttons/Button.vue\";\n\nimport Card1ImageSm from '@images/bg/how_works/mobile_card_1.png?w=410';\nimport Card1ImageSmWebp from '@images/bg/how_works/mobile_card_1.png?w=410&format=webp';\nimport Card1Image from '@images/bg/how_works/card_1.png?w=747';\nimport Card1ImageWebp from '@images/bg/how_works/card_1.png?w=747&format=webp';\n\nimport Card1ImageSm2x from '@images/bg/how_works/mobile_card_1.png?w=8200';\nimport Card1ImageSmWebp2x from '@images/bg/how_works/mobile_card_1.png?w=8200&format=webp';\nimport Card1Image2x from '@images/bg/how_works/card_1.png';\nimport Card1ImageWebp2x from '@images/bg/how_works/card_1.png?format=webp';\n\nimport Card2ImageSm from '@images/bg/how_works/mobile_card_2.png?w=410';\nimport Card2ImageSmWebp from '@images/bg/how_works/mobile_card_2.png?w=410&format=webp';\nimport Card2Image from '@images/bg/how_works/card_2.png?w=747';\nimport Card2ImageWebp from '@images/bg/how_works/card_2.png?w=747&format=webp';\n\nimport Card2ImageSm2x from '@images/bg/how_works/mobile_card_2.png?w=820';\nimport Card2ImageSmWebp2x from '@images/bg/how_works/mobile_card_2.png?w=820&format=webp';\nimport Card2Image2x from '@images/bg/how_works/card_2.png';\nimport Card2ImageWebp2x from '@images/bg/how_works/card_2.png?format=webp';\n\nimport Card3ImageSm from '@images/bg/how_works/mobile_card_3.png?w=410';\nimport Card3ImageSmWebp from '@images/bg/how_works/mobile_card_3.png?w=410&format=webp';\nimport Card3Image from '@images/bg/how_works/card_3.png?w=747';\nimport Card3ImageWebp from '@images/bg/how_works/card_3.png?w=747&format=webp';\n\nimport Card3ImageSm2x from '@images/bg/how_works/mobile_card_3.png?w=820';\nimport Card3ImageSmWebp2x from '@images/bg/how_works/mobile_card_3.png?w=820&format=webp';\nimport Card3Image2x from '@images/bg/how_works/card_3.png';\nimport Card3ImageWebp2x from '@images/bg/how_works/card_3.png?format=webp';\n\nconst {width} = useWindowSize(),\n  tabs = ref([\n    {id: 1, title: `Fill a <br class=\"md:hidden\"/>brief`},\n    {id: 2, title: `Check <br class=\"md:hidden\"/>Content`},\n    {id: 3, title: `Launch <br class=\"md:hidden\"/>in 1 click`},\n  ]),\n  activeTabId = ref(tabs.value[0].id);\n\nconst selectTab = (id) => {\n  activeTabId.value = id;\n};\n\n</script>\n\n<template>\n  <section class=\"container pt-14 pb-8 lg:py-16 mx-auto\">\n    <div class=\"grid grid-cols-12 gap-8 lg:gap-20\">\n      <div class=\"col-span-12 md:col-span-5 md:flex md:flex-col md:justify-center text-grey-900\">\n        <h2 class=\"font-semibold text-4xl xl:text-[56px] max-md:text-center pb-3 xl:pb-4\">\n          How Miob Works\n        </h2>\n\n        <p class=\"text-lg xl:text-[32px] leading-snug xl:leading-[38px] max-md:text-center\">\n          In 3 simple steps\n        </p>\n\n        <div class=\"max-md:px-3 mt-6 md:my-8 xl:my-[42px]\">\n          <ul class=\"flex gap-1 max-md:justify-around md:flex-col\">\n            <li\n              v-for=\"tab in tabs\"\n              :key=\"tab.id\"\n              class=\"\n                                group flex items-center w-full rounded-[30px] md:rounded-2xl font-bold hover:bg-white\n                                hover:shadow-custom hover:opacity-85 cursor-pointer py-1 px-2.5 sm:py-3 sm:px-4 xl:p-6\n                            \"\n              :class=\"{'active bg-white shadow-custom !opacity-100': activeTabId === tab.id}\"\n              @click=\"selectTab(tab.id)\"\n            >\n                            <span\n                              class=\"\n                                    flex items-center justify-center h-6 min-w-6 xl:h-12 xl:min-w-12 rounded-full\n                                    text-white text-xs xl:text-2xl bg-indigo-200 group-hover:bg-indigo-600\n                                    group-[.active]:bg-indigo-600 mr-2 sm:mr-3\n                                \"\n                            >\n                                {{ tab.id }}\n                            </span>\n              <span\n                class=\"text-sm leading-tight xl:text-2xl text-grey-800\"\n                v-html=\"tab.title\"\n              ></span>\n            </li>\n          </ul>\n        </div>\n\n        <div\n          v-if=\"width >= 768\"\n          class=\"w-auto\"\n        >\n          <Button\n            :href=\"route('register')\"\n            aria-label=\"Go to registration\"\n            external-link\n            lg\n          >\n            Try for Free\n            <ArrowIcon class=\"fill-white\"/>\n          </Button>\n        </div>\n      </div>\n\n      <div class=\"col-span-12 md:col-span-7 md:flex md:flex-col md:justify-center\">\n        <picture v-if=\"activeTabId === 1\">\n          <source\n            :srcset=\"`${Card1ImageWebp2x} 2x, ${Card1ImageWebp} 1x`\"\n            type=\"image/webp\"\n            media=\"(min-width: 768px)\"\n          >\n          <source\n            :srcset=\"`${Card1Image2x} 2x, ${Card1Image} 1x`\"\n            type=\"image/png\"\n            media=\"(min-width: 768px)\"\n          >\n          <source\n            :srcset=\"`${Card1ImageSmWebp2x} 2x, ${Card1ImageSmWebp} 1x`\"\n            type=\"image/webp\"\n          >\n          <source\n            :srcset=\"`${Card1ImageSm2x} 2x, ${Card1ImageSm} 1x`\"\n            type=\"image/png\"\n          >\n          <img\n            :src=\"Card1Image\"\n            width=\"747\"\n            height=\"592\"\n            loading=\"lazy\"\n            alt=\"How Miob works mobile image\"\n            class=\"h-auto w-full\"\n          >\n        </picture>\n\n        <picture v-else-if=\"activeTabId === 2\">\n          <source\n            :srcset=\"`${Card2ImageWebp2x} 2x, ${Card2ImageWebp} 1x`\"\n            type=\"image/webp\"\n            media=\"(min-width: 768px)\"\n          >\n          <source\n            :srcset=\"`${Card2Image2x} 2x, ${Card2Image} 1x`\"\n            type=\"image/png\"\n            media=\"(min-width: 768px)\"\n          >\n          <source\n            :srcset=\"`${Card2ImageSmWebp2x} 2x, ${Card2ImageSmWebp} 1x`\"\n            type=\"image/webp\"\n          >\n          <source\n            :srcset=\"`${Card2ImageSm2x} 2x, ${Card2ImageSm} 1x`\"\n            type=\"image/png\"\n          >\n          <img\n            :src=\"Card2Image\"\n            width=\"747\"\n            height=\"592\"\n            loading=\"lazy\"\n            alt=\"How Miob works mobile image\"\n            class=\"h-auto w-full\"\n          >\n        </picture>\n\n        <picture v-else-if=\"activeTabId === 3\">\n          <source\n            :srcset=\"`${Card3ImageWebp2x} 2x, ${Card3ImageWebp} 1x`\"\n            type=\"image/webp\"\n            media=\"(min-width: 768px)\"\n          >\n          <source\n            :srcset=\"`${Card3Image2x} 2x, ${Card3Image} 1x`\"\n            type=\"image/png\"\n            media=\"(min-width: 768px)\"\n          >\n          <source\n            :srcset=\"`${Card3ImageSmWebp2x} 2x, ${Card3ImageSmWebp} 1x`\"\n            type=\"image/webp\"\n          >\n          <source\n            :srcset=\"`${Card3ImageSm2x} 2x, ${Card3ImageSm} 1x`\"\n            type=\"image/png\"\n          >\n          <img\n            :src=\"Card3Image\"\n            width=\"747\"\n            height=\"592\"\n            loading=\"lazy\"\n            alt=\"How Miob works mobile image\"\n            class=\"h-auto w-full\"\n          >\n        </picture>\n\n        <div\n          v-if=\"width < 768\"\n          class=\"flex justify-center mt-8\"\n        >\n          <Button\n            :href=\"route('register')\"\n            aria-label=\"Go to registration\"\n            external-link\n            lg\n          >\n            Try for Free\n            <ArrowIcon class=\"fill-white\"/>\n          </Button>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n","export default \"__VITE_ASSET__wUFQB$nK__\";","export default \"__VITE_ASSET__CrJ4ZqX3__\";","export default \"__VITE_ASSET__D4FMNzO9__\"","export default \"__VITE_ASSET__DQ5xQGOW__\";","export default \"__VITE_ASSET__X6pFzkAa__\";","export default \"__VITE_ASSET__1qttrKTN__\";","export default \"__VITE_ASSET__c_U72kmm__\";","export default \"__VITE_ASSET__BRNlqImS__\";","export default \"__VITE_ASSET__Ccr4bzF0__\"","export default \"__VITE_ASSET__CJbfsxjJ__\";","export default \"__VITE_ASSET__BrmzmNf5__\";","export default \"__VITE_ASSET__CYBIEPP2__\";","export default \"__VITE_ASSET__CCJGN1xI__\";","export default \"__VITE_ASSET__HsbUlZmK__\";","export default \"__VITE_ASSET__Cs_zN69J__\";","export default \"__VITE_ASSET__D_CIzFdZ__\"","export default \"__VITE_ASSET__CGKHYiBe__\";","export default \"__VITE_ASSET__DjL2OPrE__\";","export default \"__VITE_ASSET__BjQJ9al8__\";","export default \"__VITE_ASSET__o_XCV1Ws__\";"],"names":["Card1Image","Card2Image","Card3Image","width","useWindowSize","tabs","ref","id","title","activeTabId","value"],"mappings":"+pCAAA,MCAAA,EAAe,oCCAfC,EAAe,oCCAfC,EAAe,67BCoCf,MAAMC,MAACA,GAASC,IACdC,EAAOC,EAAI,CACT,CAACC,GAAI,EAAGC,MAAO,uCACf,CAACD,GAAI,EAAGC,MAAO,wCACf,CAACD,GAAI,EAAGC,MAAO,8CAEjBC,EAAcH,EAAID,EAAKK,MAAM,GAAGH,0oBAEfA,YACjBE,EAAYC,MAAQH,GADJ,IAACA,0bC5CJ,wDCAA,oICAA,uJCAA,+DCAA,gHCAA,8DVAA,8QWAA,wDCAA,oICAA,uJCAA,+DCAA,gHCAA,8DCAA,8QCAA,wDCAA,oICAA,uJCAA,+DCAA,gHCAA,8DCAA"}