{"version":3,"file":"BLRXzyWC.js","sources":["../../../../components/CommonQuestion.vue","../../../../components/Slide.vue","../../../../pages/index.vue"],"sourcesContent":["<script setup>\nconst activeKey = ref(0);\nconst questions = [\n  {\n    q: \"What are outsourcing services?\",\n    a: `Outsourcing services involve hiring proficient professionals to handle operational or administrative tasks within your business. These tasks, though feasible in-house, are delegated to external teams to access top talent without the burden of onboarding and managing them. This cost-effective solution enables focus on core business areas, fostering growth and development.`,\n  },\n  {\n    q: \"Why outsourcing?\",\n    a: \"Outsourcing software development saves costs on offices and hardware, allows focus on core objectives, provides global expertise, frees in-house teams for primary tasks, and simplifies management with dedicated leaders, enabling product owners to focus on strategy while staying informed on technology.\",\n  },\n  {\n    q: \"who uses outsourcing?\",\n    a: `Outsourcing is utilized by businesses of all sizes across diverse industries. Virtually every industry benefits from outsourcing, as it enables the completion of tasks that don't necessitate direct customer or business interaction, such as accounting and payroll.`,\n  },\n  {\n    q: \"Does outsourcing reduce risk?\",\n    a: \"Consideration of time zone, cultural environment, and language is paramount when managing and outsourcing development teams. Your outsourcing provider must comprehend your requirements clearly to prevent project delays. Competency in understanding your needs ensures smooth project completion.\",\n  },\n  {\n    q: \"key issues to consider before outsourcing a service\",\n    a: \"Consideration of time zone, cultural environment, and language is paramount when managing and outsourcing development teams. Your outsourcing provider must comprehend your requirements clearly to prevent project delays. Competency in understanding your needs ensures smooth project completion.\",\n  },\n];\n</script>\n\n<template>\n  <section>\n    <div class=\"flex p-14 max-lg:px-4 max-lg:py-6 max-lg:flex-col\" data-aos=\"fade-up\">\n      <div class=\"flex-1\">\n        <h2 class=\"text-left max-md:text-center max-md:text-[20px]\">Frequently asked questions</h2>\n      </div>\n\n      <div class=\"flex-1\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n        <a-collapse\n          v-model:activeKey=\"activeKey\"\n          :bordered=\"false\"\n          expandIconPosition=\"right\"\n          :accordion=\"false\"\n          class=\"ant-collapse-borderless--custom !bg-transparent\"\n        >\n          <template #expandIcon=\"{ isActive }\">\n            <svg\n              v-if=\"isActive\"\n              width=\"32\"\n              height=\"32\"\n              viewBox=\"0 0 32 32\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"cursor-pointer\"\n            >\n              <path d=\"M21.334 16L10.6673 16\" stroke=\"#ffff\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\n            </svg>\n            <svg v-else xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path\n                d=\"M5 12H12M12 12H19M12 12V5M12 12V19\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </template>\n          <a-collapse-panel v-for=\"(question, index) in questions\" :key=\"index\" :header=\"question.q\" class=\"text-white\">\n            <div v-html=\"question.a\" class=\"text-white text-[18px] max-md:text-[14px] font-medium text-justify opacity-70\"></div>\n          </a-collapse-panel>\n        </a-collapse>\n      </div>\n    </div>\n  </section>\n</template>\n","<script>\nexport default {\n  data() {\n    return {\n      slides: [\n        {\n          title: \"Leaders in Technology\",\n          content:\n            \"Our company stands at the forefront of technological advancements. We continuously invest in staying ahead of the curve, ensuring that our solutions leverage the latest and most effective technologies. By choosing us, you align your business with leaders in the industry, ready to navigate the ever-changing landscape of technology.\"\n        },\n        {\n          title: \"Tailored Solutions\",\n          content:\n            \"Recognizing that each business is unique, we pride ourselves on providing customized solutions. Our team of experienced tech professionals takes the time to understand your specific business needs, challenges, and goals. This personalized approach ensures that the solutions we deliver are not only effective but also seamlessly integrate into your existing processes.\"\n        },\n        {\n          title: \"Customer-Focused Approach\",\n          content:\n            \"Your satisfaction is our priority. We understand that technology is a means to an end, and that end is your business success. Our customer-focused approach involves active listening to your needs, concerns, and aspirations. This ensures that our solutions not only address immediate requirements but also contribute to the long-term growth and prosperity of your business.\"\n        },\n        {\n          title: \"Continuous Support\",\n          content:\n            \"Our commitment to your success doesn't end with the delivery of a solution. We provide continuous support to ensure that our technology solutions evolve with your business. Whether it's troubleshooting, updates, or scaling up, our support team is dedicated to being there for you every step of the way.\"\n        }\n      ],\n      currentSlide: 0\n    };\n  },\n  methods: {\n    nextSlide() {\n      this.$refs.carousel.next();\n    },\n    prevSlide() {\n      this.$refs.carousel.prev();\n    }\n  }\n};\n</script>\n\n<template>\n  <section id=\"why-choose-us\" class=\"mt-[80px] 2xl:container m-auto\">\n    <div class=\"md:bg-[url('/images/why-choose-us-bg-fix.png')] bg-cover bg-no-repeat\" data-aos=\"fade-up\">\n      <h2 class=\"heading-1\">WHY choose US?</h2>\n      <div class=\"flex justify-center items-center mt-[80px] pb-12 max-md:mt-[50px] max-lg:flex-col-reverse gap-4\">\n        <div class=\"w-1/2 flex gap-3 justify-center\">\n          <div\n            class=\"w-[48px] h-[48px] border border-[rgba(255,255,255,0.12)] hover:bg-white cursor-pointer rounded-full flex justify-center items-center\"\n            @click=\"prevSlide\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"white\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"hover:stroke-black\">\n              <polyline points=\"12 8 8 12 12 16\"></polyline>\n              <line x1=\"16\" y1=\"12\" x2=\"8\" y2=\"12\"></line>\n            </svg>\n          </div>\n          <div\n            class=\"w-[48px] h-[48px] border border-[rgba(255,255,255,0.12)] hover:bg-white cursor-pointer rounded-full flex justify-center items-center\"\n            @click=\"nextSlide\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"white\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"hover:stroke-black\">\n              <polyline points=\"12 8 16 12 12 16\"></polyline>\n              <line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"></line>\n            </svg>\n          </div>\n        </div>\n        <div class=\"w-1/2 max-lg:w-full\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n          <a-carousel ref=\"carousel\" :dots=\"false\" autoplay>\n            <div v-for=\"(slide, index) in slides\" :key=\"index\">\n              <h4>{{ slide.title }}</h4>\n              <p class=\"description max-w-[620px] text-left max-lg:text-center max-md:text-left mt-3 min-h-[150px]\">\n                {{ slide.content }}\n              </p>\n            </div>\n          </a-carousel>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n:deep(.slick-slide) {\n  height: 160px;\n  line-height: 160px;\n  overflow: hidden;\n}\n\n:deep(.slick-slide h4) {\n  color: #fff;\n}\n\n:deep(.slick-slide p) {\n  color: #fff;\n}\n</style>","<script setup>\nconst seoTitle = \"MIRASOFT - Outsourcing\";\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: \"Outsourcing\" },\n  ],\n});\n\nconst brandCooperationList = [\n  {\n    title: \"\",\n    image: \"/images/logo/layer_1.png\",\n  },\n  {\n    title: \"\",\n    image: \"/images/logo/layer_2.png\",\n  },\n  {\n    title: \"\",\n    image: \"/images/logo/layer_3.png\",\n  },\n  {\n    title: \"\",\n    image: \"/images/logo/layer_4.png\",\n  },\n  {\n    title: \"\",\n    image: \"/images/logo/layer_5.png\",\n  },\n  {\n    title: \"\",\n    image: \"/images/logo/layer_6.png\",\n  },\n  {\n    title: \"\",\n    image: \"/images/logo/layer_7.png\",\n  },\n  {\n    title: \"Join us\",\n    image: \"/images/arrow-down.svg\",\n  },\n];\n\nconst listTag = [\n  {\n    title: \"it Integration\",\n  },\n  {\n    title: \"Web Development\",\n  },\n  {\n    icon: \"/images/cube.svg\",\n  },\n  {\n    title: \"IOT\",\n  },\n  {\n    title: \"Blockchain\",\n  },\n  {\n    icon: \"/images/abstract.svg\",\n  },\n  {\n    title: \"AI Solutions\",\n  },\n  {\n    title: \"App Development\",\n  },\n];\n\nconst services = [\n  {\n    index: 1,\n    icon: \"/images/customers.svg\",\n    title: \"1000+\",\n    des: \"Customers\",\n  },\n  {\n    index: 2,\n    icon: \"/images/loyal-customers.svg\",\n    title: \">90%\",\n    des: \"Loyal Customers\",\n  },\n  {\n    index: 3,\n    icon: \"/images/clock.svg\",\n    title: \"16+\",\n    des: \"Years of Experience\",\n  },\n  {\n    index: 4,\n    icon: \"/images/file.svg\",\n    title: \"500+\",\n    des: \"Staff Members\",\n  },\n];\n\nconst listCliens = [\n  {\n    image: \"/images/our-cliens/layer_1.svg\",\n  },\n  {\n    image: \"/images/our-cliens/mobifone-white.svg\",\n  },\n  {\n    image: \"/images/our-cliens/viettel-white.svg\",\n  },\n  {\n    image: \"/images/our-cliens/xmlid_1_.svg\",\n  },\n  {\n    image: \"/images/our-cliens/cj-logo-logo-white.svg\",\n  },\n  {\n    image: \"/images/our-cliens/path7.svg\",\n  },\n  {\n    image: \"/images/our-cliens/highlands_coffee_logo-white.svg\",\n  },\n  {\n    image: \"/images/our-cliens/chicco-logo-white.svg\",\n  },\n  {\n    image: \"/images/our-cliens/group.svg\",\n  },\n  {\n    image: \"/images/our-cliens/nike-logo-white.svg\",\n  },\n  {\n    image: \"/images/our-cliens/zara_logo.svg\",\n  },\n  {\n    image: \"/images/our-cliens/aldo-logo-white.svg\",\n  },\n];\n</script>\n\n<template>\n  <div class=\"home-page px-16 max-xl:px-4 py-10\">\n    <section class=\"2xl:container m-auto\">\n      <div class=\"flex max-lg:flex-col max-md:items-center gap-4\">\n        <div class=\"w-[55%] bg-white rounded-3xl overflow-hidden p-16 relative max-xl:p-4 max-lg:w-full\"\n          data-aos=\"fade-right\">\n          <div class=\"flex gap-[32px] items-center\">\n            <nuxt-picture loading=\"lazy\" src=\"/images/lllustration-shapes.svg\" width=\"60px\"\n              :imgAttrs=\"{ alt: 'icon' }\" />\n            <p class=\"uppercase text-[18px] font-semibold\">technology solutions</p>\n          </div>\n          <div class=\"mt-[70px] max-sm:mt-6\">\n            <nuxt-picture loading=\"lazy\" src=\"/images/heading.png\" class=\"picture\"\n              :imgAttrs=\"{ alt: 'heading', class: 'w-full max-sm:w-[295px]' }\" />\n          </div>\n          <div class=\"lg:absolute left-16 bottom-16 max-lg:mt-3\">\n            <nuxt-link to=\"/contact\">\n              <button class=\"primary uppercase max-sm:w-full\" aria-label=\"see-more\">Let's start with MIRAsoft</button>\n            </nuxt-link>\n          </div>\n        </div>\n        <div class=\"w-[45%] max-lg:hidden rounded-3xl overflow-hidden\" data-aos=\"fade-left\">\n          <nuxt-picture loading=\"lazy\" src=\"/images/img-boxxy2.png\" class=\"picture w-full\"\n            :imgAttrs=\"{ class: 'w-full', alt: 'cammera' }\" />\n        </div>\n      </div>\n      <div class=\"flex max-lg:flex-col gap-4 mt-4\">\n        <div class=\"w-[55%] max-lg:w-full bg-[#F67D30] p-6 rounded-3xl relative flex justify-center items-center\"\n          data-aos=\"fade-up\" data-aos-delay=\"200\">\n          <div class=\"flex items-end gap-4 max-sm:flex-col max-sm:items-start\">\n            <nuxt-picture loading=\"lazy\" src=\"/images/hero-photo.png\"\n              :imgAttrs=\"{ alt: 'hero', class: 'w-full max-md:w-[122px]' }\" />\n            <h2 class=\"text-[34px] max-sm:text-[20px] font-bold\">Expanded options are available</h2>\n          </div>\n\n          <div class=\"flex items-center gap-4 absolute top-6 right-6\">\n            <p class=\"uppercase text-right text-white\">\n              Explore <br />\n              MORE\n            </p>\n            <div class=\"w-fit p-3 rounded-[50%] bg-white\">\n              <nuxt-link to=\"/services\">\n                <nuxt-picture loading=\"lazy\" src=\"/images/logo.svg\" width=\"24px\" :imgAttrs=\"{ alt: 'icon' }\" />\n              </nuxt-link>\n            </div>\n          </div>\n        </div>\n        <div class=\"w-[45%] max-lg:w-full bg-white p-6 rounded-3xl\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n          <div class=\"flex justify-between items-center\">\n            <div class=\"flex gap-3 items-center\">\n              <nuxt-picture loading=\"lazy\" src=\"/images/90.svg\" width=\"100%\" :imgAttrs=\"{ alt: '90%' }\" />\n              <p class=\"font-medium text-[14px] max-sm:text-[12px]\">LOYAL <br />CUSTOMERS</p>\n            </div>\n            <div class=\"flex max-md:hidden\">\n              <nuxt-picture loading=\"lazy\" src=\"/images/img-avatar-women.png\" :img-attrs=\"{ alt: 'avatar women' }\" />\n              <nuxt-picture loading=\"lazy\" src=\"/images/img-avatar.png\" :img-attrs=\"{ alt: 'avatar women' }\"\n                class=\"-translate-x-5\" />\n            </div>\n          </div>\n          <div class=\"flex flex-wrap gap-2 mt-[54px]\">\n            <div v-for=\"tag in listTag\">\n              <div v-if=\"tag.title\" class=\"border boroder-[#0B0B0B] px-[19px] py-[10px] rounded-3xl uppercase\">\n                <p>{{ tag.title }}</p>\n              </div>\n              <div v-else\n                class=\"w-[42px] h-[42px] rounded-[50%] border boroder-[#0B0B0B] flex justify-center items-center\">\n                <nuxt-picture loading=\"lazy\" :src=\"tag.icon\" width=\"100%\" :imgAttrs=\"{ alt: 'icon' }\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section id=\"about-us\" class=\"mt-[80px] 2xl:container m-auto\">\n      <div class=\"md:bg-[url('/images/about-us-bg-fix.png')] bg-contain bg-no-repeat\">\n        <div data-aos=\"fade-up\">\n          <h2 class=\"heading-1\">About us</h2>\n        </div>\n        <div class=\"description max-w-[478px] mx-auto mt-[75px] text-justify\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n          Established in 2007, Mirasoft has evolved into a leading digital transformation provider, distinguished by our\n          expertise in design and development. We envision a digital future for your business, leveraging cutting-edge\n          technology, responsive design, and creating unforgettable user experiences.\n        </div>\n\n        <div class=\"text-center mt-[100px]\" data-aos=\"fade-up\">\n          <h2 class=\"heading-2\">BRands we work with</h2>\n        </div>\n\n        <div class=\"grid grid-cols-4 gap-4 max-lg:grid-cols-2 mt-[100px] max-md:relative\">\n          <div class=\"brand-cooperation-item min-h-[275px] max-sm:min-h-[150px]\"\n            v-for=\"(brandCooperation, index) in brandCooperationList\" :key=\"index\"\n            :class=\"brandCooperation.title !== '' && 'bg-[#F67D30] !border-[#F67D30]'\" data-aos=\"fade-up\"\n            :data-aos-delay=\"`${index}00`\">\n            <nuxt-picture loading=\"lazy\" :src=\"brandCooperation.image\" class=\"max-md:w-[57px]\"\n              :imgAttrs=\"{ alt: brandCooperation.title }\" v-if=\"brandCooperation.title === ''\" />\n            <div class=\"text-center\" v-else>\n              <h2 class=\"uppercase text-[34px] max-md:text-[20px]\">{{ brandCooperation.title }}</h2>\n              <div\n                class=\"mx-auto w-[48px] h-[48px] border border-white rounded-[50%] flex justify-center items-center max-md:absolute max-md:border-none max-md:right-1 max-md:bottom-1\">\n                <nuxt-link to=\"/services\">\n                  <nuxt-picture loading=\"lazy\" :src=\"brandCooperation.image\" width=\"24px\" height=\"24px\"\n                    :imgAttrs=\"{ alt: 'arrow-down' }\" />\n                </nuxt-link>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section id=\"vision\" class=\"mt-[80px] 2xl:container mx-auto\" data-aos=\"fade-up\">\n      <div class=\"flex max-xl:flex-col\">\n        <div class=\"w-1/2 max-xl:w-full flex\">\n          <div class=\"flex gap-8 max-md:gap-3 flex-wrap justify-center\">\n            <div\n              class=\"w-[calc((100%-64px)/2)] max-md:w-[calc((100%-12px)/2)] flex flex-col justify-center items-center gap-4 max-md:gap-1 border-0 rounded-[20px] p-[40px] max-md:p-3\"\n              v-for=\"(service, index) in services\" :key=\"index\" :class=\"`${index % 3 !== 0 ? 'bg-[#F67D30]' : 'bg-white'}\n                ${index === 1 || index === 3 ? 'transform translate-y-10' : ''}`\">\n              <nuxt-picture loading=\"lazy\" :src=\"service.icon\" width=\"70\" height=\"70\" :imgAttrs=\"{ alt: 'user' }\"\n                class=\"max-md:max-w-[41px]\" />\n              <h4 class=\"text-[36px] max-md:text-[20px] font-bold text-[#120F1F]\"\n                :class=\"index % 3 !== 0 ? 'text-white' : 'text-black'\">\n                {{ service.title }}\n              </h4>\n              <p class=\"description text-center !font-semibold uppercase\"\n                :class=\"index % 3 !== 0 ? 'text-white' : '!text-black'\">\n                {{ service.des }}\n              </p>\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"w-1/2 max-xl:w-full max-xl:mt-16 flex flex-col gap-[83px] max-md:gap-[30px] justify-center items-center\">\n          <div class=\"max-w-[478px]\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n            <h2 class=\"heading-2\">vision</h2>\n            <p class=\"description mt-7 leading-6\">\n              Our vision is to be the leading global technology outsourcing partner, empowering businesses worldwide\n              with innovative solutions and seamless digital transformations, while contributing to the growth and\n              prosperity of Vietnam's technology ecosystem.\n            </p>\n          </div>\n          <div class=\"max-w-[478px]\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n            <h2 class=\"heading-2\">mission</h2>\n            <p class=\"description mt-7 leading-6\">\n              We want to empower global businesses with innovative technology solutions, driving success through\n              excellence, collaboration, and a commitment to the global's technology ecosystem.\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section id=\"core-value\" class=\"mt-[100px] 2xl:container m-auto\">\n      <div class=\"flex gap-4 max-xl:flex-col\">\n        <div\n          class=\"w-1/2 max-xl:w-full min-h-[440px] bg-[url('/images/core-value/price-card-main.png')] \n          max-md:bg-[url('/images/core-value/price-card-mobie.png')] bg-no-repeat bg-cover bg-right px-10 py-8 rounded-3xl\"\n          data-aos=\"fade-up\" data-aos-delay=\"100\">\n          <h2 class=\"heading-3\">core values</h2>\n          <div class=\"mt-10 max-w-[386px]\">\n            <h4 class=\"uppercase heading-4\">Innovation</h4>\n            <p class=\"mt-6 text-[18px] max-md:text-[14px] leading-[25.2px] font-normal text-white\">\n              Committed to innovation, exploring new ideas and technologies to empower and advance our clients.\n              Constantly pushing boundaries, we strive to offer groundbreaking solutions that drive progress and\n              success.\n            </p>\n          </div>\n        </div>\n        <div class=\"w-1/2 max-xl:w-full flex items-end gap-4 max-sm:flex-col max-xl:mt-3\" data-aos=\"fade-up\">\n          <div class=\"w-1/2 max-sm:w-full md:min-h-[375px] px-14 py-11 bg-[#F67D30] rounded-3xl\" data-aos-delay=\"200\">\n            <h4 class=\"heading-4 uppercase\">Ethics</h4>\n            <p class=\"text-white text-[18px] max-md:text-[14px] leading-[25.2px] font-normal mt-6\">\n              We prioritize ethics in all business activities, ensuring integrity and transparency in our partnerships.\n            </p>\n          </div>\n          <div class=\"w-1/2 max-sm:w-full md:h-[375px] px-14 py-11 bg-white rounded-3xl\" data-aos-delay=\"300\">\n            <h4 class=\"heading-4 !text-black uppercase\">Meticulousness</h4>\n            <p class=\"text-[18px] max-md:text-[14px] leading-[25.2px] font-normal mt-6\">\n              We prioritize precision and excellence, ensuring meticulous attention to detail in every task for maximum\n              client satisfaction.\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section id=\"our-services\" class=\"mt-[80px] 2xl:container m-auto\">\n      <div class=\"md:bg-[url('/images/our-services-bg-fix.png')] bg-contain bg-no-repeat\" data-aos=\"fade-up\">\n        <h2 class=\"heading-1\">our services</h2>\n        <div class=\"description max-w-[850px] mx-auto mt-[81px] text-center max-md:text-left max-md:mt-[25px]\"\n          data-aos=\"fade-up\" data-aos-delay=\"200\">\n          Our array of services is meticulously organized into various specialized sections, strategically crafted to\n          address the unique needs and objectives of our diverse clientele. Each segment is finely tuned to cater to\n          specific requirements, ensuring that our offerings are precisely tailored to meet the varied demands of our\n          clients. Through this strategic segmentation, we aim to provide a comprehensive suite of solutions that not\n          only address immediate needs but also align with long-term objectives, fostering sustainable growth and\n          success for our clients.\n        </div>\n      </div>\n    </section>\n\n    <section id=\"technology\" class=\"mt-[80px]\" data-aos=\"fade-up\">\n      <div class=\"bg-white p-16 max-lg:p-6 rounded-3xl\">\n        <div class=\"grid grid-cols-4 max-lg:grid-cols-3 max-sm:grid-cols-1 gap-4\">\n          <div class=\"min-h-[328px] p-8 max-lg:hidden\" data-aos=\"fade-up\">\n            <h4 class=\"text-[20px] text-black font-bold uppercase\">Technology</h4>\n          </div>\n          <div\n            class=\"min-h-[328px] p-8 bg-[url('/images/technology/card-1.png')] bg-no-repeat bg-cover bg-center rounded-[20px]\"\n            data-aos=\"fade-up\" data-aos-delay=\"200\">\n            <h4 class=\"text-[20px] text-black font-bold uppercase\">\n              Software <br />\n              Development\n            </h4>\n          </div>\n          <div class=\"min-h-[328px] p-8 bg-[#F67D30] rounded-[20px]\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n            <h4 class=\"text-[20px] text-white text-center font-bold uppercase mb-8\">\n              managed <br />\n              services\n            </h4>\n            <nuxt-picture loading=\"lazy\" src=\"/images/technology/img-market-trend.png\" width=\"400px\"\n              :imgAttrs=\"{ class:'mx-auto picture max-md:hidden', alt: 'img-market-trend' }\" />\n            <nuxt-picture loading=\"lazy\" src=\"/images/technology/img-market-trend-mobie.png\"\n              :imgAttrs=\"{ alt: 'img-asset-balance', class: 'w-full' }\" class=\"picture hidden max-md:block\" />\n          </div>\n          <div\n            class=\"min-h-[328px] p-8 bg-[url('/images/technology/card-3.png')] bg-no-repeat bg-cover bg-center rounded-[20px]\"\n            data-aos=\"fade-up\" data-aos-delay=\"400\">\n            <h4 class=\"text-[20px] text-white font-bold uppercase max-md:text-center\">\n              Website & mobile app development\n            </h4>\n          </div>\n        </div>\n        <div class=\"grid grid-cols-4 max-lg:grid-cols-3 max-sm:grid-cols-1 sm:gap-4 mt-4\">\n          <div class=\"min-h-[328px] p-8 bg-[#F67D30] rounded-[20px]\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n            <h4 class=\"text-[20px] text-white text-center font-bold uppercase mb-8\">\n              Blockchain <br />\n              technology\n            </h4>\n            <nuxt-picture loading=\"lazy\" src=\"/images/technology/img-asset-balance.png\" width=\"400px\"\n              :imgAttrs=\"{ class:'picture max-md:hidden mx-auto', alt: 'img-asset-balance' }\" />\n            <nuxt-picture loading=\"lazy\" src=\"/images/technology/img-asset-balance-mobie.png\"\n              :imgAttrs=\"{ alt: 'img-asset-balance', class: 'picture w-full hidden max-md:block mx-auto' }\" />\n          </div>\n          <div\n            class=\"min-h-[206px] p-8 flex-1 col-span-2 bg-[url('/images/technology/card-5.png')] bg-no-repeat bg-cover bg-center rounded-[20px] max-sm:mt-4\"\n            data-aos=\"fade-up\" data-aos-delay=\"200\">\n            <div class=\"h-full flex flex-col justify-between\">\n              <h4 class=\"text-[14px] max-md:text-[12px] text-black font-bold uppercase\">AI Solutions</h4>\n              <h4 class=\"text-[20px] max-md:text-[16px] text-black font-bold uppercase\">\n                IoT, AR <br />\n                Solutions\n              </h4>\n            </div>\n          </div>\n          <div class=\"min-h-[257px] flex justify-items-end items-center max-lg:hidden\" data-aos=\"fade-up\"\n            data-aos-delay=\"300\">\n            <p class=\"w-full text-right text-[18px] font-normal leading-7\">\n              We provide comprehensive <br />\n              support in system design <br />\n              and implementation to <br />\n              elevate business <br />\n              operations.\n            </p>\n          </div>\n        </div>\n        <div class=\"grid grid-cols-4 gap-4 items-center mt-4\">\n          <div class=\"min-h-[257px] p-8 max-lg:hidden\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n            <p class=\"text-[18px] font-normal leading-7\">\n              We take extensive <br />\n              responsibility for the <br />\n              management and <br />\n              maintainance of your IT <br />\n              infrastructure so you can <br />\n              focus on the things that <br />\n              matter.\n            </p>\n          </div>\n          <div\n            class=\"flex-1 min-h-[257px] p-8 pb-[77px] col-span-3 max-lg:col-span-4 bg-[#3D3D42] md:bg-[url('/images/technology/card-6.png')] max-md:bg-[url('/images/technology/card-6-mobie.png')] bg-no-repeat bg-contain bg-left rounded-[20px] max-md:pb-[220px]\"\n            data-aos=\"fade-up\" data-aos-delay=\"200\">\n            <div class=\"w-fit ml-[40%] max-sm:ml-0\">\n              <h4 class=\"text-[20px] text-white font-bold uppercase\">design</h4>\n              <p class=\"max-w-[386px] text-[18px] text-white font-normal mt-[23px] max-sm:hidden\">\n                Design plays a crucial role in shaping brand identity and user experience. Our design services encompass\n                graphic design, web design, and user interface/user experience (UI/UX) design, delivering visually\n                compelling solutions that resonate with your target audience.\n              </p>\n              <p class=\"max-w-[386px] text-[18px] text-white font-normal mt-[23px] hidden max-sm:block\">\n                Design plays a crucial role in shaping brand identity and user experience.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <CommonQuestion class=\"mt-[80px] 2xl:container m-auto max-lg:mt-[80px]\" />\n\n    <Slide />\n\n    <section id=\"our-cliens\" class=\"mt-[80px] 2xl:container m-auto\" data-aos=\"fade-up\">\n      <div\n        class=\"px-[73px] py-[68px] max-lg:p-6 bg-white rounded-3xl md:bg-[url('/images/our-clients-bg.png')] max-md:bg-[url('/images/our-clients-mobie-bg.png')] bg-right-bottom bg-no-repeat bg-cover max-md:pb-[250px]\">\n        <div data-aos=\"fade-up\">\n          <nuxt-picture loading=\"lazy\" src=\"/images/our-clients.png\" width=\"100%\" :imgAttrs=\"{ alt: 'our-cliens' }\" />\n        </div>\n        <div class=\"max-w-[70%] max-md:max-w-full mt-9 grid grid-cols-4 max-sm:grid-cols-2 gap-3\">\n          <div v-for=\"(clien, index) in listCliens\" :key=\"index\"\n            class=\"min-h-[112px] bg-[#717171] flex justify-center items-center rounded-lg mt-2\" data-aos=\"fade-up\"\n            :data-aos-delay=\"100 * index\">\n            <nuxt-picture loading=\"lazy\" :src=\"clien.image\"\n              :imgAttrs=\"{ class: 'mx-auto picture max-md:w-[70px]', alt: 'our-cliens' }\" />\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <Excellence class=\"mt-[80px]\" />\n  </div>\n</template>\n"],"names":["activeKey","ref","questions","_sfc_main","_hoisted_3","_withScopeId","_createElementVNode","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_8","_hoisted_11","_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","$options","args","_hoisted_7","_hoisted_9","_hoisted_10","_createVNode","_component_a_carousel","_withCtx","_Fragment","_renderList","$data","slide","index","_toDisplayString","seoTitle","seoDescription","useHead","brandCooperationList","listTag","services","listCliens"],"mappings":"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"}