{"version":3,"file":"BiPdDIqc.js","sources":["../../../../components/TheBanner.vue","../../../../node_modules/nuxt/dist/app/compat/interval.js","../../../../stores/home/results.ts","../../../../components/home/AchievedResults.vue"],"sourcesContent":["<template>\n  <section role=\"banner\" class=\"banner-section\" id=\"banner\">\n    <div class=\"banner-content\">\n      <slot name=\"title\">\n        <h1 v-if=\"titleContent\" class=\"banner-title\">{{ titleContent }}</h1>\n      </slot>\n      <slot name=\"text\">\n        <h4 v-if=\"textContent\" class=\"banner-text\">\n          {{ textContent }}\n        </h4>\n      </slot>\n      <v-btn class=\"default-button banner-button\" color=\"primary\" type=\"button\" @click=\"buttonClicked\">\n        {{ buttonText ?? 'Saiba mais' }}\n      </v-btn>\n    </div>\n    <ThePicture :mobilePath=\"mobileImage\" :tabletPath=\"tabletImage ? tabletImage : false\" :desktopPath=\"desktopImage\"\n      :mobileQuerie=\"mobileQuerie ? mobileQuerie : '833px'\" :desktopQuerie=\"desktopQuerie ? desktopQuerie : '834px'\"\n      :altText=\"imageAlt\" />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { VBtn } from 'vuetify/components'\nconst emit = defineEmits([\"button-clicked\"])\n\ndefineProps<{\n  mobileImage: string,\n  tabletImage?: string,\n  desktopImage: string,\n  imageAlt: string,\n  titleContent?: string,\n  textContent?: string,\n  buttonText?: string,\n  mobileQuerie?: string,\n  desktopQuerie?: string,\n}>()\n\nconst buttonClicked = () => emit(\"button-clicked\");\n</script>\n\n<style lang=\"scss\">\n.banner-section {\n  display: flex;\n  display: -webkit-flex;\n  flex-direction: column;\n  padding: 54px 20px 26px;\n  text-align: center;\n\n  .banner-content {\n\n    .banner-title {\n      margin-bottom: 24px;\n    }\n\n    .banner-text {\n      max-width: 400px;\n      margin: 0px auto 24px;\n    }\n\n    .banner-button {\n      margin-bottom: 36px;\n    }\n  }\n\n  .image-component img {\n    width: 320px;\n    height: 342px;\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: cover;\n  }\n\n  @media screen and (min-width: 834px) and (max-width: 959px) {\n    justify-content: space-evenly;\n    column-gap: 27px;\n\n    .banner-content .banner-text {\n      width: 372px;\n    }\n\n    .image-component img {\n      width: 100%;\n    }\n  }\n\n  @media screen and (min-width: 834px) and (max-width: 1199px) {\n    padding: 34px 30px 36px;\n\n    .banner-content {\n\n      .banner-title {\n        margin-bottom: 16px;\n      }\n\n      .banner-button {\n        margin-bottom: 0px;\n        padding: 15px 27px;\n      }\n    }\n\n    .image-component img {\n      width: 370px;\n      height: 396px;\n      vertical-align: text-top;\n    }\n  }\n\n  @media screen and (min-width: 960px) and (max-width: 1199px) {\n    column-gap: 77px;\n  }\n\n  @media screen and (min-width: 834px) {\n    align-items: center;\n    flex-direction: row;\n    text-align: start;\n\n    .banner-content {\n      .banner-text {\n        margin: 0px 0px 24px;\n      }\n    }\n  }\n\n  @media screen and (min-width: 960px) {\n    max-width: 1169px;\n    justify-content: flex-start;\n  }\n\n  @media screen and (min-width: 1024px) {\n    .image-component {\n      margin-right: 130px;\n    }\n  }\n\n  @media screen and (min-width: 1200px) {\n    padding: 30px 0px 58px;\n    column-gap: 170px;\n\n    .banner-content {\n\n      .banner-title,\n      .banner-text {\n        margin-bottom: 28px;\n      }\n\n      .banner-text {\n        width: 400px;\n      }\n    }\n\n    .image-component img {\n      width: 434px;\n      height: 464px;\n    }\n  }\n}\n</style>","import { createError } from \"../composables/error.js\";\nconst intervalError = \"[nuxt] `setInterval` should not be used on the server. Consider wrapping it with an `onNuxtReady`, `onBeforeMount` or `onMounted` lifecycle hook, or ensure you only call it in the browser by checking `import.meta.client`.\";\nexport const setInterval = import.meta.client ? window.setInterval : () => {\n  if (import.meta.dev) {\n    throw createError({\n      statusCode: 500,\n      message: intervalError\n    });\n  }\n  console.error(intervalError);\n};\n","\nimport { defineStore } from 'pinia'\n\nexport const useResultsStore = defineStore('resultsStore', {\n  state: () => ({\n    metricNumbers: [\n      {\n        id: 1,\n        mediaSrc: \"mdi-account-outline\",\n        prefix: \"+ \",\n        value: 560,\n        sufix: \" mil\",\n        startValue: 0,\n        text: \"clientes atendidos\"\n      },\n      {\n        id: 2,\n        mediaSrc: \"mdi-message-text-outline\",\n        prefix: \"+ de \",\n        value: 8,\n        sufix: \"MM\",\n        startValue: 0,\n        text: \"SMS enviados\"\n      },\n      {\n        id: 3,\n        mediaSrc: \"mdi-email-outline\",\n        prefix: \"+ de \",\n        value: 3,\n        sufix: \"MM\",\n        startValue: 0,\n        text: \"e-mails disparados\"\n      },\n      {\n        id: 4,\n        mediaSrc: \"/icons/iconMoney.svg\",\n        mediaType: \"svg\",\n        prefix: \"+ de \",\n        value: 2,\n        sufix: \"MM\",\n        startValue: 0,\n        text: \"pagamentos efetuados\"\n      },\n    ] as Array<AutoNumberCardItem>\n  }),\n\n  getters: {\n    getMetricNumbers: (state) => state.metricNumbers,\n  },\n})","<template>\n  <section\n    role=\"region\"\n    class=\"achieved-results-section\"\n    id=\"achieved-results\"\n    ref=\"achievedResultsSection\"\n  >\n    <TheCard v-for=\"item in metricNumbers\" :key=\"item.id\">\n      <template #out-of-box>\n        <div class=\"outline-circle\">\n          <TheIcon\n            :icon=\"`${item.mediaSrc}`\"\n            :size=\"36\"\n            :type=\"item.mediaType ?? ''\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <h2 ref=\"increaseNumber\">\n          {{ item.prefix + item.startValue + item.sufix }}\n        </h2>\n        <h3>{{ item.text }}</h3>\n      </template>\n    </TheCard>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useResultsStore } from \"@/stores/home/results\";\n\nconst store = useResultsStore();\nconst metricNumbers = store.getMetricNumbers;\n\nconst achievedResultsSection = ref<any>(null);\nconst startedCount = ref<Boolean>(false);\n\nconst startCount = (dataItem: AutoNumberCardItem) => {\n  let count = setInterval(() => {\n    dataItem.startValue++;\n    if (dataItem.startValue >= dataItem.value) {\n      clearInterval(count);\n    }\n  }, 750 / dataItem.value);\n};\n\nconst AchievedResultsWatcher = () => {\n  var section = achievedResultsSection.value;\n  var array = [...metricNumbers];\n  if (\n    window.scrollY + section.offsetHeight >=\n    section.offsetTop - section.offsetHeight\n  ) {\n    if (!startedCount.value) {\n      array.forEach((metric: AutoNumberCardItem) => startCount(metric));\n    }\n    startedCount.value = true;\n    window.removeEventListener(\"scroll\", AchievedResultsWatcher);\n  }\n};\n\nonMounted(() => {\n  window.addEventListener(\"scroll\", AchievedResultsWatcher, { passive: true });\n});\n\nonBeforeUnmount(() => {\n  window.removeEventListener(\"scroll\", AchievedResultsWatcher);\n});\n</script>\n\n<style lang=\"scss\">\n@import \"@/styles/variables\";\n\n.achieved-results-section {\n  max-width: none;\n  background-image: url(@/assets/images/home/how-it-works/bg-square-mobile.png);\n  background-repeat: repeat;\n  background-position: center top;\n  display: grid;\n  row-gap: 61px;\n  padding: 75px 20px 40px;\n  border-top: 2px solid $blue;\n  border-bottom: 2px solid $blue;\n\n  .default-card {\n    overflow: unset;\n    justify-content: flex-end;\n    width: 320px;\n    height: 161px;\n    border: 2px solid $blue;\n    padding: 51px 0px 24px;\n\n    .outline-circle {\n      margin-top: -36px;\n      background-color: $blue;\n      color: $white;\n      border-radius: 50%;\n      width: 72px;\n      height: 72px;\n      display: flex;\n      display: -webkit-flex;\n      align-items: center;\n      justify-content: center;\n      position: absolute;\n      top: 0;\n    }\n\n    h2,\n    h3 {\n      line-height: 110%;\n    }\n\n    h2 {\n      font-size: 48px;\n      margin: 12px 0px;\n    }\n  }\n\n  @media screen and (min-width: 834px) and (max-width: 959px) {\n    .default-card {\n      width: 368px;\n    }\n  }\n\n  @media screen and (min-width: 960px) and (max-width: 1199px) {\n    column-gap: 34px;\n  }\n\n  @media screen and (min-width: 834px) {\n    grid-template-columns: auto auto;\n    row-gap: 73px;\n  }\n\n  @media screen and (min-width: 960px) {\n    column-gap: 34px;\n    justify-content: center;\n\n    .default-card {\n      width: 346px;\n    }\n  }\n\n  @media screen and (min-width: 1200px) {\n    column-gap: 170px;\n    padding: 103px 0px 68px;\n  }\n}\n</style>\n"],"names":["emit","__emit","buttonClicked","setInterval","useResultsStore","defineStore","state","metricNumbers","achievedResultsSection","ref","startedCount","startCount","dataItem","count","AchievedResultsWatcher","section","array","metric","onMounted","onBeforeUnmount"],"mappings":"ijBAuBA,MAAMA,EAAOC,EAcPC,EAAgB,IAAMF,EAAK,gBAAgB,ksBCnCpCG,EAAmC,OAAO,YCC1CC,EAAkBC,EAAY,eAAgB,CACzD,MAAO,KAAO,CACZ,cAAe,CACb,CACE,GAAI,EACJ,SAAU,sBACV,OAAQ,KACR,MAAO,IACP,MAAO,OACP,WAAY,EACZ,KAAM,oBACR,EACA,CACE,GAAI,EACJ,SAAU,2BACV,OAAQ,QACR,MAAO,EACP,MAAO,KACP,WAAY,EACZ,KAAM,cACR,EACA,CACE,GAAI,EACJ,SAAU,oBACV,OAAQ,QACR,MAAO,EACP,MAAO,KACP,WAAY,EACZ,KAAM,oBACR,EACA,CACE,GAAI,EACJ,SAAU,uBACV,UAAW,MACX,OAAQ,QACR,MAAO,EACP,MAAO,KACP,WAAY,EACZ,KAAM,sBACR,CACF,CAAA,GAGF,QAAS,CACP,iBAAmBC,GAAUA,EAAM,aACrC,CACF,CAAC,oEClBD,MAAMC,EADQH,IACc,iBAEtBI,EAAyBC,EAAS,IAAI,EACtCC,EAAeD,EAAa,EAAK,EAEjCE,EAAcC,GAAiC,CAC/C,IAAAC,EAAQV,EAAY,IAAM,CACnBS,EAAA,aACLA,EAAS,YAAcA,EAAS,OAClC,cAAcC,CAAK,CACrB,EACC,IAAMD,EAAS,KAAK,CAAA,EAGnBE,EAAyB,IAAM,CACnC,IAAIC,EAAUP,EAAuB,MACjCQ,EAAQ,CAAC,GAAGT,CAAa,EAE3B,OAAO,QAAUQ,EAAQ,cACzBA,EAAQ,UAAYA,EAAQ,eAEvBL,EAAa,OAChBM,EAAM,QAASC,GAA+BN,EAAWM,CAAM,CAAC,EAElEP,EAAa,MAAQ,GACd,OAAA,oBAAoB,SAAUI,CAAsB,EAC7D,EAGF,OAAAI,EAAU,IAAM,CACd,OAAO,iBAAiB,SAAUJ,EAAwB,CAAE,QAAS,GAAM,CAAA,CAC5E,EAEDK,EAAgB,IAAM,CACb,OAAA,oBAAoB,SAAUL,CAAsB,CAAA,CAC5D","x_google_ignoreList":[1]}