feat(landing-page): add welcome bonus and game carousel

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

@@ -1,2 +1,127 @@
 <app-navbar></app-navbar>
-<button (click)="login()">Einloggen</button>
+
+<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 font-bold mb-2 sm:mb-3 text-text-primary">
+                    Willkommensbonus
+                </h1>
+                <div class="text-4xl sm:text-5xl lg:text-7xl font-extrabold text-emerald-light mb-3 sm:mb-4">
+                    200% bis zu 500€
+                </div>
+                <p class="text-text-secondary text-base sm:text-lg mb-6 sm:mb-8">
+                    + 200 Freispiele
+                </p>
+
+                <button class="w-full sm:w-auto bg-emerald hover:bg-emerald-dark text-text-primary font-bold px-6 sm:px-8 py-3 rounded transition-all duration-300 active:scale-95 shadow-lg">
+                    Bonus Sichern
+                </button>
+            </div>
+
+            <div class="relative mb-16">
+                <h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-text-primary">Beliebte Spiele</h2>
+                <div class="relative group">
+                    <div class="overflow-hidden rounded-lg">
+                        <div class="flex transition-transform duration-500 ease-out" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
+                            <div class="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                                <div class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                                    <div class="p-4">
+                                        <h3 class="font-bold mb-2 text-text-primary">Slots</h3>
+                                        <p class="text-text-secondary text-sm mb-4">Klassische Spielautomaten</p>
+                                        <button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
+                                            Jetzt Spielen
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                                    <div class="p-4">
+                                        <h3 class="font-bold mb-2 text-text-primary">Plinko</h3>
+                                        <p class="text-text-secondary text-sm mb-4">Spannendes Geschicklichkeitsspiel</p>
+                                        <button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
+                                            Jetzt Spielen
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="hidden lg:block bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                                    <div class="p-4">
+                                        <h3 class="font-bold mb-2 text-text-primary">Blackjack</h3>
+                                        <p class="text-text-secondary text-sm mb-4">Klassisches Kartenspiel</p>
+                                        <button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
+                                            Jetzt Spielen
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                                <div class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                                    <div class="p-4">
+                                        <h3 class="font-bold mb-2 text-text-primary">Poker</h3>
+                                        <p class="text-text-secondary text-sm mb-4">Texas Hold'em & mehr</p>
+                                        <button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
+                                            Jetzt Spielen
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                                    <div class="p-4">
+                                        <h3 class="font-bold mb-2 text-text-primary">Liars Dice</h3>
+                                        <p class="text-text-secondary text-sm mb-4">Würfelspiel mit Strategie</p>
+                                        <button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
+                                            Jetzt Spielen
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="hidden lg:block bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                                    <div class="p-4">
+                                        <h3 class="font-bold mb-2 text-text-primary">Lootboxen</h3>
+                                        <p class="text-text-secondary text-sm mb-4">Überraschungskisten</p>
+                                        <button class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95">
+                                            Jetzt Spielen
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button class="hidden lg:block absolute left-[-4rem] top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110" (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="hidden lg:block absolute right-[-4rem] top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110" (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="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
+                    <div class="text-xl sm:text-2xl font-bold text-emerald">50 Mio.€+</div>
+                    <div class="text-text-secondary text-sm">Ausgezahlt</div>
+                </div>
+
+                <div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
+                    <div class="text-xl sm:text-2xl font-bold text-emerald">10 Mio.+</div>
+                    <div class="text-text-secondary text-sm">Spiele</div>
+                </div>
+
+                <div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
+                    <div class="text-xl sm:text-2xl font-bold text-emerald">24/7</div>
+                    <div class="text-text-secondary text-sm">Support <span class="text-emerald text-xs">*</span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -1,10 +1,55 @@
-import { Component } from '@angular/core';
+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],
+  imports: [NavbarComponent, NgFor],
   templateUrl: './landing-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LandingPageComponent {}
+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/app/shared/components/footer/footer.component.html

@@ -1,4 +1,4 @@
-<footer class="bg-deep-blue-contrast mt-auto">
+<footer class="bg-deep-blue mt-auto">
   <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
     <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
       <div class="col-span-2 md:col-span-1">
@@ -106,6 +106,10 @@
     <div class="mt-12 pt-8 border-t border-deep-blue-light">
       <div class="flex flex-col md:flex-row justify-between items-center">
         <div class="text-gray-400 text-sm mb-4 md:mb-0">
+          <span class="text-xs">
+            <span class="text-emerald">*</span> nicht vorhanden.
+          </span>
+          <br>
           © {{ currentYear }} Trustworthy Casino. Keine Rechte vorbehalten.
         </div>
       </div>

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

@@ -1,4 +1,3 @@
-import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
@@ -7,7 +6,7 @@ import { KeycloakService } from 'keycloak-angular';
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   standalone: true,
-  imports: [RouterModule, AsyncPipe],
+  imports: [RouterModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavbarComponent {

frontend/src/styles.css

@@ -1,16 +1,30 @@
 @import 'tailwindcss';
 
 @theme {
-  --color-deep-blue: #0f212e;
+  --color-deep-blue: #0a1219;
-  --color-deep-blue-light: #1a2c38;
+  --color-deep-blue-light: #121e27;
-  --color-deep-blue-contrast: #1b2c3b;
+  --color-deep-blue-contrast: #1a2835;
-  --color-light-blue: #1475e1;
+
+  --color-emerald: #10b981;
+  --color-emerald-dark: #059669;
+  --color-emerald-light: #34d399;
+
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #94a3b8;
+  --color-text-tertiary: #64748b;
+
+  --color-accent-yellow: #fbbf24;
+  --color-accent-red: #ef4444;
+  --color-accent-purple: #8b5cf6;
 }
 
 body {
-  @apply bg-deep-blue text-gray-100;
+  @apply bg-deep-blue text-text-primary;
 }
 
+button, a {
+  @apply cursor-pointer active:scale-95 transition-all duration-200;
+}
 html,
 body {
   height: 100%;