refactor(landing): restructure landing page components and templates

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

@@ -7,7 +7,6 @@ import { environment } from '../../../environments/environment';
 import { NgIf } from '@angular/common';
 import {
   MatDialogActions,
-  MatDialogClose,
   MatDialogContent,
   MatDialogRef,
   MatDialogTitle,
@@ -23,7 +22,6 @@ import { MatButton } from '@angular/material/button';
     MatDialogTitle,
     MatDialogContent,
     MatDialogActions,
-    MatDialogClose,
     MatButton,
   ],
   templateUrl: './deposit.component.html',

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

@@ -8,7 +8,7 @@ import { NavbarComponent } from '../../shared/components/navbar/navbar.component
   selector: 'app-homepage',
   standalone: true,
   imports: [NavbarComponent],
-  templateUrl: './homepage.component.html',
+  templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {

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

@@ -1,5 +1,142 @@
-@if (isLoggedIn) {
-  <button routerLink="/home">Zur Homepage</button>
-} @else {
-  <button (click)="login()">Einloggen</button>
-}
+<app-navbar></app-navbar>
+
+<div class="min-h-screen bg-deep-blue text-text-primary">
+  <div class="container mx-auto px-4 py-8 sm:py-12">
+    <div class="max-w-5xl mx-auto">
+      <div class="text-center mb-12 sm:mb-16">
+        <h1 class="text-3xl sm:text-4xl lg:text-5xl section-heading mb-2 sm:mb-3">
+          Willkommensbonus
+        </h1>
+        <div class="welcome-bonus">200% bis zu 500€</div>
+        <p class="bonus-description">+ 200 Freispiele</p>
+
+        <button class="w-full sm:w-auto button-base px-6 sm:px-8 py-3 shadow-lg">
+          Bonus Sichern
+        </button>
+      </div>
+
+      <div class="relative mb-16">
+        <h2 class="text-xl sm:text-2xl section-heading mb-4 sm:mb-6">Beliebte Spiele</h2>
+        <div class="relative group">
+          <div class="overflow-hidden rounded-lg">
+            <div
+              class="slider-container"
+              [style.transform]="'translateX(-' + currentSlide * 100 + '%)'"
+            >
+              <div class="slider-grid">
+                <div class="card">
+                  <div class="game-card-content">
+                    <h3 class="game-heading">Slots</h3>
+                    <p class="game-text">Klassische Spielautomaten</p>
+                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  </div>
+                </div>
+                <div class="card">
+                  <div class="game-card-content">
+                    <h3 class="game-heading">Plinko</h3>
+                    <p class="game-text">Spannendes Geschicklichkeitsspiel</p>
+                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  </div>
+                </div>
+                <div class="hidden lg:block card">
+                  <div class="game-card-content">
+                    <h3 class="game-heading">Blackjack</h3>
+                    <p class="game-text">Klassisches Kartenspiel</p>
+                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="slider-grid">
+                <div class="card">
+                  <div class="game-card-content">
+                    <h3 class="game-heading">Poker</h3>
+                    <p class="game-text">Texas Hold'em & mehr</p>
+                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  </div>
+                </div>
+                <div class="card">
+                  <div class="game-card-content">
+                    <h3 class="game-heading">Liars Dice</h3>
+                    <p class="game-text">Würfelspiel mit Strategie</p>
+                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  </div>
+                </div>
+                <div class="hidden lg:block card">
+                  <div class="game-card-content">
+                    <h3 class="game-heading">Lootboxen</h3>
+                    <p class="game-text">Überraschungskisten</p>
+                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <button class="nav-button left-[-4rem]" (click)="prevSlide()">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+          </button>
+          <button class="nav-button right-[-4rem]" (click)="nextSlide()">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+
+          <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
+            <button
+              *ngFor="let _ of [0, 1]; let i = index"
+              [class]="
+                'w-2 h-2 rounded-full transition-all duration-300 ' +
+                (currentSlide === i ? 'bg-emerald w-4' : 'bg-text-tertiary')
+              "
+              (click)="goToSlide(i)"
+            >
+              <span class="sr-only">Slide {{ i + 1 }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
+        <div class="stat-container">
+          <div class="stat-number">50 Mio.€+</div>
+          <div class="stat-text">Ausgezahlt</div>
+        </div>
+
+        <div class="stat-container">
+          <div class="stat-number">10 Mio.+</div>
+          <div class="stat-text">Spiele</div>
+        </div>
+
+        <div class="stat-container">
+          <div class="stat-number">24/7</div>
+          <div class="stat-text">Support <span class="text-emerald text-xs">*</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -1,22 +1,55 @@
-import { Component, inject } from '@angular/core';
-import { KeycloakService } from 'keycloak-angular';
-import { RouterLink } from '@angular/router';
+import { ChangeDetectionStrategy, Component, OnInit, OnDestroy } from '@angular/core';
+import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
+import { NgFor } from '@angular/common';
 
 @Component({
-  selector: 'app-landing',
+  selector: 'app-landing-page',
   standalone: true,
-  imports: [RouterLink],
+  imports: [NavbarComponent, NgFor],
   templateUrl: './landing.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LandingComponent {
-  private keycloakService: KeycloakService = inject(KeycloakService);
+export class LandingComponent implements OnInit, OnDestroy {
+  currentSlide = 0;
+  private autoplayInterval: ReturnType<typeof setInterval> | undefined;
 
-  public isLoggedIn = this.keycloakService.isLoggedIn();
+  ngOnInit() {
+    this.startAutoplay();
+  }
 
-  public login() {
-    const baseUrl = window.location.origin;
+  ngOnDestroy() {
+    this.stopAutoplay();
+  }
 
-    this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
+  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();
   }
 }
-export class LandingPageComponent {}

frontend/src/app/landing-page/landing-page.component.html

@@ -1,140 +0,0 @@
-<app-navbar></app-navbar>
-
-<div class="min-h-screen bg-deep-blue text-text-primary">
-  <div class="container mx-auto px-4 py-8 sm:py-12">
-    <div class="max-w-5xl mx-auto">
-      <div class="text-center mb-12 sm:mb-16">
-        <h1 class="text-3xl sm:text-4xl lg:text-5xl section-heading mb-2 sm:mb-3">
-          Willkommensbonus
-        </h1>
-        <div class="welcome-bonus">200% bis zu 500€</div>
-        <p class="bonus-description">+ 200 Freispiele</p>
-
-        <button class="w-full sm:w-auto button-base px-6 sm:px-8 py-3 shadow-lg">
-          Bonus Sichern
-        </button>
-      </div>
-
-      <div class="relative mb-16">
-        <h2 class="text-xl sm:text-2xl section-heading mb-4 sm:mb-6">Beliebte Spiele</h2>
-        <div class="relative group">
-          <div class="overflow-hidden rounded-lg">
-            <div
-              class="slider-container"
-              [style.transform]="'translateX(-' + currentSlide * 100 + '%)'"
-            >
-              <div class="slider-grid">
-                <div class="card">
-                  <div class="game-card-content">
-                    <h3 class="game-heading">Slots</h3>
-                    <p class="game-text">Klassische Spielautomaten</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
-                  </div>
-                </div>
-                <div class="card">
-                  <div class="game-card-content">
-                    <h3 class="game-heading">Plinko</h3>
-                    <p class="game-text">Spannendes Geschicklichkeitsspiel</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
-                  </div>
-                </div>
-                <div class="hidden lg:block card">
-                  <div class="game-card-content">
-                    <h3 class="game-heading">Blackjack</h3>
-                    <p class="game-text">Klassisches Kartenspiel</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
-                  </div>
-                </div>
-              </div>
-
-              <div class="slider-grid">
-                <div class="card">
-                  <div class="game-card-content">
-                    <h3 class="game-heading">Poker</h3>
-                    <p class="game-text">Texas Hold'em & mehr</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
-                  </div>
-                </div>
-                <div class="card">
-                  <div class="game-card-content">
-                    <h3 class="game-heading">Liars Dice</h3>
-                    <p class="game-text">Würfelspiel mit Strategie</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
-                  </div>
-                </div>
-                <div class="hidden lg:block card">
-                  <div class="game-card-content">
-                    <h3 class="game-heading">Lootboxen</h3>
-                    <p class="game-text">Überraschungskisten</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <button class="nav-button left-[-4rem]" (click)="prevSlide()">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M15 19l-7-7 7-7"
-              />
-            </svg>
-          </button>
-          <button class="nav-button right-[-4rem]" (click)="nextSlide()">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </button>
-
-          <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
-            <button
-              *ngFor="let _ of [0, 1]; let i = index"
-              [class]="
-                'w-2 h-2 rounded-full transition-all duration-300 ' +
-                (currentSlide === i ? 'bg-emerald w-4' : 'bg-text-tertiary')
-              "
-              (click)="goToSlide(i)"
-            ></button>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
-        <div class="stat-container">
-          <div class="stat-number">50 Mio.€+</div>
-          <div class="stat-text">Ausgezahlt</div>
-        </div>
-
-        <div class="stat-container">
-          <div class="stat-number">10 Mio.+</div>
-          <div class="stat-text">Spiele</div>
-        </div>
-
-        <div class="stat-container">
-          <div class="stat-number">24/7</div>
-          <div class="stat-text">Support <span class="text-emerald text-xs">*</span></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

frontend/src/app/landing-page/landing-page.component.ts

@@ -1,55 +0,0 @@
-import { ChangeDetectionStrategy, Component, OnInit, OnDestroy } from '@angular/core';
-import { NavbarComponent } from '../shared/components/navbar/navbar.component';
-import { NgFor } from '@angular/common';
-
-@Component({
-  selector: 'app-landing-page',
-  standalone: true,
-  imports: [NavbarComponent, NgFor],
-  templateUrl: './landing-page.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LandingPageComponent implements OnInit, OnDestroy {
-  currentSlide = 0;
-  private autoplayInterval: any;
-
-  ngOnInit() {
-    this.startAutoplay();
-  }
-
-  ngOnDestroy() {
-    this.stopAutoplay();
-  }
-
-  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/styles.css

@@ -18,8 +18,12 @@
   --color-accent-purple: #8b5cf6;
 }
 
+* {
+  @apply !font-sans;
+}
+
 body {
-  @apply bg-deep-blue text-text-primary;
+  @apply bg-deep-blue text-text-primary h-full;
 }
 
 button,
@@ -135,19 +139,9 @@ a {
   @apply text-xs;
 }
 
-html,
-body {
-  height: 100%;
-}
-body {
-  margin: 0;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
-}
-
 .mat-mdc-dialog-container {
   --mdc-dialog-container-color: var(--color-deep-blue-light) !important;
-  --mdc-dialog-subhead-color: #ffffff !important;
-  --mdc-dialog-supporting-text-color: #9ca3af !important;
+  --mdc-dialog-subhead-color: var(--color-text-primary) !important;
+  --mdc-dialog-supporting-text-color: var(--color-text-secondary) !important;
   --mdc-dialog-container-shape: 6px !important;
 }
-