142 lines
5.2 KiB
HTML
142 lines
5.2 KiB
HTML
<app-navbar></app-navbar>
|
|
|
|
<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 section-heading mb-2 sm:mb-3">
|
|
Willkommensbonus
|
|
</h1>
|
|
<div class="welcome-bonus">200% bis zu 500€</div>
|
|
<p class="bonus-description">+ 200 Freispiele</p>
|
|
|
|
<button class="w-full sm:w-auto button-base px-6 sm:px-8 py-3 shadow-lg">
|
|
Bonus Sichern
|
|
</button>
|
|
</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>
|
|
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Plinko</h3>
|
|
<p class="game-text">Spannendes Geschicklichkeitsspiel</p>
|
|
<button class="button-base w-full py-2">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>
|
|
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slider-grid">
|
|
<div class="card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Poker</h3>
|
|
<p class="game-text">Texas Hold'em & mehr</p>
|
|
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Liars Dice</h3>
|
|
<p class="game-text">Würfelspiel mit Strategie</p>
|
|
<button class="button-base w-full py-2">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>
|
|
<button class="button-base w-full py-2">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"
|
|
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="nav-button right-[-4rem]" (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)"
|
|
>
|
|
<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 <span class="text-emerald text-xs">*</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|