refactor(landing): restructure landing page components and templates
This commit is contained in:
parent
8514d6d73f
commit
9fe473302c
8 changed files with 475 additions and 244 deletions
|
|
@ -7,7 +7,6 @@ import { environment } from '../../../environments/environment';
|
|||
import { NgIf } from '@angular/common';
|
||||
import {
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatDialogContent,
|
||||
MatDialogRef,
|
||||
MatDialogTitle,
|
||||
|
|
@ -23,7 +22,6 @@ import { MatButton } from '@angular/material/button';
|
|||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatButton,
|
||||
],
|
||||
templateUrl: './deposit.component.html',
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { NavbarComponent } from '../../shared/components/navbar/navbar.component
|
|||
selector: 'app-homepage',
|
||||
standalone: true,
|
||||
imports: [NavbarComponent],
|
||||
templateUrl: './homepage.component.html',
|
||||
templateUrl: './home.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class HomeComponent {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,142 @@
|
|||
@if (isLoggedIn) {
|
||||
<button routerLink="/home">Zur Homepage</button>
|
||||
} @else {
|
||||
<button (click)="login()">Einloggen</button>
|
||||
}
|
||||
<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">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">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">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">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">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">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>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,55 @@
|
|||
import { Component, inject } from '@angular/core';
|
||||
import { KeycloakService } from 'keycloak-angular';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { ChangeDetectionStrategy, Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
|
||||
import { NgFor } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
selector: 'app-landing-page',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
imports: [NavbarComponent, NgFor],
|
||||
templateUrl: './landing.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class LandingComponent {
|
||||
private keycloakService: KeycloakService = inject(KeycloakService);
|
||||
export class LandingComponent implements OnInit, OnDestroy {
|
||||
currentSlide = 0;
|
||||
private autoplayInterval: ReturnType<typeof setInterval> | undefined;
|
||||
|
||||
public isLoggedIn = this.keycloakService.isLoggedIn();
|
||||
ngOnInit() {
|
||||
this.startAutoplay();
|
||||
}
|
||||
|
||||
public login() {
|
||||
const baseUrl = window.location.origin;
|
||||
ngOnDestroy() {
|
||||
this.stopAutoplay();
|
||||
}
|
||||
|
||||
this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
|
||||
prevSlide() {
|
||||
this.currentSlide = this.currentSlide === 0 ? 1 : 0;
|
||||
this.resetAutoplay();
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
this.currentSlide = this.currentSlide === 1 ? 0 : 1;
|
||||
this.resetAutoplay();
|
||||
}
|
||||
|
||||
goToSlide(index: number) {
|
||||
this.currentSlide = index;
|
||||
this.resetAutoplay();
|
||||
}
|
||||
|
||||
private startAutoplay() {
|
||||
this.autoplayInterval = setInterval(() => {
|
||||
this.nextSlide();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
private stopAutoplay() {
|
||||
if (this.autoplayInterval) {
|
||||
clearInterval(this.autoplayInterval);
|
||||
}
|
||||
}
|
||||
|
||||
private resetAutoplay() {
|
||||
this.stopAutoplay();
|
||||
this.startAutoplay();
|
||||
}
|
||||
}
|
||||
export class LandingPageComponent {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue