Merge branch 'main' into issue-77-Incorporate_playable_games_into_individual_game_pages

Author: TobbleCobble

client/package-lock.json

@@ -22,13 +22,13 @@
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-query-devtools": "^5.80.7",
     "autoprefixer": "^10.4.21",
-    "axios": "^1.12.0",
+    "axios": "^1.13.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
     "is-inside-container": "^1.0.0",
     "lucide-react": "^0.516.0",
-    "next": "15.4.11",
+    "next": "15.5.10",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-social-icons": "^6.25.0",

client/package.json

@@ -54,11 +54,11 @@ export function MemberProfile({ member }: MemberProfileProps) {
               )}
             </div>
             <Image
-              src="/frame.svg"
+              src="/pixel-art-frame.svg"
               alt="golden pixel art frame around profile picture"
-              width={176}
-              height={192}
-              className="z-0 h-48 w-44"
+              width={200}
+              height={200}
+              className="z-10"
             />
           </div>
           <div className="flex w-4/5 flex-col gap-2 rounded-md p-2.5 font-firaCode">

client/public/frame.svg

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { useGameshowcase } from "@/hooks/useGameshowcase";
+
+export default function LandingGames() {
+  const { data: showcases, isPending, isError, error } = useGameshowcase();
+  if (isPending) {
+    return (
+      <main className="mx-auto min-h-screen max-w-7xl px-6 py-16">
+        <p>Loading games...</p>
+      </main>
+    );
+  }
+
+  if (!showcases || showcases.length === 0) {
+    return (
+      <div>
+        <p> No Games Showcased Yet</p>
+      </div>
+    );
+  }
+
+  if (isError) {
+    const errorMessage =
+      error?.response?.status === 404
+        ? "Games not found."
+        : "Failed to Load Games";
+    return (
+      <div>
+        <p className="text-red-500" role="alert">
+          {errorMessage}
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
+      {showcases.slice(0, 3).map((game) => (
+        <div
+          key={game.game_id}
+          className="rounded-xl p-6 text-background duration-200 ease-in-out hover:scale-110"
+        >
+          <Link key={game.game_id} href={`/games/${game.game_id}`}>
+            <div className="relative aspect-[16/9] w-full overflow-hidden rounded-lg">
+              <Image
+                src={game.gameCover}
+                alt={game.game_name}
+                fill
+                className="object-cover"
+              />
+            </div>
+            <h3 className="mb-2 mt-4 font-jersey10 text-2xl text-white">
+              {game.game_name}
+            </h3>
+
+            <p className="mb-4 truncate text-sm text-primary">
+              {game.game_description}
+            </p>
+            <div className="h-px w-full bg-white/30" />
+          </Link>
+        </div>
+      ))}
+    </div>
+  );
+}

client/public/pixel-art-frame.svg

@@ -118,7 +118,7 @@ export default function AboutPage() {
                 key={`top-${idx}`}
                 className="flex flex-col items-start gap-0"
               >
-                <div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/frame.svg')] bg-contain bg-center bg-no-repeat">
+                <div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
                   <Image
                     src={
                       member.profile_picture === null
@@ -128,7 +128,7 @@ export default function AboutPage() {
                     alt="/landing_placeholder.png"
                     width={108}
                     height={108}
-                    className="mb-2 h-[6.75rem] w-[6.75rem]"
+                    className="h-[7.25rem] w-[6.75rem]"
                   />
                 </div>
                 <div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
@@ -150,7 +150,7 @@ export default function AboutPage() {
                 key={`bottom-${idx}`}
                 className="flex flex-col items-start gap-0"
               >
-                <div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/frame.svg')] bg-contain bg-center bg-no-repeat">
+                <div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
                   <Image
                     src={
                       member.profile_picture === null
@@ -160,7 +160,7 @@ export default function AboutPage() {
                     alt="/landing_placeholder.png"
                     width={108}
                     height={108}
-                    className="mb-2 h-[6.75rem] w-[6.75rem]"
+                    className="h-[7.25rem] w-[6.75rem]"
                   />
                 </div>
                 <div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">