forked from UKSOURCE/hailearning.edu.vn
feat: UI appointment contact pricing page
This commit is contained in:
LNHA
@@ -1,188 +1,358 @@
|
||||
import pricingData from "./pricing.json";
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
{pricingData.title}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-4">{pricingData.subtitle}</p>
|
||||
<p className="text-sm text-gray-500 bg-yellow-50 p-3 rounded-lg inline-block">
|
||||
💡 {pricingData.note}
|
||||
</p>
|
||||
<>
|
||||
{/* Breadcrumb-Wrapper Section Start */}
|
||||
<section
|
||||
className="breadcrumb-wrapper fix bg-cover"
|
||||
style={{ backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)" }}
|
||||
>
|
||||
<div className="shape">
|
||||
<img src="/assets/img/inner-page/shape.png" alt="img" />
|
||||
</div>
|
||||
|
||||
{/* Pricing Packages */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
{pricingData.packages.map((pkg) => (
|
||||
<div
|
||||
key={pkg.id}
|
||||
className={`relative bg-white rounded-lg shadow-lg p-6 ${
|
||||
pkg.popular ? "ring-2 ring-blue-500 transform scale-105" : ""
|
||||
}`}
|
||||
>
|
||||
{/* Popular Badge */}
|
||||
{pkg.popular && (
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
||||
<span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
|
||||
Phổ biến nhất
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Package Header */}
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
{pkg.name}
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">{pkg.description}</p>
|
||||
<div className="text-3xl font-bold text-blue-600">
|
||||
{parseInt(pkg.price).toLocaleString()} {pkg.currency}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mb-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">Bao gồm:</h4>
|
||||
<ul className="space-y-2">
|
||||
{pkg.features.map((feature, index) => (
|
||||
<li key={index} className="flex items-center text-gray-700">
|
||||
<span className="text-green-500 mr-2">✓</span>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Limitations */}
|
||||
{pkg.limitations.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">Lưu ý:</h4>
|
||||
<ul className="space-y-2">
|
||||
{pkg.limitations.map((limitation, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center text-gray-600 text-sm"
|
||||
>
|
||||
<span className="text-orange-500 mr-2">⚠</span>
|
||||
{limitation}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA Button */}
|
||||
<button
|
||||
className={`w-full py-3 px-6 rounded-lg font-medium transition-colors ${
|
||||
pkg.popular
|
||||
? "bg-blue-600 text-white hover:bg-blue-700"
|
||||
: "bg-gray-100 text-gray-900 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
Chọn gói này
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Additional Services */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
|
||||
Dịch Vụ Bổ Sung
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{pricingData.additionalServices.map((service, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-lg shadow-md p-6 text-center"
|
||||
>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">
|
||||
{service.name}
|
||||
</h3>
|
||||
<div className="text-2xl font-bold text-blue-600 mb-2">
|
||||
{parseInt(service.price).toLocaleString()} VNĐ
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mb-3">
|
||||
/{service.unit}
|
||||
</div>
|
||||
<p className="text-gray-700 text-sm">{service.description}</p>
|
||||
</div>
|
||||
))}
|
||||
<div className="container">
|
||||
<div className="page-heading">
|
||||
<h1 className="breadcrumb-title">pricing plan</h1>
|
||||
<ul className="breadcrumb-list">
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevron-right"></i>
|
||||
</li>
|
||||
<li>Pricing Plan</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Country Pricing */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
|
||||
Phí Visa Theo Quốc Gia
|
||||
</h2>
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Quốc gia
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Phí visa
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Thời gian xử lý
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Tỷ lệ thành công
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{pricingData.countries.map((country, index) => (
|
||||
<tr key={index} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{country.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{parseInt(country.visaFee).toLocaleString()} VNĐ
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{country.processingTime}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
{country.successRate}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Pricing Section Start */}
|
||||
<section className="pricing-section-2 section-padding fix section-bg-1">
|
||||
<div className="container">
|
||||
<div className="pricing-wrapper-2">
|
||||
<div className="row g-4 align-items-center">
|
||||
<div className="col-xl-6 col-lg-5">
|
||||
<div className="pricing-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title-2 wow fadeInUp">
|
||||
pricing plan
|
||||
</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
Flexible Plans to Suit Every Traveler
|
||||
</h2>
|
||||
</div>
|
||||
<p className="pricing-text wow fadeInUp" data-wow-delay=".5s">
|
||||
Choose the plan that fits your visa needs and enjoy expert
|
||||
guidance every step of the way.
|
||||
</p>
|
||||
<div
|
||||
className="d-flex mt-3 mt-md-0 wow fadeInUp"
|
||||
data-wow-delay=".5s"
|
||||
>
|
||||
<div className="pricing-two__tab">
|
||||
<nav>
|
||||
<div className="nav nav-tabs" id="nav-tab" role="tablist">
|
||||
<button
|
||||
className="nav-link active"
|
||||
id="pt-1-tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pt-1"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="pt-1"
|
||||
aria-selected="true"
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
className="nav-link"
|
||||
id="pt-2-tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pt-2"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="pt-2"
|
||||
aria-selected="false"
|
||||
tabIndex={-1}
|
||||
>
|
||||
Yearly
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-7">
|
||||
<div className="pricing__tab-content">
|
||||
<div className="tab-content" id="nav-tabContent">
|
||||
<div
|
||||
className="tab-pane fade active show"
|
||||
id="pt-1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="pt-1-tab"
|
||||
>
|
||||
<div className="pricing-right-items">
|
||||
<div className="pricing-box-items">
|
||||
<div className="pricing-header">
|
||||
<h2>
|
||||
<sup>$</sup>
|
||||
32
|
||||
<sub>/mo</sub>
|
||||
</h2>
|
||||
<span className="sub-texts">Basic Plan</span>
|
||||
</div>
|
||||
<a href="/pricing" className="theme-btn">
|
||||
Get Started Today
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
<ul className="pricing-list">
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Everything in Basic Plan
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Visa Interview Preparation
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Priority Processing Support
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Phone & Email Assistance
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Step-by-Step Application Support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="pricing-box-items style-2">
|
||||
<div className="pricing-header">
|
||||
<h2>
|
||||
<sup>$</sup>
|
||||
32
|
||||
<sub>/mo</sub>
|
||||
</h2>
|
||||
<span className="sub-texts">Premium Plan</span>
|
||||
</div>
|
||||
<a href="/pricing" className="theme-btn style-2">
|
||||
Get Started Today
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
<ul className="pricing-list">
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Everything in Basic Plan
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Visa Interview Preparation
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Priority Processing Support
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Phone & Email Assistance
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Step-by-Step Application Support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="tab-pane fade"
|
||||
id="pt-2"
|
||||
role="tabpanel"
|
||||
aria-labelledby="pt-2-tab"
|
||||
>
|
||||
<div className="pricing-right-items">
|
||||
<div className="pricing-box-items">
|
||||
<div className="pricing-header">
|
||||
<h2>
|
||||
<sup>$</sup>
|
||||
32
|
||||
<sub>/mo</sub>
|
||||
</h2>
|
||||
<span className="sub-texts">Basic Plan</span>
|
||||
</div>
|
||||
<a href="/pricing" className="theme-btn">
|
||||
Get Started Today
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
<ul className="pricing-list">
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Everything in Basic Plan
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Visa Interview Preparation
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Priority Processing Support
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Phone & Email Assistance
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Step-by-Step Application Support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="pricing-box-items style-2">
|
||||
<div className="pricing-header">
|
||||
<h2>
|
||||
<sup>$</sup>
|
||||
32
|
||||
<sub>/mo</sub>
|
||||
</h2>
|
||||
<span className="sub-texts">Premium Plan</span>
|
||||
</div>
|
||||
<a href="/pricing" className="theme-btn style-2">
|
||||
Get Started Today
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
<ul className="pricing-list">
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Everything in Basic Plan
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Visa Interview Preparation
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Priority Processing Support
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Phone & Email Assistance
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevrons-right"></i>{" "}
|
||||
Step-by-Step Application Support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact CTA */}
|
||||
<div className="text-center mt-12 bg-blue-50 rounded-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
Cần Tư Vấn Chi Tiết?
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-6">
|
||||
Liên hệ với chúng tôi để được tư vấn miễn phí và nhận báo giá phù
|
||||
hợp nhất
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
Tư vấn miễn phí
|
||||
</button>
|
||||
<button className="bg-white text-blue-600 border border-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors">
|
||||
Gọi ngay: 1900 1234
|
||||
</button>
|
||||
{/* Testimonial Section Start */}
|
||||
<section className="testimonial-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="section-title-area">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title-2 wow fadeInUp">
|
||||
What Our Clients Say
|
||||
</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
Immigration Success Stories
|
||||
</h2>
|
||||
</div>
|
||||
<a href="/contact" className="theme-btn">
|
||||
View All Review
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="testimonial-wrapper-3">
|
||||
<div className="row g-4 align-items-center">
|
||||
<div className="col-lg-4">
|
||||
<div className="testimonial-thumb">
|
||||
<img src="/assets/img/home-3/test-thumb.jpg" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="testimonial-content">
|
||||
<div className="swiper testimonial-slider-3">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<div className="content">
|
||||
<div className="star">
|
||||
<i className="fa-solid fa-star"></i>
|
||||
<i className="fa-solid fa-star"></i>
|
||||
<i className="fa-solid fa-star"></i>
|
||||
<i className="fa-solid fa-star"></i>
|
||||
<i className="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h3>
|
||||
“The team provided exceptional guidance
|
||||
throughout my immigration process. Their expertise,
|
||||
personalized support, and attention to detail
|
||||
ensured a smooth, stress-free experience and
|
||||
successful visa approval.”
|
||||
</h3>
|
||||
<div className="info-item">
|
||||
<div className="icon">
|
||||
<i className="fa-solid fa-quote-right"></i>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>Mohammed Ali,</h5>
|
||||
<span>Family Visa</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<div className="content">
|
||||
<div className="star">
|
||||
<i className="fa-solid fa-star"></i>
|
||||
<i className="fa-solid fa-star"></i>
|
||||
<i className="fa-solid fa-star"></i>
|
||||
<i className="fa-solid fa-star"></i>
|
||||
<i className="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h3>
|
||||
“The team provided exceptional guidance
|
||||
throughout my immigration process. Their expertise,
|
||||
personalized support, and attention to detail
|
||||
ensured a smooth, stress-free experience and
|
||||
successful visa approval.”
|
||||
</h3>
|
||||
<div className="info-item">
|
||||
<div className="icon">
|
||||
<i className="fa-solid fa-quote-right"></i>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>Mohammed Ali,</h5>
|
||||
<span>Family Visa</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="array-buttons-3">
|
||||
<button className="array-prev">
|
||||
<i className="fa-solid fa-arrow-left"></i>
|
||||
</button>
|
||||
<button className="array-next">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user