Teams Section One

1/* eslint-disable @next/next/no-img-element */
2 
3import { IconBrandLinkedin } from '@tabler/icons-react'
4import Link from 'next/link'
5 
6const members = [
7  {
8    name: 'Liam Brown',
9    role: 'Founder - CEO',
10    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlH4NUrIqHjv3VPCtBSMksEJOn7pmfxyc9IoU5',
11    link: '#',
12  },
13  {
14    name: 'Elijah Jones',
15    role: 'Co-Founder - CTO',
16    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTl81tMhO4dwU2oJkmKaujTg9FMAr3QiGROq5bE',
17    link: '#',
18  },
19  {
20    name: 'Isabella Garcia',
21    role: 'Sales Manager',
22    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlnj8ad4LL1RTlFOStU5Vx6bKDsZupeXgyGkhM',
23    link: '#',
24  },
25  {
26    name: 'Henry Lee',
27    role: 'UX Engineer',
28    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlKywRt8Sa4eSEgVXynrIRWAk3NL9mFjvOTM0B',
29    link: '#',
30  },
31  {
32    name: 'Ava Williams',
33    role: 'Interaction Designer',
34    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlh433XXK0RlaETPbLcZQjyfg2StNvuB13w8rI',
35    link: '#',
36  },
37  {
38    name: 'Olivia Miller',
39    role: 'Visual Designer',
40    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlCsjkx0nF5BMj7T0uXqWGgbANfhcdeI8P3x9v',
41    link: '#',
42  },
43]
44 
45function MemberGrid({ data }: { data: typeof members }) {
46  if (data.length === 0) {
47    return (
48      <div className="rounded-lg border border-dashed p-8 text-center">
49        <h3 className="text-sm font-medium">No team members available</h3>
50        <p className="mt-1 text-sm text-muted-foreground">
51          New team profiles will appear here when they are published.
52        </p>
53      </div>
54    )
55  }
56 
57  return (
58    <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
59      {data.map((member) => (
60        <div key={member.name} className="group overflow-hidden">
61          <img
62            src={member.avatar}
63            alt={member.name}
64            className="h-64 w-full rounded-md object-cover object-top grayscale transition-[filter] duration-300 group-hover:grayscale-0 motion-reduce:transition-none"
65          />
66 
67          <div className="pt-3">
68            <div className="flex justify-between">
69              <h3 className="text-sm font-medium">{member.name}</h3>
70            </div>
71 
72            <div className="mt-1 flex items-center justify-between transition-[transform,opacity] duration-200 motion-reduce:transition-none sm:translate-y-2 sm:opacity-0 sm:group-focus-within:translate-y-0 sm:group-focus-within:opacity-100 sm:group-hover:translate-y-0 sm:group-hover:opacity-100">
73// … truncated