projects/casino
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases 16 Activity

feat(landing): add landing component (CAS-8) #10

Merged
jleibl merged 22 commits from task/landing-page into main 2025-02-13 12:09:14 +00:00
Conversation 7 Commits 22 Files Changed 15 +105 -103
2 changed files with 105 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 84de8e0c86 - Show all commits

152
frontend/src/app/landing-page/landing-page.component.html
View File

@ -4,125 +4,76 @@
<div class="container mx-auto px-4 py-8 sm:py-12"> <div class="container mx-auto px-4 py-8 sm:py-12">
<div class="max-w-5xl mx-auto"> <div class="max-w-5xl mx-auto">
<div class="text-center mb-12 sm:mb-16"> <div class="text-center mb-12 sm:mb-16">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 sm:mb-3 text-text-primary"> <h1 class="text-3xl sm:text-4xl lg:text-5xl section-heading mb-2 sm:mb-3">
Willkommensbonus Willkommensbonus
</h1> </h1>
<div <div class="welcome-bonus">200% bis zu 500€</div>
class="text-4xl sm:text-5xl lg:text-7xl font-extrabold text-emerald-light mb-3 sm:mb-4" <p class="bonus-description">+ 200 Freispiele</p>
>
200% bis zu 500€
</div>
<p class="text-text-secondary text-base sm:text-lg mb-6 sm:mb-8">+ 200 Freispiele</p>
<button <button class="w-full sm:w-auto button-base px-6 sm:px-8 py-3 shadow-lg">
class="w-full sm:w-auto bg-emerald hover:bg-emerald-dark text-text-primary font-bold px-6 sm:px-8 py-3 rounded transition-all duration-300 active:scale-95 shadow-lg"
>
Bonus Sichern Bonus Sichern
</button> </button>
</div> </div>
<div class="relative mb-16"> <div class="relative mb-16">
<h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-text-primary"> <h2 class="text-xl sm:text-2xl section-heading mb-4 sm:mb-6">Beliebte Spiele</h2>
Beliebte Spiele
</h2>
<div class="relative group"> <div class="relative group">
<div class="overflow-hidden rounded-lg"> <div class="overflow-hidden rounded-lg">
<div <div
class="flex transition-transform duration-500 ease-out" class="slider-container"
[style.transform]="'translateX(-' + currentSlide * 100 + '%)'" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'"
> >
<div class="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="slider-grid">
<div <div class="card">
class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300" <div class="game-card-content">
> <h3 class="game-heading">Slots</h3>
<div class="p-4"> <p class="game-text">Klassische Spielautomaten</p>
<h3 class="font-bold mb-2 text-text-primary">Slots</h3> <button class="button-base w-full py-2">Jetzt Spielen</button>
<p class="text-text-secondary text-sm mb-4">Klassische Spielautomaten</p>
<button
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
>
Jetzt Spielen
</button>
</div> </div>
</div> </div>
<div <div class="card">
class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300" <div class="game-card-content">
> <h3 class="game-heading">Plinko</h3>
<div class="p-4"> <p class="game-text">Spannendes Geschicklichkeitsspiel</p>
<h3 class="font-bold mb-2 text-text-primary">Plinko</h3> <button class="button-base w-full py-2">Jetzt Spielen</button>
<p class="text-text-secondary text-sm mb-4">
Spannendes Geschicklichkeitsspiel
</p>
<button
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
>
Jetzt Spielen
</button>
</div> </div>
</div> </div>
<div <div class="hidden lg:block card">
class="hidden lg:block bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300" <div class="game-card-content">
> <h3 class="game-heading">Blackjack</h3>
<div class="p-4"> <p class="game-text">Klassisches Kartenspiel</p>
<h3 class="font-bold mb-2 text-text-primary">Blackjack</h3> <button class="button-base w-full py-2">Jetzt Spielen</button>
<p class="text-text-secondary text-sm mb-4">Klassisches Kartenspiel</p>
<button
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
>
Jetzt Spielen
</button>
</div> </div>
</div> </div>
</div> </div>
<div class="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="slider-grid">
<div <div class="card">
class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300" <div class="game-card-content">
> <h3 class="game-heading">Poker</h3>
<div class="p-4"> <p class="game-text">Texas Hold'em & mehr</p>
<h3 class="font-bold mb-2 text-text-primary">Poker</h3> <button class="button-base w-full py-2">Jetzt Spielen</button>
<p class="text-text-secondary text-sm mb-4">Texas Hold'em & mehr</p>
<button
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
>
Jetzt Spielen
</button>
</div> </div>
</div> </div>
<div <div class="card">
class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300" <div class="game-card-content">
> <h3 class="game-heading">Liars Dice</h3>
<div class="p-4"> <p class="game-text">Würfelspiel mit Strategie</p>
<h3 class="font-bold mb-2 text-text-primary">Liars Dice</h3> <button class="button-base w-full py-2">Jetzt Spielen</button>
<p class="text-text-secondary text-sm mb-4">Würfelspiel mit Strategie</p>
<button
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
>
Jetzt Spielen
</button>
</div> </div>
</div> </div>
<div <div class="hidden lg:block card">
class="hidden lg:block bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300" <div class="game-card-content">
> <h3 class="game-heading">Lootboxen</h3>
<div class="p-4"> <p class="game-text">Überraschungskisten</p>
<h3 class="font-bold mb-2 text-text-primary">Lootboxen</h3> <button class="button-base w-full py-2">Jetzt Spielen</button>
<p class="text-text-secondary text-sm mb-4">Überraschungskisten</p>
<button
class="w-full bg-emerald hover:bg-emerald-dark text-text-primary font-bold py-2 rounded transition-all duration-300 active:scale-95"
>
Jetzt Spielen
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<button <button class="nav-button left-[-4rem]" (click)="prevSlide()">
class="hidden lg:block absolute left-[-4rem] top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110"
(click)="prevSlide()"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
@ -138,10 +89,7 @@
/> />
</svg> </svg>
</button> </button>
<button <button class="nav-button right-[-4rem]" (click)="nextSlide()">
class="hidden lg:block absolute right-[-4rem] top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110"
(click)="nextSlide()"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
@ -172,21 +120,19 @@
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center"> <div class="stat-container">
<div class="text-xl sm:text-2xl font-bold text-emerald">50 Mio.€+</div> <div class="stat-number">50 Mio.€+</div>
<div class="text-text-secondary text-sm">Ausgezahlt</div> <div class="stat-text">Ausgezahlt</div>
</div> </div>
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center"> <div class="stat-container">
<div class="text-xl sm:text-2xl font-bold text-emerald">10 Mio.+</div> <div class="stat-number">10 Mio.+</div>
<div class="text-text-secondary text-sm">Spiele</div> <div class="stat-text">Spiele</div>
</div> </div>
<div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center"> <div class="stat-container">
<div class="text-xl sm:text-2xl font-bold text-emerald">24/7</div> <div class="stat-number">24/7</div>
<div class="text-text-secondary text-sm"> <div class="stat-text">Support <span class="text-emerald text-xs">*</span></div>
Support <span class="text-emerald text-xs">*</span>
</div>
</div> </div>
</div> </div>
</div> </div>

