tieptk/xstore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tieptk
2025-10-04 11:46:59 +07:00
commit 97427d7cff
498 changed files with 47596 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
template/features/conversion.html Normal file
View File

@@ -0,0 +1,285 @@
<div class="page-chuyendoi mb-[80px]">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container">
<div class="breadcrumb py-[40px]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="nopad-l text-[#000]">
<b itemprop="name" class="text-[var(--color-blue)]">Tính Năng</b>
</a> <i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center gap-[10px] pr-[12px]">
<a href="/loa-bluetooth.html" itemprop="item"
class="text-[#000] hover:text-[var(--color-global)]">
<span itemprop="name" class="text-[#4A4A4A]">
Chuyển Đổi
</span>
</a><i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[60px]">Chuyển đổi</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Tạo thanh toán nhanh chóng và đơn
giản</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Thu hút thêm nhiều khách hàng hơn trong
khi tiết
kiệm tiền phí
cho nhà cung <br>
cấp dịch vụ
thanh toán</p>
<a href=""
class="btn mb-[45px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="w-[990px] mx-auto">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/img-chuyendoi.jpg" class="block w-full h-[190px] object-cover"
alt="chuyendoi">
</div>
<div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">Tỷ lệ chuyển đổi thanh toán 61,9%</b>
<p class="text-[16px]">Khách hàng thấy tỷ lệ chuyển đổi thanh toán là 61,9% (cao hơn 20% so
với mức trung bình
của ngành) trên xStore khi sử
dụng cấu hình thanh toán hàng đầu</p>
</div>
</div>
</div>
</div>
</div>
<div class="pt-[100px]">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Tìm hiểu nền tảng của chúng tôi cho phép
bạn</h2>
<div class="container">
<div class="list grid grid-cols-4 gap-[12px] mb-[100px]" id="tab">
<a href="#tyle"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] ">
<span class="text-[16px] font-bold">Tỷ lệ chuyển đổi cao hơn</span>
<i class="fa-solid fa-angle-right text-[12px]"></i>
</a>
<a href="#thanhtoan"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] ">
<span class="text-[16px] font-bold">Thanh toán nhanh chóng, đơn giản</span>
<i class="fa-solid fa-angle-right text-[12px]"></i>
</a>
<a href="#mucgia"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] ">
<span class="text-[16px] font-bold">Mức giá cạnh tranh nhất</span>
<i class="fa-solid fa-angle-right text-[12px]"></i>
</a>
<a href="#khongtinh"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] ">
<span class="text-[16px] font-bold">Không tính thêm phí giao dịch</span>
<i class="fa-solid fa-angle-right text-[12px]"></i>
</a>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Tỷ lệ chuyển đổi
cao hơn giúp
doanh nghiệp của bạn <br> phát triển
nhanh hơn</h2>
<p class="text-[16px] text-center ">Thanh toán một trang có thể tùy chỉnh hoàn toàn mang lại khả
năng chuyển đổi
thanh toán <br> tốt nhất
có thể để đảm bảo doanh
số không bị mất do trục trặc khi thanh toán</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/fontend-hacom.jpg" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="thanhtoan">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Thanh toán nhanh
chóng, đơn giản mà khách hàng <br>
của bạn sẽ thích</h2>
<p class="text-[16px] text-center ">Trải nghiệm thanh toán hiện đại và dễ dàng mà khách hàng hiện
mong đợi khi sử dụng các công cụ như <br> ví điện tử (Google,
PayPal, Apple, v.v.) và tính năng tự động hoàn thành tích hợp của Google</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/fontend-thanhtoan.jpg" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="mucgia">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giá cả cạnh tranh
nhất để tiết kiệm chi phí</h2>
<p class="text-[16px] text-center ">Các đối tác thanh toán hàng đầu của chúng tôi cung cấp mức giá
cạnh tranh ngay từ đầu và chúng tôi có thể <br> giúp bạn kiếm
được mức giá tốt hơn khi bạn mở rộng quy mô</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-bigsale.jpg" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="khongtinh">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Không có phí giao
dịch bổ sung cho thanh toán hoặc các <br> tính năng cốt lõi</h2>
<p class="text-[16px] text-center ">Chọn nhà cung cấp dịch vụ thanh toán mà không phải trả thêm phí
giao dịch/hình phạt so với mức phí lên tới 2% <br> trên các
nền tảng khác — hãy đưa ra quyết định dựa trên nhu cầu kinh doanh của bạn, không phải của chúng
tôi.</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-credit.jpg" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy
chuyển sang
nền tảng
xStore <br>
ngay hôm nay</h2>
<a href=""
class="btn mb-[70px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
</div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]">
<p class="text-white text-center text-[16px] mb-[25px] ">Tìm hiểu thêm về cách xStore trao quyền cho
khách hàng
của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]">
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)] "></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Thị trường</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Phát triển</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Vận hành </span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

279
template/features/create.html Normal file
View File

@@ -0,0 +1,279 @@
<div class="page-taomoi mb-[80px]">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container">
<div class="breadcrumb py-[40px]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="nopad-l text-[#000]">
<b itemprop="name" class="text-[var(--color-blue)]">Tính Năng</b>
</a> <i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="text-[#000] hover:text-[var(--color-global)]">
<span itemprop="name" class="text-[#4A4A4A]">
Tạo Mới
</span>
</a><i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[45px]">Tạo mới</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Thiết kế trang web thân thiện với <br>
người dùng để thúc đẩy chuyển đổi</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Có thể tự do tạo gian hàng đẹp nhất thể hiện
câu chuyện thương hiệu của bạn</p>
<a href=""
class="btn mb-[45px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="w-[990px] mx-auto">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/image-create.png" class="block w-full h-[190px] object-cover"
alt="chuyendoi">
</div>
<div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">+42% chuyển đổi từ lượt truy cập thành đơn hàng</b>
<p class="text-[16px]">Các trang web doanh nghiệp nhỏ trên xStore chỉ sử dụng trải nghiệm thanh
toán
cốt lõi của chúng tôi có tỷ lệ chuyển đổi
từ lượt truy cập thành đơn hàng cao hơn 42% so với nền tảng khác</p>
</div>
</div>
</div>
</div>
</div>
<div class="pt-[100px]">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Tìm hiểu nền tảng của chúng tôi cho phép
bạn</h2>
<div class="container">
<div class="list grid grid-cols-4 gap-[12px] mb-[100px]" id="tab">
<a href="#khoitao"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Khởi tạo nhanh
chóng</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#xaydung"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Xây dựng thương hiệu của
bạn</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#phattrien"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Phát triển linh hoạt</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#giunguyen"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Giữ nguyên trang web của
bạn</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Khởi chạy nhanh chóng
bằng Page Builder để tạo trang web của bạn</h2>
<p class="text-[16px] text-center ">Trình chỉnh sửa trực quan Page Builder cho phép xây dựng và ra mắt
trang nhanh chóng, <br> không cần mã với những lợi ích của
một nền tảng mạnh mẽ</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/frontend-traphaco.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Xây dựng thương hiệu
của bạn bằng cách sử dụng các <br> mẫu chuyên nghiệp</h2>
<p class="text-[16px] text-center ">Các chủ đề được tối ưu hóa và tùy chỉnh hoàn toàn với khả năng phản
hồi trên thiết bị <br> di động ngay khi xuất xưởng</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/xaydungthuonghieu.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Phát triển linh hoạt
trên nền tảng có khả năng mở rộng <br>
theo cửa hàng của bạn</h2>
<p class="text-[16px] text-center ">Xây dựng doanh nghiệp trực tuyến của bạn một cách nhanh chóng, với
sự tự do phát triển thành các giải pháp <br> trang web tùy
chỉnh hoặc không có giao diện bằng các công cụ như Next.js và React</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/fontend-mialala.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giữ nguyên trang web
hiện tại của bạn <br>
bằng cách kết nối WordPress trực tiếp với xStore</h2>
<p class="text-[16px] text-center ">Kết nối trang web WordPress của bạn với công cụ mạnh mẽ của chúng
tôi để truy cập vào <br> các chức năng thương mại điện tử
mà không phải bỏ nội dung của bạn</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/keotha.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy
chuyển sang
nền tảng
xStore <br>
ngay hôm nay</h2>
<a href=""
class="btn mb-[70px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
</div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]">
<p class="text-white text-center text-[16px] mb-[25px] ">Tìm hiểu thêm về cách xStore trao quyền cho
khách hàng
của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]">
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)] "></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Thị trường</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Phát triển</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Vận hành </span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

268
template/features/grow.html Normal file
View File

