feat: add games

src/app/games/page.tsx

@@ -0,0 +1,27 @@
+import { Certification } from "@/components/cert";
+import { Game } from "@/components/game";
+import { Rule } from "@/components/rule";
+import { Certifications } from "@/config/Certifications";
+import { Games } from "@/config/Games";
+import { Charm } from "next/font/google";
+
+const Gamez = (): JSX.Element => {
+  return (
+    <>
+      <main className="w-[95%] text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+        <h1 className="text-5xl">Games</h1>
+        <section>
+          <p className="mb-2">See how Naomi has appeared in various games.</p>
+          <Rule />
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-y-5">
+            {Games.map((game) => (
+              <Game key={game.name} name={game.name} img={game.img} />
+            ))}
+          </div>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default Gamez;

src/components/game.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import { useState } from "react";
+
+interface GameProps {
+  name: string;
+  img: string;
+}
+
+export const Game = (props: GameProps): JSX.Element => {
+  const { name, img } = props;
+
+  return (
+    <div className="w-[300px] h-[300px] border-2 border-solid border-[--foreground] m-auto text-center items-center">
+      <p className="text-xl">{name}</p>
+      <a
+        href={`https://cdn.nhcarrigan.com/games/${img}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Image
+          src={`https://cdn.nhcarrigan.com/games/${img}`}
+          alt={name}
+          width={250}
+          height={250}
+          className="m-auto"
+        />
+      </a>
+    </div>
+  );
+};

src/config/Games.ts

@@ -0,0 +1,21 @@
+export const Games: {
+  name: string;
+  img: string;
+  }[] = [
+    {
+      name: "Bloody Spell",
+      img: "bloody-spell.jpg"
+    },
+    {
+      name: "Dynasty Warriors 9: Empires",
+      img: "dw-9.jpg"
+    },
+    {
+      name: "Soul Calibur VI",
+      img: "soul-calibur.jpg"
+    },
+    {
+      name: "Star Wars: The Old Republic",
+      img: "swtor.jpg"
+    }
+  ]

src/config/NavItems.ts

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