forked from UKSOURCE/hailearning.edu.vn
40 lines
2.2 KiB
TypeScript
40 lines
2.2 KiB
TypeScript
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;
|