feat: implement initial home page with dynamic content, API, and dedicated components.

2026-02-05 15:56:06 +07:00
parent 857d250435
commit 11f435378f
8 changed files with 189 additions and 102 deletions
--- a/api/homeApi.ts
+++ b/api/homeApi.ts
@@ -0,0 +1,43 @@
+/**
+ * Lấy API URL từ environment variable
+ */
+const getApiUrl = (): string => {
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+  if (!apiUrl) {
+    console.warn('NEXT_PUBLIC_API_URL is not set. Using default http://localhost:3001');
+    return 'http://localhost:3001';
+  }
+
+  return apiUrl;
+};
+
+/**
+ * Fetch home page data từ API
+ * @returns Promise<any>
+ * @throws Error nếu fetch thất bại
+ */
+export const fetchHomeData = async (): Promise<any> => {
+  const apiUrl = getApiUrl();
+  const url = `${apiUrl}/api/home`;
+
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      cache: 'no-store',
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching home data:', error);
+    return null; // Trả về null để fallback sang dữ liệu local
+  }
+};
--- a/api/index.ts
+++ b/api/index.ts
@@ -2,3 +2,4 @@
 * Export all API functions
 */
 export * from './blogsApi';
+export * from './homeApi';
--- a/app/components/home/BlogPreview.tsx
+++ b/app/components/home/BlogPreview.tsx
@@ -1,3 +1,4 @@
+import { getCmsImageUrl } from '@/utils/image';
 import Link from 'next/link';

 interface BlogPreviewProps {
@@ -46,17 +47,27 @@ const BlogPreview = ({ data }: BlogPreviewProps) => {
                    </Link>
                </div>
                <div className="row">
-                    {data.items.map((item, index) => (
+                    {data.items.map((item, index) => {
+                        const thumbUrl = getCmsImageUrl(item.thumbnail);
+                        return (
                            <div key={index} className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay={`.${(index + 1) * 2 + 1}s`}>
                                <div className="news-card-item">
                                    <div className="news-image">
-                                    <img src={item.thumbnail} alt="img" />
+                                        <img 
+                                            src={thumbUrl} 
+                                            alt="img" 
+                                            style={{ 
+                                                width: '419px', 
+                                                height: '312px', 
+                                                objectFit: 'cover' 
+                                            }} 
+                                        />
                                        <span>{item.category}</span>
                                        <div className="news-layer-wrapper">
-                                        <div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
-                                        <div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
-                                        <div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
-                                        <div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
+                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
+                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
+                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
+                                            <div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
                                        </div>
                                    </div>
                                    <div className="news-content">
@@ -71,7 +82,22 @@ const BlogPreview = ({ data }: BlogPreviewProps) => {
                                        </h3>
                                        <div className="news-bottom">
                                            <div className="info-item">
-                                            <img src={item.author.avatar} alt="img" />
+                                                <div 
+                                                    style={{ 
+                                                        width: '32px', 
+                                                        height: '32px', 
+                                                        backgroundColor: '#d1d5db', 
+                                                        display: 'flex', 
+                                                        alignItems: 'center', 
+                                                        justifyContent: 'center',
+                                                        fontSize: '14px',
+                                                        fontWeight: 'bold',
+                                                        color: '#374151',
+                                                        marginRight: '10px'
+                                                    }}
+                                                >
+                                                    {item.author.name.charAt(0).toUpperCase()}
+                                                </div>
                                                <span>By {item.author.name}</span>
                                            </div>
                                            <Link href={item.link} className="link-btn">View Articles<i className="fa-solid fa-arrow-right"></i></Link>
@@ -79,7 +105,8 @@ const BlogPreview = ({ data }: BlogPreviewProps) => {
                                    </div>
                                </div>
                            </div>
-                    ))}
+                        );
+                    })}
                </div>
            </div>
        </section>
--- a/app/components/home/HeroSection.tsx
+++ b/app/components/home/HeroSection.tsx
@@ -1,3 +1,4 @@
+import { getCmsImageUrl } from '@/utils/image';
 import Link from 'next/link';

 interface HeroSectionProps {
@@ -20,7 +21,7 @@ interface HeroSectionProps {

 const HeroSection = ({ data }: HeroSectionProps) => {
    return (
-        <section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${data.backgroundImage}')` }}>
+        <section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${getCmsImageUrl(data.backgroundImage)}')` }}>
            <div className="left-shape">
                <img src="/assets/img/home-1/hero/sape-2.png" alt="img" />
            </div>
--- a/app/components/home/Partners.tsx
+++ b/app/components/home/Partners.tsx
@@ -1,12 +1,20 @@
+import { getCmsImageUrl } from '@/utils/image';
+
 interface PartnersProps {
    data: {
-        heading: string;
+        visaConsultancy: {
            items: {
                name: string;
-            logo: string;
+                icon: string;
                year: string;
            }[];
        };
+        brands: {
+            items: {
+                logo: string;
+            }[];
+        };
+    };
 }

 const Partners = ({ data }: PartnersProps) => {
@@ -16,11 +24,11 @@ const Partners = ({ data }: PartnersProps) => {
            <section className="visa-consultency-section section-padding fix">
                <div className="container">
                    <div className="row g-4">
-                        {data.items.slice(0, 4).map((partner, index) => (
+                        {(data.visaConsultancy?.items || []).map((partner, index) => (
                            <div key={index} className="col-xl-3 col-lg-4 col-md-6">
                                <div className="visa-consultency-item">
                                    <div className="image">
-                                        <img src={partner.logo} alt="img" />
+                                        <img src={getCmsImageUrl(partner.icon)} alt={partner.name} />
                                    </div>
                                    <h3>{partner.name}</h3>
                                    <h6>{partner.year}</h6>
@@ -38,10 +46,10 @@ const Partners = ({ data }: PartnersProps) => {
                        <div className="brand-item">
                            <div className="swiper brand-slider">
                                <div className="swiper-wrapper">
-                                    {data.items.slice(4).map((partner, index) => (
+                                    {(data.brands?.items || []).map((brand, index) => (
                                        <div key={index} className="swiper-slide">
                                            <div className="brand-image text-center">
-                                                <img src={partner.logo} alt={partner.name} />
+                                                <img src={getCmsImageUrl(brand.logo)} alt="brand-logo" />
                                            </div>
                                        </div>
                                    ))}
--- a/app/home.json
+++ b/app/home.json
@@ -212,7 +212,7 @@
    "subheading": "Did You Know",
    "items": [
      {
-        "value": "1000",
+        "value": "1",
        "suffix": "k+",
        "label": "Students Guided",
        "description": "Successfully assisted over a thousand students worldwide."
@@ -238,55 +238,40 @@
    ]
  },
  "partners": {
-    "heading": "Our Trusted Partners",
+    "visaConsultancy": {
      "items": [
        {
          "name": "Best Visa Consultancy",
-        "logo": "/assets/img/home-1/feature/icon-1.png",
+          "icon": "/assets/img/home-1/feature/icon-1.png",
          "year": "2025"
        },
        {
          "name": "Visa Success Award",
-        "logo": "/assets/img/home-1/feature/icon-2.png",
+          "icon": "/assets/img/home-1/feature/icon-2.png",
          "year": "2025"
        },
        {
          "name": "Innovation Award",
-        "logo": "/assets/img/home-1/feature/icon-3.png",
+          "icon": "/assets/img/home-1/feature/icon-3.png",
          "year": "2025"
        },
        {
          "name": "Global Education Partner",
-        "logo": "/assets/img/home-1/feature/icon-4.png",
-        "year": "2025"
-      },
-      {
-        "name": "University Partner 1",
-        "logo": "/assets/img/home-1/brand/01.png",
-        "year": "2025"
-      },
-      {
-        "name": "University Partner 2",
-        "logo": "/assets/img/home-1/brand/02.png",
-        "year": "2025"
-      },
-      {
-        "name": "University Partner 3",
-        "logo": "/assets/img/home-1/brand/03.png",
-        "year": "2025"
-      },
-      {
-        "name": "University Partner 4",
-        "logo": "/assets/img/home-1/brand/04.png",
-        "year": "2025"
-      },
-      {
-        "name": "University Partner 5",
-        "logo": "/assets/img/home-1/brand/05.png",
+          "icon": "/assets/img/home-1/feature/icon-4.png",
          "year": "2025"
        }
      ]
    },
+    "brands": {
+      "items": [
+        { "logo": "/assets/img/home-1/brand/01.png" },
+        { "logo": "/assets/img/home-1/brand/02.png" },
+        { "logo": "/assets/img/home-1/brand/03.png" },
+        { "logo": "/assets/img/home-1/brand/04.png" },
+        { "logo": "/assets/img/home-1/brand/05.png" }
+      ]
+    }
+  },
  "blogPreview": {
    "heading": "Latest Insights & Updates",
    "subheading": "Visa Tips & Guides",
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,21 +8,42 @@ import FAQSection from './components/home/FAQSection';
 import Achievements from './components/home/Achievements';
 import Partners from './components/home/Partners';
 import BlogPreview from './components/home/BlogPreview';
-import homeData from './home.json';
+import localHomeData from './home.json';
+import { fetchHomeData } from '@/api';
+import { getCmsImageUrl } from '@/utils/image';
+
+export default async function Home() {
+  // Fetch home data (blog aggregation is now handled by the backend)
+  const apiHomeData = await fetchHomeData();
+  
+  // Use API home data if available, otherwise fallback to local JSON
+  const data = JSON.parse(JSON.stringify(apiHomeData || localHomeData));
+
+  // Process Hero Image URL
+  if (data.hero?.backgroundImage) {
+    data.hero.backgroundImage = getCmsImageUrl(data.hero.backgroundImage);
+  }
+
+  // Process blog images from CMS (thumbnail normalization)
+  if (data.blogPreview?.items) {
+    data.blogPreview.items = data.blogPreview.items.map((item: any) => ({
+      ...item,
+      thumbnail: getCmsImageUrl(item.thumbnail) || '/assets/img/home-1/news/01.jpg'
+    }));
+  }

-export default function Home() {
  return (
    <>
-      <HeroSection data={homeData.hero} />
-      <WhyChooseUs data={homeData.whyChooseUs} />
-      <VisaSolutions data={homeData.visaSolutions} />
-      <VisaCountries data={homeData.visaCountries} />
-      <Testimonials data={homeData.testimonials} />
-      <VideoGallery data={homeData.videoGallery} />
-      <FAQSection data={homeData.faq} />
-      <Achievements data={homeData.achievements} />
-      <Partners data={homeData.partners} />
-      <BlogPreview data={homeData.blogPreview} />
+      <HeroSection data={data.hero} />
+      <WhyChooseUs data={data.whyChooseUs} />
+      <VisaSolutions data={data.visaSolutions} />
+      <VisaCountries data={data.visaCountries} />
+      <Testimonials data={data.testimonials} />
+      <VideoGallery data={data.videoGallery} />
+      <FAQSection data={data.faq} />
+      <Achievements data={data.achievements} />
+      <Partners data={data.partners} />
+      <BlogPreview data={data.blogPreview} />
    </>
  );
 }
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "axios": "^1.13.4",
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3"