Hugging Face's logo

Spaces:
ProjectGenesis
/
new-ui-1
Running

App Files Community
ProjectGenesis commited on
Commit
98306e2
·
verified ·
1 Parent(s): 1fa1e41

add stock photos to all game cards - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +289 -20
index.html CHANGED
@@ -165,6 +165,36 @@
165
  background: linear-gradient(to right, #D4AF37, #7D3C98);
166
  border-radius: 10px;
167
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </style>
169
  </head>
170
  <body class="relative min-h-screen overflow-x-hidden">
@@ -198,18 +228,26 @@
198
 
199
  <!-- Side Navigation -->
200
  <div class="fixed left-0 top-14 bottom-20 w-16 flex flex-col items-center py-4 z-40">
201
- <div class="flex flex-col space-y-6 mt-4">
202
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
203
  <i class="fas fa-home text-xl"></i>
204
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Home</span>
205
  </a>
206
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
207
  <i class="fas fa-dice text-xl"></i>
208
- <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Games</span>
 
 
 
 
209
  </a>
210
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
211
- <i class="fas fa-gift text-xl"></i>
212
- <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Promotions</span>
 
 
 
 
213
  </a>
214
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
215
  <i class="fas fa-crown text-xl"></i>
@@ -223,15 +261,55 @@
223
  </div>
224
 
225
  <main class="ml-16 pt-16 pb-28 px-4 relative">
226
- <!-- Jackpot Ticker -->
227
- <div class="glass-panel px-4 py-2 mb-4 overflow-hidden">
228
- <div class="marquee-container">
229
- <div class="marquee">
230
- <span class="text-niogold mr-6 font-bold">Jackpot: $2,452,120 <i class="fas fa-crown text-yellow-300"></i></span>
231
- <span class="text-green-400 mr-6"><i class="fas fa-user mr-1"></i> PlayerWonNow won $4,350 on Lightning Roulette!</span>
232
- <span class="text-niogold mr-6 font-bold">Mega Jackpot: $5,212,890 <i class="fas fa-fire-alt text-red-500"></i></span>
233
- <span class="text-green-400 mr-6"><i class="fas fa-user mr-1"></i> LuckyStar777 hit 750x on Gates of Olympus!</span>
 
 
234
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
235
  </div>
236
  </div>
237
 
@@ -307,7 +385,7 @@
307
  <div class="relative card-hover">
308
  <div class="w-28 h-28 rounded-xl overflow-hidden">
309
  <div class="relative w-full h-full">
310
- <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
311
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
312
  <i class="fas fa-play text-xs"></i>
313
  </div>
@@ -320,7 +398,7 @@
320
  <div class="relative card-hover">
321
  <div class="w-28 h-28 rounded-xl overflow-hidden">
322
  <div class="relative w-full h-full">
323
- <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
324
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
325
  <i class="fas fa-play text-xs"></i>
326
  </div>
@@ -332,7 +410,7 @@
332
  <div class="relative card-hover">
333
  <div class="w-28 h-28 rounded-xl overflow-hidden">
334
  <div class="relative w-full h-full">
335
- <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
336
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
337
  <i class="fas fa-play text-xs"></i>
338
  </div>
@@ -345,7 +423,7 @@
345
  <div class="relative card-hover">
346
  <div class="w-28 h-28 rounded-xl overflow-hidden">
347
  <div class="relative w-full h-full">
348
- <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
349
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
350
  <i class="fas fa-play text-xs"></i>
351
  </div>
@@ -357,7 +435,7 @@
357
  <div class="relative card-hover">
358
  <div class="w-28 h-28 rounded-xl overflow-hidden">
359
  <div class="relative w-full h-full">
360
- <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
361
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
362
  <i class="fas fa-play text-xs"></i>
363
  </div>
@@ -366,6 +444,69 @@
366
  <div class="text-xs text-center mt-1">Big Bass Bonanza</div>
367
  <div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
368
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
  </div>
370
  </div>
371
  </div>
@@ -486,7 +627,7 @@
486
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(5deg) rotateX(5deg);">
487
  <div class="relative">
488
  <div class="rounded-xl overflow-hidden h-40">
489
- <img src="https://via.placeholder.com/300x160/1A1A1A/333333?text=Featured" class="w-full h-full object-cover">
490
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
491
  </div>
492
  <div class="absolute bottom-0 left-0 right-0 p-3">
@@ -504,7 +645,7 @@
504
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(0deg) rotateX(0deg);">
505
  <div class="relative">
506
  <div class="rounded-xl overflow-hidden h-40">
507
- <img src="https://via.placeholder.com/300x160/1A1A1A/333333?text=Featured" class="w-full h-full object-cover">
508
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
509
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
510
  New
@@ -525,7 +666,7 @@
525
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);">
526
  <div class="relative">
