Merge pull request 'feat: adjust landing page styles' (!290) from restyle-landing-page into main

Reviewed-on: #290
Reviewed-by: Jan K9f <jan@kjan.email>

frontend/src/app/feature/landing/landing.component.html

@@ -21,13 +21,7 @@
               (click)="showRegisterForm()"
               class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
             >
-              Konto erstellen
-            </button>
-            <button
-              (click)="showLoginForm()"
-              class="w-full sm:w-auto bg-slate-700 text-white hover:bg-slate-600 px-6 sm:px-8 py-3 shadow-lg rounded"
-            >
-              Anmelden
+              Jetzt registrieren
             </button>
           }
         </div>
@@ -46,33 +40,63 @@
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Slots</h3>
                     <p class="game-text">Klassische Spielautomaten</p>
-                    <a
-                      routerLink="game/slots"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/slots"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Blackjack</h3>
                     <p class="game-text">Klassisches Kartenspiel</p>
-                    <a
-                      routerLink="game/blackjack"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/blackjack"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Coinflip</h3>
                     <p class="game-text">Münzwurf</p>
-                    <a
-                      routerLink="game/blackjack"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/coinflip"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
               </div>
@@ -82,22 +106,42 @@
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Dice</h3>
                     <p class="game-text">Würfelspiel</p>
-                    <a
-                      routerLink="/game/dice"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/dice"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Lootboxen</h3>
                     <p class="game-text">Überraschungskisten</p>
-                    <a
-                      routerLink="game/lootboxes"
-                      class="button-primary w-full py-2 inline-block text-center"
-                      >Jetzt Spielen</a
-                    >
+                    @if (isLoggedIn()) {
+                      <a
+                        routerLink="game/lootboxes"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </a>
+                    } @else {
+                      <button
+                        (click)="showLoginForm()"
+                        class="button-primary w-full py-2 inline-block text-center"
+                      >
+                        Jetzt Spielen
+                      </button>
+                    }
                   </div>
                 </div>
               </div>

frontend/src/app/feature/landing/landing.component.ts

@@ -23,15 +23,14 @@ import RecoverPasswordComponent from '../auth/recover-password/recover-password.
 })
 export class LandingComponent implements OnInit, OnDestroy {
   currentSlide = 0;
-  private autoplayInterval: ReturnType<typeof setInterval> | undefined;
   authService: AuthService = inject(AuthService);
   route: ActivatedRoute = inject(ActivatedRoute);
   showLogin = signal(false);
   showRegister = signal(false);
   showRecoverPassword = signal(false);
+  isLoggedIn = signal(this.authService.isLoggedIn());
 
   ngOnInit() {
-    this.startAutoplay();
     document.body.style.overflow = 'auto';
     if (this.route.snapshot.queryParamMap.get('login') === 'true') {
       this.showLoginForm();
@@ -39,7 +38,6 @@ export class LandingComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.stopAutoplay();
     document.body.style.overflow = 'auto';
   }
 
@@ -73,33 +71,13 @@ export class LandingComponent implements OnInit, OnDestroy {
 
   prevSlide() {
     this.currentSlide = this.currentSlide === 0 ? 1 : 0;
-    this.resetAutoplay();
   }
 
   nextSlide() {
     this.currentSlide = this.currentSlide === 1 ? 0 : 1;
-    this.resetAutoplay();
   }
 
   goToSlide(index: number) {
     this.currentSlide = index;
-    this.resetAutoplay();
-  }
-
-  private startAutoplay() {
-    this.autoplayInterval = setInterval(() => {
-      this.nextSlide();
-    }, 5000);
-  }
-
-  private stopAutoplay() {
-    if (this.autoplayInterval) {
-      clearInterval(this.autoplayInterval);
-    }
-  }
-
-  private resetAutoplay() {
-    this.stopAutoplay();
-    this.startAutoplay();
   }
 }

frontend/src/app/shared/components/navbar/navbar.component.html

@@ -10,13 +10,23 @@
         </a>
 
         <div class="hidden md:flex items-center space-x-1">
-          <a
-            routerLink="/home"
-            class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
-          >
-            <img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
-            Spiele
-          </a>
+          @if (isLoggedIn()) {
+            <a
+              routerLink="/home"
+              class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
+            >
+              <img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
+              Spiele
+            </a>
+          } @else {
+            <button
+              (click)="showLogin.emit()"
+              class="flex items-center px-4 py-2 text-white/90 hover:text-white font-medium rounded-lg hover:bg-white/10 transition-colors duration-200"
+            >
+              <img class="mr-2 w-4 h-4" src="assets/games.svg" alt="gamess" />
+              Spiele
+            </button>
+          }
         </div>
       </div>
 
@@ -40,15 +50,7 @@
             (click)="showRegister.emit()"
             class="flex items-center px-4 py-2 bg-emerald-600 text-white font-medium rounded-lg hover:bg-emerald-500 transition-colors duration-200"
           >
-            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
-              />
-            </svg>
-            Registrieren
+            Jetzt registrieren
           </button>
         }
 

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-4 gap-4;
+  @apply min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
 }
 
 .welcome-bonus {