Teams Section Five

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: 'Ava Williams',
18    role: 'Interaction Designer',
19    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlh433XXK0RlaETPbLcZQjyfg2StNvuB13w8rI',
20  },
21  {
22    name: 'Olivia Miller',
23    role: 'Visual Designer',
24    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlCsjkx0nF5BMj7T0uXqWGgbANfhcdeI8P3x9v',
25  },
26]
27 
28export default function TeamSectionFive() {
29  return (
30    <section className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
31      <div className="mx-auto max-w-6xl px-4">
32        <div className="mb-12 flex flex-col items-start gap-4 md:mb-16">
33          <Badge variant="ghost" className="text-sm text-muted-foreground uppercase">
34            The Team
35          </Badge>
36 
37          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
38            <h1 className="max-w-[22ch] text-2xl font-medium md:text-4xl">
39              Join a global team dedicated to their craft
40            </h1>
41            <p className="max-w-lg text-left text-muted-foreground md:mt-6">
42              We work with incredible talent from all around the world, each offering unique skills
43              and perspectives. Joining us means you&apos;ll collaborate with industry leaders,
44              learn from the best, and continuously grow.
45            </p>
46          </div>
47        </div>
48 
49        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
50          {members.map((member) => (
51            <div
52              key={member.name}
53              className="group relative aspect-3/4 overflow-hidden rounded-xl md:aspect-2/3"
54            >
55              <img
56                src={member.avatar}
57                alt={member.name}
58                className="absolute inset-0 h-full w-full object-cover object-top grayscale transition-[transform,filter] duration-300 group-hover:scale-103 group-hover:grayscale-0 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
59              />
60 
61              <div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/10 to-transparent" />
62 
63// … truncated