interface TeamMember {
    id: number;
    name: string;
    title: string;
    avatar: string;
}
 
const team: TeamMember[] = [
    {
        id: 1,
        name: 'Alex Johnson',
        title: 'Front-end Developer',
        avatar: 'https://blookie.io/stock/person1-transparent.webp',
    },
    {
        id: 2,
        name: 'Megan Smith',
        title: 'Senior Designer',
        avatar: 'https://blookie.io/stock/person2-transparent.webp',
    },
    {
        id: 3,
        name: 'David Brown',
        title: 'Chief Product Officer',
        avatar: 'https://blookie.io/stock/person3-transparent.webp',
    },
    {
        id: 4,
        name: 'Sophia Williams',
        title: 'Marketing Specialist',
        avatar: 'https://blookie.io/stock/person4-transparent.webp',
    },
    {
        id: 5,
        name: 'Michael Wilson',
        title: 'Data Analyst',
        avatar: 'https://blookie.io/stock/person5-transparent.webp',
    },
    {
        id: 6,
        name: 'Emily Davis',
        title: 'Software Engineer',
        avatar: 'https://blookie.io/stock/person6-transparent.webp',
    },
];
 
export default function TeamSection() {
    return (
        <section className="py-16 lg:py-32">
            <div className="mx-auto w-full max-w-2xl px-6 lg:max-w-7xl">
                <div className="mx-auto max-w-xl text-center">
                    <h2 className="text-3xl/tight font-semibold tracking-tight sm:text-4xl/tight">Meet Our Team</h2>
                    <p className="text-muted-foreground mt-4 text-base/7 sm:text-lg/8">
                        Aliquet adipiscing lectus praesent cras sed quis lectus egestas.
                    </p>
                </div>
                <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-12">
                    {team.map((member: TeamMember) => (
                        <div key={member.id}>
                            <img
                                src={member.avatar}
                                alt={member.name}
                                className="aspect-[16/9] w-full rounded-xl bg-zinc-100 object-cover object-center"
                            />
                            <h3 className="mt-6 text-lg font-semibold tracking-tight">{member.name}</h3>
                            <p className="text-muted-foreground mt-1 text-sm">{member.title}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}