forked from UKSOURCE/hailearning.edu.vn
feat: Add service details page with API integration
This commit is contained in:
nguyenvanbao
624
api/servicesApi.ts
Normal file
624
api/servicesApi.ts
Normal file
@@ -0,0 +1,624 @@
|
||||
/**
|
||||
* Service Page API Functions
|
||||
* Fetch data for Service page from external API
|
||||
*/
|
||||
|
||||
/* =======================
|
||||
Types
|
||||
======================= */
|
||||
|
||||
export interface ServiceItem {
|
||||
id: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string;
|
||||
image: string;
|
||||
layout: "left" | "right";
|
||||
details: {
|
||||
title: string;
|
||||
description: string;
|
||||
mainImage: string;
|
||||
overviewTitle: string;
|
||||
overviewDescription: string;
|
||||
additionalDescription: string;
|
||||
features: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
faq: {
|
||||
id: string;
|
||||
question: string;
|
||||
answer: string;
|
||||
isExpanded: boolean;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface ServiceSection {
|
||||
title: {
|
||||
subTitle: string;
|
||||
mainTitle: string;
|
||||
};
|
||||
items: ServiceItem[];
|
||||
}
|
||||
|
||||
export interface CountryItem {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
image: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export interface DestinationSection {
|
||||
backgroundImage: string;
|
||||
title: {
|
||||
subTitle: string;
|
||||
mainTitle: string;
|
||||
};
|
||||
items: CountryItem[];
|
||||
}
|
||||
|
||||
export interface VisaItem {
|
||||
id: string;
|
||||
number: string;
|
||||
name: string;
|
||||
description: string;
|
||||
buttonText: string;
|
||||
buttonLink: string;
|
||||
}
|
||||
|
||||
export interface VisaSection {
|
||||
items: VisaItem[];
|
||||
}
|
||||
|
||||
export interface ClientReviewItem {
|
||||
id: string;
|
||||
rating: number;
|
||||
content: string;
|
||||
author: {
|
||||
name: string;
|
||||
type: string;
|
||||
};
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export interface ReviewSection {
|
||||
title: {
|
||||
subTitle: string;
|
||||
mainTitle: string;
|
||||
};
|
||||
viewAllButton: {
|
||||
text: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
};
|
||||
thumb: string;
|
||||
items: ClientReviewItem[];
|
||||
}
|
||||
|
||||
export interface ServicePageData {
|
||||
pageTitle: string;
|
||||
services: ServiceSection;
|
||||
destinations: DestinationSection;
|
||||
visas: VisaSection;
|
||||
reviews: ReviewSection;
|
||||
}
|
||||
|
||||
/* =======================
|
||||
Utils
|
||||
======================= */
|
||||
|
||||
const getApiUrl = (): string => {
|
||||
return process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
|
||||
};
|
||||
|
||||
/* =======================
|
||||
Fetch API
|
||||
======================= */
|
||||
|
||||
export const fetchServicePageData = async (): Promise<ServicePageData> => {
|
||||
try {
|
||||
const apiUrl = getApiUrl();
|
||||
const endpoint = `${apiUrl}/api/service`;
|
||||
|
||||
console.log("Fetching services from endpoint:", endpoint);
|
||||
|
||||
const response = await fetch(endpoint, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
console.log("Services API response status:", response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Services API failed, using fallback data");
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = (await response.json()) as ServicePageData;
|
||||
console.log("Services data received successfully");
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching service page data:", error);
|
||||
console.log("Using fallback service data");
|
||||
return getFallbackServicePageData();
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchServiceBySlug = async (slug: string): Promise<any> => {
|
||||
console.log("=== fetchServiceBySlug called ===");
|
||||
console.log("Input slug:", slug);
|
||||
console.log("Slug type:", typeof slug);
|
||||
console.log("Slug length:", slug?.length);
|
||||
|
||||
if (!slug || slug === "undefined") {
|
||||
console.error("Invalid slug provided:", slug);
|
||||
throw new Error("Invalid slug parameter");
|
||||
}
|
||||
|
||||
try {
|
||||
const apiUrl = getApiUrl();
|
||||
const endpoint = `${apiUrl}/api/service/${slug}`;
|
||||
|
||||
console.log("Fetching service from endpoint:", endpoint);
|
||||
|
||||
const response = await fetch(endpoint, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
console.log("Response status:", response.status);
|
||||
console.log("Response ok:", response.ok);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error("Error response body:", errorText);
|
||||
|
||||
// If it's a 404, try to get the service from fallback data
|
||||
if (response.status === 404) {
|
||||
console.log("Service not found in backend, checking fallback data");
|
||||
const fallbackData = getFallbackServicePageData();
|
||||
const service = fallbackData.services.items.find(
|
||||
(item) => item.slug === slug,
|
||||
);
|
||||
|
||||
if (service) {
|
||||
console.log(
|
||||
"Found service in fallback data, creating response structure",
|
||||
);
|
||||
// Create a response structure that matches what the backend should return
|
||||
return {
|
||||
pageTitle: fallbackData.pageTitle,
|
||||
breadcrumb: {
|
||||
title: "Service Details",
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: service.name, href: `/services/details/${slug}` },
|
||||
],
|
||||
},
|
||||
serviceDetails: {
|
||||
content: service.details,
|
||||
keyFeatures: {
|
||||
title: "Key Features",
|
||||
sideImage:
|
||||
"/assets/img/inner-page/service-details/details-2.jpg",
|
||||
items: service.details.features || [],
|
||||
},
|
||||
faq: {
|
||||
title: "Frequently Asked Questions",
|
||||
sideImage:
|
||||
"/assets/img/inner-page/service-details/details-3.jpg",
|
||||
items: service.details.faq || [],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(
|
||||
`HTTP error! status: ${response.status}, body: ${errorText}`,
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Service data received:", data);
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching service by slug:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/* =======================
|
||||
Fallback Data
|
||||
======================= */
|
||||
|
||||
export const getFallbackServicePageData = (): ServicePageData => ({
|
||||
pageTitle: "Visaway – Immigration & Visa Consulting HTML Template",
|
||||
|
||||
services: {
|
||||
title: {
|
||||
subTitle: "What We Offer",
|
||||
mainTitle: "Our Immigration Services",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
id: "immigration-appeal",
|
||||
slug: "immigration-appeal",
|
||||
name: "Immigration Appeal & Legal Support",
|
||||
description:
|
||||
"Our experts provide professional guidance for immigration appeals and legal matters, helping clients overcome visa rejections with personalized strategies and strong case representation.",
|
||||
image: "/assets/img/home-3/service/01.jpg",
|
||||
layout: "left",
|
||||
details: {
|
||||
title: "Immigration Appeal & Legal Support",
|
||||
description:
|
||||
"Our experts provide professional guidance for immigration appeals and legal matters, helping clients overcome visa rejections with personalized strategies and strong case representation.",
|
||||
mainImage: "/assets/img/inner-page/service-details/details-1.jpg",
|
||||
overviewTitle: "Service Overview",
|
||||
overviewDescription:
|
||||
"Our Immigration Appeal & Legal Support service is designed to help clients navigate complex immigration challenges. We provide expert legal guidance, case analysis, and strategic representation to maximize your chances of success.",
|
||||
additionalDescription:
|
||||
"With years of experience in immigration law, our team is committed to turning your immigration challenges into success stories.",
|
||||
features: [
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Legal Case Analysis",
|
||||
description:
|
||||
"Thorough review and analysis of your immigration case.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Appeal Strategy Development",
|
||||
description: "Custom strategies to overcome visa rejections.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Document Preparation",
|
||||
description:
|
||||
"Professional preparation of all required legal documents.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Court Representation",
|
||||
description: "Expert legal representation in immigration courts.",
|
||||
},
|
||||
],
|
||||
faq: [
|
||||
{
|
||||
id: "faq-appeal-1",
|
||||
question: "01. What are the chances of a successful appeal?",
|
||||
answer:
|
||||
"Success rates vary by case type, but our experienced legal team significantly improves your chances through thorough case analysis and strategic representation.",
|
||||
isExpanded: false,
|
||||
},
|
||||
{
|
||||
id: "faq-appeal-2",
|
||||
question: "02. How long does the appeal process take?",
|
||||
answer:
|
||||
"Appeal timelines vary by jurisdiction and case complexity, typically ranging from 6-18 months. We keep you informed throughout the process.",
|
||||
isExpanded: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "scholarship-guidance",
|
||||
slug: "scholarship-guidance",
|
||||
name: "Scholarship & Study Grant Guidance",
|
||||
description:
|
||||
"We help students identify suitable scholarships and study grants, assist with applications, and provide expert guidance to maximize chances of securing financial support abroad.",
|
||||
image: "/assets/img/home-3/service/02.jpg",
|
||||
layout: "right",
|
||||
details: {
|
||||
title: "Scholarship & Study Grant Guidance",
|
||||
description:
|
||||
"We help students unlock opportunities to study abroad with the right financial support. Our expert advisors guide you in finding scholarships, grants, and funding options that match your academic background, chosen destination, and career goals.",
|
||||
mainImage: "/assets/img/inner-page/service-details/details-1.jpg",
|
||||
overviewTitle: "Service Overview",
|
||||
overviewDescription:
|
||||
"Our Education Visa Consultancy is dedicated to guiding students in achieving their study abroad dreams. We provide complete support including university selection, application assistance, scholarship guidance, visa documentation, and interview preparation.",
|
||||
additionalDescription:
|
||||
"From start to finish, we are committed to turning your education journey into a successful international experience.",
|
||||
features: [
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Scholarship Research",
|
||||
description:
|
||||
"Comprehensive research to find suitable funding opportunities.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Application Assistance",
|
||||
description:
|
||||
"Expert help with scholarship and grant applications.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Essay Writing Support",
|
||||
description:
|
||||
"Professional guidance for compelling scholarship essays.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Interview Preparation",
|
||||
description:
|
||||
"Coaching for scholarship interviews and presentations.",
|
||||
},
|
||||
],
|
||||
faq: [
|
||||
{
|
||||
id: "faq-scholarship-1",
|
||||
question: "01. Do you help find scholarships for all countries?",
|
||||
answer:
|
||||
"Yes, we have extensive databases and partnerships worldwide to help you find scholarships in your preferred destination country.",
|
||||
isExpanded: false,
|
||||
},
|
||||
{
|
||||
id: "faq-scholarship-2",
|
||||
question: "02. What are the eligibility requirements?",
|
||||
answer:
|
||||
"Eligibility varies by scholarship type and provider. We assess your profile and match you with suitable opportunities based on your academic background and goals.",
|
||||
isExpanded: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "permanent-residency",
|
||||
slug: "permanent-residency",
|
||||
name: "Permanent Residency (PR) Services",
|
||||
description:
|
||||
"Our PR services guide clients through every step of the residency process, including documentation, eligibility assessment, and application support, ensuring a smooth and successful approval.",
|
||||
image: "/assets/img/home-3/service/03.jpg",
|
||||
layout: "left",
|
||||
details: {
|
||||
title: "Permanent Residency (PR) Services",
|
||||
description:
|
||||
"Our PR services guide clients through every step of the residency process, including documentation, eligibility assessment, and application support, ensuring a smooth and successful approval.",
|
||||
mainImage: "/assets/img/inner-page/service-details/details-1.jpg",
|
||||
overviewTitle: "Service Overview",
|
||||
overviewDescription:
|
||||
"Our Permanent Residency services provide comprehensive support for individuals seeking to establish permanent residence in their chosen country. We handle all aspects of the PR application process with expertise and care.",
|
||||
additionalDescription:
|
||||
"Our experienced team ensures that your PR application is handled professionally and efficiently, maximizing your chances of approval.",
|
||||
features: [
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Eligibility Assessment",
|
||||
description:
|
||||
"Comprehensive evaluation of your PR eligibility and options.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Points Calculation",
|
||||
description:
|
||||
"Accurate calculation and optimization of your points score.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Document Verification",
|
||||
description:
|
||||
"Thorough verification and preparation of all required documents.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Application Tracking",
|
||||
description:
|
||||
"Regular updates and tracking of your PR application status.",
|
||||
},
|
||||
],
|
||||
faq: [
|
||||
{
|
||||
id: "faq-pr-1",
|
||||
question: "01. How long does the PR process take?",
|
||||
answer:
|
||||
"Processing times vary by country and program, typically ranging from 12-24 months. We provide realistic timelines based on current processing standards.",
|
||||
isExpanded: false,
|
||||
},
|
||||
{
|
||||
id: "faq-pr-2",
|
||||
question: "02. What documents are required for PR application?",
|
||||
answer:
|
||||
"Document requirements vary by country but typically include educational credentials, work experience, language test results, and medical examinations. We provide a complete checklist.",
|
||||
isExpanded: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "citizenship-naturalization",
|
||||
slug: "citizenship-naturalization",
|
||||
name: "Citizenship & Naturalization Guidance",
|
||||
description:
|
||||
"We provide expert guidance for citizenship and naturalization processes, assisting clients with documentation, eligibility, and legal procedures to achieve a smooth and successful application.",
|
||||
image: "/assets/img/home-3/service/04.jpg",
|
||||
layout: "right",
|
||||
details: {
|
||||
title: "Citizenship & Naturalization Guidance",
|
||||
description:
|
||||
"We provide expert guidance for citizenship and naturalization processes, assisting clients with documentation, eligibility, and legal procedures to achieve a smooth and successful application.",
|
||||
mainImage: "/assets/img/inner-page/service-details/details-1.jpg",
|
||||
overviewTitle: "Service Overview",
|
||||
overviewDescription:
|
||||
"Our Citizenship & Naturalization service helps individuals navigate the complex process of becoming a citizen. We provide step-by-step guidance, documentation support, and legal expertise throughout the entire process.",
|
||||
additionalDescription:
|
||||
"With our comprehensive approach, we make the path to citizenship clear, manageable, and successful for every client.",
|
||||
features: [
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Citizenship Test Preparation",
|
||||
description:
|
||||
"Comprehensive preparation for citizenship knowledge tests.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Language Requirements",
|
||||
description:
|
||||
"Guidance on meeting language proficiency requirements.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Residency Verification",
|
||||
description:
|
||||
"Assistance with proving residency and physical presence requirements.",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-chevrons-right",
|
||||
title: "Ceremony Preparation",
|
||||
description:
|
||||
"Support and guidance for the citizenship ceremony process.",
|
||||
},
|
||||
],
|
||||
faq: [
|
||||
{
|
||||
id: "faq-citizenship-1",
|
||||
question: "01. What are the basic requirements for citizenship?",
|
||||
answer:
|
||||
"Requirements typically include permanent residency, physical presence, language proficiency, and knowledge of the country's history and government. Specific requirements vary by country.",
|
||||
isExpanded: false,
|
||||
},
|
||||
{
|
||||
id: "faq-citizenship-2",
|
||||
question: "02. How do I prepare for the citizenship test?",
|
||||
answer:
|
||||
"We provide comprehensive study materials, practice tests, and coaching sessions to help you prepare for both the knowledge test and language requirements.",
|
||||
isExpanded: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
destinations: {
|
||||
backgroundImage: "/assets/img/home-3/choose-us/bg.png",
|
||||
title: {
|
||||
subTitle: "Countries we offer",
|
||||
mainTitle: "Choose Your Immigration Destination",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
id: "canada",
|
||||
name: "Canada",
|
||||
description:
|
||||
"Canada provides quality education, rich and global opportunities",
|
||||
image: "/assets/img/home-3/choose-us/01.jpg",
|
||||
icon: "/assets/img/home-3/choose-us/icon-1.png",
|
||||
link: "/countries/canada",
|
||||
},
|
||||
{
|
||||
id: "south-korea",
|
||||
name: "South Korea",
|
||||
description:
|
||||
"South Korea offers advanced technology and cultural experiences",
|
||||
image: "/assets/img/home-3/choose-us/02.jpg",
|
||||
icon: "/assets/img/home-3/choose-us/icon-2.png",
|
||||
link: "/countries/south-korea",
|
||||
},
|
||||
{
|
||||
id: "france",
|
||||
name: "France",
|
||||
description: "France offers unique cultural experiences and education",
|
||||
image: "/assets/img/home-3/choose-us/03.jpg",
|
||||
icon: "/assets/img/home-3/choose-us/icon-3.png",
|
||||
link: "/countries/france",
|
||||
},
|
||||
{
|
||||
id: "uk",
|
||||
name: "UK",
|
||||
description:
|
||||
"UK provides world-class education and career opportunities",
|
||||
image: "/assets/img/home-3/choose-us/04.jpg",
|
||||
icon: "/assets/img/home-3/choose-us/icon-2.png",
|
||||
link: "/countries/uk",
|
||||
},
|
||||
{
|
||||
id: "germany",
|
||||
name: "Germany",
|
||||
description:
|
||||
"Germany offers excellent education and work opportunities",
|
||||
image: "/assets/img/home-3/choose-us/05.jpg",
|
||||
icon: "/assets/img/home-3/choose-us/icon-3.png",
|
||||
link: "/countries/germany",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
visas: {
|
||||
items: [
|
||||
{
|
||||
id: "family-visa",
|
||||
number: "01",
|
||||
name: "Family Visa",
|
||||
description:
|
||||
"Our Family Visa services help reunite loved ones by providing expert guidance.",
|
||||
buttonText: "service _ 02",
|
||||
buttonLink: "/services/details/family-visa",
|
||||
},
|
||||
{
|
||||
id: "student-visa",
|
||||
number: "02",
|
||||
name: "Student Visa",
|
||||
description:
|
||||
"We provide expert guidance for student visa applications.",
|
||||
buttonText: "service _ 02",
|
||||
buttonLink: "/services/details/student-visa",
|
||||
},
|
||||
{
|
||||
id: "work-visa",
|
||||
number: "03",
|
||||
name: "Work Visa",
|
||||
description:
|
||||
"Collaboratively disintermediate one to one functionalities and long term.",
|
||||
buttonText: "service _ 02",
|
||||
buttonLink: "/services/details/work-visa",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
reviews: {
|
||||
title: {
|
||||
subTitle: "What Our Clients Say",
|
||||
mainTitle: "Immigration Success Stories",
|
||||
},
|
||||
viewAllButton: {
|
||||
text: "View All Review",
|
||||
icon: "fa-solid fa-arrow-right",
|
||||
link: "/contact",
|
||||
},
|
||||
thumb: "/assets/img/home-3/test-thumb.jpg",
|
||||
items: [
|
||||
{
|
||||
id: "client-review-1",
|
||||
rating: 5,
|
||||
content:
|
||||
"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.",
|
||||
author: {
|
||||
name: "Mohammed Ali,",
|
||||
type: "Family Visa",
|
||||
},
|
||||
icon: "fa-solid fa-quote-right",
|
||||
},
|
||||
{
|
||||
id: "client-review-2",
|
||||
rating: 5,
|
||||
content:
|
||||
"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.",
|
||||
author: {
|
||||
name: "Mohammed Ali,",
|
||||
type: "Family Visa",
|
||||
},
|
||||
icon: "fa-solid fa-quote-right",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
31
app/components/Breadcrumb.tsx
Normal file
31
app/components/Breadcrumb.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
interface BreadcrumbProps {
|
||||
title: string;
|
||||
current: string;
|
||||
}
|
||||
|
||||
export default function Breadcrumb({ title, current }: BreadcrumbProps) {
|
||||
return (
|
||||
<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>
|
||||
<div className="container">
|
||||
<div className="page-heading">
|
||||
<h1 className="breadcrumb-title">{title}</h1>
|
||||
<ul className="breadcrumb-list">
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevron-right"></i>
|
||||
</li>
|
||||
<li>{current}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
.collapse {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.collapse.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@@ -36,19 +36,46 @@ export default function RootLayout({
|
||||
<main className="min-h-screen">{children}</main>
|
||||
<Footer />
|
||||
{/* Nhúng các script JS giống news.html */}
|
||||
<Script src="/assets/js/jquery-3.7.1.min.js" strategy="beforeInteractive" />
|
||||
<Script src="/assets/js/viewport.jquery.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/jquery.nice-select.min.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/jquery.waypoints.js" strategy="afterInteractive" />
|
||||
<Script
|
||||
src="/assets/js/jquery-3.7.1.min.js"
|
||||
strategy="beforeInteractive"
|
||||
/>
|
||||
<Script
|
||||
src="/assets/js/viewport.jquery.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script
|
||||
src="/assets/js/bootstrap.bundle.min.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script
|
||||
src="/assets/js/jquery.nice-select.min.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script
|
||||
src="/assets/js/jquery.waypoints.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script src="/assets/js/odometer.min.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/swiper-bundle.min.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/jquery.meanmenu.min.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/jquery.magnific-popup.min.js" strategy="afterInteractive" />
|
||||
<Script
|
||||
src="/assets/js/swiper-bundle.min.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script
|
||||
src="/assets/js/jquery.meanmenu.min.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script
|
||||
src="/assets/js/jquery.magnific-popup.min.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script src="/assets/js/wow.min.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/gsap.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/lenis.min.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/ScrollTrigger.min.js" strategy="afterInteractive" />
|
||||
<Script
|
||||
src="/assets/js/ScrollTrigger.min.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script src="/assets/js/SplitText.min.js" strategy="afterInteractive" />
|
||||
<Script src="/assets/js/main.js" strategy="afterInteractive" />
|
||||
</body>
|
||||
|
||||
56
app/services/details/[slug]/not-found.tsx
Normal file
56
app/services/details/[slug]/not-found.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<div className="container">
|
||||
<div className="page-heading">
|
||||
<h1 className="breadcrumb-title">Service Not Found</h1>
|
||||
<ul className="breadcrumb-list">
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevron-right"></i>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/services">Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevron-right"></i>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Not Found</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-padding">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-8 text-center">
|
||||
<h2>Service Not Found</h2>
|
||||
<p className="mb-4">
|
||||
The service you're looking for could not be found. Please check
|
||||
the URL or return to our services page.
|
||||
</p>
|
||||
<a href="/services" className="theme-btn">
|
||||
Back to Services
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
170
app/services/details/[slug]/page.tsx
Normal file
170
app/services/details/[slug]/page.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import { Metadata } from "next";
|
||||
import { fetchServiceBySlug } from "../../../../api/servicesApi";
|
||||
import { notFound } from "next/navigation";
|
||||
import { imageUrl } from "../../../utils/image";
|
||||
import Breadcrumb from "../../../components/Breadcrumb";
|
||||
|
||||
interface ServiceDetailsPageProps {
|
||||
params: Promise<{
|
||||
slug: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: ServiceDetailsPageProps): Promise<Metadata> {
|
||||
try {
|
||||
const { slug } = await params;
|
||||
const data = await fetchServiceBySlug(slug);
|
||||
|
||||
if (!data || !data.serviceDetails) {
|
||||
return {
|
||||
title: "Service Not Found",
|
||||
description: "The requested service could not be found.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${data.serviceDetails.content.title} - Visaway Immigration Services`,
|
||||
description: data.serviceDetails.content.description,
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
title: "Service Not Found",
|
||||
description: "The requested service could not be found.",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ServiceDetailsPage({
|
||||
params,
|
||||
}: ServiceDetailsPageProps) {
|
||||
try {
|
||||
const { slug } = await params;
|
||||
console.log("Service details page - slug:", slug);
|
||||
|
||||
const data = await fetchServiceBySlug(slug);
|
||||
|
||||
if (!data || !data.serviceDetails) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const { serviceDetails } = data;
|
||||
const { content, keyFeatures, faq } = serviceDetails;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Breadcrumb Section */}
|
||||
<Breadcrumb title="Services Details" current="Service Details" />
|
||||
|
||||
{/* Service-details Section Start */}
|
||||
<section className="service-details-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="service-details-wrapper">
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<div className="service-details-post">
|
||||
<h2>{content.title}</h2>
|
||||
<p className="mt-2">{content.description}</p>
|
||||
<div className="details-image">
|
||||
<img src={imageUrl(content.mainImage)} alt="img" />
|
||||
</div>
|
||||
<h3 className="text">{content.overviewTitle}</h3>
|
||||
<p className="mt-3 mb-3">{content.overviewDescription}</p>
|
||||
<p className="mb-4">{content.additionalDescription}</p>
|
||||
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="service-left-content">
|
||||
<h3>{keyFeatures.title}</h3>
|
||||
<ul className="list-item">
|
||||
{keyFeatures.items.map(
|
||||
(feature: any, index: number) => (
|
||||
<li key={index}>
|
||||
<i className="fa-solid fa-chevrons-right"></i>
|
||||
<span>{feature.title} -</span>
|
||||
{feature.description}
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="thumb">
|
||||
<img
|
||||
src={imageUrl(keyFeatures.sideImage)}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row mt-4 mt-xl-0 g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="thumb">
|
||||
<img src={imageUrl(faq.sideImage)} alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="faq-items">
|
||||
<h3 className="mb-3">{faq.title}</h3>
|
||||
<div className="accordion" id="accordionExample">
|
||||
{faq.items.map((faqItem: any, index: number) => {
|
||||
const isExpanded = faqItem.isExpanded;
|
||||
return (
|
||||
<div
|
||||
key={`faq-${index}`}
|
||||
className="accordion-item wow fadeInUp"
|
||||
data-wow-delay={`.${(index + 1) * 2}s`}
|
||||
>
|
||||
<h5
|
||||
className="accordion-header"
|
||||
id={`heading${index}`}
|
||||
>
|
||||
<button
|
||||
className={`accordion-button ${!isExpanded ? "collapsed" : ""}`}
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#collapse${index}`}
|
||||
aria-expanded={
|
||||
isExpanded ? "true" : "false"
|
||||
}
|
||||
aria-controls={`collapse${index}`}
|
||||
>
|
||||
{faqItem.question}
|
||||
</button>
|
||||
</h5>
|
||||
<div
|
||||
id={`collapse${index}`}
|
||||
className={`accordion-collapse collapse ${isExpanded ? "show" : ""}`}
|
||||
aria-labelledby={`heading${index}`}
|
||||
data-bs-parent="#accordionExample"
|
||||
>
|
||||
<div className="accordion-body">
|
||||
<p>{faqItem.answer}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error loading service details:", error);
|
||||
const { slug } = await params;
|
||||
console.log("Slug that failed:", slug);
|
||||
console.log("Falling back to not found page");
|
||||
notFound();
|
||||
}
|
||||
}
|
||||
@@ -1,73 +1,218 @@
|
||||
import servicesData from "./services.json";
|
||||
import { Metadata } from "next";
|
||||
import { fetchServicePageData } from "../../api/servicesApi";
|
||||
import { imageUrl } from "../utils/image";
|
||||
import Breadcrumb from "../components/Breadcrumb";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Services - Visaway Immigration & Visa Consulting",
|
||||
description: "Immigration & Visa Consulting Services",
|
||||
};
|
||||
|
||||
export default async function ServicesPage() {
|
||||
const data = await fetchServicePageData();
|
||||
const { services, destinations, visas, reviews } = data;
|
||||
|
||||
export default function ServicesPage() {
|
||||
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">
|
||||
{servicesData.title}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">{servicesData.subtitle}</p>
|
||||
</div>
|
||||
<>
|
||||
{/* Breadcrumb Section */}
|
||||
<Breadcrumb title="Services" current="Services" />
|
||||
|
||||
{/* Services Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-2 gap-8">
|
||||
{servicesData.services.map((service) => (
|
||||
{/* Service Section Start */}
|
||||
<section className="service-section section-padding fix section-bg-1">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title-2 wow fadeInUp">
|
||||
{services.title.subTitle}
|
||||
</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{services.title.mainTitle}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
{services.items.map((service: any) => (
|
||||
<div
|
||||
key={service.id}
|
||||
className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow"
|
||||
className={`service-main-item-3 ${service.layout === "right" ? "style-2" : ""} fade-up-anim`}
|
||||
>
|
||||
{/* Service Header */}
|
||||
<div className="flex items-center mb-4">
|
||||
<span className="text-4xl mr-4">{service.icon}</span>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900">
|
||||
{service.layout === "right" && (
|
||||
<div className="service-button">
|
||||
<a
|
||||
href={`/services/details/${service.slug}`}
|
||||
className="theme-btn"
|
||||
>
|
||||
read more
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="service-left">
|
||||
{service.layout === "left" && (
|
||||
<div className="service-image">
|
||||
<img src={imageUrl(service.image)} alt="img" />
|
||||
</div>
|
||||
)}
|
||||
<div className="content">
|
||||
<h3>
|
||||
<a href={`/services/details/${service.slug}`}>
|
||||
{service.name}
|
||||
</a>
|
||||
</h3>
|
||||
<p className="text-blue-600 font-medium">{service.price}</p>
|
||||
<p>{service.description}</p>
|
||||
</div>
|
||||
{service.layout === "right" && (
|
||||
<div className="service-image">
|
||||
<img src={imageUrl(service.image)} alt="img" />
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-700 mb-6">{service.description}</p>
|
||||
|
||||
{/* Features */}
|
||||
<div className="mb-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">Tính năng:</h4>
|
||||
<ul className="space-y-2">
|
||||
{service.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>
|
||||
|
||||
{/* CTA Button */}
|
||||
<button className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
|
||||
Tìm Hiểu Thêm
|
||||
</button>
|
||||
{service.layout === "left" && (
|
||||
<div className="service-button">
|
||||
<a
|
||||
href={`/services/details/${service.slug}`}
|
||||
className="theme-btn"
|
||||
>
|
||||
read more
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact CTA */}
|
||||
<div className="text-center mt-12 bg-gray-50 rounded-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
Cần Tư Vấn Thêm?
|
||||
{/* Destination-Offer Section Start */}
|
||||
<section className="destination-offer-section section-padding fix">
|
||||
<div className="bg-image">
|
||||
<img src={imageUrl(destinations.backgroundImage)} alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="section-title">
|
||||
<span className="sub-title-2 theme wow fadeInUp">
|
||||
{destinations.title.subTitle}
|
||||
</span>
|
||||
<h2 className="split-text-right split-text-in-right text-white">
|
||||
{destinations.title.mainTitle}
|
||||
</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á chi
|
||||
tiết
|
||||
</p>
|
||||
<button className="bg-green-600 text-white px-8 py-3 rounded-lg hover:bg-green-700 transition-colors">
|
||||
Liên Hệ Ngay
|
||||
</div>
|
||||
<div className="destination-offer-wrapper-3 fade-up-anim row g-4 g-xl-4 row-cols-xl-5 row-cols-lg-4 row-cols-md-2 row-cols-1">
|
||||
{destinations.items.map((country: any) => (
|
||||
<div key={country.id} className="col destination-offer-item">
|
||||
<div className="choose-us-image">
|
||||
<img src={imageUrl(country.image)} alt="img" />
|
||||
</div>
|
||||
<div className="choose-us-content">
|
||||
<div className="icon-item">
|
||||
<div className="icon">
|
||||
<img src={imageUrl(country.icon)} alt="img" />
|
||||
</div>
|
||||
<h5>
|
||||
<a href={country.link}>{country.name}</a>
|
||||
</h5>
|
||||
</div>
|
||||
<p>{country.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service-Visa Section Start */}
|
||||
<section className="service-visa-section fix">
|
||||
<div className="container">
|
||||
<div className="service-visa-wrapper">
|
||||
{visas.items.map((visa: any, index: number) => (
|
||||
<div
|
||||
key={visa.id}
|
||||
className={`service-visa-items ${index > 0 ? "style-2" : ""}`}
|
||||
>
|
||||
<div className="top-item">
|
||||
<h4 className="number">{visa.number}</h4>
|
||||
<h3>
|
||||
<a href={visa.buttonLink}>{visa.name}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p>{visa.description}</p>
|
||||
<a href={visa.buttonLink} className="service-button">
|
||||
{visa.buttonText}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonial Section3 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">
|
||||
{reviews.title.subTitle}
|
||||
</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{reviews.title.mainTitle}
|
||||
</h2>
|
||||
</div>
|
||||
<a href="#" 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={imageUrl(reviews.thumb)} alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="testimonial-content">
|
||||
<div className="swiper testimonial-slider-3">
|
||||
<div className="swiper-wrapper">
|
||||
{reviews.items.map((testimonial: any) => (
|
||||
<div key={testimonial.id} className="swiper-slide">
|
||||
<div className="content">
|
||||
<div className="star">
|
||||
{[...Array(testimonial.rating)].map(
|
||||
(_: any, i: number) => (
|
||||
<i key={i} className="fa-solid fa-star"></i>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
<h3>"{testimonial.content}"</h3>
|
||||
<div className="info-item">
|
||||
<div className="icon">
|
||||
<i className={testimonial.icon}></i>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>{testimonial.author.name}</h5>
|
||||
<span>{testimonial.author.type}</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>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
5
app/utils/image.ts
Normal file
5
app/utils/image.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export const imageUrl = (path?: string) => {
|
||||
if (!path) return "";
|
||||
if (path.startsWith("http")) return path;
|
||||
return `${process.env.NEXT_PUBLIC_API_URL}/${path}`;
|
||||
};
|
||||
Reference in New Issue
Block a user