From 475406dbaa288e8aeea0502be4e097b7c72ac0b5 Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Wed, 5 Feb 2025 14:33:31 +0100
Subject: [PATCH] feat(landing): add landing component with animations and
 services

---
 frontend/src/app/app.routes.ts                |   7 +-
 .../src/app/landing/landing.component.html    | 189 +++++++++++++++---
 frontend/src/app/services/game.service.ts     |   4 +-
 3 files changed, 167 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
index 3a96b8f..36b5bb5 100644
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -1,6 +1,9 @@
 import { Routes } from '@angular/router';
-import {LandingPageComponent} from "./landing-page/landing-page.component";
+import { LandingComponent } from './landing/landing.component';
 
 export const routes: Routes = [
-  { path: '', component: LandingPageComponent }
+  {
+    path: '',
+    component: LandingComponent,
+  },
 ];
diff --git a/frontend/src/app/landing/landing.component.html b/frontend/src/app/landing/landing.component.html
index fb8924f..5922ccc 100644
--- a/frontend/src/app/landing/landing.component.html
+++ b/frontend/src/app/landing/landing.component.html
@@ -6,7 +6,20 @@
       [class.py-1.5]="!isScrolled"
     >
       <div class="container mx-auto px-4 overflow-hidden">
-        <app-winner-ticker [winners]="(recentWinners$ | async) ?? []"></app-winner-ticker>
+        <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>
 
@@ -47,7 +60,15 @@
                 <span class="text-emerald-500 text-xs font-semibold">(78.9% Win Rate)</span>
               </div>
             </div>
-            <app-animated-button (buttonClick)="claimBonus()"> START PLAYING </app-animated-button>
+            <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>
@@ -93,9 +114,9 @@
             <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)] will-change-transform"
+                class="text-6xl font-bold text-white tracking-tight animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.3)]"
               >
-                €{{ (currentJackpot$ | async) ?? 0 | number }}
+                €{{ currentJackpot$ | async | number }}
               </span>
               <span class="text-emerald-500 text-lg animate-bounce">↑</span>
             </div>
@@ -136,12 +157,24 @@
             </div>
 
             <div class="flex justify-center">
-              <app-animated-button variant="primary" size="large" (buttonClick)="claimBonus()">
-                CLAIM YOUR €10,000 NOW
-              </app-animated-button>
+              <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>
@@ -155,9 +188,27 @@
         </div>
 
         <div
-          class="bg-black/40 backdrop-blur-xl rounded-xl p-4 mb-16 overflow-hidden border border-white/5 text-white"
+          class="bg-black/40 backdrop-blur-xl rounded-xl p-4 mb-16 overflow-hidden border border-white/5"
         >
-          <app-winner-ticker [winners]="(recentWinners$ | async) ?? []"></app-winner-ticker>
+          <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">
@@ -169,12 +220,79 @@
             </span>
           </h2>
           <div class="grid md:grid-cols-3 gap-8">
-            <app-game-card
+            <div
               *ngFor="let game of games$ | async"
-              [game]="game"
-              (play)="playNow(game.id)"
+              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)"
             >
-            </app-game-card>
+              <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>
 
@@ -186,6 +304,13 @@
             <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"
           >
@@ -200,15 +325,9 @@
             <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
-            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-400"
-          >
-            <div class="text-4xl mb-6 animate-float delay-400">🚀</div>
-            <h3 class="text-xl font-bold text-white mb-3 tracking-tight">Exclusive Offers</h3>
-            <p class="text-white/60 font-medium">Unlock special perks and rewards!</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.
@@ -277,9 +396,17 @@
             >
               Maybe later
             </button>
-            <app-animated-button (buttonClick)="claimBonus()">
-              {{ popup.cta }}
-            </app-animated-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"
@@ -336,13 +463,17 @@
               Hot streak detected - Increased win probability activated!
             </span>
           </div>
-          <app-animated-button
-            variant="primary"
-            size="normal"
-            (buttonClick)="playNow('mega-fortune')"
+          <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"
           >
-            SPIN AGAIN
-          </app-animated-button>
+            <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>
diff --git a/frontend/src/app/services/game.service.ts b/frontend/src/app/services/game.service.ts
index ee6ae08..4f0509a 100644
--- a/frontend/src/app/services/game.service.ts
+++ b/frontend/src/app/services/game.service.ts
@@ -28,7 +28,7 @@ export class GameService {
       id: 'mega-fortune',
       name: 'Mega Fortune Dreams',
       description: '🔥 Progressive Jackpot at €1.2M - Must Drop Today!',
-      imageUrl: '',
+      imageUrl: 'assets/games/mega-fortune.jpg',
       minBet: 0.2,
       maxBet: 100,
       rtp: 96.5,
@@ -45,7 +45,7 @@ export class GameService {
       id: 'lightning-roulette',
       name: 'Lightning Roulette',
       description: '⚡️ 500x Multipliers Active - Hot Streak!',
-      imageUrl: '',
+      imageUrl: 'assets/games/lightning-roulette.jpg',
       minBet: 1,
       maxBet: 500,
       rtp: 97.1,