feat: Create FE home page and about page

app/components/about/HistoryTimeline.tsx

@@ -0,0 +1,39 @@
+const TIMELINE = [
+    { year: "1895", title: "Foundation", desc: "Established as an independent institute for liberal studies by a group of visionary scholars.", side: "left" },
+    { year: "1945", title: "Post-War Expansion", desc: "Expanded faculties to include modern sciences and established the first dedicated research hub.", side: "right" },
+    { year: "1982", title: "Global Partnerships", desc: "Initiated formal exchange programs and research partnerships with leading universities worldwide.", side: "left" },
+    { year: "2020", title: "Modern Research Era", desc: "Inauguration of the new interdisciplinary research center, focusing on sustainable global development.", side: "right" },
+];
+
+const HistoryTimeline = () => {
+    return (
+        <section id="history-timeline" className="about-timeline">
+            <div className="container">
+                <div className="about-timeline__header text-center">
+                    <h2 className="about-timeline__title">Our History</h2>
+                    <p className="about-timeline__subtitle">A legacy of academic excellence spanning over a century.</p>
+                </div>
+
+                <div className="about-timeline__track">
+                    <div className="about-timeline__line"></div>
+
+                    {TIMELINE.map((item, i) => (
+                        <div key={i} className={`about-timeline__item about-timeline__item--${item.side}`}>
+                            <div className="about-timeline__content">
+                                <h3 className="about-timeline__year">{item.year}</h3>
+                                <h4 className="about-timeline__event">{item.title}</h4>
+                                <p className="about-timeline__desc">{item.desc}</p>
+                            </div>
+                            <div className="about-timeline__dot-wrap">
+                                <div className="about-timeline__dot"></div>
+                            </div>
+                            <div className="about-timeline__spacer"></div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HistoryTimeline;