{"version":3,"file":"Co9E5mD_.js","sources":["../../../../components/ServicePackagePrice.vue","../../../../pages/zalo-mini-app.vue"],"sourcesContent":["<script setup>\nimport { ref } from \"#imports\";\nimport { formatCurrency } from \"~/utils/string\";\nconst servicePackages = ref([\n  {\n    title: \"Giá gói dịch vụ Mini app của Miraway\",\n    price: 0,\n    description: \"Giá cả sẽ được điều chỉnh tùy theo nhu cầu và mức độ mở rộng của dịch vụ!\",\n  },\n  {\n    title: \"Giá gói dịch vụ Mini app chính chủ-Cơ bản\",\n    price: 50000000,\n    description: \"Giá cả sẽ được điều chỉnh tùy theo nhu cầu và mức độ mở rộng của dịch vụ!\",\n  },\n  {\n    title: \"Giá gói dịch vụ Mini app của Miraway\",\n    price: Infinity,\n    description: \"Giá cả sẽ được điều chỉnh tùy theo nhu cầu và mức độ mở rộng của dịch vụ!\",\n  },\n]);\n\nconst getLabel = (servicePackage) => {\n  if (!servicePackage.price) {\n    return \"Free\";\n  }\n\n  if (servicePackage.price != Infinity) {\n    return formatCurrency(servicePackage.price);\n  }\n\n  return \"Liên hệ\";\n};\n</script>\n\n<template>\n  <section class=\"service-package-price 2xl:container m-auto\">\n    <div class=\"grid grid-cols-3 max-md:grid-cols-1 gap-10 text-center\">\n      <div\n        v-for=\"(servicePackage, index) in servicePackages\"\n        :key=\"index\"\n        class=\"bg-white rounded-[25px] py-[24px] max-md:py-[32px]\"\n      >\n        <div class=\"px-[24px] \">\n          <div class=\"subtitle-1\">Giá gói dịch vụ Mini app của Miraway</div>\n          <div class=\"border-[2px] border-solid border-gray-100 w-full max-md:w-3/6 my-12 max-md:my-8 mx-auto\" />\n          <div class=\"flex flex-row items-baseline justify-center\">\n            <h1 class=\"text-primary\">\n              {{ getLabel(servicePackage) }}\n            </h1>\n            <span v-if=\"servicePackage.price && servicePackage.price != Infinity\">đ/app</span>\n          </div>\n        </div>\n\n        <div class=\"border-[2px] border-solid border-gray-100 w-full my-12 max-md:my-10\" />\n\n        <div class=\"px-[24px]\">{{ servicePackage.description }}</div>\n      </div>\n    </div>\n  </section>\n</template>\n","<script setup>\nimport { SolutionBenefits, CustomerCarousel, Contact, ServicePackagePrice } from \"#components\";\n\nconst seoTitle = \"QRX - Zalo Mini App\";\nconst seoDescription =\n  \"Zalo mini app OA QRX thúc đẩy kinh doanh và chăm sóc khách hàng một cách toàn diện tiếp cận rộng rãi với người dùng Zalo\";\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: \"Zalo Mini App\" },\n  ],\n});\n\nconst featureMiniAppData = [\n  {\n    name: \"Xây dựng các chiến dịch CSKH tự động\",\n    descriptions: [\n      \"Hệ thống cá nhân hóa phân phối ưu đãi, voucher,... đến từng khách hàng.\",\n      \"Tùy chỉnh thông điệp Marketing theo từng cá nhân.\",\n      \"Tạo một quy trình chăm sóc đặc biệt cho khách hàng mới.\",\n      \"Tiếp thị lại đối tượng khách hàng cũ bằng thông điệp cá nhân hóa.\",\n    ],\n    imageUrl: \"/images/zalo/qrcode-campaign.png\",\n    imageWidth: 245,\n  },\n  {\n    name: \"Tạo hệ thống thẻ thành viên điện tử để xây dựng tệp khách hàng trung thành.\",\n    descriptions: [\n      \"Thiết kế chương trình tích điểm và thẻ thành viên online ngay trên app.\",\n      \"Sử dụng công nghệ QR Code để mua hàng tích điểm.\",\n      \"Quy đổi ưu đãi, Voucher để mua hàng nhanh chóng, tiện lợi.\",\n      \"Theo dõi lịch sử tích điểm theo thời gian thực, mọi lúc, mọi nơi. \",\n    ],\n    imageUrl: \"/images/zalo/qrcode-pay-card.png\",\n    imageWidth: 245,\n  },\n  {\n    name: \"Xây dựng chân dung khách hàng thông qua giải pháp quản trị dữ liệu.\",\n    descriptions: [\n      \"Dễ dàng phân loại nhóm khách hàng theo lead và khách hàng đã mua thông qua giải pháp quản trị dữ liệu.\",\n      \"Quản lý trực tiếp lịch sử mua sắm và cung cấp báo cáo tổng quan cho khách hàng.\",\n      \"Tích hợp dữ liệu từ các hệ thống CRM/ERP/POS vào một nguồn dữ liệu duy nhất.\",\n    ],\n    imageUrl: \"/images/zalo/qrcode-user.png\",\n    noBackground: true,\n    imageWidth: 360,\n  },\n];\nconst featuresMiniApp = ref([]);\n\nconst featuresBenefitsZaloData = [\n  \"/images/zalo/phone-benefits.png\",\n  [\n    {\n      imageUrL: \"/images/icons/serial.png\",\n      subtitle: \"Dung lượng nhỏ\",\n      text: \"Tối ưu hóa hiệu suất ứng dụng để đem lại trải nghiệm mượt mà và nhanh chóng, tạo cảm giác thú vị cho khách hàng.\",\n    },\n    {\n      imageUrL: \"/images/icons/qrcode.png\",\n      subtitle: \"Chi phí thấp\",\n      text: \"Doanh nghiệp có thể sở hữu một mini app mà không cần đầu tư hàng tỷ đồng như các super app, dễ dàng triển khai và tiếp cận ngay với khách hàng.\",\n    },\n    {\n      imageUrL: \"/images/icons/sms.png\",\n      subtitle: \"Dễ dàng tích hợp\",\n      text: \"Tại đây, doanh nghiệp Start-up và SMEs Việt có thể tận dụng tất cả những tính năng cần thiết để gia tăng doanh số, quản lý vận hành và tối ưu hóa quy trình làm việc.\",\n    },\n    {\n      imageUrL: \"/images/icons/sms.png\",\n      subtitle: \"ALL-IN-ONE\",\n      text: \"Tại đây, doanh nghiệp Start-up và SMEs Việt có thể tận dụng tất cả những tính năng cần thiết để gia tăng doanh số, quản lý vận hành và tối ưu hóa quy trình làm việc.\",\n    },\n  ],\n];\nconst featuresBenefitsZalo = ref();\n\nconst onInit = async () => {\n  featuresMiniApp.value = featureMiniAppData;\n  featuresBenefitsZalo.value = featuresBenefitsZaloData;\n};\nonInit();\n</script>\n\n<template>\n  <section\n    class=\"py-[120px] px-[40px] max-lg:p-10 max-md:p-4 bg-white lg:h-[576px] rounded-[48px] max-lg:rounded-[25px] relative max-lg:flex max-lg:flex-row-reverse max-lg:justify-between max-lg:items-center max-md:flex-col\"\n  >\n    <div class=\"absolute max-lg:static max-lg:mb-3 right-[-77px] bottom-0 z-10\">\n      <nuxt-picture\n        loading=\"lazy\"\n        src=\"/images/qrzalo.png\"\n        :imgAttrs=\"{ alt: 'qrzalo', width: 543, height: 607 }\"\n        class=\"mx-auto\"\n      />\n    </div>\n\n    <div>\n      <h1 class=\"text-secondary\">ZALO MINI APP</h1>\n\n      <div class=\"my-5 max-w-[60%]\">\n        Giải pháp đa năng trên Zalo OA để kinh doanh và chăm sóc khách hàng một cách toàn diện.\n      </div>\n\n      <div class=\"flex max-md:flex-col items-center gap-5 mt-[44px]\">\n        <a href=\"https://mktv2.qrx.com.vn/#/auth/login\" target=\"_blank\" class=\"max-md:w-full\" aria-label=\"register now\">\n          <button class=\"primary max-md:w-full\" aria-label=\"register\">Đăng ký ngay</button>\n        </a>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"mini-app-in-zalo\">\n    <h2 class=\"text-center my-20\">Mini App trên Zalo</h2>\n\n    <div\n      class=\"py-[64px] px-[150px] 2xl:container m-auto max-xl:px-10 flex flex-col gap-y-[84px] bg-white rounded-[48px]\"\n    >\n      <div\n        v-for=\"(feature, index) in featuresMiniApp\"\n        :key=\"feature.name\"\n        class=\"flex max-lg:flex-col items-center gap-x-6 justify-between\"\n        :class=\"{ 'flex-row-reverse': index % 2 !== 0 }\"\n      >\n        <div\n          :class=\"{\n            'py-[70px] px-[80px] max-lg:py-[50px] max-lg:px-[50px] bg-[#CFA17A1A] rounded-[120px] max-lg:rounded-[100px]':\n              !feature.noBackground,\n          }\"\n        >\n          <nuxt-picture\n            loading=\"lazy\"\n            :src=\"feature.imageUrl\"\n            :width=\"feature.imageWidth\"\n            :imgAttrs=\"{ alt: feature.name }\"\n          />\n        </div>\n\n        <div class=\"max-xl:mt-8\">\n          <div class=\"subtitle-1\">{{ feature.name }}</div>\n\n          <div class=\"flex flex-col gap-y-[34px] max-xl:gap-y-3 mt-[16px]\">\n            <div v-for=\"des in feature.descriptions\" :key=\"des\" class=\"flex items-baseline gap-x-3\">\n              <div class=\"icon\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\">\n                  <circle cx=\"6.1084\" cy=\"6\" r=\"6\" fill=\"#ED7F22\" />\n                </svg>\n              </div>\n\n              {{ des }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"text-center mt-10 2xl:container m-auto pb-[120px] pt-16 bg-white rounded-[25px]\">\n    <h2>Lợi ích của giải pháp Zalo Mini App</h2>\n    <div class=\"subtitle-2 text-secondary w-3/6 mx-auto mt-4 mb-[100px]\">\n      Công nghệ chăm sóc khách hàng mang đến giải pháp giúp Doanh nghiệp sở hữu một ứng dụng nhỏ đầy đủ tính năng.\n    </div>\n\n    <div class=\"w-[80%] mx-auto\">\n      <SolutionBenefits :benefitData=\"featuresBenefitsZalo\" class=\"text-left\" />\n    </div>\n  </section>\n\n  <section class=\"mt-[80px]\">\n    <CustomerCarousel />\n  </section>\n  <section class=\"mt-[80px]\">\n    <ServicePackagePrice />\n  </section>\n\n  <section class=\"mt-[80px]\">\n    <Contact />\n  </section>\n</template>\n"],"names":["servicePackages","ref","getLabel","servicePackage","formatCurrency","seoTitle","seoDescription","useHead","featureMiniAppData","featuresMiniApp","featuresBenefitsZaloData","featuresBenefitsZalo"],"mappings":"41BAGA,MAAMA,EAAkBC,EAAI,CAC1B,CACE,MAAO,uCACP,MAAO,EACP,YAAa,2EACd,EACD,CACE,MAAO,4CACP,MAAO,IACP,YAAa,2EACd,EACD,CACE,MAAO,uCACP,MAAO,IACP,YAAa,2EACd,CACH,CAAC,EAEKC,EAAYC,GACXA,EAAe,MAIhBA,EAAe,OAAS,IACnBC,EAAeD,EAAe,KAAK,EAGrC,UAPE,k+DCpBLE,EAAW,sBACXC,EACJ,+JAEFC,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,EAED,MAAME,EAAqB,CACzB,CACE,KAAM,uCACN,aAAc,CACZ,0EACA,oDACA,0DACA,mEACD,EACD,SAAU,mCACV,WAAY,GACb,EACD,CACE,KAAM,8EACN,aAAc,CACZ,0EACA,mDACA,6DACA,oEACD,EACD,SAAU,mCACV,WAAY,GACb,EACD,CACE,KAAM,sEACN,aAAc,CACZ,yGACA,kFACA,8EACD,EACD,SAAU,+BACV,aAAc,GACd,WAAY,GACb,CACH,EACMC,EAAkBR,EAAI,CAAA,CAAE,EAExBS,EAA2B,CAC/B,kCACA,CACE,CACE,SAAU,2BACV,SAAU,iBACV,KAAM,kHACP,EACD,CACE,SAAU,2BACV,SAAU,eACV,KAAM,iJACP,EACD,CACE,SAAU,wBACV,SAAU,mBACV,KAAM,uKACP,EACD,CACE,SAAU,wBACV,SAAU,aACV,KAAM,uKACP,CACF,CACH,EACMC,EAAuBV,EAAG,EAMhC,OAJe,SAAY,CACzBQ,EAAgB,MAAQD,EACxBG,EAAqB,MAAQD,CAC/B"}