feat(landing): add landing component with animations and services
This commit is contained in:
parent
ff0e03003a
commit
ea26f5dd80
2 changed files with 162 additions and 31 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Reference in a new issue