build ui header, footer, home page, about page

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 />
+        </>
+    );
 }