@@ -0,0 +1,268 @@
<div class="page-grow mb-[80px]">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container">
<div class="breadcrumb py-[40px]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="nopad-l text-[#000]">
<b itemprop="name" class="text-[var(--color-blue)]">Tính Năng</b>
</a> <i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="text-[#000] hover:text-[var(--color-global)]">
<span itemprop="name" class="text-[#4A4A4A]">
Vận hành
</span>
</a><i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[45px]">Vận hành</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Mở rộng thương hiệu của bạn để thúc
đẩy doanh số tốt hơn</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Phát triển không giới hạn bằng cách nhanh
chóng tiếp cận các tính năng, khả <br> năng mới và tăng nguồn doanh thu</p>
<a href=""
class="btn mb-[45px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="w-[990px] mx-auto">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/image-chuyendoi.png" class="block w-full h-[190px] object-cover"
alt="chuyendoi">
</div>
<div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">+26% Doanh thu</b>
<p class="text-[16px]">Khách hàng doanh nghiệp nhỏ sẽ có doanh thu tăng thêm 26% khi thêm nguồn
doanh thu mới thông qua nhiều cửa hàng.*</p>
</div>
</div>
</div>
</div>
</div>
<div class="pt-[100px]">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn</h2>
<div class="container">
<div class="list flex items-center justify-center gap-[12px] mb-[100px]" id="tab">
<a href="#kethop"
class=" w-[calc(100%/4)] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Kết hợp trực tuyến và
ngoại tuyến</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#nguondoanhthu"
class=" w-[calc(100%/4)] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Thêm nguồn doanh thu
mới</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#khoinghiep"
class=" w-[calc(100%/4)] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Khởi nghiệp kinh doanh
nhanh chóng</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="kethop">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Kết hợp trực tuyến và
ngoại tuyến để thu hút khách hàng <br> theo cách họ muốn</h2>
<p class="text-[16px] text-center ">Kết nối liền mạch điểm bán hàng truyền thống với cửa hàng trực tuyến
của bạn để khách <br> hàng có thể Mua hàng trực tuyến,
Nhận hàng tại cửa hàng</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-kethop.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="nguondoanhthu">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Thêm nguồn doanh thu
mới để mở rộng <br> doanh nghiệp của bạn.</h2>
<p class="text-[16px] text-center ">Mở rộng để phục vụ cả khách hàng bán lẻ và bán buôn hoặc thêm các
thương hiệu mới <br> mà không tốn kém và rắc rối khi quản
lý nhiều nền tảng</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/themdoanhthu.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Phát triển linh hoạt
trên nền tảng có khả năng mở rộng <br>
theo cửa hàng của bạn</h2>
<p class="text-[16px] text-center ">Xây dựng doanh nghiệp trực tuyến của bạn một cách nhanh chóng, với
sự tự do phát triển thành các giải pháp <br> trang web tùy
chỉnh hoặc không có giao diện bằng các công cụ như Next.js và React</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/phattienlinhhoat.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="khoinghiep">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Khởi nghiệp kinh
doanh mới nhanh chóng mà
<br> không cần phải học nền tảng mới
</h2>
<p class="text-[16px] text-center ">Ra mắt thêm các doanh nghiệp với trang web và trải nghiệm thương mại
điện tử riêng biệt <br> mà không cần phải bắt đầu từ đầu
hoặc chia nhỏ phân tích trên nhiều nền tảng</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-khoinghiep.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy
chuyển sang
nền tảng
xStore <br>
ngay hôm nay</h2>
<a href=""
class="btn mb-[70px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
</div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]">
<p class="text-white text-center text-[16px] mb-[25px] ">Tìm hiểu thêm về cách xStore trao quyền cho
khách hàng
của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]">
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)] "></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Thị trường</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Phát triển</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Vận hành </span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

234
template/features/market.html Normal file
View File

@@ -0,0 +1,234 @@
<div class="page-market mb-[80px]">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container">
<div class="breadcrumb py-[40px]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="nopad-l text-[#000]">
<b itemprop="name" class="text-[var(--color-blue)]">Tính Năng</b>
</a> <i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="text-[#000] hover:text-[var(--color-global)]">
<span itemprop="name" class="text-[#4A4A4A]">
Thị trường
</span>
</a><i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[45px]">Thị trường</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Tiếp thị tới bất kỳ ai, ở bất kỳ đâu
</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Tiếp cận nhiều người mua sắm hơn trên các kênh
thị trường, mạng xã hội, tìm <br> kiếm và quảng cáo hàng đầu</p>
<a href=""
class="btn mb-[45px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="w-[990px] mx-auto">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/image-x2doanthu.png" class="block w-full h-[190px] object-cover"
alt="chuyendoi">
</div>
<div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">X2 Doanh thu</b>
<p class="text-[16px]">Các doanh nghiệp nhỏ thêm một thị trường sẽ tăng doanh thu 38%, thêm hai
thị trường sẽ tăng doanh thu 120% và thêm ba
kênh quảng cáo trở lên sẽ tăng mức độ tương tác 250%.</p>
</div>
</div>
</div>
</div>
</div>
<div class="pt-[100px]">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn</h2>
<div class="container">
<div class="list flex items-center justify-center gap-[12px] mb-[100px]" id="tab">
<a href="#quangcao"
class=" w-[calc(100%/5)] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Quảng cáo ở bất cứ
đâu</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#datsanpham"
class=" w-[calc(100%/5)] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Đặt sản phẩm ở khắp mọi
nơi</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#dungdautimkiem"
class=" w-[calc(100%/5)] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Đứng đầu tìm kiếm</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="quangcao">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Quảng cáo ở mọi nơi
thông qua <br>
nhiều kênh hơn</h2>
<p class="text-[16px] text-center ">Tích hợp trực tiếp và tối ưu hóa hiệu suất vào các kênh tìm kiếm,
nền tảng truyền thông xã hội và kênh hiển thị hàng <br> đầu
giúp bạn thu hút nhiều khách hàng hơn và đạt được khả năng hiển thị thương hiệu (Google, Instagram,
TikTok, v.v.)</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-quangcao.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="datsanpham">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đặt sản phẩm ở khắp
mọi nơi <br>
của thị trường</h2>
<p class="text-[16px] text-center ">Tích hợp với các thị trường lớn nhất (Facebook, Tiktok, Shopee,...)
giúp mở rộng phạm vi tiếp cận cửa hàng <br> của bạn, với
các tùy chọn để tối ưu hóa nguồn cấp dữ liệu sản phẩm trên nhiều kênh.</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-kethop.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="dungdautimkiem">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đứng đầu trang tìm
kiếm <br>
với các công cụ SEO mạnh mẽ</h2>
<p class="text-[16px] text-center ">Các công cụ SEO mạnh mẽ, sẵn dùng giúp tăng lưu lượng truy cập để
đảm bảo <br>
bạn có thứ hạng cao hơn đối thủ cạnh tranh</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/congcuseo.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy
chuyển sang
nền tảng
xStore <br>
ngay hôm nay</h2>
<a href=""
class="btn mb-[70px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
</div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]">
<p class="text-white text-center text-[16px] mb-[25px] ">Tìm hiểu thêm về cách xStore trao quyền cho
khách hàng
của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]">
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)] "></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Thị trường</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Phát triển</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Vận hành </span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

283
template/features/operate.html Normal file
View File

@@ -0,0 +1,283 @@
<div class="page-operate mb-[80px]">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container">
<div class="breadcrumb py-[40px]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="nopad-l text-[#000]">
<b itemprop="name" class="text-[var(--color-blue)]">Tính Năng</b>
</a> <i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="text-[#000] hover:text-[var(--color-global)]">
<span itemprop="name" class="text-[#4A4A4A]">
Vận hành
</span>
</a><i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[45px]">Vận hành</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Điều hành doanh nghiệp của bạn hiệu
quả hơn</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Giảm chi phí vận hành của bạn với một nền tảng
đáng tin cậy <br>
và một đội ngũ hỗ trợ bạn</p>
<a href=""
class="btn mb-[45px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="w-[990px] mx-auto">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/img-chuyendoi.jpg" class="block w-full h-[190px] object-cover"
alt="chuyendoi">
</div>
<div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">Thời gian hoạt động 99,99%</b>
<p class="text-[16px]">Giảm thiểu phiền phức, tối đa hóa tăng trưởng với thời gian hoạt động
99,99%, thời gian chờ hỗ trợ trung bình <2 phút,>
85% cuộc gọi hỗ trợ đầu tiên được giải quyết, hơn 20 triệu biến thể sản phẩm, hơn 2
triệu SKU sản phẩm và tổng chi
phí sở hữu tốt nhất.</p>
</div>
</div>
</div>
</div>
</div>
<div class="pt-[100px]">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn</h2>
<div class="container">
<div class="list flex items-center gap-[12px] mb-[100px]" id="tab">
<a href="#hieusuat"
class="px-[60px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Hiệu suất đáng tin
cậy</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#chiphi"
class="px-[20px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Chi phí thấp hơn khi bạn
phát triển</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#doitac"
class="px-[40px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Đối tác đáng tin cậy</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#hieubiet"
class="px-[10px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Hiểu biết và sự linh hoạt
trong kinh doanh</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="hieusuat">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Hiệu suất đáng tin
cậy <br>
để tránh gián đoạn kinh doanh</h2>
<p class="text-[16px] text-center ">Thời gian hoạt động 99,99%, trang tải nhanh và bảo trì được xử lý
cho bạn, bao gồm bảo mật, <br> lưu trữ, quản lý tuân thủ và
cập nhật</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-quangcao.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="chiphi">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giảm chi phí khi bạn
phát triển để hỗ trợ <br> việc mở rộng quy mô</h2>
<p class="text-[16px] text-center ">Nền tảng của bạn cần được xây dựng để mở rộng quy mô, nhưng chi phí
của bạn không nhất thiết phải tăng theo. Hãy xây
dựng <br> doanh nghiệp của bạn trên một nền tảng có tổng chi phí sở hữu thấp nhất, bao gồm cả việc
giảm
tỷ lệ thanh toán, khi
bạn phát triển.</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-giamchiphi.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="doitac">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đối tác đáng tin cậy
cho mọi bước phát triển của bạn</h2>
<p class="text-[16px] text-center ">Yên tâm hơn khi biết rằng bạn chỉ cần gọi điện thoại là có thể nhận
được hỗ trợ trực tiếp 24/7 từ nhân viên <br> xStore
tại Hà nội, cùng các dịch vụ hỗ trợ thành công, ra mắt hoặc di chuyển trước, trong và sau khi ra
mắt
</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-giamchiphi.png" width="100%" height="100%" alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="hieubiet">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Hiểu biết sâu sắc về
kinh doanh và sự nhanh nhẹn thúc đẩy <br> việc ra quyết định thông minh</h2>
<p class="text-[16px] text-center ">Với các công cụ phân tích mạnh mẽ được tích hợp sẵn trong mỗi gói,
bạn có thể theo dõi hoạt động kinh doanh và điều
chỉnh <br> để tăng tốc độ phát triển. Ngoài ra, bộ công cụ AI ngày càng phát triển của chúng tôi có
thể
tăng tốc các tác vụ
hàng ngày và giảm <br> thiểu công sức vận hành doanh nghiệp.
</p>
<div class="w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-hieubietsansac.png" width="100%" height="100%"
alt="hacom">
</div>
</div>
<div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]">
<div class="title flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
</div>
</div>
</div>
<div class="rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy
chuyển sang
nền tảng
xStore <br>
ngay hôm nay</h2>
<a href=""
class="btn mb-[70px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
</div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]">
<p class="text-white text-center text-[16px] mb-[25px] ">Tìm hiểu thêm về cách xStore trao quyền cho
khách hàng
của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]">
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)] "></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Thị trường</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Phát triển</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
<a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
<span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Vận hành </span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

