{"version":3,"file":"C0wGx7QK.js","sources":["../../../../assets/img/credit/money1.svg","../../../../assets/img/credit/money2.svg","../../../../components/CreditPage/ConsumerCredit.vue","../../../../components/CreditPage/Modal.vue","../../../../assets/img/credit/simulation.png","../../../../assets/videos/credit/simulation.mp4","../../../../components/CreditPage/Simulation.vue","../../../../components/CreditPage/Question.vue","../../../../assets/img/credit/bg.svg","../../../../components/CreditPage/MyCredit.vue","../../../../assets/img/custom/white-arrow.svg","../../../../assets/img/custom/purple-arrow.svg","../../../../assets/videos/credit/calculator.mp4","../../../../assets/img/credit/calculator.png","../../../../assets/videos/credit/safe_deposit.mp4","../../../../assets/img/credit/safe_deposit.png","../../../../assets/videos/credit/telephone_bank.mp4","../../../../assets/img/credit/telephone_bank.png","../../../../components/CreditPage/Section1.vue","../../../../pages/credit/index.vue"],"sourcesContent":["export default \"__VITE_ASSET__C1cIRscL__\"","export default \"__VITE_ASSET__B72hej7v__\"","<script lang=\"ts\" setup>\nimport { parseBold } from \"~/helpers/functions/TextUtils\";\n\nconst { t } = useI18n();\n</script>\n<template>\n  <section>\n    <img\n      src=\"@/assets/img/credit/money1.svg\"\n      class=\"money top-money\"\n      :alt=\"$t('alt.moneyIcon')\"\n    />\n    <h2 class=\"consumerTitle bold-text\">\n      {{ t(\"credit.ConsumerCredit.title.part-1\") }} <br class=\"mobile-break\" />\n      {{ t(\"credit.ConsumerCredit.title.part-2\") }}\n    </h2>\n    <p\n      class=\"paragraph first-p\"\n      v-html=\"parseBold(t('credit.ConsumerCredit.paragraph'))\"\n    ></p>\n\n    <div class=\"bottom\">\n      <div class=\"left\">\n        <p class=\"paragraph bottomTitle\">\n          {{ t(\"credit.ConsumerCredit.leftParagraph.title\") }}\n        </p>\n        <p class=\"paragraph second-p\">\n          {{ t(\"credit.ConsumerCredit.leftParagraph.text\") }}\n        </p>\n      </div>\n      <div class=\"right\">\n        <p class=\"paragraph bottomTitle bold-text\">\n          {{ t(\"credit.ConsumerCredit.rightParagraph.title\") }}\n        </p>\n        <p class=\"paragraph second-p\">\n          {{ t(\"credit.ConsumerCredit.rightParagraph.text\") }}\n        </p>\n      </div>\n    </div>\n    <img\n      src=\"@/assets/img/credit/money2.svg\"\n      class=\"money bottom-money\"\n      :alt=\"$t('alt.moneyIcon')\"\n    />\n  </section>\n</template>\n<style lang=\"css\" scoped>\n* {\n  color: var(--vt-c-white);\n  text-align: center;\n}\nsection {\n  position: relative;\n  background: var(--vt-c-purple) 0% 0% no-repeat padding-box;\n  border-radius: 37px 37px 0px 0px;\n  padding: 8rem 8rem;\n  padding-bottom: 12rem;\n}\n.money {\n  position: absolute;\n  width: 200px;\n}\n.top-money {\n  right: 105px;\n  top: -150px;\n}\n.bottom-money {\n  left: 105px;\n  bottom: -100px;\n  position: absolute;\n  z-index: 99;\n}\n.consumerTitle {\n  font-size: clamp(25px, 4vw, 40px);\n  line-height: clamp(30px, 4vw, 67px);\n}\n.first-p {\n  margin: auto;\n  width: 50%;\n}\n.bottom {\n  display: flex;\n  justify-content: center;\n  align-items: stretch;\n  gap: 10rem;\n  margin-top: 5rem;\n}\n.left,\n.right {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start; /* Ensure content starts from the top */\n  width: 460px;\n  border: 1px solid var(--vt-c-white);\n  border-radius: 8px;\n  padding: 1rem 2rem;\n}\n.second-p {\n  min-height: 200px;\n  flex-grow: 1;\n  display: flex;\n  align-items: center; /* Center text vertically */\n  justify-content: center; /* Optional: Center text horizontally */\n  min-height: 200px;\n}\n\n.bottomTitle {\n  text-align: center;\n  font-family: \"Gilmer Bold\", sans-serif;\n  border-bottom: 1px solid var(--vt-c-white);\n}\n@media screen and (max-width: 1224px) {\n  section {\n    padding: 6rem 8rem;\n    padding-bottom: 10rem;\n  }\n  .money {\n    width: 125px;\n  }\n  .top-money {\n    top: -5rem;\n  }\n  .bottom-money {\n    bottom: -3rem;\n  }\n  .first-p {\n    width: 75%;\n  }\n}\n@media screen and (max-width: 900px) {\n  .first-p {\n    width: 100%;\n  }\n  .bottom {\n    flex-direction: column;\n    align-items: center;\n    gap: 3rem;\n  }\n}\n@media screen and (max-width: 780px) {\n  .money {\n    width: 115px;\n    height: 175px;\n    left: 50%; /* Center horizontally */\n    transform: translateX(-50%); /* Adjust for exact center */\n  }\n\n  .top-money {\n    top: -3rem;\n  }\n  .bottom-money {\n    bottom: -3rem;\n  }\n  section {\n    padding: 8rem 1rem;\n    padding-bottom: 10rem;\n  }\n  .left,\n  .right {\n    width: calc(100% - 2rem);\n    padding: 1rem;\n    max-width: 372px;\n    height: 285px;\n  }\n}\n</style>\n","<template>\n  <Teleport to=\"body\">\n    <Transition name=\"modal-fade\">\n      <div v-if=\"isOpen\" class=\"modal-bg\">\n        <div class=\"bg\"></div>\n        <div class=\"container\">\n          <div class=\"modal\">\n            <iframe\n              id=\"iframe-ecredit\"\n              src=\"https://tutassur.ecredit.eloa.io/eimmo/859d343a-b4f5-485d-8179-71682c5b7220\"\n              style=\"border: 0; width: 1px; min-width: 100%\"\n            ></iframe>\n          </div>\n          <button class=\"close paragraph\" @click=\"emit('close')\">\n            {{ $t(\"credit.simulation.closeButton\") }}\n          </button>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n<script setup lang=\"ts\">\nconst { isOpen } = defineProps({\n  isOpen: Boolean,\n});\nconst emit = defineEmits([\"close\"]);\n\n// Load external script\n</script>\n<style lang=\"css\" scoped>\niframe {\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n}\nbody {\n  overflow: hidden;\n}\n.bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #3b257b 0% 0% no-repeat padding-box;\n  opacity: 0.63;\n  z-index: 99;\n}\n.modal-bg {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100%;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 100;\n}\n.modal {\n  background-color: white;\n  border: 5px solid #7448ef;\n  border-radius: 22px;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  margin-bottom: 2rem;\n}\n.container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 20px;\n  top: 25px;\n  border-radius: 10px;\n  position: absolute;\n  width: 75%;\n  height: 90%;\n  max-width: 1921px;\n  max-height: 5879px;\n  z-index: 101;\n}\n.close {\n  z-index: 202;\n  width: 284px;\n  height: 71px;\n  color: var(--vt-c-purple);\n  border: 2px solid #7448ef;\n}\n.modal-fade-enter-active,\n.modal-fade-leave-active {\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease;\n}\n\n.modal-fade-enter-from {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n\n.modal-fade-enter-to {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.modal-fade-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.modal-fade-leave-to {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n.close:hover {\n  background-color: #7448ef;\n  box-shadow: 0px 0px 90px var(--vt-c-white);\n  color: var(--vt-c-white);\n}\n@media screen and (max-width: 1235px) {\n  .modal {\n    border: none;\n  }\n  .container {\n    top: 75px;\n    max-height: 708px;\n  }\n}\n@media screen and (max-width: 1235px) and (max-height: 700px) {\n  .container {\n    top: 10px;\n  }\n}\n@media screen and (max-width: 780px) {\n  .close {\n    width: 292px;\n    height: 56px;\n  }\n  .container {\n    top: 25px;\n    width: 90%;\n    border-radius: 30px;\n  }\n}\n@media screen and (max-width: 400px) and (max-height: 700px) {\n  .container {\n    max-height: 608px;\n  }\n}\n</style>\n","export default \"__VITE_ASSET__D0dsrmKQ__\"","export default \"__VITE_ASSET__DIKr5Rjv__\"","<script setup lang=\"ts\">\nimport arrow from \"@/assets/img/ui-insurance/arrow.png\";\nimport arrowVideo from \"@/assets/videos/arrow.mp4\";\n\nimport {\n  disableScrolling,\n  enableScrolling,\n} from \"~/helpers/functions/smoothScrool\";\nimport imgBg from \"../../assets/img/credit/simulation.png\";\nimport videoBg from \"../../assets/videos/credit/simulation.mp4\";\nconst { animationEnabled } = useCustom();\nconst animation = ref(animationEnabled);\nconst isOpen = ref(false);\nconst closeModal = () => {\n  isOpen.value = false;\n};\nconst openModal = () => {\n  isOpen.value = true;\n};\nwatch(isOpen, (newVal) => {\n  if (newVal) {\n    disableScrolling();\n  } else {\n    enableScrolling();\n  }\n});\n</script>\n<template>\n  <section>\n    <div class=\"title-container\">\n      <h1 class=\"title\">{{ $t(\"credit.simulation.title\") }}</h1>\n      <p class=\"underTitle\">{{ $t(\"credit.simulation.underTitle\") }}</p>\n    </div>\n    <p class=\"paragraph\">\n      {{ $t(\"credit.simulation.paragraph.part-1\") }}<br />\n      {{ $t(\"credit.simulation.paragraph.part-2\") }}\n    </p>\n    <div id=\"simulation\">\n      <CommonVideoWithPlaceholder\n        :video-src=\"videoBg\"\n        :placeholder=\"imgBg\"\n        :class-video=\"'bg'\"\n        :class-placeholder=\"'bg'\"\n        :is-playing=\"animation\"\n      />\n\n      <!-- ---------------- -->\n\n      <div class=\"bottom\">\n        <!-- <img\n          src=\"@/assets/img/ui-insurance/arrow.png\"\n          class=\"left-arrow\"\n          :alt=\"$t('alt.leftArrow')\"\n        /> -->\n        <CommonVideoWithPlaceholder\n          :video-src=\"arrowVideo\"\n          :placeholder=\"arrow\"\n          class-video=\"left-arrow left-arrow-video\"\n          class-placeholder=\"left-arrow left-arrow-img\"\n          :is-playing=\"true\"\n          :alt=\"$t('alt.leftArrow')\"\n        />\n        <button class=\"purple-button main-button\" @click=\"openModal\">\n          <span class=\"text\">\n            {{ $t(\"credit.simulation.button\") }}\n          </span>\n          <span id=\"arrow\" class=\"icon\">\n            <div></div>\n          </span>\n        </button>\n        <CommonVideoWithPlaceholder\n          :video-src=\"arrowVideo\"\n          :placeholder=\"arrow\"\n          class-video=\"right-arrow right-arrow-video\"\n          class-placeholder=\"right-arrow right-arrow-img\"\n          :is-playing=\"animation\"\n          :alt=\"$t('alt.leftArrow')\"\n        />\n\n        <!-- <img\n          src=\"@/assets/img/ui-insurance/arrow.png\"\n          :alt=\"$t('alt.rightArrow')\"\n          class=\"right-arrow\"\n        /> -->\n      </div>\n    </div>\n    <div class=\"row\"></div>\n    <CreditPageModal :is-open=\"isOpen\" @close=\"closeModal\" />\n  </section>\n</template>\n\n<style scoped>\n.row {\n  width: 70%;\n  margin: auto;\n  margin-top: 7rem;\n\n  border: 1px solid var(--vt-c-medium-purple);\n}\n\nsection {\n  background-color: var(--vt-c-white);\n  border-radius: 37px 37px 0 0;\n\n  position: relative;\n  z-index: 2;\n  margin-top: -2rem;\n  padding: 2rem 6rem;\n  padding-top: 8rem;\n}\n\n.title-container {\n  margin-top: 4rem;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.underTitle {\n  color: var(--vt-c-purple);\n  opacity: 0.1;\n  z-index: 1;\n  text-shadow: inset 0px 3px 6px #00000000;\n}\n.title {\n  padding-top: clamp(0px, 1vw, 15px);\n  margin-top: 0;\n  text-align: center;\n}\n.paragraph {\n  color: var(--vt-c-purple);\n  text-align: center;\n  margin: auto;\n  margin-top: -1rem;\n  font-family: \"Gilmer Medium\", sans-serif;\n}\n#simulation {\n  margin-top: -8rem;\n  position: relative;\n  z-index: -1;\n  width: 100%;\n  gap: 3rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n::v-deep(.bg) {\n  width: 100%;\n  object-fit: cover;\n  max-width: 788px;\n  position: relative;\n  z-index: -2;\n}\n/* è--------------------------------- */\n.bottom {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: fit-content;\n  margin: auto;\n  margin-top: -1.5rem;\n  /* margin-top: -18vw; */\n}\n::v-deep(.left-arrow),\n::v-deep(.right-arrow) {\n  width: clamp(58px, 6vw, 101px);\n  height: clamp(66px, 6.5vw, 116px);\n  z-index: -1;\n  position: relative;\n  object-fit: contain;\n\n  /* position: absolute; */\n}\n::v-deep(.left-arrow) {\n  top: clamp(-40px, -3vw, 20px);\n  transform: rotate(35deg);\n}\n::v-deep(.left-arrow-video) {\n  transform: rotate(155deg);\n}\n::v-deep(.right-arrow) {\n  transform: rotate(220deg);\n  bottom: clamp(-40px, -3vw, 20px);\n}\n::v-deep(.right-arrow-video) {\n  transform: rotate(-25deg);\n}\n.purple-button {\n  margin: auto;\n  /* margin-top: 5rem; */\n  background: var(--vt-c-purple) 0% 0% no-repeat;\n  font-family: \"Gilmer Bold\";\n  position: relative;\n  font-size: clamp(14px, 1.5vw, 22px);\n  color: var(--vt-c-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 2rem;\n  padding: 1rem;\n  /* padding-right: 5%; */\n  transition: all 0.3s ease;\n  border-radius: 50px;\n  width: 392px;\n  height: clamp(51px, 6vw, 71px);\n}\n\n.purple-button:hover {\n  cursor: pointer;\n  background-color: #441cd0;\n  box-shadow: 0 0 90px #441cd0;\n}\n.text {\n  padding-right: 7%;\n}\n.purple-button:hover .text {\n  color: var(--vt-c-white);\n}\n.purple-button .icon {\n  position: absolute;\n  z-index: 2;\n  height: clamp(36px, 4.5vw, 51px);\n  width: clamp(36px, 4.5vw, 51px);\n  right: 0.3rem;\n  border-radius: 50%;\n  background-color: var(--vt-c-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.purple-button .icon div {\n  width: 25%;\n  height: 30%;\n  border-radius: 5px;\n  transition: all 0.3s ease;\n\n  border: 8px solid var(--vt-c-purple);\n}\n.purple-button:hover .icon div {\n  outline: 3px solid #441cd0;\n  border: 3px solid var(--vt-c-white);\n  background-color: #441cd0;\n\n  width: 40%;\n  height: 50%;\n  border-radius: 3.5px;\n}\n@media screen and (max-width: 1635px) {\n  section {\n    padding-top: 8rem;\n  }\n  .row {\n    width: 75%;\n  }\n  #simulation {\n    margin-top: -6rem;\n  }\n}\n@media screen and (max-width: 1235px) {\n  .row {\n    margin-top: 8rem;\n    width: 85%;\n  }\n  .purple-button {\n    width: clamp(292px, 35vw, 300px);\n  }\n  #simulation {\n    margin-top: -4rem;\n  }\n}\n@media screen and (max-width: 780px) {\n  ::v-deep(.left-arrow),\n  ::v-deep(.right-arrow) {\n    display: none;\n  }\n  #simulation {\n    margin-top: -2rem;\n  }\n  section {\n    padding: 1rem 2rem;\n    padding-top: 4rem;\n  }\n  .row {\n    width: 90%;\n    margin-top: 6rem;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nconst { t } = useI18n();\n</script>\n<template>\n  <section>\n    <div class=\"top\">\n      <h2 class=\"creditTitle bold-text\">{{ $t(\"credit.questions.title\") }}</h2>\n      <p class=\"paragraph\">{{ $t(\"credit.questions.paragraph\") }}</p>\n    </div>\n    <div class=\"questions\">\n      <LegalComponentsArticle :title=\"t('credit.questions.list.1.question')\">\n        <p class=\"answer paragraph\">\n          {{ t(\"credit.questions.list.1.answer.part-1\") }}\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.1.answer.part-2\")\n          }}</span>\n          {{ t(\"credit.questions.list.1.answer.part-3\") }}\n        </p>\n      </LegalComponentsArticle>\n      <LegalComponentsArticle :title=\"t('credit.questions.list.2.question')\">\n        <p class=\"answer paragraph\">\n          {{ t(\"credit.questions.list.2.answer.part-1\") }}\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.2.answer.part-2\")\n          }}</span>\n          {{ t(\"credit.questions.list.2.answer.part-3\") }}\n        </p>\n      </LegalComponentsArticle>\n      <LegalComponentsArticle :title=\"t('credit.questions.list.3.question')\">\n        <p class=\"answer paragraph\">\n          <span class=\"bold\">\n            {{ t(\"credit.questions.list.3.answer.part-1\") }}</span\n          >\n          {{ t(\"credit.questions.list.3.answer.part-2\") }}\n\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.3.answer.part-3\")\n          }}</span>\n          {{ t(\"credit.questions.list.3.answer.part-4\") }}\n          <span class=\"bold\">\n            {{ t(\"credit.questions.list.3.answer.part-5\") }}</span\n          >\n          {{ t(\"credit.questions.list.3.answer.part-6\") }}\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.3.answer.part-7\")\n          }}</span>\n          {{ t(\"credit.questions.list.3.answer.part-8\") }}\n        </p>\n      </LegalComponentsArticle>\n      <LegalComponentsArticle :title=\"t('credit.questions.list.4.question')\">\n        <p class=\"answer paragraph\">\n          {{ t(\"credit.questions.list.4.answer.part-1\") }}\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.4.answer.part-2\")\n          }}</span>\n          {{ t(\"credit.questions.list.4.answer.part-3\") }}\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.4.answer.part-4\")\n          }}</span>\n        </p>\n      </LegalComponentsArticle>\n      <LegalComponentsArticle :title=\"t('credit.questions.list.5.question')\">\n        <p class=\"answer paragraph\">\n          {{ t(\"credit.questions.list.5.answer.part-1\") }}\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.5.answer.part-2\")\n          }}</span>\n          {{ t(\"credit.questions.list.5.answer.part-3\") }}\n        </p>\n      </LegalComponentsArticle>\n      <LegalComponentsArticle :title=\"t('credit.questions.list.6.question')\">\n        <p class=\"answer paragraph\">\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.6.answer.part-1\")\n          }}</span>\n          {{ t(\"credit.questions.list.6.answer.part-2\") }}\n          <span class=\"highlight\">{{\n            t(\"credit.questions.list.6.answer.part-3\")\n          }}</span>\n          {{ t(\"credit.questions.list.6.answer.part-4\") }}\n        </p>\n      </LegalComponentsArticle>\n    </div>\n  </section>\n</template>\n<style scoped lang=\"css\">\nsection {\n  margin-top: 4rem;\n  padding: 3rem 12rem;\n  display: flex;\n  margin-bottom: 8rem;\n  gap: 4rem;\n}\n.questions {\n  width: 60%;\n}\n.creditTitle {\n  color: var(--vt-c-medium-purple);\n  text-align: left;\n  font-size: clamp(25px, 4vw, 40px);\n  line-height: clamp(30px, 4vw, 67px);\n  margin-top: 0;\n  margin-bottom: 0rem;\n}\n.top p,\n.paragraph {\n  text-align: left;\n}\n.paragraph:not(.answer) {\n  width: 60%;\n  margin-top: -0.3rem;\n}\n.answer {\n  font-family: \"Gilmer Light\", sans-serif;\n  text-align: left;\n}\n\n@media screen and (max-width: 1400px) {\n  section {\n    padding: 3rem 8rem;\n    margin-bottom: 3rem;\n  }\n}\n@media screen and (max-width: 1224px) {\n  section {\n    padding: 3rem 5rem;\n    margin-bottom: 1rem;\n  }\n}\n@media screen and (max-width: 900px) {\n  section {\n    padding: 3rem 2rem;\n\n    flex-direction: column;\n  }\n  .questions,\n  .paragraph {\n    width: 100%;\n  }\n  .paragraph:not(.answer) {\n    width: 100%;\n    margin-top: 2rem;\n    text-align: center;\n  }\n  .creditTitle {\n    text-align: center;\n  }\n}\n@media screen and (max-width: 780px) {\n  section {\n    padding: 1rem 1.5rem;\n    margin-bottom: 0rem;\n  }\n\n  .paragraph:not(.answer) {\n    margin-top: 1rem;\n  }\n}\n</style>\n","export default \"data:image/svg+xml,%3csvg%20id='Groupe_462'%20data-name='Groupe%20462'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='686.578'%20height='555.67'%20viewBox='0%200%20686.578%20555.67'%3e%3cdefs%3e%3cclipPath%20id='clip-path'%3e%3crect%20id='Rectangle_249'%20data-name='Rectangle%20249'%20width='678.76'%20height='555.67'%20fill='none'/%3e%3c/clipPath%3e%3cclipPath%20id='clip-path-2'%3e%3crect%20id='Rectangle_250'%20data-name='Rectangle%20250'%20width='686.578'%20height='555.67'%20fill='none'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='Groupe_459'%20data-name='Groupe%20459'%3e%3cg%20id='Groupe_458'%20data-name='Groupe%20458'%20clip-path='url(%23clip-path)'%3e%3cpath%20id='Tracé_3377'%20data-name='Tracé%203377'%20d='M493.969,89.667c22.976,2.227,78.289-1.253,138.609,62.948,73.1,77.8,38.316,218.98-5.952,280.832-69.525,97.14-219.209,137.34-345.945,114.888C127.649,521.222,23.345,405.462,18.256,285.117c-4.129-97.643,56.925-201.266,174.986-252.3C325.471-24.338,502.942-4.176,605,96.067c111.3,109.322,85.8,267.606-21.16,357.739C452.8,564.237,255.485,525.18,236.082,521.067,204.24,514.3,98.03,491.767,40.132,415.176c-71.661-94.8-42.448-236.893,79.145-346.516'%20fill='none'%20stroke='%23121211'%20stroke-width='2'/%3e%3c/g%3e%3c/g%3e%3cg%20id='Groupe_461'%20data-name='Groupe%20461'%3e%3cg%20id='Groupe_460'%20data-name='Groupe%20460'%20clip-path='url(%23clip-path-2)'%3e%3cpath%20id='Tracé_3378'%20data-name='Tracé%203378'%20d='M71.118,32.293l4.371-2.086,14.772,3.784c-13.114-13.015-34.055-20.824-50.5-9.552-8.136,5.576-15.944,15.737-19.4,25.01-.862,2.311-3.177,19.7-7.093,14.762-1.062-1.342,1.522-14.2,2.361-16.422,3.735-9.913,14.277-24.039,23.6-29,18.947-10.071,41.361-1.3,55.1,13.392.882-5.745-2.171-16.141-.974-21.373a1.991,1.991,0,0,1,2.688-1.645c2.719,1.464,4.528,31.879,2.457,33.477Z'%20fill='%23161615'/%3e%3cpath%20id='Tracé_3379'%20data-name='Tracé%203379'%20d='M631.789,516.765l-4.135,2.522-15.082-2.256c14.376,11.608,36,17.237,51.215,4.344,7.524-6.378,14.254-17.284,16.747-26.862.621-2.386,1.147-19.926,5.547-15.408,1.194,1.226-.064,14.279-.671,16.577-2.7,10.242-11.747,25.371-20.518,31.255-17.819,11.954-41.012,5.517-56.184-7.693-.291,5.8,3.809,15.834,3.152,21.161a1.99,1.99,0,0,1-2.505,1.911c-2.855-1.178-7.761-31.249-5.864-33.051Z'%20fill='%23161615'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e\"","<script setup lang=\"ts\">\nimport videoBg from \"../../assets/videos/home/services/personal/money.mp4\";\nimport imageBg from \"../../assets/img/home/services/personal/walletBg.png\";\nconst URL = `${import.meta.env.VITE_OLD_BASE_URL}/accueil/assurance-emprunteur/`;\n\nconst { t } = useI18n();\nconst { animationEnabled } = useCustom();\nconst animation = ref(false);\nconst handleMouseEnter = () => {\n  if (!animationEnabled) return;\n  animation.value = true;\n};\nconst redirectTo = () => {\n  window.location.href = URL;\n};\nconst handleMouseLeave = () => {\n  animation.value = false;\n};\n\nonMounted(() => {\n  const isMobile = window.matchMedia(\"(max-width: 780px)\").matches;\n  if (isMobile && animationEnabled) {\n    animation.value = true;\n  }\n});\n</script>\n<template>\n  <section>\n    <div class=\"cards cursor-hover\" @click=\"redirectTo\">\n      <img\n        class=\"bgimg\"\n        src=\"@/assets/img/credit/bg.svg\"\n        :alt=\"$t('alt.emprunteurBg')\"\n      />\n      <div\n        class=\"card\"\n        @mouseenter=\"handleMouseEnter\"\n        @mouseleave=\"handleMouseLeave\"\n      >\n        <div class=\"shadow\"></div>\n        <div class=\"bg\"></div>\n        <CommonVideoWithPlaceholder\n          :video-src=\"videoBg\"\n          :placeholder=\"imageBg\"\n          :class-video=\"'img video hover-video'\"\n          :class-placeholder=\"'img'\"\n          :is-playing=\"animation\"\n          :alt=\"$t('alt.emprunteurBg')\"\n        />\n        <p class=\"text\">{{ $t(\"credit.myCredit.borrower\") }}</p>\n      </div>\n      <a href=\"#\" class=\"subParagraph\">{{ $t(\"credit.myCredit.click\") }}</a>\n    </div>\n    <div class=\"right\">\n      <h2 class=\"bold-text\">\n        {{ t(\"credit.myCredit.title.part-1\") }} <br />{{\n          t(\"credit.myCredit.title.part-2\")\n        }}\n      </h2>\n      <p class=\"paragraph\">{{ $t(\"credit.myCredit.paragraph\") }}</p>\n    </div>\n  </section>\n</template>\n<style scoped lang=\"css\">\nsection {\n  display: flex;\n  margin-bottom: 8rem;\n}\n.right {\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  width: fit-content;\n  padding: 3rem 12rem;\n  padding-left: 0;\n}\n\nh2 {\n  color: var(--vt-c-medium-purple);\n  font-size: clamp(25px, 4vw, 40px);\n  line-height: clamp(30px, 4vw, 40px);\n  text-align: end;\n}\n.paragraph {\n  text-align: end;\n  width: 50%;\n}\n/* ----------- */\n.text {\n  text-align: end;\n  width: 100%;\n  padding-right: 25px;\n  display: block;\n  font-size: 48px;\n  line-height: 67px;\n  font-family: \"Gilmer Heavy\", sans-serif;\n  margin-bottom: 1rem;\n  color: var(--vt-c-white);\n  -webkit-text-stroke: 1px var(--vt-c-purple);\n  opacity: 1;\n  z-index: 2;\n}\n.cards {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  padding: 3rem 12rem;\n  margin-left: 3rem;\n  padding-right: 0;\n}\n.cards a {\n  position: relative;\n  z-index: 33;\n  margin-top: 0.5rem;\n  text-decoration: none;\n  color: var(--vt-c-purple);\n}\n.bgimg {\n  position: absolute;\n  width: 100%;\n  max-width: 35rem;\n}\n::v-deep(.img) {\n  position: absolute;\n  z-index: -1;\n  height: 100%;\n  object-fit: contain;\n  border-radius: 27px;\n}\n.bg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: #a78ded2f 0% 0% no-repeat padding-box;\n  border-radius: 27px;\n  opacity: 1;\n  transition: all 0.3s ease;\n}\n.card {\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: end;\n  /* background: var(--vt-c-light-purple)2f 0% 0% no-repeat padding-box; */\n  border: 1px solid var(--vt-c-purple);\n  border-radius: 27px;\n  width: 440px;\n  height: 270px;\n  transition: all 0.3s ease;\n}\n.shadow {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  transition: all 0.3s ease;\n}\n.card:hover .bg {\n  background: none;\n}\n.card:hover .shadow {\n  border-radius: 27px;\n  border: none;\n\n  box-shadow:\n    inset 0 0 12px #7448f1,\n    0 0 18px #7448f0;\n}\n\n/* ----------------- */\n@media screen and (max-width: 1400px) {\n  .card {\n    width: 365px;\n    height: 245px;\n  }\n  .bgimg {\n    width: 30rem;\n  }\n  .cards {\n    padding-left: 8rem;\n  }\n  .right {\n    padding-right: 8rem;\n  }\n}\n@media screen and (max-width: 1224px) {\n  .paragraph {\n    width: 75%;\n  }\n  .bgimg {\n    width: 30rem;\n  }\n  .cards {\n    padding-left: 5rem;\n  }\n  .right {\n    padding-right: 5rem;\n  }\n  .card {\n    width: 365px;\n    height: 245px;\n  }\n  .text {\n    font-size: 35px;\n    line-height: 40px;\n  }\n}\n@media screen and (max-width: 1090px) {\n  section {\n    flex-direction: column-reverse;\n  }\n  .card {\n    width: 300px;\n    height: 183px;\n    border-radius: 18px;\n  }\n  .bg {\n    border-radius: 18px;\n  }\n  .bgimg {\n    width: 25rem;\n  }\n  h2 {\n    text-align: center;\n    padding-bottom: 0;\n    margin-bottom: 0;\n  }\n  .right {\n    align-items: center;\n    padding: 1rem 1rem;\n    padding-left: 0;\n  }\n  .cards {\n    margin: auto;\n    padding: unset;\n    margin-top: 4rem;\n    width: 100%;\n  }\n  .paragraph {\n    text-align: center;\n  }\n}\n@media screen and (max-width: 900px) {\n  .paragraph {\n    width: 100%;\n  }\n\n  section {\n    flex-direction: column-reverse;\n    justify-content: center;\n    padding: 1rem 1.5rem;\n  }\n}\n@media screen and (max-width: 780px) {\n  .subParagraph {\n    display: none;\n  }\n  .text {\n    font-size: 35px;\n    line-height: 40px;\n  }\n  .bgimg {\n    width: 110%;\n    max-width: 25rem;\n  }\n}\n</style>\n","export default \"data:image/svg+xml,%3csvg%20id='Groupe_210'%20data-name='Groupe%20210'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='24.929'%20height='35.482'%20viewBox='0%200%2024.929%2035.482'%3e%3cdefs%3e%3cclipPath%20id='clip-path'%3e%3crect%20id='Rectangle_29'%20data-name='Rectangle%2029'%20width='24.929'%20height='35.482'%20fill='%23fff'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='Groupe_209'%20data-name='Groupe%20209'%20transform='translate(0%200)'%20clip-path='url(%23clip-path)'%3e%3cpath%20id='Tracé_611'%20data-name='Tracé%20611'%20d='M11.788.282.281,11.789a.959.959,0,0,0,1.356,1.356l9.869-9.869V34.523a.959.959,0,0,0,1.918,0V3.276l9.869,9.869a.959.959,0,0,0,1.356-1.358L13.142.28a.959.959,0,0,0-1.356,0Z'%20transform='translate(0%200)'%20fill='%23fff'/%3e%3c/g%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20id='Groupe_210'%20data-name='Groupe%20210'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='24.929'%20height='35.482'%20viewBox='0%200%2024.929%2035.482'%3e%3cdefs%3e%3cclipPath%20id='clip-path'%3e%3crect%20id='Rectangle_29'%20data-name='Rectangle%2029'%20width='24.929'%20height='35.482'%20fill='%237448ef'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20id='Groupe_209'%20data-name='Groupe%20209'%20transform='translate(0%200)'%20clip-path='url(%23clip-path)'%3e%3cpath%20id='Tracé_611'%20data-name='Tracé%20611'%20d='M11.788.282.281,11.789a.959.959,0,0,0,1.356,1.356l9.869-9.869V34.523a.959.959,0,0,0,1.918,0V3.276l9.869,9.869a.959.959,0,0,0,1.356-1.358L13.142.28a.959.959,0,0,0-1.356,0Z'%20transform='translate(0%200)'%20fill='%237448ef'/%3e%3c/g%3e%3c/svg%3e\"","export default \"__VITE_ASSET__zu99X4NC__\"","export default \"__VITE_ASSET__CPddQ78W__\"","export default \"__VITE_ASSET__CsqwA_YI__\"","export default \"__VITE_ASSET__6hIL8wk9__\"","export default \"__VITE_ASSET__wjYr95hQ__\"","export default \"__VITE_ASSET__DB8dh8$n__\"","<script lang=\"ts\" setup>\nimport caclVideo from \"../../assets/videos/credit/calculator.mp4\";\nimport calImg from \"../../assets/img/credit/calculator.png\";\nimport safe from \"../../assets/videos/credit/safe_deposit.mp4\";\nimport safeImg from \"../../assets/img/credit/safe_deposit.png\";\nimport teleVideo from \"../../assets/videos/credit/telephone_bank.mp4\";\nimport teleImg from \"../../assets/img/credit/telephone_bank.png\";\nimport { scrollToId } from \"~/helpers/functions/smoothScrool\";\nconst data: { video: string; bg: string }[] = [\n  {\n    video: caclVideo,\n    bg: calImg,\n  },\n  {\n    video: teleVideo,\n    bg: teleImg,\n  },\n  {\n    video: safe,\n    bg: safeImg,\n  },\n  {\n    video: teleVideo,\n    bg: teleImg,\n  },\n];\nconst { animationEnabled } = useCustom();\nconst animation = ref(animationEnabled);\n</script>\n<template>\n  <section>\n    <div class=\"title-container\">\n      <h1 class=\"title\">{{ $t(\"credit.firstSection.title\") }}</h1>\n      <p class=\"underTitle\">{{ $t(\"credit.firstSection.title\") }}</p>\n    </div>\n    <p class=\"paragraph mobile mobileText\">\n      {{ $t(\"credit.firstSection.mobileText\") }}\n    </p>\n\n    <div class=\"container\">\n      <div class=\"videos\">\n        <div\n          v-for=\"(item, index) in data\"\n          :key=\"index\"\n          :class=\"[\n            { 'last-video': index === data.length - 1 },\n            { mobile: index == 3 },\n            { desktop: index == 1 },\n          ]\"\n        >\n          <CommonVideoWithPlaceholder\n            :video-src=\"item.video\"\n            :placeholder=\"item.bg\"\n            class-video=\"video bg\"\n            class-placeholder=\"bg img\"\n            :is-playing=\"animation\"\n          />\n        </div>\n      </div>\n    </div>\n    <p class=\"paragraph\">{{ $t(\"credit.firstSection.paragraph\") }}</p>\n    <div class=\"bottom\">\n      <p class=\"subParagraph\">{{ $t(\"credit.firstSection.bottom\") }}</p>\n      <button class=\"got-to\" @click=\"scrollToId('#simulation')\">\n        <img\n          src=\"@/assets/img/custom/white-arrow.svg\"\n          class=\"arrow static\"\n          :alt=\"$t('alt.scrollToTop')\"\n        />\n        <img\n          src=\"@/assets/img/custom/purple-arrow.svg\"\n          class=\"arrow hover\"\n          :alt=\"$t('alt.scrollToTop')\"\n        />\n      </button>\n    </div>\n  </section>\n</template>\n<style scoped>\nsection {\n  overflow: hidden;\n  padding-bottom: 7rem;\n}\n.mobile {\n  display: none;\n}\n.subParagraph {\n  color: var(--vt-c-purple);\n}\n.bottom {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin-top: 3rem;\n}\n.got-to {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.arrow,\n.hover {\n  object-fit: contain;\n  rotate: 180deg;\n  padding: 0;\n\n  margin-left: 1px;\n  margin-bottom: 1px;\n}\n.hover {\n  display: none;\n}\n.got-to {\n  background-color: var(--vt-c-purple);\n  outline: none;\n  justify-self: center;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  transition: all 0.3s ease;\n  width: 56px;\n  height: 56px;\n}\n.got-to:hover {\n  box-shadow: 0px 3px 45px var(--vt-c-purple);\n  border: 2px solid var(--vt-c-purple);\n  background: transparent;\n}\n.got-to:hover .static {\n  display: none;\n}\n.got-to:hover .hover {\n  display: block;\n}\n.title-container {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.underTitle {\n  color: var(--vt-c-purple);\n  opacity: 0.1;\n  text-shadow: inset 0px 3px 6px #00000000;\n}\n.title {\n  padding-top: clamp(0px, 1vw, 15px);\n  margin-top: 0;\n}\n.videos ::v-deep(.bg) {\n  width: clamp(200px, 20vw, 402px);\n  height: auto;\n  position: relative;\n  object-fit: contain;\n  max-width: 100%;\n  z-index: -2;\n}\n.videos {\n  position: relative;\n  justify-content: center;\n  display: grid;\n  width: 70%;\n  margin: auto;\n  margin-top: -4vw;\n  grid-template-columns: repeat(3, 1fr);\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 1rem;\n}\n\n.paragraph {\n  text-align: center;\n  margin-top: 1rem;\n  width: 50%;\n  margin: auto;\n}\n\n@media screen and (max-width: 780px) {\n  .mobile {\n    display: block;\n  }\n\n  section {\n    padding: 1rem 2rem;\n    padding-bottom: 7rem;\n  }\n  .videos ::v-deep(.bg) {\n    width: 200px;\n    height: 150px;\n  }\n  .videos div {\n    display: flex;\n    justify-content: center;\n  }\n  .videos {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0;\n    justify-content: center;\n    width: 100%;\n    margin-top: 1rem;\n  }\n\n  .last-video {\n    grid-column: span 2;\n    margin-top: -2rem;\n  }\n\n  .paragraph {\n    margin-top: 2rem;\n    width: 100%;\n  }\n  .mobileText {\n    margin-top: 0rem;\n  }\n  .desktop {\n    display: none !important;\n  }\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { CreditPageSection1 } from \"#components\";\n\nconst { t } = useI18n();\n\nuseHead({\n  title: t(\"seo.credit.title\"),\n  meta: [\n    {\n      name: \"description\",\n      content: t(\"seo.credit.description\"),\n    },\n    { property: \"og:title\", content: t(\"seo.credit.title\") },\n    {\n      property: \"og:description\",\n      content: t(\"seo.credit.description\"),\n    },\n    {\n      property: \"og:url\",\n      content: \"https://www.tutassur.com/credit\",\n    },\n  ],\n});\n\n</script>\n<template>\n  <div>\n    <CreditPageSection1 />\n    <CreditPageConsumerCredit />\n    <CreditPageSimulation />\n    <CreditPageQuestion />\n    <CreditPageMyCredit />\n  </div>\n</template>\n"],"names":["_imports_0$2","_imports_1$1","t","useI18n","emit","__emit","imgBg","videoBg","animationEnabled","useCustom","animation","ref","isOpen","closeModal","openModal","watch","newVal","disableScrolling","enableScrolling","_imports_0$1","URL","handleMouseEnter","redirectTo","handleMouseLeave","onMounted","_imports_0","_imports_1","caclVideo","calImg","safe","safeImg","teleVideo","teleImg","data","useHead"],"mappings":"+XAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,sBAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,sBAAA,YAAA,GAAA,EAAA,2TCGT,KAAA,CAAE,EAAAC,CAAE,EAAIC,EAAQ,i7BCsBtB,MAAMC,EAAOC,0iBCzBEC,GAAA,2DCAAC,GAAA,wPCUT,KAAA,CAAE,iBAAAC,CAAiB,EAAIC,EAAU,EACjCC,EAAYC,EAAIH,CAAgB,EAChCI,EAASD,EAAI,EAAK,EAClBE,EAAa,IAAM,CACvBD,EAAO,MAAQ,EACjB,EACME,EAAY,IAAM,CACtBF,EAAO,MAAQ,EACjB,EACM,OAAAG,EAAAH,EAASI,GAAW,CACpBA,EACeC,EAAA,EAEDC,EAAA,CAClB,CACD,gyDCxBK,KAAA,CAAE,EAAAhB,CAAE,EAAIC,EAAQ,m0ECDPgB,GAAA,q8ECGT,MAAAC,EAAM,oDAEN,CAAE,EAAAlB,CAAE,EAAIC,EAAQ,EAChB,CAAE,iBAAAK,CAAiB,EAAIC,EAAU,EACjCC,EAAYC,EAAI,EAAK,EACrBU,EAAmB,IAAM,CACxBb,IACLE,EAAU,MAAQ,GACpB,EACMY,EAAa,IAAM,CACvB,OAAO,SAAS,KAAOF,CACzB,EACMG,EAAmB,IAAM,CAC7Bb,EAAU,MAAQ,EACpB,EAEA,OAAAc,EAAU,IAAM,CACG,OAAO,WAAW,oBAAoB,EAAE,SACzChB,IACdE,EAAU,MAAQ,GACpB,CACD,u2BCxBce,GAAA,kzBCAAC,GAAA,wzBCAAC,GAAA,2DCAAC,GAAA,2DCAAC,GAAA,6DCAAC,GAAA,6DCAAC,EAAA,+DCAAC,EAAA,uVCQf,MAAMC,EAAwC,CAC5C,CACE,MAAON,GACP,GAAIC,EACN,EACA,CACE,MAAOG,EACP,GAAIC,CACN,EACA,CACE,MAAOH,GACP,GAAIC,EACN,EACA,CACE,MAAOC,EACP,GAAIC,CAAA,CAER,EACM,CAAE,iBAAAxB,CAAiB,EAAIC,EAAU,EACjCC,EAAYC,EAAIH,CAAgB,g8BCxBhC,KAAA,CAAE,EAAAN,CAAE,EAAIC,EAAQ,EAEd,OAAA+B,EAAA,CACN,MAAOhC,EAAE,kBAAkB,EAC3B,KAAM,CACJ,CACE,KAAM,cACN,QAASA,EAAE,wBAAwB,CACrC,EACA,CAAE,SAAU,WAAY,QAASA,EAAE,kBAAkB,CAAE,EACvD,CACE,SAAU,iBACV,QAASA,EAAE,wBAAwB,CACrC,EACA,CACE,SAAU,SACV,QAAS,iCAAA,CACX,CACF,CACD"}