Showcase page is now responsive with some adjustments to gaps and layout to suit mobile devices.

Author: nicostellar

client/src/pages/games/index.tsx

@@ -48,17 +48,17 @@ export default function HomePage() {
           Game Showcase
         </h1>
       </div>
-      <main className="mx-auto min-h-screen max-w-7xl px-6 py-16">
+      <main className="mx-auto min-h-screen max-w-7xl px-6 py-6 lg:py-16">
         {!showcases || showcases.length === 0 ? (
           <p>No games available.</p>
         ) : (
-          <div className="flex flex-col gap-32">
+          <div className="flex flex-col gap-12 lg:gap-32">
             {showcases.map((showcase, idx) => (
               <React.Fragment key={showcase.game_name + idx}>
-                <div className="flex flex-col gap-8">
+                <div className="flex flex-col lg:gap-8">
                   {/* Game CoverImage + Gameshowcase Detail */}
                   <div
-                    className={`flex flex-col gap-8 rounded-xl p-8 ${idx % 2 === 0 ? "lg:flex-row" : "lg:flex-row-reverse"}`}
+                    className={`flex flex-col gap-8 rounded-xl p-4 lg:p-8 ${idx % 2 === 0 ? "lg:flex-row" : "lg:flex-row-reverse"}`}
                   >
                     {/* Left: Cover Image */}
                     <div className="bg-logo-blue-1 flex min-h-48 w-full items-center justify-center overflow-hidden rounded-xl lg:w-auto lg:grow-[4] lg:basis-0">
@@ -83,7 +83,7 @@ export default function HomePage() {
                       )}
                     </div>
                     {/* Right: Details */}
-                    <div className="flex flex-col rounded-lg border-2 border-solid border-neutral_3 p-8 shadow-lg lg:grow-[3] lg:basis-0">
+                    <div className="flex flex-col rounded-lg border-2 border-solid border-neutral_3 p-4 shadow-lg lg:grow-[3] lg:basis-0 lg:p-8">
                       <div>
                         {/* Title of the game */}
                         <h2 className="mb-4 font-jersey10 text-3xl font-bold tracking-wide text-primary">
@@ -100,7 +100,7 @@ export default function HomePage() {
                           </Link>
                         </h2>
                         {/* Comments from committes */}
-                        <p className="relative mb-6 pl-10 pr-10 text-lg text-foreground">
+                        <p className="relative mb-6 pl-10 pr-10 text-base text-foreground md:text-lg">
                           {/* double quotes from comments */}
                           <span
                             className="absolute left-0 top-0 select-none text-4xl text-primary"
@@ -126,17 +126,19 @@ export default function HomePage() {
                           {showcase.contributors.map((contributor, cidx) => (
                             <li
                               key={contributor.name + cidx}
-                              className="mb-2 flex items-center gap-4"
+                              className="mb-6 flex flex-col items-center gap-2 md:mb-2 md:flex-row md:gap-4"
                             >
-                              <span className="font-semibold text-foreground">
-                                {contributor.name}
-                              </span>
-                              <span className="text-muted-foreground">
-                                {contributor.role}
-                              </span>
+                              <div className="flex flex-row gap-2">
+                                <span className="font-semibold text-foreground">
+                                  {contributor.name}
+                                </span>
+                                <span className="text-muted-foreground">
+                                  {contributor.role}
+                                </span>
+                              </div>
                               {/* Social icons placeholder */}
                               {/* TODO: Add actual links */}
-                              <span className="ml-auto flex gap-2 text-primary">
+                              <span className="flex gap-2 text-primary md:ml-auto">
                                 {/* Social icons using react-social-icons */}
                                 <SocialIcon
                                   url="https://facebook.com/"