build ui header, footer, home page, about page

app/about/about.json

@@ -1,33 +1,97 @@
 {
-  "title": "Về Chúng Tôi",
-  "subtitle": "Đối tác tin cậy cho dịch vụ visa và du lịch",
-  "description": "Chúng tôi là công ty hàng đầu trong lĩnh vực tư vấn visa và dịch vụ du lịch, với hơn 10 năm kinh nghiệm phục vụ khách hàng.",
-  "sections": [
-    {
-      "heading": "Sứ Mệnh",
-      "content": "Mang đến cho khách hàng những trải nghiệm du lịch tuyệt vời và hỗ trợ thủ tục visa một cách nhanh chóng, chính xác."
-    },
-    {
-      "heading": "Tầm Nhìn",
-      "content": "Trở thành công ty dẫn đầu trong lĩnh vực dịch vụ visa và du lịch tại Việt Nam."
-    },
-    {
-      "heading": "Giá Trị Cốt Lõi",
-      "content": "Uy tín - Chất lượng - Tận tâm - Chuyên nghiệp"
-    }
-  ],
+  "hero": {
+    "title": "About Us",
+    "subtitle": "Global Education Simplified",
+    "breadcrumb": [
+      "Home",
+      "About Us"
+    ],
+    "backgroundImage": "/assets/img/inner-page/breadcrumb.jpg"
+  },
+  "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.",
+    "highlights": [
+      "Expert Visa Consulting",
+      "Smooth Documentation Process",
+      "Personalized Student Guidance"
+    ],
+    "image": "/assets/img/inner-page/intro.jpg"
+  },
+  "mission": {
+    "title": "Our Commitment to Your Future",
+    "items": [
+      {
+        "label": "Mission",
+        "description": "To guide students with expert visa consulting, ensuring a smooth process from application to approval and turning dreams into reality."
+      },
+      {
+        "label": "Vision",
+        "description": "To be the most trusted global education consultancy, expanding opportunities and building paths to international success for every student."
+      },
+      {
+        "label": "Values",
+        "description": "Transparency, integrity, and excellence in every visa application, ensuring reliable assistance and professional support."
+      }
+    ]
+  },
   "stats": [
     {
-      "number": "10000+",
-      "label": "Khách hàng hài lòng"
+      "label": "Years Experience",
+      "value": 10
     },
     {
-      "number": "50+",
-      "label": "Quốc gia hỗ trợ visa"
+      "label": "Students Helped",
+      "value": 1000
     },
     {
-      "number": "99%",
-      "label": "Tỷ lệ thành công"
+      "label": "Success Rate",
+      "value": "95%"
+    },
+    {
+      "label": "Countries Covered",
+      "value": 50
     }
-  ]
+  ],
+  "team": {
+    "title": "Meet Our Expert Team",
+    "members": [
+      {
+        "name": "Eleanor Pena",
+        "role": "Lead Legal Consultant",
+        "image": "/assets/img/home-1/testimonial/client.png",
+        "social": {
+          "facebook": "href",
+          "linkedin": "href"
+        }
+      },
+      {
+        "name": "Jerome Bell",
+        "role": "Senior Visa Expert",
+        "image": "/assets/img/home-1/testimonial/client-2.png",
+        "social": {
+          "facebook": "href",
+          "linkedin": "href"
+        }
+      },
+      {
+        "name": "Marvin McKinney",
+        "role": "Immigration Advisor",
+        "image": "/assets/img/home-1/news/client.png",
+        "social": {
+          "facebook": "href",
+          "linkedin": "href"
+        }
+      },
+      {
+        "name": "Kathryn Murphy",
+        "role": "Education Consultant",
+        "image": "/assets/img/home-1/testimonial/client.png",
+        "social": {
+          "facebook": "href",
+          "linkedin": "href"
+        }
+      }
+    ]
+  }
 }

app/about/page.tsx

@@ -1,49 +1,24 @@
-import aboutData from "./about.json";
+import {
+    AboutHero,
+    AboutIntro,
+    AboutMission,
+    AboutStats,
+    AboutTeam,
+    AboutFeatures,
+    AboutNews
+} from '../components/about';
+import aboutData from './about.json';
 
 export default function AboutPage() {
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-4xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            {aboutData.title}
-          </h1>
-          <p className="text-xl text-gray-600 mb-6">{aboutData.subtitle}</p>
-          <p className="text-lg text-gray-700 leading-relaxed">
-            {aboutData.description}
-          </p>
-        </div>
-
-        {/* Sections */}
-        <div className="grid md:grid-cols-3 gap-8 mb-12">
-          {aboutData.sections.map((section, index) => (
-            <div key={index} className="bg-white p-6 rounded-lg shadow-md">
-              <h3 className="text-xl font-semibold text-gray-900 mb-4">
-                {section.heading}
-              </h3>
-              <p className="text-gray-700 leading-relaxed">{section.content}</p>
-            </div>
-          ))}
-        </div>
-
-        {/* Stats */}
-        <div className="bg-blue-50 rounded-lg p-8">
-          <h2 className="text-2xl font-bold text-center text-gray-900 mb-8">
-            Thành Tích Của Chúng Tôi
-          </h2>
-          <div className="grid md:grid-cols-3 gap-8">
-            {aboutData.stats.map((stat, index) => (
-              <div key={index} className="text-center">
-                <div className="text-3xl font-bold text-blue-600 mb-2">
-                  {stat.number}
-                </div>
-                <div className="text-gray-700">{stat.label}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+    return (
+        <>
+            <AboutHero data={aboutData.hero} />
+            <AboutIntro data={aboutData.intro} />
+            <AboutMission data={aboutData.mission} />
+            <AboutStats data={aboutData.stats} />
+            <AboutTeam data={aboutData.team} />
+            <AboutFeatures />
+            <AboutNews />
+        </>
+    );
 }

app/about/types.ts

@@ -0,0 +1,37 @@
+export interface AboutData {
+  hero: {
+    title: string;
+    subtitle: string;
+    breadcrumb: string[];
+    backgroundImage: string;
+  };
+  intro: {
+    heading: string;
+    description: string;
+    highlights: string[];
+    image: string;
+  };
+  mission: {
+    title: string;
+    items: {
+      label: string;
+      description: string;
+    }[];
+  };
+  stats: {
+    label: string;
+    value: number | string;
+  }[];
+  team: {
+    title: string;
+    members: {
+      name: string;
+      role: string;
+      image: string;
+      social: {
+        facebook: string;
+        linkedin: string;
+      };
+    }[];
+  };
+}