uldp.edu.vn/app/components/about/HeroSection.tsx

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;