From e5e47ff96e60eb2c85b5ff7847be6d731bac15fc Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 4 Jun 2025 11:17:36 +0200
Subject: [PATCH] feat: improve game grid

---
 .../src/app/feature/home/home.component.html  | 60 ++++++++++++++-----
 frontend/src/styles.css                       |  6 +-
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/feature/home/home.component.html b/frontend/src/app/feature/home/home.component.html
index 54f9e7a..c195acf 100644
--- a/frontend/src/app/feature/home/home.component.html
+++ b/frontend/src/app/feature/home/home.component.html
@@ -18,24 +18,52 @@
       </div>
 
       <div class="slider-container">
-        <div class="slider-grid">
-          <div class="card group" *ngFor="let game of featuredGames">
-            <div class="relative overflow-hidden rounded-lg">
-              <img
-                [src]="game.image"
-                [alt]="game.name"
-                class="w-full aspect-[4/3] object-cover transition-transform duration-300 group-hover:scale-105"
-              />
-              <div
-                class="absolute inset-0 bg-gradient-to-t from-deep-blue/95 via-deep-blue/50 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
-              >
+        <div class="min-w-full space-y-4">
+          <!-- Top row with 3 games -->
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div class="card group" *ngFor="let game of featuredGames.slice(0, 3)">
+              <div class="relative overflow-hidden rounded-lg">
+                <img
+                  [src]="game.image"
+                  [alt]="game.name"
+                  class="w-full aspect-[4/3] object-cover transition-transform duration-300 group-hover:scale-105"
+                />
                 <div
-                  class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"
+                  class="absolute inset-0 bg-gradient-to-t from-deep-blue/95 via-deep-blue/50 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
                 >
-                  <h4 class="game-heading">{{ game.name }}</h4>
-                  <button class="button-primary w-full py-2" (click)="navigateToGame(game.route)">
-                    Jetzt Spielen
-                  </button>
+                  <div
+                    class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"
+                  >
+                    <h4 class="game-heading">{{ game.name }}</h4>
+                    <button class="button-primary w-full py-2" (click)="navigateToGame(game.route)">
+                      Jetzt Spielen
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Bottom row with 2 games centered -->
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-2xl mx-auto xl:max-w-3xl xl:gap-6">
+            <div class="card group" *ngFor="let game of featuredGames.slice(3, 5)">
+              <div class="relative overflow-hidden rounded-lg">
+                <img
+                  [src]="game.image"
+                  [alt]="game.name"
+                  class="w-full aspect-[4/3] object-cover transition-transform duration-300 group-hover:scale-105"
+                />
+                <div
+                  class="absolute inset-0 bg-gradient-to-t from-deep-blue/95 via-deep-blue/50 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
+                >
+                  <div
+                    class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"
+                  >
+                    <h4 class="game-heading">{{ game.name }}</h4>
+                    <button class="button-primary w-full py-2" (click)="navigateToGame(game.route)">
+                      Jetzt Spielen
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 57a0f6a..43d7156 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -52,7 +52,7 @@ a {
 }
 
 .slider-grid {
-  @apply min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
+  @apply min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4;
 }
 
 .welcome-bonus {
@@ -71,6 +71,10 @@ a {
   @apply font-bold text-text-primary text-sm mb-2;
 }
 
+.game-heading {
+  @apply font-bold text-text-primary text-lg mb-2;
+}
+
 .game-heading-xl {
   @apply font-bold text-text-primary text-xl mb-2;
 }