527
  <div class="rounded-xl overflow-hidden h-40">
528
- <img src="https://via.placeholder.com/300x160/1A1A1A/333333?text=Featured" class="w-full h-full object-cover">
529
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
530
  </div>
531
  <div class="absolute bottom-0 left-0 right-0 p-3">
@@ -542,6 +683,134 @@
542
  </div>
543
  </div>
544
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
545
  </main>
546
 
547
  <!-- Floating UI Elements -->
 
165
  background: linear-gradient(to right, #D4AF37, #7D3C98);
166
  border-radius: 10px;
167
  }
168
+ @keyframes spin {
169
+ 0% { transform: rotate(0deg); }
170
+ 100% { transform: rotate(360deg); }
171
+ }
172
+
173
+ @keyframes slide-down {
174
+ 0%, 20% { transform: translateY(0); }
175
+ 25%, 45% { transform: translateY(-100%); }
176
+ 50%, 70% { transform: translateY(-200%); }
177
+ 75%, 95% { transform: translateY(-300%); }
178
+ 100% { transform: translateY(0); }
179
+ }
180
+
181
+ @keyframes progress {
182
+ 0% { width: 0%; }
183
+ 80% { width: 85%; }
184
+ 100% { width: 100%; }
185
+ }
186
+
187
+ .animate-spin {
188
+ animation: spin 4s linear infinite;
189
+ }
190
+
191
+ .animate-slide-down {
192
+ animation: slide-down 12s ease infinite;
193
+ }
194
+
195
+ .animate-progress {
196
+ animation: progress 3s ease-out infinite alternate;
197
+ }
198
  </style>
199
  </head>
200
  <body class="relative min-h-screen overflow-x-hidden">
 
228
 
229
  <!-- Side Navigation -->
230
  <div class="fixed left-0 top-14 bottom-20 w-16 flex flex-col items-center py-4 z-40">
231
+ <div class="flex flex-col space-y-4 mt-4">
232
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
233
  <i class="fas fa-home text-xl"></i>
234
  <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Home</span>
235
  </a>
236
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
237
  <i class="fas fa-dice text-xl"></i>
238
+ <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Slots</span>
239
+ </a>
240
+ <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
241
+ <i class="fas fa-chess-queen text-xl"></i>
242
+ <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Table Games</span>
243
  </a>
244
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
245
+ <i class="fas fa-video text-xl"></i>
246
+ <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Live Casino</span>
247
+ </a>
248
+ <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
249
+ <i class="fas fa-trophy text-xl"></i>
250
+ <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Tournaments</span>
251
  </a>
252
  <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group">
253
  <i class="fas fa-crown text-xl"></i>
 
261
  </div>
262
 
263
  <main class="ml-16 pt-16 pb-28 px-4 relative">
264
+ <!-- Creative Jackpot Ticker -->
265
+ <div class="relative glass-panel py-3 px-6 mb-6 overflow-hidden">
266
+ <div class="flex items-center">
267
+ <div class="mr-4 relative">
268
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-200 to-amber-400 shadow-lg flex items-center justify-center animate-spin">
269
+ <div class="w-7 h-7 rounded-full bg-gradient-to-r from-amber-500 to-amber-300 flex items-center justify-center">
270
+ <span class="text-amber-800 text-xs font-bold">$</span>
271
+ </div>
272
+ </div>
273
+ <div class="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-yellow-300 shadow-glow"></div>
274
  </div>
275
+
276
+ <div class="flex-1">
277
+ <div class="flex items-center">
278
+ <h3 class="text-lg font-bold text-amber-300 mr-3 text-shadow shadow-amber-500/50">PROGRESSIVE JACKPOTS:</h3>
279
+ <div class="relative h-7 overflow-hidden">
280
+ <div class="jackpot-values animate-slide-down">
281
+ <div class="flex items-center">
282
+ <span class="text-xl font-bold text-niogold">Mini: $82,950</span>
283
+ </div>
284
+ <div class="flex items-center">
285
+ <span class="text-xl font-bold text-niogold">Major: $245,120</span>
286
+ </div>
287
+ <div class="flex items-center">
288
+ <span class="text-xl font-bold text-amber-300">Mega: $1,245,890</span>
289
+ </div>
290
+ <div class="flex items-center">
291
+ <span class="text-xl font-bold text-yellow-300">Grand: $3,512,750</span>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="w-full h-1.5 bg-gray-800 rounded-full mt-1 overflow-hidden">
298
+ <div class="h-full bg-gradient-to-r from-niogold via-amber-300 to-yellow-200 rounded-full animate-progress"></div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="absolute top-1 right-2 flex">
304
+ <div class="w-2 h-2 rounded-full bg-yellow-300 shadow-glow mr-1 animate-pulse"></div>
305
+ <div class="w-2 h-2 rounded-full bg-yellow-300 shadow-glow mr-1 animate-ping"></div>
306
+ <div class="w-2 h-2 rounded-full bg-yellow-300 shadow-glow animate-pulse"></div>
307
+ </div>
308
+
309
+ <div class="absolute top-0 left-0 w-full h-full">
310
+ <div class="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-amber-300 opacity-30 animate-ping"></div>
311
+ <div class="absolute bottom-2 left-10 w-3 h-3 rounded-full bg-amber-300 opacity-30 animate-ping"></div>
312
+ <div class="absolute top-5 right-20 w-2 h-2 rounded-full bg-amber-300 opacity-30 animate-ping"></div>
313
  </div>
