Teams Section Four

1/* eslint-disable @next/next/no-img-element */
2 
3import { Badge } from '@/components/ui/badge'
4 
5const members = [
6  {
7    name: 'Liam Brown',
8    role: 'Founder - CEO',
9    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlH4NUrIqHjv3VPCtBSMksEJOn7pmfxyc9IoU5',
10  },
11  {
12    name: 'Elijah Jones',
13    role: 'Co-Founder - CTO',
14    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTl81tMhO4dwU2oJkmKaujTg9FMAr3QiGROq5bE',
15  },
16  {
17    name: 'Isabella Garcia',
18    role: 'Sales Manager',
19    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlnj8ad4LL1RTlFOStU5Vx6bKDsZupeXgyGkhM',
20  },
21  {
22    name: 'Henry Lee',
23    role: 'UX Engineer',
24    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlKywRt8Sa4eSEgVXynrIRWAk3NL9mFjvOTM0B',
25  },
26]
27 
28const bentoSpans = [
29  'md:col-span-2 md:row-span-2',
30  'md:col-span-2 md:row-span-1',
31  'md:col-span-1 md:row-span-1',
32] as const
33 
34export default function TeamSectionFour() {
35  return (
36    <section className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
37      <div className="mx-auto max-w-6xl px-4">
38        <div className="mb-12 flex flex-col items-start gap-4 md:mb-16">
39          <Badge variant="ghost" className="text-sm text-muted-foreground uppercase">
40            The Team
41          </Badge>
42 
43          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
44            <h1 className="text-xl md:text-4xl">Join a global team dedicated to their craft</h1>
45            <p className="mt-0 text-left text-muted-foreground md:mt-6">
46              We work with incredible talent from all around the world, each offering unique skills
47              and perspectives. Joining us means you&apos;ll collaborate with industry leaders,
48              learn from the best, and continuously grow.
49            </p>
50          </div>
51        </div>
52 
53        <div className="grid grid-cols-1 gap-6 md:grid-cols-4 md:grid-rows-3">
54          {members.map((member, index) => {
55            return (
56              <div
57                key={member.name}
58                className={`group relative overflow-hidden rounded-xl bg-muted ring-1 ring-border ${bentoSpans[index]}`}
59              >
60                <img
61                  src={member.avatar}
62                  alt={member.name}
63                  className="h-full w-full object-cover object-top grayscale transition-[filter] duration-300 group-hover:grayscale-0 motion-reduce:transition-none"
64                />
65              </div>
66            )
67          })}
68        </div>
69      </div>
70    </section>
71  )
72}