systemxhost commited on
Commit
fa67da0
·
verified ·
1 Parent(s): e44c12e

Quantum Forge PC building make it unice and make it look good and futrue looking - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +715 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quantum Forge
3
- emoji: 🔥
4
- colorFrom: purple
5
- colorTo: red
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: quantum-forge
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,715 @@
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>Quantum Forge | Futuristic PC Building</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=Orbitron:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');
11
+
12
+ :root {
13
+ --quantum-blue: #00f0ff;
14
+ --quantum-purple: #7b2dff;
15
+ --dark-space: #0a0a1a;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Roboto', sans-serif;
20
+ background-color: var(--dark-space);
21
+ color: white;
22
+ overflow-x: hidden;
23
+ }
24
+
25
+ .orbitron {
26
+ font-family: 'Orbitron', sans-serif;
27
+ }
28
+
29
+ .gradient-text {
30
+ background: linear-gradient(90deg, var(--quantum-blue), var(--quantum-purple));
31
+ -webkit-background-clip: text;
32
+ background-clip: text;
33
+ color: transparent;
34
+ }
35
+
36
+ .glow {
37
+ text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
38
+ }
39
+
40
+ .quantum-card {
41
+ background: rgba(15, 15, 35, 0.7);
42
+ backdrop-filter: blur(10px);
43
+ border: 1px solid rgba(123, 45, 255, 0.2);
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .quantum-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 10px 20px rgba(0, 240, 255, 0.2);
50
+ border-color: var(--quantum-blue);
51
+ }
52
+
53
+ .neon-border {
54
+ position: relative;
55
+ }
56
+
57
+ .neon-border::before {
58
+ content: '';
59
+ position: absolute;
60
+ inset: 0;
61
+ border-radius: inherit;
62
+ padding: 2px;
63
+ background: linear-gradient(135deg, var(--quantum-blue), var(--quantum-purple));
64
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
65
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
66
+ -webkit-mask-composite: xor;
67
+ mask-composite: exclude;
68
+ pointer-events: none;
69
+ }
70
+
71
+ .quantum-btn {
72
+ background: linear-gradient(90deg, var(--quantum-blue), var(--quantum-purple));
73
+ transition: all 0.3s ease;
74
+ }
75
+
76
+ .quantum-btn:hover {
77
+ transform: translateY(-2px);
78
+ box-shadow: 0 5px 15px rgba(0, 240, 255, 0.4);
79
+ }
80
+
81
+ .particle {
82
+ position: absolute;
83
+ background: rgba(0, 240, 255, 0.5);
84
+ border-radius: 50%;
85
+ pointer-events: none;
86
+ }
87
+
88
+ @keyframes float {
89
+ 0%, 100% { transform: translateY(0); }
90
+ 50% { transform: translateY(-10px); }
91
+ }
92
+
93
+ .floating {
94
+ animation: float 6s ease-in-out infinite;
95
+ }
96
+
97
+ .pulse {
98
+ animation: pulse 2s infinite;
99
+ }
100
+
101
+ @keyframes pulse {
102
+ 0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); }
103
+ 70% { box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); }
104
+ 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
105
+ }
106
+
107
+ .scroll-indicator {
108
+ position: absolute;
109
+ bottom: 20px;
110
+ left: 50%;
111
+ transform: translateX(-50%);
112
+ width: 30px;
113
+ height: 50px;
114
+ border: 2px solid var(--quantum-blue);
115
+ border-radius: 15px;
116
+ }
117
+
118
+ .scroll-indicator::before {
119
+ content: '';
120
+ position: absolute;
121
+ top: 10px;
122
+ left: 50%;
123
+ width: 6px;
124
+ height: 6px;
125
+ background: var(--quantum-blue);
126
+ border-radius: 50%;
127
+ transform: translateX(-50%);
128
+ animation: scroll 2s infinite;
129
+ }
130
+
131
+ @keyframes scroll {
132
+ 0% { opacity: 1; transform: translateY(0) translateX(-50%); }
133
+ 100% { opacity: 0; transform: translateY(20px) translateX(-50%); }
134
+ }
135
+ </style>
136
+ </head>
137
+ <body class="min-h-screen">
138
+ <!-- Floating Particles Background -->
139
+ <div id="particles"></div>
140
+
141
+ <!-- Navigation -->
142
+ <nav class="fixed w-full z-50 bg-black bg-opacity-70 backdrop-filter backdrop-blur-lg">
143
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
144
+ <div class="flex items-center justify-between h-16">
145
+ <div class="flex items-center">
146
+ <div class="flex-shrink-0">
147
+ <span class="text-2xl font-bold gradient-text orbitron">QUANTUM FORGE</span>
148
+ </div>
149
+ </div>
150
+ <div class="hidden md:block">
151
+ <div class="ml-10 flex items-baseline space-x-8">
152
+ <a href="#" class="text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium transition-all">Home</a>
153
+ <a href="#" class="text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium transition-all">Build</a>
154
+ <a href="#" class="text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium transition-all">Prebuilts</a>
155
+ <a href="#" class="text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium transition-all">Components</a>
156
+ <a href="#" class="text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium transition-all">Support</a>
157
+ </div>
158
+ </div>
159
+ <div class="hidden md:block">
160
+ <div class="ml-4 flex items-center md:ml-6">
161
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
162
+ <i class="fas fa-shopping-cart text-xl"></i>
163
+ </button>
164
+ <button class="ml-4 px-4 py-2 rounded-md quantum-btn text-white text-sm font-medium">
165
+ Sign In
166
+ </button>
167
+ </div>
168
+ </div>
169
+ <div class="-mr-2 flex md:hidden">
170
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
171
+ <i class="fas fa-bars"></i>
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Mobile menu -->
178
+ <div class="hidden md:hidden" id="mobile-menu">
179
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
180
+ <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
181
+ <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium">Build</a>
182
+ <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium">Prebuilts</a>
183
+ <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium">Components</a>
184
+ <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium">Support</a>
185
+ </div>
186
+ <div class="pt-4 pb-3 border-t border-gray-700">
187
+ <div class="flex items-center px-5">
188
+ <button class="ml-auto px-4 py-2 rounded-md quantum-btn text-white text-sm font-medium">
189
+ Sign In
190
+ </button>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </nav>
195
+
196
+ <!-- Hero Section -->
197
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
198
+ <div class="absolute inset-0 bg-black opacity-50"></div>
199
+ <video autoplay muted loop class="absolute z-0 w-auto min-w-full min-h-full max-w-none">
200
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-circuit-board-technology-animation-22903-large.mp4" type="video/mp4">
201
+ </video>
202
+
203
+ <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
204
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 orbitron glow">
205
+ <span class="gradient-text">FORGE YOUR FUTURE</span>
206
+ </h1>
207
+ <p class="text-xl md:text-2xl mb-10 text-gray-300 max-w-3xl mx-auto">
208
+ Quantum-powered PC building for the next generation. Customize your dream machine with our cutting-edge components and AI-assisted configuration.
209
+ </p>
210
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
211
+ <button class="px-8 py-4 rounded-lg quantum-btn text-white text-lg font-bold transform transition-all hover:scale-105">
212
+ <i class="fas fa-rocket mr-2"></i> START BUILDING
213
+ </button>
214
+ <button class="px-8 py-4 rounded-lg bg-transparent border-2 border-cyan-400 text-white text-lg font-bold transform transition-all hover:scale-105 hover:bg-cyan-900 hover:bg-opacity-20">
215
+ <i class="fas fa-eye mr-2"></i> EXPLORE PREBUILTS
216
+ </button>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="scroll-indicator"></div>
221
+ </section>
222
+
223
+ <!-- Features Section -->
224
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black via-gray-900 to-gray-900">
225
+ <div class="max-w-7xl mx-auto">
226
+ <div class="text-center mb-16">
227
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 orbitron">
228
+ <span class="gradient-text">QUANTUM ADVANTAGE</span>
229
+ </h2>
230
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
231
+ Harness the power of quantum-inspired technology to build the perfect PC
232
+ </p>
233
+ </div>
234
+
235
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
236
+ <!-- Feature 1 -->
237
+ <div class="quantum-card neon-border rounded-xl p-8 floating">
238
+ <div class="text-cyan-400 text-4xl mb-6">
239
+ <i class="fas fa-atom"></i>
240
+ </div>
241
+ <h3 class="text-2xl font-bold mb-4 orbitron">Quantum Optimization</h3>
242
+ <p class="text-gray-400">
243
+ Our AI analyzes thousands of component combinations in quantum parallel to find the perfect balance of performance and value.
244
+ </p>
245
+ </div>
246
+
247
+ <!-- Feature 2 -->
248
+ <div class="quantum-card neon-border rounded-xl p-8 floating" style="animation-delay: 0.5s;">
249
+ <div class="text-purple-400 text-4xl mb-6">
250
+ <i class="fas fa-microchip"></i>
251
+ </div>
252
+ <h3 class="text-2xl font-bold mb-4 orbitron">Future-Ready Components</h3>
253
+ <p class="text-gray-400">
254
+ Access the latest hardware with quantum tunneling technology for unprecedented speed and efficiency in your builds.
255
+ </p>
256
+ </div>
257
+
258
+ <!-- Feature 3 -->
259
+ <div class="quantum-card neon-border rounded-xl p-8 floating" style="animation-delay: 1s;">
260
+ <div class="text-blue-400 text-4xl mb-6">
261
+ <i class="fas fa-shield-alt"></i>
262
+ </div>
263
+ <h3 class="text-2xl font-bold mb-4 orbitron">Quantum Encryption</h3>
264
+ <p class="text-gray-400">
265
+ Your data is protected with post-quantum cryptography during the entire building and purchasing process.
266
+ </p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Build Showcase -->
273
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-black">
274
+ <div class="max-w-7xl mx-auto">
275
+ <div class="text-center mb-16">
276
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 orbitron">
277
+ <span class="gradient-text">SIGNATURE BUILDS</span>
278
+ </h2>
279
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
280
+ Explore our most powerful configurations, engineered for the future
281
+ </p>
282
+ </div>
283
+
284
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
285
+ <div class="relative">
286
+ <div class="quantum-card neon-border rounded-2xl overflow-hidden">
287
+ <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Quantum PC Build" class="w-full h-auto">
288
+ </div>
289
+ <div class="absolute -bottom-6 -right-6 bg-gradient-to-r from-cyan-500 to-purple-600 p-4 rounded-lg shadow-lg">
290
+ <span class="text-white font-bold orbitron">QUANTUM EDITION</span>
291
+ </div>
292
+ </div>
293
+
294
+ <div>
295
+ <h3 class="text-3xl font-bold mb-6 orbitron">Nexus Quantum X9000</h3>
296
+ <div class="grid grid-cols-2 gap-6 mb-8">
297
+ <div>
298
+ <p class="text-gray-400 mb-1">Processor</p>
299
+ <p class="text-xl font-medium">QuantumCore i9-13900KS</p>
300
+ </div>
301
+ <div>
302
+ <p class="text-gray-400 mb-1">Graphics</p>
303
+ <p class="text-xl font-medium">RTX 4090 Ti Quantum</p>
304
+ </div>
305
+ <div>
306
+ <p class="text-gray-400 mb-1">Memory</p>
307
+ <p class="text-xl font-medium">64GB DDR5-7200</p>
308
+ </div>
309
+ <div>
310
+ <p class="text-gray-400 mb-1">Storage</p>
311
+ <p class="text-xl font-medium">4TB NVMe Quantum</p>
312
+ </div>
313
+ </div>
314
+ <p class="text-gray-400 mb-8">
315
+ The Nexus Quantum X9000 represents the pinnacle of our engineering, featuring components enhanced with quantum tunneling technology for unprecedented performance in gaming, content creation, and scientific computing.
316
+ </p>
317
+ <div class="flex flex-wrap gap-4">
318
+ <button class="px-6 py-3 rounded-lg quantum-btn text-white font-bold">
319
+ <i class="fas fa-cog mr-2"></i> CUSTOMIZE
320
+ </button>
321
+ <button class="px-6 py-3 rounded-lg bg-transparent border-2 border-cyan-400 text-white font-bold hover:bg-cyan-900 hover:bg-opacity-20">
322
+ <i class="fas fa-info-circle mr-2"></i> DETAILS
323
+ </button>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </section>
329
+
330
+ <!-- Component Selector -->
331
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900">
332
+ <div class="max-w-7xl mx-auto">
333
+ <div class="text-center mb-16">
334
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 orbitron">
335
+ <span class="gradient-text">QUANTUM COMPONENTS</span>
336
+ </h2>
337
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
338
+ Select from our curated collection of future-ready hardware
339
+ </p>
340
+ </div>
341
+
342
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
343
+ <!-- CPU -->
344
+ <div class="quantum-card neon-border rounded-xl p-6 hover:shadow-lg hover:shadow-cyan-500/20 transition-all">
345
+ <div class="flex justify-between items-start mb-4">
346
+ <div>
347
+ <p class="text-gray-400 text-sm">PROCESSOR</p>
348
+ <h3 class="text-xl font-bold">QuantumCore i9</h3>
349
+ </div>
350
+ <div class="text-cyan-400 text-2xl">
351
+ <i class="fas fa-microchip"></i>
352
+ </div>
353
+ </div>
354
+ <img src="https://images.unsplash.com/photo-1592155931589-082d27843248?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="CPU" class="w-full h-40 object-contain mb-4">
355
+ <div class="flex justify-between items-center">
356
+ <span class="text-cyan-400 font-bold">$799</span>
357
+ <button class="text-sm px-3 py-1 rounded-full bg-cyan-900 bg-opacity-30 text-cyan-400 hover:bg-opacity-50">
358
+ SELECT
359
+ </button>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- GPU -->
364
+ <div class="quantum-card neon-border rounded-xl p-6 hover:shadow-lg hover:shadow-purple-500/20 transition-all">
365
+ <div class="flex justify-between items-start mb-4">
366
+ <div>
367
+ <p class="text-gray-400 text-sm">GRAPHICS</p>
368
+ <h3 class="text-xl font-bold">RTX 4090 Ti</h3>
369
+ </div>
370
+ <div class="text-purple-400 text-2xl">
371
+ <i class="fas fa-gamepad"></i>
372
+ </div>
373
+ </div>
374
+ <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="GPU" class="w-full h-40 object-contain mb-4">
375
+ <div class="flex justify-between items-center">
376
+ <span class="text-purple-400 font-bold">$1,899</span>
377
+ <button class="text-sm px-3 py-1 rounded-full bg-purple-900 bg-opacity-30 text-purple-400 hover:bg-opacity-50">
378
+ SELECT
379
+ </button>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- RAM -->
384
+ <div class="quantum-card neon-border rounded-xl p-6 hover:shadow-lg hover:shadow-blue-500/20 transition-all">
385
+ <div class="flex justify-between items-start mb-4">
386
+ <div>
387
+ <p class="text-gray-400 text-sm">MEMORY</p>
388
+ <h3 class="text-xl font-bold">DDR5-7200</h3>
389
+ </div>
390
+ <div class="text-blue-400 text-2xl">
391
+ <i class="fas fa-memory"></i>
392
+ </div>
393
+ </div>
394
+ <img src="https://images.unsplash.com/photo-1592155931589-082d27843248?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="RAM" class="w-full h-40 object-contain mb-4">
395
+ <div class="flex justify-between items-center">
396
+ <span class="text-blue-400 font-bold">$299</span>
397
+ <button class="text-sm px-3 py-1 rounded-full bg-blue-900 bg-opacity-30 text-blue-400 hover:bg-opacity-50">
398
+ SELECT
399
+ </button>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- Storage -->
404
+ <div class="quantum-card neon-border rounded-xl p-6 hover:shadow-lg hover:shadow-green-500/20 transition-all">
405
+ <div class="flex justify-between items-start mb-4">
406
+ <div>
407
+ <p class="text-gray-400 text-sm">STORAGE</p>
408
+ <h3 class="text-xl font-bold">4TB NVMe</h3>
409
+ </div>
410
+ <div class="text-green-400 text-2xl">
411
+ <i class="fas fa-database"></i>
412
+ </div>
413
+ </div>
414
+ <img src="https://images.unsplash.com/photo-1592155931589-082d27843248?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Storage" class="w-full h-40 object-contain mb-4">
415
+ <div class="flex justify-between items-center">
416
+ <span class="text-green-400 font-bold">$499</span>
417
+ <button class="text-sm px-3 py-1 rounded-full bg-green-900 bg-opacity-30 text-green-400 hover:bg-opacity-50">
418
+ SELECT
419
+ </button>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="text-center mt-16">
425
+ <button class="px-8 py-4 rounded-lg quantum-btn text-white text-lg font-bold transform transition-all hover:scale-105">
426
+ <i class="fas fa-cogs mr-2"></i> LAUNCH BUILDER
427
+ </button>
428
+ </div>
429
+ </div>
430
+ </section>
431
+
432
+ <!-- Testimonials -->
433
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
434
+ <div class="max-w-7xl mx-auto">
435
+ <div class="text-center mb-16">
436
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 orbitron">
437
+ <span class="gradient-text">QUANTUM EXPERIENCES</span>
438
+ </h2>
439
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
440
+ Hear from explorers who've ventured into the quantum realm
441
+ </p>
442
+ </div>
443
+
444
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
445
+ <!-- Testimonial 1 -->
446
+ <div class="quantum-card neon-border rounded-xl p-8">
447
+ <div class="flex items-center mb-6">
448
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
449
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover">
450
+ </div>
451
+ <div>
452
+ <h4 class="font-bold">Dr. Elena Voss</h4>
453
+ <p class="text-sm text-gray-400">Quantum Researcher</p>
454
+ </div>
455
+ </div>
456
+ <p class="text-gray-300 mb-4">
457
+ "The Quantum Forge system has reduced our simulation times from weeks to hours. The quantum-enhanced components make a tangible difference in our research."
458
+ </p>
459
+ <div class="text-yellow-400">
460
+ <i class="fas fa-star"></i>
461
+ <i class="fas fa-star"></i>
462
+ <i class="fas fa-star"></i>
463
+ <i class="fas fa-star"></i>
464
+ <i class="fas fa-star"></i>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Testimonial 2 -->
469
+ <div class="quantum-card neon-border rounded-xl p-8">
470
+ <div class="flex items-center mb-6">
471
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
472
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover">
473
+ </div>
474
+ <div>
475
+ <h4 class="font-bold">Marcus Chen</h4>
476
+ <p class="text-sm text-gray-400">Game Developer</p>
477
+ </div>
478
+ </div>
479
+ <p class="text-gray-300 mb-4">
480
+ "I've never experienced this level of performance before. The QuantumCore processor handles real-time ray tracing like it's nothing. Game-changing for development."
481
+ </p>
482
+ <div class="text-yellow-400">
483
+ <i class="fas fa-star"></i>
484
+ <i class="fas fa-star"></i>
485
+ <i class="fas fa-star"></i>
486
+ <i class="fas fa-star"></i>
487
+ <i class="fas fa-star-half-alt"></i>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Testimonial 3 -->
492
+ <div class="quantum-card neon-border rounded-xl p-8">
493
+ <div class="flex items-center mb-6">
494
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
495
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-full h-full object-cover">
496
+ </div>
497
+ <div>
498
+ <h4 class="font-bold">Sarah K.</h4>
499
+ <p class="text-sm text-gray-400">Content Creator</p>
500
+ </div>
501
+ </div>
502
+ <p class="text-gray-300 mb-4">
503
+ "Rendering 8K video used to take all night. With my Quantum Forge system, it's done before I finish my coffee. The NVMe storage is insanely fast too."
504
+ </p>
505
+ <div class="text-yellow-400">
506
+ <i class="fas fa-star"></i>
507
+ <i class="fas fa-star"></i>
508
+ <i class="fas fa-star"></i>
509
+ <i class="fas fa-star"></i>
510
+ <i class="fas fa-star"></i>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </section>
516
+
517
+ <!-- CTA Section -->
518
+ <section class="py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-cyan-900 to-purple-900 relative overflow-hidden">
519
+ <div class="absolute inset-0 opacity-20">
520
+ <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-purple-500 mix-blend-overlay"></div>
521
+ </div>
522
+
523
+ <div class="max-w-4xl mx-auto text-center relative z-10">
524
+ <h2 class="text-4xl md:text-6xl font-bold mb-8 orbitron glow">
525
+ READY TO FORGE YOUR QUANTUM FUTURE?
526
+ </h2>
527
+ <p class="text-xl text-gray-300 mb-12">
528
+ Join thousands of pioneers who've already stepped into the next generation of computing.
529
+ </p>
530
+ <div class="flex flex-col sm:flex-row justify-center gap-6">
531
+ <button class="px-8 py-4 rounded-lg bg-black text-white text-lg font-bold transform transition-all hover:scale-105 hover:bg-opacity-90">
532
+ <i class="fas fa-rocket mr-2"></i> START BUILDING
533
+ </button>
534
+ <button class="px-8 py-4 rounded-lg bg-white text-black text-lg font-bold transform transition-all hover:scale-105 hover:bg-gray-200">
535
+ <i class="fas fa-headset mr-2"></i> CHAT WITH EXPERT
536
+ </button>
537
+ </div>
538
+ </div>
539
+ </section>
540
+
541
+ <!-- Footer -->
542
+ <footer class="bg-black py-16 px-4 sm:px-6 lg:px-8">
543
+ <div class="max-w-7xl mx-auto">
544
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
545
+ <div>
546
+ <h3 class="text-2xl font-bold mb-6 orbitron gradient-text">QUANTUM FORGE</h3>
547
+ <p class="text-gray-400 mb-6">
548
+ Pioneering the future of PC building with quantum-inspired technology and cutting-edge components.
549
+ </p>
550
+ <div class="flex space-x-4">
551
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">
552
+ <i class="fab fa-twitter text-xl"></i>
553
+ </a>
554
+ <a href="#" class="text-gray-400 hover:text-purple-400 transition-all">
555
+ <i class="fab fa-instagram text-xl"></i>
556
+ </a>
557
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-all">
558
+ <i class="fab fa-facebook text-xl"></i>
559
+ </a>
560
+ <a href="#" class="text-gray-400 hover:text-red-400 transition-all">
561
+ <i class="fab fa-youtube text-xl"></i>
562
+ </a>
563
+ </div>
564
+ </div>
565
+
566
+ <div>
567
+ <h4 class="text-lg font-bold mb-6 text-white orbitron">EXPLORE</h4>
568
+ <ul class="space-y-3">
569
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Custom Builds</a></li>
570
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Prebuilt Systems</a></li>
571
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Components</a></li>
572
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Quantum Technology</a></li>
573
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Build Guides</a></li>
574
+ </ul>
575
+ </div>
576
+
577
+ <div>
578
+ <h4 class="text-lg font-bold mb-6 text-white orbitron">SUPPORT</h4>
579
+ <ul class="space-y-3">
580
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Contact Us</a></li>
581
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">FAQs</a></li>
582
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Warranty</a></li>
583
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Returns</a></li>
584
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-all">Shipping</a></li>
585
+ </ul>
586
+ </div>
587
+
588
+ <div>
589
+ <h4 class="text-lg font-bold mb-6 text-white orbitron">NEWSLETTER</h4>
590
+ <p class="text-gray-400 mb-4">
591
+ Subscribe for quantum tech updates and exclusive offers.
592
+ </p>
593
+ <div class="flex">
594
+ <input type="email" placeholder="Your email" class="px-4 py-3 bg-gray-800 text-white rounded-l-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 w-full">
595
+ <button class="px-4 py-3 bg-cyan-600 text-white rounded-r-lg hover:bg-cyan-700 transition-all">
596
+ <i class="fas fa-paper-plane"></i>
597
+ </button>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
603
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
604
+ © 2023 Quantum Forge. All rights reserved.
605
+ </p>
606
+ <div class="flex space-x-6">
607
+ <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Privacy Policy</a>
608
+ <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Terms of Service</a>
609
+ <a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Cookie Policy</a>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </footer>
614
+
615
+ <!-- Floating Chat Button -->
616
+ <div class="fixed bottom-8 right-8 z-50">
617
+ <button class="w-16 h-16 rounded-full quantum-btn pulse flex items-center justify-center text-white text-2xl">
618
+ <i class="fas fa-comment-dots"></i>
619
+ </button>
620
+ </div>
621
+
622
+ <script>
623
+ // Mobile menu toggle
624
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
625
+ const mobileMenu = document.getElementById('mobile-menu');
626
+
627
+ mobileMenuButton.addEventListener('click', () => {
628
+ mobileMenu.classList.toggle('hidden');
629
+ });
630
+
631
+ // Create floating particles
632
+ function createParticles() {
633
+ const particlesContainer = document.getElementById('particles');
634
+ const particleCount = 30;
635
+
636
+ for (let i = 0; i < particleCount; i++) {
637
+ const particle = document.createElement('div');
638
+ particle.classList.add('particle');
639
+
640
+ // Random size between 2px and 5px
641
+ const size = Math.random() * 3 + 2;
642
+ particle.style.width = `${size}px`;
643
+ particle.style.height = `${size}px`;
644
+
645
+ // Random position
646
+ particle.style.left = `${Math.random() * 100}vw`;
647
+ particle.style.top = `${Math.random() * 100}vh`;
648
+
649
+ // Random opacity
650
+ particle.style.opacity = Math.random() * 0.5 + 0.1;
651
+
652
+ // Random animation duration and delay
653
+ const duration = Math.random() * 20 + 10;
654
+ const delay = Math.random() * 5;
655
+ particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
656
+
657
+ particlesContainer.appendChild(particle);
658
+ }
659
+ }
660
+
661
+ // Initialize particles when DOM is loaded
662
+ document.addEventListener('DOMContentLoaded', createParticles);
663
+
664
+ // Smooth scrolling for navigation
665
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
666
+ anchor.addEventListener('click', function(e) {
667
+ e.preventDefault();
668
+
669
+ const targetId = this.getAttribute('href');
670
+ if (targetId === '#') return;
671
+
672
+ const targetElement = document.querySelector(targetId);
673
+ if (targetElement) {
674
+ targetElement.scrollIntoView({
675
+ behavior: 'smooth'
676
+ });
677
+
678
+ // Close mobile menu if open
679
+ if (!mobileMenu.classList.contains('hidden')) {
680
+ mobileMenu.classList.add('hidden');
681
+ }
682
+ }
683
+ });
684
+ });
685
+
686
+ // Add scroll reveal animation
687
+ function animateOnScroll() {
688
+ const elements = document.querySelectorAll('.quantum-card, .floating');
689
+
690
+ elements.forEach(element => {
691
+ const elementPosition = element.getBoundingClientRect().top;
692
+ const screenPosition = window.innerHeight / 1.2;
693
+
694
+ if (elementPosition < screenPosition) {
695
+ element.style.opacity = '1';
696
+ element.style.transform = 'translateY(0)';
697
+ }
698
+ });
699
+ }
700
+
701
+ // Set initial state for animated elements
702
+ document.querySelectorAll('.quantum-card, .floating').forEach(element => {
703
+ element.style.opacity = '0';
704
+ element.style.transform = 'translateY(20px)';
705
+ element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
706
+ });
707
+
708
+ // Run animation check on scroll
709
+ window.addEventListener('scroll', animateOnScroll);
710
+
711
+ // Run once on page load
712
+ animateOnScroll();
713
+ </script>
714
+ <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=systemxhost/quantum-forge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
715
+ </html>