Promote version 8c515c7 to main

Promoted commit 8c515c79ffe1595ea10e544d5deb696d69c613fb to main branch

index.html

@@ -126,35 +126,30 @@
                 </div>
                 <p class="text-center text-gray-400 text-sm mt-2">Get freespins, credit boosts & special pre-launch offers.</p>
             </div>
-            <!-- Game Grid Section -->
-            <div class="w-full max-w-7xl relative mt-16 mb-24">
-                <!-- Live Dealers Row -->
-                <div class="text-center mb-4">
-                    <h2 class="text-2xl md:text-3xl font-bold bg-gradient-to-r from-neonblue to-neonmagenta text-transparent bg-clip-text drop-shadow-[0_0_8px_rgba(255,0,255,0.7)]">LIVE DEALERS</h2>
-                </div>
-                <div class="game-grid grid grid-cols-2 sm:grid-cols-5 md:grid-cols-10 gap-4 md:gap-6 justify-center mb-12">
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/FsLtyHPs/coin-lamp-hit-the-bonus-3oaks.jpg$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/bdXBC16Y/8-D84-DE57-14-FF-43-F4-B6-AD-6-C8-CF49-AD964.jpg$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/BvdH1Ntv/402-B193-D-9-CAF-4-FEE-BF48-B037-F1-D89131.jpg$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/5NNYyDp3/A256-BCF8-7519-435-C-918-D-3-F3538-B1900-C.jpg$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/wxWxfMcX/45-E7440-B-B25-F-481-A-9781-719283-EFECCE.jpg$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/8PQGnvfr/AEDAA2-CC-038-E-46-CE-852-B-F94251754767.jpg$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/tgR744PD/Screenshot-2025-06-26-at-7-31-32-PM.png$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/bwRqnvJS/741-A07-C3-A499-4-B80-A9-D8-FE147-CF3-D9-E2.jpg$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/RVDFFhWS/B1917-EA4-6-A2-F-4873-A09-C-873-B7827238-F.jpg$0')"></div>
-                    <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/HLhD08Cn/61-CFFC55-2-E0-F-4063-8-DF4-60125-D4554-B3.jpg$0')"></div>
-                </div>
 
-                <!-- Additional rows for other game categories -->
-                <div class="text-center mb-4">
-                    <h2 class="text-2xl md:text-3xl font-bold bg-gradient-to-r from-neonblue to-neonmagenta text-transparent bg-clip-text drop-shadow-[0_0_8px_rgba(255,0,255,0.7)]">SLOTS</h2>
+            <!-- Game Thumbnail Carousel -->
+            <div class="w-full max-w-5xl relative mb-8">
+                <div class="game-carousel-container relative overflow-hidden">
+                    <div class="game-carousel flex gap-6 py-4">
+                        <!-- 10 game thumbnails -->
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/FsLtyHPs/coin-lamp-hit-the-bonus-3oaks.jpg$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/bdXBC16Y/8-D84-DE57-14-FF-43-F4-B6-AD-6-C8-CF49-AD964.jpg$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/BvdH1Ntv/402-B193-D-9-CAF-4-FEE-BF48-B037-F1-D89131.jpg$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/5NNYyDp3/A256-BCF8-7519-435-C-918-D-3-F3538-B1900-C.jpg$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/wxWxfMcX/45-E7440-B-B25-F-481-A-9781-719283-EFECCE.jpg$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/8PQGnvfr/AEDAA2-CC-038-E-46-CE-852-B-F94251754767.jpg$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/tgR744PD/Screenshot-2025-06-26-at-7-31-32-PM.png$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/bwRqnvJS/741-A07-C3-A499-4-B80-A9-D8-FE147-CF3-D9-E2.jpg$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/RVDFFhWS/B1917-EA4-6-A2-F-4873-A09-C-873-B7827238-F.jpg$0')"></div>
+                        <div class="game-thumbnail" style="background-image: url('https://i.postimg.cc/HLhD08Cn/61-CFFC55-2-E0-F-4063-8-DF4-60125-D4554-B3.jpg$0')"></div>
+</div>
                 </div>
-                <div class="game-grid grid grid-cols-2 sm:grid-cols-5 md:grid-cols-10 gap-4 md:gap-6 justify-center mb-12">
-                    <!-- Repeat same structure for other rows -->
-                    <!-- 10 game thumbnails per row -->
+                <div class="carousel-arrows absolute top-1/2 left-0 right-0 flex justify-between transform -translate-y-1/2 px-4 pointer-events-none">
+                    <div class="arrow-left w-6 h-6 border-l-2 border-t-2 border-neonblue transform -rotate-45 opacity-70"></div>
+                    <div class="arrow-right w-6 h-6 border-r-2 border-t-2 border-neonmagenta transform rotate-45 opacity-70"></div>
                 </div>
             </div>
-</div>
+        </div>
     </main>
     <!-- Facebook Promo Popup -->
     <div class="facebook-popup hidden md:block">

style.css

