{"version":3,"file":"Dzoj7Mkv.js","sources":["../../../../pages/index.vue"],"sourcesContent":["<script setup>\nconst seoTitle = \"QrX - Quản trị trải nghiệm bán hàng\";\nconst seoDescription =\n  \"QRX - Giải pháp quản trị trải nghiệm bán hàng đa kênh dựa trên công nghệ Qr Code. Qr Code marketing, Qr code chống giả, Qr Code bảo hành, Zalo mini app...\";\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: \"QrX\" },\n  ],\n});\n\nuseJsonld({\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"WebSite\",\n  name: seoTitle,\n});\n\nconst blogs = ref([]);\n\nconst getBlogsAll = async () => {\n  blogs.value = await getBlogsBase(3, [], [9]);\n};\n\nonMounted(() => {\n  getBlogsAll();\n});\n</script>\n\n<template>\n  <div class=\"home-page\">\n    <section class=\"rounded-[48px] relative\">\n      <div class=\"max-sm:hidden -mx-20 max-lg:-mx-4\">\n        <nuxt-picture\n          loading=\"lazy\"\n          src=\"/images/home-banner.png\"\n          :imgAttrs=\"{ class: 'w-full', alt: 'home-banner' }\"\n          class=\"w-full\"\n        />\n      </div>\n      <div class=\"sm:hidden -mx-4\">\n        <nuxt-picture\n          loading=\"lazy\"\n          src=\"/images/home-banner-mobile.png\"\n          :imgAttrs=\"{ class: 'w-full', alt: 'home-banner-mobile' }\"\n          class=\"w-full\"\n        />\n      </div>\n\n      <div\n        class=\"absolute max-2xl:bottom-[15px] top-1/2 max-md:top-[90px] max-md:left-[16px] left-[80px] md:-translate-y-1/2\"\n      >\n        <h1 class=\"text-secondary max-sm:text-white\">QR EXPERIENCE</h1>\n\n        <p\n          class=\"w-2/4 text-[16px] max-sm:text-[12px] max-sm:w-full font-[600] max-sm:text-white mt-2 max-sm:mt-4 text-black\"\n        >\n          QRX - Bộ giải pháp hỗ trợ doanh nghiệp chuyển đổi số kinh doanh theo mô hình Direct to Consumer (phân phối sản\n          phẩm trực tiếp đến tay người tiêu dùng)\n        </p>\n\n        <div class=\"relative pt-3\">\n          <nuxt-link to=\"/tao-ma-qr\">\n            <button\n              class=\"rounded-[12px] w-[209px] h-[56px] bg-[#ED7F22] text-[#fff] border-e-0 max-md:hidden border-none hover:opacity-80 transition-all duration-300\"\n              aria-label=\"solution-miraway\"\n            >\n              Tìm hiểu ngay\n            </button>\n          </nuxt-link>\n        </div>\n      </div>\n    </section>\n\n    <section id=\"solutions\" class=\"mt-[80px]\">\n      <div class=\"text-center\">\n        <h2>Hệ sinh thái QRX</h2>\n        <div class=\"subtitle-2 text-secondary mt-4\">\n          Hệ sinh thái quản lý trải nghiệm bán hàng đa kênh dựa trên QRcode\n        </div>\n      </div>\n\n      <div class=\"flex max-lg:flex-col flex-wrap gap-x-[24px] max-lg:gap-y-4 mt-[80px] max-lg:mt-[50px]\">\n        <div class=\"flex-1\">\n          <div class=\"py-[70px] px-[80px] bg-[#CFA17A1A] rounded-[120px]\">\n            <div class=\"rounded-[30px] mx-auto w-fit\" style=\"box-shadow: -36px 54px 97px 0px rgba(0, 0, 0, 0.25)\">\n              <nuxt-picture\n                loading=\"lazy\"\n                src=\"/images/phone-tich-diem.png\"\n                width=\"239\"\n                :imgAttrs=\"{ alt: 'phone-tich-diem' }\"\n              />\n            </div>\n          </div>\n        </div>\n\n        <div class=\"flex-1\">\n          <div id=\"qr-marketing\" class=\"flex items-start gap-x-6\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/icons/7.png\"\n              class=\"shrink-0\"\n              width=\"85\"\n              :imgAttrs=\"{ alt: 'icon' }\"\n            />\n            <div>\n              <h3>QR Marketing</h3>\n              <div class=\"mt-3\">\n                Dễ dàng tạo mã QR Code sinh động, cá nhân hóa. Lan tỏa thông điệp của bạn và thấu hiểu hành vi khách\n                hàng.\n              </div>\n              <div class=\"mt-5\">\n                <nuxt-link to=\"/qrcode-marketing\" class=\"text-primary hover:opacity-80 transition-all duration-300\">\n                  Xem thêm\n                </nuxt-link>\n              </div>\n            </div>\n          </div>\n\n          <div id=\"qr-chong-gia\" class=\"flex items-start mt-[35px] gap-x-6\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/icons/6.png\"\n              class=\"shrink-0\"\n              width=\"85\"\n              :imgAttrs=\"{ alt: 'icon' }\"\n            />\n\n            <div>\n              <h3>QR Chống giả</h3>\n\n              <div class=\"mt-3\">\n                QRX giúp doanh nghiệp chống giả qua nhiều phương thức có độ an toàn phù hợp: URL, SMS, QR Code, Mini\n                Zalo App..\n              </div>\n\n              <div class=\"mt-5\">\n                <nuxt-link to=\"/qrcode-chong-gia\" class=\"text-primary hover:opacity-80 transition-all duration-300\">\n                  Xem thêm\n                </nuxt-link>\n              </div>\n            </div>\n          </div>\n\n          <div id=\"qr-mini-zalo-app\" class=\"flex items-start gap-x-6 mt-[35px] max-lg:mt-4\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/icons/8.png\"\n              class=\"shrink-0\"\n              width=\"85\"\n              :imgAttrs=\"{ alt: 'icon' }\"\n            />\n\n            <div>\n              <h3>QR Mini Zalo App</h3>\n\n              <div class=\"mt-3\">\n                Ứng dụng marketing và loyalty tối ưu hóa theo mô hình kinh doanh, chạy trực tiếp trên nền tảng Zalo, kết\n                nối tới 75 triệu người dùng thường xuyên.\n              </div>\n\n              <div class=\"mt-5\">\n                <nuxt-link to=\"/zalo-mini-app\" class=\"text-primary hover:opacity-80 transition-all duration-300\">\n                  Xem thêm\n                </nuxt-link>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"flex-1\">\n          <div id=\"qr-bao-hanh\" class=\"flex items-start gap-x-6 max-lg:mt-4\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/icons/5.png\"\n              class=\"shrink-0\"\n              width=\"85\"\n              :imgAttrs=\"{ alt: 'icon' }\"\n            />\n\n            <div>\n              <h3>QR Bảo hành</h3>\n\n              <div class=\"mt-3\">\n                Bảo vệ quyền lợi và tăng lòng trung thành khách hàng, chỉ một lượt quét mã sẽ truy xuất thông tin bảo\n                hành lập tức.\n              </div>\n\n              <div class=\"mt-5\">\n                <nuxt-link to=\"/qrcode-bao-hanh\" class=\"text-primary hover:opacity-80 transition-all duration-300\">\n                  Xem thêm\n                </nuxt-link>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"flex items-start gap-x-6 mt-[35px] max-lg:mt-4\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/icons/discount.png\"\n              class=\"shrink-0\"\n              width=\"85\"\n              :imgAttrs=\"{ alt: 'icon' }\"\n            />\n\n            <div>\n              <h3>QRX quản lý loyalty</h3>\n\n              <div class=\"mt-3\">\n                Tương tác với khách hàng qua hành vi quét QR Code, cho phép doanh nghiệp giới thiệu sản phẩm, điểm bán,\n                survey…\n              </div>\n\n              <div class=\"mt-5\">\n                <nuxt-link to=\"/qrcode-loyalty\" class=\"text-primary hover:opacity-80 transition-all duration-300\"\n                  >Xem thêm</nuxt-link\n                >\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <CustomerCarousel class=\"mt-[80px]\" />\n\n    <section id=\"zalo-app\" class=\"mt-[80px] 2xl:container m-auto\">\n      <div class=\"text-center\">\n        <h2>QRX mini Zalo app</h2>\n        <div class=\"subtitle-2 text-third mt-4\">\n          Ứng dụng chính chủ chạy trên nền tảng Zalo, kết nối mạnh mẽ với 75 triệu người dùng thường xuyên.\n        </div>\n      </div>\n\n      <div class=\"flex gap-[45px] max-lg:flex-wrap max-lg:gap-y-4 mt-[80px] max-lg:mt-6\">\n        <div class=\"w-5/12 max-lg:w-full px-[33px] pt-[38px] pb-[14px] bg-primary rounded-[30px]\">\n          <h3 class=\"text-white text-center\">\n            Công cụ tối ưu nhất hiện nay giúp Doanh nghiệp giữ liên lạc với người tiêu dùng\n          </h3>\n\n          <div class=\"mt-[15px] mx-auto flex-center\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/iPhone-12-Pro-Mockup-Front-View6.png\"\n              width=\"221\"\n              :imgAttrs=\"{ alt: 'phone-mini-zalo-app' }\"\n            />\n          </div>\n        </div>\n\n        <div\n          class=\"w-4/12 max-lg:w-full flex gap-[32px] flex-col justify-between min-h-[50vh] bg-white pb-[27px] px-[30px] rounded-[30px] overflow-hidden\"\n        >\n          <div class=\"w-full h-[363px] relative -right-6\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/iPhone-12-Pro-Mockup-Front-View-10.png\"\n              class=\"absolute top-0 right-0\"\n              width=\"255\"\n              :imgAttrs=\"{ alt: 'iPhone-12-Pro-Mockup' }\"\n            />\n          </div>\n          <div class=\"\">\n            <h3>Xác minh danh tính khách hàng tự động</h3>\n            <div class=\"text-[16px] mt-5\">\n              Ngay sau khi quét QR, hệ thống điều hướng khách hàng đến Zalo mini app của doanh nghiệp và yêu cầu truy\n              cập thông tin trên Zalo\n            </div>\n          </div>\n        </div>\n\n        <div class=\"w-3/12 max-lg:w-full bg-white p-[20px] pt-[50px] rounded-[30px]\">\n          <h3>Gửi thông tin đến khách hàng miễn phí</h3>\n          <div class=\"mt-5\">\n            Gửi mọi thông báo từ đơn hàng, chương trình khuyến mãi, hỗ trợ đến khách hàng miễn phí.\n          </div>\n\n          <div class=\"mt-[55px] flex-center\">\n            <nuxt-picture\n              loading=\"lazy\"\n              src=\"/images/iPhone-12-Pro-Mockup-Front-View5.png\"\n              width=\"179\"\n              :imgAttrs=\"{ alt: 'iPhone-12-Pro-Mockup' }\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"text-center mt-[41px] max-lg:hidden\">\n        <nuxt-link to=\"/zalo-mini-app\">\n          <button\n            class=\"rounded-[12px] w-[209px] h-[56px] bg-[#ED7F22] text-[#fff] border-none hover:opacity-80 transition-all duration-300\"\n            aria-label=\"see-more\"\n          >\n            Tìm hiểu thêm\n          </button>\n        </nuxt-link>\n      </div>\n    </section>\n\n    <section id=\"knowledge\" class=\"mt-[80px] 2xl:container mx-auto\">\n      <div class=\"text-center\">\n        <h2>Tin tức sự kiện</h2>\n        <div class=\"subtitle-2 text-third mt-4\">\n          Cập nhật xu hướng trải nghiệm khách hàng và tăng trưởng kinh doanh.\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap justify-center mt-[27px] md:mt-[10px]\">\n        <div\n          class=\"max-sm:w-full max-lg:w-1/2 w-1/3 rounded-[24px] py-[17.5px] px-[11.5px]\"\n          v-for=\"item in blogs\"\n          :key=\"item.id\"\n        >\n          <nuxt-link\n            target=\"_blank\"\n            :to=\"item.link\"\n            class=\"hover:text-[#ed7f22] hover:opacity-95 text-black transition-all duration-300\"\n          >\n            <div class=\"rounded-[24px] overflow-hidden\">\n              <nuxt-picture\n                loading=\"lazy\"\n                :src=\"item.featured_image_url\"\n                :imgAttrs=\"{\n                  alt: `featured_media_url_${item.slug}`,\n                  class: 'block h-[224px] w-full object-cover mx-auto',\n                }\"\n              />\n            </div>\n            <p class=\"font-semibold text-base leading-8 max-w-[385px] mt-[24px] md:mt-[10px] text-inherit\">\n              {{ stripHtml(item.title?.rendered) }}\n            </p>\n          </nuxt-link>\n        </div>\n      </div>\n    </section>\n\n    <BlogStory class=\"mt-[80px] 2xl:container mx-auto\" />\n\n    <Contact class=\"mt-[80px] 2xl:container mx-auto\" />\n  </div>\n</template>\n"],"names":["seoTitle","seoDescription","useHead","useJsonld","blogs","ref","getBlogsAll","getBlogsBase","onMounted"],"mappings":"g/JACMA,EAAW,sCACXC,EACJ,0LAEFC,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,KAAO,CACrC,CACH,CAAC,EAEDE,EAAU,CACR,WAAY,qBACZ,QAAS,UACT,KAAMH,CACR,CAAC,EAED,MAAMI,EAAQC,EAAI,CAAA,CAAE,EAEdC,EAAc,SAAY,CAC9BF,EAAM,MAAQ,MAAMG,EAAa,EAAG,GAAI,CAAC,CAAC,CAAC,CAC7C,EAEA,OAAAC,EAAU,IAAM,CACdF,GACF,CAAC"}