feat: Create FE home page and about page

app/components/about/Mission.tsx

@@ -0,0 +1,51 @@
+const VALUES = [
+    {
+        icon: "fa-solid fa-book-open",
+        title: "Liberal Arts Foundation",
+        desc: "Providing a broad intellectual foundation that encourages critical thinking, creativity, and the ability to adapt to a rapidly changing world.",
+    },
+    {
+        icon: "fa-solid fa-microscope",
+        title: "Research Excellence",
+        desc: "Fostering a culture of rigorous inquiry and innovation, supporting faculty and students in pushing the boundaries of knowledge.",
+    },
+    {
+        icon: "fa-solid fa-globe",
+        title: "Global Perspective",
+        desc: "Cultivating an inclusive environment that values diverse perspectives and prepares students to engage with complex global challenges.",
+    },
+];
+
+const Mission = () => {
+    return (
+        <section id="mission-values" className="about-mission">
+            <div className="container">
+                <div className="about-mission__header text-center">
+                    <div className="about-mission__badge">
+                        <span className="about-mission__badge-line"></span>
+                        <span className="about-mission__badge-text">Core Principles</span>
+                        <span className="about-mission__badge-line"></span>
+                    </div>
+                    <h2 className="about-mission__title">Our Mission &amp; Values</h2>
+                    <p className="about-mission__subtitle">
+                        We are committed to advancing human knowledge and cultivating responsible global citizens through transformative education.
+                    </p>
+                </div>
+
+                <div className="about-mission__grid">
+                    {VALUES.map((item, i) => (
+                        <div key={i} className="about-mission__card">
+                            <div className="about-mission__icon-wrap">
+                                <i className={item.icon}></i>
+                            </div>
+                            <h3 className="about-mission__card-title">{item.title}</h3>
+                            <p className="about-mission__card-desc">{item.desc}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Mission;