Hugging Face's logo

Spaces:
7ristan7
/
proj-x
Running

App Files Community
7ristan7 commited on
Commit
d072644
·
verified ·
1 Parent(s): ec92346

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +332 -193
  2. prompts.txt +3 -0
index.html CHANGED
@@ -3,10 +3,8 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>X | Game Store</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <script>
11
  tailwind.config = {
12
  theme: {
@@ -16,23 +14,24 @@
16
  'dark-red': '#cc0000',
17
  'deep-black': '#0a0a0a',
18
  'light-black': '#1a1a1a',
19
- },
20
- fontFamily: {
21
- 'sans': ['Space Grotesk', 'sans-serif'],
22
  }
23
  }
24
  }
25
  }
26
  </script>
 
27
  <style>
28
  body {
29
  background-color: #0a0a0a;
30
  color: white;
 
31
  }
32
 
33
  .game-card:hover {
34
  transform: translateY(-5px);
35
- box-shadow: 0 5px 15px rgba(255, 0, 0, 0.2);
 
36
  }
37
 
38
  .nav-link:hover {
@@ -41,41 +40,13 @@
41
 
42
  .search-input:focus {
43
  border-color: #ff0000;
 
44
  }
45
 
46
  .thin-border {
47
  border: 1px solid rgba(255, 255, 255, 0.1);
48
  }
49
 
50
- .x-logo {
51
- font-size: 3rem;
52
- line-height: 1;
53
- position: relative;
54
- width: 60px;
55
- height: 60px;
56
- display: flex;
57
- align-items: center;
58
- justify-content: center;
59
- }
60
-
61
- .x-logo::before,
62
- .x-logo::after {
63
- content: '';
64
- position: absolute;
65
- width: 100%;
66
- height: 4px;
67
- background-color: #ff0000;
68
- transform-origin: center;
69
- }
70
-
71
- .x-logo::before {
72
- transform: rotate(45deg);
73
- }
74
-
75
- .x-logo::after {
76
- transform: rotate(-45deg);
77
- }
78
-
79
  .auth-modal {
80
  display: none;
81
  position: fixed;
@@ -83,7 +54,7 @@
83
  left: 0;
84
  width: 100%;
85
  height: 100%;
86
- background-color: rgba(0, 0, 0, 0.8);
87
  z-index: 1000;
88
  align-items: center;
89
  justify-content: center;
@@ -96,6 +67,7 @@
96
  width: 90%;
97
  max-width: 400px;
98
  position: relative;
 
99
  }
100
 
101
  .close-btn {
@@ -104,6 +76,7 @@
104
  right: 15px;
105
  font-size: 1.5rem;
106
  cursor: pointer;
 
107
  }
108
 
109
  .tab {
@@ -131,27 +104,69 @@
131
  outline: none;
132
  border-color: #ff0000;
133
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  </style>
135
  </head>
136
- <body class="bg-deep-black text-white font-sans">
137
  <!-- Navigation -->
138
- <nav class="bg-black py-4 px-6">
139
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
140
  <div class="flex items-center mb-4 md:mb-0">
141
- <div class="x-logo mr-2"></div>
142
- <h1 class="text-2xl font-bold">X</h1>
143
  </div>
144
 
145
  <div class="flex items-center space-x-1 md:space-x-6">
146
- <a href="#" class="nav-link px-3 py-2 font-bold">STORE</a>
147
- <a href="#" class="nav-link px-3 py-2 font-bold">LIBRARY</a>
148
- <a href="#" class="nav-link px-3 py-2 font-bold">COMMUNITY</a>
149
- <a href="#" class="nav-link px-3 py-2 font-bold">SUPPORT</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
  </div>
151
 
152
  <div class="mt-4 md:mt-0 flex items-center space-x-4">
153
  <div class="relative">
154
- <input type="text" placeholder="Search games..." class="search-input bg-light-black text-white px-4 py-2 rounded-full w-full md:w-64 focus:outline-none">
155
  <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
156
  </div>
157
  <button id="auth-btn" class="bg-blood-red hover:bg-dark-red px-6 py-2 rounded-full font-bold transition duration-300">
@@ -164,7 +179,7 @@
164
  <!-- Auth Modal -->
165
  <div id="auth-modal" class="auth-modal">
166
  <div class="auth-content">
167
- <span class="close-btn text-gray-400 hover:text-white">&times;</span>
168
 
169
  <div class="flex mb-6">
170
  <div id="login-tab" class="tab active mr-4 font-bold">LOGIN</div>
@@ -209,31 +224,34 @@
209
  </div>
210
 
211
  <!-- Hero Section -->
212
- <section class="relative h-80 flex items-center justify-center bg-black overflow-hidden">
213
- <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1542751375-ad40-5196-9a9d-a8476c2f34d9')] bg-cover bg-center opacity-20"></div>
214
- <div class="relative z-10 text-center px-4">
215
- <h2 class="text-4xl md:text-5xl font-black mb-4">NEW ERA OF <span class="text-blood-red">GAMING</span></h2>
216
- <p class="text-xl mb-8 max-w-2xl mx-auto font-bold">Discover the most intense gaming experience with X</p>
217
- <a href="https://store.steampowered.com/app/730/CounterStrike_2/" class="bg-blood-red hover:bg-dark-red px-8 py-3 rounded-full font-bold text-lg transition duration-300 inline-block">
 
218
  EXPLORE NOW
219
  </a>
220
  </div>
221
  </section>
222
 
223
  <!-- Featured Games -->
224
- <section class="py-12 px-6">
225
  <div class="container mx-auto">
226
  <div class="flex justify-between items-center mb-8">
227
- <h3 class="text-2xl font-black">FEATURED <span class="text-blood-red">GAMES</span></h3>
228
- <a href="https://store.steampowered.com/" class="text-blood-red hover:text-dark-red font-bold">View All →</a>
 
 
229
  </div>
230
 
231
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
232
  <!-- Counter-Strike 2 -->
233
- <a href="https://store.steampowered.com/app/730/CounterStrike_2/" class="game-card bg-light-black rounded-lg overflow-hidden transition duration-300 thin-border block">
234
  <div class="relative">
235
  <img src="https://cdn.akamai.steamstatic.com/steam/apps/730/header.jpg" alt="Counter-Strike 2" class="w-full h-48 object-cover">
236
- <div class="absolute top-2 left-2 bg-blood-red text-xs font-black px-2 py-1 rounded">-30%</div>
237
  </div>
238
  <div class="p-4">
239
  <h4 class="font-black text-lg mb-1">Counter-Strike 2</h4>
@@ -244,18 +262,17 @@
244
  <span>4.8</span>
245
  </div>
246
  <div>
247
- <span class="line-through text-gray-500 mr-2">$14.99</span>
248
  <span class="text-blood-red font-black">FREE</span>
249
  </div>
250
  </div>
251
  </div>
252
  </a>
253
-
254
  <!-- Dota 2 -->
255
- <a href="https://store.steampowered.com/app/570/Dota_2/" class="game-card bg-light-black rounded-lg overflow-hidden transition duration-300 thin-border block">
256
  <div class="relative">
257
  <img src="https://cdn.akamai.steamstatic.com/steam/apps/570/header.jpg" alt="Dota 2" class="w-full h-48 object-cover">
258
- <div class="absolute top-2 left-2 bg-blood-red text-xs font-black px-2 py-1 rounded">TOP PLAYED</div>
259
  </div>
260
  <div class="p-4">
261
  <h4 class="font-black text-lg mb-1">Dota 2</h4>
@@ -271,11 +288,12 @@
271
  </div>
272
  </div>
273
  </a>
274
-
275
  <!-- Apex Legends -->
276
- <a href="https://store.steampowered.com/app/1172470/Apex_Legends/" class="game-card bg-light-black rounded-lg overflow-hidden transition duration-300 thin-border block">
277
  <div class="relative">
278
  <img src="https://cdn.akamai.steamstatic.com/steam/apps/1172470/header.jpg" alt="Apex Legends" class="w-full h-48 object-cover">
 
279
  </div>
280
  <div class="p-4">
281
  <h4 class="font-black text-lg mb-1">Apex Legends</h4>
@@ -291,12 +309,12 @@
291
  </div>
292
  </div>
293
  </a>
294
-
295
  <!-- PUBG -->
296
- <a href="https://store.steampowered.com/app/578080/PUBG_BATTLEGROUNDS/" class="game-card bg-light-black rounded-lg overflow-hidden transition duration-300 thin-border block">
297
  <div class="relative">
298
  <img src="https://cdn.akamai.steamstatic.com/steam/apps/578080/header.jpg" alt="PUBG" class="w-full h-48 object-cover">
299
- <div class="absolute top-2 left-2 bg-blood-red text-xs font-black px-2 py-1 rounded">HOT</div>
300
  </div>
301
  <div class="p-4">
302
  <h4 class="font-black text-lg mb-1">PUBG: BATTLEGROUNDS</h4>
@@ -316,92 +334,162 @@
316
  </div>
317
  </section>
318
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
319
  <!-- Categories -->
320
- <section class="py-12 px-6 bg-black">
321
  <div class="container mx-auto">
322
- <h3 class="text-2xl font-black mb-8 text-center">BROWSE <span class="text-blood-red">CATEGORIES</span></h3>
323
 
324
- <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
325
- <a href="https://store.steampowered.com/tags/en/Action/" class="bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
326
- <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3">
327
  <i class="fas fa-gamepad text-xl text-blood-red"></i>
328
  </div>
329
  <h4 class="font-black">Action</h4>
330
  </a>
331
 
332
- <a href="https://store.steampowered.com/tags/en/Horror/" class="bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
333
- <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3">
334
- <i class="fas fa-ghost text-xl text-blood-red"></i>
335
  </div>
336
- <h4 class="font-black">Horror</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
337
  </a>
338
 
339
- <a href="https://store.steampowered.com/tags/en/Sci-fi/" class="bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
340
- <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3">
341
- <i class="fas fa-robot text-xl text-blood-red"></i>
342
  </div>
343
- <h4 class="font-black">Sci-Fi</h4>
344
  </a>
345
 
346
- <a href="https://store.steampowered.com/tags/en/Racing/" class="bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
347
- <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3">
348
  <i class="fas fa-car text-xl text-blood-red"></i>
349
  </div>
350
  <h4 class="font-black">Racing</h4>
351
  </a>
352
 
353
- <a href="https://store.steampowered.com/tags/en/Strategy/" class="bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
354
- <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3">
355
  <i class="fas fa-chess text-xl text-blood-red"></i>
356
  </div>
357
  <h4 class="font-black">Strategy</h4>
358
  </a>
359
 
360
- <a href="https://store.steampowered.com/tags/en/RPG/" class="bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
361
- <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3">
362
- <i class="fas fa-dragon text-xl text-blood-red"></i>
363
  </div>
364
- <h4 class="font-black">RPG</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
365
  </a>
366
  </div>
367
  </div>
368
  </section>
369
 
370
  <!-- Special Offer -->
371
- <section class="py-16 px-6 bg-black">
372
  <div class="container mx-auto flex flex-col lg:flex-row items-center">
373
  <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
374
  <div class="bg-blood-red text-black text-xs font-black px-2 py-1 rounded-full inline-block mb-4">LIMITED TIME</div>
375
- <h3 class="text-3xl font-black mb-4">SPECIAL <span class="text-blood-red">OFFER</span></h3>
376
- <p class="text-lg mb-6 font-bold">Get the ultimate gaming bundle at an exclusive price for X members.</p>
377
  <div class="flex items-center mb-6">
378
- <div class="text-4xl font-black text-blood-red mr-4">$99</div>
379
  <div class="text-gray-400">
380
- <div class="line-through text-lg">$149</div>
381
  <div class="text-sm font-bold">Save $50</div>
382
  </div>
383
  </div>
384
- <a href="https://store.steampowered.com/bundle/23238/Valve_Complete_Pack/" class="bg-blood-red hover:bg-dark-red px-8 py-3 rounded-full font-bold text-lg transition duration-300 inline-block">
385
  GET THE BUNDLE
386
  </a>
387
  </div>
388
  <div class="lg:w-1/2 relative">
389
  <img src="https://cdn.akamai.steamstatic.com/steam/bundles/23238/6x0v0q0k0x8m4y1v/header.jpg" alt="Valve Complete Pack" class="rounded-lg w-full thin-border">
390
- <div class="absolute -bottom-4 -right-4 bg-blood-red text-black px-4 py-2 rounded-full font-black">
391
  -33% OFF
392
  </div>
393
  </div>
394
  </div>
395
  </section>
396
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
397
  <!-- Footer -->
398
- <footer class="bg-black py-12 px-6 thin-border-t">
399
  <div class="container mx-auto">
400
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
401
  <div>
402
  <div class="flex items-center mb-4">
403
- <div class="x-logo mr-2"></div>
404
- <h4 class="text-xl font-bold">X</h4>
405
  </div>
406
  <p class="text-gray-400 mb-4 font-bold">The ultimate destination for hardcore gamers.</p>
407
  <div class="flex space-x-4">
@@ -423,134 +511,185 @@
423
  <div>
424
  <h5 class="text-lg font-black mb-4 text-blood-red">STORE</h5>
425
  <ul class="space-y-2">
426
- <li><a href="https://store.steampowered.com/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Featured</a></li>
427
- <li><a href="https://store.steampowered.com/explore/new/" class="text-gray-400 hover:text-white transition duration-300 font-bold">New Releases</a></li>
428
- <li><a href="https://store.steampowered.com/specials/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Deals</a></li>
429
- <li><a href="https://store.steampowered.com/comingsoon/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Coming Soon</a></li>
430
  </ul>
431
  </div>
432
 
433
  <div>
434
  <h5 class="text-lg font-black mb-4 text-blood-red">ABOUT</h5>
435
  <ul class="space-y-2">
436
- <li><a href="https://store.steampowered.com/about/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Company</a></li>
437
- <li><a href="https://www.valvesoftware.com/en/jobs" class="text-gray-400 hover:text-white transition duration-300 font-bold">Careers</a></li>
438
- <li><a href="https://steamcommunity.com/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Blog</a></li>
439
- <li><a href="https://help.steampowered.com/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Contact</a></li>
440
  </ul>
441
  </div>
442
 
443
  <div>
444
  <h5 class="text-lg font-black mb-4 text-blood-red">SUPPORT</h5>
445
  <ul class="space-y-2">
446
- <li><a href="https://help.steampowered.com/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Help Center</a></li>
447
- <li><a href="https://store.steampowered.com/steam_refunds/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Refunds</a></li>
448
- <li><a href="https://store.steampowered.com/legal/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Terms</a></li>
449
- <li><a href="https://store.steampowered.com/privacy_agreement/" class="text-gray-400 hover:text-white transition duration-300 font-bold">Privacy</a></li>
450
  </ul>
451
  </div>
452
  </div>
453
 
454
  <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
455
- <p class="text-gray-500 text-sm mb-4 md:mb-0 font-bold">© 2023 X. All rights reserved.</p>
456
  <div class="flex space-x-6">
457
- <a href="https://store.steampowered.com/legal/" class="text-gray-500 hover:text-white text-sm transition duration-300 font-bold">Terms of Service</a>
458
- <a href="https://store.steampowered.com/privacy_agreement/" class="text-gray-500 hover:text-white text-sm transition duration-300 font-bold">Privacy Policy</a>
459
- <a href="https://store.steampowered.com/privacy_agreement/" class="text-gray-500 hover:text-white text-sm transition duration-300 font-bold">Cookie Policy</a>
460
  </div>
461
  </div>
462
  </div>
463
  </footer>
464
 
465
  <script>
466
- // Auth modal functionality
467
- document.addEventListener('DOMContentLoaded', function() {
468
- const authBtn = document.getElementById('auth-btn');
469
- const authModal = document.getElementById('auth-modal');
470
- const closeBtn = document.querySelector('.close-btn');
471
- const loginTab = document.getElementById('login-tab');
472
- const registerTab = document.getElementById('register-tab');
473
- const loginForm = document.getElementById('login-form');
474
- const registerForm = document.getElementById('register-form');
475
- const switchToRegister = document.getElementById('switch-to-register');
476
- const switchToLogin = document.getElementById('switch-to-login');
 
 
477
 
478
- // Show modal when auth button is clicked
479
- authBtn.addEventListener('click', function() {
480
- authModal.style.display = 'flex';
481
- });
 
 
 
 
 
 
 
482
 
483
- // Hide modal when close button is clicked
484
- closeBtn.addEventListener('click', function() {
485
- authModal.style.display = 'none';
486
- });
 
 
 
 
 
 
 
487
 
488
- // Hide modal when clicking outside the modal content
489
- authModal.addEventListener('click', function(e) {
490
- if (e.target === authModal) {
491
- authModal.style.display = 'none';
492
- }
493
- });
 
 
 
 
 
494
 
495
- // Switch to login tab
496
- loginTab.addEventListener('click', function() {
497
- loginTab.classList.add('active');
498
- registerTab.classList.remove('active');
499
- loginForm.classList.remove('hidden');
500
- registerForm.classList.add('hidden');
501
- });
 
 
 
 
502
 
503
- // Switch to register tab
504
- registerTab.addEventListener('click', function() {
505
- registerTab.classList.add('active');
506
- loginTab.classList.remove('active');
507
- registerForm.classList.remove('hidden');
508
- loginForm.classList.add('hidden');
509
- });
 
 
 
 
510
 
511
- // Switch to register form from login form link
512
- switchToRegister.addEventListener('click', function() {
513
- registerTab.classList.add('active');
514
- loginTab.classList.remove('active');
515
- registerForm.classList.remove('hidden');
516
- loginForm.classList.add('hidden');
517
- });
 
 
 
 
518
 
519
- // Switch to login form from register form link
520
- switchToLogin.addEventListener('click', function() {
521
- loginTab.classList.add('active');
522
- registerTab.classList.remove('active');
523
- loginForm.classList.remove('hidden');
524
- registerForm.classList.add('hidden');
525
- });
 
 
 
 
526
 
527
- // Simple script to add active class to nav links
528
- const navLinks = document.querySelectorAll('.nav-link');
 
 
 
 
 
 
 
 
 
529
 
530
- navLinks.forEach(link => {
531
- link.addEventListener('click', function(e) {
532
- e.preventDefault();
533
- navLinks.forEach(l => l.classList.remove('text-blood-red'));
534
- this.classList.add('text-blood-red');
535
- });
536
- });
 
 
 
 
537
 
538
- // Form submission (just for demo, would be handled by backend in real app)
539
- const loginSubmit = loginForm.querySelector('button');
540
- const registerSubmit = registerForm.querySelector('button');
 
 
 
 
 
 
 
 
541
 
542
- loginSubmit.addEventListener('click', function(e) {
543
- e.preventDefault();
544
- alert('Login functionality would be handled by backend in real app');
545
- authModal.style.display = 'none';
546
- });
547
-
548
- registerSubmit.addEventListener('click', function(e) {
549
- e.preventDefault();
550
- alert('Registration functionality would be handled by backend in real app');
551
- authModal.style.display = 'none';
552
- });
553
- });
554
- </script>
555
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=7ristan7/proj-x" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
556
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>XGAMES | Ultimate Game Store</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
8
  <script>
9
  tailwind.config = {
10
  theme: {
 
14
  'dark-red': '#cc0000',
15
  'deep-black': '#0a0a0a',
16
  'light-black': '#1a1a1a',
17
+ 'darker-red': '#990000',
 
 
18
  }
19
  }
20
  }
21
  }
