Teams Section Three

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