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

import Link from 'next/link';
import { AboutData } from '../../about/types';

interface AboutHeroProps {
    data: AboutData['hero'];
}

const AboutHero = ({ data }: AboutHeroProps) => {
    return (
        <section className="breadcrumb-wrapper fix bg-cover" style={{ backgroundImage: `url(${data.backgroundImage})` }}>
            <div className="shape">
                <img src="/assets/img/inner-page/shape.png" alt="img" />
            </div>
            <div className="container">
                <div className="page-heading">
                    <h1 className="breadcrumb-title">{data.title}</h1>
                    <ul className="breadcrumb-list">
                        {data.breadcrumb.map((item, index) => (
                            <li key={index}>
                                {index === data.breadcrumb.length - 1 ? (
                                    item
                                ) : (
                                    <>
                                        <Link href="/">{item}</Link>
                                        <i className="fa-solid fa-chevron-right ms-2 me-2"></i>
                                    </>
                                )}
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        </section>
    );
};

export default AboutHero;