Hugging Face's logo

Spaces:
REDMOOD
/
gamerzone
Running

App Files Community
REDMOOD commited on
Commit
72c5976
·
verified ·
1 Parent(s): c6144d2

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +821 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gamerzone
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: gamerzone
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,821 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GamerZone - Steam-like 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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #1a1a1a;
15
+ color: #e6e6e6;
16
+ }
17
+
18
+ .game-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
21
+ }
22
+
23
+ .discount-badge {
24
+ position: absolute;
25
+ top: 10px;
26
+ right: 10px;
27
+ background-color: #4c6b22;
28
+ color: #beee11;
29
+ padding: 3px 8px;
30
+ font-weight: bold;
31
+ border-radius: 3px;
32
+ font-size: 14px;
33
+ }
34
+
35
+ .nav-link:hover {
36
+ color: #fff;
37
+ background-color: rgba(255, 255, 255, 0.1);
38
+ }
39
+
40
+ .progress-bar {
41
+ height: 4px;
42
+ background-color: rgba(255, 255, 255, 0.2);
43
+ border-radius: 2px;
44
+ }
45
+
46
+ .progress-fill {
47
+ height: 100%;
48
+ background-color: #66c0f4;
49
+ border-radius: 2px;
50
+ }
51
+
52
+ .review-card {
53
+ background-color: #2a2a2a;
54
+ transition: all 0.3s ease;
55
+ }
56
+
57
+ .review-card:hover {
58
+ background-color: #333333;
59
+ }
60
+
61
+ .system-req {
62
+ background-color: #2a2a2a;
63
+ border-left: 3px solid #66c0f4;
64
+ }
65
+
66
+ .carousel-item {
67
+ min-width: 100%;
68
+ transition: transform 0.5s ease;
69
+ }
70
+
71
+ .carousel-container {
72
+ scroll-behavior: smooth;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body>
77
+ <!-- Header/Navigation -->
78
+ <header class="bg-[#171a21] sticky top-0 z-50 shadow-lg">
79
+ <div class="container mx-auto px-4 py-3">
80
+ <div class="flex items-center justify-between">
81
+ <div class="flex items-center space-x-10">
82
+ <div class="flex items-center">
83
+ <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
84
+ <i class="fas fa-gamepad text-white text-xl"></i>
85
+ </div>
86
+ <span class="ml-2 text-white font-bold text-xl">GamerZone</span>
87
+ </div>
88
+ <nav class="hidden md:flex space-x-1">
89
+ <a href="#" class="nav-link px-3 py-2 rounded text-sm font-medium text-gray-300 hover:text-white">Store</a>
90
+ <a href="#" class="nav-link px-3 py-2 rounded text-sm font-medium text-gray-300 hover:text-white">Community</a>
91
+ <a href="#" class="nav-link px-3 py-2 rounded text-sm font-medium text-gray-300 hover:text-white">About</a>
92
+ <a href="#" class="nav-link px-3 py-2 rounded text-sm font-medium text-gray-300 hover:text-white">Support</a>
93
+ </nav>
94
+ </div>
95
+ <div class="flex items-center space-x-4">
96
+ <div class="relative hidden md:block">
97
+ <input type="text" placeholder="Search games..." class="bg-[#316282] text-white placeholder-gray-300 rounded-md px-4 py-1 pl-10 w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
98
+ <i class="fas fa-search absolute left-3 top-2 text-gray-300"></i>
99
+ </div>
100
+ <button class="bg-[#5c7e10] hover:bg-[#6e9319] text-white px-4 py-1 rounded text-sm font-medium">
101
+ <i class="fas fa-shopping-cart mr-1"></i> Cart (3)
102
+ </button>
103
+ <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center cursor-pointer">
104
+ <i class="fas fa-user text-white"></i>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </header>
110
+
111
+ <!-- Main Content -->
112
+ <main class="container mx-auto px-4 py-6">
113
+ <!-- Hero Banner -->
114
+ <div class="relative rounded-lg overflow-hidden mb-8">
115
+ <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div>
116
+ <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Featured Game" class="w-full h-96 object-cover">
117
+ <div class="absolute bottom-0 left-0 z-20 p-8 w-full md:w-1/2">
118
+ <h1 class="text-4xl font-bold text-white mb-2">Cyber Nexus 2077</h1>
119
+ <p class="text-gray-300 mb-4">Enter a dystopian future where technology and humanity collide in this open-world RPG.</p>
120
+ <div class="flex items-center mb-4">
121
+ <div class="flex mr-4">
122
+ <i class="fas fa-star text-yellow-400"></i>
123
+ <i class="fas fa-star text-yellow-400"></i>
124
+ <i class="fas fa-star text-yellow-400"></i>
125
+ <i class="fas fa-star text-yellow-400"></i>
126
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
127
+ <span class="ml-1 text-gray-300 text-sm">(4,892)</span>
128
+ </div>
129
+ <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">RPG</span>
130
+ <span class="bg-purple-500 text-white text-xs px-2 py-1 rounded ml-2">Open World</span>
131
+ </div>
132
+ <div class="flex items-center">
133
+ <div class="bg-[#4c6b22] text-[#beee11] px-3 py-1 font-bold mr-4">
134
+ -50%
135
+ </div>
136
+ <div class="flex flex-col">
137
+ <span class="text-gray-400 line-through text-sm">$59.99</span>
138
+ <span class="text-white font-bold text-xl">$29.99</span>
139
+ </div>
140
+ <button class="ml-6 bg-[#5c7e10] hover:bg-[#6e9319] text-white px-6 py-2 rounded font-medium">
141
+ Add to Cart
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Featured Games Carousel -->
148
+ <section class="mb-10">
149
+ <div class="flex items-center justify-between mb-4">
150
+ <h2 class="text-2xl font-bold text-white">Featured Games</h2>
151
+ <div class="flex space-x-2">
152
+ <button onclick="scrollCarousel('featured', -1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
153
+ <i class="fas fa-chevron-left text-white"></i>
154
+ </button>
155
+ <button onclick="scrollCarousel('featured', 1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
156
+ <i class="fas fa-chevron-right text-white"></i>
157
+ </button>
158
+ </div>
159
+ </div>
160
+ <div id="featured-carousel" class="carousel-container relative flex overflow-x-auto space-x-4 pb-4 scrollbar-hide">
161
+ <!-- Game 1 -->
162
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
163
+ <div class="relative">
164
+ <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover">
165
+ <div class="discount-badge">-30%</div>
166
+ </div>
167
+ <div class="p-4">
168
+ <h3 class="text-white font-medium mb-1">Space Odyssey</h3>
169
+ <div class="flex items-center mb-2">
170
+ <div class="flex mr-2">
171
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
172
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
173
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
174
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
175
+ <i class="far fa-star text-yellow-400 text-xs"></i>
176
+ </div>
177
+ <span class="text-gray-400 text-xs">(2,145)</span>
178
+ </div>
179
+ <div class="flex items-center">
180
+ <span class="text-gray-400 line-through text-sm mr-2">$39.99</span>
181
+ <span class="text-white font-bold">$27.99</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Game 2 -->
187
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
188
+ <div class="relative">
189
+ <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover">
190
+ </div>
191
+ <div class="p-4">
192
+ <h3 class="text-white font-medium mb-1">Cyber Nexus 2077</h3>
193
+ <div class="flex items-center mb-2">
194
+ <div class="flex mr-2">
195
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
196
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
197
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
198
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
199
+ <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>
200
+ </div>
201
+ <span class="text-gray-400 text-xs">(4,892)</span>
202
+ </div>
203
+ <div class="flex items-center">
204
+ <span class="text-gray-400 line-through text-sm mr-2">$59.99</span>
205
+ <span class="text-white font-bold">$29.99</span>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Game 3 -->
211
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
212
+ <div class="relative">
213
+ <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Game Cover" class="w-full h-36 object-cover">
214
+ <div class="discount-badge">-60%</div>
215
+ </div>
216
+ <div class="p-4">
217
+ <h3 class="text-white font-medium mb-1">Zombie Apocalypse</h3>
218
+ <div class="flex items-center mb-2">
219
+ <div class="flex mr-2">
220
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
221
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
222
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
223
+ <i class="far fa-star text-yellow-400 text-xs"></i>
224
+ <i class="far fa-star text-yellow-400 text-xs"></i>
225
+ </div>
226
+ <span class="text-gray-400 text-xs">(1,023)</span>
227
+ </div>
228
+ <div class="flex items-center">
229
+ <span class="text-gray-400 line-through text-sm mr-2">$24.99</span>
230
+ <span class="text-white font-bold">$9.99</span>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Game 4 -->
236
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
237
+ <div class="relative">
238
+ <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Game Cover" class="w-full h-36 object-cover">
239
+ </div>
240
+ <div class="p-4">
241
+ <h3 class="text-white font-medium mb-1">Fantasy Realms</h3>
242
+ <div class="flex items-center mb-2">
243
+ <div class="flex mr-2">
244
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
245
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
246
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
247
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
248
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
249
+ </div>
250
+ <span class="text-gray-400 text-xs">(5,621)</span>
251
+ </div>
252
+ <div class="flex items-center">
253
+ <span class="text-white font-bold">$49.99</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Game 5 -->
259
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
260
+ <div class="relative">
261
+ <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover">
262
+ <div class="discount-badge">-25%</div>
263
+ </div>
264
+ <div class="p-4">
265
+ <h3 class="text-white font-medium mb-1">Racing Legends</h3>
266
+ <div class="flex items-center mb-2">
267
+ <div class="flex mr-2">
268
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
269
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
270
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
271
+ <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>
272
+ <i class="far fa-star text-yellow-400 text-xs"></i>
273
+ </div>
274
+ <span class="text-gray-400 text-xs">(3,456)</span>
275
+ </div>
276
+ <div class="flex items-center">
277
+ <span class="text-gray-400 line-through text-sm mr-2">$34.99</span>
278
+ <span class="text-white font-bold">$26.24</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </section>
284
+
285
+ <!-- Game Details Section -->
286
+ <section class="mb-10">
287
+ <div class="flex flex-col md:flex-row gap-8">
288
+ <!-- Left Column -->
289
+ <div class="w-full md:w-2/3">
290
+ <!-- Game Images Carousel -->
291
+ <div class="mb-6">
292
+ <div class="flex items-center justify-between mb-4">
293
+ <h2 class="text-xl font-bold text-white">Screenshots</h2>
294
+ <div class="flex space-x-2">
295
+ <button onclick="scrollCarousel('screenshots', -1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
296
+ <i class="fas fa-chevron-left text-white"></i>
297
+ </button>
298
+ <button onclick="scrollCarousel('screenshots', 1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
299
+ <i class="fas fa-chevron-right text-white"></i>
300
+ </button>
301
+ </div>
302
+ </div>
303
+ <div id="screenshots-carousel" class="carousel-container relative flex overflow-x-auto space-x-4 pb-4 scrollbar-hide">
304
+ <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Screenshot 1" class="carousel-item flex-shrink-0 w-full h-64 object-cover rounded-lg">
305
+ <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Screenshot 2" class="carousel-item flex-shrink-0 w-full h-64 object-cover rounded-lg">
306
+ <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Screenshot 3" class="carousel-item flex-shrink-0 w-full h-64 object-cover rounded-lg">
307
+ <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Screenshot 4" class="carousel-item flex-shrink-0 w-full h-64 object-cover rounded-lg">
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Game Description -->
312
+ <div class="mb-8">
313
+ <h2 class="text-xl font-bold text-white mb-4">About the Game</h2>
314
+ <p class="text-gray-300 mb-4">
315
+ Cyber Nexus 2077 is an open-world, action-adventure story set in Night City, a megalopolis obsessed with power, glamour and body modification. You play as V, a mercenary outlaw going after a one-of-a-kind implant that is the key to immortality.
316
+ </p>
317
+ <p class="text-gray-300 mb-4">
318
+ Explore a vast city where the choices you make shape the story and the world around you. Become a cyberpunk, an urban mercenary equipped with cybernetic enhancements and build your legend on the streets of Night City.
319
+ </p>
320
+ <p class="text-gray-300">
321
+ With hundreds of weapons, cyberware modifications, and other ways to customize your character, you can play Cyber Nexus 2077 exactly the way you want.
322
+ </p>
323
+ </div>
324
+
325
+ <!-- System Requirements -->
326
+ <div class="mb-8">
327
+ <h2 class="text-xl font-bold text-white mb-4">System Requirements</h2>
328
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
329
+ <div class="system-req p-4 rounded">
330
+ <h3 class="text-white font-medium mb-2">Minimum</h3>
331
+ <ul class="text-gray-300 text-sm space-y-1">
332
+ <li><span class="font-medium">OS:</span> Windows 10 64-bit</li>
333
+ <li><span class="font-medium">Processor:</span> Intel Core i5-3570K or AMD FX-8310</li>
334
+ <li><span class="font-medium">Memory:</span> 8 GB RAM</li>
335
+ <li><span class="font-medium">Graphics:</span> NVIDIA GeForce GTX 780 or AMD Radeon RX 470</li>
336
+ <li><span class="font-medium">Storage:</span> 70 GB available space</li>
337
+ </ul>
338
+ </div>
339
+ <div class="system-req p-4 rounded">
340
+ <h3 class="text-white font-medium mb-2">Recommended</h3>
341
+ <ul class="text-gray-300 text-sm space-y-1">
342
+ <li><span class="font-medium">OS:</span> Windows 10 64-bit</li>
343
+ <li><span class="font-medium">Processor:</span> Intel Core i7-4790 or AMD Ryzen 3 3200G</li>
344
+ <li><span class="font-medium">Memory:</span> 12 GB RAM</li>
345
+ <li><span class="font-medium">Graphics:</span> NVIDIA GeForce GTX 1060 or AMD Radeon RX 590</li>
346
+ <li><span class="font-medium">Storage:</span> 70 GB available space (SSD recommended)</li>
347
+ </ul>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Reviews -->
353
+ <div>
354
+ <div class="flex items-center justify-between mb-4">
355
+ <h2 class="text-xl font-bold text-white">User Reviews</h2>
356
+ <button class="text-blue-400 hover:text-blue-300 text-sm font-medium">See all reviews</button>
357
+ </div>
358
+
359
+ <div class="flex items-center mb-6">
360
+ <div class="mr-4">
361
+ <span class="text-4xl font-bold text-white">89%</span>
362
+ <span class="block text-sm text-gray-400">of 4,892 reviews</span>
363
+ </div>
364
+ <div class="flex-1">
365
+ <div class="flex items-center mb-1">
366
+ <span class="text-sm text-gray-300 w-16">Positive</span>
367
+ <div class="progress-bar flex-1 mx-2">
368
+ <div class="progress-fill" style="width: 89%"></div>
369
+ </div>
370
+ <span class="text-sm text-gray-300">4,356</span>
371
+ </div>
372
+ <div class="flex items-center mb-1">
373
+ <span class="text-sm text-gray-300 w-16">Negative</span>
374
+ <div class="progress-bar flex-1 mx-2">
375
+ <div class="progress-fill bg-red-500" style="width: 11%"></div>
376
+ </div>
377
+ <span class="text-sm text-gray-300">536</span>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- Review Cards -->
383
+ <div class="space-y-4">
384
+ <!-- Review 1 -->
385
+ <div class="review-card p-4 rounded-lg">
386
+ <div class="flex items-center mb-3">
387
+ <div class="w-10 h-10 rounded-full bg-gray-600 mr-3"></div>
388
+ <div>
389
+ <h4 class="text-white font-medium">CyberPunkFan</h4>
390
+ <div class="flex items-center">
391
+ <div class="flex mr-1">
392
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
393
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
394
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
395
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
396
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
397
+ </div>
398
+ <span class="text-gray-400 text-xs">32 hrs on record</span>
399
+ </div>
400
+ </div>
401
+ <div class="ml-auto text-gray-400 text-sm">Posted: 2 days ago</div>
402
+ </div>
403
+ <p class="text-gray-300 mb-3">
404
+ Absolutely stunning game! The world is incredibly detailed and immersive. The story is engaging and the characters feel real. Definitely worth every penny, especially at this discounted price.
405
+ </p>
406
+ <div class="flex items-center text-sm">
407
+ <button class="text-gray-400 hover:text-white mr-4">
408
+ <i class="far fa-thumbs-up mr-1"></i> 124
409
+ </button>
410
+ <button class="text-gray-400 hover:text-white">
411
+ <i class="far fa-thumbs-down mr-1"></i> 3
412
+ </button>
413
+ <button class="ml-auto text-blue-400 hover:text-blue-300">
414
+ <i class="far fa-comment mr-1"></i> Reply
415
+ </button>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Review 2 -->
420
+ <div class="review-card p-4 rounded-lg">
421
+ <div class="flex items-center mb-3">
422
+ <div class="w-10 h-10 rounded-full bg-gray-600 mr-3"></div>
423
+ <div>
424
+ <h4 class="text-white font-medium">TechGamer</h4>
425
+ <div class="flex items-center">
426
+ <div class="flex mr-1">
427
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
428
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
429
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
430
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
431
+ <i class="far fa-star text-yellow-400 text-xs"></i>
432
+ </div>
433
+ <span class="text-gray-400 text-xs">45 hrs on record</span>
434
+ </div>
435
+ </div>
436
+ <div class="ml-auto text-gray-400 text-sm">Posted: 1 week ago</div>
437
+ </div>
438
+ <p class="text-gray-300 mb-3">
439
+ The game has improved significantly since launch. The world-building is phenomenal and the side quests are actually interesting. Still some bugs here and there, but nothing game-breaking. Recommended if you enjoy immersive RPGs.
440
+ </p>
441
+ <div class="flex items-center text-sm">
442
+ <button class="text-gray-400 hover:text-white mr-4">
443
+ <i class="far fa-thumbs-up mr-1"></i> 89
444
+ </button>
445
+ <button class="text-gray-400 hover:text-white">
446
+ <i class="far fa-thumbs-down mr-1"></i> 7
447
+ </button>
448
+ <button class="ml-auto text-blue-400 hover:text-blue-300">
449
+ <i class="far fa-comment mr-1"></i> Reply
450
+ </button>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- Right Column -->
458
+ <div class="w-full md:w-1/3">
459
+ <!-- Purchase Box -->
460
+ <div class="bg-[#1e2127] rounded-lg p-6 mb-6 sticky top-24">
461
+ <div class="flex items-center justify-between mb-4">
462
+ <h3 class="text-xl font-bold text-white">Buy Cyber Nexus 2077</h3>
463
+ <div class="bg-[#4c6b22] text-[#beee11] px-2 py-1 text-sm font-bold">
464
+ -50%
465
+ </div>
466
+ </div>
467
+
468
+ <div class="flex items-center mb-6">
469
+ <span class="text-gray-400 line-through mr-2">$59.99</span>
470
+ <span class="text-white font-bold text-2xl">$29.99</span>
471
+ </div>
472
+
473
+ <button class="w-full bg-[#5c7e10] hover:bg-[#6e9319] text-white py-3 rounded font-bold mb-4">
474
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
475
+ </button>
476
+
477
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded font-bold mb-6">
478
+ <i class="fas fa-bolt mr-2"></i> Buy Now
479
+ </button>
480
+
481
+ <div class="border-t border-gray-700 pt-4">
482
+ <h4 class="text-white font-medium mb-3">This game includes:</h4>
483
+ <ul class="text-gray-300 space-y-2 text-sm">
484
+ <li class="flex items-start">
485
+ <i class="fas fa-check text-green-400 mr-2 mt-1"></i>
486
+ <span>Full Cyber Nexus 2077 game</span>
487
+ </li>
488
+ <li class="flex items-start">
489
+ <i class="fas fa-check text-green-400 mr-2 mt-1"></i>
490
+ <span>Digital Artbook</span>
491
+ </li>
492
+ <li class="flex items-start">
493
+ <i class="fas fa-check text-green-400 mr-2 mt-1"></i>
494
+ <span>Original Soundtrack</span>
495
+ </li>
496
+ </ul>
497
+ </div>
498
+ </div>
499
+
500
+ <!-- DLCs -->
501
+ <div class="bg-[#1e2127] rounded-lg p-6 mb-6">
502
+ <h3 class="text-xl font-bold text-white mb-4">Downloadable Content</h3>
503
+
504
+ <div class="space-y-4">
505
+ <!-- DLC 1 -->
506
+ <div class="flex">
507
+ <div class="w-20 h-20 bg-gray-800 rounded mr-4 overflow-hidden">
508
+ <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="DLC Cover" class="w-full h-full object-cover">
509
+ </div>
510
+ <div class="flex-1">
511
+ <h4 class="text-white font-medium text-sm mb-1">Phantom Liberty</h4>
512
+ <div class="flex items-center mb-1">
513
+ <span class="text-gray-400 line-through text-xs mr-1">$19.99</span>
514
+ <span class="text-white text-sm font-bold">$14.99</span>
515
+ </div>
516
+ <button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded">
517
+ Add to Cart
518
+ </button>
519
+ </div>
520
+ </div>
521
+
522
+ <!-- DLC 2 -->
523
+ <div class="flex">
524
+ <div class="w-20 h-20 bg-gray-800 rounded mr-4 overflow-hidden">
525
+ <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="DLC Cover" class="w-full h-full object-cover">
526
+ </div>
527
+ <div class="flex-1">
528
+ <h4 class="text-white font-medium text-sm mb-1">Night City Expansion</h4>
529
+ <div class="flex items-center mb-1">
530
+ <span class="text-gray-400 line-through text-xs mr-1">$14.99</span>
531
+ <span class="text-white text-sm font-bold">$9.99</span>
532
+ </div>
533
+ <button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded">
534
+ Add to Cart
535
+ </button>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <button class="w-full mt-4 text-blue-400 hover:text-blue-300 text-sm font-medium">
541
+ View all 5 DLCs
542
+ </button>
543
+ </div>
544
+
545
+ <!-- Tags -->
546
+ <div class="bg-[#1e2127] rounded-lg p-6">
547
+ <h3 class="text-xl font-bold text-white mb-4">Popular user-defined tags</h3>
548
+ <div class="flex flex-wrap gap-2">
549
+ <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">RPG</span>
550
+ <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Open World</span>
551
+ <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Cyberpunk</span>
552
+ <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Futuristic</span>
553
+ <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Story Rich</span>
554
+ <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Singleplayer</span>
555
+ <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">FPS</span>
556
+ <span class="bg-[#2a475e] hover:bg-[#3a5a7a] text-white text-xs px-3 py-1 rounded cursor-pointer">Sci-fi</span>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </section>
562
+
563
+ <!-- More Games -->
564
+ <section class="mb-10">
565
+ <div class="flex items-center justify-between mb-4">
566
+ <h2 class="text-2xl font-bold text-white">More Like This</h2>
567
+ <div class="flex space-x-2">
568
+ <button onclick="scrollCarousel('more-games', -1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
569
+ <i class="fas fa-chevron-left text-white"></i>
570
+ </button>
571
+ <button onclick="scrollCarousel('more-games', 1)" class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
572
+ <i class="fas fa-chevron-right text-white"></i>
573
+ </button>
574
+ </div>
575
+ </div>
576
+ <div id="more-games-carousel" class="carousel-container relative flex overflow-x-auto space-x-4 pb-4 scrollbar-hide">
577
+ <!-- Game 1 -->
578
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
579
+ <div class="relative">
580
+ <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover">
581
+ </div>
582
+ <div class="p-4">
583
+ <h3 class="text-white font-medium mb-1">Deus Ex: Mankind Divided</h3>
584
+ <div class="flex items-center mb-2">
585
+ <div class="flex mr-2">
586
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
587
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
588
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
589
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
590
+ <i class="far fa-star text-yellow-400 text-xs"></i>
591
+ </div>
592
+ <span class="text-gray-400 text-xs">(3,781)</span>
593
+ </div>
594
+ <div class="flex items-center">
595
+ <span class="text-white font-bold">$19.99</span>
596
+ </div>
597
+ </div>
598
+ </div>
599
+
600
+ <!-- Game 2 -->
601
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
602
+ <div class="relative">
603
+ <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Game Cover" class="w-full h-36 object-cover">
604
+ <div class="discount-badge">-40%</div>
605
+ </div>
606
+ <div class="p-4">
607
+ <h3 class="text-white font-medium mb-1">Watch Dogs: Legion</h3>
608
+ <div class="flex items-center mb-2">
609
+ <div class="flex mr-2">
610
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
611
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
612
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
613
+ <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>
614
+ <i class="far fa-star text-yellow-400 text-xs"></i>
615
+ </div>
616
+ <span class="text-gray-400 text-xs">(2,943)</span>
617
+ </div>
618
+ <div class="flex items-center">
619
+ <span class="text-gray-400 line-through text-sm mr-2">$49.99</span>
620
+ <span class="text-white font-bold">$29.99</span>
621
+ </div>
622
+ </div>
623
+ </div>
624
+
625
+ <!-- Game 3 -->
626
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
627
+ <div class="relative">
628
+ <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover">
629
+ </div>
630
+ <div class="p-4">
631
+ <h3 class="text-white font-medium mb-1">The Ascent</h3>
632
+ <div class="flex items-center mb-2">
633
+ <div class="flex mr-2">
634
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
635
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
636
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
637
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
638
+ <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>
639
+ </div>
640
+ <span class="text-gray-400 text-xs">(1,876)</span>
641
+ </div>
642
+ <div class="flex items-center">
643
+ <span class="text-white font-bold">$29.99</span>
644
+ </div>
645
+ </div>
646
+ </div>
647
+
648
+ <!-- Game 4 -->
649
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
650
+ <div class="relative">
651
+ <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Game Cover" class="w-full h-36 object-cover">
652
+ <div class="discount-badge">-60%</div>
653
+ </div>
654
+ <div class="p-4">
655
+ <h3 class="text-white font-medium mb-1">Ghostrunner</h3>
656
+ <div class="flex items-center mb-2">
657
+ <div class="flex mr-2">
658
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
659
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
660
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
661
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
662
+ <i class="far fa-star text-yellow-400 text-xs"></i>
663
+ </div>
664
+ <span class="text-gray-400 text-xs">(3,245)</span>
665
+ </div>
666
+ <div class="flex items-center">
667
+ <span class="text-gray-400 line-through text-sm mr-2">$29.99</span>
668
+ <span class="text-white font-bold">$11.99</span>
669
+ </div>
670
+ </div>
671
+ </div>
672
+
673
+ <!-- Game 5 -->
674
+ <div class="game-card carousel-item flex-shrink-0 w-64 bg-[#1e2127] rounded-lg overflow-hidden transition-all duration-300 cursor-pointer">
675
+ <div class="relative">
676
+ <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game Cover" class="w-full h-36 object-cover">
677
+ </div>
678
+ <div class="p-4">
679
+ <h3 class="text-white font-medium mb-1">Observer: System Redux</h3>
680
+ <div class="flex items-center mb-2">
681
+ <div class="flex mr-2">
682
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
683
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
684
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
685
+ <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>
686
+ <i class="far fa-star text-yellow-400 text-xs"></i>
687
+ </div>
688
+ <span class="text-gray-400 text-xs">(1,543)</span>
689
+ </div>
690
+ <div class="flex items-center">
691
+ <span class="text-white font-bold">$24.99</span>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+ </section>
697
+ </main>
698
+
699
+ <!-- Footer -->
700
+ <footer class="bg-[#171a21] py-10">
701
+ <div class="container mx-auto px-4">
702
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
703
+ <div>
704
+ <h3 class="text-white font-bold mb-4">About GamerZone</h3>
705
+ <ul class="space-y-2">
706
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">About Us</a></li>
707
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Careers</a></li>
708
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">GamerZone Partners</a></li>
709
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Gift Cards</a></li>
710
+ </ul>
711
+ </div>
712
+ <div>
713
+ <h3 class="text-white font-bold mb-4">Resources</h3>
714
+ <ul class="space-y-2">
715
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Support</a></li>
716
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Forums</a></li>
717
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Community Guidelines</a></li>
718
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Feedback</a></li>
719
+ </ul>
720
+ </div>
721
+ <div>
722
+ <h3 class="text-white font-bold mb-4">Legal</h3>
723
+ <ul class="space-y-2">
724
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li>
725
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a></li>
726
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Refund Policy</a></li>
727
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Preferences</a></li>
728
+ </ul>
729
+ </div>
730
+ <div>
731
+ <h3 class="text-white font-bold mb-4">Connect With Us</h3>
732
+ <div class="flex space-x-4 mb-4">
733
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
734
+ <i class="fab fa-facebook-f text-white"></i>
735
+ </a>
736
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
737
+ <i class="fab fa-twitter text-white"></i>
738
+ </a>
739
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
740
+ <i class="fab fa-instagram text-white"></i>
741
+ </a>
742
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
743
+ <i class="fab fa-discord text-white"></i>
744
+ </a>
745
+ </div>
746
+ <div class="flex items-center">
747
+ <i class="fas fa-globe text-gray-400 mr-2"></i>
748
+ <select class="bg-transparent text-white text-sm focus:outline-none">
749
+ <option>English</option>
750
+ <option>Français</option>
751
+ <option>Deutsch</option>
752
+ <option>Español</option>
753
+ </select>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ <div class="border-t border-gray-800 pt-6">
758
+ <p class="text-gray-400 text-sm">© 2023 GamerZone, Inc. All rights reserved. All trademarks are property of their respective owners.</p>
759
+ </div>
760
+ </div>
761
+ </footer>
762
+
763
+ <script>
764
+ // Carousel functionality
765
+ function scrollCarousel(carouselId, direction) {
766
+ const carousel = document.getElementById(`${carouselId}-carousel`);
767
+ const itemWidth = carousel.querySelector('.carousel-item').offsetWidth;
768
+ carousel.scrollBy({ left: direction * itemWidth, behavior: 'smooth' });
769
+ }
770
+
771
+ // Add to cart animation
772
+ document.querySelectorAll('[class*="Add to Cart"]').forEach(button => {
773
+ button.addEventListener('click', function() {
774
+ const cartCount = document.querySelector('[class*="Cart ("]');
775
+ let count = parseInt(cartCount.textContent.match(/\d+/)[0]);
776
+ cartCount.textContent = cartCount.textContent.replace(/\d+/, count + 1);
777
+
778
+ // Create flying cart icon animation
779
+ const icon = this.querySelector('i') || document.createElement('i');
780
+ const iconClone = icon.cloneNode(true);
781
+ iconClone.style.position = 'fixed';
782
+ iconClone.style.zIndex = '9999';
783
+ iconClone.style.fontSize = '20px';
784
+ iconClone.style.color = '#5c7e10';
785
+
786
+ const rect = this.getBoundingClientRect();
787
+ const cartRect = document.querySelector('[class*="Cart ("]').getBoundingClientRect();
788
+
789
+ iconClone.style.left = rect.left + 'px';
790
+ iconClone.style.top = rect.top + 'px';
791
+ document.body.appendChild(iconClone);
792
+
793
+ const animation = iconClone.animate([
794
+ {
795
+ left: rect.left + 'px',
796
+ top: rect.top + 'px',
797
+ opacity: 1,
798
+ transform: 'scale(1)'
799
+ },
800
+ {
801
+ left: cartRect.right - 20 + 'px',
802
+ top: cartRect.top - 10 + 'px',
803
+ opacity: 0,
804
+ transform: 'scale(0.5)'
805
+ }
806
+ ], {
807
+ duration: 800,
808
+ easing: 'cubic-bezier(0.42, 0, 0.58, 1)'
809
+ });
810
+
811
+ animation.onfinish = () => {
812
+ iconClone.remove();
813
+ };
814
+ });
815
+ });
816
+
817
+ // HACK: 99999
818
+ console.log("HACK: 99999 - Unlimited gaming power activated!");
819
+ </script>
820
+ <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=REDMOOD/gamerzone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
821
+ </html>