327
template/free-trial/home.html Normal file
View File

@@ -0,0 +1,327 @@
<div class="page-free-trial">
<div class="background-free">
<div class="container">
<div class="breadcrumb py-[40px]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="nopad-l text-[#000]">
<b itemprop="name" class="text-[var(--color-blue)]">Tính Năng</b>
</a> <i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center gap-[10px] pr-[12px]">
<a href="/" itemprop="item" class="text-[#000] hover:text-[var(--color-global)]">
<span itemprop="name" class="text-[#4A4A4A]">
Bắt Đầu Dùng Thử Miễn Phí
</span>
</a><i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<p class="uppercase text-[14px] text-center my-[50px] ">Bắt đầu dùng thử miễn phí</p>
<h1 class="text-[32px] font-bold capitalize text-center ">Khám phá lý do tại sao <br>
các thương hiệu phát triển nhanh lại chọn xStore</h1>
</div>
</div>
<div class="from-trial mt-[-235px]">
<div class="container">
<div class="bg-[#F7F7F7] rounded-[20px_20px_0_0] px-[30px]">
<div class="list grid grid-cols-2 gap-[20px] py-[100px]">
<div class="left">
<b class="text-[20px] mb-[15px] block ">Ra mắt cửa hàng của bạn nhanh chóng</b>
<p class="text-[15px] mb-[20px]">
Với Trình tạo trang kéo và thả, chủ đề tương thích với thiết bị di động, thanh toán một
trang
gốc và các công cụ SEO
mạnh mẽ, bạn có thể dễ dàng — và nhanh chóng — tạo một cửa hàng trực tuyến đẹp mắt có khả
năng
chuyển đổi.</p>
<b class="text-[20px] mb-[15px] block">Tiết kiệm chi phí thanh toán</b>
<p class="text-[15px] mb-[20px]">Hãy chọn nhà cung cấp dịch vụ thanh toán phù hợp nhất với doanh
nghiệp của bạn — yên tâm rằng
chúng tôi sẽ không tính
thêm phí. Hơn nữa, bạn còn tiết kiệm hơn nữa với các đối tác ưu tiên cung cấp mức giá ưu đãi
đã
được thương lượng.</p>
<b class="text-[20px] mb-[15px] block">Trải nghiệm độ tin cậy thực sự</b>
<p class="text-[15px] mb-[20px]">Nền tảng này không chỉ đáng tin cậy (thời gian hoạt động 99,99%
và nhiều chứng chỉ bảo mật
Tier
1), mà đội ngũ của chúng
tôi cũng vậy. Chúng tôi luôn sẵn sàng hỗ trợ 24/7 qua điện thoại, trò chuyện và email để
giải
đáp mọi thắc mắc của bạn.</p>
<img src="../../assets/images/imag-trial.png" alt="trial">
<b class="italic text-[24px] block mt-[25px]">xStore mang đến trải nghiệm mà khách hàng chưa
từng thấy được ở
các nền tảng
khác</b>
</div>
<div class="right">
<div class="shadow-[0_2px_4px_0_#00000040] px-[30px] py-[60px] rounded-[4px] bg-white">
<h3 class="text-[24px] mb-[5px] font-bold ">Tạo cửa hàng trực tuyến của bạn</h3>
<p class="text-[#5D5D69] text-[15px] mb-[60px] ">Hãy bắt đầu ngay hôm nay với bản dùng thử
miễn phí 15
ngày của
chúng tôi</p>
<form action="" id="trial-form">
<div class="check-form pb-[60px]">
<div class="form-input flex flex-col relative">
<label for="first_name"
class="absolute transition-all text-gray-600 bottom-[2px] peer-focus-within:-top-6 text-[15px] required">Họ
Và Tên</label>
<input type="text" id="first_name"
class="px-0 border-none focus:border-none focus:ring-0 w-full bg-transparent outline-none transition-all"
name="first_name" />
<div class="border-b border-bc-black"></div>
</div>
<div class="note-error text-red-500 text-[13px] mt-[3px] "></div>
</div>
<div class="check-form pb-[60px]">
<div class="form-input flex flex-col relative">
<label for="phone"
class="absolute transition-all text-gray-600 bottom-[2px] peer-focus-within:-top-6 text-[15px] required">Số
điện thoại</label>
<input type="text" id="phone"
class="px-0 border-none focus:border-none focus:ring-0 w-full bg-transparent outline-none transition-all"
name="phone" />
<div class="border-b border-bc-black"></div>
</div>
<div class="note-error text-red-500 text-[13px] mt-[3px]"></div>
</div>
<div class="check-form pb-[60px]">
<div class="form-input flex flex-col relative">
<label for="email"
class="absolute transition-all text-gray-600 bottom-[2px] peer-focus-within:-top-6 text-[15px] required">Email</label>
<input type="text" id="email"
class="px-0 border-none focus:border-none focus:ring-0 w-full bg-transparent outline-none transition-all"
name="email" />
<div class="border-b border-bc-black"></div>
</div>
<div class="note-error text-red-500 text-[13px] mt-[3px]"></div>
</div>
<div class="check-form pb-[60px]">
<div class="form-input flex flex-col relative">
<label for="shop"
class="absolute transition-all text-gray-600 bottom-[2px] peer-focus-within:-top-6 text-[15px] required">Tên
cửa hàng (Bạn có thể thay đổi tên này bất cứ lúc nào)</label>
<input type="text" id="shop"
class="px-0 border-none focus:border-none focus:ring-0 w-full bg-transparent outline-none transition-all"
name="shop">
<div class="border-b border-bc-black"></div>
</div>
<div class="note-error text-red-500 text-[13px] mt-[3px]"></div>
</div>
<div class="check-form pb-[60px]">
<div class="form-select flex flex-col relative">
<label for="projectedAnnualRevenue"
class="absolute transition-all text-gray-600 bottom-[2px] peer-focus-within:-top-6 text-[15px] pointer-events-none required">Quy
mô doanh nghiệp của bạn là bao nhiêu</label>
<select id="projectedAnnualRevenue" name="projectedAnnualRevenue"
class="px-0 text-bc-black pr-10 appearance-none bg-blend-color-dodge border-none focus:border-none focus:ring-0">
<option selected="0"></option>
<option value="1">Tôi chưa bắt đầu bán: chưa có doanh thu
</option>
<option value="2">Mới bắt đầu bán</option>
<option value="3">Xây dựng doanh nghiệp</option>
<option value="4">Doanh nghiệp đang phát triển</option>
<option value="5">Doanh nghiệp vừa</option>
<option value="6">Doanh nghiệp lớn</option>
</select>
<i
class="absolute pointer-events-none right-0 bottom-[16px] fa-solid fa-sort-down">
</i>
<div class=" border-b border-bc-black">
</div>
</div>
<div class="note-error text-red-500 text-[13px] mt-[3px]"></div>
</div>
<div class="check-form pb-[10px]">
<div class="form-select flex flex-col relative">
<label for="province"
class="absolute transition-all text-gray-600 bottom-[2px] peer-focus-within:-top-6 text-[15px] pointer-events-none required">Thành
phố</label>
<select id="province" name="province"
class="px-0 text-bc-black pr-10 appearance-none bg-blend-color-dodge border-none focus:border-none focus:ring-0">
<option selected="0"></option>
<option value="254">Hà Nội</option>
<option value="255">Hồ Chí Minh</option>
<option value="312">Đà Nẵng</option>
<option value="280">Hải Phòng</option>
<option value="270">Quảng Ninh</option>
<option value="267">Khánh Hòa</option>
<option value="256">An Giang</option>
<option value="257">Bà Rịa - Vũng Tàu</option>
<option value="258">Bắc Ninh</option>
<option value="259">Bắc Giang</option>
<option value="260">Bình Dương</option>
<option value="261">Bình Định</option>
<option value="262">Bình Phước</option>
<option value="263">Bình Thuận</option>
<option value="264">Bến Tre</option>
<option value="265">Bắc Cạn</option>
<option value="266">Cần Thơ</option>
<option value="268">Thừa Thiên Huế</option>
<option value="269">Lào Cai</option>
<option value="271">Đồng Nai</option>
<option value="272">Nam Định</option>
<option value="273">Cà Mau</option>
<option value="274">Cao Bằng</option>
<option value="275">Gia Lai</option>
<option value="276">Hà Giang</option>
<option value="277">Hà Nam</option>
<option value="278">Hà Tĩnh</option>
<option value="279">Hải Dương</option>
<option value="281">Hòa Bình</option>
<option value="282">Hưng Yên</option>
<option value="283">Kiên Giang</option>
<option value="284">Kon Tum</option>
<option value="285">Lai Châu</option>
<option value="286">Lâm Đồng</option>
<option value="287">Lạng Sơn</option>
<option value="288">Long An</option>
<option value="289">Nghệ An</option>
<option value="290">Ninh Bình</option>
<option value="291">Ninh Thuận</option>
<option value="292">Phú Thọ</option>
<option value="293">Phú Yên</option>
<option value="294">Quảng Bình</option>
<option value="295">Quảng Nam</option>
<option value="296">Quảng Ngãi</option>
<option value="297">Quảng Trị</option>
<option value="298">Sóc Trăng</option>
<option value="299">Sơn La</option>
<option value="300">Tây Ninh</option>
<option value="301">Thái Bình</option>
<option value="302">Thái Nguyên</option>
<option value="303">Thanh Hóa</option>
<option value="304">Tiền Giang</option>
<option value="305">Trà Vinh</option>
<option value="306">Tuyên Quang</option>
<option value="307">Vĩnh Long</option>
<option value="308">Vĩnh Phúc</option>
<option value="309">Yên Bái</option>
<option value="310">Đắc Lắc</option>
<option value="311">Đồng Tháp</option>
<option value="313">Đắc Nông</option>
<option value="314">Hậu Giang</option>
<option value="315">Bạc Liêu</option>
<option value="316">Điện Biên</option>
</select>
<i
class="absolute pointer-events-none right-0 bottom-[16px] fa-solid fa-sort-down">
</i>
<div class=" border-b border-bc-black">
</div>
</div>
<div class="note-error text-red-500 text-[13px] mt-[3px]"></div>
</div>
<p class="text-[13px] text-[#81818A]">Để đảm bảo hiệu suất và tốc độ tối ưu cho cửa hàng
của bạn, hãy chọn khu vực gần nhất
với khách hàng tiềm năng.
</p>
<button type="button" onclick="checkformTrial()"
class="button-send my-[40px] block w-[212px] h-[45px] leading-[45px] text-center rounded-[4px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Tạo
cửa hàng của bạn</button>
<p class="text-[13px] text-[#81818A] mb-[30px]">
Bằng cách cung cấp email của bạn, bạn đồng ý với <a href="#"
class="text-[#0062FF] underline">các điều khoản dịch vụ
của chúng
tôi.</a></p>
<p class="text-[13px] text-[#81818A]">
Trang web này được bảo vệ bởi reCAPTCHA Enterprise và <a href="#"
class="text-[#0062FF] underline">chính sách bảo
mật</a> cũng như
<a href="#" class="text-[#0062FF] underline">điều khoản dịch vụ</a> của Google được
áp
dụng.
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my-[90px]">
<h2 class="title text-[32px] text-center font-bold capitalize mb-[35px] ">Câu hỏi thường gặp</h2>
<div class="w-[795px] mx-auto">
<div class="list">
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cho tôi xin bảng giá dịch vụ của sXtore?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Nền tảng xStore phù hợp với các doanh nghiệp
nào?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Phù hợp từ cửa hàng nhỏ đến doanh nghiệp vừa và lớn, đặc biệt là ngành bán lẻ,
thời trang, mỹ phẩm và điện tử.
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Tại sao tôi nên chọn xStore thay vì các nền
tảng thương mại điện tử khác?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
<ul class="list-disc pl-5 space-y-1">
<li>Hiệu năng tốt, tối ưu SEO.</li>
<li>Nhiều tích hợp thanh toán/vận chuyển.</li>
<li>Dễ mở rộng giao diện với Tailwind.</li>
</ul>
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cách sử dụng nền tảng này như thế nào
vậy?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Đăng ký tài khoản, chọn gói, thêm sản phẩm và bật cổng thanh toán. Có tài liệu
hướng dẫn chi tiết từng bước.
</div>
</div>
</div>
<a href=""
class="flex items-center gap-[5px] w-[175px] h-[40px] leading-[40px] mx-auto bg-black rounded-[4px] justify-center group hover:border-[1px] hover:border-[#000] hover:bg-white ">
<p class="text-white text-[20px] group-hover:text-black">Xem tất cả</p>
<i class="fa-solid fa-caret-right text-white text-[20px] mt-[4px] group-hover:text-black"></i>
</a>
</div>
</div>
</div>

391
template/home/home.html Normal file
View File

@@ -0,0 +1,391 @@
<div class="homepage">
<div class="banner">
<h2 class="text-center text-[36px] font-[600] leading-[49px] pt-[64px] ">Phát triển thương hiệu của bạn <br>
với nền tảng thương mại điện tử được đánh giá cao nhất</h2>
<a href=""
class="btn mt-[60px] mb-[50px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="w-[850px] mx-auto grid grid-cols-3">
<div class="item border-r-[1px] border-[#8A8A8A]">
<i class="icon_2025 checkbox mx-auto"></i>
<p class="mt-[15px] text-center text-[16px] font-[400]">Được tin tưởng trong ngành <br> thương mại
điện tử</p>
</div>
<div class="item border-r-[1px] border-[#8A8A8A]">
<i class="icon_2025 boxreview mx-auto"></i>
<p class="mt-[15px] text-center text-[16px] font-[400]">Được đánh giá cao nhất cho các <br> doanh
nghiệp vừa
và nhỏ
</p>
</div>
<div class="item">
<i class="icon_2025 cart mx-auto"></i>
<p class="mt-[15px] text-center text-[16px] font-[400]">Nền tảng thương mại điện tử được <br> đánh
giá cao
nhất</p>
</div>
</div>
<div class="container mt-[50px] pb-[40px] effect-image">
<img src="../../assets/images/box-fontend.png" class="block w-full h-[450px]" width="100%" height="100%"
alt="banner">
</div>
</div>
<div class="box-benefit py-[80px]">
<div class="container">
<h2 class="block mb-[20px] pb-[20px] border-b-[2px] border-[#DADADA] text-[28px] font-bold">Bạn có thể
nhận được những gì khi
sử dụng nền tảng xStore?</h2>
<div class="grid grid-cols-3 gap-[20px]">
<div class="item">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 up"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Tăng doanh thu nhanh hơn</b>
<p class="line-camp-2 text-[16px] font-[400]">Các công cụ tích hợp mạnh mẽ giúp tăng tốc độ phát
triển thương mại điện
tử của bạn.</p>
</div>
<div class="item">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 thuhut"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Thu hút nhiều khách hàng hơn.</b>
<p class="line-camp-2 text-[16px] font-[400]">Quy trình thanh toán hàng đầu trong ngành giúp
biến người truy cập trang
web thành khách hàng</p>
</div>
<div class="item">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 tietkiem"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Tiết kiệm chi phí</b>
<p class="line-camp-2 text-[16px] font-[400]">Cung cấp dịch vụ thanh toán ưu tiên mức giá cạnh
tranh</p>
</div>
<div class="item">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 setting"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Xây dựng theo cách của bạn</b>
<p class="line-camp-2 text-[16px] font-[400]">Tính linh hoạt của nền tảng có nghĩa là bạn có thể
tự do tùy chỉnh.</p>
</div>
<div class="item">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 up-sale"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Tăng doanh số bán hàng</b>
<p class="line-camp-2 text-[16px] font-[400]">Các tính năng đảm bảo bạn có thể mở rộng quy mô
bán hàng trực tuyến.</p>
</div>
<div class="item">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 support"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Đội ngũ hỗ trợ tin cậy</b>
<p class="line-camp-2 text-[16px] font-[400]">Hỗ trợ trực tiếp 24/7 giải quyết mọi vấn đề của
khách hàng</p>
</div>
</div>
</div>
</div>
<div class="box-platforms pt-[90px] ">
<div class="container">
<div class="bg-[#F2F2F6] py-[50px] px-[100px]">
<h2 class="text-[32px] font-bold mb-[45px] text-center">Nền tảng hiệu suất cao có thể Tuỳ chỉnh</h2>
<div class="box-item grid grid-cols-2 rounded-[12px] overflow-hidden mb-[55px]">
<div class="content bg-white py-[60px] px-[20px]">
<p class="text-[13px] uppercase text-black font-[600] mb-[10px]">Tạo mới</p>
<h3 class="text-[20px] font-bold ">Thiết kế một trang web có khả năng chuyển đổi</h3>
<ul class="my-[32px] list-disc text-[16px] leading-[34px] font-[400] ml-[20px]">
<li>Trình tạo trang kéo và thả</li>
<li>Chủ đề có thể tùy chỉnh</li>
<li>Khả năng phản hồi di động tích hợp</li>
<li>Kết nối Wordpress liền mạch</li>
</ul>
<a href="" class="flex items-center gap-[10px]">
<b class="text-[16px]">Xem thêm</b>
<i class="fa-solid fa-arrow-right text-[12px] text-[#0090FF]"></i>
</a>
</div>
<div class="image bg-[#FFFAEC] py-[60px] px-[20px]">
<a href="" class="block effect-image">
<img src="../../assets/images/mygear.png" class="w-full h-full block object-contain"
width="100%" height="100%" alt="mygear">
</a>
</div>
</div>
<div class="box-item flex rounded-[12px] overflow-hidden bg-white mb-[55px]">
<div class="image w-[48%] bg-[#FDEFFF] py-[60px] px-[20px] rounded-[12px] overflow-hidden">
<a href="" class="block effect-image h-full rounded-[12px] overflow-hidden">
<img src="../../assets/images/image-chuyendoi.png" class="w-full h-full block object-cover"
width="100%" height="100%" alt="mygear">
</a>
</div>
<div class="content w-[52%] bg-white py-[60px] px-[20px]">
<p class="text-[13px] uppercase text-black font-[600] mb-[10px]">Chuyển đổi</p>
<h3 class="text-[20px] font-bold ">Tùy chỉnh hoàn toàn quá trình thanh toán của bạn</h3>
<ul class="my-[30px] list-disc text-[16px] font-[400] ml-[20px]">
<li class="leading-[150%] mb-[10px]">Thanh toán một trang được tối ưu hóa được thiết kế
để chuyển
đổi người mua sắm</li>
<li class="leading-[150%] mb-[10px]">Chọn đối tác thanh toán ưa thích của bạn để nhận
được mức giá
tốt nhất có thể —
không bị phạt</li>
<li class="leading-[150%] mb-[10px]">Ví điện tử và giải pháp mua ngay, trả tiền sau</li>
<li class="leading-[150%] mb-[10px]">Tùy chọn thanh toán một cú nhấp chuột không cần mật
khẩu</li>
</ul>
<a href="" class="flex items-center gap-[10px]">
<b class="text-[16px]">Xem thêm</b>
<i class="fa-solid fa-arrow-right text-[12px] text-[#0090FF]"></i>
</a>
</div>
</div>
<div class="box-item grid grid-cols-2 rounded-[12px] overflow-hidden mb-[55px]">
<div class="content bg-white py-[60px] px-[20px]">
<p class="text-[13px] uppercase text-black font-[600] mb-[10px]">Thị trường</p>
<h3 class="text-[20px] font-bold ">Thu hút nhiều người mua sắm hơn</h3>
<ul class="my-[32px] list-disc text-[16px] leading-[34px] font-[400] ml-[20px]">
<li>Bán trên các kênh truyền thông xã hội như Meta và TikTok</li>
<li>Quảng cáo trên các nền tảng như Google, Youtube</li>
<li>Đưa sản phẩm lên các thị trường như Shopee và Lazada</li>
<li>Tối đa hóa lưu lượng truy cập trang web bằng các công cụ SEO mạnh mẽ</li>
</ul>
<a href="" class="flex items-center gap-[10px]">
<b class="text-[16px]">Xem thêm</b>
<i class="fa-solid fa-arrow-right text-[12px] text-[#0090FF]"></i>
</a>
</div>
<div class="image bg-[#F2FFFB] py-[60px] px-[20px] flex items-center justify-center">
<a href="" class="block effect-image h-[285px] m-auto">
<img src="../../assets/images/image-platforms.png"
class="w-full h-full block object-contain" width="100%" height="100%" alt="mygear">
</a>
</div>
</div>
<div class="box-item flex rounded-[12px] overflow-hidden bg-white mb-[55px]">
<div class="image w-[48%] bg-[#E3FFE7] py-[60px] px-[20px] rounded-[12px] overflow-hidden">
<a href="" class="block effect-image h-full rounded-[12px] overflow-hidden">
<img src="../../assets/images/imge-thuonghieu.jpg" class="w-full h-full block object-cover"
width="100%" height="100%" alt="mygear">
</a>
</div>
<div class="content w-[52%] bg-white py-[60px] px-[20px]">
<p class="text-[13px] uppercase text-black font-[600] mb-[10px]">Phát triển</p>
<h3 class="text-[20px] font-bold ">Mở rộng thương hiệu của bạn</h3>
<ul class="my-[30px] list-disc text-[16px] font-[400] ml-[20px]">
<li class="leading-[150%] mb-[10px]">Bán lẻ và bán buôn với các tính năng như nhóm khách
hàng</li>
<li class="leading-[150%] mb-[10px]">Quản lý nhiều trang web với Multi-Storefront</li>
<li class="leading-[150%] mb-[10px]">Kết nối ngoại tuyến và trực tuyến với Mua trực
tuyến, Nhận tại cửa hàng</li>
<li class="leading-[150%] mb-[10px]">Nhanh chóng tạo ra một thương hiệu mới với cùng một
nền tảng</li>
</ul>
<a href="" class="flex items-center gap-[10px]">
<b class="text-[16px]">Xem thêm</b>
<i class="fa-solid fa-arrow-right text-[12px] text-[#0090FF]"></i>
</a>
</div>
</div>
<div class="box-item grid grid-cols-2 rounded-[12px] overflow-hidden">
<div class="content bg-white py-[60px] px-[20px]">
<p class="text-[13px] uppercase text-black font-[600] mb-[10px]">vận hành</p>
<h3 class="text-[20px] font-bold ">Hoạt động hiệu quả hơn</h3>
<ul class="my-[32px] list-disc text-[16px] leading-[34px] font-[400] ml-[20px]">
<li>Thời gian hoạt động tốt nhất trong phân khúc 99,99%</li>
<li>Thời gian hoạt động 100% trong Tuần lễ An ninh mạng 10 năm liên tiếp Tổng chi phí sở
hữu thấp hơn Tuân thủ nhiều tiêu
chuẩn bảo mật Cấp 1 bao gồm ISO, PCI, SOC, GDPR và CCPA</li>
</ul>
<a href="" class="flex items-center gap-[10px]">
<b class="text-[16px]">Xem thêm</b>
<i class="fa-solid fa-arrow-right text-[12px] text-[#0090FF]"></i>
</a>
</div>
<div
class="image bg-[#F9DCDC] py-[60px] px-[20px] flex items-center justify-center rounded-[12px] overflow-hidden">
<a href="" class="block effect-image h-[285px] m-auto">
<img src="../../assets/images/image-vanhanh.jpg" class="w-full h-full block object-contain"
width="100%" height="100%" alt="mygear">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="box-product-sell my-[100px]">
<div class="container">
<div class="grid grid-cols-3 gap-[40px] bg-[#F1F3F8] rounded-[12px] overflow-hidden">
<div>
<a href="" class="effect-image overflow-hidden block w-full h-[258px]">
<img src="../../assets/images/image-sell.png"
class="w-full h-full block rounded-[12px] object-cover overflow-hidden" alt="">
</a>
</div>
<div class="col-span-2 py-[50px]">
<h2 class="text-[20px] font-bold mb-[10px]">Bán hàng nhiều hơn, nhanh hơn với sự trợ giúp từ
chuyên gia
tư
vấn xStore</h2>
<p class="mb-[35px] text-[16px]">Các tư vấn viên hướng dẫn chuyên môn về cách thiết lập cửa hàng
XStore —
khách hàng mới đăng
ký gói Pro hoặc Plus hàng
năm có thể tiết kiệm 50% cho dịch vụ này.</p>
<div class="flex items-center gap-[12px]">
<a href=""
class="w-[130px] h-[35px] text-[13px] font-bold leading-[35px] text-center block bg-[var(--color-blue)] text-white uppercase rounded-[4px] hover:border-[1px] hover:border-[var(--color-blue)] hover:bg-white hover:text-[var(--color-blue)]">Đăng
ký ngay</a>
<a href=""
class=" flex items-center justify-center gap-[10px] w-[142px] h-[35px] leading-[35px] border-[1px] border-[var(--color-blue)] rounded-[4px] group hover:bg-[var(--color-blue)]">
<p class="text-[13px] font-bold text-[var(--color-blue)] group-hover:text-white ">TÌM
HIỂU THÊM</p>
<i
class="fa-solid fa-arrow-right text-[12px] text-[var(--color-blue)] group-hover:text-white"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="box-tamnhin mb-[105px]">
<div class="container">
<div class="background-tamnhin py-[45px]">
<h2 class="title text-center text-[32px] font-bold uppercase leading-[135%] mb-[30px] ">Tìm một đối
tác để
biến tầm nhìn <br>
của
bạn thành
hiện thực
</h2>
<div class="content-tamnhin w-[858px] mx-auto">
<div class="list grid grid-cols-2 gap-[12px]">
<div
class="item-tamnhin bg-white border-[1px] border-[#DADADA] rounded-[12px] overflow-hidden p-[15px] ">
<img src="../../assets/images/logo-hura8.png"
class="mb-[32px] block w-auto h-[24px] object-contain" width="100%" height="100%"
alt="hura8" />
<b class="text-[20px] text-black ">Hura8</b>
<p class="block my-[30px] text-[16px] leading-[34px]">
Phần mềm tạo website TMĐT chạy nên nền tảng Cloud dành cho doanh nghiệp lớn
</p>
<a href="https://hura8.com/" class="flex items-center gap-[10px]">
<b class="text-[16px]">Xem thêm</b>
<i class="fa-solid fa-arrow-right text-[12px] text-[#0090FF]"></i>
</a>
</div>
<div
class="item-tamnhin bg-white border-[1px] border-[#DADADA] rounded-[12px] overflow-hidden p-[15px] ">
<img src="../../assets/images/logo-chatngay.png"
class="mb-[14px] block w-auto h-[40px] object-contain" width="100%" height="100%"
alt="Chatngay" />
<b class="text-[20px] text-black ">Chatngay</b>
<p class="block my-[30px] text-[16px] leading-[34px]">
Phần mềm hỗ trợ, cskh tích hợp website giúp khách hàng tương tác nhanh chóng và
thuận tiện.
</p>
<a href="https://chatngay.com/" class="flex items-center gap-[10px]">
<b class="text-[16px]">Xem thêm</b>
<i class="fa-solid fa-arrow-right text-[12px] text-[#0090FF]"></i>
</a>
</div>
</div>
<div class="box-faq mt-[12px] bg-white p-[32px] rounded-[12px] ">
<h2 class="text-[28px] font-bold mb-[40px] text-center capitalize ">Câu hỏi thường gặp</h2>
<div class="list">
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cho tôi xin bảng giá dịch vụ của sXtore?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Nền tảng xStore phù hợp với các doanh nghiệp
nào?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Phù hợp từ cửa hàng nhỏ đến doanh nghiệp vừa và lớn, đặc biệt là ngành bán lẻ,
thời trang, mỹ phẩm và điện tử.
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Tại sao tôi nên chọn xStore thay vì các nền
tảng thương mại điện tử khác?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
<ul class="list-disc pl-5 space-y-1">
<li>Hiệu năng tốt, tối ưu SEO.</li>
<li>Nhiều tích hợp thanh toán/vận chuyển.</li>
<li>Dễ mở rộng giao diện với Tailwind.</li>
</ul>
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cách sử dụng nền tảng này như thế nào
vậy?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div
class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Đăng ký tài khoản, chọn gói, thêm sản phẩm và bật cổng thanh toán. Có tài liệu
hướng dẫn chi tiết từng bước.
</div>
</div>
</div>
<a href=""
class="flex items-center gap-[5px] w-[175px] h-[40px] leading-[40px] mx-auto bg-black rounded-[4px] justify-center group hover:border-[1px] hover:border-[#000] hover:bg-white ">
<p class="text-white text-[20px] group-hover:text-black">Xem tất cả</p>
<i
class="fa-solid fa-caret-right text-white text-[20px] mt-[4px] group-hover:text-black"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

48
template/login/home.html Normal file
View File

@@ -0,0 +1,48 @@
<div class="page-login h-screen">
<a href="/" class="block m-[30px] ">
<img src="../../assets/images/logo-xstore-white.png" class="block w-[70px] object-contain" width="100%"
height="100%" alt="logo">
</a>
<div class="content-login mt-[70px] w-[480px] mx-auto bg-white rounded-[12px] px-[30px] py-[45px]">
<h2 class="text-[24px] font-bold mb-[5px] ">Bắt đầu dùng thử miễn phí</h2>
<p class="text-[15px] text-[#616161] mb-[40px] ">Dùng thử 3 ngày miễn phí, sau khi dùng thử sẽ tính phí theo tuỳ
gói</p>
<div class="form-check mb-[10px]">
<label class="mb-[7px] block font-[500] ">Email</label>
<input type="email" id="email" class="w-full border rounded p-2">
</div>
<div class="form-check relative">
<label class="mb-[7px] block font-[500] ">Mật khẩu</label>
<input id="password" type="password" class="w-full border rounded p-2">
<button type="button" id="togglePassword"
class="absolute inset-y-0 right-0 top-[30px] px-3 flex items-center text-gray-500"><i
class="fa-regular fa-eye"></i></button>
</div>
<div id="check-pass" class="hidden">
<div class="h-1 bg-gray-200 mt-2 rounded">
<div id="strengthBar" class="h-1 w-0 rounded"></div>
</div>
<b id="strengthText" class="text-sm mt-1">Độ mạnh của mật khẩu: —</b>
</div>
<div class="note mt-[10px] italic text-gray-500 text-[13px]">
<p>Gợi ý: Mật khẩu mạnh</p>
<p>- Có Ký tự viết hoa</p>
<p>- Có ký tự đặc biệt</p>
<p>- Độ dài hơn 8 ký tự</p>
</div>
<button id="submitButton"
class="w-full bg-black text-white rounded py-3 mt-4 disabled:opacity-40 disabled:cursor-not-allowed">
Tạo tài khoản xStore
</button>
</div>
</div>

62
template/other/footer.html Normal file
View File

@@ -0,0 +1,62 @@
<div class="footer bg-[#00112B] text-white">
<div class="container">
<div class="main-footer pt-[50px] pb-[35px]">
<div class="grid grid-cols-4 gap-[90px]">
<div class="item-footer">
<h3 class="title text-[19px] font-bold mb-[20px] ">Về chúng tôi</h3>
<div class="content">
<a href="https://maps.app.goo.gl/fimdgxskWrcDrKbQ7" target="_blank"
class="text-[14px] block mb-[10px] hover:underline">Địa chỉ: Tầng 5 - Số 3,
ngõ 18 Yên Lãng, Đống Đa, Hà
Nội</a>
<a href="tel:02422.138.068" class="text-[14px] block mb-[10px] hover:underline">Hotline:
02422.138.068</a>
<a href="mailto:hotro@hurasoft.com" class="text-[14px] block mb-[10px] hover:underline">Email:
hotro@hurasoft.com</a>
</div>
</div>
<div class="item-footer">
<h3 class="title text-[19px] font-bold mb-[20px] ">Dịch vụ</h3>
<div class="content">
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Giá cả</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Dùng thử miễn phí</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Yêu cầu bản demo</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Ứng dụng & Tích hợp</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Chủ đề & Mẫu</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Dịch vụ xStore</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Trở thành đối tác</a>
</div>
</div>
<div class="item-footer">
<h3 class="title text-[19px] font-bold mb-[20px] ">Hỗ trợ</h3>
<div class="content">
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Liên hệ Hỗ trợ Kỹ thuật</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Trung tâm nhà phát triển</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Cộng đồng nhà phát triển</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tài liệu API</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tài liệu chủ đề</a>
</div>
</div>
<div class="item-footer">
<h3 class="title text-[19px] font-bold mb-[20px] ">Hợp tác</h3>
<div class="content">
<a href="/gioi-thieu" class="text-[14px] block mb-[10px] hover:underline">Giới thiệu về
chúng tôi
</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Gửi yêu cầu hỗ trợ</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tìm đối tác</a>
</div>
</div>
</div>
</div>
<div class="footer-bottom flex items-center justify-between pb-[30px] ">
<img src="../../assets/images/logo-footer.png" class="block h-[62px] object-contain " alt="logo">
<div class="text-right text-[12px]">
<p>© Copyright 2025 xStore</p>
<p>Chính sách bảo mật | Điều khoản sử dụng trang web | Thỏa thuận dịch vụ</p>
</div>
</div>
</div>
</div>

222
template/other/header.html Normal file
View File

@@ -0,0 +1,222 @@
<header class="sticky top-0 left-0 w-full bg-white z-[999] shadow-[0_0_2px_0px_#e7e7e7]">
<div class="relative bg-white z-[99]">
<div class="container">
<div class="header flex items-center py-[15px] justify-between">
<div class="header-left flex items-center">
<a href="/" class="logo h-[26px] block mr-[130px]">
<img src="../../assets/images/logo.png" class="block w-full h-full object-contain" width="100%"
height="100%" alt="logo" />
</a>
<div class="menu flex items-center gap-[45px]" id="js-show-menu">
<div class="item-menu">
<a href="javascript:void(0)" data-menu="tinhnang" class="flex items-center gap-[5px] group">
<span class="font-[600] text-[16px] group-hover:underline">Tính năng</span>
<i class="fa-solid fa-sort-down text-[10px]"></i>
</a>
</div>
<div class="item-menu">
<a href="javascript:void(0)" data-menu="hotro" class="flex items-center gap-[5px] group">
<span class="font-[600] text-[16px] group-hover:underline">Hỗ trợ</span>
<i class="fa-solid fa-sort-down text-[10px]"></i>
</a>
</div>
<a href="/pricing" class="hover:underline font-[600]">
Bảng giá
</a>
</div>
</div>
<div class="header-right flex items-center justify-end gap-[10px]">
<a href="/dang-nhap"
class="inline-block px-[30px] py-[5px] border-[1px] border-[var(--color-blue)] text-[var(--color-blue)] text-[15px] font-[600] rounded-[50px] hover:bg-[var(--color-blue)] hover:text-white">Đăng
nhập</a>
<a href="/dang-ky"
class="inline-block px-[30px] py-[5px] border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] hover:bg-white text-[15px] font-[600] rounded-[50px] bg-[var(--color-blue)] text-white">Đăng
ký</a>
</div>
</div>
</div>
</div>
<div class="left-0 z-[9] w-full h-fit max-h-[80vh] absolute translate-y-[-100%] overflow-auto bg-white top-[64px] bg-white border-t-[1px] border-[#d3d3d3] transition-transform duration-[250ms] "
id="box-menu">
<div class="container">
<div class="hidden content-menu" id="tinhnang">
<div class="grid grid-cols-4 gap-[30px]">
<div class="col-span-2 pb-[20px]">
<div
class="title text-[16px] font-[400] uppercase py-[16px] border-b-[1px] border-[#d3d3d3] text-[#4C4B58] mb-[16px] ">
Học hỏi và phát triển</div>
<div class="grid grid-cols-2 gap-[25px]">
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Trung
tâm trợ
giúp</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Hỗ
trợ đẳng cấp thế giới, 24/7</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Đại học
BigCommerce
</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Đào tạo thương mại
điện tử từ các chuyên gia của chúng tôi</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Dịch vụ
đối
tác</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Nhận trợ giúp xây
dựng cửa hàng của bạn</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Cửa hàng
chủ
đề</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Mẫu thiết kế
đẹp</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Cửa hàng
ứng
dụng</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Kết nối với phần
mềm hàng đầu</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Blog
thương mại
điện tử</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tin tức, chiến lược
và phân tích</a>
</div>
</div>
</div>
<div class="item">
<div
class="title text-[16px] font-[400] uppercase py-[16px] border-b-[1px] border-[#d3d3d3] text-[#4C4B58] mb-[16px] ">
chi tiết về thương mại điện tử</div>
<div class="list">
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Tài liệu
&
Video</a>
</div>
</div>
</div>
<div id="js-article-menu" class="p-[20px] bg-[#edeff3]">
<div class="item">
<a href=""
class="image-article block w-full h-[165px] rounded-[8px_8px_0_0] overflow-hidden ">
<img src="../../assets/images/image-article.png"
class="block w-full h-full object-cover " width="100%" height="100%" alt="article">
</a>
<div class="info bg-[#000] p-[10px] rounded-[0_0_8px_8px]">
<a href=""
class="font-[600] text-[15px] text-white line-clamp-2 hover:text-[var(--color-blue)] ">Xu
hướng cá nhân
hóa
trải nghiệm
người dùng
trong thương
mại điện tử
</a>
<p class="summary my-[7px] text-[13px] line-clamp-2 text-white ">Cá nhân hóa trải
nghiệm người
dùng là xu
hướng nổi bật
trong
thương mại điện tử</p>
<a href="" class="flex items-center gap-[10px] group">
<p class="text-[13px] uppercase text-white group-hover:text-[var(--color-blue)]">
Xem thêm</p>
<i class="fa-solid fa-arrow-right text-[12px] text-[#00E5FF]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="hidden content-menu" id="hotro">
<div class="grid grid-cols-4 gap-[30px]">
<div class="col-span-3 py-[20px]">
<div class="grid grid-cols-3 gap-[25px] pb-[20px]">
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Tạo
mới</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Thiết kế một cửa
hàng trực tuyến đẹp mắt.</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Thị
trường
</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tiếp cận nhiều
người mua sắm hơn trên nhiều kênh.</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Vận
hành</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tăng hiệu quả với
nền tảng đáng tin cậy.</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Chuyển
đổi</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tạo quy trình thanh
toán nhanh chóng, đơn giản và có khả năng chuyển đổi.</a>
</div>
<div>
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Phát
triển</a>
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Mở rộng thị
trường mới và nhiều hơn nữa.</a>
</div>
</div>
</div>
<div id="js-article-menu" class="p-[20px] bg-[#edeff3]">
<div class="item">
<a href=""
class="image-article block w-full h-[165px] rounded-[8px_8px_0_0] overflow-hidden ">
<img src="../../assets/images/image-article.png"
class="block w-full h-full object-cover " width="100%" height="100%" alt="article">
</a>
<div class="info bg-[#000] p-[10px] rounded-[0_0_8px_8px]">
<a href=""
class="font-[600] text-[15px] text-white line-clamp-2 hover:text-[var(--color-blue)] ">Xu
hướng cá nhân
hóa
trải nghiệm
người dùng
trong thương
mại điện tử
</a>
<p class="summary my-[7px] text-[13px] line-clamp-2 text-white ">Cá nhân hóa trải
nghiệm người
dùng là xu
hướng nổi bật
trong
thương mại điện tử</p>
<a href="" class="flex items-center gap-[10px] group">
<p class="text-[13px] uppercase text-white group-hover:text-[var(--color-blue)]">
Xem thêm</p>
<i class="fa-solid fa-arrow-right text-[12px] text-[#00E5FF]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="opacity-50 z-[1] hidden top-[100%] w-full h-screen bg-[#121118] absolute right-0 transition-all duration-300 "
id="background-opacity" onclick="closeBackgorund()">
</div>
</header>

760
template/pricing/home.html Normal file
View File

@@ -0,0 +1,760 @@
<div class="page-pricing">
<div class="background-pricing pb-[45px]">
<div class="container">
<h1 class="text-[32px] text-center font-bold py-[70px] leading-[120%] ">Dùng thử xStore miễn phí trong 15
ngày trước khi
<br> đăng ký
sử dụng
nền
tảng
</h1>
<div class="flex items-center justify-center space-x-3 font-medium">
<span id="labelMonthly" class="text-black text-[15px]">Trả hàng tháng</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="billingToggle" class="sr-only">
<div id="toggleBox" class="w-12 h-6 bg-white border border-gray-300 rounded-full
after:content-[''] after:absolute after:top-1/2 after:left-1 after:-translate-y-1/2
after:w-4 after:h-4 after:bg-black after:rounded-full after:transition-all">
</div>
</label>
<span id="labelAnnually" class="text-[15px] text-gray-500">Trả hàng năm</span>
</div>
<div class="list grid grid-cols-4 gap-[12px] mt-[60px]" id="list-pricing">
<div class="item-pricing border-[#d1d1d1] border-[1px] rounded-[12px] p-[15px] bg-white ">
<b class="text-[20px] capitalize mb-[8px]">Tiêu chuẩn</b>
<p class="text-[13px] text-[#898989] mb-[7px] line-clamp-2 h-[38px] ">Dành cho cá nhân và thương
hiệu nhỏ</p>
<div class="main-price mb-[20px]">
<div class="flex items-center justify-between">
<div class="price text-[28px] font-bold " data-price="900000">900.000đ</div>
<div
class="saleoff inline-block p-[5px_7px] bg-[#E1F6E6] rounded-[50px] text-[10px] text-[#19A600] font-bold ">
Tiết kiệm 20%</div>
</div>
<b class="italic">1 chi nhánh/ tháng</b>
</div>
<ul class="list mb-[10px]">
<li class="flex items-start gap-[10px] mb-[20px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Doanh thu trực tuyến lên tới 100tr</p>
</li>
<li class="flex items-start gap-[10px] mb-[20px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Phí thanh toán thêm 0%
</p>
</li>
<li class="flex items-start gap-[10px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Hỗ trợ qua điện thoại và trò chuyện trực tiếp 24/7
</p>
</li>
</ul>
<a href=""
class="btn block w-full h-[45px] leading-[45px] text-center rounded-[4px] bg-black text-white text-[16px] font-bold hover:bg-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="compare mt-[20px]">
<a href="javascript:void(0)" onclick="showCompare()"
class="item-compare flex items-center justify-between ">
<span class="text-[15px] font-bold ">So sánh các kế hoạch</span>
<i class="fa fa-plus text-[10px] text-black"></i>
</a>
<ul class="content-compare hidden border-dotted border-t-[1px] border-[#000]">
<li>Sản phẩm và người dùng không giới hạn</li>
<li>Lãi suất thẻ giảm giá với các đối tác bắt đầu từ 2,89% + 29 xu
</li>
<li>Sản phẩm và người dùng không giới hạn</li>
</ul>
</div>
</div>
<div class="item-pricing border-[#d1d1d1] border-[1px] rounded-[12px] p-[15px] bg-white ">
<b class="text-[20px] capitalize mb-[8px]">Nâng cao</b>
<p class="text-[13px] text-[#898989] mb-[7px] line-clamp-2 h-[38px] ">Dành cho cá nhân và thương
hiệu nhỏ có triển vọng phát triển</p>
<div class="main-price mb-[20px]">
<div class="flex items-center justify-between">
<div class="price text-[28px] font-bold " data-price="1200000">1.200.000đ</div>
<div
class="saleoff inline-block p-[5px_7px] bg-[#E1F6E6] rounded-[50px] text-[10px] text-[#19A600] font-bold ">
Tiết kiệm 20%</div>
</div>
<b class="italic">1 chi nhánh/ tháng</b>
</div>
<ul class="list mb-[10px]">
<li class="flex items-start gap-[10px] mb-[20px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Doanh thu trực tuyến lên tới 100tr</p>
</li>
<li class="flex items-start gap-[10px] mb-[20px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Phí thanh toán thêm 0%
</p>
</li>
<li class="flex items-start gap-[10px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Hỗ trợ qua điện thoại và trò chuyện trực tiếp 24/7
</p>
</li>
</ul>
<a href=""
class="btn block w-full h-[45px] leading-[45px] text-center rounded-[4px] bg-black text-white text-[16px] font-bold hover:bg-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="compare mt-[20px]">
<a href="javascript:void(0)" onclick="showCompare()"
class="item-compare flex items-center justify-between ">
<span class="text-[15px] font-bold ">So sánh các kế hoạch</span>
<i class="fa fa-plus text-[10px] text-black"></i>
</a>
<ul class="content-compare hidden border-dotted border-t-[1px] border-[#000]">
<li>Sản phẩm và người dùng không giới hạn</li>
<li>Lãi suất thẻ giảm giá với các đối tác bắt đầu từ 2,89% + 29 xu
</li>
<li>Sản phẩm và người dùng không giới hạn</li>
</ul>
</div>
</div>
<div class="item-pricing border-[#d1d1d1] border-[1px] rounded-[12px] p-[15px] bg-white ">
<div class="flex items-center justify-between">
<b class="text-[20px] capitalize">Cao cấp</b>
<div
class="text-[12px] inline-block font-bold py-[2px] px-[10px] rounded-[20px] bg-[#DBE9FF] text-[var(--color-blue)] ">
Phổ biến
</div>
</div>
<p class="text-[13px] text-[#898989] mb-[7px] line-clamp-2 h-[38px] ">Dành cho cá nhân và thương
hiệu nhỏ có triển vọng phát triển</p>
<div class="main-price mb-[20px]">
<div class="flex items-center justify-between">
<div class="price text-[28px] font-bold " data-price="3000000">3.000.000đ</div>
<div
class="saleoff inline-block p-[5px_7px] bg-[#E1F6E6] rounded-[50px] text-[10px] text-[#19A600] font-bold ">
Tiết kiệm 20%</div>
</div>
<b class="italic">1 chi nhánh/ tháng</b>
</div>
<ul class="list mb-[10px]">
<li class="flex items-start gap-[10px] mb-[20px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Doanh thu trực tuyến lên tới 100tr</p>
</li>
<li class="flex items-start gap-[10px] mb-[20px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Phí thanh toán thêm 0%
</p>
</li>
<li class="flex items-start gap-[10px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Hỗ trợ qua điện thoại và trò chuyện trực tiếp 24/7
</p>
</li>
</ul>
<a href=""
class="btn block w-full h-[45px] leading-[45px] text-center rounded-[4px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-[#3d75cf] ">Bắt
đầu dùng
thử miễn phí</a>
<div class="compare mt-[20px]">
<a href="javascript:void(0)" onclick="showCompare()"
class="item-compare flex items-center justify-between ">
<span class="text-[15px] font-bold ">So sánh các kế hoạch</span>
<i class="fa fa-plus text-[10px] text-black"></i>
</a>
<ul class="content-compare hidden border-dotted border-t-[1px] border-[#000]">
<li>Sản phẩm và người dùng không giới hạn</li>
<li>Lãi suất thẻ giảm giá với các đối tác bắt đầu từ 2,89% + 29 xu
</li>
<li>Sản phẩm và người dùng không giới hạn</li>
</ul>
</div>
</div>
<div class="item-pricing border-[#d1d1d1] border-[1px] rounded-[12px] p-[15px] bg-white ">
<b class="text-[20px] capitalize mb-[8px]">Doanh nghiệp lớn</b>
<p class="text-[13px] text-[#898989] mb-[7px] line-clamp-2 h-[38px] ">Dành cho các doanh nghiệp đã
thành lập đang trên đà phát triển lớn mạnh
</p>
<div class="main-price mb-[20px]">
<div class="flex items-center justify-between">
<div class="price text-[28px] font-bold " data-price="0">Liên hệ</div>
</div>
<b class="italic text-[13px]">Liên hệ để được tư vấn phù hợp với doanh nghiệp</b>
</div>
<ul class="list mb-[10px]">
<li class="flex items-start gap-[10px] mb-[20px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Tối ưu nhất cho các doanh nghiệp</p>
</li>
<li class="flex items-start gap-[10px] mb-[20px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Phí thanh toán thêm 0%
</p>
</li>
<li class="flex items-start gap-[10px]">
<i class="fa-solid fa-circle-check text-[var(--color-blue)] mt-[5px] "></i>
<p class="text-[15px] text-[#474747] ">Hỗ trợ qua điện thoại và trò chuyện trực tiếp 24/7
</p>
</li>
</ul>
<a href=""
class="btn block w-full h-[45px] leading-[45px] text-center rounded-[4px] bg-black text-white text-[16px] font-bold hover:bg-[var(--color-blue)] ">Bắt
đầu với Hura8</a>
<div class="compare mt-[20px]">
<a href="javascript:void(0)" onclick="showCompare()"
class="item-compare flex items-center justify-between ">
<span class="text-[15px] font-bold ">So sánh các kế hoạch</span>
<i class="fa fa-plus text-[10px] text-black"></i>
</a>
<ul class="content-compare hidden border-dotted border-t-[1px] border-[#000]">
<li>Sản phẩm và người dùng không giới hạn</li>
<li>Lãi suất thẻ giảm giá với các đối tác bắt đầu từ 2,89% + 29 xu
</li>
<li>Sản phẩm và người dùng không giới hạn</li>
</ul>
</div>
</div>
</div>
<p class="mt-[50px] text-center">Ưu đãi áp dụng cho các gói Standard, Plus và Pro.</p>
</div>
</div>
<div class="mt-[80px]">
<h2 class="text-[32px] text-center font-bold capitalize mb-[40px] ">Xem tất cả kế hoạch tính năng</h2>
<div class="w-[1000px] mx-auto">
<div class="list">
<div class="item-faq pb-[10px] border-b-[1px] border-[#DADADA] mb-[15px]">
<div class="title flex items-center pb-[10px] justify-between cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Bao gồm trong tất cả các kế hoạch</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]">
<thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr>
<th class="px-[15px]">Bao gồm trong tất cả các kế hoạch</th>
<th class="px-[15px]">Tiêu chuẩn</th>
<th class="px-[15px]">Nâng cao</th>
<th class="px-[15px]">Cao cấp</th>
<th class="px-[15px]">Doanh nghiệp lớn</th>
</tr>
</thead>
<tbody>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Không có phí giao dịch bổ sung </td>
<td class="px-[15px]">0%</td>
<td class="px-[15px]">0%</td>
<td class="px-[15px]">0%</td>
<td class="px-[15px]">0%</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Sản phẩm, lưu trữ tệp và băng thông</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Tài khoản nhân viên</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="item-faq pb-[10px] border-b-[1px] border-[#DADADA] mb-[15px]">
<div class="title flex items-center pb-[10px] justify-between cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Kênh bán hàng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]">
<thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr>
<th class="px-[15px]">Bao gồm trong tất cả các kế hoạch</th>
<th class="px-[15px] text-center">Tiêu chuẩn</th>
<th class="px-[15px] text-center">Nâng cao</th>
<th class="px-[15px] text-center">Cao cấp</th>
<th class="px-[15px] text-center">Doanh nghiệp lớn</th>
</tr>
</thead>
<tbody>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Cửa hàng trực tuyến</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Nhiều cửa hàng</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px]">
<p class="text-center font-bold text-[var(--color-blue)]">Liên hệ</p>
</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Điểm bán hàng </td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Shopee/Lazada/Tiki</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Facebook/Instagram</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="item-faq pb-[10px] border-b-[1px] border-[#DADADA] mb-[15px]">
<div class="title flex items-center pb-[10px] justify-between cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Đặc trưng</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]">
<thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr>
<th class="px-[15px]">Bao gồm trong tất cả các kế hoạch</th>
<th class="px-[15px] text-center">Tiêu chuẩn</th>
<th class="px-[15px] text-center">Nâng cao</th>
<th class="px-[15px] text-center">Cao cấp</th>
<th class="px-[15px] text-center">Doanh nghiệp lớn</th>
</tr>
</thead>
<tbody>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Cửa hàng trực tuyến</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Nhiều cửa hàng</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px]">
<p class="text-center font-bold text-[var(--color-blue)]">Liên hệ</p>
</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Điểm bán hàng </td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Shopee/Lazada/Tiki</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Facebook/Instagram</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="item-faq pb-[10px] border-b-[1px] border-[#DADADA] mb-[15px]">
<div class="title flex items-center pb-[10px] justify-between cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Dịch vụ và Hỗ trợ</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]">
<thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr>
<th class="px-[15px]">Bao gồm trong tất cả các kế hoạch</th>
<th class="px-[15px] text-center">Tiêu chuẩn</th>
<th class="px-[15px] text-center">Nâng cao</th>
<th class="px-[15px] text-center">Cao cấp</th>
<th class="px-[15px] text-center">Doanh nghiệp lớn</th>
</tr>
</thead>
<tbody>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Cửa hàng trực tuyến</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Nhiều cửa hàng</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px]">
<p class="text-center font-bold text-[var(--color-blue)]">Liên hệ</p>
</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Điểm bán hàng </td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Shopee/Lazada/Tiki</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Facebook/Instagram</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="item-faq pb-[10px] border-b-[1px] border-[#DADADA] mb-[15px]">
<div class="title flex items-center pb-[10px] justify-between cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Xử lý thanh toán</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]">
<thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr>
<th class="px-[15px]">Bao gồm trong tất cả các kế hoạch</th>
<th class="px-[15px] text-center">Tiêu chuẩn</th>
<th class="px-[15px] text-center">Nâng cao</th>
<th class="px-[15px] text-center">Cao cấp</th>
<th class="px-[15px] text-center">Doanh nghiệp lớn</th>
</tr>
</thead>
<tbody>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Cửa hàng trực tuyến</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Nhiều cửa hàng</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px] leading-[22px]">
<p class="w-[120px] py-[10px] text-center">Bổ sung 550k/1 cửa hàng
(Tối đa 3)</p>
</td>
<td class="px-[15px]">
<p class="text-center font-bold text-[var(--color-blue)]">Liên hệ</p>
</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Điểm bán hàng </td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
<td class="px-[15px]">Không giới hạn</td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Shopee/Lazada/Tiki</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
<tr class="border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<td class="px-[15px]">Facebook/Instagram</td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
<td class="px-[15px] text-center"><i
class="fa fa-check text-[var(--color-blue)]"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="mt-[70px]">
<div class="container">
<div class="bg-gradient-to-r from-[#d7d9ee] via-[#ede7ed] to-[#f3eaed] py-[50px]">
<h2 class="mb-[20px] text-[32px] font-bold capitalize text-center ">Hãy chuyển sang sử dụng xStore ngay
hôm nay</h2>
<a href=""
class="btn mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
đầu dùng
thử miễn phí</a>
</div>
</div>
</div>
<div class="mt-[80px]">
<h2 class="title text-[32px] text-center font-bold capitalize mb-[35px] ">Câu hỏi thường gặp</h2>
<div class="w-[795px] mx-auto">
<div class="list">
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cho tôi xin bảng giá dịch vụ của sXtore?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
báo giá chi tiết và ưu đãi theo nhu cầu
của bạn.
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Nền tảng xStore phù hợp với các doanh nghiệp
nào?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Phù hợp từ cửa hàng nhỏ đến doanh nghiệp vừa và lớn, đặc biệt là ngành bán lẻ,
thời trang, mỹ phẩm và điện tử.
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Tại sao tôi nên chọn xStore thay vì các nền
tảng thương mại điện tử khác?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
<ul class="list-disc pl-5 space-y-1">
<li>Hiệu năng tốt, tối ưu SEO.</li>
<li>Nhiều tích hợp thanh toán/vận chuyển.</li>
<li>Dễ mở rộng giao diện với Tailwind.</li>
</ul>
</div>
</div>
<div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cách sử dụng nền tảng này như thế nào
vậy?</b>
<i class="fa-solid fa-sort-down"></i>
</div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out my-[10px]">
Đăng ký tài khoản, chọn gói, thêm sản phẩm và bật cổng thanh toán. Có tài liệu
hướng dẫn chi tiết từng bước.
</div>
</div>
</div>
<a href=""
class="flex items-center gap-[5px] w-[175px] h-[40px] leading-[40px] mx-auto bg-black rounded-[4px] justify-center group hover:border-[1px] hover:border-[#000] hover:bg-white ">
<p class="text-white text-[20px] group-hover:text-black">Xem tất cả</p>
<i class="fa-solid fa-caret-right text-white text-[20px] mt-[4px] group-hover:text-black"></i>
</a>
</div>
</div>
<div class="dieukhoan mt-[70px]">
<div class="container">
<div class="bg-gradient-to-r from-[#fff] to-[#ecfefe] ">
<div class="w-[795px] mx-auto py-[45px] text-[16px]">
<b class="mb-[25px] block">Điều khoản & điều kiện</b>
<p class="mb-[35px]"> What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the
industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
to
make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
<p class="mb-[35px]">
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its
layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of
letters,
as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing
packages
and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will
uncover
many web sites
still in their infancy. Various versions have evolved over the years, sometimes by accident,
sometimes on purpose
(injected humour and the like).v</p>
<p class="mb-[35px]">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the
industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
to
make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</div>
</div>
</div>
</div>
</div>

37
template/theme.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xstore</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="{{ 'style.css' | asset_url }}?v=1.2" />
</head>
<body>
{% if global.module != 'login' }
{% else %}
{% include other/header %}
{% endif %}
{{ page_content }}
{% if global.module != 'login' }
{% else %}
{% include other/footer %}
{% endif %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="../../assets/js/main.js"></script>
</body>
</html>