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

import { AboutData } from '../../about/types';

interface AboutTeamProps {
    data: AboutData['team'];
}

const AboutTeam = ({ data }: AboutTeamProps) => {
    return (
        <section className="team-section section-padding fix pt-0">
            <div className="container">
                <div className="section-title text-center">
                    <span className="sub-title wow fadeInUp">Our Expert Team</span>
                    <h2 className="split-text-right split-text-in-right">
                        {data.title}
                    </h2>
                </div>
                <div className="row g-4">
                    {data.members.map((member, index) => (
                        <div key={index} className="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay={`${0.2 * (index + 1)}s`}>
                            <div className="news-card-item">
                                <div className="news-image">
                                    <img src={member.image} alt={member.name} />
                                </div>
                                <div className="news-content text-center">
                                    <h3>{member.name}</h3>
                                    <span className="text-primary">{member.role}</span>
                                    <div className="social-icon d-flex justify-content-center gap-2 mt-3">
                                        {member.social.facebook && <a href={member.social.facebook}><i className="fa-brands fa-facebook-f"></i></a>}
                                        {member.social.linkedin && <a href={member.social.linkedin}><i className="fa-brands fa-linkedin-in"></i></a>}
                                        <a href="#"><i className="fa-brands fa-twitter"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default AboutTeam;