src/app/people/page.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

"use client";

export default function Page() {
  const peopleInfo = [
    {
      name: "Joseph",
      role: "Founder",
      bio: "Bio - Quia illum aut in beatae. Possimus dolores aliquid accusantium aut in ut non assumenda. Enim iusto molestias aut deleniti eos aliquid magnam molestiae. At et non possimus ab. Magni labore molestiae nulla qui.",
      imageUrl: "/globe.svg",
    },
    {
      name: "Michael",
      role: "Co-Founder",
      bio: "Bio - Quia illum aut in beatae. Possimus dolores aliquid accusantium aut in ut non assumenda. Enim iusto molestias aut deleniti eos aliquid magnam molestiae. At et non possimus ab. Magni labore molestiae nulla qui.",
      imageUrl: "/globe.svg",
    },
  ];

  const peopleList = peopleInfo.map((person) => (
    <div key={person.name} className="flex items-start gap-4 text-left">
      <img
        className="w-16 rounded-full object-cover"
        src={person.imageUrl}
        alt={`Headshot photo of ${person.name}`}
      />
      <div>
        <h3 className="text-lg font-semibold">{person.name}</h3>
        <p className="text-sm text-gray-500">{person.role}</p>
        <p className="mt-2 text-sm/6 text-gray-700">{person.bio}</p>
      </div>
    </div>
  ));

  return (
    <div className="container mx-auto h-lvh px-6 py-10">
      <div className="text-center pb-8">
        <h1 className="text-2xl font-semibold">
          Meet{" "}
          <span className="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
            Our Team
          </span>
        </h1>
        <p className="max-w-2xl mx-auto my-6 text-gray-700 dark:text-gray-500">
          We are a passionate group of educators dedicated to making learning
          accessible and engaging for everyone.
        </p>
      </div>
      <div className="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 xl:mt-16">
        {peopleList}
      </div>
    </div>
  );
}