forked from UKSOURCE/hailearning.edu.vn
fix data
This commit is contained in:
r2xrzh9q2z-lab
@@ -1,238 +1,98 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import visaData from "./visa.json";
|
||||
import Breadcrumb from "./components/Breadcrumb";
|
||||
|
||||
export default function VisaPage() {
|
||||
const [selectedVisaType, setSelectedVisaType] = useState<string | null>(null);
|
||||
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||||
const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
|
||||
|
||||
const handleVisaTypeClick = (visaId: string) => {
|
||||
setSelectedVisaType(selectedVisaType === visaId ? null : visaId);
|
||||
};
|
||||
interface VisaCountry {
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
services: string[];
|
||||
}
|
||||
|
||||
const toggleFaq = (index: number) => {
|
||||
setOpenFaq(openFaq === index ? null : index);
|
||||
const visaCountries: VisaCountry[] = visaData.visaSystem.summaryList.map(
|
||||
(country) => ({
|
||||
...country,
|
||||
icon: `${ASSET_URL}/${country.icon}`,
|
||||
}),
|
||||
);
|
||||
|
||||
export default function VisaListPage() {
|
||||
const getSlug = (countryName: string): string => {
|
||||
return countryName.toLowerCase().replace(/\s+/g, "-");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Hero Section */}
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-5xl font-bold text-gray-900 mb-4">
|
||||
{visaData.hero.title}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||||
{visaData.hero.description}
|
||||
</p>
|
||||
<>
|
||||
{/* Breadcrumb-Wrapper Section Start */}
|
||||
<Breadcrumb
|
||||
title={visaData.visaSystem.breadcrumb.list.title}
|
||||
breadcrumbItems={[
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: visaData.visaSystem.breadcrumb.list.title },
|
||||
]}
|
||||
backgroundImage={`${ASSET_URL}/${visaData.visaSystem.breadcrumb.list.image}`}
|
||||
/>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-2xl mx-auto">
|
||||
{visaData.hero.stats.map((stat, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">
|
||||
{stat.number}
|
||||
</div>
|
||||
<div className="text-gray-700">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visa Types */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Các Loại Visa
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{visaData.visaTypes.map((visa) => (
|
||||
<div
|
||||
key={visa.id}
|
||||
className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
|
||||
>
|
||||
{/* Visa Header */}
|
||||
<div
|
||||
className="p-6 cursor-pointer"
|
||||
onClick={() => handleVisaTypeClick(visa.id)}
|
||||
>
|
||||
<div className="flex items-center mb-4">
|
||||
<span className="text-3xl mr-4">{visa.icon}</span>
|
||||
<h3 className="text-xl font-semibold text-gray-900">
|
||||
{visa.name}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-700 mb-4">{visa.description}</p>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">Thời gian:</span>
|
||||
<div className="font-medium">{visa.processingTime}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Tỷ lệ thành công:</span>
|
||||
<div className="font-medium text-green-600">
|
||||
{visa.successRate}
|
||||
{/* Service Section Start */}
|
||||
<section className="visa-provide-section section-padding section-bg-1 fix">
|
||||
<div className="container">
|
||||
<div className="row g-4">
|
||||
{visaCountries.map((country) => (
|
||||
<div key={country.id} className="col-lg-6">
|
||||
<div className="visa-provide-box mt-0">
|
||||
<div className="visa-top-item">
|
||||
<div className="visa-left">
|
||||
<div className="icon">
|
||||
<img src={country.icon} alt="img" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<p>Visa Service</p>
|
||||
<h3>
|
||||
<a href={`/visa/${getSlug(country.name)}`}>
|
||||
{country.name}
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={`/visa/${getSlug(country.name)}`}
|
||||
className="theme-btn"
|
||||
>
|
||||
Read More
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="visa-list-item">
|
||||
<ul className="list">
|
||||
<li>
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
{country.services[0]}
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
{country.services[1]}
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="list">
|
||||
<li>
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
{country.services[2]}
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
{country.services[3]}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detailed Info */}
|
||||
{selectedVisaType === visa.id && (
|
||||
<div className="border-t bg-gray-50 p-6">
|
||||
{/* Features */}
|
||||
<div className="mb-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">
|
||||
Tính năng:
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
{visa.features.map((feature, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-start text-gray-700"
|
||||
>
|
||||
<span className="text-green-500 mr-2 mt-1">✓</span>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Popular Countries */}
|
||||
<div className="mb-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">
|
||||
Quốc gia phổ biến:
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{visa.popularCountries.map((country, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm"
|
||||
>
|
||||
{country}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<button className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
Tư vấn {visa.name}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Process */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Quy Trình Xin Visa
|
||||
</h2>
|
||||
<div className="relative">
|
||||
{/* Process Line */}
|
||||
<div className="hidden md:block absolute top-1/2 left-0 right-0 h-0.5 bg-blue-200 transform -translate-y-1/2"></div>
|
||||
|
||||
<div className="grid md:grid-cols-5 gap-8">
|
||||
{visaData.process.map((step, index) => (
|
||||
<div key={step.step} className="relative text-center">
|
||||
{/* Step Circle */}
|
||||
<div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl mx-auto mb-4 relative z-10">
|
||||
{step.icon}
|
||||
</div>
|
||||
|
||||
{/* Step Number */}
|
||||
<div className="absolute -top-2 -right-2 w-8 h-8 bg-blue-800 text-white rounded-full flex items-center justify-center text-sm font-bold">
|
||||
{step.step}
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold text-gray-900 mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-gray-700 text-sm">{step.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Tại Sao Chọn Chúng Tôi?
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{visaData.whyChooseUs.map((reason, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-lg shadow-md p-6 text-center"
|
||||
>
|
||||
<div className="text-4xl mb-4">{reason.icon}</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">
|
||||
{reason.title}
|
||||
</h3>
|
||||
<p className="text-gray-700">{reason.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAQs */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Câu Hỏi Thường Gặp
|
||||
</h2>
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
{visaData.faqs.map((faq, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-lg shadow-md overflow-hidden"
|
||||
>
|
||||
<button
|
||||
className="w-full p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
onClick={() => toggleFaq(index)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
{faq.question}
|
||||
</h3>
|
||||
<span className="text-gray-400">
|
||||
{openFaq === index ? "−" : "+"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
{openFaq === index && (
|
||||
<div className="px-6 pb-6">
|
||||
<p className="text-gray-700">{faq.answer}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="text-center bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-white">
|
||||
<h2 className="text-3xl font-bold mb-4">
|
||||
Sẵn Sàng Bắt Đầu Hành Trình?
|
||||
</h2>
|
||||
<p className="text-xl mb-6 text-blue-100">
|
||||
Liên hệ ngay để được tư vấn miễn phí và nhận báo giá tốt nhất
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors font-medium">
|
||||
Tư vấn miễn phí
|
||||
</button>
|
||||
<button className="bg-blue-800 text-white px-8 py-3 rounded-lg hover:bg-blue-900 transition-colors font-medium">
|
||||
Gọi ngay: 1900 1234
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user