feat: Create FE home page and about page

app/components/about/LeaderShip_Broad.tsx

@@ -0,0 +1,66 @@
+import Link from "next/link";
+
+const LEADERS = [
+    {
+        name: "Dr. Eleanor Laurent",
+        role: "President",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/8ce6757572-cd9d4e986dee9e71d10c.png",
+    },
+    {
+        name: "Prof. Marcus Dubois",
+        role: "Dean of Humanities",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3aae15d87b-020f60df05ac2c52a087.png",
+    },
+    {
+        name: "Dr. Sophie Martin",
+        role: "Dean of Research",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3fc05a202c-26e5f00c35a829b5462d.png",
+    },
+    {
+        name: "Prof. Jean-Paul Roux",
+        role: "Provost",
+        img: "https://storage.googleapis.com/uxpilot-auth.appspot.com/3aae15d87b-c36f00cff7803c4209d4.png",
+    },
+];
+
+const LeadershipBoard = () => {
+    return (
+        <section id="leadership-board" className="about-leadership">
+            <div className="container">
+                <div className="about-leadership__header text-center">
+                    <div className="about-mission__badge">
+                        <span className="about-mission__badge-line"></span>
+                        <span className="about-mission__badge-text">University Leadership</span>
+                        <span className="about-mission__badge-line"></span>
+                    </div>
+                    <h2 className="about-leadership__title">Meet Our Leaders</h2>
+                    <p className="about-leadership__subtitle">Guiding our academic vision and institutional strategy.</p>
+                </div>
+
+                <div className="about-leadership__grid">
+                    {LEADERS.map((leader, i) => (
+                        <div key={i} className="about-leadership__card">
+                            <div className="about-leadership__photo-wrap">
+                                <img src={leader.img} alt={leader.name} className="about-leadership__photo" />
+                            </div>
+                            <div className="about-leadership__info">
+                                <h3 className="about-leadership__name">{leader.name}</h3>
+                                <p className="about-leadership__role">{leader.role}</p>
+                                <div className="about-leadership__socials">
+                                    <Link href="#" className="about-leadership__social-link">
+                                        <i className="fa-brands fa-linkedin"></i>
+                                    </Link>
+                                    <Link href="#" className="about-leadership__social-link">
+                                        <i className="fa-solid fa-envelope"></i>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default LeadershipBoard;