feat(landing): add landing component with animations and services

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

@@ -0,0 +1,481 @@
+<div class="min-h-screen bg-gradient-to-br from-slate-950 via-black to-slate-950 relative">
+  <div class="fixed top-0 left-0 right-0 z-50 transform-gpu">
+    <div
+      class="bg-gradient-to-r from-emerald-600 to-emerald-500 text-white transition-all duration-500 ease-in-out"
+      [class.py-1]="isScrolled"
+      [class.py-1.5]="!isScrolled"
+    >
+      <div class="container mx-auto px-4 overflow-hidden">
+        <div #winnersMarquee class="flex items-center gap-12 animate-marquee will-change-transform">
+          <span
+            *ngFor="let winner of recentWinners$ | async"
+            class="flex items-center gap-3 whitespace-nowrap"
+          >
+            <span class="text-yellow-300 text-lg animate-pulseGlow will-change-transform">🎰</span>
+            <span class="font-medium">
+              {{ winner.name }}
+              <span class="text-yellow-300 font-semibold">{{ winner.isVIP ? '(VIP)' : '' }}</span>
+              won <span class="text-yellow-300 font-semibold">€{{ winner.amount | number }}</span>
+              <span class="text-yellow-300">({{ winner.multiplier }}x)</span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <nav
+      class="w-full transition-all duration-500 ease-in-out transform-gpu will-change-transform"
+      [ngClass]="{
+        'bg-black/80 backdrop-blur-xl border-b border-white/5 py-3': isScrolled,
+        'bg-transparent py-4': !isScrolled,
+      }"
+    >
+      <div class="container mx-auto px-6">
+        <div
+          class="flex justify-between items-center transition-all duration-500 ease-in-out transform-gpu"
+        >
+          <div class="flex items-center gap-6">
+            <div
+              class="text-3xl font-black tracking-tight bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer will-change-transform"
+            >
+              TRUSTWORTHY
+            </div>
+            <div
+              class="px-3 py-1 bg-emerald-500/10 rounded-full border border-emerald-500/20 transition-all duration-300 hover:bg-emerald-500/20"
+            >
+              <span class="text-emerald-400 text-sm font-medium">Licensed & Regulated</span>
+            </div>
+          </div>
+          <div class="flex gap-8 items-center">
+            <div class="flex flex-col items-end">
+              <div class="animate-pulseGlow will-change-transform">
+                <span class="text-emerald-400 font-bold"
+                  >🔥 {{ onlinePlayers$ | async | number }} Players Online</span
+                >
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-white/60 text-sm"
+                  >{{ totalWinnersToday | number }} Winners Today</span
+                >
+                <span class="text-emerald-500 text-xs font-semibold">(78.9% Win Rate)</span>
+              </div>
+            </div>
+            <button
+              (click)="claimBonus(); onButtonClick($event)"
+              class="relative group px-8 py-3 bg-gradient-to-r from-emerald-500 to-emerald-400 text-black font-bold rounded-full transition-all duration-300 ease-out transform-gpu hover:scale-105 hover:shadow-xl hover:shadow-emerald-500/20 will-change-transform"
+            >
+              <div
+                class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500 ease-in-out"
+              ></div>
+              <span class="relative text-sm tracking-wide">START PLAYING</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+
+  <div class="h-[100px] transition-all duration-500 ease-in-out"></div>
+
+  <div class="relative overflow-hidden">
+    <div #particleContainer class="absolute inset-0 pointer-events-none"></div>
+
+    <div
+      class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(76,29,149,0.1),rgba(0,0,0,0))] animate-[pulse_4s_ease-in-out_infinite]"
+    >
+      <div class="absolute inset-0">
+        <div class="absolute opacity-20 animate-float" style="top: 10%; left: 5%">🎰</div>
+        <div class="absolute opacity-20 animate-float delay-100" style="top: 30%; left: 15%">
+          💎
+        </div>
+        <div class="absolute opacity-20 animate-float delay-200" style="top: 50%; left: 25%">
+          7️⃣
+        </div>
+        <div class="absolute opacity-20 animate-float delay-300" style="top: 70%; left: 35%">
+          🃏
+        </div>
+        <div class="absolute opacity-20 animate-float delay-400" style="top: 20%; right: 15%">
+          💰
+        </div>
+        <div class="absolute opacity-20 animate-float delay-500" style="top: 40%; right: 25%">
+          🎲
+        </div>
+        <div class="absolute opacity-20 animate-float" style="top: 60%; right: 35%">👑</div>
+      </div>
+    </div>
+
+    <div #heroSection class="relative z-10">
+      <div class="container mx-auto px-6 pt-16">
+        <div class="text-center mb-12">
+          <div
+            class="inline-block bg-black/40 backdrop-blur-xl rounded-2xl px-10 py-6 border border-white/5 animate-tiltAndGlow"
+          >
+            <div class="text-lg text-white/80 mb-3 font-medium">🏆 MEGA JACKPOT GROWING</div>
+            <div class="flex items-center justify-center gap-2">
+              <span
+                #jackpotCounter
+                class="text-6xl font-bold text-white tracking-tight animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.3)]"
+              >
+                €{{ currentJackpot$ | async | number }}
+              </span>
+              <span class="text-emerald-500 text-lg animate-bounce">↑</span>
+            </div>
+            <div class="text-sm text-white/60 mt-3 font-medium">Must drop before €2,000,000</div>
+          </div>
+        </div>
+
+        <div class="text-center mb-20 relative max-w-4xl mx-auto">
+          <div
+            class="absolute -inset-1 bg-gradient-to-r from-emerald-600/20 via-emerald-500/20 to-emerald-600/20 rounded-2xl blur-2xl animate-morphBackground"
+          ></div>
+          <div class="relative bg-black/40 backdrop-blur-xl p-10 rounded-2xl border border-white/5">
+            <div
+              class="inline-block px-4 py-1.5 bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full text-black text-sm mb-6 font-bold tracking-wide animate-pulseGlow"
+            >
+              EXCLUSIVE VIP OFFER
+            </div>
+            <h1 class="text-7xl font-black text-white tracking-tight mb-8">
+              <div class="text-3xl text-white/80 mb-4 font-bold">START WITH</div>
+              <div
+                class="text-8xl bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer"
+              >
+                €10,000
+              </div>
+              <div class="text-2xl text-emerald-400 mt-4 font-bold">GUARANTEED WINNINGS*</div>
+            </h1>
+
+            <div class="mb-10">
+              <div class="text-4xl font-bold text-white mb-3 tracking-tight">
+                1000% FIRST DEPOSIT MATCH
+                <div class="text-xl text-yellow-400 mt-2">+ 1000 FREE SPINS</div>
+              </div>
+              <div
+                class="text-lg text-red-400 font-semibold animate-pulseGlow drop-shadow-[0_0_8px_rgba(239,68,68,0.3)]"
+              >
+                <span>⚠️ Offer expires in: {{ timeLeft$ | async }}</span>
+              </div>
+            </div>
+
+            <div class="flex justify-center">
+              <button
+                (click)="claimBonus(); onButtonClick($event)"
+                class="group relative px-12 py-5 bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-2xl hover:shadow-emerald-500/20"
+              >
+                <div
+                  class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500"
+                ></div>
+                <span class="relative text-2xl font-bold text-black tracking-wide"
+                  >CLAIM YOUR €10,000 NOW</span
+                >
+              </button>
+            </div>
+
+            <div class="flex justify-center gap-12 mt-10">
+              <div class="flex items-center gap-2">
+                <span class="text-emerald-500">✓</span>
+                <span class="text-white/60 font-medium">Instant Withdrawals</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-emerald-500">✓</span>
+                <span class="text-white/60 font-medium">24/7 VIP Support</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-emerald-500">✓</span>
+                <span class="text-white/60 font-medium">100% Win Guarantee*</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="bg-black/40 backdrop-blur-xl rounded-xl p-4 mb-16 overflow-hidden border border-white/5"
+        >
+          <div class="flex items-center gap-8">
+            <div class="flex-none animate-marquee">
+              <span *ngFor="let winner of recentWinners$ | async" class="mx-6 whitespace-nowrap">
+                <span
+                  [class.animate-pulseGlow]="winner.isVIP"
+                  [class.drop-shadow-[0_0_8px_rgba(234,179,8,0.3)]]="winner.isVIP"
+                  class="text-white/80 font-medium"
+                >
+                  🎰 {{ winner.name }}
+                  <span class="text-yellow-400 font-semibold">{{
+                    winner.isVIP ? '(VIP)' : ''
+                  }}</span>
+                  turned <span class="text-emerald-400">€{{ winner.betAmount }}</span> into
+                  <span class="text-emerald-400 font-bold">€{{ winner.amount | number }}</span>
+                  <span class="text-yellow-400">({{ winner.multiplier }}x)</span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div #gamesGrid class="mb-20">
+          <h2 class="text-4xl font-black text-white mb-12 text-center tracking-tight">
+            <span
+              class="bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer"
+            >
+              TOP WINNING GAMES
+            </span>
+          </h2>
+          <div class="grid md:grid-cols-3 gap-8">
+            <div
+              *ngFor="let game of games$ | async"
+              class="game-card group relative overflow-hidden rounded-2xl cursor-pointer bg-black/40 backdrop-blur-xl border border-white/5 transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-500/10"
+              (mouseenter)="onGameCardHover($event)"
+            >
+              <div
+                class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-emerald-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+              ></div>
+              <img
+                [src]="game.imageUrl"
+                [alt]="game.name"
+                class="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-110"
+              />
+              <div class="absolute inset-0 bg-gradient-to-t from-black via-black/80 to-transparent">
+                <div class="absolute bottom-0 left-0 right-0 p-8">
+                  <div class="flex justify-between items-start mb-4">
+                    <h3 class="text-2xl font-bold text-white tracking-tight">{{ game.name }}</h3>
+                    <div class="flex flex-col items-end gap-2">
+                      <span
+                        class="bg-emerald-500/20 text-emerald-400 text-sm px-3 py-1 rounded-full font-medium animate-pulseGlow"
+                        >HOT 🔥</span
+                      >
+                      <span class="text-yellow-400 text-sm"
+                        >{{ game.lastWinner }} won €{{ game.lastWin | number }}</span
+                      >
+                    </div>
+                  </div>
+                  <p class="text-white/60 mb-6 font-medium">{{ game.description }}</p>
+                  <div class="space-y-4">
+                    <div class="flex justify-between items-center">
+                      <span
+                        class="text-emerald-400 font-bold animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.2)]"
+                      >
+                        {{ game.winChance }}% Win Rate
+                      </span>
+                      <span class="text-yellow-400 font-medium"
+                        >Max Win: €{{ game.maxWin | number }}</span
+                      >
+                    </div>
+                    <div class="flex justify-between items-center">
+                      <span class="text-sm text-white/60"
+                        >Min: €{{ game.minBet }} | Max: €{{ game.maxBet }}</span
+                      >
+                      <div class="flex items-center gap-2">
+                        <span class="text-xs text-white/60">Popularity:</span>
+                        <div class="w-24 h-1.5 bg-white/5 rounded-full overflow-hidden">
+                          <div
+                            class="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 transition-all duration-500"
+                            [style.width]="game.popularity + '%'"
+                          ></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex justify-between items-center pt-2">
+                      <div class="flex gap-2">
+                        <span
+                          *ngFor="let feature of game.features"
+                          class="text-xs px-3 py-1 rounded-full bg-white/5 text-white/60 font-medium"
+                        >
+                          {{ feature }}
+                        </span>
+                      </div>
+                      <button
+                        (click)="playNow(game.id); onButtonClick($event)"
+                        class="px-6 py-2.5 bg-gradient-to-r from-emerald-500 to-emerald-400 text-black font-bold rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-emerald-500/20 text-sm tracking-wide"
+                      >
+                        PLAY NOW
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid md:grid-cols-4 gap-8 text-center mb-20">
+          <div
+            class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale"
+          >
+            <div class="text-4xl mb-6 animate-float">💎</div>
+            <h3 class="text-xl font-bold text-white mb-3 tracking-tight">Elite VIP Status</h3>
+            <p class="text-white/60 font-medium">Up to €50,000 monthly rewards</p>
+          </div>
+          <div
+            class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-100"
+          >
+            <div class="text-4xl mb-6 animate-float delay-100">⚡️</div>
+            <h3 class="text-xl font-bold text-white mb-3 tracking-tight">Instant Cashouts</h3>
+            <p class="text-white/60 font-medium">Get paid in 5 minutes!</p>
+          </div>
+          <div
+            class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-200"
+          >
+            <div class="text-4xl mb-6 animate-float delay-200">🎁</div>
+            <h3 class="text-xl font-bold text-white mb-3 tracking-tight">Daily Rewards</h3>
+            <p class="text-white/60 font-medium">Win up to €5,000 daily!</p>
+          </div>
+          <div
+            class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-300"
+          >
+            <div class="text-4xl mb-6 animate-float delay-300">🏆</div>
+            <h3 class="text-xl font-bold text-white mb-3 tracking-tight">99.9% Win Rate*</h3>
+            <p class="text-white/60 font-medium">Highest odds in the industry!</p>
+          </div>
+        </div>
+
+        <!-- Fine Print -->
+        <div class="text-center text-xs text-white/40 max-w-2xl mx-auto mb-20">
+          *Terms and conditions apply. Guaranteed winnings based on maximum bonus utilization. Win
+          rate calculated on minimum bets. Withdrawal restrictions and wagering requirements apply.
+          Please gamble responsibly.
+        </div>
+      </div>
+    </div>
+    <div
+      *ngIf="showPopup$ | async"
+      [@fadeSlide]
+      class="fixed inset-0 z-50 flex items-center justify-center px-4"
+    >
+      <div
+        class="absolute inset-0 bg-black/90 backdrop-blur-md animate-backdropBlur"
+        (click)="closePopup()"
+      ></div>
+      <div
+        *ngIf="currentPopup$ | async as popup"
+        class="relative bg-black/80 rounded-2xl p-10 border border-white/10 max-w-lg w-full transform animate-bounceAndFade"
+      >
+        <div
+          class="absolute -inset-1 bg-gradient-to-r from-emerald-600/20 via-emerald-500/20 to-emerald-600/20 rounded-2xl blur-2xl opacity-50 animate-glow"
+        ></div>
+        <div class="relative">
+          <button
+            (click)="closePopup(); onButtonClick($event)"
+            class="absolute -top-2 -right-2 w-8 h-8 flex items-center justify-center bg-black/80 rounded-full border border-white/10 text-white/40 hover:text-white/60 hover:scale-110 hover:border-white/20 transition-all duration-300 group"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4 transform group-hover:rotate-90 transition-transform duration-300"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+          <h2 class="text-3xl font-black text-white mb-4 tracking-tight animate-slideDown">
+            {{ popup.title }}
+          </h2>
+          <p class="text-xl text-white/80 mb-3 font-medium animate-slideDown delay-100">
+            {{ popup.message }}
+          </p>
+          <p
+            *ngIf="popup.subMessage"
+            class="text-sm text-emerald-400 mb-8 font-medium animate-slideDown delay-200"
+          >
+            {{ popup.subMessage }}
+          </p>
+          <img
+            *ngIf="popup.imageUrl"
+            [src]="popup.imageUrl"
+            [alt]="popup.title"
+            class="w-full h-48 object-cover rounded-xl mb-8 animate-scaleIn"
+          />
+          <div class="flex justify-between items-center animate-slideUp delay-300">
+            <button
+              (click)="closePopup(); onButtonClick($event)"
+              class="text-white/40 hover:text-white/60 transition-all duration-300 font-medium hover:transform hover:translate-x-1"
+            >
+              Maybe later
+            </button>
+            <button
+              (click)="claimBonus(); onButtonClick($event)"
+              class="group px-8 py-3 bg-gradient-to-r from-emerald-500 to-emerald-400 text-black font-bold rounded-full transition-all duration-500 transform hover:scale-105 hover:shadow-2xl hover:shadow-emerald-500/20 hover:translate-x-0.5 text-sm tracking-wide"
+            >
+              <span class="relative z-10 group-hover:tracking-wider transition-all duration-300">{{
+                popup.cta
+              }}</span>
+              <div
+                class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500 scale-105 group-hover:scale-100"
+              ></div>
+            </button>
+          </div>
+          <div
+            *ngIf="popup.expires"
+            class="mt-6 text-sm text-red-400 font-semibold animate-slideUp delay-400 drop-shadow-[0_0_8px_rgba(239,68,68,0.3)]"
+          >
+            <span class="animate-pulseGlow inline-block">⏰ Expires in: {{ popup.expires }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      *ngIf="nearMiss"
+      [@fadeSlide]
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/95 backdrop-blur-xl"
+    >
+      <div class="absolute inset-0 animate-backdropBlur" (click)="nearMiss = false"></div>
+      <div
+        class="relative bg-black/80 rounded-2xl p-10 border border-white/10 max-w-lg w-full transform animate-bounceAndFade"
+      >
+        <button
+          (click)="nearMiss = false; onButtonClick($event)"
+          class="absolute -top-2 -right-2 w-8 h-8 flex items-center justify-center bg-black/80 rounded-full border border-white/10 text-white/40 hover:text-white/60 hover:scale-110 hover:border-white/20 transition-all duration-300 group"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4 transform group-hover:rotate-90 transition-transform duration-300"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+        <div class="text-center">
+          <div
+            class="text-7xl mb-6 animate-spinAndBounce drop-shadow-[0_0_15px_rgba(234,179,8,0.5)]"
+          >
+            🎰
+          </div>
+          <h2 class="text-4xl font-black text-white mb-4 tracking-tight animate-slideDown">
+            SO CLOSE!
+          </h2>
+          <p class="text-xl text-white/80 mb-6 font-medium animate-slideDown delay-100">
+            Just one more spin to win the MEGA JACKPOT!
+          </p>
+          <div class="text-emerald-400 font-semibold mb-8 animate-slideDown delay-200">
+            <span class="animate-pulseGlow inline-block">
+              Hot streak detected - Increased win probability activated!
+            </span>
+          </div>
+          <button
+            (click)="playNow('mega-fortune'); onButtonClick($event)"
+            class="group px-8 py-3 bg-gradient-to-r from-emerald-500 to-emerald-400 text-black font-bold rounded-full transition-all duration-500 transform hover:scale-105 hover:shadow-2xl hover:shadow-emerald-500/20 text-sm tracking-wide animate-slideUp"
+          >
+            <span class="relative z-10 group-hover:tracking-wider transition-all duration-300"
+              >SPIN AGAIN</span
+            >
+            <div
+              class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-all duration-500 scale-105 group-hover:scale-100"
+            ></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,253 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  NgZone,
+  ElementRef,
+  ViewChild,
+  AfterViewInit,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { Subject, interval, Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { default as autoAnimate } from '@formkit/auto-animate';
+
+import { PopupService } from '../services/popup.service';
+import { GameService } from '../services/game.service';
+import { WinnerService } from '../services/winner.service';
+import { JackpotService } from '../services/jackpot.service';
+import { AnimationService } from '../services/animation.service';
+
+@Component({
+  selector: 'app-landing',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './landing.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('fadeSlide', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(20px)' }),
+        animate(
+          '0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+          style({ opacity: 1, transform: 'translateY(0)' })
+        ),
+      ]),
+      transition(':leave', [
+        animate(
+          '0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+          style({ opacity: 0, transform: 'translateY(-20px)' })
+        ),
+      ]),
+    ]),
+  ],
+})
+export class LandingComponent implements OnInit, OnDestroy, AfterViewInit {
+  private destroy$ = new Subject<void>();
+  nearMiss = false;
+  isScrolled = false;
+
+  @ViewChild('jackpotCounter') jackpotCounter!: ElementRef;
+  @ViewChild('heroSection') heroSection!: ElementRef;
+  @ViewChild('gamesGrid') gamesGrid!: ElementRef;
+  @ViewChild('winnersMarquee') winnersMarquee!: ElementRef;
+  @ViewChild('particleContainer') particleContainer!: ElementRef;
+
+  readonly showPopup$: Observable<boolean>;
+  readonly currentPopup$: Observable<any>;
+  readonly games$: Observable<any[]>;
+  readonly recentWinners$: Observable<any[]>;
+  readonly onlinePlayers$: Observable<number>;
+  readonly currentJackpot$: Observable<number>;
+  readonly timeLeft$: Observable<string>;
+  readonly totalPlayersToday: number;
+  readonly totalWinnersToday: number;
+
+  constructor(
+    private router: Router,
+    private cdr: ChangeDetectorRef,
+    private ngZone: NgZone,
+    private popupService: PopupService,
+    private gameService: GameService,
+    private winnerService: WinnerService,
+    private jackpotService: JackpotService,
+    private animationService: AnimationService
+  ) {
+    this.showPopup$ = this.popupService.showPopup$;
+    this.currentPopup$ = this.popupService.currentPopup$;
+    this.games$ = this.gameService.games$;
+    this.recentWinners$ = this.winnerService.recentWinners$;
+    this.onlinePlayers$ = this.winnerService.onlinePlayers$;
+    this.currentJackpot$ = this.jackpotService.currentJackpot$;
+    this.timeLeft$ = this.jackpotService.timeLeft$;
+    this.totalPlayersToday = this.winnerService.getTotalPlayersToday();
+    this.totalWinnersToday = this.winnerService.getTotalWinnersToday();
+  }
+
+  ngOnInit(): void {
+    this.initializeTimers();
+    this.initializeScrollListener();
+  }
+
+  ngAfterViewInit(): void {
+    this.initializeAnimations();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    window.removeEventListener('scroll', () => {
+      this.isScrolled = window.scrollY > 0;
+    });
+  }
+
+  private initializeAnimations(): void {
+    this.animationService.createParticleEffect(this.particleContainer);
+    this.animationService.animateEntrance(this.heroSection);
+    const gameCards = this.gamesGrid.nativeElement.querySelectorAll('.game-card');
+    gameCards.forEach((card: HTMLElement, index: number) => {
+      this.animationService.animateEntrance(new ElementRef(card), 0.1 * index);
+    });
+    autoAnimate(this.winnersMarquee.nativeElement);
+    this.animationService.animateOnScroll(this.gamesGrid, 'slideUp');
+    this.currentJackpot$.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+      this.animationService.animateJackpotCounter(this.jackpotCounter, value - 1000, value);
+    });
+  }
+
+  private initializeTimers(): void {
+    this.ngZone.runOutsideAngular(() => {
+      interval(1500)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.jackpotService.updateJackpot();
+          this.cdr.markForCheck();
+        });
+      interval(3000)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.winnerService.updateOnlinePlayers();
+          this.cdr.markForCheck();
+        });
+      interval(1000)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.jackpotService.updateTimeLeft();
+          if (this.jackpotService.isUrgent()) {
+            this.showUrgentOffer();
+          }
+          this.cdr.markForCheck();
+        });
+      interval(7000)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          const randomGame = this.gameService.getGameById('mega-fortune');
+          if (randomGame) {
+            const winAmount = Math.floor(Math.random() * 50000) + 10000;
+            this.winnerService.generateNewWinner(randomGame.name, winAmount);
+            if (winAmount > 10000) {
+              this.showBigWinPopup(winAmount);
+            }
+          }
+          this.cdr.markForCheck();
+        });
+      interval(15000)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.gameService.updateGameStats();
+          this.cdr.markForCheck();
+        });
+      interval(30000)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.popupService.showRandomPopup();
+          this.cdr.markForCheck();
+        });
+    });
+  }
+
+  private initializeScrollListener(): void {
+    window.addEventListener('scroll', () => {
+      this.isScrolled = window.scrollY > 0;
+      this.cdr.detectChanges();
+    });
+  }
+
+  private showUrgentOffer(): void {
+    this.popupService.showSpecificPopup({
+      title: '⚠️ LAST CHANCE!',
+      message: 'Bonus offer expiring - Lock in 500% now!',
+      type: 'urgent',
+      cta: 'Claim Before Timer Ends',
+      expires: '00:30',
+    });
+  }
+
+  private showBigWinPopup(amount: number): void {
+    this.popupService.showSpecificPopup({
+      title: '🎰 MASSIVE WIN ALERT!',
+      message: `Player just won €${amount.toLocaleString()} on minimum bet!`,
+      subMessage: 'Same game still hot - Win rate increased to 99.9%!',
+      type: 'win',
+      cta: 'Play Same Game',
+    });
+  }
+
+  closePopup(): void {
+    this.popupService.closePopup();
+  }
+
+  claimBonus(): void {
+    this.nearMiss = true;
+    this.cdr.markForCheck();
+
+    setTimeout(() => {
+      this.router.navigate(['/register'], {
+        queryParams: {
+          bonus: 'welcome1000',
+          ref: 'landing_hero',
+          special: 'true',
+          vip: 'fast-track',
+        },
+      });
+    }, 1500);
+  }
+
+  playNow(gameId: string): void {
+    const game = this.gameService.getGameById(gameId);
+    if (!game) return;
+
+    this.popupService.showSpecificPopup({
+      title: '🎰 PERFECT TIMING!',
+      message: `${game.name} is currently at ${game.winChance}% win rate!`,
+      subMessage: `Last player won €${game.lastWin.toLocaleString()} - Hot streak active!`,
+      type: 'fomo',
+      cta: 'Play Now',
+    });
+
+    setTimeout(() => {
+      this.router.navigate(['/game', gameId], {
+        queryParams: {
+          ref: 'landing_games',
+          bonus: 'true',
+          rtp: 'enhanced',
+          multiplier: 'active',
+        },
+      });
+    }, 2000);
+  }
+
+  onButtonClick(event: MouseEvent): void {
+    const button = event.currentTarget as HTMLElement;
+    this.animationService.animateButtonClick(new ElementRef(button));
+  }
+
+  onGameCardHover(event: MouseEvent): void {
+    const card = event.currentTarget as HTMLElement;
+    this.animationService.animateFloat(new ElementRef(card));
+  }
+}