Teams Section Two

1/* eslint-disable @next/next/no-img-element */
2 
3const members = [
4  {
5    name: 'Liam Brown',
6    role: 'Founder - CEO',
7    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlH4NUrIqHjv3VPCtBSMksEJOn7pmfxyc9IoU5',
8  },
9  {
10    name: 'Elijah Jones',
11    role: 'Co-Founder - CTO',
12    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTl81tMhO4dwU2oJkmKaujTg9FMAr3QiGROq5bE',
13  },
14  {
15    name: 'Isabella Garcia',
16    role: 'Sales Manager',
17    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlnj8ad4LL1RTlFOStU5Vx6bKDsZupeXgyGkhM',
18  },
19  {
20    name: 'Henry Lee',
21    role: 'UX Engineer',
22    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlKywRt8Sa4eSEgVXynrIRWAk3NL9mFjvOTM0B',
23  },
24  {
25    name: 'Ava Williams',
26    role: 'Interaction Designer',
27    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlh433XXK0RlaETPbLcZQjyfg2StNvuB13w8rI',
28  },
29  {
30    name: 'Olivia Miller',
31    role: 'Visual Designer',
32    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlCsjkx0nF5BMj7T0uXqWGgbANfhcdeI8P3x9v',
33  },
34]
35 
36export default function TeamSectionTwo() {
37  return (
38    <section className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
39      <div className="mx-auto max-w-6xl px-6">
40        <div className="mb-12 pb-4 md:mb-16">
41          <h1 className="font-times-heading text-4xl sm:text-5xl">Our team</h1>
42        </div>
43 
44        <div className="grid grid-cols-1 gap-8 sm:grid-cols-3">
45          {members.map((member) => (
46            <div key={member.name} className="group overflow-hidden">
47              <img
48                src={member.avatar}
49                alt={member.name}
50                className="h-80 w-full rounded-md object-cover object-top"
51              />
52 
53              <div className="pt-3">
54                <div className="flex justify-between">
55                  <h3 className="text-sm font-medium">{member.name}</h3>
56                </div>
57 
58                <div className="mt-1 flex items-center justify-between">
59                  <span className="text-sm text-muted-foreground">{member.role}</span>
60                </div>
61              </div>
62            </div>
63          ))}
64        </div>
65      </div>
66    </section>
67  )
68}