@@ -102,40 +102,36 @@ h1, h2, h3, .countdown-timer {
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }
+
 /* Game Thumbnail Styles */
 .game-thumbnail {
-    width: 100%;
-    aspect-ratio: 1/1;
+    min-width: 150px;
+    height: 150px;
     background: rgba(20, 20, 20, 0.7);
     background-size: cover;
     background-position: center;
-    border-radius: 16px;
-    border: 2px solid rgba(15, 240, 252, 0.3);
+    border-radius: 12px;
+    border: 1px solid rgba(15, 240, 252, 0.3);
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
-    margin: 0 auto;
-    animation: idlePulse 4s infinite ease-in-out;
 }
-
 .game-thumbnail::before {
     content: 'GAME PREVIEW';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    color: rgba(255, 255, 255, 0.8);
-    text-shadow: 0 0 12px rgba(15, 240, 252, 0.7);
-    font-size: 0.9rem;
-    font-weight: 600;
+    color: rgba(255, 255, 255, 0.7);
+    text-shadow: 0 0 8px rgba(15, 240, 252, 0.5);
+    font-size: 0.8rem;
+    font-weight: 500;
     letter-spacing: 0.1em;
-    background: rgba(0, 0, 0, 0.8);
-    padding: 0.5rem 1.2rem;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 0.5rem 1rem;
     border-radius: 2rem;
     white-space: nowrap;
-    z-index: 2;
 }
-
 .game-thumbnail::after {
     content: '';
     position: absolute;
@@ -143,79 +139,49 @@ h1, h2, h3, .countdown-timer {
     left: 0;
     right: 0;
     bottom: 0;
-    background: radial-gradient(circle at center, transparent 60%, rgba(15, 240, 252, 0.15) 100%);
-    border-radius: 16px;
-    z-index: 1;
+    background: radial-gradient(circle at center, transparent 60%, rgba(15, 240, 252, 0.1) 100%);
+    border-radius: 12px;
 }
-
-@keyframes idlePulse {
-    0%, 100% {
-        box-shadow: 0 0 20px rgba(15, 240, 252, 0.2);
-    }
-    50% {
-        box-shadow: 0 0 30px rgba(15, 240, 252, 0.4);
-    }
-}
-
 /* Hover Effects */
 .game-thumbnail:hover {
-    transform: translateY(-10px) scale(1.05);
+    transform: perspective(500px) translateY(-5px) rotateX(5deg) scale(1.05);
     border-color: rgba(15, 240, 252, 0.8);
     box-shadow: 
-        0 15px 40px rgba(15, 240, 252, 0.5),
-        0 0 0 3px rgba(255, 0, 255, 0.6);
-    filter: brightness(1.2);
+        0 10px 30px rgba(15, 240, 252, 0.3),
+        0 0 0 2px rgba(255, 0, 255, 0.4);
+    background: rgba(25, 25, 25, 0.9);
+    animation: hologramGlow 2s infinite alternate;
+    filter: brightness(1.1);
     z-index: 10;
-    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2);
-    animation: none;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
 }
-
 .game-thumbnail:hover::after {
-    background: radial-gradient(circle at center, transparent 20%, rgba(15, 240, 252, 0.5) 100%);
-    animation: ripple 2s infinite ease-out;
+    background: radial-gradient(circle at center, transparent 20%, rgba(15, 240, 252, 0.4) 100%);
+    animation: ripple 1.5s infinite ease-out;
 }
 
-.game-thumbnail:hover::before {
-    background: rgba(0, 0, 0, 0.9);
-    text-shadow: 0 0 16px rgba(255, 0, 255, 0.8);
-}
-
-/* Ripple Effect */
 @keyframes ripple {
     0% {
-        transform: scale(0.9);
-        opacity: 0.5;
+        transform: scale(0.8);
+        opacity: 0.7;
     }
     100% {
-        transform: scale(1.8);
+        transform: scale(1.5);
         opacity: 0;
     }
 }
 
-/* Game Grid Layout */
-.game-grid {
-    max-width: 100%;
-    margin: 0 auto;
-    padding: 0 1rem;
-}
-
-/* Category Titles */
-.game-category-title {
-    text-align: center;
-    margin-bottom: 2rem;
-    position: relative;
-}
-
-.game-category-title::after {
-    content: '';
-    position: absolute;
-    bottom: -0.5rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 60px;
-    height: 3px;
-    background: linear-gradient(to right, rgba(15, 240, 252, 0.8), rgba(255, 0, 255, 0.8));
-    border-radius: 3px;
+@keyframes hologramGlow {
+    0% {
+        box-shadow: 
+            0 15px 40px rgba(15, 240, 252, 0.4),
+            0 0 0 2px rgba(255, 0, 255, 0.5);
+    }
+    100% {
+        box-shadow: 
+            0 20px 50px rgba(15, 240, 252, 0.6),
+            0 0 0 3px rgba(255, 0, 255, 0.7);
+    }
 }
 /* Carousel Animation */
 .game-carousel {