forked from UKSOURCE/hailearning.edu.vn
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import Link from "next/link";
|
|
|
|
const CENTERS = [
|
|
{
|
|
tag: "Biosciences",
|
|
tagColor: "blue",
|
|
title: "Institut Pasteur Collaborative Lab",
|
|
desc: "A premier center focusing on immunology, genetics, and infectious diseases.",
|
|
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/115ee2f067-72629210549870cf0d35.png",
|
|
href: "#",
|
|
},
|
|
{
|
|
tag: "Humanities",
|
|
tagColor: "yellow",
|
|
title: "Center for European Studies",
|
|
desc: "Housing over 2 million volumes and dedicated to historical and sociological research.",
|
|
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/c11358a8da-a7b331f85d1fbd27c851.png",
|
|
href: "#",
|
|
},
|
|
{
|
|
tag: "Technology",
|
|
tagColor: "green",
|
|
title: "AI & Robotics Institute",
|
|
desc: "Pioneering developments in machine learning, automation, and computational science.",
|
|
img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/97fca8b57f-238aa78a799f22cf1cd1.png",
|
|
href: "#",
|
|
},
|
|
];
|
|
|
|
const Campus = () => {
|
|
return (
|
|
<section id="campus" className="about-campus">
|
|
<div className="container">
|
|
<div className="about-campus__header text-center">
|
|
<h2 className="about-campus__title">Campus & Research Centers</h2>
|
|
<p className="about-campus__subtitle">
|
|
State-of-the-art facilities nestled in the historic Latin Quarter, designed to foster innovation and collaboration.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="about-campus__grid">
|
|
{CENTERS.map((center, i) => (
|
|
<div key={i} className="about-campus__card">
|
|
<div className="about-campus__img-wrap">
|
|
<img src={center.img} alt={center.title} className="about-campus__img" />
|
|
</div>
|
|
<div className="about-campus__body">
|
|
<span className={`about-campus__tag about-campus__tag--${center.tagColor}`}>
|
|
{center.tag}
|
|
</span>
|
|
<h3 className="about-campus__card-title">{center.title}</h3>
|
|
<p className="about-campus__card-desc">{center.desc}</p>
|
|
<Link href={center.href} className="about-campus__link">
|
|
Explore Facility <i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Campus;
|