feat: Create FE home page and about page

app/components/about/WhyParis.tsx

@@ -0,0 +1,65 @@
+const FEATURES = [
+    "Access to world-renowned museums, archives, and libraries.",
+    "A hub for international organizations and global policy.",
+    "A vibrant cultural ecosystem that enriches the liberal arts experience.",
+];
+
+const IMAGES = [
+    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/4df3620db3-dda28233c91d6369d039.png", alt: "Parisian cafe and street", tall: false },
+    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/a45c3de13a-8173142c33595269388d.png", alt: "Students in Parisian library", tall: true },
+    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/fe39e27ab6-40f9c9b4851f3b8176da.png", alt: "Seine river with historic bridges", tall: true },
+    { src: "https://storage.googleapis.com/uxpilot-auth.appspot.com/cb66207ea0-16795a67db08ef0e6f8c.png", alt: "Modern research facility", tall: false },
+];
+
+const WhyParis = () => {
+    return (
+        <section id="why-paris" className="why-paris">
+            <div className="container">
+                <div className="row align-items-center">
+                    {/* Left: Image grid */}
+                    <div className="col-lg-6 order-lg-1 order-2">
+                        <div className="why-paris__image-grid">
+                            <div className="why-paris__image-col">
+                                <img src={IMAGES[0].src} alt={IMAGES[0].alt} className="why-paris__img why-paris__img--short" />
+                                <img src={IMAGES[1].src} alt={IMAGES[1].alt} className="why-paris__img why-paris__img--tall" />
+                            </div>
+                            <div className="why-paris__image-col why-paris__image-col--offset">
+                                <img src={IMAGES[2].src} alt={IMAGES[2].alt} className="why-paris__img why-paris__img--tall" />
+                                <img src={IMAGES[3].src} alt={IMAGES[3].alt} className="why-paris__img why-paris__img--short" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Right: Text */}
+                    <div className="col-lg-6 order-lg-2 order-1">
+                        <div className="why-paris__content">
+                            <div className="about-hero__badge">
+                                <span className="about-hero__badge-line"></span>
+                                <span className="about-hero__badge-text">Our Location</span>
+                            </div>
+                            <h2 className="why-paris__title">Why Paris?</h2>
+                            <p className="why-paris__desc">
+                                Paris is not just a backdrop; it is our extended campus. As a historic center
+                                of intellectual thought, art, and scientific discovery, the city offers
+                                unparalleled opportunities for our students and researchers.
+                            </p>
+                            <ul className="why-paris__list">
+                                {FEATURES.map((item, i) => (
+                                    <li key={i} className="why-paris__list-item">
+                                        <span className="why-paris__check">
+                                            <i className="fa-solid fa-check"></i>
+                                        </span>
+                                        <span>{item}</span>
+                                    </li>
+                                ))}
+                            </ul>
+                            <button className="why-paris__btn">Explore Campus Life</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default WhyParis;