feat: add team page

next.config.mjs

@@ -1,7 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ['cdn.nhcarrigan.com']
+    remotePatterns: [
+      {
+        hostname: "cdn.nhcarrigan.com"
+      }
+    ]
   }
 };
 

src/app/team/page.tsx

@@ -0,0 +1,38 @@
+import { Certification } from "@/components/cert";
+import { Game } from "@/components/game";
+import { Member } from "@/components/member";
+import { Rule } from "@/components/rule";
+import { Certifications } from "@/config/Certifications";
+import { Games } from "@/config/Games";
+import { TeamMembers } from "@/config/TeamMembers";
+import { Charm } from "next/font/google";
+
+const Team = (): JSX.Element => {
+  return (
+    <>
+      <main className="w-[95%] text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+        <h1 className="text-5xl">Our Team</h1>
+        <section>
+          <p className="mb-2">
+            Meet the people behind nhcarrigan&apos;s success!
+          </p>
+          <Rule />
+          <div className="w-full">
+            {TeamMembers.map((member) => (
+              <Member
+                key={member.name}
+                name={member.name}
+                url={member.url}
+                avatar={member.avatar}
+                joinDate={member.joinDate}
+                role={member.role}
+              />
+            ))}
+          </div>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default Team;

src/components/member.tsx

@@ -0,0 +1,46 @@
+import Image from "next/image";
+import { useState } from "react";
+
+interface MemberProps {
+  name: string;
+  avatar: string;
+  role: string;
+  url: string;
+  joinDate: Date;
+}
+
+export const Member = (props: MemberProps): JSX.Element => {
+  const { name, avatar, role, url, joinDate } = props;
+
+  return (
+    <div className="flex items-start gap-2.5 pb-10 w-full">
+      <Image
+        className="rounded-full"
+        src={`https://cdn.nhcarrigan.com/avatars/${avatar}`}
+        alt={`${name}'s avatar.`}
+        width={75}
+        height={75}
+      />
+      <div className="flex flex-col w-full leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
+        <div>
+          <a
+            className="text-sm font-semibold text-[#abfcec]"
+            href={url}
+            target="noopener noreferrer"
+          >
+            {name}
+          </a>
+          <p className="text-sm font-normal text-gray-500 dark:text-gray-400">
+            {joinDate.toLocaleDateString("en-GB", {
+              month: "long",
+              year: "numeric",
+            })}
+          </p>
+        </div>
+        <p className="text-sm font-normal py-2.5 text-gray-900 dark:text-white">
+          {role}
+        </p>
+      </div>
+    </div>
+  );
+};

src/config/NavItems.ts

@@ -5,5 +5,6 @@ export const NavItems = [
   { href: "/contact", text: "Contact" },
   { href: "/certs", text: "Certifications" },
   { href: "/reviews", text: "Reviews" },
-  { href: "/games", text: "Games"}
+  { href: "/games", text: "Games"},
+  { href: "/team", text: "Our Team" }
   ].sort((a, b) => a.text.localeCompare(b.text));

src/config/Socials.ts

@@ -41,7 +41,7 @@ export const Donate: {
 } = {
   icon: faMoneyBill,
   link: "https://docs.nhcarrigan.com/#/donate",
-  label: "Support Our Work 💜",
+  label: "Donate 💜",
   alt: "Money Icon",
   color: "#003600",
   background: `linear-gradient(

src/config/TeamMembers.ts

@@ -0,0 +1,36 @@
+export const TeamMembers: {
+  name: string;
+  avatar: string;
+  role: string;
+  url: string;
+  joinDate: Date;
+  }[] = [
+    {
+      name: "Naomi Carrigan",
+      avatar: "naomi.png",
+      role: "Founder / CEO",
+      url: "https://chat.nhcarrigan.com",
+      joinDate: new Date("April 1, 2020")
+    },
+    {
+      name: "Denna",
+      avatar: "denna.png",
+      role: "Chief Financial Officer",
+      url: "https://denna.nhcarrigan.com",
+      joinDate: new Date("April 2, 2020")
+    },
+    {
+      name: "Tim",
+      avatar: "tim.png",
+      role: "Chief Technical Officer",
+      url: "https://chat.nhcarrigan.com",
+      joinDate: new Date("April 2, 2020")
+    },
+    {
+      name: "Anna",
+      avatar: "anna.png",
+      role: "Software Engineering Intern",
+      url: "https://chat.nhcarrigan.com",
+      joinDate: new Date("August 29, 2023")
+    }
+  ]