This commit is contained in:
r2xrzh9q2z-lab
2026-02-02 11:41:42 +07:00
parent b9e222b8dc
commit 426749c480
4 changed files with 367 additions and 421 deletions

View File

@@ -78,6 +78,7 @@ export default function CountryDetailsPage({ params }: CountryDetailsProps) {
); );
} }
const breadcrumbData = visaData.visaSystem.breadcrumb;
const countryData = visaData.visaSystem.detailedView.activeCountry; const countryData = visaData.visaSystem.detailedView.activeCountry;
const relatedCountries = visaData.visaSystem.detailedView.relatedCountries; const relatedCountries = visaData.visaSystem.detailedView.relatedCountries;
const contactInfo = visaData.visaSystem.contactInfo; const contactInfo = visaData.visaSystem.contactInfo;
@@ -86,12 +87,12 @@ export default function CountryDetailsPage({ params }: CountryDetailsProps) {
<> <>
{/* Breadcrumb-Wrapper Section Start */} {/* Breadcrumb-Wrapper Section Start */}
<Breadcrumb <Breadcrumb
title={countryData.breadcrumb.title} title={breadcrumbData.list.title}
breadcrumbItems={[ breadcrumbItems={[
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
{ label: countryData.name }, { label: countryData.name },
]} ]}
backgroundImage={`${ASSET_URL}/${countryData.breadcrumb.image}`} backgroundImage={`${ASSET_URL}/${breadcrumbData.list.image}`}
/> />
{/* Country-details Section Start */} {/* Country-details Section Start */}

View File

@@ -1,238 +1,98 @@
"use client"; "use client";
import { useState } from "react";
import visaData from "./visa.json"; import visaData from "./visa.json";
import Breadcrumb from "./components/Breadcrumb";
export default function VisaPage() { const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
const [selectedVisaType, setSelectedVisaType] = useState<string | null>(null);
const [openFaq, setOpenFaq] = useState<number | null>(null);
const handleVisaTypeClick = (visaId: string) => { interface VisaCountry {
setSelectedVisaType(selectedVisaType === visaId ? null : visaId); id: number;
}; name: string;
icon: string;
services: string[];
}
const toggleFaq = (index: number) => { const visaCountries: VisaCountry[] = visaData.visaSystem.summaryList.map(
setOpenFaq(openFaq === index ? null : index); (country) => ({
...country,
icon: `${ASSET_URL}/${country.icon}`,
}),
);
export default function VisaListPage() {
const getSlug = (countryName: string): string => {
return countryName.toLowerCase().replace(/\s+/g, "-");
}; };
return ( return (
<div className="container mx-auto px-4 py-8"> <>
<div className="max-w-6xl mx-auto"> {/* Breadcrumb-Wrapper Section Start */}
{/* Hero Section */} <Breadcrumb
<div className="text-center mb-16"> title={visaData.visaSystem.breadcrumb.list.title}
<h1 className="text-5xl font-bold text-gray-900 mb-4"> breadcrumbItems={[
{visaData.hero.title} { label: "Home", href: "/" },
</h1> { label: visaData.visaSystem.breadcrumb.list.title },
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto"> ]}
{visaData.hero.description} backgroundImage={`${ASSET_URL}/${visaData.visaSystem.breadcrumb.list.image}`}
</p> />
{/* Stats */} {/* Service Section Start */}
<div className="grid md:grid-cols-3 gap-8 max-w-2xl mx-auto"> <section className="visa-provide-section section-padding section-bg-1 fix">
{visaData.hero.stats.map((stat, index) => ( <div className="container">
<div key={index} className="text-center"> <div className="row g-4">
<div className="text-4xl font-bold text-blue-600 mb-2"> {visaCountries.map((country) => (
{stat.number} <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>
<div className="text-gray-700">{stat.label}</div> <div className="content">
</div> <p>Visa Service</p>
))} <h3>
</div> <a href={`/visa/${getSlug(country.name)}`}>
</div> {country.name}
</a>
{/* 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> </h3>
</div> </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>
<div> <a
<span className="text-gray-500">Tỷ lệ thành công:</span> href={`/visa/${getSlug(country.name)}`}
<div className="font-medium text-green-600"> className="theme-btn"
{visa.successRate}
</div>
</div>
</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> Read More
{feature} <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> </li>
))}
</ul> </ul>
</div> </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>
</div> </div>
{/* CTA */}
<button className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
vấn {visa.name}
</button>
</div>
)}
</div>
))} ))}
</div> </div>
</div> </div>
</section>
{/* 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 vấn miễn phí 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">
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>
); );
} }

View File

@@ -1,206 +1,291 @@
{ {
"title": "Dịch Vụ Visa", "visaSystem": {
"subtitle": "Hỗ trợ toàn diện cho mọi loại visa", "breadcrumb": {
"hero": { "list": {
"title": "Xin Visa Thành Công 99%", "title": "Country List",
"description": "Với hơn 10 năm kinh nghiệm, chúng tôi cam kết mang đến dịch vụ visa chất lượng cao với tỷ lệ thành công hàng đầu thị trường.", "image": "assets/img/inner-page/breadcrumb.jpg"
"stats": [
{
"number": "50+",
"label": "Quốc gia"
},
{
"number": "99%",
"label": "Tỷ lệ thành công"
},
{
"number": "10000+",
"label": "Khách hàng"
} }
},
"summaryList": [
{
"id": 1,
"name": "France",
"icon": "assets/img/home-2/visa/03.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
] ]
}, },
{
"id": 2,
"name": "UK",
"icon": "assets/img/home-2/visa/11.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
},
{
"id": 3,
"name": "Canada",
"icon": "assets/img/home-2/visa/02.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
},
{
"id": 4,
"name": "Germany",
"icon": "assets/img/home-2/visa/12.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
},
{
"id": 5,
"name": "Spain",
"icon": "assets/img/home-2/visa/13.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
},
{
"id": 6,
"name": "South Korea",
"icon": "assets/img/home-2/visa/14.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
},
{
"id": 7,
"name": "Japan",
"icon": "assets/img/home-2/visa/15.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
},
{
"id": 8,
"name": "Croatia",
"icon": "assets/img/home-2/visa/16.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
},
{
"id": 9,
"name": "England",
"icon": "assets/img/home-2/visa/17.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
},
{
"id": 10,
"name": "Indonesia",
"icon": "assets/img/home-2/visa/18.png",
"services": [
"Student Visa & Admission",
"Work Visa H1B",
"Work permit for Canada",
"Student Visa for Canada"
]
}
],
"detailedView": {
"activeCountry": {
"id": 1,
"name": "United States of America ",
"title": "COUNTRY USA",
"mainImage": "assets/img/inner-page/country-details/details-1.jpg",
"description": "The United States is one of the most popular destinations for international students and immigrants, offering world-class universities, diverse cultural experiences, and countless career opportunities...",
"additionalInfo": "Our consultancy provides complete guidance for study visas, work permits, and permanent residency pathways tailored to your goals.",
"tagline": "Over the last 35 Years we made an impact that is strong & we have long way to go.",
"visaTypes": [ "visaTypes": [
{ {
"id": "tourist", "category": "Tourist & Work",
"name": "Visa Du Lịch", "items": [
"icon": "🏖️", {
"description": "Visa cho mục đích du lịch, nghỉ dưỡng và khám phá", "title": "Tourist Visa",
"features": [ "description": "Broad term that can refer to various aspects of interconnectedness"
"Thời hạn linh hoạt từ 30 ngày đến 10 năm",
"Hỗ trợ visa đơn và visa nhiều lần",
"Tư vấn lịch trình du lịch",
"Hỗ trợ đặt vé máy bay và khách sạn"
],
"popularCountries": ["Nhật Bản", "Hàn Quốc", "Schengen", "Mỹ", "Úc"],
"processingTime": "5-30 ngày",
"successRate": "99%"
}, },
{ {
"id": "business", "title": "Work Permit",
"name": "Visa Công Tác", "description": "Broad term that can refer to various aspects of interconnectedness"
"icon": "💼",
"description": "Visa cho mục đích công tác, hội nghị và kinh doanh",
"features": [
"Xử lý nhanh chóng cho công việc khẩn cấp",
"Hỗ trợ thư mời từ đối tác",
"Tư vấn về quy định làm việc",
"Visa nhiều lần cho doanh nhân"
],
"popularCountries": [
"Mỹ",
"Trung Quốc",
"Nhật Bản",
"Hàn Quốc",
"Singapore"
],
"processingTime": "3-20 ngày",
"successRate": "98%"
},
{
"id": "study",
"name": "Visa Du Học",
"icon": "🎓",
"description": "Visa cho mục đích học tập và nghiên cứu",
"features": [
"Tư vấn chọn trường và ngành học",
"Hỗ trợ chuẩn bị hồ sơ học bổng",
"Visa dài hạn cho toàn khóa học",
"Hỗ trợ gia hạn visa"
],
"popularCountries": ["Mỹ", "Canada", "Úc", "Anh", "Đức"],
"processingTime": "4-8 tuần",
"successRate": "96%"
},
{
"id": "family",
"name": "Visa Thăm Thân",
"icon": "👨‍👩‍👧‍👦",
"description": "Visa để thăm người thân và gia đình",
"features": [
"Hỗ trợ chuẩn bị thư mời",
"Tư vấn chứng minh mối quan hệ",
"Visa ngắn hạn và dài hạn",
"Hỗ trợ visa cho cả gia đình"
],
"popularCountries": ["Mỹ", "Canada", "Úc", "Schengen", "Anh"],
"processingTime": "2-6 tuần",
"successRate": "97%"
},
{
"id": "transit",
"name": "Visa Transit",
"icon": "✈️",
"description": "Visa quá cảnh cho các chuyến bay kết nối",
"features": [
"Xử lý nhanh trong 24-48 giờ",
"Phí dịch vụ ưu đãi",
"Hỗ trợ 24/7",
"Không cần phỏng vấn"
],
"popularCountries": ["Trung Quốc", "Hàn Quốc", "Singapore", "UAE"],
"processingTime": "1-3 ngày",
"successRate": "99%"
},
{
"id": "work",
"name": "Visa Lao Động",
"icon": "🔨",
"description": "Visa cho mục đích làm việc dài hạn",
"features": [
"Tư vấn về thị trường lao động",
"Hỗ trợ tìm nhà tuyển dụng",
"Visa dài hạn có thể gia hạn",
"Hỗ trợ thủ tục định cư"
],
"popularCountries": ["Canada", "Úc", "Đức", "New Zealand", "Singapore"],
"processingTime": "6-12 tuần",
"successRate": "94%"
}
],
"process": [
{
"step": 1,
"title": "Tư Vấn Miễn Phí",
"description": "Chuyên viên tư vấn chi tiết về loại visa phù hợp và yêu cầu hồ sơ",
"icon": "💬"
},
{
"step": 2,
"title": "Chuẩn Bị Hồ Sơ",
"description": "Hướng dẫn và hỗ trợ khách hàng chuẩn bị đầy đủ hồ sơ theo yêu cầu",
"icon": "📋"
},
{
"step": 3,
"title": "Kiểm Tra & Nộp Hồ Sơ",
"description": "Kiểm tra kỹ lưỡng và nộp hồ sơ tại lãnh sự quán hoặc trung tâm visa",
"icon": "✅"
},
{
"step": 4,
"title": "Theo Dõi Tiến Độ",
"description": "Cập nhật tiến độ xử lý và thông báo kết quả cho khách hàng",
"icon": "📊"
},
{
"step": 5,
"title": "Nhận Visa",
"description": "Hỗ trợ nhận visa và tư vấn các lưu ý khi xuất nhập cảnh",
"icon": "🎉"
}
],
"whyChooseUs": [
{
"title": "Kinh Nghiệm Lâu Năm",
"description": "Hơn 10 năm kinh nghiệm trong lĩnh vực dịch vụ visa",
"icon": "⭐"
},
{
"title": "Tỷ Lệ Thành Công Cao",
"description": "Tỷ lệ thành công 99% với hơn 10,000 khách hàng",
"icon": "📈"
},
{
"title": "Đội Ngũ Chuyên Nghiệp",
"description": "Chuyên viên được đào tạo bài bản, cập nhật thường xuyên",
"icon": "👥"
},
{
"title": "Hỗ Trợ 24/7",
"description": "Luôn sẵn sàng hỗ trợ khách hàng mọi lúc, mọi nơi",
"icon": "🕒"
},
{
"title": "Giá Cả Cạnh Tranh",
"description": "Mức phí hợp lý, minh bạch, không phí ẩn",
"icon": "💰"
},
{
"title": "Bảo Mật Thông Tin",
"description": "Cam kết bảo mật tuyệt đối thông tin khách hàng",
"icon": "🔒"
}
],
"faqs": [
{
"question": "Tôi có cần phải có kinh nghiệm du lịch trước đó không?",
"answer": "Không nhất thiết. Chúng tôi hỗ trợ cả khách hàng lần đầu xin visa. Tuy nhiên, có lịch sử du lịch sẽ giúp tăng tỷ lệ thành công."
},
{
"question": "Thời gian xử lý visa mất bao lâu?",
"answer": "Thời gian xử lý tùy thuộc vào từng quốc gia, từ 1-3 ngày (visa transit) đến 6-12 tuần (visa lao động). Chúng tôi sẽ tư vấn cụ thể cho từng trường hợp."
},
{
"question": "Nếu visa bị từ chối thì sao?",
"answer": "Chúng tôi có gói VIP cam kết hoàn tiền nếu visa bị từ chối. Đối với các gói khác, chúng tôi sẽ hỗ trợ phân tích lý do và tư vấn nộp lại."
},
{
"question": "Tôi có thể theo dõi tiến độ hồ sơ như thế nào?",
"answer": "Chúng tôi sẽ cập nhật tiến độ qua email, SMS và có thể tra cứu online. Khách hàng luôn được thông báo kịp thời về tình trạng hồ sơ."
},
{
"question": "Chi phí dịch vụ có bao gồm phí lãnh sự không?",
"answer": "Phí dịch vụ của chúng tôi chưa bao gồm phí lãnh sự quán. Chúng tôi sẽ thông báo rõ ràng tổng chi phí bao gồm cả phí lãnh sự khi tư vấn."
} }
] ]
},
{
"category": "Student & Family",
"items": [
{
"title": "Student",
"description": "Broad term that can refer to various aspects of interconnectedness"
},
{
"title": "Tourist Visa",
"description": "Broad term that can refer to various aspects of interconnectedness"
}
]
}
],
"visaProcess": {
"title": "USA Visa Process",
"steps": [
{
"number": "01",
"title": "Consultation & Eligibility Check",
"description": "Our experts review your profile and visa requirements."
},
{
"number": "02",
"title": "Application Preparation",
"description": "We help with document collection, form filling, and statement drafting."
},
{
"number": "03",
"title": "Submission",
"description": "Visa application is submitted online with required fees."
},
{
"number": "04",
"title": "Interview Guidance",
"description": "Get training and mock sessions for embassy interview."
},
{
"number": "05",
"title": "Approval & Travel",
"description": "Once approved, we provide travel and pre-departure guidance."
}
]
},
"gallery": [
"assets/img/inner-page/country-details/details-2.jpg",
"assets/img/inner-page/country-details/details-3.png"
],
"visaCategories": {
"title": "Types of USA Visas",
"steps": [
[
"Student Visa (F1, M1, J1)",
"Work Visa (H1B, L1)",
"Tourist Visa (B1/B2)"
],
["Family/Spouse Visa (K1, IR1, F2A)", "Green Card / Immigrant Visa"]
]
},
"visaService": {
"title": "Our USA Visa Service Options",
"steps": [
{
"number": "01",
"title": "Consultation & Eligibility Check",
"description": "Our experts review your profile and visa requirements."
},
{
"number": "02",
"title": "Application Preparation",
"description": "We help with document collection, form filling, and statement drafting."
},
{
"number": "03",
"title": "Submission",
"description": "Visa application is submitted online with required fees."
},
{
"number": "04",
"title": "Interview Guidance",
"description": "Get training and mock sessions for embassy interview."
},
{
"number": "05",
"title": "Approval & Travel",
"description": "Once approved, we provide travel and pre-departure guidance."
}
]
}
},
"relatedCountries": [
{
"id": 1,
"name": "Canada",
"icon": "assets/img/inner-page/country-details/01.png"
},
{
"id": 2,
"name": "USA",
"icon": "assets/img/inner-page/country-details/02.png"
},
{
"id": 3,
"name": "USA",
"icon": "assets/img/inner-page/country-details/03.png"
},
{
"id": 4,
"name": "Saint Helena",
"icon": "assets/img/inner-page/country-details/05.png"
},
{
"id": 5,
"name": "Iran",
"icon": "assets/img/inner-page/country-details/06.png"
},
{
"id": 6,
"name": "Spain",
"icon": "assets/img/inner-page/country-details/07.png"
},
{
"id": 7,
"name": "Japan",
"icon": "assets/img/inner-page/country-details/08.png"
}
]
},
"contactInfo": {
"sectionTitle": "Visa & Immigration",
"helpText": "Need Help? Book Lab Visit",
"phone": {
"label": "Call Us",
"value": "+009 438 222 9540",
"link": "tel:+0094382229540"
},
"email": {
"label": "Mail Us",
"value": "infor@xridergamil.com",
"link": "mailto:infor@xridergamil.com"
},
"location": {
"label": "Location",
"address": "Toronto, Montreal, City 2026"
}
}
}
} }