From 84de8e0c86d8f478936b58e66b8e6fe5bf6ed87e Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Thu, 13 Feb 2025 12:22:11 +0100
Subject: [PATCH] style(landing-page): update class names for consistency

---
 .../landing-page/landing-page.component.html  | 152 ++++++------------
 frontend/src/styles.css                       |  56 +++++++
 2 files changed, 105 insertions(+), 103 deletions(-)

diff --git a/frontend/src/app/landing-page/landing-page.component.html b/frontend/src/app/landing-page/landing-page.component.html
index c2c2fd4..a9acfe3 100644
--- a/frontend/src/app/landing-page/landing-page.component.html
+++ b/frontend/src/app/landing-page/landing-page.component.html
@@ -4,125 +4,76 @@
   <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 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
         </h1>
-        <div
-          class="text-4xl sm:text-5xl lg:text-7xl font-extrabold text-emerald-light mb-3 sm:mb-4"
-        >
-          200% bis zu 500€
-        </div>
-        <p class="text-text-secondary text-base sm:text-lg mb-6 sm:mb-8">+ 200 Freispiele</p>
+        <div class="welcome-bonus">200% bis zu 500€</div>
+        <p class="bonus-description">+ 200 Freispiele</p>
 
-        <button
-          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"
-        >
+        <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 font-bold mb-4 sm:mb-6 text-text-primary">
-          Beliebte Spiele
-        </h2>
+        <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="flex transition-transform duration-500 ease-out"
+              class="slider-container"
               [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="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
-                >
-                  <div class="p-4">
-                    <h3 class="font-bold mb-2 text-text-primary">Slots</h3>
-                    <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 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="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
-                >
-                  <div class="p-4">
-                    <h3 class="font-bold mb-2 text-text-primary">Plinko</h3>
-                    <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 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 bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
-                >
-                  <div class="p-4">
-                    <h3 class="font-bold mb-2 text-text-primary">Blackjack</h3>
-                    <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 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="min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                <div
-                  class="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
-                >
-                  <div class="p-4">
-                    <h3 class="font-bold mb-2 text-text-primary">Poker</h3>
-                    <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 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="bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
-                >
-                  <div class="p-4">
-                    <h3 class="font-bold mb-2 text-text-primary">Liars Dice</h3>
-                    <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 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 bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
-                >
-                  <div class="p-4">
-                    <h3 class="font-bold mb-2 text-text-primary">Lootboxen</h3>
-                    <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 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="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()"
-          >
+          <button class="nav-button left-[-4rem]" (click)="prevSlide()">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6"
@@ -138,10 +89,7 @@
               />
             </svg>
           </button>
-          <button
-            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()"
-          >
+          <button class="nav-button right-[-4rem]" (click)="nextSlide()">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6"
@@ -172,21 +120,19 @@
       </div>
 
       <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="text-xl sm:text-2xl font-bold text-emerald">50 Mio.€+</div>
-          <div class="text-text-secondary text-sm">Ausgezahlt</div>
+        <div class="stat-container">
+          <div class="stat-number">50 Mio.€+</div>
+          <div class="stat-text">Ausgezahlt</div>
         </div>
 
-        <div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
-          <div class="text-xl sm:text-2xl font-bold text-emerald">10 Mio.+</div>
-          <div class="text-text-secondary text-sm">Spiele</div>
+        <div class="stat-container">
+          <div class="stat-number">10 Mio.+</div>
+          <div class="stat-text">Spiele</div>
         </div>
 
-        <div class="bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 text-center">
-          <div class="text-xl sm:text-2xl font-bold text-emerald">24/7</div>
-          <div class="text-text-secondary text-sm">
-            Support <span class="text-emerald text-xs">*</span>
-          </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>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 589de44..e801711 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -27,6 +27,62 @@ a {
   @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,
 body {
   height: 100%;