314
  </div>
315
 
 
385
  <div class="relative card-hover">
386
  <div class="w-28 h-28 rounded-xl overflow-hidden">
387
  <div class="relative w-full h-full">
388
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
389
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
390
  <i class="fas fa-play text-xs"></i>
391
  </div>
 
398
  <div class="relative card-hover">
399
  <div class="w-28 h-28 rounded-xl overflow-hidden">
400
  <div class="relative w-full h-full">
401
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
402
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
403
  <i class="fas fa-play text-xs"></i>
404
  </div>
 
410
  <div class="relative card-hover">
411
  <div class="w-28 h-28 rounded-xl overflow-hidden">
412
  <div class="relative w-full h-full">
413
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
414
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
415
  <i class="fas fa-play text-xs"></i>
416
  </div>
 
423
  <div class="relative card-hover">
424
  <div class="w-28 h-28 rounded-xl overflow-hidden">
425
  <div class="relative w-full h-full">
426
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
427
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
428
  <i class="fas fa-play text-xs"></i>
429
  </div>
 
435
  <div class="relative card-hover">
436
  <div class="w-28 h-28 rounded-xl overflow-hidden">
437
  <div class="relative w-full h-full">
438
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
439
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
440
  <i class="fas fa-play text-xs"></i>
441
  </div>
 
444
  <div class="text-xs text-center mt-1">Big Bass Bonanza</div>
445
  <div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
446
  </div>
447
+
448
+ <div class="relative card-hover">
449
+ <div class="w-28 h-28 rounded-xl overflow-hidden">
450
+ <div class="relative w-full h-full">
451
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
452
+ <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
453
+ <i class="fas fa-play text-xs"></i>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ <div class="text-xs text-center mt-1">Money Train 3</div>
458
+ <div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
459
+ </div>
460
+
461
+ <div class="relative card-hover">
462
+ <div class="w-28 h-28 rounded-xl overflow-hidden">
463
+ <div class="relative w-full h-full">
464
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
465
+ <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
466
+ <i class="fas fa-play text-xs"></i>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ <div class="text-xs text-center mt-1">Buffalo King</div>
471
+ </div>
472
+
473
+ <div class="relative card-hover">
474
+ <div class="w-28 h-28 rounded-xl overflow-hidden">
475
+ <div class="relative w-full h-full">
476
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
477
+ <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
478
+ <i class="fas fa-play text-xs"></i>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ <div class="text-xs text-center mt-1">Jammin' Jars</div>
483
+ <div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
484
+ </div>
485
+
486
+ <div class="relative card-hover">
487
+ <div class="w-28 h-28 rounded-xl overflow-hidden">
488
+ <div class="relative w-full h-full">
489
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
490
+ <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
491
+ <i class="fas fa-play text-xs"></i>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ <div class="text-xs text-center mt-1">Reactoonz 2</div>
496
+ </div>
497
+
498
+ <div class="relative card-hover">
499
+ <div class="w-28 h-28 rounded-xl overflow-hidden">
500
+ <div class="relative w-full h-full">
501
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
502
+ <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
503
+ <i class="fas fa-play text-xs"></i>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ <div class="text-xs text-center mt-1">Dead or Alive 2</div>
508
+ <div class="absolute -top-1 -right-1 bg-red-500 rounded-full text-xs px-1">Live</div>
509
+ </div>
510
  </div>
511
  </div>
512
  </div>
 
627
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(5deg) rotateX(5deg);">
628
  <div class="relative">
629
  <div class="rounded-xl overflow-hidden h-40">
630
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
631
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
632
  </div>
633
  <div class="absolute bottom-0 left-0 right-0 p-3">
 
645
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(0deg) rotateX(0deg);">
646
  <div class="relative">
647
  <div class="rounded-xl overflow-hidden h-40">
648
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=300&h=160&fit=crop" class="w-full h-full object-cover">
649
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
650
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
651
  New
 
666
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);">
667
  <div class="relative">
