feat: Create FE home page and about page

app/components/about/Campus.tsx

@@ -0,0 +1,65 @@
+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 &amp; 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;