forked from UKSOURCE/hailearning.edu.vn
Merge pull request 'feat(about): Implement about API integration and migrate from static JSON' (#23) from feat/huy-05022026-about-api-integration into main
Reviewed-on: UKSOURCE/hailearning.edu.vn#23
This commit is contained in:
35
api/aboutApi.ts
Normal file
35
api/aboutApi.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
/**
|
||||||
|
* About API Functions
|
||||||
|
* Fetch about us data from external API
|
||||||
|
*/
|
||||||
|
|
||||||
|
const getApiUrl = (): string => {
|
||||||
|
return process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
|
||||||
|
};
|
||||||
|
|
||||||
|
import { AboutData } from "../app/about/types";
|
||||||
|
|
||||||
|
export const aboutApi = {
|
||||||
|
// Get about us data
|
||||||
|
getAbout: async (): Promise<AboutData | null> => {
|
||||||
|
try {
|
||||||
|
const apiUrl = getApiUrl();
|
||||||
|
const response = await fetch(`${apiUrl}/api/about`, {
|
||||||
|
cache: 'no-store',
|
||||||
|
headers: {
|
||||||
|
'Cache-Control': 'no-cache',
|
||||||
|
'Pragma': 'no-cache'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
console.error(`HTTP error! status: ${response.status}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching about data:", error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
{
|
|
||||||
"hero": {
|
|
||||||
"title": "About Us",
|
|
||||||
"subtitle": "Global Education Simplified",
|
|
||||||
"breadcrumb": ["Home", "About Us"],
|
|
||||||
"backgroundImage": "/assets/img/inner-page/breadcrumb.jpg"
|
|
||||||
},
|
|
||||||
"intro": {
|
|
||||||
"subheading": "Company Intro",
|
|
||||||
"heading": "Building Pathways to Your Immigration Success",
|
|
||||||
"description": "We provide expert guidance, personalized solutions, and transparent processes to help you achieve your immigration goals. Our dedicated team ensures a smooth journey, building pathways to your international success.",
|
|
||||||
"image": "/assets/img/inner-page/intro.jpg"
|
|
||||||
},
|
|
||||||
"mission": {
|
|
||||||
"subheading": "About Our Consultancy",
|
|
||||||
"heading": "Turning Study Abroad Dreams Into Reality",
|
|
||||||
"description": "We guide students with expert visa consulting, ensuring a smooth process from application to approval, turning study abroad aspirations into life-changing opportunities for a brighter future.",
|
|
||||||
"images": {
|
|
||||||
"main": "/assets/img/home-1/about/about-1.jpg",
|
|
||||||
"secondary": "/assets/img/home-1/about/about-02.jpg",
|
|
||||||
"bgShape": "/assets/img/home-1/about/Vector.png",
|
|
||||||
"planeShape": "/assets/img/home-1/about/plane.png",
|
|
||||||
"topShape": "/assets/img/home-1/about/shape.png",
|
|
||||||
"globeShape": "/assets/img/home-1/about/globe.png"
|
|
||||||
},
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"icon": "/assets/img/home-1/icon/01.svg",
|
|
||||||
"label": "Global Reach",
|
|
||||||
"description": "Expanding Opportunities Worldwide"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon": "/assets/img/home-1/icon/01.svg",
|
|
||||||
"label": "Global Reach",
|
|
||||||
"description": "Expanding Opportunities Worldwide"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"features": [
|
|
||||||
"Fastest Visa form processing with skilled immigration agents",
|
|
||||||
"Partnership with International Educational Institutions"
|
|
||||||
],
|
|
||||||
"ctaButton": {
|
|
||||||
"label": "Get Started",
|
|
||||||
"href": "/about"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"features": {
|
|
||||||
"backgroundImage": "/assets/img/home-2/feature/bg-shape.png",
|
|
||||||
"subheading": "Your Travel Made Easy",
|
|
||||||
"heading": "Smooth Visa Journey Guaranteed",
|
|
||||||
"description": "We provide expert guidance for every visa application, ensuring smooth processing, personalized support, and reliable assistance",
|
|
||||||
"image": "/assets/img/home-2/feature/02.png",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"icon": "/assets/img/home-2/icon/01.png",
|
|
||||||
"title": "Expert Consultants",
|
|
||||||
"description": "Skilled and knowledgeable visa advisors. Skilled and knowledgeable visa advisors."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon": "/assets/img/home-2/icon/01.png",
|
|
||||||
"title": "Personalized Support",
|
|
||||||
"description": "Skilled and knowledgeable visa advisors. Skilled and knowledgeable visa advisors."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon": "/assets/img/home-2/icon/01.png",
|
|
||||||
"title": "Transparent Process",
|
|
||||||
"description": "Skilled and knowledgeable visa advisors. Skilled and knowledgeable visa advisors."
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"ctaButton": {
|
|
||||||
"label": "Get Started Today",
|
|
||||||
"href": "/contact"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"news": {
|
|
||||||
"subheading": "Visa Tips & Guides",
|
|
||||||
"heading": "Latest Insights & Updates",
|
|
||||||
"ctaButton": {
|
|
||||||
"label": "view all articles",
|
|
||||||
"href": "/blog"
|
|
||||||
},
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"title": "Step-by-Step Guide to Applying for a Student Visa",
|
|
||||||
"category": "Student Visa",
|
|
||||||
"date": "20 August ,2025",
|
|
||||||
"comments": 8,
|
|
||||||
"author": {
|
|
||||||
"name": "Sohel",
|
|
||||||
"avatar": "/assets/img/home-1/news/client.png"
|
|
||||||
},
|
|
||||||
"link": "/blog/step-by-step-guide-student-visa",
|
|
||||||
"thumbnail": "/assets/img/home-1/news/news-1.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Tips to Prepare Financial Documents for Visa Approval",
|
|
||||||
"category": "IELTS / TOEFL",
|
|
||||||
"date": "20 August ,2025",
|
|
||||||
"comments": 8,
|
|
||||||
"author": {
|
|
||||||
"name": "Sohel",
|
|
||||||
"avatar": "/assets/img/home-1/news/client.png"
|
|
||||||
},
|
|
||||||
"link": "/blog/financial-documents-visa-approval",
|
|
||||||
"thumbnail": "/assets/img/home-1/news/news-2.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Post-Arrival Guide What Every Student Should Know",
|
|
||||||
"category": "Study Abroad",
|
|
||||||
"date": "20 August ,2025",
|
|
||||||
"comments": 8,
|
|
||||||
"author": {
|
|
||||||
"name": "Sohel",
|
|
||||||
"avatar": "/assets/img/home-1/news/client.png"
|
|
||||||
},
|
|
||||||
"link": "/blog/post-arrival-guide-students",
|
|
||||||
"thumbnail": "/assets/img/home-1/news/news-3.jpg"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +1,21 @@
|
|||||||
import { AboutHero, AboutIntro, AboutMission, AboutFeatures, AboutNews } from "../components/about";
|
import { AboutHero, AboutIntro, AboutMission, AboutFeatures, AboutNews } from "../components/about";
|
||||||
import aboutData from "./about.json";
|
import { aboutApi } from "../../api/aboutApi";
|
||||||
|
|
||||||
|
export default async function AboutPage() {
|
||||||
|
const data = await aboutApi.getAbout();
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
export default function AboutPage() {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AboutHero data={aboutData.hero} />
|
<AboutHero data={data.hero} />
|
||||||
<AboutIntro data={aboutData.intro} />
|
<AboutIntro data={data.intro} />
|
||||||
<AboutMission data={aboutData.mission} />
|
<AboutMission data={data.mission} />
|
||||||
<AboutFeatures data={aboutData.features} />
|
<AboutFeatures data={data.features} />
|
||||||
<AboutNews data={aboutData.news} />
|
<AboutNews data={data.news} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
export interface AboutData {
|
export interface AboutData {
|
||||||
hero: {
|
hero: {
|
||||||
title: string;
|
title: string;
|
||||||
subtitle: string;
|
|
||||||
breadcrumb: string[];
|
breadcrumb: string[];
|
||||||
backgroundImage: string;
|
backgroundImage: string;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -14,20 +14,22 @@ const AboutHero = ({ data }: AboutHeroProps) => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="page-heading">
|
<div className="page-heading">
|
||||||
<h1 className="breadcrumb-title">{data.title}</h1>
|
<h1 className="breadcrumb-title">{data.title}</h1>
|
||||||
<ul className="breadcrumb-list">
|
{Array.isArray(data.breadcrumb) && (
|
||||||
{data.breadcrumb.map((item, index) => (
|
<ul className="breadcrumb-list">
|
||||||
<li key={index}>
|
{data.breadcrumb.map((item, index) => (
|
||||||
{index === data.breadcrumb.length - 1 ? (
|
<li key={index}>
|
||||||
item
|
{index === data.breadcrumb.length - 1 ? (
|
||||||
) : (
|
item
|
||||||
<>
|
) : (
|
||||||
<Link href="/">{item}</Link>
|
<>
|
||||||
<i className="fa-solid fa-chevron-right ms-2 me-2"></i>
|
<Link href="/">{item}</Link>
|
||||||
</>
|
<i className="fa-solid fa-chevron-right ms-2 me-2"></i>
|
||||||
)}
|
</>
|
||||||
</li>
|
)}
|
||||||
))}
|
</li>
|
||||||
</ul>
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user