286 lines
18 KiB
HTML
286 lines
18 KiB
HTML
<div class="page-taomoi mb-[80px] page-features">
|
|
|
|
<div class="content-top-features bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
|
|
<div class="container">
|
|
<div data-aos="fade-up" data-aos-duration="1000" 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 data-aos="fade-up" data-aos-duration="1000"
|
|
class="page-name text-center text-[16px] uppercase font-[400] pb-[45px]">Tạo mới</p>
|
|
|
|
<h1 data-aos="fade-up" data-aos-duration="1500"
|
|
class="page-title 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 data-aos="fade-up" data-aos-duration="2000"
|
|
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
|
|
câu chuyện thương hiệu của bạn</p>
|
|
<a data-aos="fade-up" data-aos-duration="2500" 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 data-aos="fade-up" data-aos-duration="3000" class="w-[990px] mx-auto box-chuyendoi">
|
|
<div class="content-chuyendoi 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="name-chuyendoi text-[16px] block mb-[20px]">+42% chuyển đổi từ lượt truy cập thành đơn
|
|
hàng</b>
|
|
<p class="note-chuyendoi 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] content-tammoi">
|
|
<h2 class="title 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" data-aos="fade-up" data-aos-delay="100"
|
|
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" data-aos="fade-up" data-aos-delay="200"
|
|
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" data-aos="fade-up" data-aos-delay="300"
|
|
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" data-aos="fade-up" data-aos-delay="400"
|
|
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="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
|
|
id="tyle">
|
|
<h2 class="title 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="note 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="content w-[1000px] mx-auto">
|
|
|
|
<div class="box-image 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-faq 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="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
|
|
id="tyle">
|
|
<h2 class="title 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="none 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="content w-[1000px] mx-auto">
|
|
|
|
<div class="box-image 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-faq 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="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
|
|
id="tyle">
|
|
<h2 class="title 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="note 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="content w-[1000px] mx-auto">
|
|
|
|
<div class="box-image 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-faq 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="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
|
|
id="tyle">
|
|
<h2 class="title 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="note 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="content w-[1000px] mx-auto">
|
|
<div class="box-image 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-faq 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="user-xstore rounded-[12px] overflow-hidden bg-black ">
|
|
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
|
|
<h2
|
|
class="title 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="box-link 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-xstore 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> |