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

<div class="min-h-screen bg-deep-blue text-text-primary relative">
  <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">von bis zu €100</div>
        <p class="bonus-description">Fangen Sie an, zu gewinnen!</p>

        <div class="flex justify-center space-x-4 mt-6">
          @if (authService.isLoggedIn()) {
            <a
              routerLink="/home"
              class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
            >
              Spiele
            </a>
          } @else {
            <button
              (click)="showRegisterForm()"
              class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
            >
              Jetzt registrieren
            </button>
          }
        </div>
      </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-sm">Slots</h3>
                    <p class="game-text">Klassische Spielautomaten</p>
                    @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>
                    @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>
                    @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>

              <div class="slider-grid">
                <div class="card">
                  <div class="game-card-content">
                    <h3 class="game-heading-sm">Dice</h3>
                    <p class="game-text">Würfelspiel</p>
                    @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>
                    @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>
            </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"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <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"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <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</div>
        </div>
      </div>
    </div>
  </div>

  @if (showLogin() || showRegister() || showRecoverPassword()) {
    <div
      class="fixed inset-0 bg-black/50 z-40"
      (click)="hideAuthForms()"
      (keydown.enter)="hideAuthForms()"
      tabindex="0"
      role="dialog"
      aria-modal="true"
    ></div>
    <div class="fixed inset-0 flex items-center justify-center z-50 p-4" role="presentation">
      <div class="relative" role="dialog" aria-modal="true">
        @if (showLogin()) {
          <app-login
            (forgotPassword)="showRecoverPasswordForm()"
            (switchForm)="showRegisterForm()"
            (closeDialog)="hideAuthForms()"
          ></app-login>
        }
        @if (showRegister()) {
          <app-register
            (switchForm)="showLoginForm()"
            (closeDialog)="hideAuthForms()"
          ></app-register>
        }
        @if (showRecoverPassword()) {
          <app-recover-password
            (closeDialog)="hideAuthForms()"
            (switchToLogin)="showLoginForm()"
          ></app-recover-password>
        }
      </div>
    </div>
  }
</div>