tieptk/xstore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 08/10

Browse Source
This commit is contained in:
Tieptk
2025-10-08 01:01:48 +07:00
parent b85755ccda
commit 88a702286e
11 changed files with 1104 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
assets/script/style.css
View File

@@ -318,6 +318,30 @@ html {
.box-tamnhin .content-tamnhin .title { .box-tamnhin .content-tamnhin .title {
font-size: 24px; font-size: 24px;
} }
.page-pricing .page-title {
font-size: 24px;
}
.page-pricing .container-tinhnang {
width: 100%;
padding: 0 15px;
}
.page-pricing .container-faq {
width: 100%;
padding: 0 15px;
}
.page-pricing .container-dieukhoan {
width: 100%;
padding: 0 15px;
}
.page-pricing .box-xstore .title {
font-size: 24px;
}
.page-pricing .box-xstore .btn {
width: 200px;
}
.page-pricing .box-faq .title {
font-size: 24px;
}
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
body { body {
@@ -334,10 +358,23 @@ html {
.box-tamnhin .content-tamnhin { .box-tamnhin .content-tamnhin {
width: 100%; width: 100%;
} }
.item-features {
padding: 20px 0 !important;
margin-bottom: 30px !important;
}
.item-features .title {
font-size: 24px;
}
.item-features .note {
font-size: 14px;
}
.item-features .content { .item-features .content {
width: 100%; width: 100%;
padding: 0 15px; padding: 0 15px;
} }
.item-features .list {
margin: 20px 0 !important;
}
.box-chuyendoi { .box-chuyendoi {
width: 100% !important; width: 100% !important;
} }
@@ -347,19 +384,77 @@ html {
.page-features .page-note { .page-features .page-note {
font-size: 18px; font-size: 18px;
} }
.page-features .content-tammoi {
padding-top: 50px;
}
.page-features .content-tammoi .title {
font-size: 24px;
}
.page-features .content-tammoi .list {
margin-bottom: 50px;
}
.page-features .content-tammoi .list span {
font-size: 14px;
}
.page-features .user-xstore .title {
font-size: 24px;
padding: 30px 0;
}
.page-features .user-xstore .btn {
margin-bottom: 40px;
}
.page-features .user-xstore .box-link {
padding: 20px;
}
.page-pricing .list-pricing {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-pricing .box-faq {
margin-top: 50px;
}
} }
@media (max-width: 834px) { @media (max-width: 834px) {
.homepage .tieuchi .item p { .homepage .tieuchi .item p {
font-size: 14px; font-weight: bold;
} }
.footer-pc .grid-cols-4 { .footer-pc .grid-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.page-features .breadcrumb {
padding: 20px 0;
}
.page-features .page-name {
padding-bottom: 30px;
}
.page-features .content-tammoi .list {
margin-bottom: 50px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-features .content-tammoi .list span {
font-size: 14px;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.homepage .tieuchi { .homepage .tieuchi {
width: 100%; width: 100%;
} }
.page-features .content-tammoi .list {
margin-bottom: 50px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-features .content-tammoi .list span {
font-size: 14px;
}
.page-free-trial .container-faq {
width: 100%;
padding: 0 15px;
}
.page-free-trial .content-from-trial {
padding: 0 15px;
}
.page-free-trial .page-title {
font-size: 24px;
}
} }
@media (max-width: 680px) { @media (max-width: 680px) {
.homepage .tieuchi { .homepage .tieuchi {
@@ -382,6 +477,53 @@ html {
.footer-pc { .footer-pc {
display: none; display: none;
} }
.page-features .content-tammoi .w-\[calc\(100\%\/4\)\],
.page-features .content-tammoi .w-\[calc\(100\%\/5\)\] {
width: 100%;
}
.page-free-trial .content-from-trial .list {
grid-template-columns: repeat(1, minmax(0, 1fr));
padding: 30px 0;
}
.page-pricing .page-title {
font-size: 20px;
}
.page-pricing .box-tinhnang {
margin-top: 50px;
}
.page-pricing .box-tinhnang h2 {
font-size: 20px;
}
.page-pricing .box-tinhnang .content-faq {
overflow: auto;
}
.page-pricing .box-tinhnang .table tr {
height: 45px;
line-height: 45px;
}
.page-pricing .box-tinhnang .table td {
white-space: nowrap;
padding: 0 10px;
}
.page-pricing .box-tinhnang .table th {
white-space: nowrap;
}
.page-pricing .box-tinhnang .table p {
width: 100%;
}
.page-pricing .box-xstore {
margin-top: 50px;
}
.page-pricing .box-xstore .title {
font-size: 20px;
padding: 0 15px;
}
.page-pricing .box-faq .title {
font-size: 20px;
}
.page-login .content-login {
width: 96%;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.homepage .banner .title { .homepage .banner .title {
@@ -439,4 +581,222 @@ html {
.box-tamnhin .box-faq .item-faq .title { .box-tamnhin .box-faq .item-faq .title {
font-size: 16px; font-size: 16px;
} }
.page-features .page-name {
padding-bottom: 10px;
}
.page-features .page-title {
font-size: 20px;
padding-bottom: 10px;
}
.page-features .page-note {
font-size: 16px;
padding-bottom: 10px;
}
.page-features .content-tammoi {
padding-top: 20px;
}
.page-features .content-tammoi .title {
font-size: 20px;
padding: 0 15px;
}
.page-features .content-tammoi .list {
margin-bottom: 50px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-features .content-tammoi .list a {
padding: 0 10px;
}
.page-features .content-tammoi .list span {
font-size: 13px;
}
.page-features .content-chuyendoi {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.page-features .content-chuyendoi .name-chuyendoi {
font-size: 14px;
margin-bottom: 10px;
}
.page-features .content-chuyendoi .note-chuyendoi {
font-size: 14px;
}
.page-features .content-top-features {
padding-bottom: 20px;
}
.page-features .user-xstore .title {
font-size: 20px;
padding: 30px 0;
}
.page-features .user-xstore .btn {
margin-bottom: 40px;
font-size: 14px;
width: 200px;
}
.page-features .user-xstore .box-link {
padding: 20px;
}
.page-features .user-xstore .list-xstore {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-features .list.list-tab a {
width: 100%;
}
.item-features .box-image {
margin-top: 20px;
padding: 10px !important;
}
.item-features .box-image img {
display: block;
height: auto;
}
.item-features .list-faq {
margin-top: 20px;
}
.box-tamnhin .box-faq .btn {
width: 150px;
}
.box-tamnhin .box-faq .btn p {
font-size: 16px;
}
.box-tamnhin .box-faq .btn i {
margin-top: 0;
}
.page-free-trial .breadcrumb {
padding: 20px 0;
}
.page-free-trial .page-title {
font-size: 20px;
}
.page-free-trial .page-name {
margin: 30px 0;
}
.page-free-trial .from-trial {
margin-top: -345px;
}
.page-free-trial .content-from-trial .list {
padding: 15px 0;
}
.page-free-trial .content-from-trial .left b {
font-size: 15px;
}
.page-free-trial .content-from-trial .left p {
font-size: 14px;
}
.page-free-trial .content-from-trial .box-form {
padding: 15px;
}
.page-free-trial .content-from-trial .box-form .title {
font-size: 20px;
}
.page-free-trial .box-faq {
margin-top: 30px;
}
.page-free-trial .box-faq .title {
font-size: 24px;
}
.page-free-trial .box-faq .title-faq b {
font-size: 14px;
}
.page-pricing .page-title {
font-size: 18px;
}
.page-pricing .list-pricing {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (max-width: 435px) {
.homepage .banner .title {
font-size: 18px;
line-height: 28px;
}
.homepage .banner .btn {
margin-top: 30px;
margin-bottom: 30px;
}
.box-benefit .title {
font-size: 18px;
}
.icon_2025.checkbox {
width: 35px;
height: 40px;
background-position: 0 0;
background-size: 185px 165px;
}
.icon_2025.boxreview {
width: 35px;
height: 43px;
background-position: -69px 0;
background-size: 185px 165px;
}
.icon_2025.cart {
width: 40px;
height: 40px;
background-position: -141px 0;
background-size: 185px 165px;
}
.homepage .tieuchi p {
font-size: 16px !important;
font-weight: bold;
}
.box-benefit .item .title {
font-size: 15px;
}
.box-platforms .box-item h3 {
font-size: 16px;
}
.box-platforms .box-item ul {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
}
.box-product-sell .content h2 {
font-size: 16px;
}
.box-product-sell .content p {
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
.box-tamnhin .title {
font-size: 18px;
}
.box-platforms .box-item {
margin-bottom: 30px;
}
.box-tamnhin .item-tamnhin img {
margin-bottom: 20px;
}
.box-tamnhin .item-tamnhin b {
font-size: 16px;
}
.box-tamnhin .item-tamnhin p {
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
.box-tamnhin .box-faq h2 {
font-size: 16px;
margin-bottom: 20px;
}
.box-tamnhin .item-faq b {
font-size: 14px;
}
.page-features .content-tammoi .title {
font-size: 18px;
}
.item-features .note {
padding: 0 10px;
font-size: 14px;
}
.item-features .item-faq b {
font-size: 14px;
}
.item-features .item-faq .title-faq {
padding: 15px 10px 0 10px;
}
.page-features .user-xstore .btn {
margin-bottom: 30px;
}
.page-features .list-xstore span {
font-size: 14px;
}
}/*# sourceMappingURL=style.css.map */ }/*# sourceMappingURL=style.css.map */

2
assets/script/style.css.map
View File

File diff suppressed because one or more lines are too long

434
assets/script/style.scss
View File

@@ -344,6 +344,36 @@ html {
} }
} }
} }
.page-pricing {
.page-title {
font-size: 24px;
}
.container-tinhnang {
width: 100%;
padding: 0 15px;
}
.container-faq {
width: 100%;
padding: 0 15px;
}
.container-dieukhoan {
width: 100%;
padding: 0 15px;
}
.box-xstore {
.title {
font-size: 24px;
}
.btn {
width: 200px;
}
}
.box-faq {
.title {
font-size: 24px;
}
}
}
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
@@ -363,10 +393,21 @@ html {
} }
.item-features { .item-features {
padding: 20px 0 !important;
margin-bottom: 30px !important;
.title {
font-size: 24px;
}
.note {
font-size: 14px;
}
.content { .content {
width: 100%; width: 100%;
padding: 0 15px; padding: 0 15px;
} }
.list {
margin: 20px 0 !important;
}
} }
.box-chuyendoi { .box-chuyendoi {
width: 100% !important; width: 100% !important;
@@ -378,13 +419,46 @@ html {
.page-note { .page-note {
font-size: 18px; font-size: 18px;
} }
.content-tammoi {
padding-top: 50px;
.title {
font-size: 24px;
}
.list {
margin-bottom: 50px;
span {
font-size: 14px;
}
}
}
.user-xstore {
.title {
font-size: 24px;
padding: 30px 0;
}
.btn {
margin-bottom: 40px;
}
.box-link {
padding: 20px;
}
}
}
.page-pricing {
.list-pricing {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.box-faq {
margin-top: 50px;
}
} }
} }
@media (max-width: 834px) { @media (max-width: 834px) {
.homepage .tieuchi { .homepage .tieuchi {
.item p { .item p {
font-size: 14px; font-weight: bold;
} }
} }
.footer-pc { .footer-pc {
@@ -392,12 +466,54 @@ html {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
} }
.page-features {
.breadcrumb {
padding: 20px 0;
}
.page-name {
padding-bottom: 30px;
}
.content-tammoi {
.list {
margin-bottom: 50px;
grid-template-columns: repeat(3, minmax(0, 1fr));
span {
font-size: 14px;
}
}
}
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.homepage .tieuchi { .homepage .tieuchi {
width: 100%; width: 100%;
} }
.page-features {
.content-tammoi {
.list {
margin-bottom: 50px;
grid-template-columns: repeat(2, minmax(0, 1fr));
span {
font-size: 14px;
}
}
}
}
.page-free-trial {
.container-faq {
width: 100%;
padding: 0 15px;
}
.content-from-trial {
padding: 0 15px;
}
.page-title {
font-size: 24px;
}
}
} }
@media (max-width: 680px) { @media (max-width: 680px) {
@@ -421,6 +537,63 @@ html {
.footer-pc { .footer-pc {
display: none; display: none;
} }
.page-features .content-tammoi .w-\[calc\(100\%\/4\)\],
.page-features .content-tammoi .w-\[calc\(100\%\/5\)\] {
width: 100%;
}
.page-free-trial {
.content-from-trial {
.list {
grid-template-columns: repeat(1, minmax(0, 1fr));
padding: 30px 0;
}
}
}
.page-pricing {
.page-title {
font-size: 20px;
}
.box-tinhnang {
margin-top: 50px;
h2 {
font-size: 20px;
}
.content-faq {
overflow: auto;
}
.table {
tr {
height: 45px;
line-height: 45px;
}
td {
white-space: nowrap;
padding: 0 10px;
}
th {
white-space: nowrap;
}
p {
width: 100%;
}
}
}
.box-xstore {
margin-top: 50px;
.title {
font-size: 20px;
padding: 0 15px;
}
}
.box-faq {
.title {
font-size: 20px;
}
}
}
.page-login .content-login {
width: 96%;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
@@ -487,4 +660,263 @@ html {
} }
} }
} }
.page-features {
.page-name {
padding-bottom: 10px;
}
.page-title {
font-size: 20px;
padding-bottom: 10px;
}
.page-note {
font-size: 16px;
padding-bottom: 10px;
}
.content-tammoi {
padding-top: 20px;
.title {
font-size: 20px;
padding: 0 15px;
}
.list {
margin-bottom: 50px;
grid-template-columns: repeat(2, minmax(0, 1fr));
a {
padding: 0 10px;
}
span {
font-size: 13px;
}
}
}
.content-chuyendoi {
grid-template-columns: repeat(1, minmax(0, 1fr));
.name-chuyendoi {
font-size: 14px;
margin-bottom: 10px;
}
.note-chuyendoi {
font-size: 14px;
}
}
.content-top-features {
padding-bottom: 20px;
}
.user-xstore {
.title {
font-size: 20px;
padding: 30px 0;
}
.btn {
margin-bottom: 40px;
font-size: 14px;
width: 200px;
}
.box-link {
padding: 20px;
}
.list-xstore {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.list.list-tab a {
width: 100%;
}
}
.item-features {
.box-image {
margin-top: 20px;
padding: 10px !important;
img {
display: block;
height: auto;
}
}
.list-faq {
margin-top: 20px;
}
}
.box-tamnhin {
.box-faq .btn {
width: 150px;
p {
font-size: 16px;
}
i {
margin-top: 0;
}
}
}
.page-free-trial {
.breadcrumb {
padding: 20px 0;
}
.page-title {
font-size: 20px;
}
.page-name {
margin: 30px 0;
}
.from-trial {
margin-top: -345px;
}
.content-from-trial {
.list {
padding: 15px 0;
}
.left {
b {
font-size: 15px;
}
p {
font-size: 14px;
}
}
.box-form {
padding: 15px;
.title {
font-size: 20px;
}
}
}
.box-faq {
margin-top: 30px;
.title {
font-size: 24px;
}
.title-faq b {
font-size: 14px;
}
}
}
.page-pricing {
.page-title {
font-size: 18px;
}
.list-pricing {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
}
@media (max-width: 435px) {
.homepage .banner .title {
font-size: 18px;
line-height: 28px;
}
.homepage .banner .btn {
margin-top: 30px;
margin-bottom: 30px;
}
.box-benefit .title {
font-size: 18px;
}
.icon_2025 {
&.checkbox {
width: 35px;
height: 40px;
background-position: 0 0;
background-size: 185px 165px;
}
&.boxreview {
width: 35px;
height: 43px;
background-position: -69px 0;
background-size: 185px 165px;
}
&.cart {
width: 40px;
height: 40px;
background-position: -141px 0;
background-size: 185px 165px;
}
}
.homepage .tieuchi p {
font-size: 16px !important;
font-weight: bold;
}
.box-benefit .item .title {
font-size: 15px;
}
.box-platforms {
.box-item {
h3 {
font-size: 16px;
}
ul {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
}
}
}
.box-product-sell {
.content {
h2 {
font-size: 16px;
}
p {
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
}
}
.box-tamnhin .title {
font-size: 18px;
}
.box-platforms .box-item {
margin-bottom: 30px;
}
.box-tamnhin {
.item-tamnhin {
img {
margin-bottom: 20px;
}
b {
font-size: 16px;
}
p {
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
}
.box-faq h2 {
font-size: 16px;
margin-bottom: 20px;
}
.item-faq {
b {
font-size: 14px;
}
}
}
.page-features .content-tammoi .title {
font-size: 18px;
}
.item-features {
.note {
padding: 0 10px;
font-size: 14px;
}
.item-faq {
b {
font-size: 14px;
}
.title-faq {
padding: 15px 10px 0 10px;
}
}
}
.page-features .user-xstore .btn {
margin-bottom: 30px;
}
.page-features .list-xstore {
span {
font-size: 14px;
}
}
} }

99
template/features/conversion.html
View File

@@ -1,8 +1,8 @@
<div class="page-chuyendoi mb-[80px]"> <div class="page-chuyendoi mb-[80px] page-features">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]"> <div class="content-top-features bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container"> <div class="container">
<div class="breadcrumb py-[40px]"> <div class="breadcrumb py-[40px]" data-aos="fade-up" data-aos-duration="1000">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center"> <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]"> class="flex items-center items-center gap-[10px] pr-[12px]">
@@ -23,30 +23,36 @@
</li> </li>
</ol> </ol>
</div> </div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[60px]">Chuyển đổi</p> <p data-aos="fade-up" data-aos-duration="1000"
class="page-name text-center text-[16px] uppercase font-[400] pb-[60px]">Chuyển đổi</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Tạo thanh toán nhanh chóng và đơn <h1 data-aos="fade-up" data-aos-duration="1500"
class="page-title text-[36px] font-[600] text-center capitalize pb-[40px] ">Tạo thanh toán nhanh chóng
và đơn
giản</h1> giản</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Thu hút thêm nhiều khách hàng hơn trong <p data-aos="fade-up" data-aos-duration="2000"
class="page-note text-[20px] text-center capitalize pb-[40px] ">
Thu hút thêm nhiều khách hàng hơn trong
khi tiết khi tiết
kiệm tiền phí kiệm tiền phí
cho nhà cung <br> cho nhà cung <br>
cấp dịch vụ cấp dịch vụ
thanh toán</p> thanh toán</p>
<a href="" <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 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 đầu dùng
thử miễn phí</a> thử miễn phí</a>
<div class="w-[990px] mx-auto"> <div data-aos="fade-up" data-aos-duration="3000" class="box-chuyendoi w-[990px] mx-auto">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white"> <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]"> <div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/img-chuyendoi.jpg" class="block w-full h-[190px] object-cover" <img src="../../assets/images/img-chuyendoi.jpg" class="block w-full h-[190px] object-cover"
alt="chuyendoi"> alt="chuyendoi">
</div> </div>
<div class="info col-span-2 p-[12px]"> <div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">Tỷ lệ chuyển đổi thanh toán 61,9%</b> <b class="name-chuyendoi text-[16px] block mb-[20px]">Tỷ lệ chuyển đổi thanh toán 61,9%</b>
<p class="text-[16px]">Khách hàng thấy tỷ lệ chuyển đổi thanh toán là 61,9% (cao hơn 20% so <p class="note-chuyendoi text-[16px]">Khách hàng thấy tỷ lệ chuyển đổi thanh toán là 61,9% (cao
hơn 20% so
với mức trung bình với mức trung bình
của ngành) trên xStore khi sử của ngành) trên xStore khi sử
dụng cấu hình thanh toán hàng đầu</p> dụng cấu hình thanh toán hàng đầu</p>
@@ -56,8 +62,9 @@
</div> </div>
</div> </div>
<div class="pt-[100px]"> <div class="pt-[100px] content-tammoi">
<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 <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> bạn</h2>
<div class="container"> <div class="container">
<div class="list grid grid-cols-4 gap-[12px] mb-[100px]" id="tab"> <div class="list grid grid-cols-4 gap-[12px] mb-[100px]" id="tab">
@@ -84,21 +91,22 @@
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle"> id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Tỷ lệ chuyển đổi <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Tỷ lệ chuyển
đổi
cao hơn giúp cao hơn giúp
doanh nghiệp của bạn <br> phát triển doanh nghiệp của bạn <br> phát triển
nhanh hơn</h2> nhanh hơn</h2>
<p class="text-[16px] text-center ">Thanh toán một trang có thể tùy chỉnh hoàn toàn mang lại khả <p class="note text-[16px] text-center ">Thanh toán một trang có thể tùy chỉnh hoàn toàn mang lại khả
năng chuyển đổi năng chuyển đổi
thanh toán <br> tốt nhất thanh toán <br> tốt nhất
có thể để đảm bảo doanh có thể để đảm bảo doanh
số không bị mất do trục trặc khi thanh toán</p> số không bị mất do trục trặc khi thanh toán</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/fontend-hacom.jpg" width="100%" height="100%" alt="hacom"> src="../../assets/images/fontend-hacom.jpg" width="100%" height="100%" alt="hacom">
@@ -106,7 +114,7 @@
</div> </div>
<div class="list mt-[40px]"> <div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -124,25 +132,26 @@
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="thanhtoan"> id="thanhtoan">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Thanh toán nhanh <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Thanh toán
nhanh
chóng, đơn giản mà khách hàng <br> chóng, đơn giản mà khách hàng <br>
của bạn sẽ thích</h2> của bạn sẽ thích</h2>
<p class="text-[16px] text-center ">Trải nghiệm thanh toán hiện đại và dễ dàng mà khách hàng hiện <p class="note text-[16px] text-center ">Trải nghiệm thanh toán hiện đại và dễ dàng mà khách hàng hiện
mong đợi khi sử dụng các công cụ như <br> ví điện tử (Google, mong đợi khi sử dụng các công cụ như <br> ví điện tử (Google,
PayPal, Apple, v.v.) và tính năng tự động hoàn thành tích hợp của Google</p> PayPal, Apple, v.v.) và tính năng tự động hoàn thành tích hợp của Google</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/fontend-thanhtoan.jpg" width="100%" height="100%" alt="hacom"> src="../../assets/images/fontend-thanhtoan.jpg" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -163,24 +172,25 @@
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="mucgia"> id="mucgia">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giá cả cạnh tranh <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giá cả cạnh
tranh
nhất để tiết kiệm chi phí</h2> nhất để tiết kiệm chi phí</h2>
<p class="text-[16px] text-center ">Các đối tác thanh toán hàng đầu của chúng tôi cung cấp mức giá <p class="none text-[16px] text-center ">Các đối tác thanh toán hàng đầu của chúng tôi cung cấp mức giá
cạnh tranh ngay từ đầu và chúng tôi có thể <br> giúp bạn kiếm cạnh tranh ngay từ đầu và chúng tôi có thể <br> giúp bạn kiếm
được mức giá tốt hơn khi bạn mở rộng quy mô</p> được mức giá tốt hơn khi bạn mở rộng quy mô</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-bigsale.jpg" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-bigsale.jpg" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -198,25 +208,26 @@
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="khongtinh"> id="khongtinh">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Không có phí giao <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Không có phí
giao
dịch bổ sung cho thanh toán hoặc các <br> tính năng cốt lõi</h2> dịch bổ sung cho thanh toán hoặc các <br> tính năng cốt lõi</h2>
<p class="text-[16px] text-center ">Chọn nhà cung cấp dịch vụ thanh toán mà không phải trả thêm phí <p class="note text-[16px] text-center ">Chọn nhà cung cấp dịch vụ thanh toán mà không phải trả thêm phí
giao dịch/hình phạt so với mức phí lên tới 2% <br> trên các giao dịch/hình phạt so với mức phí lên tới 2% <br> trên các
nền tảng khác — hãy đưa ra quyết định dựa trên nhu cầu kinh doanh của bạn, không phải của chúng nền tảng khác — hãy đưa ra quyết định dựa trên nhu cầu kinh doanh của bạn, không phải của chúng
tôi.</p> tôi.</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-credit.jpg" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-credit.jpg" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -235,10 +246,10 @@
</div> </div>
<div class="rounded-[12px] overflow-hidden bg-black "> <div class="user-xstore rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden"> <div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2 <h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize "> class="title pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy Hãy
chuyển sang chuyển sang
nền tảng nền tảng
@@ -249,11 +260,11 @@
đầu dùng đầu dùng
thử miễn phí</a> thử miễn phí</a>
</div> </div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]"> <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 <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 khách hàng
của chúng tôi để</p> của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]"> <div class="list-xstore grid grid-cols-4 gap-[12px]">
<a href="#" <a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group "> 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> <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>

88
template/features/create.html
View File

@@ -1,8 +1,8 @@
<div class="page-taomoi mb-[80px] page-features"> <div class="page-taomoi mb-[80px] page-features">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]"> <div class="content-top-features bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container"> <div class="container">
<div class="breadcrumb py-[40px]"> <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"> <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]"> class="flex items-center items-center gap-[10px] pr-[12px]">
@@ -23,29 +23,33 @@
</ol> </ol>
</div> </div>
<p class="page-name text-center text-[16px] uppercase font-[400] pb-[45px]">Tạo mới</p> <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 class="page-title text-[36px] font-[600] text-center capitalize pb-[40px] ">Thiết kế trang web thân <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> thiện với <br>
người dùng để thúc đẩy chuyển đổi</h1> người dùng để thúc đẩy chuyển đổi</h1>
<p class="page-note text-[20px] text-center capitalize pb-[40px] ">Có thể tự do tạo gian hàng đẹp nhất thể <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 hiện
câu chuyện thương hiệu của bạn</p> câu chuyện thương hiệu của bạn</p>
<a href="" <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 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 đầu dùng
thử miễn phí</a> thử miễn phí</a>
<div data-aos="fade-up" data-aos-duration="3000" class="w-[990px] mx-auto box-chuyendoi">
<div 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="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="image rounded-[12px] overflow-hidden h-[190px]"> <div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/image-create.png" class="block w-full h-[190px] object-cover" <img src="../../assets/images/image-create.png" class="block w-full h-[190px] object-cover"
alt="chuyendoi"> alt="chuyendoi">
</div> </div>
<div class="info col-span-2 p-[12px]"> <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> <b class="name-chuyendoi text-[16px] block mb-[20px]">+42% chuyển đổi từ lượt truy cập thành đơn
<p class="text-[16px]">Các trang web doanh nghiệp nhỏ trên xStore chỉ sử dụng trải nghiệm thanh 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 toán
cốt lõi của chúng tôi có tỷ lệ chuyển đổi 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> 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>
@@ -58,28 +62,29 @@
</div> </div>
<div class="pt-[100px] content-tammoi"> <div class="pt-[100px] content-tammoi">
<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 <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> bạn</h2>
<div class="container"> <div class="container">
<div class="list grid grid-cols-4 gap-[12px] mb-[100px]" id="tab"> <div class="list grid grid-cols-4 gap-[12px] mb-[100px]" id="tab">
<a href="#khoitao" <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 "> 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 <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Khởi tạo nhanh
chóng</span> chóng</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i> <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a> </a>
<a href="#xaydung" <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 "> 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 <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> bạn</span>
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i> <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a> </a>
<a href="#phattrien" <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 "> 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> <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> <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a> </a>
<a href="#giunguyen" <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 "> 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 <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Giữ nguyên trang web của
bạn</span> bạn</span>
@@ -89,15 +94,17 @@
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle"> id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Khởi chạy nhanh chóng <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> 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 <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 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> một nền tảng mạnh mẽ</p>
<div class="content w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/frontend-traphaco.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/frontend-traphaco.png" width="100%" height="100%" alt="hacom">
@@ -105,7 +112,7 @@
</div> </div>
<div class="list mt-[40px]"> <div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -124,14 +131,16 @@
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle"> id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Xây dựng thương hiệu <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> 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 <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> 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="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/xaydungthuonghieu.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/xaydungthuonghieu.png" width="100%" height="100%" alt="hacom">
@@ -139,7 +148,7 @@
</div> </div>
<div class="list mt-[40px]"> <div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -158,16 +167,18 @@
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle"> id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Phát triển linh hoạt <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> trên nền tảng có khả năng mở rộng <br>
theo cửa hàng của bạn</h2> 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 <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 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> 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="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/fontend-mialala.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/fontend-mialala.png" width="100%" height="100%" alt="hacom">
@@ -175,7 +186,7 @@
</div> </div>
<div class="list mt-[40px]"> <div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -194,16 +205,16 @@
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle"> id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giữ nguyên trang web <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> 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> 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 <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ử 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> mà không phải bỏ nội dung của bạn</p>
<div class="content w-[1000px] mx-auto"> <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=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/keotha.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/keotha.png" width="100%" height="100%" alt="hacom">
@@ -211,7 +222,7 @@
</div> </div>
<div class="list mt-[40px]"> <div class="list mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -224,14 +235,13 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="user-xstore rounded-[12px] overflow-hidden bg-black "> <div class="user-xstore rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden"> <div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2 <h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize "> class="title pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy Hãy
chuyển sang chuyển sang
nền tảng nền tảng
@@ -242,11 +252,11 @@
đầu dùng đầu dùng
thử miễn phí</a> thử miễn phí</a>
</div> </div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]"> <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 <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 khách hàng
của chúng tôi để</p> của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]"> <div class="list-xstore grid grid-cols-4 gap-[12px]">
<a href="#" <a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group "> 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> <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>
@@ -271,8 +281,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

108
template/features/grow.html
View File

@@ -1,8 +1,8 @@
<div class="page-grow mb-[80px]"> <div class="page-grow mb-[80px] page-features">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]"> <div class="content-top-features bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container"> <div class="container">
<div class="breadcrumb py-[40px]"> <div class="breadcrumb py-[40px]" data-aos="fade-up" data-aos-duration="1000">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center"> <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]"> class="flex items-center items-center gap-[10px] pr-[12px]">
@@ -23,27 +23,33 @@
</ol> </ol>
</div> </div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[45px]">Vận hành</p> <p data-aos="fade-up" data-aos-duration="1000"
class="page-name text-center text-[16px] uppercase font-[400] pb-[45px]">Vận hành</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Mở rộng thương hiệu của bạn để thúc <h1 data-aos="fade-up" data-aos-duration="1500"
class="page-title text-[36px] font-[600] text-center capitalize pb-[40px] ">Mở rộng thương hiệu của bạn
để thúc
đẩy doanh số tốt hơn</h1> đẩy doanh số tốt hơn</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Phát triển không giới hạn bằng cách nhanh <p data-aos="fade-up" data-aos-duration="2000"
class="page-note text-[20px] text-center capitalize pb-[40px] ">Phát triển không giới hạn bằng cách
nhanh
chóng tiếp cận các tính năng, khả <br> năng mới và tăng nguồn doanh thu</p> chóng tiếp cận các tính năng, khả <br> năng mới và tăng nguồn doanh thu</p>
<a href="" <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 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 đầu dùng
thử miễn phí</a> thử miễn phí</a>
<div class="w-[990px] mx-auto"> <div class="box-chuyendoi w-[990px] mx-auto" data-aos="fade-up" data-aos-duration="3000">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white"> <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]"> <div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/image-chuyendoi.png" class="block w-full h-[190px] object-cover" <img src="../../assets/images/image-chuyendoi.png" class="block w-full h-[190px] object-cover"
alt="chuyendoi"> alt="chuyendoi">
</div> </div>
<div class="info col-span-2 p-[12px]"> <div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">+26% Doanh thu</b> <b class="name-chuyendoi text-[16px] block mb-[20px]">+26% Doanh thu</b>
<p class="text-[16px]">Khách hàng doanh nghiệp nhỏ sẽ có doanh thu tăng thêm 26% khi thêm nguồn <p class="note-chuyendoi text-[16px]">Khách hàng doanh nghiệp nhỏ sẽ có doanh thu tăng thêm 26%
khi thêm nguồn
doanh thu mới thông qua nhiều cửa hàng.*</p> doanh thu mới thông qua nhiều cửa hàng.*</p>
</div> </div>
</div> </div>
@@ -53,10 +59,11 @@
</div> </div>
</div> </div>
<div class="pt-[100px]"> <div class="pt-[100px] content-tammoi">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn</h2> <h2 class="title text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn
</h2>
<div class="container"> <div class="container">
<div class="list flex items-center justify-center gap-[12px] mb-[100px]" id="tab"> <div class="list flex flex-wrap items-center justify-center gap-[12px] mb-[100px]" id="tab">
<a href="#kethop" <a href="#kethop"
class=" w-[calc(100%/4)] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group "> class=" w-[calc(100%/4)] 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)] ">Kết hợp trực tuyến và <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Kết hợp trực tuyến và
@@ -77,25 +84,27 @@
</a> </a>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="kethop"> id="kethop">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Kết hợp trực tuyến và <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Kết hợp trực
tuyến và
ngoại tuyến để thu hút khách hàng <br> theo cách họ muốn</h2> ngoại tuyến để thu hút khách hàng <br> theo cách họ muốn</h2>
<p class="text-[16px] text-center ">Kết nối liền mạch điểm bán hàng truyền thống với cửa hàng trực tuyến <p class="note text-[16px] text-center ">Kết nối liền mạch điểm bán hàng truyền thống với cửa hàng trực
tuyến
của bạn để khách <br> hàng có thể Mua hàng trực tuyến, của bạn để khách <br> hàng có thể Mua hàng trực tuyến,
Nhận hàng tại cửa hàng</p> Nhận hàng tại cửa hàng</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-kethop.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-kethop.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -112,25 +121,27 @@
</div> </div>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="nguondoanhthu"> id="nguondoanhthu">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Thêm nguồn doanh thu <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Thêm nguồn
doanh thu
mới để mở rộng <br> doanh nghiệp của bạn.</h2> mới để mở rộng <br> doanh nghiệp của bạn.</h2>
<p class="text-[16px] text-center ">Mở rộng để phục vụ cả khách hàng bán lẻ và bán buôn hoặc thêm các <p class="note text-[16px] text-center ">Mở rộng để phục vụ cả khách hàng bán lẻ và bán buôn hoặc thêm
các
thương hiệu mới <br> mà không tốn kém và rắc rối khi quản thương hiệu mới <br> mà không tốn kém và rắc rối khi quản
lý nhiều nền tảng</p> lý nhiều nền tảng</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/themdoanhthu.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/themdoanhthu.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -143,29 +154,30 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id=""> id="">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Phát triển linh hoạt <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> trên nền tảng có khả năng mở rộng <br>
theo cửa hàng của bạn</h2> 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 <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 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> 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="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/phattienlinhhoat.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/phattienlinhhoat.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -182,27 +194,29 @@
</div> </div>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="khoinghiep"> id="khoinghiep">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Khởi nghiệp kinh <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Khởi nghiệp
kinh
doanh mới nhanh chóng mà doanh mới nhanh chóng mà
<br> không cần phải học nền tảng mới <br> không cần phải học nền tảng mới
</h2> </h2>
<p class="text-[16px] text-center ">Ra mắt thêm các doanh nghiệp với trang web và trải nghiệm thương mại <p class="note text-[16px] text-center ">Ra mắt thêm các doanh nghiệp với trang web và trải nghiệm
thương mại
điện tử riêng biệt <br> mà không cần phải bắt đầu từ đầu điện tử riêng biệt <br> mà không cần phải bắt đầu từ đầu
hoặc chia nhỏ phân tích trên nhiều nền tảng</p> hoặc chia nhỏ phân tích trên nhiều nền tảng</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-khoinghiep.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-khoinghiep.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -219,10 +233,10 @@
</div> </div>
</div> </div>
<div class="rounded-[12px] overflow-hidden bg-black "> <div class="user-xstore rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden"> <div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2 <h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize "> class="title pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy Hãy
chuyển sang chuyển sang
nền tảng nền tảng
@@ -233,11 +247,11 @@
đầu dùng đầu dùng
thử miễn phí</a> thử miễn phí</a>
</div> </div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]"> <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 <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 khách hàng
của chúng tôi để</p> của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]"> <div class="list-xstore grid grid-cols-4 gap-[12px]">
<a href="#" <a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group "> 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> <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>

95
template/features/market.html
View File

@@ -1,8 +1,8 @@
<div class="page-market mb-[80px]"> <div class="page-market mb-[80px] page-features">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]"> <div class="content-top-features bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container"> <div class="container">
<div class="breadcrumb py-[40px]"> <div class="breadcrumb py-[40px]" data-aos="fade-up" data-aos-duration="1000">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center"> <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]"> class="flex items-center items-center gap-[10px] pr-[12px]">
@@ -23,41 +23,46 @@
</ol> </ol>
</div> </div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[45px]">Thị trường</p> <p data-aos="fade-up" data-aos-duration="1000"
class="page-name text-center text-[16px] uppercase font-[400] pb-[45px]">Thị trường</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Tiếp thị tới bất kỳ ai, ở bất kỳ đâu <h1 data-aos="fade-up" data-aos-duration="1500"
class="page-title text-[36px] font-[600] text-center capitalize pb-[40px] ">Tiếp thị tới bất kỳ ai, ở
bất kỳ đâu
</h1> </h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Tiếp cận nhiều người mua sắm hơn trên các kênh <p data-aos="fade-up" data-aos-duration="2000"
class="page-note text-[20px] text-center capitalize pb-[40px] ">Tiếp cận nhiều người mua sắm hơn trên
các
kênh
thị trường, mạng xã hội, tìm <br> kiếm và quảng cáo hàng đầu</p> thị trường, mạng xã hội, tìm <br> kiếm và quảng cáo hàng đầu</p>
<a href="" <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 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 đầu dùng
thử miễn phí</a> thử miễn phí</a>
<div data-aos="fade-up" data-aos-duration="3000" class="box-chuyendoi w-[990px] mx-auto">
<div class="w-[990px] mx-auto"> <div class="content-chuyendoi grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="image rounded-[12px] overflow-hidden h-[190px]"> <div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/image-x2doanthu.png" class="block w-full h-[190px] object-cover" <img src="../../assets/images/image-x2doanthu.png" class="block w-full h-[190px] object-cover"
alt="chuyendoi"> alt="chuyendoi">
</div> </div>
<div class="info col-span-2 p-[12px]"> <div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">X2 Doanh thu</b> <b class="name-chuyendoi text-[16px] block mb-[20px]">X2 Doanh thu</b>
<p class="text-[16px]">Các doanh nghiệp nhỏ thêm một thị trường sẽ tăng doanh thu 38%, thêm hai <p class="note-chuyendoi text-[16px]">Các doanh nghiệp nhỏ thêm một thị trường sẽ tăng doanh thu
38%, thêm hai
thị trường sẽ tăng doanh thu 120% và thêm ba thị trường sẽ tăng doanh thu 120% và thêm ba
kênh quảng cáo trở lên sẽ tăng mức độ tương tác 250%.</p> kênh quảng cáo trở lên sẽ tăng mức độ tương tác 250%.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="pt-[100px]"> <div class="pt-[100px] content-tammoi">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn</h2> <h2 class="title text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn
</h2>
<div class="container"> <div class="container">
<div class="list flex items-center justify-center gap-[12px] mb-[100px]" id="tab"> <div class="list flex flex-wrap items-center justify-center gap-[12px] mb-[100px]" id="tab">
<a href="#quangcao" <a href="#quangcao"
class=" w-[calc(100%/5)] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group "> class=" w-[calc(100%/5)] 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)] ">Quảng cáo ở bất cứ <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Quảng cáo ở bất cứ
@@ -77,27 +82,29 @@
</a> </a>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="quangcao"> id="quangcao">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Quảng cáo ở mọi nơi <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Quảng cáo ở mọi
nơi
thông qua <br> thông qua <br>
nhiều kênh hơn</h2> nhiều kênh hơn</h2>
<p class="text-[16px] text-center ">Tích hợp trực tiếp và tối ưu hóa hiệu suất vào các kênh tìm kiếm, <p class="note text-[16px] text-center ">Tích hợp trực tiếp và tối ưu hóa hiệu suất vào các kênh tìm
kiếm,
nền tảng truyền thông xã hội và kênh hiển thị hàng <br> đầu nền tảng truyền thông xã hội và kênh hiển thị hàng <br> đầu
giúp bạn thu hút nhiều khách hàng hơn và đạt được khả năng hiển thị thương hiệu (Google, Instagram, giúp bạn thu hút nhiều khách hàng hơn và đạt được khả năng hiển thị thương hiệu (Google, Instagram,
TikTok, v.v.)</p> TikTok, v.v.)</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-quangcao.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-quangcao.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -114,26 +121,28 @@
</div> </div>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="datsanpham"> id="datsanpham">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đặt sản phẩm ở khắp <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đặt sản phẩm ở
khắp
mọi nơi <br> mọi nơi <br>
của thị trường</h2> của thị trường</h2>
<p class="text-[16px] text-center ">Tích hợp với các thị trường lớn nhất (Facebook, Tiktok, Shopee,...) <p class="note text-[16px] text-center ">Tích hợp với các thị trường lớn nhất (Facebook, Tiktok,
Shopee,...)
giúp mở rộng phạm vi tiếp cận cửa hàng <br> của bạn, với giúp mở rộng phạm vi tiếp cận cửa hàng <br> của bạn, với
các tùy chọn để tối ưu hóa nguồn cấp dữ liệu sản phẩm trên nhiều kênh.</p> các tùy chọn để tối ưu hóa nguồn cấp dữ liệu sản phẩm trên nhiều kênh.</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-kethop.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-kethop.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -149,26 +158,28 @@
</div> </div>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="dungdautimkiem"> id="dungdautimkiem">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đứng đầu trang tìm <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đứng đầu trang
tìm
kiếm <br> kiếm <br>
với các công cụ SEO mạnh mẽ</h2> với các công cụ SEO mạnh mẽ</h2>
<p class="text-[16px] text-center ">Các công cụ SEO mạnh mẽ, sẵn dùng giúp tăng lưu lượng truy cập để <p class="note text-[16px] text-center ">Các công cụ SEO mạnh mẽ, sẵn dùng giúp tăng lưu lượng truy cập
để
đảm bảo <br> đảm bảo <br>
bạn có thứ hạng cao hơn đối thủ cạnh tranh</p> bạn có thứ hạng cao hơn đối thủ cạnh tranh</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/congcuseo.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/congcuseo.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -185,10 +196,10 @@
</div> </div>
</div> </div>
<div class="rounded-[12px] overflow-hidden bg-black "> <div class="user-xstore rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden"> <div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2 <h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize "> class="title pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy Hãy
chuyển sang chuyển sang
nền tảng nền tảng
@@ -199,11 +210,11 @@
đầu dùng đầu dùng
thử miễn phí</a> thử miễn phí</a>
</div> </div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]"> <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 <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 khách hàng
của chúng tôi để</p> của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]"> <div class="list-xstore grid grid-cols-4 gap-[12px]">
<a href="#" <a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group "> 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> <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>

105
template/features/operate.html
View File

@@ -1,8 +1,8 @@
<div class="page-operate mb-[80px]"> <div class="page-operate mb-[80px] page-features">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]"> <div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container"> <div class="container">
<div class="breadcrumb py-[40px]"> <div class="breadcrumb py-[40px]" data-aos="fade-up" data-aos-duration="1000">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center"> <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center items-center gap-[10px] pr-[12px]"> class="flex items-center items-center gap-[10px] pr-[12px]">
@@ -23,28 +23,34 @@
</ol> </ol>
</div> </div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[45px]">Vận hành</p> <p data-aos="fade-up" data-aos-duration="1000"
class="page-name text-center text-[16px] uppercase font-[400] pb-[45px]">Vận hành</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Điều hành doanh nghiệp của bạn hiệu <h1 data-aos="fade-up" data-aos-duration="1500"
class="page-title text-[36px] font-[600] text-center capitalize pb-[40px] ">Điều hành doanh nghiệp của
bạn hiệu
quả hơn</h1> quả hơn</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Giảm chi phí vận hành của bạn với một nền tảng <p data-aos="fade-up" data-aos-duration="2000"
class="page-note text-[20px] text-center capitalize pb-[40px] ">Giảm chi phí vận hành của bạn với một
nền tảng
đáng tin cậy <br> đáng tin cậy <br>
và một đội ngũ hỗ trợ bạn</p> và một đội ngũ hỗ trợ bạn</p>
<a href="" <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 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 đầu dùng
thử miễn phí</a> thử miễn phí</a>
<div class="w-[990px] mx-auto"> <div class="box-chuyendoi w-[990px] mx-auto" data-aos="fade-up" data-aos-duration="3000">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white"> <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]"> <div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/img-chuyendoi.jpg" class="block w-full h-[190px] object-cover" <img src="../../assets/images/img-chuyendoi.jpg" class="block w-full h-[190px] object-cover"
alt="chuyendoi"> alt="chuyendoi">
</div> </div>
<div class="info col-span-2 p-[12px]"> <div class="info col-span-2 p-[12px]">
<b class="text-[16px] block mb-[20px]">Thời gian hoạt động 99,99%</b> <b class="name-chuyendoi text-[16px] block mb-[20px]">Thời gian hoạt động 99,99%</b>
<p class="text-[16px]">Giảm thiểu phiền phức, tối đa hóa tăng trưởng với thời gian hoạt động <p class="note-chuyendoi text-[16px]">Giảm thiểu phiền phức, tối đa hóa tăng trưởng với thời
gian hoạt động
99,99%, thời gian chờ hỗ trợ trung bình <2 phút,> 99,99%, thời gian chờ hỗ trợ trung bình <2 phút,>
85% cuộc gọi hỗ trợ đầu tiên được giải quyết, hơn 20 triệu biến thể sản phẩm, hơn 2 85% cuộc gọi hỗ trợ đầu tiên được giải quyết, hơn 20 triệu biến thể sản phẩm, hơn 2
triệu SKU sản phẩm và tổng chi triệu SKU sản phẩm và tổng chi
@@ -57,10 +63,11 @@
</div> </div>
</div> </div>
<div class="pt-[100px]"> <div class="pt-[100px] content-tammoi">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn</h2> <h2 class="title text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn
</h2>
<div class="container"> <div class="container">
<div class="list flex items-center gap-[12px] mb-[100px]" id="tab"> <div class="list list-tab flex flex-wrap items-center gap-[12px] mb-[100px]" id="tab">
<a href="#hieusuat" <a href="#hieusuat"
class="px-[60px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group "> class="px-[60px] 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)] ">Hiệu suất đáng tin <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Hiệu suất đáng tin
@@ -85,26 +92,28 @@
<i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i> <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
</a> </a>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="hieusuat"> id="hieusuat">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Hiệu suất đáng tin <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Hiệu suất đáng
tin
cậy <br> cậy <br>
để tránh gián đoạn kinh doanh</h2> để tránh gián đoạn kinh doanh</h2>
<p class="text-[16px] text-center ">Thời gian hoạt động 99,99%, trang tải nhanh và bảo trì được xử lý <p class="note text-[16px] text-center ">Thời gian hoạt động 99,99%, trang tải nhanh và bảo trì được xử
lý
cho bạn, bao gồm bảo mật, <br> lưu trữ, quản lý tuân thủ và cho bạn, bao gồm bảo mật, <br> lưu trữ, quản lý tuân thủ và
cập nhật</p> cập nhật</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-quangcao.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-quangcao.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -121,28 +130,30 @@
</div> </div>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="chiphi"> id="chiphi">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giảm chi phí khi bạn <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giảm chi phí
khi bạn
phát triển để hỗ trợ <br> việc mở rộng quy mô</h2> phát triển để hỗ trợ <br> việc mở rộng quy mô</h2>
<p class="text-[16px] text-center ">Nền tảng của bạn cần được xây dựng để mở rộng quy mô, nhưng chi phí <p class="note text-[16px] text-center ">Nền tảng của bạn cần được xây dựng để mở rộng quy mô, nhưng chi
phí
của bạn không nhất thiết phải tăng theo. Hãy xây của bạn không nhất thiết phải tăng theo. Hãy xây
dựng <br> doanh nghiệp của bạn trên một nền tảng có tổng chi phí sở hữu thấp nhất, bao gồm cả việc dựng <br> doanh nghiệp của bạn trên một nền tảng có tổng chi phí sở hữu thấp nhất, bao gồm cả việc
giảm giảm
tỷ lệ thanh toán, khi tỷ lệ thanh toán, khi
bạn phát triển.</p> bạn phát triển.</p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-giamchiphi.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-giamchiphi.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -158,27 +169,29 @@
</div> </div>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="doitac"> id="doitac">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đối tác đáng tin cậy <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đối tác đáng
tin cậy
cho mọi bước phát triển của bạn</h2> cho mọi bước phát triển của bạn</h2>
<p class="text-[16px] text-center ">Yên tâm hơn khi biết rằng bạn chỉ cần gọi điện thoại là có thể nhận <p class="note text-[16px] text-center ">Yên tâm hơn khi biết rằng bạn chỉ cần gọi điện thoại là có thể
nhận
được hỗ trợ trực tiếp 24/7 từ nhân viên <br> xStore được hỗ trợ trực tiếp 24/7 từ nhân viên <br> xStore
tại Hà nội, cùng các dịch vụ hỗ trợ thành công, ra mắt hoặc di chuyển trước, trong và sau khi ra tại Hà nội, cùng các dịch vụ hỗ trợ thành công, ra mắt hoặc di chuyển trước, trong và sau khi ra
mắt mắt
</p> </p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-giamchiphi.png" width="100%" height="100%" alt="hacom"> src="../../assets/images/image-giamchiphi.png" width="100%" height="100%" alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -194,11 +207,13 @@
</div> </div>
</div> </div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]" <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="hieubiet"> id="hieubiet">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Hiểu biết sâu sắc về <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Hiểu biết sâu
sắc về
kinh doanh và sự nhanh nhẹn thúc đẩy <br> việc ra quyết định thông minh</h2> kinh doanh và sự nhanh nhẹn thúc đẩy <br> việc ra quyết định thông minh</h2>
<p class="text-[16px] text-center ">Với các công cụ phân tích mạnh mẽ được tích hợp sẵn trong mỗi gói, <p class="note text-[16px] text-center ">Với các công cụ phân tích mạnh mẽ được tích hợp sẵn trong mỗi
gói,
bạn có thể theo dõi hoạt động kinh doanh và điều bạn có thể theo dõi hoạt động kinh doanh và điều
chỉnh <br> để tăng tốc độ phát triển. Ngoài ra, bộ công cụ AI ngày càng phát triển của chúng tôi có chỉnh <br> để tăng tốc độ phát triển. Ngoài ra, bộ công cụ AI ngày càng phát triển của chúng tôi có
thể thể
@@ -206,18 +221,18 @@
hàng ngày và giảm <br> thiểu công sức vận hành doanh nghiệp. hàng ngày và giảm <br> thiểu công sức vận hành doanh nghiệp.
</p> </p>
<div class="w-[1000px] mx-auto"> <div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center "> <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image"> <div class="effect-image">
<img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden" <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
src="../../assets/images/image-hieubietsansac.png" width="100%" height="100%" src="../../assets/images/image-hieubietsansac.png" width="100%" height="100%"
alt="hacom"> alt="hacom">
</div> </div>
</div> </div>
<div class="list mt-[40px]"> <div class="list-faq mt-[40px]">
<div class="item-faq bg-white pb-[10px] rounded-[12px]"> <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] " <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Khám phá thêm nhiều tính năng</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -234,10 +249,10 @@
</div> </div>
</div> </div>
<div class="rounded-[12px] overflow-hidden bg-black "> <div class="user-xstore rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden"> <div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2 <h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize "> class="title pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
Hãy Hãy
chuyển sang chuyển sang
nền tảng nền tảng
@@ -248,11 +263,11 @@
đầu dùng đầu dùng
thử miễn phí</a> thử miễn phí</a>
</div> </div>
<div class="bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]"> <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 <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 khách hàng
của chúng tôi để</p> của chúng tôi để</p>
<div class="list grid grid-cols-4 gap-[12px]"> <div class="list-xstore grid grid-cols-4 gap-[12px]">
<a href="#" <a href="#"
class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group "> 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> <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>

22
template/free-trial/home.html
View File

@@ -21,8 +21,8 @@
</li> </li>
</ol> </ol>
</div> </div>
<p class="uppercase text-[14px] text-center my-[50px] ">Bắt đầu dùng thử miễn phí</p> <p class="page-name 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> <h1 class="page-title 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> các thương hiệu phát triển nhanh lại chọn xStore</h1>
</div> </div>
@@ -30,7 +30,7 @@
<div class="from-trial mt-[-235px]"> <div class="from-trial mt-[-235px]">
<div class="container"> <div class="container">
<div class="bg-[#F7F7F7] rounded-[20px_20px_0_0] px-[30px]"> <div class="content-from-trial bg-[#F7F7F7] rounded-[20px_20px_0_0] px-[30px]">
<div class="list grid grid-cols-2 gap-[20px] py-[100px]"> <div class="list grid grid-cols-2 gap-[20px] py-[100px]">
<div class="left"> <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> <b class="text-[20px] mb-[15px] block ">Ra mắt cửa hàng của bạn nhanh chóng</b>
@@ -64,8 +64,8 @@
khác</b> khác</b>
</div> </div>
<div class="right"> <div class="right">
<div class="shadow-[0_2px_4px_0_#00000040] px-[30px] py-[60px] rounded-[4px] bg-white"> <div class="box-form 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> <h3 class="title 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ử <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 miễn phí 15
ngày của ngày của
@@ -256,12 +256,12 @@
</div> </div>
<div class="my-[90px]"> <div class="my-[90px] box-faq">
<h2 class="title text-[32px] text-center font-bold capitalize mb-[35px] ">Câu hỏi thường gặp</h2> <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="container-faq w-[795px] mx-auto">
<div class="list"> <div class="list">
<div class="item-faq"> <div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer " <div class="title-faq flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cho tôi xin bảng giá dịch vụ của sXtore?</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -273,7 +273,7 @@
</div> </div>
</div> </div>
<div class="item-faq"> <div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer " <div class="title-faq flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Nền tảng xStore phù hợp với các doanh nghiệp <b class="text-[16px] font-bold ">Nền tảng xStore phù hợp với các doanh nghiệp
nào?</b> nào?</b>
@@ -286,7 +286,7 @@
</div> </div>
<div class="item-faq"> <div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer " <div class="title-faq flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)"> 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 <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> tảng thương mại điện tử khác?</b>
@@ -302,7 +302,7 @@
</div> </div>
<div class="item-faq"> <div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer " <div class="title-faq flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cách sử dụng nền tảng này như thế nào <b class="text-[16px] font-bold ">Cách sử dụng nền tảng này như thế nào
vậy?</b> vậy?</b>

8
template/home/home.html
View File

@@ -325,7 +325,7 @@
<div class="list"> <div class="list">
<div class="item-faq"> <div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer " <div class="title-faq flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Cho tôi xin bảng giá dịch vụ của sXtore?</b> <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> <i class="fa-solid fa-sort-down"></i>
@@ -338,7 +338,7 @@
</div> </div>
</div> </div>
<div class="item-faq"> <div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer " <div class="title-faq flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)"> onclick="toggleFaq(this)">
<b class="text-[16px] font-bold ">Nền tảng xStore phù hợp với các doanh nghiệp <b class="text-[16px] font-bold ">Nền tảng xStore phù hợp với các doanh nghiệp
nào?</b> nào?</b>
@@ -352,7 +352,7 @@
</div> </div>
<div class="item-faq"> <div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer " <div class="title-faq flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
onclick="toggleFaq(this)"> 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 <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> tảng thương mại điện tử khác?</b>
@@ -385,7 +385,7 @@
</div> </div>
<a href="" <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 "> class="btn 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> <p class="text-white text-[20px] group-hover:text-black">Xem tất cả</p>
<i <i
class="fa-solid fa-caret-right text-white text-[20px] mt-[4px] group-hover:text-black"></i> class="fa-solid fa-caret-right text-white text-[20px] mt-[4px] group-hover:text-black"></i>

33
template/pricing/home.html
View File

@@ -2,7 +2,8 @@
<div class="background-pricing pb-[45px]"> <div class="background-pricing pb-[45px]">
<div class="container"> <div class="container">
<h1 class="text-[32px] text-center font-bold py-[70px] leading-[120%] ">Dùng thử xStore miễn phí trong 15 <h1 class="page-title text-[32px] text-center font-bold py-[70px] leading-[120%] ">Dùng thử xStore miễn phí
trong 15
ngày trước khi ngày trước khi
<br> đăng ký <br> đăng ký
sử dụng sử dụng
@@ -23,7 +24,7 @@
<span id="labelAnnually" class="text-[15px] text-gray-500">Trả hàng năm</span> <span id="labelAnnually" class="text-[15px] text-gray-500">Trả hàng năm</span>
</div> </div>
<div class="list grid grid-cols-4 gap-[12px] mt-[60px]" id="list-pricing"> <div class="list-pricing grid grid-cols-4 gap-[12px] mt-[60px]" id="list-pricing">
<div class="item-pricing border-[#d1d1d1] border-[1px] rounded-[12px] p-[15px] bg-white "> <div class="item-pricing border-[#d1d1d1] border-[1px] rounded-[12px] p-[15px] bg-white ">
<b class="text-[20px] capitalize mb-[8px]">Tiêu chuẩn</b> <b class="text-[20px] capitalize mb-[8px]">Tiêu chuẩn</b>
@@ -238,15 +239,14 @@
</div> </div>
<p class="page-note mt-[50px] text-center">Ưu đãi áp dụng cho các gói Standard, Plus và Pro.</p>
<p class="mt-[50px] text-center">Ưu đãi áp dụng cho các gói Standard, Plus và Pro.</p>
</div> </div>
</div> </div>
<div class="mt-[80px]"> <div class="mt-[80px] box-tinhnang">
<h2 class="text-[32px] text-center font-bold capitalize mb-[40px] ">Xem tất cả kế hoạch tính năng</h2> <h2 class="text-[32px] text-center font-bold capitalize mb-[40px] ">Xem tất cả kế hoạch tính năng</h2>
<div class="w-[1000px] mx-auto"> <div class="w-[1000px] container-tinhnang mx-auto">
<div class="list"> <div class="list">
<div class="item-faq pb-[10px] border-b-[1px] border-[#DADADA] mb-[15px]"> <div class="item-faq pb-[10px] border-b-[1px] border-[#DADADA] mb-[15px]">
<div class="title flex items-center pb-[10px] justify-between cursor-pointer " <div class="title flex items-center pb-[10px] justify-between cursor-pointer "
@@ -255,7 +255,7 @@
<i class="fa-solid fa-sort-down"></i> <i class="fa-solid fa-sort-down"></i>
</div> </div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out"> <div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]"> <table class="table w-full border-[1px] border-[#D1d7e0] mt-[15px]">
<thead <thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]"> class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr> <tr>
@@ -299,7 +299,7 @@
<i class="fa-solid fa-sort-down"></i> <i class="fa-solid fa-sort-down"></i>
</div> </div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out"> <div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]"> <table class="table w-full border-[1px] border-[#D1d7e0] mt-[15px]">
<thead <thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]"> class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr> <tr>
@@ -380,7 +380,7 @@
<i class="fa-solid fa-sort-down"></i> <i class="fa-solid fa-sort-down"></i>
</div> </div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out"> <div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]"> <table class="table w-full border-[1px] border-[#D1d7e0] mt-[15px]">
<thead <thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]"> class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr> <tr>
@@ -461,7 +461,7 @@
<i class="fa-solid fa-sort-down"></i> <i class="fa-solid fa-sort-down"></i>
</div> </div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out"> <div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]"> <table class="table w-full border-[1px] border-[#D1d7e0] mt-[15px]">
<thead <thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]"> class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr> <tr>
@@ -542,7 +542,7 @@
<i class="fa-solid fa-sort-down"></i> <i class="fa-solid fa-sort-down"></i>
</div> </div>
<div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out"> <div class="content-faq max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<table class="table w-full border-[1px] border-[D1d7e0] mt-[15px]"> <table class="table w-full border-[1px] border-[#D1d7e0] mt-[15px]">
<thead <thead
class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]"> class="bg-[#f6f7f9] text-left border-[1px] border-[D1d7e0] h-[60px] leading-[60px] text-[16px]">
<tr> <tr>
@@ -620,10 +620,11 @@
</div> </div>
</div> </div>
<div class="mt-[70px]"> <div class="mt-[70px] box-xstore">
<div class="container"> <div class="container">
<div class="bg-gradient-to-r from-[#d7d9ee] via-[#ede7ed] to-[#f3eaed] py-[50px]"> <div class="bg-gradient-to-r from-[#d7d9ee] via-[#ede7ed] to-[#f3eaed] py-[50px]">
<h2 class="mb-[20px] text-[32px] font-bold capitalize text-center ">Hãy chuyển sang sử dụng xStore ngay <h2 class="title mb-[20px] text-[32px] font-bold capitalize text-center ">Hãy chuyển sang sử dụng xStore
ngay
hôm nay</h2> hôm nay</h2>
<a href="" <a href=""
class="btn 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 class="btn 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
@@ -633,9 +634,9 @@
</div> </div>
</div> </div>
<div class="mt-[80px]"> <div class="mt-[80px] box-faq">
<h2 class="title text-[32px] text-center font-bold capitalize mb-[35px] ">Câu hỏi thường gặp</h2> <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="w-[795px] mx-auto container-faq">
<div class="list"> <div class="list">
<div class="item-faq"> <div class="item-faq">
<div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer " <div class="title flex items-center justify-between pb-[20px] border-b-[1px] border-[#DADADA] cursor-pointer "
@@ -703,7 +704,7 @@
<div class="dieukhoan mt-[70px]"> <div class="dieukhoan mt-[70px]">
<div class="container"> <div class="container">
<div class="bg-gradient-to-r from-[#fff] to-[#ecfefe] "> <div class="bg-gradient-to-r from-[#fff] to-[#ecfefe] ">
<div class="w-[795px] mx-auto py-[45px] text-[16px]"> <div class="w-[795px] container-dieukhoan mx-auto py-[45px] text-[16px]">
<b class="mb-[25px] block">Điều khoản & điều kiện</b> <b class="mb-[25px] block">Điều khoản & điều kiện</b>