{"version":3,"file":"xc_QKFQ9.js","sources":["../../../../stores/home/channels.ts","../../../../components/home/OurChannels.vue"],"sourcesContent":["\nimport { defineStore } from 'pinia'\n\nexport const useChannelsStore = defineStore('channelsStore', {\n  state: () => ({\n    channels: [\n      {\n        id: 0,\n        mediaSrc: \"zap-icone.png\",\n        title: \"WhatsApp\",\n        text: \"Receba avisos diretamente no seu app favorito de mensagens.\"\n      },\n      {\n        id: 1,\n        mediaSrc: \"carta-icone.png\",\n        title: \"E-mail\",\n        text: \"Não perca nenhuma atualização, nós te avisamos diretamente no seu e-mail.\"\n      },\n      {\n        id: 2,\n        mediaSrc: \"sms-icone.png\",\n        title: \"SMS e Push\",\n        text: \"Comunicação rápida, curta e direta. Tudo na palma da sua mão.\"\n      },\n      {\n        id: 3,\n        mediaSrc: \"telefone-icone.png\",\n        title: \"Telefone\",\n        text: \"Receba ligações dos nossos atendentes virtuais. A tecnologia a seu serviço.\"\n      },\n    ] as Array<ContentCardItem>\n  }),\n\n  getters: {\n    getOurChannels: (state) => state.channels,\n  },\n})","<template>\n  <section role=\"region\" class=\"our-channels-section\" :class=\"isPartner ? 'partner-page' : ''\" id=\"our-channels\"\n    ref=\"ourChannelsSection\">\n    <div class=\"content-image\">\n      <ThePicture :mobilePath=\"mobilePath\" :desktopPath=\"desktopPath\" mobileQuerie=\"833px\" desktopQuerie=\"834px\"\n        altText=\"Pessoa com celular na mão sorrindo\" />\n    </div>\n    <div class=\"content-text\">\n      <TheSecondHead class=\"header\" chipText=\"Onde estamos\"\n        :titleText=\"isPartner ? 'Entramos em contato com você por meio de:' : 'O MeLembre está onde você precisa, quando você precisa'\" />\n      <div class=\"channels\">\n        <div class=\"channel\" :class=\"makeFade ? 'show' : ''\" v-for=\"channel in channels\" :key=\"channel.id\"\n          v-show=\"showTexts\" :style=\"`transition-duration: ${(channel.id + 1) * 0.4}s !important`\">\n          <img :src=\"`/images/${iconsPath}${channel.mediaSrc}`\" :alt=\"`Ícone de ${channel.title}`\"\n            loading=\"lazy\" />\n          <h3>{{ channel.title }}</h3>\n          <p>{{ channel.text }} </p>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport { useChannelsStore } from '@/stores/home/channels'\nconst store = useChannelsStore();\n\nconst channels = store.getOurChannels;\n\ndefineProps<{\n  iconsPath: string,\n  mobilePath: string,\n  desktopPath: string,\n  isPartner?: boolean,\n}>()\n\nconst showTexts = ref<Boolean>(false);\nconst makeFade = ref<Boolean>(false);\nconst ourChannelsSection = ref<any>(null);\n\nconst ourChannelsWatcher = () => {\n  var section = ourChannelsSection.value;\n\n  if ((window.scrollY + section.offsetHeight) >= section.offsetTop) {\n    setTimeout(() => {\n      makeFade.value = true;\n    }, 100);\n    window.removeEventListener('scroll', ourChannelsWatcher);\n  }\n}\n\nonMounted(() => {\n  showTexts.value = true;\n  window.addEventListener('scroll', ourChannelsWatcher, {passive: true});\n  ourChannelsWatcher();\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('scroll', ourChannelsWatcher);\n})\n</script>\n\n<style lang=\"scss\">\n.our-channels-section {\n  padding: 40px 15px 15px;\n  display: flex;\n  display: -webkit-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n\n  .content-image {\n    margin-bottom: 40px;\n  }\n\n  .content-text {\n    .header {\n      text-align: center;\n\n      .text-chip {\n        margin-bottom: 16px;\n      }\n\n      .title {\n        font-size: 36px;\n        line-height: 110%;\n        margin-bottom: 40px;\n      }\n    }\n\n    .channels {\n      .channel {\n        text-align: center;\n        margin-bottom: 24px;\n\n        h3 {\n          margin: 12px 0;\n          line-height: 110%;\n        }\n\n        p {\n          width: 210px;\n          margin: 0 auto;\n        }\n\n        &:nth-child(1) p,\n        &:nth-child(3) p {\n          width: 199px;\n        }\n\n        &:nth-child(2) p {\n          width: 240px;\n        }\n\n\n        &:nth-child(4) p {\n          width: 204px;\n        }\n      }\n    }\n  }\n\n  @media screen and (min-width: 834px) and (max-width: 959px) {\n    .content-text {\n      max-width: 570px;\n\n      .header .title {\n        margin-bottom: 26px;\n      }\n\n      .channels {\n        justify-content: space-around;\n\n        .channel {\n          margin-bottom: 34px;\n        }\n      }\n    }\n  }\n\n  @media screen and (min-width: 960px) and (max-width: 1199px) {\n    max-width: 1200px;\n    padding: 68px 0px;\n\n    .content-image img {\n      max-width: 100%;\n    }\n\n    .content-text {\n      max-width: 551px;\n    }\n  }\n\n  @media screen and (min-width: 600px) {\n    .content-text .channels {\n      display: grid;\n      grid-template-columns: auto auto;\n    }\n\n  }\n\n  @media screen and (min-width: 834px) {\n    .content-text .header .title {\n      font-size: 40px;\n    }\n  }\n\n  @media screen and (min-width: 960px) {\n    flex-direction: row;\n\n    .content-image {\n      margin-bottom: 0px;\n    }\n\n    .content-text {\n\n      .header,\n      .channels .channel {\n        text-align: start;\n        margin-bottom: 0px;\n      }\n\n      .header .title {\n        margin-bottom: 34px;\n      }\n\n      .channels .channel {\n\n        &:nth-child(1) p,\n        &:nth-child(3) p {\n          margin: 0;\n        }\n\n        &:nth-child(2) p {\n          margin: 0px 0px 34px;\n        }\n\n\n        &:nth-child(4) p {\n          margin: 0;\n        }\n      }\n    }\n  }\n\n  @media screen and (min-width: 1200px) {\n    max-width: 1146px;\n    padding: 68px 0px;\n\n    .content-image img {\n      width: 522px;\n      height: 593px;\n      margin-right: 63px;\n    }\n\n    .content-text {\n      padding-right: 38px;\n    }\n\n  }\n\n  // Animação de aparecer\n  .channel {\n    opacity: 0;\n    -webkit-transform: translateY(100px);\n    transform: translateY(100px);\n  }\n\n  .show {\n    -webkit-transition: all 0.5s ease;\n    -moz-transition: all 0.5s ease;\n    -o-transition: all 0.5s ease;\n    transition: all 0.5s ease;\n    -webkit-transform: translateY(0px);\n    transform: translateY(0px);\n    opacity: 1;\n  }\n\n  // Fim animação de aparecer\n}\n</style>"],"names":["useChannelsStore","defineStore","state","channels","showTexts","ref","makeFade","ourChannelsSection","ourChannelsWatcher","section","onMounted","onBeforeUnmount"],"mappings":"iNAGa,MAAAA,EAAmBC,EAAY,gBAAiB,CAC3D,MAAO,KAAO,CACZ,SAAU,CACR,CACE,GAAI,EACJ,SAAU,gBACV,MAAO,WACP,KAAM,6DACR,EACA,CACE,GAAI,EACJ,SAAU,kBACV,MAAO,SACP,KAAM,2EACR,EACA,CACE,GAAI,EACJ,SAAU,gBACV,MAAO,aACP,KAAM,+DACR,EACA,CACE,GAAI,EACJ,SAAU,qBACV,MAAO,WACP,KAAM,6EACR,CACF,CAAA,GAGF,QAAS,CACP,eAAiBC,GAAUA,EAAM,QACnC,CACF,CAAC,wMCRD,MAAMC,EAFQH,IAES,eASjBI,EAAYC,EAAa,EAAK,EAC9BC,EAAWD,EAAa,EAAK,EAC7BE,EAAqBF,EAAS,IAAI,EAElCG,EAAqB,IAAM,CAC/B,IAAIC,EAAUF,EAAmB,MAE5B,OAAO,QAAUE,EAAQ,cAAiBA,EAAQ,YACrD,WAAW,IAAM,CACfH,EAAS,MAAQ,IAChB,GAAG,EACC,OAAA,oBAAoB,SAAUE,CAAkB,EACzD,EAGF,OAAAE,EAAU,IAAM,CACdN,EAAU,MAAQ,GAClB,OAAO,iBAAiB,SAAUI,EAAoB,CAAC,QAAS,GAAK,EAClDA,GAAA,CACpB,EAEDG,EAAgB,IAAM,CACb,OAAA,oBAAoB,SAAUH,CAAkB,CAAA,CACxD"}