Files
xstore/template/features/create.html

278 lines
18 KiB
HTML
Raw Normal View History

2025-10-07 08:23:59 +07:00
<div class="page-taomoi mb-[80px] page-features">
2025-10-04 11:46:59 +07:00
<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>
2025-10-07 08:23:59 +07:00
<p class="page-name text-center text-[16px] uppercase font-[400] pb-[45px]">Tạo mới</p>
2025-10-04 11:46:59 +07:00
2025-10-07 08:23:59 +07:00
<h1 class="page-title text-[36px] font-[600] text-center capitalize pb-[40px] ">Thiết kế trang web thân
thiện với <br>
2025-10-04 11:46:59 +07:00
người dùng để thúc đẩy chuyển đổi</h1>
2025-10-07 08:23:59 +07:00
<p class="page-note text-[20px] text-center capitalize pb-[40px] ">Có thể tự do tạo gian hàng đẹp nhất thể
hiện
2025-10-04 11:46:59 +07:00
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>
2025-10-07 08:23:59 +07:00
<div class="w-[990px] mx-auto box-chuyendoi">
2025-10-04 11:46:59 +07:00
<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>
2025-10-07 08:23:59 +07:00
<div class="pt-[100px] content-tammoi">
2025-10-04 11:46:59 +07:00
<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>
2025-10-07 08:23:59 +07:00
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
2025-10-04 11:46:59 +07:00
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>
2025-10-07 08:23:59 +07:00
<div class="content w-[1000px] mx-auto">
2025-10-04 11:46:59 +07:00
<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>
2025-10-07 08:23:59 +07:00
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
2025-10-04 11:46:59 +07:00
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>
2025-10-07 08:23:59 +07:00
<div class="content w-[1000px] mx-auto">
2025-10-04 11:46:59 +07:00
<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>
2025-10-07 08:23:59 +07:00
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
2025-10-04 11:46:59 +07:00
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>
2025-10-07 08:23:59 +07:00
<div class="content w-[1000px] mx-auto">
2025-10-04 11:46:59 +07:00
<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>
2025-10-07 08:23:59 +07:00
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
2025-10-04 11:46:59 +07:00
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>
2025-10-07 08:23:59 +07:00
<div class="content w-[1000px] mx-auto">
2025-10-04 11:46:59 +07:00
<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>
2025-10-07 08:23:59 +07:00
<div class="user-xstore rounded-[12px] overflow-hidden bg-black ">
2025-10-04 11:46:59 +07:00
<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>