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

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>