feat: Create FE home page and about page

app/components/about/HeroSection.tsx

@@ -0,0 +1,74 @@
+import { AboutData } from "@/app/about/types";
+import { getCmsImageUrl } from "@/utils/image";
+import Link from "next/link";
+
+interface HeroSectionProps {
+    data?: AboutData | null;
+}
+
+const HeroSection = ({ data }: HeroSectionProps) => {
+    const title = data?.hero?.title || "A Legacy of Liberal Arts & Research";
+    const backgroundImage = data?.hero?.backgroundImage
+        ? getCmsImageUrl(data.hero.backgroundImage)
+        : null;
+
+    return (
+        <section
+            id="about-hero"
+            className="about-hero fix bg-cover"
+            style={backgroundImage ? { backgroundImage: `url('${backgroundImage}')` } : undefined}
+        >
+            <div className="container">
+                <div className="row align-items-center">
+                    {/* Left: Text */}
+                    <div className="col-lg-6">
+                        <div className="about-hero__content">
+                            <div className="about-hero__badge">
+                                <span className="about-hero__badge-line"></span>
+                                <span className="about-hero__badge-text">Our Identity</span>
+                            </div>
+                            <h1 className="about-hero__title"
+                                dangerouslySetInnerHTML={{ __html: title }}
+                            />
+                            <p className="about-hero__desc">
+                                Founded in the heart of Paris, Université Libérale is dedicated to fostering
+                                critical thinking, interdisciplinary innovation, and global understanding through
+                                a rigorous liberal arts curriculum and world-class research initiatives.
+                            </p>
+                            <div className="about-hero__actions">
+                                <button className="about-hero__btn">
+                                    Discover Our History
+                                    <i className="fa-solid fa-arrow-down"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Right: Image */}
+                    <div className="col-lg-6">
+                        <div className="about-hero__image-wrap">
+                            <img
+                                src={data?.intro?.image
+                                    ? getCmsImageUrl(data.intro.image)
+                                    : "https://storage.googleapis.com/uxpilot-auth.appspot.com/e0291249ca-9b14cf509f6076b406c0.png"}
+                                alt="University campus"
+                                className="about-hero__image"
+                            />
+                            <div className="about-hero__badge-card">
+                                <div className="about-hero__badge-icon">
+                                    <i className="fa-solid fa-award"></i>
+                                </div>
+                                <div>
+                                    <h4 className="about-hero__badge-value">Top 50</h4>
+                                    <p className="about-hero__badge-label">Global Research Ranking</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HeroSection;