Hugging Face's logo

Spaces:
sprakhar778
/
nexus
Running

App Files Community
sprakhar778 commited on
Commit
ee1d91d
·
verified ·
1 Parent(s): b0141ee

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +856 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nexus
3
- emoji: 🦀
4
- colorFrom: red
5
  colorTo: blue
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: nexus
3
+ emoji: 🐳
4
+ colorFrom: gray
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,856 @@
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>Nexus Frontiers | Robotics, AI & Cosmology</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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ cosmic: {
15
+ 100: '#e0e7ff',
16
+ 200: '#c7d2fe',
17
+ 300: '#a5b4fc',
18
+ 400: '#818cf8',
19
+ 500: '#6366f1',
20
+ 600: '#4f46e5',
21
+ 700: '#4338ca',
22
+ 800: '#3730a3',
23
+ 900: '#312e81',
24
+ },
25
+ nebula: {
26
+ 100: '#f0f9ff',
27
+ 200: '#e0f2fe',
28
+ 300: '#bae6fd',
29
+ 400: '#7dd3fc',
30
+ 500: '#38bdf8',
31
+ 600: '#0284c7',
32
+ 700: '#0369a1',
33
+ 800: '#075985',
34
+ 900: '#0c4a6e',
35
+ },
36
+ quantum: {
37
+ 100: '#f5f3ff',
38
+ 200: '#ede9fe',
39
+ 300: '#ddd6fe',
40
+ 400: '#c4b5fd',
41
+ 500: '#a78bfa',
42
+ 600: '#8b5cf6',
43
+ 700: '#7c3aed',
44
+ 800: '#6d28d9',
45
+ 900: '#5b21b6',
46
+ }
47
+ },
48
+ fontFamily: {
49
+ sans: ['Inter', 'sans-serif'],
50
+ orbitron: ['Orbitron', 'sans-serif'],
51
+ },
52
+ animation: {
53
+ 'float': 'float 6s ease-in-out infinite',
54
+ 'pulse-slow': 'pulse 5s infinite',
55
+ }
56
+ }
57
+ }
58
+ }
59
+ </script>
60
+ <style>
61
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
62
+
63
+ body {
64
+ font-family: 'Inter', sans-serif;
65
+ background-color: #0f172a;
66
+ color: #e2e8f0;
67
+ }
68
+
69
+ .hero-gradient {
70
+ background: radial-gradient(circle at 10% 20%, rgba(67, 56, 202, 0.15) 0%, rgba(15, 23, 42, 1) 60%);
71
+ }
72
+
73
+ .float {
74
+ animation: float 6s ease-in-out infinite;
75
+ }
76
+
77
+ @keyframes float {
78
+ 0% { transform: translateY(0px); }
79
+ 50% { transform: translateY(-20px); }
80
+ 100% { transform: translateY(0px); }
81
+ }
82
+
83
+ .glow {
84
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
85
+ }
86
+
87
+ .card-hover {
88
+ transition: all 0.3s ease;
89
+ }
90
+
91
+ .card-hover:hover {
92
+ transform: translateY(-5px);
93
+ box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4);
94
+ }
95
+
96
+ .cosmic-border {
97
+ position: relative;
98
+ }
99
+
100
+ .cosmic-border::before {
101
+ content: '';
102
+ position: absolute;
103
+ inset: 0;
104
+ border-radius: inherit;
105
+ padding: 1px;
106
+ background: linear-gradient(135deg, #6366f1, #8b5cf6, #38bdf8);
107
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
108
+ -webkit-mask-composite: xor;
109
+ mask-composite: exclude;
110
+ pointer-events: none;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body class="min-h-screen">
115
+ <!-- Navigation -->
116
+ <nav class="bg-gray-900/80 backdrop-blur-md fixed w-full z-50 border-b border-gray-800">
117
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
118
+ <div class="flex items-center justify-between h-16">
119
+ <div class="flex items-center">
120
+ <div class="flex-shrink-0">
121
+ <div class="flex items-center">
122
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cosmic-500 to-quantum-500 flex items-center justify-center">
123
+ <i class="fas fa-atom text-white text-xs"></i>
124
+ </div>
125
+ <span class="ml-2 text-white font-bold text-xl font-orbitron">NEXUS</span>
126
+ </div>
127
+ </div>
128
+ <div class="hidden md:block">
129
+ <div class="ml-10 flex items-baseline space-x-4">
130
+ <a href="#home" class="text-cosmic-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a>
131
+ <a href="#solutions" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Solutions</a>
132
+ <a href="#research" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Research</a>
133
+ <a href="#team" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Team</a>
134
+ <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <div class="hidden md:block">
139
+ <div class="ml-4 flex items-center md:ml-6">
140
+ <button class="bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity">
141
+ Join Our Mission
142
+ </button>
143
+ </div>
144
+ </div>
145
+ <div class="-mr-2 flex md:hidden">
146
+ <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">
147
+ <span class="sr-only">Open main menu</span>
148
+ <i class="fas fa-bars"></i>
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Mobile menu -->
155
+ <div class="hidden md:hidden" id="mobile-menu">
156
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
157
+ <a href="#home" class="text-cosmic-300 block px-3 py-2 rounded-md text-base font-medium">Home</a>
158
+ <a href="#solutions" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Solutions</a>
159
+ <a href="#research" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Research</a>
160
+ <a href="#team" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
161
+ <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
162
+ <button class="bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white block w-full text-left px-3 py-2 rounded-md text-base font-medium mt-2">
163
+ Join Our Mission
164
+ </button>
165
+ </div>
166
+ </div>
167
+ </nav>
168
+
169
+ <!-- Hero Section -->
170
+ <section id="home" class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
171
+ <div class="max-w-7xl mx-auto">
172
+ <div class="relative z-10">
173
+ <div class="text-center">
174
+ <h1 class="text-4xl md:text-6xl font-bold font-orbitron tracking-tight text-white mb-6">
175
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-cosmic-400 to-nebula-400">Pioneering the Future</span>
176
+ </h1>
177
+ <p class="mt-6 text-xl text-gray-300 max-w-3xl mx-auto">
178
+ Where robotics, artificial intelligence, and cosmology converge to solve humanity's greatest challenges and explore the universe's deepest mysteries.
179
+ </p>
180
+ <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
181
+ <a href="#solutions" class="px-8 py-3 bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white font-medium rounded-md hover:opacity-90 transition-opacity">
182
+ Explore Our Work
183
+ </a>
184
+ <a href="#contact" class="px-8 py-3 border border-cosmic-500 text-cosmic-300 font-medium rounded-md hover:bg-cosmic-900/30 transition-colors">
185
+ Contact Us
186
+ </a>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
192
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 card-hover">
193
+ <div class="w-12 h-12 rounded-full bg-cosmic-900 flex items-center justify-center mb-4">
194
+ <i class="fas fa-robot text-cosmic-400 text-xl"></i>
195
+ </div>
196
+ <h3 class="text-lg font-semibold text-white mb-2">Advanced Robotics</h3>
197
+ <p class="text-gray-400">Developing autonomous systems that operate in extreme environments from deep oceans to outer space.</p>
198
+ </div>
199
+
200
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 card-hover">
201
+ <div class="w-12 h-12 rounded-full bg-cosmic-900 flex items-center justify-center mb-4">
202
+ <i class="fas fa-brain text-quantum-400 text-xl"></i>
203
+ </div>
204
+ <h3 class="text-lg font-semibold text-white mb-2">Artificial Intelligence</h3>
205
+ <p class="text-gray-400">Creating self-learning algorithms that accelerate scientific discovery and technological innovation.</p>
206
+ </div>
207
+
208
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 card-hover">
209
+ <div class="w-12 h-12 rounded-full bg-cosmic-900 flex items-center justify-center mb-4">
210
+ <i class="fas fa-meteor text-nebula-400 text-xl"></i>
211
+ </div>
212
+ <h3 class="text-lg font-semibold text-white mb-2">Cosmology Research</h3>
213
+ <p class="text-gray-400">Unraveling the mysteries of dark matter, cosmic inflation, and the fundamental nature of reality.</p>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
218
+ <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-cosmic-500/10 blur-3xl"></div>
219
+ <div class="absolute top-1/3 right-1/4 w-72 h-72 rounded-full bg-quantum-500/10 blur-3xl"></div>
220
+ <div class="absolute bottom-1/4 right-1/3 w-80 h-80 rounded-full bg-nebula-500/10 blur-3xl"></div>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- Solutions Section -->
226
+ <section id="solutions" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
227
+ <div class="max-w-7xl mx-auto">
228
+ <div class="text-center mb-16">
229
+ <span class="text-sm font-semibold tracking-wider text-cosmic-400 uppercase">Our Solutions</span>
230
+ <h2 class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-orbitron">
231
+ Bridging <span class="text-cosmic-400">Technology</span> and <span class="text-nebula-400">Cosmos</span>
232
+ </h2>
233
+ <p class="mt-4 max-w-2xl text-xl text-gray-400 mx-auto">
234
+ We develop integrated solutions that push the boundaries of what's possible.
235
+ </p>
236
+ </div>
237
+
238
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
239
+ <div class="relative cosmic-border rounded-2xl overflow-hidden bg-gray-800 p-8">
240
+ <div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-cosmic-500/20 blur-xl"></div>
241
+ <div class="flex items-start">
242
+ <div class="flex-shrink-0 bg-cosmic-900/50 p-3 rounded-lg">
243
+ <i class="fas fa-satellite-dish text-cosmic-400 text-2xl"></i>
244
+ </div>
245
+ <div class="ml-4">
246
+ <h3 class="text-xl font-bold text-white">Autonomous Space Probes</h3>
247
+ <p class="mt-2 text-gray-400">
248
+ Our AI-driven robotic probes can autonomously navigate and conduct scientific experiments in deep space environments.
249
+ </p>
250
+ <ul class="mt-4 space-y-2">
251
+ <li class="flex items-center">
252
+ <i class="fas fa-check-circle text-cosmic-400 mr-2"></i>
253
+ <span class="text-gray-300">Self-learning navigation systems</span>
254
+ </li>
255
+ <li class="flex items-center">
256
+ <i class="fas fa-check-circle text-cosmic-400 mr-2"></i>
257
+ <span class="text-gray-300">Quantum communication enabled</span>
258
+ </li>
259
+ <li class="flex items-center">
260
+ <i class="fas fa-check-circle text-cosmic-400 mr-2"></i>
261
+ <span class="text-gray-300">Adaptive scientific instrumentation</span>
262
+ </li>
263
+ </ul>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="relative cosmic-border rounded-2xl overflow-hidden bg-gray-800 p-8">
269
+ <div class="absolute -left-10 -bottom-10 w-32 h-32 rounded-full bg-quantum-500/20 blur-xl"></div>
270
+ <div class="flex items-start">
271
+ <div class="flex-shrink-0 bg-quantum-900/50 p-3 rounded-lg">
272
+ <i class="fas fa-network-wired text-quantum-400 text-2xl"></i>
273
+ </div>
274
+ <div class="ml-4">
275
+ <h3 class="text-xl font-bold text-white">Cosmic Data Network</h3>
276
+ <p class="mt-2 text-gray-400">
277
+ A distributed AI system that processes astronomical data from telescopes worldwide to detect cosmic patterns.
278
+ </p>
279
+ <ul class="mt-4 space-y-2">
280
+ <li class="flex items-center">
281
+ <i class="fas fa-check-circle text-quantum-400 mr-2"></i>
282
+ <span class="text-gray-300">Real-time galaxy mapping</span>
283
+ </li>
284
+ <li class="flex items-center">
285
+ <i class="fas fa-check-circle text-quantum-400 mr-2"></i>
286
+ <span class="text-gray-300">Anomaly detection algorithms</span>
287
+ </li>
288
+ <li class="flex items-center">
289
+ <i class="fas fa-check-circle text-quantum-400 mr-2"></i>
290
+ <span class="text-gray-300">Predictive cosmology models</span>
291
+ </li>
292
+ </ul>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="relative cosmic-border rounded-2xl overflow-hidden bg-gray-800 p-8">
298
+ <div class="absolute -right-10 -bottom-10 w-32 h-32 rounded-full bg-nebula-500/20 blur-xl"></div>
299
+ <div class="flex items-start">
300
+ <div class="flex-shrink-0 bg-nebula-900/50 p-3 rounded-lg">
301
+ <i class="fas fa-user-astronaut text-nebula-400 text-2xl"></i>
302
+ </div>
303
+ <div class="ml-4">
304
+ <h3 class="text-xl font-bold text-white">Exo-Humanoid Robotics</h3>
305
+ <p class="mt-2 text-gray-400">
306
+ Humanoid robots designed for extraterrestrial environments with advanced AI for autonomous operation.
307
+ </p>
308
+ <ul class="mt-4 space-y-2">
309
+ <li class="flex items-center">
310
+ <i class="fas fa-check-circle text-nebula-400 mr-2"></i>
311
+ <span class="text-gray-300">Multi-environment adaptability</span>
312
+ </li>
313
+ <li class="flex items-center">
314
+ <i class="fas fa-check-circle text-nebula-400 mr-2"></i>
315
+ <span class="text-gray-300">Human-AI collaboration systems</span>
316
+ </li>
317
+ <li class="flex items-center">
318
+ <i class="fas fa-check-circle text-nebula-400 mr-2"></i>
319
+ <span class="text-gray-300">Self-repair capabilities</span>
320
+ </li>
321
+ </ul>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="relative cosmic-border rounded-2xl overflow-hidden bg-gray-800 p-8">
327
+ <div class="absolute -left-10 -top-10 w-32 h-32 rounded-full bg-cosmic-500/20 blur-xl"></div>
328
+ <div class="flex items-start">
329
+ <div class="flex-shrink-0 bg-cosmic-900/50 p-3 rounded-lg">
330
+ <i class="fas fa-atom text-cosmic-400 text-2xl"></i>
331
+ </div>
332
+ <div class="ml-4">
333
+ <h3 class="text-xl font-bold text-white">Quantum AI Laboratory</h3>
334
+ <p class="mt-2 text-gray-400">
335
+ Merging quantum computing with artificial intelligence to solve complex cosmological problems.
336
+ </p>
337
+ <ul class="mt-4 space-y-2">
338
+ <li class="flex items-center">
339
+ <i class="fas fa-check-circle text-cosmic-400 mr-2"></i>
340
+ <span class="text-gray-300">Quantum neural networks</span>
341
+ </li>
342
+ <li class="flex items-center">
343
+ <i class="fas fa-check-circle text-cosmic-400 mr-2"></i>
344
+ <span class="text-gray-300">Dark matter simulations</span>
345
+ </li>
346
+ <li class="flex items-center">
347
+ <i class="fas fa-check-circle text-cosmic-400 mr-2"></i>
348
+ <span class="text-gray-300">Multiverse theory testing</span>
349
+ </li>
350
+ </ul>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- Research Section -->
359
+ <section id="research" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900/50">
360
+ <div class="max-w-7xl mx-auto">
361
+ <div class="text-center mb-16">
362
+ <span class="text-sm font-semibold tracking-wider text-nebula-400 uppercase">Cutting Edge Research</span>
363
+ <h2 class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-orbitron">
364
+ Exploring the <span class="text-quantum-400">Frontiers</span> of Science
365
+ </h2>
366
+ <p class="mt-4 max-w-2xl text-xl text-gray-400 mx-auto">
367
+ Our interdisciplinary approach leads to breakthroughs at the intersection of technology and cosmology.
368
+ </p>
369
+ </div>
370
+
371
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
372
+ <div class="relative">
373
+ <div class="relative rounded-2xl overflow-hidden bg-gradient-to-br from-gray-800 to-gray-900 p-1">
374
+ <div class="bg-gray-900 rounded-xl p-6">
375
+ <div class="flex flex-col space-y-6">
376
+ <div class="flex items-start">
377
+ <div class="flex-shrink-0 bg-cosmic-900/50 p-2 rounded-md">
378
+ <i class="fas fa-stars text-cosmic-400 text-xl"></i>
379
+ </div>
380
+ <div class="ml-4">
381
+ <h3 class="text-lg font-semibold text-white">Dark Matter Mapping</h3>
382
+ <p class="mt-1 text-gray-400">
383
+ Using AI to analyze gravitational lensing patterns and create the most detailed dark matter maps ever produced.
384
+ </p>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="flex items-start">
389
+ <div class="flex-shrink-0 bg-quantum-900/50 p-2 rounded-md">
390
+ <i class="fas fa-infinity text-quantum-400 text-xl"></i>
391
+ </div>
392
+ <div class="ml-4">
393
+ <h3 class="text-lg font-semibold text-white">Quantum Gravity Models</h3>
394
+ <p class="mt-1 text-gray-400">
395
+ Developing new theoretical frameworks that reconcile quantum mechanics with general relativity.
396
+ </p>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="flex items-start">
401
+ <div class="flex-shrink-0 bg-nebula-900/50 p-2 rounded-md">
402
+ <i class="fas fa-rocket text-nebula-400 text-xl"></i>
403
+ </div>
404
+ <div class="ml-4">
405
+ <h3 class="text-lg font-semibold text-white">Exoplanet Exploration</h3>
406
+ <p class="mt-1 text-gray-400">
407
+ Autonomous robotic systems designed to identify and analyze potentially habitable exoplanets.
408
+ </p>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ <div class="absolute -z-10 -top-6 -left-6 w-64 h-64 rounded-full bg-cosmic-500/10 blur-3xl"></div>
415
+ </div>
416
+
417
+ <div>
418
+ <h3 class="text-2xl font-bold text-white mb-6 font-orbitron">Our Research Methodology</h3>
419
+ <p class="text-gray-400 mb-6">
420
+ At Nexus Frontiers, we combine computational power with human creativity to tackle the universe's greatest mysteries. Our unique approach integrates:
421
+ </p>
422
+
423
+ <div class="space-y-6">
424
+ <div class="flex">
425
+ <div class="flex-shrink-0">
426
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-cosmic-900/50 text-cosmic-400">
427
+ <span class="text-xl font-bold">1</span>
428
+ </div>
429
+ </div>
430
+ <div class="ml-4">
431
+ <h4 class="text-lg font-medium text-white">Robotic Data Collection</h4>
432
+ <p class="mt-2 text-gray-400">
433
+ Autonomous systems gather data from extreme environments across Earth and space.
434
+ </p>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="flex">
439
+ <div class="flex-shrink-0">
440
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-quantum-900/50 text-quantum-400">
441
+ <span class="text-xl font-bold">2</span>
442
+ </div>
443
+ </div>
444
+ <div class="ml-4">
445
+ <h4 class="text-lg font-medium text-white">AI Analysis</h4>
446
+ <p class="mt-2 text-gray-400">
447
+ Machine learning algorithms process vast datasets to identify patterns invisible to human researchers.
448
+ </p>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="flex">
453
+ <div class="flex-shrink-0">
454
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-nebula-900/50 text-nebula-400">
455
+ <span class="text-xl font-bold">3</span>
456
+ </div>
457
+ </div>
458
+ <div class="ml-4">
459
+ <h4 class="text-lg font-medium text-white">Theoretical Innovation</h4>
460
+ <p class="mt-2 text-gray-400">
461
+ Our cosmologists develop new models based on computational findings, creating a virtuous cycle of discovery.
462
+ </p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="mt-16 bg-gray-800/50 rounded-2xl p-8 border border-gray-700">
470
+ <div class="text-center">
471
+ <h3 class="text-2xl font-bold text-white mb-4 font-orbitron">Recent Breakthrough</h3>
472
+ <p class="text-xl text-nebula-300 max-w-3xl mx-auto">
473
+ "Our AI system discovered a previously unknown correlation between quantum fluctuations and galaxy formation patterns."
474
+ </p>
475
+ <div class="mt-8 flex justify-center">
476
+ <button class="px-6 py-3 bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white font-medium rounded-md hover:opacity-90 transition-opacity">
477
+ Read the White Paper
478
+ </button>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- Team Section -->
486
+ <section id="team" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
487
+ <div class="max-w-7xl mx-auto">
488
+ <div class="text-center mb-16">
489
+ <span class="text-sm font-semibold tracking-wider text-cosmic-400 uppercase">Our Visionaries</span>
490
+ <h2 class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-orbitron">
491
+ The <span class="text-nebula-400">Minds</span> Behind the Mission
492
+ </h2>
493
+ <p class="mt-4 max-w-2xl text-xl text-gray-400 mx-auto">
494
+ A multidisciplinary team of scientists, engineers, and thinkers pushing boundaries.
495
+ </p>
496
+ </div>
497
+
498
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
499
+ <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
500
+ <div class="flex flex-col items-center text-center">
501
+ <div class="relative mb-6">
502
+ <img class="w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Dr. Elena Rodriguez">
503
+ <div class="absolute -bottom-2 -right-2 bg-cosmic-600 rounded-full p-1">
504
+ <div class="bg-cosmic-900 rounded-full p-1">
505
+ <i class="fas fa-robot text-white text-xs"></i>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ <h3 class="text-xl font-bold text-white">Dr. Elena Rodriguez</h3>
510
+ <p class="text-cosmic-400">Chief Robotics Engineer</p>
511
+ <p class="mt-3 text-gray-400">
512
+ Former NASA roboticist specializing in autonomous systems for space exploration.
513
+ </p>
514
+ <div class="mt-4 flex space-x-4">
515
+ <a href="#" class="text-gray-400 hover:text-cosmic-400 transition-colors">
516
+ <i class="fab fa-linkedin-in"></i>
517
+ </a>
518
+ <a href="#" class="text-gray-400 hover:text-cosmic-400 transition-colors">
519
+ <i class="fab fa-twitter"></i>
520
+ </a>
521
+ <a href="#" class="text-gray-400 hover:text-cosmic-400 transition-colors">
522
+ <i class="fas fa-paperclip"></i>
523
+ </a>
524
+ </div>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
529
+ <div class="flex flex-col items-center text-center">
530
+ <div class="relative mb-6">
531
+ <img class="w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Dr. Raj Patel">
532
+ <div class="absolute -bottom-2 -right-2 bg-quantum-600 rounded-full p-1">
533
+ <div class="bg-quantum-900 rounded-full p-1">
534
+ <i class="fas fa-brain text-white text-xs"></i>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ <h3 class="text-xl font-bold text-white">Dr. Raj Patel</h3>
539
+ <p class="text-quantum-400">AI Research Director</p>
540
+ <p class="mt-3 text-gray-400">
541
+ Pioneer in neural networks for scientific discovery, with 50+ published papers.
542
+ </p>
543
+ <div class="mt-4 flex space-x-4">
544
+ <a href="#" class="text-gray-400 hover:text-quantum-400 transition-colors">
545
+ <i class="fab fa-linkedin-in"></i>
546
+ </a>
547
+ <a href="#" class="text-gray-400 hover:text-quantum-400 transition-colors">
548
+ <i class="fab fa-twitter"></i>
549
+ </a>
550
+ <a href="#" class="text-gray-400 hover:text-quantum-400 transition-colors">
551
+ <i class="fas fa-paperclip"></i>
552
+ </a>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
558
+ <div class="flex flex-col items-center text-center">
559
+ <div class="relative mb-6">
560
+ <img class="w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Dr. Sophia Chen">
561
+ <div class="absolute -bottom-2 -right-2 bg-nebula-600 rounded-full p-1">
562
+ <div class="bg-nebula-900 rounded-full p-1">
563
+ <i class="fas fa-meteor text-white text-xs"></i>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ <h3 class="text-xl font-bold text-white">Dr. Sophia Chen</h3>
568
+ <p class="text-nebula-400">Chief Cosmologist</p>
569
+ <p class="mt-3 text-gray-400">
570
+ Theoretical physicist specializing in dark energy and multiverse theories.
571
+ </p>
572
+ <div class="mt-4 flex space-x-4">
573
+ <a href="#" class="text-gray-400 hover:text-nebula-400 transition-colors">
574
+ <i class="fab fa-linkedin-in"></i>
575
+ </a>
576
+ <a href="#" class="text-gray-400 hover:text-nebula-400 transition-colors">
577
+ <i class="fab fa-twitter"></i>
578
+ </a>
579
+ <a href="#" class="text-gray-400 hover:text-nebula-400 transition-colors">
580
+ <i class="fas fa-paperclip"></i>
581
+ </a>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="mt-16 text-center">
588
+ <h3 class="text-2xl font-bold text-white mb-6 font-orbitron">Join Our Team</h3>
589
+ <p class="text-gray-400 max-w-2xl mx-auto mb-8">
590
+ We're always looking for brilliant minds passionate about pushing the boundaries of science and technology.
591
+ </p>
592
+ <button class="px-8 py-3 bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white font-medium rounded-md hover:opacity-90 transition-opacity">
593
+ View Open Positions
594
+ </button>
595
+ </div>
596
+ </div>
597
+ </section>
598
+
599
+ <!-- Contact Section -->
600
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-gray-900/80">
601
+ <div class="max-w-7xl mx-auto">
602
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
603
+ <div>
604
+ <span class="text-sm font-semibold tracking-wider text-nebula-400 uppercase">Get In Touch</span>
605
+ <h2 class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-orbitron">
606
+ Let's <span class="text-cosmic-400">Explore</span> Together
607
+ </h2>
608
+ <p class="mt-4 text-xl text-gray-400">
609
+ Whether you're interested in collaboration, investment opportunities, or just want to discuss the future of technology and cosmology, we'd love to hear from you.
610
+ </p>
611
+
612
+ <div class="mt-8 space-y-4">
613
+ <div class="flex items-start">
614
+ <div class="flex-shrink-0 bg-cosmic-900/50 p-2 rounded-md">
615
+ <i class="fas fa-envelope text-cosmic-400"></i>
616
+ </div>
617
+ <div class="ml-4">
618
+ <h3 class="text-lg font-medium text-white">Email Us</h3>
619
+ <p class="mt-1 text-gray-400">contact@nexusfrontiers.space</p>
620
+ </div>
621
+ </div>
622
+
623
+ <div class="flex items-start">
624
+ <div class="flex-shrink-0 bg-quantum-900/50 p-2 rounded-md">
625
+ <i class="fas fa-map-marker-alt text-quantum-400"></i>
626
+ </div>
627
+ <div class="ml-4">
628
+ <h3 class="text-lg font-medium text-white">Visit Us</h3>
629
+ <p class="mt-1 text-gray-400">42 Stellar Drive, Quantum Valley, CA 94025</p>
630
+ </div>
631
+ </div>
632
+
633
+ <div class="flex items-start">
634
+ <div class="flex-shrink-0 bg-nebula-900/50 p-2 rounded-md">
635
+ <i class="fas fa-phone-alt text-nebula-400"></i>
636
+ </div>
637
+ <div class="ml-4">
638
+ <h3 class="text-lg font-medium text-white">Call Us</h3>
639
+ <p class="mt-1 text-gray-400">+1 (555) 314-1592</p>
640
+ </div>
641
+ </div>
642
+ </div>
643
+
644
+ <div class="mt-8">
645
+ <h3 class="text-lg font-medium text-white mb-4">Follow Our Journey</h3>
646
+ <div class="flex space-x-4">
647
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cosmic-600 transition-colors">
648
+ <i class="fab fa-twitter"></i>
649
+ </a>
650
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cosmic-600 transition-colors">
651
+ <i class="fab fa-linkedin-in"></i>
652
+ </a>
653
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cosmic-600 transition-colors">
654
+ <i class="fab fa-youtube"></i>
655
+ </a>
656
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cosmic-600 transition-colors">
657
+ <i class="fab fa-github"></i>
658
+ </a>
659
+ </div>
660
+ </div>
661
+ </div>
662
+
663
+ <div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700">
664
+ <form class="space-y-6">
665
+ <div>
666
+ <label for="name" class="block text-sm font-medium text-gray-300">Full Name</label>
667
+ <div class="mt-1">
668
+ <input type="text" id="name" name="name" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-cosmic-500 focus:border-cosmic-500 block w-full p-2.5" placeholder="Your name" required>
669
+ </div>
670
+ </div>
671
+
672
+ <div>
673
+ <label for="email" class="block text-sm font-medium text-gray-300">Email Address</label>
674
+ <div class="mt-1">
675
+ <input type="email" id="email" name="email" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-cosmic-500 focus:border-cosmic-500 block w-full p-2.5" placeholder="you@example.com" required>
676
+ </div>
677
+ </div>
678
+
679
+ <div>
680
+ <label for="subject" class="block text-sm font-medium text-gray-300">Subject</label>
681
+ <div class="mt-1">
682
+ <select id="subject" name="subject" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-cosmic-500 focus:border-cosmic-500 block w-full p-2.5">
683
+ <option value="" disabled selected>Select a topic</option>
684
+ <option value="collaboration">Research Collaboration</option>
685
+ <option value="investment">Investment Opportunities</option>
686
+ <option value="partnership">Technology Partnership</option>
687
+ <option value="media">Media Inquiry</option>
688
+ <option value="other">Other</option>
689
+ </select>
690
+ </div>
691
+ </div>
692
+
693
+ <div>
694
+ <label for="message" class="block text-sm font-medium text-gray-300">Your Message</label>
695
+ <div class="mt-1">
696
+ <textarea id="message" name="message" rows="4" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-cosmic-500 focus:border-cosmic-500 block w-full p-2.5" placeholder="How can we help you explore the frontiers of science?" required></textarea>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="flex items-center">
701
+ <input id="privacy-policy" name="privacy-policy" type="checkbox" class="h-4 w-4 text-cosmic-600 focus:ring-cosmic-500 border-gray-600 rounded">
702
+ <label for="privacy-policy" class="ml-2 block text-sm text-gray-300">
703
+ I agree to the <a href="#" class="text-cosmic-400 hover:underline">Privacy Policy</a>
704
+ </label>
705
+ </div>
706
+
707
+ <div>
708
+ <button type="submit" class="w-full bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white font-medium rounded-lg text-sm px-5 py-2.5 text-center hover:opacity-90 transition-opacity">
709
+ Send Message
710
+ </button>
711
+ </div>
712
+ </form>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </section>
717
+
718
+ <!-- Footer -->
719
+ <footer class="bg-gray-900 border-t border-gray-800">
720
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
721
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
722
+ <div>
723
+ <div class="flex items-center">
724
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cosmic-500 to-quantum-500 flex items-center justify-center">
725
+ <i class="fas fa-atom text-white text-xs"></i>
726
+ </div>
727
+ <span class="ml-2 text-white font-bold text-xl font-orbitron">NEXUS</span>
728
+ </div>
729
+ <p class="mt-4 text-gray-400">
730
+ Pioneering the convergence of robotics, artificial intelligence, and cosmology to expand human knowledge and capabilities.
731
+ </p>
732
+ </div>
733
+
734
+ <div>
735
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Solutions</h3>
736
+ <ul class="mt-4 space-y-2">
737
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Autonomous Space Probes</a></li>
738
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Cosmic Data Network</a></li>
739
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Exo-Humanoid Robotics</a></li>
740
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Quantum AI Laboratory</a></li>
741
+ </ul>
742
+ </div>
743
+
744
+ <div>
745
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Research</h3>
746
+ <ul class="mt-4 space-y-2">
747
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Dark Matter Mapping</a></li>
748
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Quantum Gravity</a></li>
749
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Exoplanet Exploration</a></li>
750
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Publications</a></li>
751
+ </ul>
752
+ </div>
753
+
754
+ <div>
755
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
756
+ <ul class="mt-4 space-y-2">
757
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About Us</a></li>
758
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li>
759
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">News</a></li>
760
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
761
+ </ul>
762
+ </div>
763
+ </div>
764
+
765
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
766
+ <p class="text-gray-400 text-sm">
767
+ &copy; 2023 Nexus Frontiers. All rights reserved.
768
+ </p>
769
+ <div class="mt-4 md:mt-0 flex space-x-6">
770
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Privacy Policy</a>
771
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Terms of Service</a>
772
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Cookie Policy</a>
773
+ </div>
774
+ </div>
775
+ </div>
776
+ </footer>
777
+
778
+ <script>
779
+ // Mobile menu toggle
780
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
781
+ const mobileMenu = document.getElementById('mobile-menu');
782
+
783
+ mobileMenuButton.addEventListener('click', () => {
784
+ const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
785
+ mobileMenuButton.setAttribute('aria-expanded', !expanded);
786
+ mobileMenu.classList.toggle('hidden');
787
+
788
+ // Change icon
789
+ const icon = mobileMenuButton.querySelector('i');
790
+ if (expanded) {
791
+ icon.classList.remove('fa-times');
792
+ icon.classList.add('fa-bars');
793
+ } else {
794
+ icon.classList.remove('fa-bars');
795
+ icon.classList.add('fa-times');
796
+ }
797
+ });
798
+
799
+ // Smooth scrolling for anchor links
800
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
801
+ anchor.addEventListener('click', function(e) {
802
+ e.preventDefault();
803
+
804
+ const targetId = this.getAttribute('href');
805
+ if (targetId === '#') return;
806
+
807
+ const targetElement = document.querySelector(targetId);
808
+ if (targetElement) {
809
+ // Close mobile menu if open
810
+ if (!mobileMenu.classList.contains('hidden')) {
811
+ mobileMenu.classList.add('hidden');
812
+ mobileMenuButton.setAttribute('aria-expanded', 'false');
813
+ const icon = mobileMenuButton.querySelector('i');
814
+ icon.classList.remove('fa-times');
815
+ icon.classList.add('fa-bars');
816
+ }
817
+
818
+ window.scrollTo({
819
+ top: targetElement.offsetTop - 80,
820
+ behavior: 'smooth'
821
+ });
822
+ }
823
+ });
824
+ });
825
+
826
+ // Form submission
827
+ const contactForm = document.querySelector('form');
828
+ if (contactForm) {
829
+ contactForm.addEventListener('submit', (e) => {
830
+ e.preventDefault();
831
+
832
+ // In a real implementation, you would send the form data to your server
833
+ alert('Thank you for your message! We will get back to you soon.');
834
+ contactForm.reset();
835
+ });
836
+ }
837
+
838
+ // Scroll animation
839
+ const animateOnScroll = () => {
840
+ const elements = document.querySelectorAll('.card-hover, [class*="animate-"]');
841
+
842
+ elements.forEach(element => {
843
+ const elementTop = element.getBoundingClientRect().top;
844
+ const windowHeight = window.innerHeight;
845
+
846
+ if (elementTop < windowHeight - 100) {
847
+ element.classList.add('animate-fadeIn');
848
+ }
849
+ });
850
+ };
851
+
852
+ window.addEventListener('scroll', animateOnScroll);
853
+ window.addEventListener('load', animateOnScroll);
854
+ </script>
855
+ <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=sprakhar778/nexus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
856
+ </html>