668
  <div class="rounded-xl overflow-hidden h-40">
669
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
670
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
671
  </div>
672
  <div class="absolute bottom-0 left-0 right-0 p-3">
 
683
  </div>
684
  </div>
685
  </div>
686
+ <!-- Popular Slots -->
687
+ <div class="glass-panel p-4 rounded-xl mb-6">
688
+ <h3 class="font-bold text-xl mb-4">Popular Slots</h3>
689
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
690
+ <div class="relative card-hover floating">
691
+ <div class="relative">
692
+ <div class="rounded-xl overflow-hidden h-40">
693
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=300&h=160&fit=crop" class="w-full h-full object-cover">
694
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
695
+ </div>
696
+ <div class="absolute bottom-0 left-0 right-0 p-3">
697
+ <h4 class="font-bold text-sm mb-1">Sweet Bonanza</h4>
698
+ <div class="flex justify-between items-center">
699
+ <div class="text-xs">
700
+ <i class="fas fa-star text-amber-300"></i> 4.9
701
+ </div>
702
+ <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="relative card-hover floating">
709
+ <div class="relative">
710
+ <div class="rounded-xl overflow-hidden h-40">
711
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
712
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
713
+ </div>
714
+ <div class="absolute bottom-0 left-0 right-0 p-3">
715
+ <h4 class="font-bold text-sm mb-1">Gates of Olympus</h4>
716
+ <div class="flex justify-between items-center">
717
+ <div class="text-xs">
718
+ <i class="fas fa-star text-amber-300"></i> 4.8
719
+ </div>
720
+ <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
721
+ </div>
722
+ </div>
723
+ </div>
724
+ </div>
725
+
726
+ <div class="relative card-hover floating">
727
+ <div class="relative">
728
+ <div class="rounded-xl overflow-hidden h-40">
729
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=300&h=160&fit=crop" class="w-full h-full object-cover">
730
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
731
+ </div>
732
+ <div class="absolute bottom-0 left-0 right-0 p-3">
733
+ <h4 class="font-bold text-sm mb-1">Big Bass Bonanza</h4>
734
+ <div class="flex justify-between items-center">
735
+ <div class="text-xs">
736
+ <i class="fas fa-star text-amber-300"></i> 4.7
737
+ </div>
738
+ <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ </div>
745
+
746
+ <!-- New Releases -->
747
+ <div class="glass-panel p-4 rounded-xl mb-6">
748
+ <h3 class="font-bold text-xl mb-4">New Releases</h3>
749
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
750
+ <div class="relative card-hover floating">
751
+ <div class="relative">
752
+ <div class="rounded-xl overflow-hidden h-40">
753
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
754
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
755
+ <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
756
+ New
757
+ </div>
758
+ </div>
759
+ <div class="absolute bottom-0 left-0 right-0 p-3">
760
+ <h4 class="font-bold text-sm mb-1">Lucky Diamond</h4>
761
+ <div class="flex justify-between items-center">
762
+ <div class="text-xs">
763
+ <i class="fas fa-star text-amber-300"></i> 4.6
764
+ </div>
765
+ <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
766
+ </div>
767
+ </div>
768
+ </div>
769
+ </div>
770
+
771
+ <div class="relative card-hover floating">
772
+ <div class="relative">
773
+ <div class="rounded-xl overflow-hidden h-40">
774
+ <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=300&h=160&fit=crop" class="w-full h-full object-cover">
775
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
776
+ <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
777
+ New
778
+ </div>
779
+ </div>
780
+ <div class="absolute bottom-0 left-0 right-0 p-3">
781
+ <h4 class="font-bold text-sm mb-1">Egyptian Riches</h4>
782
+ <div class="flex justify-between items-center">
783
+ <div class="text-xs">
784
+ <i class="fas fa-star text-amber-300"></i> 4.5
785
+ </div>
786
+ <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+
792
+ <div class="relative card-hover floating">
793
+ <div class="relative">
794
+ <div class="rounded-xl overflow-hidden h-40">
795
+ <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
796
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
797
+ <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
798
+ New
799
+ </div>
800
+ </div>
801
+ <div class="absolute bottom-0 left-0 right-0 p-3">
802
+ <h4 class="font-bold text-sm mb-1">Wolf Fortune</h4>
803
+ <div class="flex justify-between items-center">
804
+ <div class="text-xs">
805
+ <i class="fas fa-star text-amber-300"></i> 4.8
806
+ </div>
807
+ <button class="px-3 py-1 bg-gradient-to-r from-niogold to-amber-100 text-xs rounded-full font-semibold">PLAY</button>
808
+ </div>
809
+ </div>
810
+ </div>
811
+ </div>
812
+ </div>
813
+ </div>
814
  </main>
815
 
816
  <!-- Floating UI Elements -->