56
frontend/src/styles.css
View File

@ -27,6 +27,62 @@ a {
@apply cursor-pointer active:scale-95 transition-all duration-200; @apply cursor-pointer active:scale-95 transition-all duration-200;
} }
.card {
@apply bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300;
}
.button-base {
@apply bg-emerald hover:bg-emerald-dark text-text-primary font-bold transition-all duration-300 active:scale-95 rounded;
}
.game-card-content {
@apply p-4;
}
.nav-button {
@apply hidden lg:block absolute top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110;
}
.slider-container {
@apply flex transition-transform duration-500 ease-out;
}
.slider-grid {
@apply min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
}
.welcome-bonus {
@apply text-4xl sm:text-5xl lg:text-7xl font-extrabold text-emerald-light mb-3 sm:mb-4;
}
.bonus-description {
@apply text-text-secondary text-base sm:text-lg mb-6 sm:mb-8;
}
.section-heading {
@apply font-bold text-text-primary;
}
.game-heading {
@apply font-bold text-text-primary mb-2;
}
.game-text {
@apply text-text-secondary text-sm mb-4;
}
.stat-container {
@apply bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center;
}
.stat-number {
@apply text-xl sm:text-2xl font-bold text-emerald;
}
.stat-text {
@apply text-text-secondary text-sm;
}
html, html,
body { body {
height: 100%; height: 100%;