Files
xstore/template/free-trial/home.html

326 lines
23 KiB
HTML
Raw Normal View History

2025-10-04 11:46:59 +07:00
<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>