401 lines
25 KiB
HTML
401 lines
25 KiB
HTML
<div class="homepage">
|
|
<div class="banner">
|
|
<div data-aos="fade-up" data-aos-duration="2000">
|
|
<h2 class="title 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="tieuchi 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>
|
|
|
|
<div class="container image-banner 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="title 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="list grid grid-cols-3 gap-[20px]">
|
|
<div class="item" data-aos="fade-up" data-aos-delay="100">
|
|
<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="content line-clamp-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" data-aos="fade-up" data-aos-delay="200">
|
|
<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="content line-clamp-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" data-aos="fade-up" data-aos-delay="300">
|
|
<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="content line-clamp-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" data-aos="fade-up" data-aos-delay="400">
|
|
<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="content line-clamp-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" data-aos="fade-up" data-aos-delay="500">
|
|
<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="content line-clamp-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" data-aos="fade-up" data-aos-delay="600">
|
|
<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="content line-clamp-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="content-platforms bg-[#F2F2F6] py-[50px] px-[100px]">
|
|
<h2 class="title 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]" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="container">
|
|
<div class="item-sell 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="content 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> |