{"version":3,"file":"DfSr-HLN.js","sources":["../../../../components/Map.vue","../../../../pages/our-locations.vue"],"sourcesContent":["<script setup>\nimport { onMounted } from \"vue\"; \n\n\nonMounted(() => {\n  const mapContainer = document.querySelector('.map-container');\n  mapContainer.addEventListener('scroll', () => {\n    mapContainer.style.setProperty('--scroll', `${mapContainer.scrollLeft / (mapContainer.scrollWidth - mapContainer.offsetWidth) * 100}%`);\n  });\n  // Create map instance\n  var chart = am4core.create(\"map\", am4maps.MapChart);\n\n  // Set map definition\n  chart.geodata = am4geodata_worldLow;\n\n  // Set projection\n  chart.projection = new am4maps.projections.Miller();\n\n  // Create map polygon series\n  var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());\n\n  // Exclude Antartica\n  polygonSeries.exclude = [\"AQ\"];\n\n  // Make map load polygon (like country names) data from GeoJSON\n  polygonSeries.useGeodata = true;\n\n  // Configure series\n  var polygonTemplate = polygonSeries.mapPolygons.template;\n  polygonTemplate.tooltipText = \"{name}\";\n  polygonTemplate.fill = am4core.color(\"#ffffff\");\n\n  // Add border for each country\n  polygonTemplate.stroke = am4core.color(\"#D9D9D9\");\n  polygonTemplate.strokeWidth = 1;\n\n  // Create hover state and set alternative fill color\n  var hs = polygonTemplate.states.create(\"hover\");\n  hs.properties.fill = am4core.color(\"#D9D9D9\");\n\n  chart.chartContainer.wheelable = false;\n\n  // Disable zooming and panning on mobile\n  chart.chartContainer.wheelable = false;\n  chart.seriesContainer.draggable = false;\n  chart.seriesContainer.resizable = false;\n  \n  // Create map image series\n  var imageSeries = chart.series.push(new am4maps.MapImageSeries());\n\n  // Create map image\n  var imageSeriesTemplate = imageSeries.mapImages.template;\n  var circle = imageSeriesTemplate.createChild(am4core.Circle);\n  circle.radius = 6;\n  circle.fill = am4core.color(\"#FF9841\");\n  circle.stroke = am4core.color(\"#FFFFFF\");\n  circle.strokeWidth = 2;\n  circle.nonScaling = true;\n  circle.tooltipText = \"{title}\";\n\n  // Set property fields\n  imageSeriesTemplate.propertyFields.latitude = \"latitude\";\n  imageSeriesTemplate.propertyFields.longitude = \"longitude\";\n\n  // Set data\n  var cities = [\n    { title: \"Paris\", latitude: 48.856744, longitude: 2.3514226 },\n    { title: \"Ecublens\", latitude: 46.5285839, longitude: 6.5240907 },\n    { title: \"Hanoi\", latitude: 21.0227384, longitude: 105.8163641 },\n    { title: \"Ho Chi Minh City\", latitude: 10.7546181, longitude: 106.3655708 },\n    { title: \"Sydney\", latitude: -33.8478053, longitude: 150.6023296 },\n    { title: \"New York\", latitude: 40.6970193, longitude: -74.3093208 },\n    { title: \"Los Angeles\", latitude: 34.0200393, longitude: -118.7413776 },\n  ];\n\n  // Add data to image series\n  imageSeries.data = cities;\n});\n\n</script>\n\n<template>\n  <section class=\"rounded-[48px] relative\">\n    <div class=\"map-container\">\n        <div data-aos=\"fade-up\" id=\"map\"></div>\n    </div>\n  </section>\n</template>\n\n<style>\n#map {\n  width: 100%;\n  height: 100vh;\n}\n@media only screen and (max-width: 768px){\n  #map {\n    width: 200%;\n    height: 50vh;\n  }\n  .map-container {\n    display: block;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n  }\n  .map-container::-webkit-scrollbar {\n    width: 5px;\n    height: 8px;\n    background-color: #FFFFFF;\n    border-radius: 4px;\n  }\n\n  .map-container::-webkit-scrollbar-thumb {\n    background: #F67D30;\n    border-radius: 4px;\n  }\n}\n</style>\n","<script setup>\nimport { scrollToTitle } from \"@/composables/commonFunction.js\";\nconst seoTitle = \"MIRASOFT - Our Locations\";\nconst seoDescription = \"\";\n\nuseHead({\n  title: seoTitle,\n  meta: [\n    { name: \"description\", content: seoDescription },\n    { name: \"og:title\", content: seoTitle },\n    { name: \"og:description\", content: seoDescription },\n    { name: \"keywords\", content: \"Our Locations\" },\n  ],\n});\n</script>\n\n<template id=\"contact-us\">\n  <div class=\"px-12 max-md:px-6 py-10\">\n    <Map />\n    <section class=\"mt-[80px] 2xl:container m-auto\">\n      <div class=\"max-xl:hidden absolute ml-12 -mt-16 max-2xl:mt-0 max-2xl:ml-0 max-2xl:w-[70px]\">\n        <nuxt-picture\n          loading=\"lazy\"\n          src=\"/images/like.svg\"\n          :imgAttrs=\"{ class: 'w-full', alt: 'home-banner' }\"\n          class=\"w-full\"\n        />\n      </div>\n      <h1 class=\"pb-5 font-extrabold heading-1\" data-aos=\"fade-up\">Your business</h1>\n      <h1 class=\"pb-5 font-extrabold heading-1\" data-aos=\"fade-up\">Partner in trust</h1>\n      <div class=\"flex max-lg:flex-col max-md:items-center gap-4\" data-aos=\"fade-up\">\n        <div\n          class=\"w-[65%] max-lg:w-full justify-center items-center max-lg:order-1\"\n          data-aos=\"fade-up\"\n          data-aos-delay=\"200\"\n        >\n          <div class=\"max-lg:hidden items-end gap-4 max-sm:flex-col max-sm:items-start\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/img.png\"\n              :imgAttrs=\"{ alt: 'hero', class: 'w-full' }\"\n              class=\"w-full\"\n            />\n          </div>\n          <div class=\"lg:hidden\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/bg-1.png\"\n              :imgAttrs=\"{ class: 'w-full', alt: 'home-banner-mobile' }\"\n              class=\"w-full\"\n            />\n          </div>\n        </div>\n        <div class=\"w-[35%] max-lg:w-full bg-white p-6 rounded-3xl max-lg:my-5\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n          <div class=\"px-10 max-md:px-0 max-lg:px-32 max-xl:px-1\">\n            <div class=\"mt-36 max-md:mt-0 max-lg:mt-10 max-xl:mt-20\">\n              <h4 class=\"font-semibold text-[36px] max-md:text-[20px] text-black\">HEADQUARTERS</h4>\n            </div>\n            <div class=\"gap-2 mt-[54px] max-md:mt-10\">\n              <p class=\"text-[18px] max-md:text-[14px]\">\n                4th Floor - GTC Building, No. 69, To Huu Street, Van Phuc, Ha Dong, Hanoi\n              </p>\n              <p class=\"text-[18px] max-md:text-[14px] py-2\">Hotline: +84 935 10 3636</p>\n              <p class=\"text-[18px] max-md:text-[14px]\">Email : contact@mirasoft.tech</p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"flex max-lg:flex-col max-md:items-center gap-4 pt-5\" data-aos=\"fade-up\">\n        <div class=\"w-[40%] max-lg:w-full bg-white p-6 rounded-3xl max-lg:my-5\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n          <div class=\"px-10 max-md:px-0 max-lg:px-36 max-xl:px-5\">\n            <div class=\"mt-36 max-md:mt-0 max-lg:mt-10 max-xl:mt-14\">\n              <h4 class=\"font-semibold text-[36px] max-md:text-[20px] text-black uppercase\">ho chi minh branch</h4>\n            </div>\n            <div class=\"gap-2 mt-[54px] max-md:mt-10\">\n              <p class=\"text-[18px] max-md:text-[14px]\">\n                211, 9A Trung Son Street, Binh Hung Ward, Binh Chanh District, Ho Chi Minh City, Vietnam\n              </p>\n              <p class=\"text-[18px] max-md:text-[14px] py-2\">Hotline :+84 24 36 436 999</p>\n              <p class=\"text-[18px] max-md:text-[14px]\">Email : contact@mirasoft.tech</p>\n            </div>\n          </div>\n        </div>\n        <div class=\"w-[60%] max-lg:w-full justify-center items-center\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n          <div class=\"max-lg:hidden items-end gap-4 max-sm:flex-col max-sm:items-start\">\n            <nuxt-picture loading=\"lazy\" src=\"/images/bg.png\" :imgAttrs=\"{ alt: 'hero', class: 'w-full' }\" />\n          </div>\n          <div class=\"lg:hidden\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/img-1.png\"\n              :imgAttrs=\"{ class: 'w-full', alt: 'home-banner-mobile' }\"\n              class=\"w-full\"\n            />\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <Excellence class=\"mt-[80px]\" />\n  </div>\n</template>\n"],"names":["onMounted","mapContainer","chart","polygonSeries","polygonTemplate","hs","imageSeries","imageSeriesTemplate","circle","cities","seoTitle","seoDescription","useHead"],"mappings":"+QAIA,OAAAA,EAAU,IAAM,CACd,MAAMC,EAAe,SAAS,cAAc,gBAAgB,EAC5DA,EAAa,iBAAiB,SAAU,IAAM,CAC5CA,EAAa,MAAM,YAAY,WAAY,GAAGA,EAAa,YAAcA,EAAa,YAAcA,EAAa,aAAe,GAAG,GAAG,CAC1I,CAAG,EAED,IAAIC,EAAQ,QAAQ,OAAO,MAAO,QAAQ,QAAQ,EAGlDA,EAAM,QAAU,oBAGhBA,EAAM,WAAa,IAAI,QAAQ,YAAY,OAG3C,IAAIC,EAAgBD,EAAM,OAAO,KAAK,IAAI,QAAQ,gBAAkB,EAGpEC,EAAc,QAAU,CAAC,IAAI,EAG7BA,EAAc,WAAa,GAG3B,IAAIC,EAAkBD,EAAc,YAAY,SAChDC,EAAgB,YAAc,SAC9BA,EAAgB,KAAO,QAAQ,MAAM,SAAS,EAG9CA,EAAgB,OAAS,QAAQ,MAAM,SAAS,EAChDA,EAAgB,YAAc,EAG9B,IAAIC,EAAKD,EAAgB,OAAO,OAAO,OAAO,EAC9CC,EAAG,WAAW,KAAO,QAAQ,MAAM,SAAS,EAE5CH,EAAM,eAAe,UAAY,GAGjCA,EAAM,eAAe,UAAY,GACjCA,EAAM,gBAAgB,UAAY,GAClCA,EAAM,gBAAgB,UAAY,GAGlC,IAAII,EAAcJ,EAAM,OAAO,KAAK,IAAI,QAAQ,cAAgB,EAG5DK,EAAsBD,EAAY,UAAU,SAC5CE,EAASD,EAAoB,YAAY,QAAQ,MAAM,EAC3DC,EAAO,OAAS,EAChBA,EAAO,KAAO,QAAQ,MAAM,SAAS,EACrCA,EAAO,OAAS,QAAQ,MAAM,SAAS,EACvCA,EAAO,YAAc,EACrBA,EAAO,WAAa,GACpBA,EAAO,YAAc,UAGrBD,EAAoB,eAAe,SAAW,WAC9CA,EAAoB,eAAe,UAAY,YAG/C,IAAIE,EAAS,CACX,CAAE,MAAO,QAAS,SAAU,UAAW,UAAW,SAAW,EAC7D,CAAE,MAAO,WAAY,SAAU,WAAY,UAAW,SAAW,EACjE,CAAE,MAAO,QAAS,SAAU,WAAY,UAAW,WAAa,EAChE,CAAE,MAAO,mBAAoB,SAAU,WAAY,UAAW,WAAa,EAC3E,CAAE,MAAO,SAAU,SAAU,YAAa,UAAW,WAAa,EAClE,CAAE,MAAO,WAAY,SAAU,WAAY,UAAW,WAAa,EACnE,CAAE,MAAO,cAAe,SAAU,WAAY,UAAW,YAAc,CAC3E,EAGEH,EAAY,KAAOG,CACrB,CAAC,oxEC3EKC,EAAW,2BACXC,EAAiB,sCAEvB,OAAAC,EAAQ,CACN,MAAOF,EACP,KAAM,CACJ,CAAE,KAAM,cAAe,QAASC,CAAgB,EAChD,CAAE,KAAM,WAAY,QAASD,CAAU,EACvC,CAAE,KAAM,iBAAkB,QAASC,CAAgB,EACnD,CAAE,KAAM,WAAY,QAAS,eAAiB,CAC/C,CACH,CAAC"}