22
  </script>
23
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
24
  <style>
25
  body {
26
  background-color: #0a0a0a;
27
  color: white;
28
+ font-family: Arial, sans-serif;
29
  }
30
 
31
  .game-card:hover {
32
  transform: translateY(-5px);
33
+ box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4);
34
+ border-color: #ff0000;
35
  }
36
 
37
  .nav-link:hover {
 
40
 
41
  .search-input:focus {
42
  border-color: #ff0000;
43
+ box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
44
  }
45
 
46
  .thin-border {
47
  border: 1px solid rgba(255, 255, 255, 0.1);
48
  }
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  .auth-modal {
51
  display: none;
52
  position: fixed;
 
54
  left: 0;
55
  width: 100%;
56
  height: 100%;
57
+ background-color: rgba(0, 0, 0, 0.9);
58
  z-index: 1000;
59
  align-items: center;
60
  justify-content: center;
 
67
  width: 90%;
68
  max-width: 400px;
69
  position: relative;
70
+ border: 1px solid #ff0000;
71
  }
72
 
73
  .close-btn {
 
76
  right: 15px;
77
  font-size: 1.5rem;
78
  cursor: pointer;
79
+ color: #ff0000;
80
  }
81
 
82
  .tab {
 
104
  outline: none;
105
  border-color: #ff0000;
106
  }
107
+
108
+ .category-btn:hover {
109
+ background-color: #990000 !important;
110
+ }
111
+
112
+ .pagination-btn.active {
113
+ background-color: #ff0000;
114
+ color: white;
115
+ }
116
+
117
+ .pagination-btn:not(.active):hover {
118
+ background-color: #990000;
119
+ color: white;
120
+ }
121
+
122
+ .game-badge {
123
+ background-color: #ff0000;
124
+ color: black;
125
+ font-weight: bold;
126
+ }
127
+
128
+ .dropdown:hover .dropdown-menu {
129
+ display: block;
130
+ }
131
  </style>
132
  </head>
133
+ <body class="bg-deep-black text-white">
134
  <!-- Navigation -->
135
+ <nav class="bg-black py-4 px-6 border-b border-blood-red">
136
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
137
  <div class="flex items-center mb-4 md:mb-0">
138
+ <h1 class="text-3xl font-black text-blood-red">XGAMES</h1>
 
139
  </div>
140
 
141
  <div class="flex items-center space-x-1 md:space-x-6">
142
+ <a href="#" class="nav-link px-3 py-2 font-bold hover:text-blood-red">STORE</a>
143
+ <a href="#" class="nav-link px-3 py-2 font-bold hover:text-blood-red">LIBRARY</a>
144
+
145
+ <div class="dropdown relative">
146
+ <button class="nav-link px-3 py-2 font-bold hover:text-blood-red flex items-center">
147
+ CATEGORIES <i class="fas fa-chevron-down ml-1 text-xs"></i>
148
+ </button>
149
+ <div class="dropdown-menu absolute hidden bg-black mt-2 py-2 w-48 rounded shadow-lg border border-blood-red z-50">
150
+ <a href="#action-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Action</a>
151
+ <a href="#adventure-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Adventure</a>
152
+ <a href="#rpg-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">RPG</a>
153
+ <a href="#shooter-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Shooter</a>
154
+ <a href="#sports-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Sports</a>
155
+ <a href="#racing-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Racing</a>
156
+ <a href="#strategy-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Strategy</a>
157
+ <a href="#horror-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Horror</a>
158
+ <a href="#fighting-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Fighting</a>
159
+ <a href="#simulation-games" class="block px-4 py-2 hover:bg-blood-red hover:text-black font-bold">Simulation</a>
160
+ </div>
161
+ </div>
162
+
163
+ <a href="#" class="nav-link px-3 py-2 font-bold hover:text-blood-red">COMMUNITY</a>
164
+ <a href="#" class="nav-link px-3 py-2 font-bold hover:text-blood-red">SUPPORT</a>
165
  </div>
166
 
167
  <div class="mt-4 md:mt-0 flex items-center space-x-4">
168
  <div class="relative">
169
+ <input type="text" placeholder="Search games..." class="search-input bg-light-black text-white px-4 py-2 rounded-full w-full md:w-64 focus:outline-none border border-gray-700">
170
  <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
171
  </div>
172
  <button id="auth-btn" class="bg-blood-red hover:bg-dark-red px-6 py-2 rounded-full font-bold transition duration-300">
 
179
  <!-- Auth Modal -->
180
  <div id="auth-modal" class="auth-modal">
181
  <div class="auth-content">
182
+ <span class="close-btn hover:text-white">&times;</span>
183
 
184
  <div class="flex mb-6">
185
  <div id="login-tab" class="tab active mr-4 font-bold">LOGIN</div>
 
224
  </div>
225
 
226
  <!-- Hero Section -->
227
+ <section class="relative h-96 flex items-center justify-center bg-black overflow-hidden border-b border-blood-red">
228
+ <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div>
229
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1542751375-ad40-5196-9a9d-a8476c2f34d9')] bg-cover bg-center opacity-30"></div>
230
+ <div class="relative z-20 text-center px-4">
231
+ <h2 class="text-5xl md:text-6xl font-black mb-4">NEW ERA OF <span class="text-blood-red">GAMING</span></h2>
232
+ <p class="text-xl mb-8 max-w-2xl mx-auto font-bold">Discover the most intense gaming experience with XGAMES</p>
233
+ <a href="#top-games" class="bg-blood-red hover:bg-dark-red px-10 py-4 rounded-full font-bold text-lg transition duration-300 inline-block">
234
  EXPLORE NOW
235
  </a>
236
  </div>
237
  </section>
238
 
239
  <!-- Featured Games -->
240
+ <section class="py-12 px-6 border-b border-blood-red">
241
  <div class="container mx-auto">
242
  <div class="flex justify-between items-center mb-8">
243
+ <h3 class="text-3xl font-black">FEATURED <span class="text-blood-red">GAMES</span></h3>
244
+ <a href="#top-games" class="text-blood-red hover:text-dark-red font-bold flex items-center">
245
+ View All <i class="fas fa-chevron-right ml-1"></i>
246
+ </a>
247
  </div>
248
 
249
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
250
  <!-- Counter-Strike 2 -->
251
+ <a href="#" class="game-card bg-light-black rounded-lg overflow-hidden transition duration-300 thin-border block">
252
  <div class="relative">
253
  <img src="https://cdn.akamai.steamstatic.com/steam/apps/730/header.jpg" alt="Counter-Strike 2" class="w-full h-48 object-cover">
254
+ <div class="absolute top-2 left-2 game-badge text-xs px-2 py-1 rounded">TOP SELLER</div>
255
  </div>
256
  <div class="p-4">
257
  <h4 class="font-black text-lg mb-1">Counter-Strike 2</h4>
 
262
  <span>4.8</span>
263
  </div>
264
  <div>
 
265
  <span class="text-blood-red font-black">FREE</span>
266
  </div>
267
  </div>
268
  </div>
269
  </a>
270
+
271
  <!-- Dota 2 -->
272
+ <a href="#" class="game-card bg-light-black rounded-lg overflow-hidden transition duration-300 thin-border block">
273
  <div class="relative">
274
  <img src="https://cdn.akamai.steamstatic.com/steam/apps/570/header.jpg" alt="Dota 2" class="w-full h-48 object-cover">
275
+ <div class="absolute top-2 left-2 game-badge text-xs px-2 py-1 rounded">TOP PLAYED</div>
276
  </div>
277
  <div class="p-4">
278
  <h4 class="font-black text-lg mb-1">Dota 2</h4>
 
288
  </div>
289
  </div>
290
  </a>
291
+
292
  <!-- Apex Legends -->
293
+ <a href="#" class="game-card bg-light-black rounded-lg overflow-hidden transition duration-300 thin-border block">
294
  <div class="relative">
295
  <img src="https://cdn.akamai.steamstatic.com/steam/apps/1172470/header.jpg" alt="Apex Legends" class="w-full h-48 object-cover">
296
+ <div class="absolute top-2 left-2 game-badge text-xs px-2 py-1 rounded">NEW</div>
297
  </div>
298
  <div class="p-4">
299
  <h4 class="font-black text-lg mb-1">Apex Legends</h4>
 
309
  </div>
310
  </div>
311
  </a>
312
+
313
  <!-- PUBG -->
314
+ <a href="#" class="game-card bg-light-black rounded-lg overflow-hidden transition duration-300 thin-border block">
315
  <div class="relative">
316
  <img src="https://cdn.akamai.steamstatic.com/steam/apps/578080/header.jpg" alt="PUBG" class="w-full h-48 object-cover">
317
+ <div class="absolute top-2 left-2 game-badge text-xs px-2 py-1 rounded">HOT</div>
318
  </div>
319
  <div class="p-4">
320
  <h4 class="font-black text-lg mb-1">PUBG: BATTLEGROUNDS</h4>
 
334
  </div>
335
  </section>
336
 
337
+ <!-- Top Games Section (1000+ games with pagination) -->
338
+ <section id="top-games" class="py-12 px-6 bg-black border-b border-blood-red">
339
+ <div class="container mx-auto">
340
+ <div class="flex justify-between items-center mb-8">
341
+ <h3 class="text-3xl font-black">TOP <span class="text-blood-red">GAMES</span></h3>
342
+ <div class="flex items-center space-x-2">
343
+ <span class="text-gray-400 font-bold">Sort by:</span>
344
+ <select class="bg-light-black text-white px-3 py-1 rounded border border-gray-700">
345
+ <option>Popular</option>
346
+ <option>New Releases</option>
347
+ <option>Top Selling</option>
348
+ <option>Price: Low to High</option>
349
+ <option>Price: High to Low</option>
350
+ </select>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-6" id="games-container">
355
+ <!-- Games will be loaded here dynamically -->
356
+ </div>
357
+
358
+ <div class="flex justify-center mt-12">
359
+ <div class="flex space-x-2" id="pagination">
360
+ <!-- Pagination will be loaded here -->
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
  <!-- Categories -->
367
+ <section class="py-12 px-6 bg-black border-b border-blood-red">
368
  <div class="container mx-auto">
369
+ <h3 class="text-3xl font-black mb-8 text-center">BROWSE <span class="text-blood-red">CATEGORIES</span></h3>
370
 
371
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
372
+ <a href="#action-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
373
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
374
  <i class="fas fa-gamepad text-xl text-blood-red"></i>
375
  </div>
376
  <h4 class="font-black">Action</h4>
377
  </a>
378
 
379
+ <a href="#adventure-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
380
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
381
+ <i class="fas fa-mountain text-xl text-blood-red"></i>
382
  </div>
383
+ <h4 class="font-black">Adventure</h4>
384
+ </a>
385
+
386
+ <a href="#rpg-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
387
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
388
+ <i class="fas fa-dragon text-xl text-blood-red"></i>
389
+ </div>
390
+ <h4 class="font-black">RPG</h4>
391
+ </a>
392
+
393
+ <a href="#shooter-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
394
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
395
+ <i class="fas fa-crosshairs text-xl text-blood-red"></i>
396
+ </div>
397
+ <h4 class="font-black">Shooter</h4>
398
  </a>
399
 
400
+ <a href="#sports-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
401
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
402
+ <i class="fas fa-running text-xl text-blood-red"></i>
403
  </div>
404
+ <h4 class="font-black">Sports</h4>
405
  </a>
406
 
407
+ <a href="#racing-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
408
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
409
  <i class="fas fa-car text-xl text-blood-red"></i>
410
  </div>
411
  <h4 class="font-black">Racing</h4>
412
  </a>
413
 
414
+ <a href="#strategy-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
415
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
416
  <i class="fas fa-chess text-xl text-blood-red"></i>
417
  </div>
418
  <h4 class="font-black">Strategy</h4>
419
  </a>
420
 
421
+ <a href="#horror-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
422
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
423
+ <i class="fas fa-ghost text-xl text-blood-red"></i>
424
  </div>
425
+ <h4 class="font-black">Horror</h4>
426
+ </a>
427
+
428
+ <a href="#fighting-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
429
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
430
+ <i class="fas fa-fist-raised text-xl text-blood-red"></i>
431
+ </div>
432
+ <h4 class="font-black">Fighting</h4>
433
+ </a>
434
+
435
+ <a href="#simulation-games" class="category-btn bg-light-black hover:bg-blood-red rounded-lg p-6 text-center transition duration-300 cursor-pointer thin-border block">
436
+ <div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 border border-blood-red">
437
+ <i class="fas fa-plane text-xl text-blood-red"></i>
438
+ </div>
439
+ <h4 class="font-black">Simulation</h4>
440
  </a>
441
  </div>
442
  </div>
443
  </section>
444
 
445
  <!-- Special Offer -->
446
+ <section class="py-16 px-6 bg-black border-b border-blood-red">
447
  <div class="container mx-auto flex flex-col lg:flex-row items-center">
448
  <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
449
  <div class="bg-blood-red text-black text-xs font-black px-2 py-1 rounded-full inline-block mb-4">LIMITED TIME</div>
450
+ <h3 class="text-4xl font-black mb-4">SPECIAL <span class="text-blood-red">OFFER</span></h3>
451
+ <p class="text-xl mb-6 font-bold">Get the ultimate gaming bundle at an exclusive price for XGAMES members.</p>
452
  <div class="flex items-center mb-6">
453
+ <div class="text-5xl font-black text-blood-red mr-4">$99</div>
454
  <div class="text-gray-400">
455
+ <div class="line-through text-xl">$149</div>
456
  <div class="text-sm font-bold">Save $50</div>
457
  </div>
458
  </div>
459
+ <a href="#" class="bg-blood-red hover:bg-dark-red px-10 py-4 rounded-full font-bold text-lg transition duration-300 inline-block">
460
  GET THE BUNDLE
461
  </a>
462
  </div>
463
  <div class="lg:w-1/2 relative">
464
  <img src="https://cdn.akamai.steamstatic.com/steam/bundles/23238/6x0v0q0k0x8m4y1v/header.jpg" alt="Valve Complete Pack" class="rounded-lg w-full thin-border">
465
+ <div class="absolute -bottom-4 -right-4 bg-blood-red text-black px-6 py-3 rounded-full font-black text-xl">
466
  -33% OFF
467
  </div>
468
  </div>
469
  </div>
470
  </section>
471
 
472
+ <!-- Newsletter -->
473
+ <section class="py-16 px-6 bg-black">
474
+ <div class="container mx-auto max-w-4xl text-center">
475
+ <h3 class="text-3xl font-black mb-4">JOIN OUR <span class="text-blood-red">NEWSLETTER</span></h3>
476
+ <p class="text-xl mb-8 font-bold">Get exclusive deals, game recommendations, and news straight to your inbox.</p>
477
+ <div class="flex flex-col md:flex-row gap-4 justify-center">
478
+ <input type="email" placeholder="Your email address" class="bg-light-black text-white px-6 py-3 rounded-full w-full md:w-96 focus:outline-none focus:ring-2 focus:ring-blood-red border border-gray-700">
479
+ <button class="bg-blood-red hover:bg-dark-red px-8 py-3 rounded-full font-bold text-lg transition duration-300 whitespace-nowrap">
480
+ SUBSCRIBE
481
+ </button>
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
  <!-- Footer -->
487
+ <footer class="bg-black py-12 px-6 border-t border-blood-red">
488
  <div class="container mx-auto">
489
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
490
  <div>
491
  <div class="flex items-center mb-4">
492
+ <h4 class="text-2xl font-bold text-blood-red">XGAMES</h4>
 
493
  </div>
494
  <p class="text-gray-400 mb-4 font-bold">The ultimate destination for hardcore gamers.</p>
495
  <div class="flex space-x-4">
 
511
  <div>
512
  <h5 class="text-lg font-black mb-4 text-blood-red">STORE</h5>
513
  <ul class="space-y-2">
514
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Featured</a></li>
515
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">New Releases</a></li>
516
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Deals</a></li>
517
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Coming Soon</a></li>
518
  </ul>
519
  </div>
520
 
521
  <div>
522
  <h5 class="text-lg font-black mb-4 text-blood-red">ABOUT</h5>
523
  <ul class="space-y-2">
524
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Company</a></li>
525
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Careers</a></li>
526
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Blog</a></li>
527
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Contact</a></li>
528
  </ul>
529
  </div>
530
 
531
  <div>
532
  <h5 class="text-lg font-black mb-4 text-blood-red">SUPPORT</h5>
533
  <ul class="space-y-2">
534
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Help Center</a></li>
535
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Refunds</a></li>
536
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Terms</a></li>
537
+ <li><a href="#" class="text-gray-400 hover:text-blood-red transition duration-300 font-bold">Privacy</a></li>
538
  </ul>
539
  </div>
540
  </div>
541
 
542
  <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
543
+ <p class="text-gray-500 text-sm mb-4 md:mb-0 font-bold">© 2023 XGAMES. All rights reserved.</p>
544
  <div class="flex space-x-6">
545
+ <a href="#" class="text-gray-500 hover:text-blood-red text-sm transition duration-300 font-bold">Terms of Service</a>
546
+ <a href="#" class="text-gray-500 hover:text-blood-red text-sm transition duration-300 font-bold">Privacy Policy</a>
547
+ <a href="#" class="text-gray-500 hover:text-blood-red text-sm transition duration-300 font-bold">Cookie Policy</a>
548
  </div>
549
  </div>
550
  </div>
551
  </footer>
552
 
553
  <script>
554
+ // Game data - in a real app this would come from an API
555
+ const gameData = [
556
+ // Action Games (50)
557
+ { id: 1, name: "Grand Theft Auto V", price: 29.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/271590/header.jpg", tags: ["Action", "Open World", "Adventure"], badge: "TOP SELLER" },
558
+ { id: 2, name: "Red Dead Redemption 2", price: 59.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1174180/header.jpg", tags: ["Action", "Open World", "Adventure"], badge: "BEST SELLER" },
559
+ { id: 3, name: "The Witcher 3: Wild Hunt", price: 39.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/292030/header.jpg", tags: ["Action", "RPG", "Open World"], badge: "GOTY" },
560
+ { id: 4, name: "Cyberpunk 2077", price: 59.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1091500/header.jpg", tags: ["Action", "RPG", "Open World"], badge: "NEW" },
561
+ { id: 5, name: "Elden Ring", price: 59.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1245620/header.jpg", tags: ["Action", "RPG", "Souls-like"], badge: "GOTY" },
562
+ { id: 6, name: "Dark Souls III", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/374320/header.jpg", tags: ["Action", "RPG", "Souls-like"], badge: null },
563
+ { id: 7, name: "Sekiro: Shadows Die Twice", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/814380/header.jpg", tags: ["Action", "Adventure", "Souls-like"], badge: "GOTY" },
564
+ { id: 8, name: "God of War", price: 49.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1593500/header.jpg", tags: ["Action", "Adventure", "RPG"], badge: "BEST SELLER" },
565
+ { id: 9, name: "Horizon Zero Dawn", price: 39.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1151640/header.jpg", tags: ["Action", "RPG", "Open World"], badge: null },
566
+ { id: 10, name: "Assassin's Creed Valhalla", price: 59.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/2208920/header.jpg", tags: ["Action", "RPG", "Open World"], badge: "NEW" },
567
 
568
+ // Shooter Games (50)
569
+ { id: 51, name: "Counter-Strike 2", price: 0, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/730/header.jpg", tags: ["Shooter", "FPS", "Competitive"], badge: "TOP PLAYED" },
570
+ { id: 52, name: "Call of Duty: Modern Warfare II", price: 69.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1938090/header.jpg", tags: ["Shooter", "FPS", "Action"], badge: "BEST SELLER" },
571
+ { id: 53, name: "Apex Legends", price: 0, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1172470/header.jpg", tags: ["Shooter", "FPS", "Battle Royale"], badge: "FREE" },
572
+ { id: 54, name: "PUBG: BATTLEGROUNDS", price: 0, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/578080/header.jpg", tags: ["Shooter", "FPS", "Battle Royale"], badge: "TOP PLAYED" },
573
+ { id: 55, name: "Destiny 2", price: 0, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1085660/header.jpg", tags: ["Shooter", "FPS", "RPG"], badge: "FREE" },
574
+ { id: 56, name: "Overwatch 2", price: 0, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/2357570/header.jpg", tags: ["Shooter", "FPS", "Hero"], badge: "FREE" },
575
+ { id: 57, name: "Rainbow Six Siege", price: 19.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/359550/header.jpg", tags: ["Shooter", "FPS", "Tactical"], badge: null },
576
+ { id: 58, name: "Battlefield 2042", price: 59.99, rating: 4.3, image: "https://cdn.akamai.steamstatic.com/steam/apps/1517290/header.jpg", tags: ["Shooter", "FPS", "Action"], badge: "NEW" },
577
+ { id: 59, name: "DOOM Eternal", price: 39.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/782330/header.jpg", tags: ["Shooter", "FPS", "Action"], badge: "GOTY" },
578
+ { id: 60, name: "Borderlands 3", price: 59.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/397540/header.jpg", tags: ["Shooter", "FPS", "RPG"], badge: null },
579
 
580
+ // RPG Games (50)
581
+ { id: 101, name: "Baldur's Gate 3", price: 59.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1086940/header.jpg", tags: ["RPG", "Adventure", "Turn-Based"], badge: "GOTY" },
582
+ { id: 102, name: "Starfield", price: 69.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1716740/header.jpg", tags: ["RPG", "Sci-Fi", "Open World"], badge: "NEW" },
583
+ { id: 103, name: "Divinity: Original Sin 2", price: 44.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/435150/header.jpg", tags: ["RPG", "Adventure", "Turn-Based"], badge: "GOTY" },
584
+ { id: 104, name: "Pathfinder: Wrath of the Righteous", price: 39.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1184370/header.jpg", tags: ["RPG", "Adventure", "CRPG"], badge: null },
585
+ { id: 105, name: "Pillars of Eternity II: Deadfire", price: 49.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/560130/header.jpg", tags: ["RPG", "Adventure", "CRPG"], badge: null },
586
+ { id: 106, name: "Disco Elysium", price: 39.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/632470/header.jpg", tags: ["RPG", "Adventure", "CRPG"], badge: "GOTY" },
587
+ { id: 107, name: "Final Fantasy VII Remake", price: 69.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/1462040/header.jpg", tags: ["RPG", "Adventure", "Action"], badge: "BEST SELLER" },
588
+ { id: 108, name: "Persona 5 Royal", price: 59.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1687950/header.jpg", tags: ["RPG", "Adventure", "JRPG"], badge: "GOTY" },
589
+ { id: 109, name: "Dragon Age: Inquisition", price: 29.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1222690/header.jpg", tags: ["RPG", "Adventure", "Action"], badge: null },
590
+ { id: 110, name: "The Elder Scrolls V: Skyrim", price: 39.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/489830/header.jpg", tags: ["RPG", "Adventure", "Open World"], badge: "GOTY" },
591
 
592
+ // Adventure Games (50)
593
+ { id: 151, name: "The Last of Us Part I", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/1888930/header.jpg", tags: ["Adventure", "Action", "Story Rich"], badge: "BEST SELLER" },
594
+ { id: 152, name: "Uncharted: Legacy of Thieves Collection", price: 49.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1659420/header.jpg", tags: ["Adventure", "Action", "Story Rich"], badge: null },
595
+ { id: 153, name: "Marvel's Spider-Man Remastered", price: 59.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1817070/header.jpg", tags: ["Adventure", "Action", "Open World"], badge: "BEST SELLER" },
596
+ { id: 154, name: "Hogwarts Legacy", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/990080/header.jpg", tags: ["Adventure", "Action", "Open World"], badge: "NEW" },
597
+ { id: 155, name: "Stray", price: 29.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1332010/header.jpg", tags: ["Adventure", "Indie", "Story Rich"], badge: "GOTY" },
598
+ { id: 156, name: "It Takes Two", price: 39.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1426210/header.jpg", tags: ["Adventure", "Co-op", "Platformer"], badge: "GOTY" },
599
+ { id: 157, name: "Psychonauts 2", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/607080/header.jpg", tags: ["Adventure", "Platformer", "Story Rich"], badge: "GOTY" },
600
+ { id: 158, name: "Kena: Bridge of Spirits", price: 39.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1954200/header.jpg", tags: ["Adventure", "Action", "Story Rich"], badge: null },
601
+ { id: 159, name: "Ratchet & Clank: Rift Apart", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/1895880/header.jpg", tags: ["Adventure", "Action", "Platformer"], badge: "BEST SELLER" },
602
+ { id: 160, name: "Little Nightmares II", price: 29.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/860510/header.jpg", tags: ["Adventure", "Horror", "Puzzle"], badge: null },
603
 
604
+ // Strategy Games (50)
605
+ { id: 201, name: "Civilization VI", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/289070/header.jpg", tags: ["Strategy", "Turn-Based", "4X"], badge: "BEST SELLER" },
606
+ { id: 202, name: "Total War: WARHAMMER III", price: 59.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1142710/header.jpg", tags: ["Strategy", "RTS", "Fantasy"], badge: "NEW" },
607
+ { id: 203, name: "Crusader Kings III", price: 49.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/1158310/header.jpg", tags: ["Strategy", "RPG", "Grand Strategy"], badge: "GOTY" },
608
+ { id: 204, name: "Age of Empires IV", price: 59.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1466860/header.jpg", tags: ["Strategy", "RTS", "Historical"], badge: "BEST SELLER" },
609
+ { id: 205, name: "Stellaris", price: 39.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/281990/header.jpg", tags: ["Strategy", "4X", "Sci-Fi"], badge: null },
610
+ { id: 206, name: "XCOM 2", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/268500/header.jpg", tags: ["Strategy", "Turn-Based", "Tactical"], badge: "GOTY" },
611
+ { id: 207, name: "Company of Heroes 3", price: 59.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1677280/header.jpg", tags: ["Strategy", "RTS", "WWII"], badge: "NEW" },
612
+ { id: 208, name: "Humankind", price: 49.99, rating: 4.4, image: "https://cdn.akamai.steamstatic.com/steam/apps/1124300/header.jpg", tags: ["Strategy", "4X", "Historical"], badge: null },
613
+ { id: 209, name: "Northgard", price: 29.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/466560/header.jpg", tags: ["Strategy", "RTS", "Viking"], badge: null },
614
+ { id: 210, name: "Into the Breach", price: 14.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/590380/header.jpg", tags: ["Strategy", "Turn-Based", "Roguelike"], badge: "GOTY" },
615
 
616
+ // Racing Games (50)
617
+ { id: 251, name: "Forza Horizon 5", price: 59.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1551360/header.jpg", tags: ["Racing", "Open World", "Simulation"], badge: "BEST SELLER" },
618
+ { id: 252, name: "F1 22", price: 59.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1692250/header.jpg", tags: ["Racing", "Simulation", "Sports"], badge: "NEW" },
619
+ { id: 253, name: "Need for Speed Unbound", price: 59.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1846380/header.jpg", tags: ["Racing", "Arcade", "Open World"], badge: "NEW" },
620
+ { id: 254, name: "Assetto Corsa Competizione", price: 39.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/805550/header.jpg", tags: ["Racing", "Simulation", "GT3"], badge: null },
621
+ { id: 255, name: "Dirt Rally 2.0", price: 39.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/690790/header.jpg", tags: ["Racing", "Simulation", "Rally"], badge: null },
622
+ { id: 256, name: "Project CARS 3", price: 49.99, rating: 4.3, image: "https://cdn.akamai.steamstatic.com/steam/apps/958400/header.jpg", tags: ["Racing", "Simulation", "Arcade"], badge: null },
623
+ { id: 257, name: "Wreckfest", price: 29.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/228380/header.jpg", tags: ["Racing", "Destruction", "Simulation"], badge: null },
624
+ { id: 258, name: "Trackmania", price: 0, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1104550/header.jpg", tags: ["Racing", "Arcade", "Time Trial"], badge: "FREE" },
625
+ { id: 259, name: "GRID Legends", price: 59.99, rating: 4.4, image: "https://cdn.akamai.steamstatic.com/steam/apps/1307710/header.jpg", tags: ["Racing", "Simulation", "Arcade"], badge: "NEW" },
626
+ { id: 260, name: "Hot Wheels Unleashed", price: 49.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1271700/header.jpg", tags: ["Racing", "Arcade", "Toys"], badge: null },
627
 
628
+ // Sports Games (50)
629
+ { id: 301, name: "FIFA 23", price: 59.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1811260/header.jpg", tags: ["Sports", "Football", "Simulation"], badge: "NEW" },
630
+ { id: 302, name: "NBA 2K23", price: 59.99, rating: 4.3, image: "https://cdn.akamai.steamstatic.com/steam/apps/1919590/header.jpg", tags: ["Sports", "Basketball", "Simulation"], badge: "NEW" },
631
+ { id: 303, name: "Rocket League", price: 0, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/252950/header.jpg", tags: ["Sports", "Racing", "Soccer"], badge: "FREE" },
632
+ { id: 304, name: "Football Manager 2023", price: 59.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1901640/header.jpg", tags: ["Sports", "Football", "Management"], badge: "NEW" },
633
+ { id: 305, name: "WWE 2K22", price: 59.99, rating: 4.4, image: "https://cdn.akamai.steamstatic.com/steam/apps/1255630/header.jpg", tags: ["Sports", "Wrestling", "Fighting"], badge: null },
634
+ { id: 306, name: "PGA TOUR 2K23", price: 59.99, rating: 4.3, image: "https://cdn.akamai.steamstatic.com/steam/apps/1665460/header.jpg", tags: ["Sports", "Golf", "Simulation"], badge: "NEW" },
635
+ { id: 307, name: "Tony Hawk's Pro Skater 1 + 2", price: 39.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1327430/header.jpg", tags: ["Sports", "Skateboarding", "Arcade"], badge: null },
636
+ { id: 308, name: "Steep", price: 29.99, rating: 4.4, image: "https://cdn.akamai.steamstatic.com/steam/apps/460920/header.jpg", tags: ["Sports", "Winter", "Open World"], badge: null },
637
+ { id: 309, name: "The Golf Club 2019", price: 39.99, rating: 4.3, image: "https://cdn.akamai.steamstatic.com/steam/apps/712950/header.jpg", tags: ["Sports", "Golf", "Simulation"], badge: null },
638
+ { id: 310, name: "Super Mega Baseball 4", price: 44.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1889270/header.jpg", tags: ["Sports", "Baseball", "Arcade"], badge: "NEW" },
639
 
640
+ // Horror Games (50)
641
+ { id: 351, name: "Resident Evil 4", price: 59.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/2050650/header.jpg", tags: ["Horror", "Action", "Survival"], badge: "NEW" },
642
+ { id: 352, name: "Dead Space", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/1693980/header.jpg", tags: ["Horror", "Action", "Sci-Fi"], badge: "NEW" },
643
+ { id: 353, name: "The Callisto Protocol", price: 59.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1544020/header.jpg", tags: ["Horror", "Action", "Survival"], badge: "NEW" },
644
+ { id: 354, name: "Phasmophobia", price: 13.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/739630/header.jpg", tags: ["Horror", "Multiplayer", "Co-op"], badge: "TOP SELLER" },
645
+ { id: 355, name: "The Outlast Trials", price: 29.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1304930/header.jpg", tags: ["Horror", "Survival", "Multiplayer"], badge: "NEW" },
646
+ { id: 356, name: "Amnesia: The Bunker", price: 24.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1944430/header.jpg", tags: ["Horror", "Survival", "Psychological"], badge: "NEW" },
647
+ { id: 357, name: "The Dark Pictures Anthology", price: 29.99, rating: 4.4, image: "https://cdn.akamai.steamstatic.com/steam/apps/939960/header.jpg", tags: ["Horror", "Adventure", "Interactive"], badge: null },
648
+ { id: 358, name: "Visage", price: 34.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/515430/header.jpg", tags: ["Horror", "Psychological", "Survival"], badge: null },
649
+ { id: 359, name: "SOMA", price: 29.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/282140/header.jpg", tags: ["Horror", "Sci-Fi", "Story Rich"], badge: null },
650
+ { id: 360, name: "Alien: Isolation", price: 39.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/214490/header.jpg", tags: ["Horror", "Sci-Fi", "Stealth"], badge: "GOTY" },
651
 
652
+ // Fighting Games (50)
653
+ { id: 401, name: "Street Fighter 6", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/1364780/header.jpg", tags: ["Fighting", "Action", "Arcade"], badge: "NEW" },
654
+ { id: 402, name: "Mortal Kombat 11", price: 49.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/976310/header.jpg", tags: ["Fighting", "Action", "Gore"], badge: "BEST SELLER" },
655
+ { id: 403, name: "Tekken 7", price: 39.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/389730/header.jpg", tags: ["Fighting", "Action", "Arcade"], badge: null },
656
+ { id: 404, name: "Dragon Ball FighterZ", price: 59.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/678950/header.jpg", tags: ["Fighting", "Anime", "Action"], badge: "BEST SELLER" },
657
+ { id: 405, name: "Guilty Gear -Strive-", price: 59.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1384160/header.jpg", tags: ["Fighting", "Anime", "Action"], badge: null },
658
+ { id: 406, name: "Brawlhalla", price: 0, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/291550/header.jpg", tags: ["Fighting", "Platformer", "Free to Play"], badge: "FREE" },
659
+ { id: 407, name: "Mortal Kombat X", price: 19.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/307780/header.jpg", tags: ["Fighting", "Action", "Gore"], badge: null },
660
+ { id: 408, name: "Injustice 2", price: 49.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/627270/header.jpg", tags: ["Fighting", "Action", "Superhero"], badge: null },
661
+ { id: 409, name: "Soulcalibur VI", price: 49.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/544750/header.jpg", tags: ["Fighting", "Action", "3D"], badge: null },
662
+ { id: 410, name: "The King of Fighters XV", price: 59.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1498570/header.jpg", tags: ["Fighting", "Action", "Arcade"], badge: "NEW" },
663
 
664
+ // Simulation Games (50)
665
+ { id: 451, name: "Microsoft Flight Simulator", price: 59.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1250410/header.jpg", tags: ["Simulation", "Flight", "Open World"], badge: "BEST SELLER" },
666
+ { id: 452, name: "Euro Truck Simulator 2", price: 19.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/227300/header.jpg", tags: ["Simulation", "Driving", "Open World"], badge: "TOP SELLER" },
667
+ { id: 453, name: "Farming Simulator 22", price: 39.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1248130/header.jpg", tags: ["Simulation", "Farming", "Open World"], badge: "BEST SELLER" },
668
+ { id: 454, name: "Cities: Skylines", price: 29.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/255710/header.jpg", tags: ["Simulation", "City Builder", "Management"], badge: "TOP SELLER" },
669
+ { id: 455, name: "PowerWash Simulator", price: 24.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1290000/header.jpg", tags: ["Simulation", "Relaxing", "Casual"], badge: "TOP SELLER" },
670
+ { id: 456, name: "Car Mechanic Simulator 2021", price: 29.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/1190000/header.jpg", tags: ["Simulation", "Cars", "Management"], badge: null },
671
+ { id: 457, name: "House Flipper", price: 24.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/613100/header.jpg", tags: ["Simulation", "Relaxing", "Casual"], badge: null },
672
+ { id: 458, name: "Train Sim World 3", price: 39.99, rating: 4.4, image: "https://cdn.akamai.steamstatic.com/steam/apps/1944790/header.jpg", tags: ["Simulation", "Trains", "Driving"], badge: "NEW" },
673
+ { id: 459, name: "Planet Zoo", price: 44.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/703080/header.jpg", tags: ["Simulation", "Building", "Management"], badge: null },
674
+ { id: 460, name: "Kerbal Space Program", price: 39.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/220200/header.jpg", tags: ["Simulation", "Space", "Physics"], badge: "GOTY" },
675
 
676
+ // Indie Games (50)
677
+ { id: 501, name: "Hades", price: 24.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/1145360/header.jpg", tags: ["Indie", "Action", "Roguelike"], badge: "GOTY" },
678
+ { id: 502, name: "Celeste", price: 19.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/504230/header.jpg", tags: ["Indie", "Platformer", "Story Rich"], badge: "GOTY" },
679
+ { id: 503, name: "Hollow Knight", price: 14.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/367520/header.jpg", tags: ["Indie", "Adventure", "Metroidvania"], badge: "GOTY" },
680
+ { id: 504, name: "Undertale", price: 9.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/391540/header.jpg", tags: ["Indie", "RPG", "Story Rich"], badge: "GOTY" },
681
+ { id: 505, name: "Cuphead", price: 19.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/268910/header.jpg", tags: ["Indie", "Action", "Platformer"], badge: "GOTY" },
682
+ { id: 506, name: "Dead Cells", price: 24.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/588650/header.jpg", tags: ["Indie", "Action", "Roguelike"], badge: "GOTY" },
683
+ { id: 507, name: "Terraria", price: 9.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/105600/header.jpg", tags: ["Indie", "Adventure", "Sandbox"], badge: "TOP SELLER" },
684
+ { id: 508, name: "Stardew Valley", price: 14.99, rating: 4.9, image: "https://cdn.akamai.steamstatic.com/steam/apps/413150/header.jpg", tags: ["Indie", "Farming", "RPG"], badge: "TOP SELLER" },
685
+ { id: 509, name: "Among Us", price: 4.99, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/945360/header.jpg", tags: ["Indie", "Multiplayer", "Party"], badge: "TOP SELLER" },
686
+ { id: 510, name: "Risk of Rain 2", price: 24.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/632360/header.jpg", tags: ["Indie", "Action", "Roguelike"], badge: "GOTY" },
687
 
688
+ // MMO Games (50)
689
+ { id: 551, name: "Final Fantasy XIV Online", price: 19.99, rating: 4.8, image: "https://cdn.akamai.steamstatic.com/steam/apps/39210/header.jpg", tags: ["MMO", "RPG", "Fantasy"], badge: "BEST SELLER" },
690
+ { id: 552, name: "Lost Ark", price: 0, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/1599340/header.jpg", tags: ["MMO", "Action", "RPG"], badge: "FREE" },
691
+ { id: 553, name: "Guild Wars 2", price: 0, rating: 4.7, image: "https://cdn.akamai.steamstatic.com/steam/apps/1284210/header.jpg", tags: ["MMO", "RPG", "Fantasy"], badge: "FREE" },
692
+ { id: 554, name: "Black Desert Online", price: 9.99, rating: 4.5, image: "https://cdn.akamai.steamstatic.com/steam/apps/582660/header.jpg", tags: ["MMO", "RPG", "Action"], badge: null },
693
+ { id: 555, name: "Elder Scrolls Online", price: 19.99, rating: 4.6, image: "https://cdn.akamai.steamstatic.com/steam/apps/306130/header.jpg", tags: ["MMO", "RPG", "Fantasy"], badge: "BEST SELLER" },
694
+ { id: 556, name: "New World", price: 39.99, rating: 4.4, image: "https://cdn.akamai
 
 
 
 
 
 
 
695
  </html>
prompts.txt CHANGED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ revert the x back and make CATEGORIES my not direct to steam but opens a libray of my own website with all the games suggested from steam and change the font
2
+ you only did one category i want all of them to work like that and change the font to arial
3
+ i think u forgot that the theme is red and black also add more games to the website i need atleast a 1000 of the top played games and add more to the categories too