Hugging Face's logo

Spaces:
zaid3sa
/
zad
Running

App Files Community
1
zaid3sa commited on
Commit
6624d9e
·
verified ·
1 Parent(s): 6420e16

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1296 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Zad
3
- emoji: 📊
4
- colorFrom: blue
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: zad
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,1296 @@
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>Nebula Nexus | Immersive Digital Experiences</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
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
13
+
14
+ * {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ body {
21
+ overflow-x: hidden;
22
+ font-family: 'Poppins', sans-serif;
23
+ background-color: #0a0a12;
24
+ color: #f1f1f3;
25
+ }
26
+
27
+ .tech-font {
28
+ font-family: 'Orbitron', sans-serif;
29
+ }
30
+
31
+ .hero-section {
32
+ height: 100vh;
33
+ position: relative;
34
+ }
35
+
36
+ .particle-bg {
37
+ position: absolute;
38
+ top: 0;
39
+ left: 0;
40
+ width: 100%;
41
+ height: 100%;
42
+ z-index: -1;
43
+ }
44
+
45
+ .gradient-text {
46
+ background: linear-gradient(90deg, #00f0ff, #5773ff, #ff007a);
47
+ -webkit-background-clip: text;
48
+ background-clip: text;
49
+ color: transparent;
50
+ }
51
+
52
+ .gradient-border {
53
+ position: relative;
54
+ }
55
+
56
+ .gradient-border::before {
57
+ content: '';
58
+ position: absolute;
59
+ inset: -2px;
60
+ z-index: -1;
61
+ background: linear-gradient(90deg, #00f0ff, #5773ff, #ff007a);
62
+ border-radius: inherit;
63
+ padding: 2px;
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
+ }
69
+
70
+ .floating {
71
+ animation: floating 8s ease-in-out infinite;
72
+ }
73
+
74
+ .floating-2 {
75
+ animation: floating 6s ease-in-out infinite 2s;
76
+ }
77
+
78
+ .floating-3 {
79
+ animation: floating 7s ease-in-out infinite 1s;
80
+ }
81
+
82
+ @keyframes floating {
83
+ 0% { transform: translateY(0px) rotate(0deg); }
84
+ 50% { transform: translateY(-30px) rotate(5deg); }
85
+ 100% { transform: translateY(0px) rotate(0deg); }
86
+ }
87
+
88
+ .holographic {
89
+ background: linear-gradient(135deg, rgba(0,240,255,0.1) 0%, rgba(87,115,255,0.1) 50%, rgba(255,0,122,0.1) 100%);
90
+ backdrop-filter: blur(10px);
91
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
92
+ border: 1px solid rgba(255, 255, 255, 0.05);
93
+ }
94
+
95
+ .neon-glow {
96
+ text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
97
+ }
98
+
99
+ .pulse {
100
+ animation: pulse 2s infinite;
101
+ }
102
+
103
+ @keyframes pulse {
104
+ 0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4); }
105
+ 70% { box-shadow: 0 0 0 15px rgba(0, 240, 255, 0); }
106
+ 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
107
+ }
108
+
109
+ .rotate-x {
110
+ animation: rotate-x 20s infinite linear;
111
+ transform-style: preserve-3d;
112
+ }
113
+
114
+ @keyframes rotate-x {
115
+ 0% { transform: rotateX(0deg); }
116
+ 100% { transform: rotateX(360deg); }
117
+ }
118
+
119
+ .space-helmet {
120
+ perspective: 1000px;
121
+ }
122
+
123
+ .helmet-visor {
124
+ background: linear-gradient(45deg, rgba(0,240,255,0.2), rgba(87,115,255,0.4));
125
+ box-shadow: inset 0 0 50px rgba(0,240,255,0.5);
126
+ border-radius: 50%;
127
+ filter: blur(0.5px);
128
+ }
129
+
130
+ .nav-link {
131
+ position: relative;
132
+ }
133
+
134
+ .nav-link::after {
135
+ content: '';
136
+ position: absolute;
137
+ width: 0;
138
+ height: 2px;
139
+ bottom: -5px;
140
+ left: 50%;
141
+ transform: translateX(-50%);
142
+ background: linear-gradient(90deg, #00f0ff, #5773ff, #ff007a);
143
+ transition: width 0.3s ease;
144
+ }
145
+
146
+ .nav-link:hover::after {
147
+ width: 100%;
148
+ }
149
+
150
+ .scroll-down {
151
+ position: absolute;
152
+ bottom: 30px;
153
+ left: 50%;
154
+ transform: translateX(-50%);
155
+ animation: bounce 2s infinite;
156
+ }
157
+
158
+ @keyframes bounce {
159
+ 0%, 20%, 50%, 80%, 100% {
160
+ transform: translateY(0) translateX(-50%);
161
+ }
162
+ 40% {
163
+ transform: translateY(-20px) translateX(-50%);
164
+ }
165
+ 60% {
166
+ transform: translateY(-10px) translateX(-50%);
167
+ }
168
+ }
169
+
170
+ .feature-panel {
171
+ transform: translateY(100px);
172
+ opacity: 0;
173
+ transition: all 0.6s ease-out;
174
+ }
175
+
176
+ .feature-panel.visible {
177
+ transform: translateY(0);
178
+ opacity: 1;
179
+ }
180
+
181
+ .hologram-effect {
182
+ position: relative;
183
+ }
184
+
185
+ .hologram-effect::before {
186
+ content: '';
187
+ position: absolute;
188
+ bottom: -10px;
189
+ left: 0;
190
+ width: 100%;
191
+ height: 50%;
192
+ background: linear-gradient(to bottom, rgba(0,240,255,0.3), transparent);
193
+ transform: perspective(500px) rotateX(60deg) scaleY(0.8);
194
+ filter: blur(15px);
195
+ z-index: -1;
196
+ }
197
+
198
+ .scanline {
199
+ position: relative;
200
+ overflow: hidden;
201
+ }
202
+
203
+ .scanline::before {
204
+ content: "";
205
+ position: absolute;
206
+ top: 0;
207
+ left: 0;
208
+ width: 100%;
209
+ height: 100%;
210
+ background: linear-gradient(
211
+ to bottom,
212
+ transparent 0%,
213
+ rgba(0, 240, 255, 0.03) 50%,
214
+ transparent 100%
215
+ );
216
+ animation: scanline 5s linear infinite;
217
+ pointer-events: none;
218
+ }
219
+
220
+ @keyframes scanline {
221
+ 0% { transform: translateY(-100%); }
222
+ 100% { transform: translateY(100%); }
223
+ }
224
+
225
+ /* Floating 3D Shapes */
226
+ .floating-cube {
227
+ animation: floating 8s ease-in-out infinite, rotate-x 20s infinite linear;
228
+ transform-style: preserve-3d;
229
+ }
230
+
231
+ .floating-pyramid {
232
+ animation: floating 7s ease-in-out infinite 1s, rotate-y 25s infinite linear reverse;
233
+ transform-style: preserve-3d;
234
+ }
235
+
236
+ .floating-torus {
237
+ animation: floating 9s ease-in-out infinite 2s, rotate-x 30s infinite linear reverse;
238
+ transform-style: preserve-3d;
239
+ }
240
+
241
+ @keyframes rotate-y {
242
+ 0% { transform: rotateY(0deg); }
243
+ 100% { transform: rotateY(360deg); }
244
+ }
245
+
246
+ .noise::before {
247
+ content: "";
248
+ position: absolute;
249
+ top: 0;
250
+ left: 0;
251
+ width: 100%;
252
+ height: 100%;
253
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
254
+ z-index: -1;
255
+ }
256
+ </style>
257
+ </head>
258
+ <body>
259
+ <!-- Background Animation -->
260
+ <div id="vanta-bg" class="particle-bg"></div>
261
+
262
+ <!-- Navigation -->
263
+ <nav class="fixed w-full z-50 bg-black bg-opacity-60 backdrop-filter backdrop-blur-lg border-b border-gray-800">
264
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
265
+ <div class="flex justify-between h-20 items-center">
266
+ <div class="flex-shrink-0 flex items-center">
267
+ <span class="text-2xl font-bold gradient-text tech-font">NEBULA NEXUS</span>
268
+ </div>
269
+ <div class="hidden md:block">
270
+ <div class="ml-10 flex items-center space-x-8">
271
+ <a href="#" class="nav-link px-3 py-2 text-sm font-medium">Home</a>
272
+ <a href="#features" class="nav-link px-3 py-2 text-sm font-medium">Tech</a>
273
+ <a href="#portfolio" class="nav-link px-3 py-2 text-sm font-medium">Work</a>
274
+ <a href="#pricing" class="nav-link px-3 py-2 text-sm font-medium">Plans</a>
275
+ <a href="#contact" class="nav-link px-3 py-2 text-sm font-medium">Contact</a>
276
+ </div>
277
+ </div>
278
+ <div class="flex items-center">
279
+ <button class="relative overflow-hidden group bg-transparent border-2 border-blue-400 hover:border-purple-500 text-white px-6 py-2 rounded-full font-medium transition-all duration-500">
280
+ <span class="relative z-10">Launch App</span>
281
+ <span class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></span>
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </nav>
287
+
288
+ <!-- Hero Section with 3D Model -->
289
+ <section class="hero-section flex items-center justify-center relative overflow-hidden px-4">
290
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
291
+ <div class="text-center lg:text-left">
292
+ <div class="relative inline-block mb-8">
293
+ <div class="absolute -inset-1 bg-gradient-to-r from-blue-400 to-purple-600 rounded-xl blur opacity-75"></div>
294
+ <span class="relative px-4 py-2 bg-black rounded-lg text-sm font-medium tech-font">
295
+ FUTURE OF DIGITAL EXPERIENCE
296
+ </span>
297
+ </div>
298
+ <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight tech-font">
299
+ <span class="gradient-text">Beyond Reality</span> Digital Frontiers
300
+ </h1>
301
+ <p class="text-xl text-gray-300 max-w-2xl mb-10">
302
+ We blend cutting-edge technology with immersive design to create experiences that transcend traditional boundaries.
303
+ </p>
304
+ <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
305
+ <button class="relative overflow-hidden group px-8 py-4 rounded-full font-medium text-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105">
306
+ <span class="relative z-10">Explore Demos</span>
307
+ <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-all duration-500"></span>
308
+ </button>
309
+ <button class="px-8 py-4 rounded-full font-medium text-lg border-2 border-blue-400 hover:border-purple-500 text-white hover:text-blue-200 transition-all duration-300 transform hover:scale-105">
310
+ <i class="fas fa-play mr-2"></i> Watch Showreel
311
+ </button>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- 3D Holographic Display -->
316
+ <div class="relative flex items-center justify-center h-96 lg:h-auto">
317
+ <div class="absolute w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96">
318
+ <div class="floating-torus h-full w-full">
319
+ <!-- Three.js will render here -->
320
+ <canvas id="torusCanvas" class="h-full w-full"></canvas>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="holographic h-64 w-64 md:h-80 md:w-80 lg:h-96 lg:w-96 rounded-full opacity-90 relative">
325
+ <div class="absolute inset-0 flex items-center justify-center">
326
+ <div class="helmet-visor h-3/4 w-3/4 flex items-center justify-center">
327
+ <div class="text-center p-6">
328
+ <h3 class="text-2xl font-bold mb-2 gradient-text tech-font">NEBULA NEXUS</h3>
329
+ <p class="text-xs text-gray-300">IMMERSIVE TECH</p>
330
+ <div class="mt-4 h-1 w-16 mx-auto bg-gradient-to-r from-blue-400 to-purple-600"></div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-1/2 h-2 bg-blue-400 rounded-full blur-md opacity-60"></div>
335
+ </div>
336
+
337
+ <!-- Floating 3D Shapes -->
338
+ <div class="absolute -left-10 top-1/4 w-16 h-16">
339
+ <div class="floating-cube h-full w-full">
340
+ <canvas id="cubeCanvas" class="h-full w-full"></canvas>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="absolute -right-10 bottom-1/3 w-20 h-20">
345
+ <div class="floating-pyramid h-full w-full">
346
+ <canvas id="pyramidCanvas" class="h-full w-full"></canvas>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Scroll Down Indicator -->
352
+ <div class="scroll-down lg:hidden">
353
+ <a href="#features" class="text-blue-400 hover:text-purple-400 transition-colors duration-300">
354
+ <i class="fas fa-chevron-down text-2xl"></i>
355
+ </a>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Tech Features Section -->
361
+ <section id="features" class="py-20 relative overflow-hidden px-4">
362
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
363
+ <div class="text-center mb-16">
364
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 tech-font">
365
+ <span class="gradient-text">Technological</span> Capabilities
366
+ </h2>
367
+ <p class="text-xl text-gray-300 max-w-4xl mx-auto">
368
+ Leveraging the latest advancements to create immersive experiences that engage and captivate.
369
+ </p>
370
+ </div>
371
+
372
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
373
+ <!-- Feature 1 -->
374
+ <div class="feature-panel holographic p-8 rounded-2xl transition-all duration-700 hover:transform hover:scale-105">
375
+ <div class="relative">
376
+ <div class="absolute -left-2 -top-2 w-12 h-12 bg-blue-500 rounded-full opacity-20 blur-sm"></div>
377
+ <div class="relative flex items-center">
378
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-4">
379
+ <i class="fas fa-vr-cardboard text-xl"></i>
380
+ </div>
381
+ <h3 class="text-2xl font-bold gradient-text tech-font">XR Integration</h3>
382
+ </div>
383
+ </div>
384
+ <p class="text-gray-300 mt-6 mb-6">
385
+ Seamless mixed reality experiences combining VR, AR, and spatial computing for unparalleled immersion.
386
+ </p>
387
+ <div class="relative h-40 mt-6 rounded-xl overflow-hidden">
388
+ <canvas id="xrCanvas" class="w-full h-full bg-black/30"></canvas>
389
+ <div class="absolute inset-0 flex items-center justify-center">
390
+ <div class="w-20 h-20 border-2 border-blue-400/50 rounded-full animate-ping opacity-30"></div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Feature 2 -->
396
+ <div class="feature-panel holographic p-8 rounded-2xl transition-all duration-700 delay-100 hover:transform hover:scale-105">
397
+ <div class="relative">
398
+ <div class="absolute -left-2 -top-2 w-12 h-12 bg-purple-500 rounded-full opacity-20 blur-sm"></div>
399
+ <div class="relative flex items-center">
400
+ <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center mr-4">
401
+ <i class="fas fa-brain text-xl"></i>
402
+ </div>
403
+ <h3 class="text-2xl font-bold gradient-text tech-font">AI Interaction</h3>
404
+ </div>
405
+ </div>
406
+ <p class="text-gray-300 mt-6 mb-6">
407
+ Smart adaptive interfaces powered by machine learning that evolve with user behavior and preferences.
408
+ </p>
409
+ <div class="relative h-40 mt-6 rounded-xl overflow-hidden">
410
+ <div class="absolute inset-0 flex items-center justify-center">
411
+ <div class="w-16 h-16 bg-gradient-to-br from-purple-600 to-pink-500 rounded-full flex items-center justify-center pulse">
412
+ <i class="fas fa-atom text-2xl"></i>
413
+ </div>
414
+ </div>
415
+ <div class="absolute inset-0">
416
+ <div class="grid grid-cols-5 grid-rows-5 h-full w-full">
417
+ <!-- Grid for neural network effect -->
418
+ <?php for($i=0; $i<25; $i++): ?>
419
+ <div class="border border-gray-700 relative">
420
+ <div class="absolute inset-0 bg-blue-500/10 animate-pulse" style="animation-delay: <?= $i*0.1 ?>s; opacity: 0;"></div>
421
+ </div>
422
+ <?php endfor; ?>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Feature 3 -->
429
+ <div class="feature-panel holographic p-8 rounded-2xl transition-all duration-700 delay-200 hover:transform hover:scale-105">
430
+ <div class="relative">
431
+ <div class="absolute -left-2 -top-2 w-12 h-12 bg-pink-500 rounded-full opacity-20 blur-sm"></div>
432
+ <div class="relative flex items-center">
433
+ <div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-blue-600 rounded-lg flex items-center justify-center mr-4">
434
+ <i class="fas fa-project-diagram text-xl"></i>
435
+ </div>
436
+ <h3 class="text-2xl font-bold gradient-text tech-font">Blockchain Ready</h3>
437
+ </div>
438
+ </div>
439
+ <p class="text-gray-300 mt-6 mb-6">
440
+ Decentralized architectures and NFT integration for ownership, authentication, and new economic models.
441
+ </p>
442
+ <div class="relative h-40 mt-6 rounded-xl overflow-hidden">
443
+ <div class="absolute inset-0">
444
+ <div class="grid grid-cols-6 gap-1 h-full w-full p-1">
445
+ <!-- Blockchain blocks animation -->
446
+ <?php for($i=0; $i<36; $i++): ?>
447
+ <div class="bg-gray-800/50 border border-gray-700 rounded-sm animate-pulse" style="animation-delay: <?= $i*0.05 ?>s;"></div>
448
+ <?php endfor; ?>
449
+ </div>
450
+ </div>
451
+ <div class="absolute inset-0 flex items-center justify-center">
452
+ <div class="w-16 h-16 rotate-x">
453
+ <div class="w-full h-full bg-gradient-to-br from-blue-600 to-pink-500 flex items-center justify-center">
454
+ <i class="fas fa-cube text-xl"></i>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </section>
463
+
464
+ <!-- 3D Showcase Section -->
465
+ <section id="portfolio" class="py-20 relative overflow-hidden px-4">
466
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
467
+ <div class="text-center mb-16">
468
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 tech-font">
469
+ <span class="gradient-text">Immersive</span> Showcase
470
+ </h2>
471
+ <p class="text-xl text-gray-300 max-w-4xl mx-auto">
472
+ Our portfolio of cutting-edge projects that push the boundaries of digital interaction.
473
+ </p>
474
+ </div>
475
+
476
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
477
+ <!-- Project 1 -->
478
+ <div class="feature-panel holographic rounded-2xl overflow-hidden transition-all duration-700 delay-75 hover:transform hover:scale-105">
479
+ <div class="relative h-64">
480
+ <canvas id="project1Canvas" class="absolute inset-0 w-full h-full bg-gray-900"></canvas>
481
+ <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
482
+ <div class="absolute bottom-0 left-0 p-6">
483
+ <h3 class="text-2xl font-bold mb-1">Quantum Interface</h3>
484
+ <span class="text-sm text-blue-400">VR Control System</span>
485
+ </div>
486
+ </div>
487
+ <div class="p-6">
488
+ <p class="text-gray-300 mb-4">A revolutionary interface system using quantum computing principles for intuitive interactions.</p>
489
+ <button class="text-blue-400 font-medium flex items-center group">
490
+ <span>Explore Project</span>
491
+ <i class="fas fa-arrow-right ml-2 group-hover:ml-3 transition-all duration-300"></i>
492
+ </button>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Project 2 -->
497
+ <div class="feature-panel holographic rounded-2xl overflow-hidden transition-all duration-700 delay-150 hover:transform hover:scale-105">
498
+ <div class="relative h-64">
499
+ <canvas id="project2Canvas" class="absolute inset-0 w-full h-full bg-gray-900"></canvas>
500
+ <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
501
+ <div class="absolute bottom-0 left-0 p-6">
502
+ <h3 class="text-2xl font-bold mb-1">Neon Metaverse</h3>
503
+ <span class="text-sm text-purple-400">Digital Cityscape</span>
504
+ </div>
505
+ </div>
506
+ <div class="p-6">
507
+ <p class="text-gray-300 mb-4">A cyberpunk-inspired virtual world with blockchain-based property ownership.</p>
508
+ <button class="text-purple-400 font-medium flex items-center group">
509
+ <span>Explore Project</span>
510
+ <i class="fas fa-arrow-right ml-2 group-hover:ml-3 transition-all duration-300"></i>
511
+ </button>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Project 3 -->
516
+ <div class="feature-panel holographic rounded-2xl overflow-hidden transition-all duration-700 delay-300 hover:transform hover:scale-105">
517
+ <div class="relative h-64">
518
+ <canvas id="project3Canvas" class="absolute inset-0 w-full h-full bg-gray-900"></canvas>
519
+ <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
520
+ <div class="absolute bottom-0 left-0 p-6">
521
+ <h3 class="text-2xl font-bold mb-1">Holo Nexus</h3>
522
+ <span class="text-sm text-pink-400">AR Collaboration</span>
523
+ </div>
524
+ </div>
525
+ <div class="p-6">
526
+ <p class="text-gray-300 mb-4">Mixed reality workspace enabling global teams to collaborate in 3D space.</p>
527
+ <button class="text-pink-400 font-medium flex items-center group">
528
+ <span>Explore Project</span>
529
+ <i class="fas fa-arrow-right ml-2 group-hover:ml-3 transition-all duration-300"></i>
530
+ </button>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="text-center mt-12">
536
+ <button class="relative overflow-hidden group px-8 py-4 rounded-full font-medium text-lg bg-transparent border-2 border-blue-400 hover:border-purple-500 text-white transition-all duration-300 transform hover:scale-105">
537
+ <span class="relative z-10">View All Projects</span>
538
+ <span class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></span>
539
+ </button>
540
+ </div>
541
+
542
+ <!-- 3D Tech Visualization -->
543
+ <div class="mt-20 relative h-96 rounded-3xl overflow-hidden hologram-effect scanline noise">
544
+ <canvas id="techVizCanvas" class="absolute inset-0 w-full h-full"></canvas>
545
+ <div class="absolute inset-0 flex items-center justify-center">
546
+ <div class="text-center p-8 max-w-2xl">
547
+ <h3 class="text-3xl md:text-4xl font-bold mb-4 gradient-text tech-font">Tech Spectrum Analysis</h3>
548
+ <p class="text-gray-300 mb-6">Real-time visualization of our technology stack and capabilities across multiple dimensions.</p>
549
+ <div class="flex justify-center gap-4">
550
+ <button class="px-6 py-2 rounded-full text-sm font-medium bg-blue-500/20 border border-blue-400/50 hover:bg-blue-500/30">XR</button>
551
+ <button class="px-6 py-2 rounded-full text-sm font-medium bg-purple-500/20 border border-purple-400/50 hover:bg-purple-500/30">AI</button>
552
+ <button class="px-6 py-2 rounded-full text-sm font-medium bg-pink-500/20 border border-pink-400/50 hover:bg-pink-500/30">Blockchain</button>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </section>
559
+
560
+ <!-- 3D Performance Stats -->
561
+ <section class="py-20 relative overflow-hidden px-4">
562
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
563
+ <div class="holographic rounded-3xl p-8 md:p-12 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
564
+ <div>
565
+ <h2 class="text-3xl md:text-5xl font-bold mb-6 tech-font">
566
+ <span class="gradient-text">Performance</span> Metrics
567
+ </h2>
568
+ <p class="text-xl text-gray-300 mb-8">
569
+ Our solutions deliver measurable results across all key performance indicators.
570
+ </p>
571
+ <div class="grid grid-cols-2 gap-6">
572
+ <div>
573
+ <div class="text-4xl font-bold gradient-text mb-2 tech-font">300%</div>
574
+ <p class="text-gray-400">User Engagement</p>
575
+ </div>
576
+ <div>
577
+ <div class="text-4xl font-bold gradient-text mb-2 tech-font">1.2s</div>
578
+ <p class="text-gray-400">Avg. Load Time</p>
579
+ </div>
580
+ <div>
581
+ <div class="text-4xl font-bold gradient-text mb-2 tech-font">99.9%</div>
582
+ <p class="text-gray-400">Uptime</p>
583
+ </div>
584
+ <div>
585
+ <div class="text-4xl font-bold gradient-text mb-2 tech-font">4.8/5</div>
586
+ <p class="text-gray-400">Client Satisfaction</p>
587
+ </div>
588
+ </div>
589
+ </div>
590
+
591
+ <div class="h-64 md:h-96 relative">
592
+ <canvas id="statsCanvas" class="absolute inset-0 w-full h-full"></canvas>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </section>
597
+
598
+ <!-- Contact Section with 3D Form -->
599
+ <section id="contact" class="py-20 relative overflow-hidden px-4">
600
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
601
+ <div class="text-center mb-16">
602
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 tech-font">
603
+ <span class="gradient-text">Ready to</span> Transform?
604
+ </h2>
605
+ <p class="text-xl text-gray-300 max-w-4xl mx-auto">
606
+ Let's discuss how we can create something extraordinary together.
607
+ </p>
608
+ </div>
609
+
610
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
611
+ <div class="holographic rounded-3xl p-8 md:p-12 relative overflow-hidden">
612
+ <form class="space-y-6 relative z-10">
613
+ <div>
614
+ <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Your Name</label>
615
+ <input type="text" id="name" class="w-full px-5 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your name">
616
+ </div>
617
+ <div>
618
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
619
+ <input type="email" id="email" class="w-full px-5 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="[email protected]">
620
+ </div>
621
+ <div>
622
+ <label for="project" class="block text-sm font-medium text-gray-300 mb-2">Project Type</label>
623
+ <select id="project" class="w-full px-5 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
624
+ <option>Select project type</option>
625
+ <option>XR Experience</option>
626
+ <option>AI Integration</option>
627
+ <option>Web3 Platform</option>
628
+ <option>Custom Solution</option>
629
+ </select>
630
+ </div>
631
+ <div>
632
+ <label for="message" class="block text-sm font-medium text-gray-300 mb-2">Project Details</label>
633
+ <textarea id="message" rows="4" class="w-full px-5 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Tell us about your project..."></textarea>
634
+ </div>
635
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-4 rounded-xl font-medium text-lg transition-all duration-300 transform hover:scale-105">
636
+ Send Message
637
+ </button>
638
+ </form>
639
+ <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
640
+ <div class="absolute -top-20 -left-20 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>
641
+ </div>
642
+
643
+ <div class="relative">
644
+ <div class="h-full w-full rounded-3xl overflow-hidden">
645
+ <canvas id="contactCanvas" class="h-full w-full bg-gray-900"></canvas>
646
+ </div>
647
+ <div class="absolute bottom-8 left-8 right-8 p-6 bg-black/70 backdrop-filter backdrop-blur-sm rounded-xl border border-gray-700">
648
+ <h3 class="text-xl font-bold mb-2 gradient-text tech-font">Connect With Us</h3>
649
+ <p class="text-gray-300 mb-4">We're available across all major platforms and networks.</p>
650
+ <div class="flex space-x-4">
651
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-400 rounded-full flex items-center justify-center transition-all duration-300">
652
+ <i class="fab fa-twitter"></i>
653
+ </a>
654
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-purple-400 rounded-full flex items-center justify-center transition-all duration-300">
655
+ <i class="fab fa-discord"></i>
656
+ </a>
657
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-pink-400 rounded-full flex items-center justify-center transition-all duration-300">
658
+ <i class="fab fa-linkedin"></i>
659
+ </a>
660
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition-all duration-300">
661
+ <i class="fab fa-telegram"></i>
662
+ </a>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ </section>
669
+
670
+ <!-- Footer -->
671
+ <footer class="py-12 border-t border-gray-800 relative overflow-hidden px-4">
672
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
673
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
674
+ <div>
675
+ <h4 class="text-xl font-bold gradient-text tech-font mb-4">NEBULA NEXUS</h4>
676
+ <p class="text-gray-400 mb-6">Pushing the boundaries of digital experience through immersive technology.</p>
677
+ <div class="flex space-x-4">
678
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">
679
+ <i class="fab fa-twitter"></i>
680
+ </a>
681
+ <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300">
682
+ <i class="fab fa-discord"></i>
683
+ </a>
684
+ <a href="#" class="text-gray-400 hover:text-pink-400 transition-colors duration-300">
685
+ <i class="fab fa-linkedin"></i>
686
+ </a>
687
+ <a href="#" class="text-gray-400 hover:text-blue-600 transition-colors duration-300">
688
+ <i class="fab fa-telegram"></i>
689
+ </a>
690
+ </div>
691
+ </div>
692
+ <div>
693
+ <h5 class="text-lg font-bold text-white mb-4">Services</h5>
694
+ <ul class="space-y-2">
695
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">XR Development</a></li>
696
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">AI Integration</a></li>
697
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Web3 Solutions</a></li>
698
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Immersive Design</a></li>
699
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Tech Consulting</a></li>
700
+ </ul>
701
+ </div>
702
+ <div>
703
+ <h5 class="text-lg font-bold text-white mb-4">Company</h5>
704
+ <ul class="space-y-2">
705
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">About Us</a></li>
706
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Careers</a></li>
707
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Case Studies</a></li>
708
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Blog</a></li>
709
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Contact</a></li>
710
+ </ul>
711
+ </div>
712
+ <div>
713
+ <h5 class="text-lg font-bold text-white mb-4">Newsletter</h5>
714
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and insights.</p>
715
+ <form class="flex">
716
+ <input type="email" placeholder="Your email" class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent w-full">
717
+ <button type="submit" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-r-lg transition-all duration-300">
718
+ <i class="fas fa-paper-plane"></i>
719
+ </button>
720
+ </form>
721
+ </div>
722
+ </div>
723
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
724
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Nebula Nexus. All rights reserved.</p>
725
+ <div class="flex space-x-6">
726
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition-colors duration-300">Privacy Policy</a>
727
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition-colors duration-300">Terms of Service</a>
728
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition-colors duration-300">Cookies</a>
729
+ </div>
730
+ </div>
731
+ </div>
732
+
733
+ <!-- Floating 3D Sphere -->
734
+ <div class="absolute -bottom-20 -right-20 w-40 h-40">
735
+ <canvas id="footerSphereCanvas" class="w-full h-full"></canvas>
736
+ </div>
737
+ </footer>
738
+
739
+ <script>
740
+ // Initialize Vanta.js background
741
+ VANTA.GLOBE({
742
+ el: "#vanta-bg",
743
+ mouseControls: true,
744
+ touchControls: true,
745
+ gyroControls: false,
746
+ minHeight: 200.00,
747
+ minWidth: 200.00,
748
+ scale: 1.00,
749
+ scaleMobile: 1.00,
750
+ color: 0x5773ff,
751
+ backgroundColor: 0x0a0a12,
752
+ size: 0.8
753
+ });
754
+
755
+ // Initialize Three.js 3D models
756
+ document.addEventListener('DOMContentLoaded', function() {
757
+ // Torus in Hero Section
758
+ const torusCanvas = document.getElementById('torusCanvas');
759
+ const torusScene = new THREE.Scene();
760
+ const torusCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
761
+ const torusRenderer = new THREE.WebGLRenderer({
762
+ canvas: torusCanvas,
763
+ alpha: true,
764
+ antialias: true
765
+ });
766
+
767
+ const torusGeometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
768
+ const torusMaterial = new THREE.MeshBasicMaterial({
769
+ color: 0x5773ff,
770
+ wireframe: true,
771
+ transparent: true,
772
+ opacity: 0.8
773
+ });
774
+ const torus = new THREE.Mesh(torusGeometry, torusMaterial);
775
+ torusScene.add(torus);
776
+
777
+ torusCamera.position.z = 3;
778
+
779
+ // Cube in Hero Section
780
+ const cubeCanvas = document.getElementById('cubeCanvas');
781
+ const cubeScene = new THREE.Scene();
782
+ const cubeCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
783
+ const cubeRenderer = new THREE.WebGLRenderer({
784
+ canvas: cubeCanvas,
785
+ alpha: true,
786
+ antialias: true
787
+ });
788
+
789
+ const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
790
+ const cubeMaterial = new THREE.MeshBasicMaterial({
791
+ color: 0xff007a,
792
+ wireframe: true,
793
+ transparent: true,
794
+ opacity: 0.6
795
+ });
796
+ const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
797
+ cubeScene.add(cube);
798
+
799
+ cubeCamera.position.z = 3;
800
+
801
+ // Pyramid in Hero Section
802
+ const pyramidCanvas = document.getElementById('pyramidCanvas');
803
+ const pyramidScene = new THREE.Scene();
804
+ const pyramidCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
805
+ const pyramidRenderer = new THREE.WebGLRenderer({
806
+ canvas: pyramidCanvas,
807
+ alpha: true,
808
+ antialias: true
809
+ });
810
+
811
+ const pyramidGeometry = new THREE.ConeGeometry(0.8, 1.5, 4);
812
+ const pyramidMaterial = new THREE.MeshBasicMaterial({
813
+ color: 0x00f0ff,
814
+ wireframe: true,
815
+ transparent: true,
816
+ opacity: 0.6
817
+ });
818
+ const pyramid = new THREE.Mesh(pyramidGeometry, pyramidMaterial);
819
+ pyramid.rotation.y = Math.PI / 4;
820
+ pyramidScene.add(pyramid);
821
+
822
+ pyramidCamera.position.z = 3;
823
+
824
+ // XR Canvas in Features
825
+ const xrCanvas = document.getElementById('xrCanvas');
826
+ const xrScene = new THREE.Scene();
827
+ const xrCamera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);
828
+ const xrRenderer = new THREE.WebGLRenderer({
829
+ canvas: xrCanvas,
830
+ alpha: true,
831
+ antialias: true
832
+ });
833
+
834
+ const xrPointsGeometry = new THREE.BufferGeometry();
835
+ const xrVertices = [];
836
+ for (let i = 0; i < 1000; i++) {
837
+ xrVertices.push(
838
+ Math.random() * 2 - 1,
839
+ Math.random() * 2 - 1,
840
+ Math.random() * 2 - 1
841
+ );
842
+ }
843
+ xrPointsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(xrVertices, 3));
844
+ const xrPointsMaterial = new THREE.PointsMaterial({
845
+ color: 0x5773ff,
846
+ size: 0.02,
847
+ transparent: true,
848
+ opacity: 0.8
849
+ });
850
+ const xrPoints = new THREE.Points(xrPointsGeometry, xrPointsMaterial);
851
+ xrScene.add(xrPoints);
852
+
853
+ xrCamera.position.z = 2;
854
+ xrRenderer.setSize(xrCanvas.width, xrCanvas.height);
855
+
856
+ // Project 1 Canvas
857
+ const project1Canvas = document.getElementById('project1Canvas');
858
+ const project1Scene = new THREE.Scene();
859
+ const project1Camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
860
+ const project1Renderer = new THREE.WebGLRenderer({
861
+ canvas: project1Canvas,
862
+ alpha: true,
863
+ antialias: true
864
+ });
865
+
866
+ // Create a grid of points for project 1
867
+ const project1Geometry = new THREE.BufferGeometry();
868
+ const project1Vertices = [];
869
+ const gridSize = 10;
870
+
871
+ for (let i = 0; i < gridSize; i++) {
872
+ for (let j = 0; j < gridSize; j++) {
873
+ project1Vertices.push(
874
+ (i - gridSize/2) * 0.1,
875
+ (j - gridSize/2) * 0.1,
876
+ 0
877
+ );
878
+ }
879
+ }
880
+
881
+ project1Geometry.setAttribute('position', new THREE.Float32BufferAttribute(project1Vertices, 3));
882
+ const project1Material = new THREE.PointsMaterial({
883
+ color: 0x00f0ff,
884
+ size: 0.05,
885
+ sizeAttenuation: true
886
+ });
887
+ const project1Points = new THREE.Points(project1Geometry, project1Material);
888
+ project1Scene.add(project1Points);
889
+
890
+ project1Camera.position.z = 2;
891
+ project1Renderer.setSize(project1Canvas.width, project1Canvas.height);
892
+
893
+ // Project 2 Canvas
894
+ const project2Canvas = document.getElementById('project2Canvas');
895
+ const project2Scene = new THREE.Scene();
896
+ const project2Camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
897
+ const project2Renderer = new THREE.WebGLRenderer({
898
+ canvas: project2Canvas,
899
+ alpha: true,
900
+ antialias: true
901
+ });
902
+
903
+ // Create a wireframe city for project 2
904
+ const project2Group = new THREE.Group();
905
+
906
+ for (let i = 0; i < 20; i++) {
907
+ const height = Math.random() * 0.5 + 0.2;
908
+ const buildingGeometry = new THREE.BoxGeometry(0.1, height, 0.1);
909
+ const buildingMaterial = new THREE.MeshBasicMaterial({
910
+ color: 0x8a2be2,
911
+ wireframe: true
912
+ });
913
+ const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
914
+ building.position.x = (Math.random() - 0.5) * 2;
915
+ building.position.z = (Math.random() - 0.5) * 2;
916
+ building.position.y = height / 2;
917
+ project2Group.add(building);
918
+ }
919
+
920
+ project2Scene.add(project2Group);
921
+ project2Camera.position.z = 3;
922
+ project2Camera.position.y = 1;
923
+ project2Renderer.setSize(project2Canvas.width, project2Canvas.height);
924
+
925
+ // Project 3 Canvas
926
+ const project3Canvas = document.getElementById('project3Canvas');
927
+ const project3Scene = new THREE.Scene();
928
+ const project3Camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
929
+ const project3Renderer = new THREE.WebGLRenderer({
930
+ canvas: project3Canvas,
931
+ alpha: true,
932
+ antialias: true
933
+ });
934
+
935
+ // Create a network of lines for project 3
936
+ const project3Group = new THREE.Group();
937
+ const project3Material = new THREE.LineBasicMaterial({ color: 0xff007a });
938
+
939
+ for (let i = 0; i < 20; i++) {
940
+ const project3Geometry = new THREE.BufferGeometry();
941
+ const vertices = [];
942
+ vertices.push(
943
+ Math.random() * 2 - 1,
944
+ Math.random() * 2 - 1,
945
+ Math.random() * 2 - 1
946
+ );
947
+ vertices.push(
948
+ Math.random() * 2 - 1,
949
+ Math.random() * 2 - 1,
950
+ Math.random() * 2 - 1
951
+ );
952
+ project3Geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
953
+ const line = new THREE.Line(project3Geometry, project3Material);
954
+ project3Group.add(line);
955
+ }
956
+
957
+ project3Scene.add(project3Group);
958
+ project3Camera.position.z = 3;
959
+ project3Renderer.setSize(project3Canvas.width, project3Canvas.height);
960
+
961
+ // Tech Viz Canvas
962
+ const techVizCanvas = document.getElementById('techVizCanvas');
963
+ const techVizScene = new THREE.Scene();
964
+ const techVizCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
965
+ const techVizRenderer = new THREE.WebGLRenderer({
966
+ canvas: techVizCanvas,
967
+ alpha: true,
968
+ antialias: true
969
+ });
970
+ techVizRenderer.setSize(techVizCanvas.width, techVizCanvas.height);
971
+
972
+ // Create a particle system for tech viz
973
+ const techVizParticles = 500;
974
+ const techVizPositions = new Float32Array(techVizParticles * 3);
975
+ const techVizColors = new Float32Array(techVizParticles * 3);
976
+
977
+ for (let i = 0; i < techVizParticles; i++) {
978
+ techVizPositions[i * 3] = (Math.random() - 0.5) * 10;
979
+ techVizPositions[i * 3 + 1] = (Math.random() - 0.5) * 10;
980
+ techVizPositions[i * 3 + 2] = (Math.random() - 0.5) * 10;
981
+
982
+ techVizColors[i * 3] = Math.random() * 0.5 + 0.5; // R
983
+ techVizColors[i * 3 + 1] = Math.random() * 0.3; // G
984
+ techVizColors[i * 3 + 2] = Math.random() * 0.5 + 0.5; // B
985
+ }
986
+
987
+ const techVizGeometry = new THREE.BufferGeometry();
988
+ techVizGeometry.setAttribute('position', new THREE.BufferAttribute(techVizPositions, 3));
989
+ techVizGeometry.setAttribute('color', new THREE.BufferAttribute(techVizColors, 3));
990
+
991
+ const techVizMaterial = new THREE.PointsMaterial({
992
+ size: 0.1,
993
+ vertexColors: true,
994
+ transparent: true,
995
+ opacity: 0.8,
996
+ sizeAttenuation: true
997
+ });
998
+
999
+ const techVizParticleSystem = new THREE.Points(techVizGeometry, techVizMaterial);
1000
+ techVizScene.add(techVizParticleSystem);
1001
+
1002
+ techVizCamera.position.z = 5;
1003
+
1004
+ // Stats Canvas
1005
+ const statsCanvas = document.getElementById('statsCanvas');
1006
+ const statsScene = new THREE.Scene();
1007
+ const statsCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1008
+ const statsRenderer = new THREE.WebGLRenderer({
1009
+ canvas: statsCanvas,
1010
+ alpha: true,
1011
+ antialias: true
1012
+ });
1013
+ statsRenderer.setSize(statsCanvas.width, statsCanvas.height);
1014
+
1015
+ // Create data visualization
1016
+ const statsGroup = new THREE.Group();
1017
+
1018
+ // Create bars
1019
+ const barHeights = [1.5, 2, 2.8, 1.8, 2.5];
1020
+ const barColors = [0x00f0ff, 0x5773ff, 0xff007a, 0x8a2be2, 0x00ffaa];
1021
+
1022
+ for (let i = 0; i < barHeights.length; i++) {
1023
+ const barGeometry = new THREE.BoxGeometry(0.3, barHeights[i], 0.3);
1024
+ const barMaterial = new THREE.MeshBasicMaterial({ color: barColors[i] });
1025
+ const bar = new THREE.Mesh(barGeometry, barMaterial);
1026
+ bar.position.x = (i - 2) * 0.8;
1027
+ bar.position.y = barHeights[i] / 2;
1028
+ statsGroup.add(bar);
1029
+
1030
+ // Add connecting lines
1031
+ if (i > 0) {
1032
+ const lineGeometry = new THREE.BufferGeometry();
1033
+ const lineVertices = [
1034
+ (i-1 - 2) * 0.8, barHeights[i-1], 0,
1035
+ (i - 2) * 0.8, barHeights[i], 0
1036
+ ];
1037
+ lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(lineVertices, 3));
1038
+ const lineMaterial = new THREE.LineBasicMaterial({
1039
+ color: 0xffffff,
1040
+ transparent: true,
1041
+ opacity: 0.4
1042
+ });
1043
+ const line = new THREE.Line(lineGeometry, lineMaterial);
1044
+ statsGroup.add(line);
1045
+ }
1046
+ }
1047
+
1048
+ // Add base plane
1049
+ const planeGeometry = new THREE.PlaneGeometry(5, 0.1);
1050
+ const planeMaterial = new THREE.MeshBasicMaterial({
1051
+ color: 0x444444,
1052
+ side: THREE.DoubleSide
1053
+ });
1054
+ const plane = new THREE.Mesh(planeGeometry, planeMaterial);
1055
+ plane.rotation.x = Math.PI / 2;
1056
+ plane.position.y = -0.05;
1057
+ statsGroup.add(plane);
1058
+
1059
+ statsScene.add(statsGroup);
1060
+ statsCamera.position.z = 6;
1061
+ statsCamera.position.y = 1;
1062
+ statsCamera.lookAt(0, 1, 0);
1063
+
1064
+ // Contact Canvas
1065
+ const contactCanvas = document.getElementById('contactCanvas');
1066
+ const contactScene = new THREE.Scene();
1067
+ const contactCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1068
+ const contactRenderer = new THREE.WebGLRenderer({
1069
+ canvas: contactCanvas,
1070
+ alpha: true,
1071
+ antialias: true
1072
+ });
1073
+
1074
+ // Create glowing orbs with connections
1075
+ const contactOrbs = [];
1076
+ const orbPositions = [];
1077
+ const orbColors = [0x00f0ff, 0x5773ff, 0xff007a, 0x8a2be2, 0x00ffaa];
1078
+
1079
+ for (let i = 0; i < 5; i++) {
1080
+ const orbGeometry = new THREE.SphereGeometry(0.3, 16, 16);
1081
+ const orbMaterial = new THREE.MeshBasicMaterial({
1082
+ color: orbColors[i],
1083
+ transparent: true,
1084
+ opacity: 0.8
1085
+ });
1086
+ const orb = new THREE.Mesh(orbGeometry, orbMaterial);
1087
+
1088
+ orb.position.x = (Math.random() - 0.5) * 4;
1089
+ orb.position.y = (Math.random() - 0.5) * 2;
1090
+ orb.position.z = (Math.random() - 0.5) * 4;
1091
+
1092
+ orbPositions.push(new THREE.Vector3(
1093
+ orb.position.x,
1094
+ orb.position.y,
1095
+ orb.position.z
1096
+ ));
1097
+
1098
+ contactOrbs.push(orb);
1099
+ contactScene.add(orb);
1100
+ }
1101
+
1102
+ // Add connecting lines
1103
+ const lineGeometry = new THREE.BufferGeometry();
1104
+ const lineVertices = [];
1105
+
1106
+ for (let i = 0; i < orbPositions.length; i++) {
1107
+ for (let j = i + 1; j < orbPositions.length; j++) {
1108
+ lineVertices.push(
1109
+ orbPositions[i].x, orbPositions[i].y, orbPositions[i].z,
1110
+ orbPositions[j].x, orbPositions[j].y, orbPositions[j].z
1111
+ );
1112
+ }
1113
+ }
1114
+
1115
+ lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(lineVertices, 3));
1116
+ const lineMaterial = new THREE.LineBasicMaterial({
1117
+ color: 0xffffff,
1118
+ transparent: true,
1119
+ opacity: 0.2
1120
+ });
1121
+ const lines = new THREE.LineSegments(lineGeometry, lineMaterial);
1122
+ contactScene.add(lines);
1123
+
1124
+ contactCamera.position.z = 8;
1125
+ contactRenderer.setSize(contactCanvas.width, contactCanvas.height);
1126
+
1127
+ // Footer Sphere
1128
+ const footerSphereCanvas = document.getElementById('footerSphereCanvas');
1129
+ const footerSphereScene = new THREE.Scene();
1130
+ const footerSphereCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1131
+ const footerSphereRenderer = new THREE.WebGLRenderer({
1132
+ canvas: footerSphereCanvas,
1133
+ alpha: true,
1134
+ antialias: true
1135
+ });
1136
+
1137
+ const footerSphereGeometry = new THREE.SphereGeometry(1, 32, 32);
1138
+ const footerSphereMaterial = new THREE.MeshBasicMaterial({
1139
+ color: 0x00f0ff,
1140
+ wireframe: true,
1141
+ transparent: true,
1142
+ opacity: 0.4
1143
+ });
1144
+ const footerSphere = new THREE.Mesh(footerSphereGeometry, footerSphereMaterial);
1145
+ footerSphereScene.add(footerSphere);
1146
+
1147
+ footerSphereCamera.position.z = 3;
1148
+
1149
+ // Intersection Observer for animated elements
1150
+ const observer = new IntersectionObserver((entries) => {
1151
+ entries.forEach(entry => {
1152
+ if (entry.isIntersecting) {
1153
+ entry.target.classList.add('visible');
1154
+ }
1155
+ });
1156
+ }, {
1157
+ threshold: 0.1
1158
+ });
1159
+
1160
+ document.querySelectorAll('.feature-panel').forEach(panel => {
1161
+ observer.observe(panel);
1162
+ });
1163
+
1164
+ // Animation loop
1165
+ function animate() {
1166
+ requestAnimationFrame(animate);
1167
+
1168
+ // Rotate torus
1169
+ torus.rotation.x += 0.01;
1170
+ torus.rotation.y += 0.01;
1171
+ torusRenderer.render(torusScene, torusCamera);
1172
+
1173
+ // Rotate cube (slower)
1174
+ cube.rotation.x += 0.005;
1175
+ cube.rotation.y += 0.005;
1176
+ cubeRenderer.render(cubeScene, cubeCamera);
1177
+
1178
+ // Rotate pyramid (different axis)
1179
+ pyramid.rotation.x += 0.007;
1180
+ pyramid.rotation.z += 0.007;
1181
+ pyramidRenderer.render(pyramidScene, pyramidCamera);
1182
+
1183
+ // Animate XR points
1184
+ xrPoints.rotation.y += 0.005;
1185
+ xrRenderer.render(xrScene, xrCamera);
1186
+
1187
+ // Animate project 1 points
1188
+ project1Points.rotation.y += 0.01;
1189
+ const positions = project1Points.geometry.attributes.position;
1190
+ for (let i = 2; i < positions.count * 3; i += 3) {
1191
+ positions.array[i] = Math.sin(Date.now() * 0.001 + i) * 0.5;
1192
+ }
1193
+ positions.needsUpdate = true;
1194
+ project1Renderer.render(project1Scene, project1Camera);
1195
+
1196
+ // Animate project 2 buildings
1197
+ project2Group.rotation.y += 0.005;
1198
+ project2Renderer.render(project2Scene, project2Camera);
1199
+
1200
+ // Animate project 3 lines
1201
+ project3Group.rotation.y += 0.008;
1202
+ project3Renderer.render(project3Scene, project3Camera);
1203
+
1204
+ // Animate tech viz particles
1205
+ techVizParticleSystem.rotation.y += 0.003;
1206
+ techVizRenderer.render(techVizScene, techVizCamera);
1207
+
1208
+ // Animate stats bars
1209
+ statsGroup.rotation.y += 0.002;
1210
+ statsRenderer.render(statsScene, statsCamera);
1211
+
1212
+ // Animate contact orbs
1213
+ contactOrbs.forEach((orb, i) => {
1214
+ orb.position.y = Math.sin(Date.now() * 0.001 + i) * 0.3;
1215
+ orb.scale.setScalar(1 + Math.sin(Date.now() * 0.001 + i) * 0.2);
1216
+ });
1217
+ contactRenderer.render(contactScene, contactCamera);
1218
+
1219
+ // Rotate footer sphere
1220
+ footerSphere.rotation.y += 0.01;
1221
+ footerSphereRenderer.render(footerSphereScene, footerSphereCamera);
1222
+ }
1223
+
1224
+ animate();
1225
+
1226
+ // Handle window resize
1227
+ window.addEventListener('resize', function() {
1228
+ // Adjust canvas sizes and camera aspects
1229
+ const canvases = [
1230
+ { canvas: torusCanvas, renderer: torusRenderer },
1231
+ { canvas: cubeCanvas, renderer: cubeRenderer },
1232
+ { canvas: pyramidCanvas, renderer: pyramidRenderer },
1233
+ { canvas: xrCanvas, renderer: xrRenderer },
1234
+ { canvas: project1Canvas, renderer: project1Renderer },
1235
+ { canvas: project2Canvas, renderer: project2Renderer },
1236
+ { canvas: project3Canvas, renderer: project3Renderer },
1237
+ { canvas: techVizCanvas, renderer: techVizRenderer },
1238
+ { canvas: statsCanvas, renderer: statsRenderer },
1239
+ { canvas: contactCanvas, renderer: contactRenderer },
1240
+ { canvas: footerSphereCanvas, renderer: footerSphereRenderer }
1241
+ ];
1242
+
1243
+ canvases.forEach(item => {
1244
+ // For the hero section floating elements
1245
+ if ([torusCanvas, cubeCanvas, pyramidCanvas].includes(item.canvas)) {
1246
+ const parent = item.canvas.parentElement;
1247
+ const width = parent.offsetWidth;
1248
+ const height = parent.offsetHeight;
1249
+
1250
+ item.canvas.width = width;
1251
+ item.canvas.height = height;
1252
+ item.renderer.setSize(width, height);
1253
+
1254
+ // Update camera for new aspect ratio
1255
+ const camera = item === torusCanvas ? torusCamera :
1256
+ item === cubeCanvas ? cubeCamera : pyramidCamera;
1257
+
1258
+ camera.aspect = width / height;
1259
+ camera.updateProjectionMatrix();
1260
+ }
1261
+
1262
+ // For other canvas elements with defined parents
1263
+ else if (item.canvas.parentElement) {
1264
+ const parent = item.canvas.parentElement;
1265
+ const width = parent.offsetWidth;
1266
+ const height = parent.offsetHeight;
1267
+
1268
+ if (width > 0 && height > 0) {
1269
+ item.canvas.width = width;
1270
+ item.canvas.height = height;
1271
+ item.renderer.setSize(width, height);
1272
+
1273
+ // Update camera for new aspect ratio
1274
+ let camera;
1275
+ if (item === xrCanvas) camera = xrCamera;
1276
+ else if (item === project1Canvas) camera = project1Camera;
1277
+ else if (item === project2Canvas) camera = project2Camera;
1278
+ else if (item === project3Canvas) camera = project3Camera;
1279
+ else if (item === techVizCanvas) camera = techVizCamera;
1280
+ else if (item === statsCanvas) camera = statsCamera;
1281
+ else if (item === contactCanvas) camera = contactCamera;
1282
+ else if (item === footerSphereCanvas) camera = footerSphereCamera;
1283
+
1284
+ camera.aspect = width / height;
1285
+ camera.updateProjectionMatrix();
1286
+ }
1287
+ }
1288
+ });
1289
+ });
1290
+
1291
+ // Trigger initial resize
1292
+ window.dispatchEvent(new Event('resize'));
1293
+ });
1294
+ </script>
1295
+ <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=zaid3sa/zad" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
1296
+ </html>