Hugging Face's logo

Spaces:
rz1x
/
deepsit-testing
Running

App Files Community
rz1x commited on
Commit
0983e35
·
verified ·
1 Parent(s): 824e7ce

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +587 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsit Testing
3
- emoji: 🐠
4
- colorFrom: gray
5
- colorTo: gray
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: deepsit-testing
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,587 @@
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>NexGen Graphics - Power Your Imagination</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #0f172a;
15
+ color: #f8fafc;
16
+ }
17
+
18
+ .hero-gradient {
19
+ background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #c026d3 100%);
20
+ }
21
+
22
+ .card-gradient {
23
+ background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
24
+ }
25
+
26
+ .btn-primary {
27
+ background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
28
+ transition: all 0.3s ease;
29
+ box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
30
+ }
31
+
32
+ .btn-primary:hover {
33
+ transform: translateY(-3px);
34
+ box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
35
+ }
36
+
37
+ .btn-secondary {
38
+ background: linear-gradient(90deg, #475569 0%, #1e293b 100%);
39
+ }
40
+
41
+ .btn-secondary:hover {
42
+ transform: translateY(-3px);
43
+ box-shadow: 0 8px 25px rgba(71, 85, 105, 0.6);
44
+ }
45
+
46
+ .feature-icon {
47
+ transition: all 0.3s ease;
48
+ }
49
+
50
+ .feature-card:hover .feature-icon {
51
+ transform: scale(1.2) rotate(10deg);
52
+ }
53
+
54
+ .card-hover {
55
+ transition: all 0.3s ease;
56
+ }
57
+
58
+ .card-hover:hover {
59
+ transform: translateY(-10px);
60
+ box-shadow: 0 20px 25px rgba(0, 0, 0, 0.3);
61
+ }
62
+
63
+ @keyframes float {
64
+ 0%, 100% {
65
+ transform: translateY(0);
66
+ }
67
+ 50% {
68
+ transform: translateY(-20px);
69
+ }
70
+ }
71
+
72
+ .floating {
73
+ animation: float 6s ease-in-out infinite;
74
+ }
75
+
76
+ .fade-in {
77
+ animation: fadeIn 1s ease-in;
78
+ }
79
+
80
+ @keyframes fadeIn {
81
+ from { opacity: 0; }
82
+ to { opacity: 1; }
83
+ }
84
+ </style>
85
+ </head>
86
+ <body>
87
+ <!-- Navigation -->
88
+ <nav class="bg-slate-900/50 backdrop-blur-md fixed w-full z-50">
89
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
90
+ <div class="flex items-center justify-between h-16">
91
+ <div class="flex items-center">
92
+ <div class="flex-shrink-0">
93
+ <span class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">NexGen GFX</span>
94
+ </div>
95
+ <div class="hidden md:block">
96
+ <div class="ml-10 flex items-baseline space-x-4">
97
+ <a href="#home" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
98
+ <a href="#products" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Products</a>
99
+ <a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a>
100
+ <a href="#performance" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Performance</a>
101
+ <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ <div>
106
+ <button class="btn-primary text-white px-6 py-2 rounded-full font-medium text-sm">
107
+ Pre-order Now <i class="fas fa-arrow-right ml-2"></i>
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </nav>
113
+
114
+ <!-- Hero Section -->
115
+ <section id="home" class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8">
116
+ <div class="max-w-7xl mx-auto">
117
+ <div class="grid md:grid-cols-2 gap-12 items-center">
118
+ <div class="fade-in">
119
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
120
+ Unleash <span class="text-yellow-300">Extreme</span> Performance
121
+ </h1>
122
+ <p class="text-lg text-gray-200 mb-8 max-w-lg">
123
+ Experience the next generation of graphics with our RTX 40 Series. Revolutionary architecture for unprecedented gaming, content creation, and AI performance.
124
+ </p>
125
+ <div class="flex space-x-4">
126
+ <button class="btn-primary text-white px-8 py-3 rounded-full font-medium">
127
+ Shop Now <i class="fas fa-bolt ml-2"></i>
128
+ </button>
129
+ <button class="btn-secondary text-white px-8 py-3 rounded-full font-medium">
130
+ Explore Tech <i class="fas fa-microchip ml-2"></i>
131
+ </button>
132
+ </div>
133
+ <div class="mt-8 flex items-center space-x-6">
134
+ <div class="text-sm">
135
+ <div class="text-blue-300 font-semibold">4K/8K Ready</div>
136
+ <div class="text-white">Ultra HD Gaming</div>
137
+ </div>
138
+ <div class="text-sm">
139
+ <div class="text-purple-300 font-semibold">Ray Tracing</div>
140
+ <div class="text-white">Hyper-Realistic</div>
141
+ </div>
142
+ <div class="text-sm">
143
+ <div class="text-pink-300 font-semibold">AI-Powered</div>
144
+ <div class="text-white">DLSS 3.0</div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div class="relative hidden md:block">
149
+ <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3" alt="Graphics Card" class="w-full h-auto max-w-xl floating">
150
+ <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-600 rounded-full opacity-20 filter blur-2xl"></div>
151
+ <div class="absolute -top-10 -right-10 w-40 h-40 bg-blue-600 rounded-full opacity-20 filter blur-2xl"></div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Logo Cloud -->
158
+ <div class="bg-slate-900 py-12">
159
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
160
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
161
+ <div class="flex items-center justify-center">
162
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Nvidia_logo.svg/1280px-Nvidia_logo.svg.png" alt="NVIDIA" class="h-12 opacity-80 hover:opacity-100 transition">
163
+ </div>
164
+ <div class="flex items-center justify-center">
165
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/AMD_Logo.svg/1280px-AMD_Logo.svg.png" alt="AMD" class="h-8 opacity-80 hover:opacity-100 transition">
166
+ </div>
167
+ <div class="flex items-center justify-center">
168
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/ASRock_logo.svg/1280px-ASRock_logo.svg.png" alt="ASRock" class="h-8 opacity-80 hover:opacity-100 transition">
169
+ </div>
170
+ <div class="flex items-center justify-center">
171
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/ASUS_Logo.svg/1280px-ASUS_Logo.svg.png" alt="ASUS" class="h-8 opacity-80 hover:opacity-100 transition">
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Products Section -->
178
+ <section id="products" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900">
179
+ <div class="max-w-7xl mx-auto">
180
+ <div class="text-center mb-16 fade-in">
181
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Premium <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Collection</span></h2>
182
+ <p class="max-w-2xl mx-auto text-gray-400">Choose from our cutting-edge lineup of graphics cards designed for gamers, creators, and professionals.</p>
183
+ </div>
184
+
185
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
186
+ <!-- Product 1 -->
187
+ <div class="card-gradient rounded-xl p-6 card-hover">
188
+ <div class="badge bg-blue-600/20 text-blue-400 px-3 py-1 rounded-full text-xs font-semibold mb-4">BEST SELLER</div>
189
+ <div class="h-48 flex items-center justify-center mb-6">
190
+ <img src="https://images.unsplash.com/photo-1563213023-3a1a6a56fe1f?ixlib=rb-4.0.3" alt="RTX 4090" class="h-full object-contain">
191
+ </div>
192
+ <h3 class="text-xl font-bold mb-2">RTX 4090 Titan</h3>
193
+ <p class="text-gray-400 text-sm mb-4">Experience uncompromised performance with our flagship GPU.</p>
194
+ <div class="flex items-center text-yellow-400 mb-4">
195
+ <i class="fas fa-star"></i>
196
+ <i class="fas fa-star"></i>
197
+ <i class="fas fa-star"></i>
198
+ <i class="fas fa-star"></i>
199
+ <i class="fas fa-star"></i>
200
+ <span class="text-gray-400 ml-2 text-sm">4.9 (128 reviews)</span>
201
+ </div>
202
+ <div class="flex items-end justify-between mt-6">
203
+ <div>
204
+ <span class="text-gray-400 line-through text-sm">$1,999</span>
205
+ <h4 class="text-2xl font-bold">$1,699</h4>
206
+ </div>
207
+ <button class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium">
208
+ Add to Cart <i class="fas fa-shopping-cart ml-1"></i>
209
+ </button>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Product 2 -->
214
+ <div class="card-gradient rounded-xl p-6 card-hover">
215
+ <div class="h-48 flex items-center justify-center mb-6">
216
+ <img src="https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-4.0.3" alt="RTX 4080" class="h-full object-contain">
217
+ </div>
218
+ <h3 class="text-xl font-bold mb-2">RTX 4080 Pro</h3>
219
+ <p class="text-gray-400 text-sm mb-4">Perfect balance of performance and value for serious gamers.</p>
220
+ <div class="flex items-center text-yellow-400 mb-4">
221
+ <i class="fas fa-star"></i>
222
+ <i class="fas fa-star"></i>
223
+ <i class="fas fa-star"></i>
224
+ <i class="fas fa-star"></i>
225
+ <i class="fas fa-star-half-alt"></i>
226
+ <span class="text-gray-400 ml-2 text-sm">4.7 (89 reviews)</span>
227
+ </div>
228
+ <div class="flex items-end justify-between mt-6">
229
+ <div>
230
+ <span class="text-gray-400 line-through text-sm">$1,299</span>
231
+ <h4 class="text-2xl font-bold">$1,099</h4>
232
+ </div>
233
+ <button class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium">
234
+ Add to Cart <i class="fas fa-shopping-cart ml-1"></i>
235
+ </button>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Product 3 -->
240
+ <div class="card-gradient rounded-xl p-6 card-hover">
241
+ <div class="badge bg-green-600/20 text-green-400 px-3 py-1 rounded-full text-xs font-semibold mb-4">NEW</div>
242
+ <div class="h-48 flex items-center justify-center mb-6">
243
+ <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3" alt="RTX 4070" class="h-full object-contain">
244
+ </div>
245
+ <h3 class="text-xl font-bold mb-2">RTX 4070 Elite</h3>
246
+ <p class="text-gray-400 text-sm mb-4">Exceptional 1440p gaming at an affordable price point.</p>
247
+ <div class="flex items-center text-yellow-400 mb-4">
248
+ <i class="fas fa-star"></i>
249
+ <i class="fas fa-star"></i>
250
+ <i class="fas fa-star"></i>
251
+ <i class="fas fa-star"></i>
252
+ <i class="far fa-star"></i>
253
+ <span class="text-gray-400 ml-2 text-sm">4.5 (42 reviews)</span>
254
+ </div>
255
+ <div class="flex items-end justify-between mt-6">
256
+ <div>
257
+ <h4 class="text-2xl font-bold">$799</h4>
258
+ </div>
259
+ <button class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium">
260
+ Add to Cart <i class="fas fa-shopping-cart ml-1"></i>
261
+ </button>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="text-center mt-16">
267
+ <button class="btn-secondary text-white px-10 py-3 rounded-full font-medium">
268
+ View All Products <i class="fas fa-chevron-down ml-2"></i>
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </section>
273
+
274
+ <!-- Features Section -->
275
+ <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900 border-t border-gray-800/50">
276
+ <div class="max-w-7xl mx-auto">
277
+ <div class="text-center mb-16 fade-in">
278
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Revolutionary <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Technology</span></h2>
279
+ <p class="max-w-2xl mx-auto text-gray-400">Pushing the boundaries of what's possible in real-time graphics rendering and AI processing.</p>
280
+ </div>
281
+
282
+ <div class="grid md:grid-cols-3 gap-8">
283
+ <!-- Feature 1 -->
284
+ <div class="feature-card bg-slate-800/50 rounded-xl p-6 group">
285
+ <div class="w-14 h-14 rounded-lg bg-blue-600/20 flex items-center justify-center mb-6">
286
+ <i class="fas fa-bolt feature-icon text-2xl text-blue-400"></i>
287
+ </div>
288
+ <h3 class="text-xl font-bold mb-3">DLSS 3.0</h3>
289
+ <p class="text-gray-400">
290
+ AI-powered frame generation delivers unmatched performance boosts while maintaining impeccable image quality.
291
+ </p>
292
+ </div>
293
+
294
+ <!-- Feature 2 -->
295
+ <div class="feature-card bg-slate-800/50 rounded-xl p-6 group">
296
+ <div class="w-14 h-14 rounded-lg bg-purple-600/20 flex items-center justify-center mb-6">
297
+ <i class="fas fa-sun feature-icon text-2xl text-purple-400"></i>
298
+ </div>
299
+ <h3 class="text-xl font-bold mb-3">Ray Tracing</h3>
300
+ <p class="text-gray-400">
301
+ Hyper-realistic lighting, shadows, and reflections with dedicated RT cores for cinematic visual fidelity.
302
+ </p>
303
+ </div>
304
+
305
+ <!-- Feature 3 -->
306
+ <div class="feature-card bg-slate-800/50 rounded-xl p-6 group">
307
+ <div class="w-14 h-14 rounded-lg bg-pink-600/20 flex items-center justify-center mb-6">
308
+ <i class="fas fa-microchip feature-icon text-2xl text-pink-400"></i>
309
+ </div>
310
+ <h3 class="text-xl font-bold mb-3">4th Gen Architecture</h3>
311
+ <p class="text-gray-400">
312
+ Cutting-edge chip design with 50% more CUDA cores and 2x power efficiency over previous generation.
313
+ </p>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Performance Section -->
320
+ <section id="performance" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-slate-900 to-indigo-900/20">
321
+ <div class="max-w-7xl mx-auto">
322
+ <div class="grid md:grid-cols-2 gap-12 items-center">
323
+ <div class="space-y-8">
324
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Benchmark <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Dominance</span></h2>
325
+ <p class="text-gray-300 max-w-lg">
326
+ Our RTX 40 Series graphics cards redefine performance expectations, delivering unmatched frame rates at every resolution.
327
+ </p>
328
+
329
+ <div class="space-y-6">
330
+ <!-- Benchmark 1 -->
331
+ <div>
332
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
333
+ <span>1080P Ultra</span>
334
+ <span>240 FPS</span>
335
+ </div>
336
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
337
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 95%"></div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Benchmark 2 -->
342
+ <div>
343
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
344
+ <span>1440P Ultra</span>
345
+ <span>180 FPS</span>
346
+ </div>
347
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
348
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 85%"></div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Benchmark 3 -->
353
+ <div>
354
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
355
+ <span>4K Ultra</span>
356
+ <span>120 FPS</span>
357
+ </div>
358
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
359
+ <div class="bg-pink-600 h-2.5 rounded-full" style="width: 75%"></div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Benchmark 4 -->
364
+ <div>
365
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
366
+ <span>8K Ultra</span>
367
+ <span>60 FPS</span>
368
+ </div>
369
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
370
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 60%"></div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="pt-4">
376
+ <button class="btn-primary text-white px-8 py-3 rounded-full font-medium">
377
+ See Full Benchmarks <i class="fas fa-chart-line ml-2"></i>
378
+ </button>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="relative hidden md:block">
383
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3" alt="Gaming Performance" class="w-full rounded-xl border border-gray-700/50 shadow-2xl">
384
+ <div class="absolute -bottom-6 -left-6 w-56 h-56 bg-blue-600 rounded-full opacity-20 filter blur-xl z-0"></div>
385
+ <div class="absolute -top-6 -right-6 w-40 h-40 bg-purple-600 rounded-full opacity-20 filter blur-xl z-0"></div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Testimonials -->
392
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900">
393
+ <div class="max-w-7xl mx-auto">
394
+ <div class="text-center mb-16 fade-in">
395
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Gamers Say</span></h2>
396
+ <p class="max-w-2xl mx-auto text-gray-400">Join thousands of satisfied customers who have upgraded their gaming experience.</p>
397
+ </div>
398
+
399
+ <div class="grid md:grid-cols-3 gap-8">
400
+ <!-- Testimonial 1 -->
401
+ <div class="bg-slate-800/50 rounded-xl p-6 card-hover">
402
+ <div class="flex items-center mb-4">
403
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold mr-4">JK</div>
404
+ <div>
405
+ <h4 class="font-semibold">Jake K.</h4>
406
+ <div class="flex text-yellow-400 text-sm">
407
+ <i class="fas fa-star"></i>
408
+ <i class="fas fa-star"></i>
409
+ <i class="fas fa-star"></i>
410
+ <i class="fas fa-star"></i>
411
+ <i class="fas fa-star"></i>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ <p class="text-gray-300 italic">
416
+ "The RTX 4090 is an absolute beast! I'm getting 120+ FPS in Cyberpunk 2077 with everything maxed out at 4K. Worth every penny."
417
+ </p>
418
+ </div>
419
+
420
+ <!-- Testimonial 2 -->
421
+ <div class="bg-slate-800/50 rounded-xl p-6 card-hover">
422
+ <div class="flex items-center mb-4">
423
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center text-white font-bold mr-4">SM</div>
424
+ <div>
425
+ <h4 class="font-semibold">Sarah M.</h4>
426
+ <div class="flex text-yellow-400 text-sm">
427
+ <i class="fas fa-star"></i>
428
+ <i class="fas fa-star"></i>
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star"></i>
431
+ <i class="fas fa-star-half-alt"></i>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ <p class="text-gray-300 italic">
436
+ "As a 3D artist, the rendering speeds are incredible. Halved my project completion times versus my old GPU."
437
+ </p>
438
+ </div>
439
+
440
+ <!-- Testimonial 3 -->
441
+ <div class="bg-slate-800/50 rounded-xl p-6 card-hover">
442
+ <div class="flex items-center mb-4">
443
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-green-500 to-blue-600 flex items-center justify-center text-white font-bold mr-4">AT</div>
444
+ <div>
445
+ <h4 class="font-semibold">Alex T.</h4>
446
+ <div class="flex text-yellow-400 text-sm">
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ <i class="fas fa-star"></i>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ <p class="text-gray-300 italic">
456
+ "The 4080 Pro hits the sweet spot for price-performance. Running every game I throw at it on max settings at 1440p."
457
+ </p>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- CTA Section -->
464
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-900/30 to-purple-900/30">
465
+ <div class="max-w-4xl mx-auto text-center">
466
+ <div class="bg-slate-900/50 backdrop-blur-md rounded-2xl p-8 md:p-12 border border-gray-700/50">
467
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Upgrade</span> Your Experience?</h2>
468
+ <p class="text-lg text-gray-300 mb-8">
469
+ Join millions of gamers and creators who have made the switch to our next-generation graphics cards.
470
+ </p>
471
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
472
+ <button class="btn-primary text-white px-8 py-4 rounded-full font-medium">
473
+ Buy Now <i class="fas fa-shopping-bag ml-2"></i>
474
+ </button>
475
+ <button class="btn-secondary text-white px-8 py-4 rounded-full font-medium">
476
+ Compare Cards <i class="fas fa-list-ul ml-2"></i>
477
+ </button>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </section>
482
+
483
+ <!-- Footer -->
484
+ <footer id="contact" class="bg-slate-900/90 py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800/50">
485
+ <div class="max-w-7xl mx-auto">
486
+ <div class="grid md:grid-cols-4 gap-12">
487
+ <div>
488
+ <h3 class="text-xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent mb-6">NexGen GFX</h3>
489
+ <p class="text-gray-400 text-sm">
490
+ Powering the future of gaming and creative work with cutting-edge graphics technology.
491
+ </p>
492
+ <div class="flex space-x-4 mt-6">
493
+ <a href="#" class="text-gray-400 hover:text-white transition">
494
+ <i class="fab fa-facebook-f"></i>
495
+ </a>
496
+ <a href="#" class="text-gray-400 hover:text-white transition">
497
+ <i class="fab fa-twitter"></i>
498
+ </a>
499
+ <a href="#" class="text-gray-400 hover:text-white transition">
500
+ <i class="fab fa-instagram"></i>
501
+ </a>
502
+ <a href="#" class="text-gray-400 hover:text-white transition">
503
+ <i class="fab fa-youtube"></i>
504
+ </a>
505
+ </div>
506
+ </div>
507
+
508
+ <div>
509
+ <h4 class="text-gray-200 font-semibold mb-4">Products</h4>
510
+ <ul class="space-y-2">
511
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">RTX 40 Series</a></li>
512
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">RTX 30 Series</a></li>
513
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Workstation GPUs</a></li>
514
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Accessories</a></li>
515
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Software</a></li>
516
+ </ul>
517
+ </div>
518
+
519
+ <div>
520
+ <h4 class="text-gray-200 font-semibold mb-4">Support</h4>
521
+ <ul class="space-y-2">
522
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Drivers</a></li>
523
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">FAQs</a></li>
524
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Warranty</a></li>
525
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Contact Us</a></li>
526
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Returns</a></li>
527
+ </ul>
528
+ </div>
529
+
530
+ <div>
531
+ <h4 class="text-gray-200 font-semibold mb-4">Newsletter</h4>
532
+ <p class="text-gray-400 text-sm mb-4">
533
+ Stay updated with our latest products and offers.
534
+ </p>
535
+ <div class="flex">
536
+ <input type="email" placeholder="Your email" class="bg-slate-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-600 w-full">
537
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg transition">
538
+ <i class="fas fa-paper-plane"></i>
539
+ </button>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="border-t border-gray-800/50 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
545
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
546
+ &copy; 2023 NexGen Graphics. All rights reserved.
547
+ </p>
548
+ <div class="flex space-x-6">
549
+ <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Privacy Policy</a>
550
+ <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Terms of Service</a>
551
+ <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Sitemap</a>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </footer>
556
+
557
+ <script>
558
+ // Simple fade-in animation for elements with .fade-in class
559
+ document.addEventListener('DOMContentLoaded', function() {
560
+ const fadeElements = document.querySelectorAll('.fade-in');
561
+
562
+ const fadeInObserver = new IntersectionObserver((entries) => {
563
+ entries.forEach(entry => {
564
+ if (entry.isIntersecting) {
565
+ entry.target.style.opacity = '1';
566
+ }
567
+ });
568
+ }, { threshold: 0.1 });
569
+
570
+ fadeElements.forEach(el => {
571
+ el.style.opacity = '0';
572
+ fadeInObserver.observe(el);
573
+ });
574
+
575
+ // Smooth scroll for navigation
576
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
577
+ anchor.addEventListener('click', function(e) {
578
+ e.preventDefault();
579
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
580
+ behavior: 'smooth'
581
+ });
582
+ });
583
+ });
584
+ });
585
+ </script>
586
+ <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=rz1x/deepsit-testing" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
587
+ </html>