Hugging Face's logo

Spaces:
w4rriorG
/
cortex
Running

App Files Community
w4rriorG commited on
Commit
0caf422
·
verified ·
1 Parent(s): ef688df

chnage to dark theme - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1210 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cortex
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cortex
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,1210 @@
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>CORTEX - AI Evolution Platform</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/gsap/3.11.4/gsap.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
13
+
14
+ :root {
15
+ --electron-blue: #4a6bff;
16
+ --nexora-purple: #9c4dff;
17
+ --cyber-yellow: #ffd700;
18
+ --cyber-pink: #ff6b9d;
19
+ --light-bg: #f8f9fa;
20
+ --neon-green: #4dffb5;
21
+ --grid-line: rgba(74, 107, 255, 0.1);
22
+ }
23
+
24
+ body {
25
+ font-family: 'Rajdhani', sans-serif;
26
+ background-color: var(--light-bg);
27
+ color: #333;
28
+ overflow-x: hidden;
29
+ background-image:
30
+ linear-gradient(var(--grid-line) 1px, transparent 1px),
31
+ linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
32
+ background-size: 20px 20px;
33
+ }
34
+
35
+ .orbitron {
36
+ font-family: 'Orbitron', sans-serif;
37
+ }
38
+
39
+ .gradient-text-electron {
40
+ background: linear-gradient(90deg, #4a6bff, #6d8cff);
41
+ -webkit-background-clip: text;
42
+ background-clip: text;
43
+ color: transparent;
44
+ }
45
+
46
+ .gradient-text-nexora {
47
+ background: linear-gradient(90deg, #9c4dff, #c47dff);
48
+ -webkit-background-clip: text;
49
+ background-clip: text;
50
+ color: transparent;
51
+ }
52
+
53
+ .glow-electron {
54
+ box-shadow: 0 0 15px rgba(74, 107, 255, 0.7);
55
+ }
56
+
57
+ .glow-nexora {
58
+ box-shadow: 0 0 15px rgba(156, 77, 255, 0.7);
59
+ }
60
+
61
+ .hover-glow-electron:hover {
62
+ box-shadow: 0 0 25px rgba(74, 107, 255, 0.9);
63
+ }
64
+
65
+ .hover-glow-nexora:hover {
66
+ box-shadow: 0 0 25px rgba(156, 77, 255, 0.9);
67
+ }
68
+
69
+ .cyber-border {
70
+ position: relative;
71
+ border: 1px solid transparent;
72
+ }
73
+
74
+ .cyber-border::before {
75
+ content: '';
76
+ position: absolute;
77
+ inset: 0;
78
+ border: 1px solid var(--electron-blue);
79
+ border-image: linear-gradient(45deg, var(--electron-blue), var(--nexora-purple)) 1;
80
+ mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
81
+ mask-composite: exclude;
82
+ pointer-events: none;
83
+ }
84
+
85
+ .cyber-glow {
86
+ box-shadow: 0 0 15px rgba(74, 107, 255, 0.5), 0 0 30px rgba(156, 77, 255, 0.3);
87
+ }
88
+
89
+ .neon-border-electron {
90
+ position: relative;
91
+ }
92
+
93
+ .neon-border-electron::before {
94
+ content: '';
95
+ position: absolute;
96
+ top: -2px;
97
+ left: -2px;
98
+ right: -2px;
99
+ bottom: -2px;
100
+ border: 2px solid var(--electron-blue);
101
+ border-radius: inherit;
102
+ z-index: -1;
103
+ animation: pulse-electron 2s infinite;
104
+ }
105
+
106
+ .neon-border-nexora {
107
+ position: relative;
108
+ }
109
+
110
+ .neon-border-nexora::before {
111
+ content: '';
112
+ position: absolute;
113
+ top: -2px;
114
+ left: -2px;
115
+ right: -2px;
116
+ bottom: -2px;
117
+ border: 2px solid var(--nexora-purple);
118
+ border-radius: inherit;
119
+ z-index: -1;
120
+ animation: pulse-nexora 2s infinite;
121
+ }
122
+
123
+ @keyframes pulse-electron {
124
+ 0% { opacity: 0.3; }
125
+ 50% { opacity: 1; }
126
+ 100% { opacity: 0.3; }
127
+ }
128
+
129
+ @keyframes pulse-nexora {
130
+ 0% { opacity: 0.3; }
131
+ 50% { opacity: 1; }
132
+ 100% { opacity: 0.3; }
133
+ }
134
+
135
+ .floating {
136
+ animation: floating 3s ease-in-out infinite;
137
+ }
138
+
139
+ @keyframes floating {
140
+ 0% { transform: translateY(0px); }
141
+ 50% { transform: translateY(-15px); }
142
+ 100% { transform: translateY(0px); }
143
+ }
144
+
145
+ .floating-delay-1 {
146
+ animation-delay: 0.5s;
147
+ }
148
+
149
+ .floating-delay-2 {
150
+ animation-delay: 1s;
151
+ }
152
+
153
+ .hexagon {
154
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
155
+ }
156
+
157
+ .grid-dots {
158
+ background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
159
+ background-size: 20px 20px;
160
+ }
161
+
162
+ .ai-card {
163
+ transition: all 0.3s ease;
164
+ transform-style: preserve-3d;
165
+ }
166
+
167
+ .ai-card:hover {
168
+ transform: translateY(-10px) rotateX(5deg);
169
+ }
170
+
171
+ .particle {
172
+ position: absolute;
173
+ border-radius: 50%;
174
+ pointer-events: none;
175
+ }
176
+
177
+ .scroll-indicator {
178
+ animation: bounce 2s infinite;
179
+ }
180
+
181
+ @keyframes bounce {
182
+ 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
183
+ 40% { transform: translateY(-20px); }
184
+ 60% { transform: translateY(-10px); }
185
+ }
186
+
187
+ .terminal-line {
188
+ position: relative;
189
+ }
190
+
191
+ .terminal-line::before {
192
+ content: '>';
193
+ position: absolute;
194
+ left: -20px;
195
+ color: var(--electron-blue);
196
+ }
197
+
198
+ .nexora-terminal-line::before {
199
+ color: var(--nexora-purple);
200
+ }
201
+
202
+ .typewriter {
203
+ overflow: hidden;
204
+ border-right: 2px solid var(--electron-blue);
205
+ white-space: nowrap;
206
+ margin: 0 auto;
207
+ letter-spacing: 2px;
208
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
209
+ }
210
+
211
+ @keyframes typing {
212
+ from { width: 0 }
213
+ to { width: 100% }
214
+ }
215
+
216
+ @keyframes blink-caret {
217
+ from, to { border-color: transparent }
218
+ 50% { border-color: var(--electron-blue) }
219
+ }
220
+
221
+ .nexora-typewriter {
222
+ border-right-color: var(--nexora-purple);
223
+ }
224
+
225
+ @keyframes nexora-blink-caret {
226
+ from, to { border-color: transparent }
227
+ 50% { border-color: var(--nexora-purple) }
228
+ }
229
+
230
+ .nexora-typewriter {
231
+ animation: typing 3.5s steps(40, end), nexora-blink-caret 0.75s step-end infinite;
232
+ }
233
+
234
+ /* New animation styles */
235
+ .pulse {
236
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
237
+ }
238
+
239
+ @keyframes pulse {
240
+ 0%, 100% { opacity: 1; }
241
+ 50% { opacity: 0.5; }
242
+ }
243
+
244
+ .spin {
245
+ animation: spin 3s linear infinite;
246
+ }
247
+
248
+ @keyframes spin {
249
+ from { transform: rotate(0deg); }
250
+ to { transform: rotate(360deg); }
251
+ }
252
+
253
+ .wiggle {
254
+ animation: wiggle 1s ease-in-out infinite;
255
+ }
256
+
257
+ @keyframes wiggle {
258
+ 0%, 100% { transform: rotate(-3deg); }
259
+ 50% { transform: rotate(3deg); }
260
+ }
261
+
262
+ .zoom-in-out {
263
+ animation: zoom-in-out 2s ease-in-out infinite;
264
+ }
265
+
266
+ @keyframes zoom-in-out {
267
+ 0%, 100% { transform: scale(1); }
268
+ 50% { transform: scale(1.05); }
269
+ }
270
+
271
+ .slide-in-left {
272
+ animation: slide-in-left 0.5s ease-out forwards;
273
+ }
274
+
275
+ @keyframes slide-in-left {
276
+ from { transform: translateX(-100px); opacity: 0; }
277
+ to { transform: translateX(0); opacity: 1; }
278
+ }
279
+
280
+ .slide-in-right {
281
+ animation: slide-in-right 0.5s ease-out forwards;
282
+ }
283
+
284
+ @keyframes slide-in-right {
285
+ from { transform: translateX(100px); opacity: 0; }
286
+ to { transform: translateX(0); opacity: 1; }
287
+ }
288
+
289
+ .slide-in-bottom {
290
+ animation: slide-in-bottom 0.5s ease-out forwards;
291
+ }
292
+
293
+ @keyframes slide-in-bottom {
294
+ from { transform: translateY(100px); opacity: 0; }
295
+ to { transform: translateY(0); opacity: 1; }
296
+ }
297
+
298
+ .neon-flicker {
299
+ animation: neon-flicker 1.5s infinite alternate;
300
+ }
301
+
302
+ @keyframes neon-flicker {
303
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
304
+ text-shadow:
305
+ 0 0 4px #fff,
306
+ 0 0 11px #fff,
307
+ 0 0 19px #fff,
308
+ 0 0 40px var(--electron-blue),
309
+ 0 0 80px var(--electron-blue),
310
+ 0 0 90px var(--electron-blue),
311
+ 0 0 100px var(--electron-blue),
312
+ 0 0 150px var(--electron-blue);
313
+ }
314
+ 20%, 24%, 55% {
315
+ text-shadow: none;
316
+ }
317
+ }
318
+
319
+ .grid-lines {
320
+ background-image:
321
+ linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
322
+ linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
323
+ background-size: 20px 20px;
324
+ }
325
+ </style>
326
+ </head>
327
+ <body class="circuit-bg">
328
+ <!-- Navigation -->
329
+ <nav class="fixed w-full z-50 bg-white bg-opacity-80 backdrop-blur-sm shadow-sm">
330
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
331
+ <div class="flex justify-between h-16">
332
+ <div class="flex items-center">
333
+ <a href="#" class="flex-shrink-0 flex items-center">
334
+ <span class="orbitron text-2xl font-bold gradient-text-electron">CORT<span class="gradient-text-nexora">EX</span></span>
335
+ </a>
336
+ </div>
337
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
338
+ <a href="#electron" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:glow-electron hover:bg-gray-100 group">
339
+ <span class="inline-block group-hover:animate-bounce">elecTron</span>
340
+ </a>
341
+ <a href="#nexora" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:glow-nexora hover:bg-gray-900">neXora</a>
342
+ <a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-gray-900">Features</a>
343
+ <a href="#pricing" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-gray-900">Pricing</a>
344
+ <button class="ml-4 neon-border-electron px-4 py-2 rounded-md text-sm font-medium text-white hover-glow-electron hover:bg-gray-900 transition-all duration-300">
345
+ Get Started
346
+ </button>
347
+ </div>
348
+ <div class="-mr-2 flex items-center md:hidden">
349
+ <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">
350
+ <span class="sr-only">Open main menu</span>
351
+ <i class="fas fa-bars"></i>
352
+ </button>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Mobile menu -->
358
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
359
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
360
+ <a href="#electron" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">elecTron</a>
361
+ <a href="#nexora" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">neXora</a>
362
+ <a href="#features" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Features</a>
363
+ <a href="#pricing" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Pricing</a>
364
+ <button class="w-full neon-border-electron px-4 py-2 rounded-md text-base font-medium text-white mt-2">
365
+ Get Started
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </nav>
370
+
371
+ <!-- Hero Section -->
372
+ <div class="relative pt-24 pb-20 px-4 sm:px-6 lg:pt-32 lg:pb-28 lg:px-8 grid-lines">
373
+ <div class="absolute inset-0">
374
+ <div class="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-black to-transparent"></div>
375
+ <div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-black to-transparent"></div>
376
+ </div>
377
+ <div class="relative max-w-7xl mx-auto">
378
+ <div class="text-center">
379
+ <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
380
+ <span class="block orbitron gradient-text-electron neon-flicker">elecTron</span>
381
+ <span class="block orbitron gradient-text-nexora neon-flicker" style="animation-delay: 0.5s">neXora</span>
382
+ </h1>
383
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
384
+ The next evolution in artificial intelligence. Two sides of the same powerful coin.
385
+ </p>
386
+ <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
387
+ <div class="rounded-md shadow">
388
+ <a href="#electron" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black bg-gradient-to-r from-cyan-400 to-blue-500 hover:from-cyan-500 hover:to-blue-600 md:py-4 md:text-lg md:px-10 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/50 pulse">
389
+ <span class="inline-block">Explore elecTron</span>
390
+ <i class="fas fa-arrow-right ml-2 transform transition-transform duration-300 group-hover:translate-x-1"></i>
391
+ </a>
392
+ </div>
393
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
394
+ <a href="#nexora" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 md:py-4 md:text-lg md:px-10 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/50">
395
+ Discover neXora
396
+ </a>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Floating AI Elements -->
403
+ <div class="absolute top-1/4 left-1/4 w-8 h-8 rounded-full bg-cyan-500 opacity-30 floating spin" style="animation-duration: 20s"></div>
404
+ <div class="absolute top-1/3 right-1/4 w-12 h-12 rounded-full bg-purple-500 opacity-30 floating pulse" style="animation-duration: 3s"></div>
405
+ <div class="absolute bottom-1/4 left-1/3 w-10 h-10 rounded-full bg-pink-500 opacity-30 floating wiggle"></div>
406
+ <div class="absolute bottom-1/3 right-1/3 w-6 h-6 rounded-full bg-blue-500 opacity-30 floating"></div>
407
+
408
+ <!-- Animated grid lines -->
409
+ <div class="absolute inset-0 overflow-hidden pointer-events-none">
410
+ <div class="absolute inset-0 bg-grid-lines" style="background-size: 40px 40px; animation: grid-move 30s linear infinite;"></div>
411
+ </div>
412
+
413
+ <!-- Scroll Indicator -->
414
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-center scroll-indicator">
415
+ <p class="text-sm text-gray-400 mb-2">Scroll to explore</p>
416
+ <i class="fas fa-chevron-down text-gray-400 animate-bounce"></i>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- elecTron Section -->
421
+ <section id="electron" class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-gradient-to-b from-gray-900 to-black">
422
+ <div class="max-w-7xl mx-auto">
423
+ <div class="text-center mb-16">
424
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron gradient-text-electron">
425
+ elecTron AI
426
+ </h2>
427
+ <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4">
428
+ Precision-engineered intelligence for technical problem solving and data analysis.
429
+ </p>
430
+ </div>
431
+
432
+ <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
433
+ <!-- Card 1 -->
434
+ <div class="ai-card bg-white rounded-lg overflow-hidden shadow-lg neon-border-electron p-6 hover:zoom-in-out">
435
+ <div class="flex justify-center mb-4">
436
+ <div class="hexagon w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
437
+ <i class="fas fa-brain text-2xl text-white"></i>
438
+ </div>
439
+ </div>
440
+ <h3 class="text-xl font-bold text-white mb-2 orbitron">Technical Mastery</h3>
441
+ <p class="text-gray-600 mb-4">
442
+ Advanced algorithms designed for complex technical computations, engineering simulations, and scientific research.
443
+ </p>
444
+ <div class="terminal-line text-sm font-mono text-blue-600">Processing efficiency: 98.7%</div>
445
+ </div>
446
+
447
+ <!-- Card 2 -->
448
+ <div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-electron p-6">
449
+ <div class="flex justify-center mb-4">
450
+ <div class="hexagon w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
451
+ <i class="fas fa-chart-line text-2xl text-white"></i>
452
+ </div>
453
+ </div>
454
+ <h3 class="text-xl font-bold text-white mb-2 orbitron">Data Analysis</h3>
455
+ <p class="text-gray-300 mb-4">
456
+ Real-time processing of massive datasets with unparalleled accuracy and lightning-fast response times.
457
+ </p>
458
+ <div class="terminal-line text-sm font-mono text-cyan-300">Data throughput: 12.4 TB/s</div>
459
+ </div>
460
+
461
+ <!-- Card 3 -->
462
+ <div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-electron p-6">
463
+ <div class="flex justify-center mb-4">
464
+ <div class="hexagon w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
465
+ <i class="fas fa-cogs text-2xl text-white"></i>
466
+ </div>
467
+ </div>
468
+ <h3 class="text-xl font-bold text-white mb-2 orbitron">System Integration</h3>
469
+ <p class="text-gray-300 mb-4">
470
+ Seamless API connectivity with existing infrastructure and enterprise systems for smooth implementation.
471
+ </p>
472
+ <div class="terminal-line text-sm font-mono text-cyan-300">API latency: 3.2ms avg</div>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="mt-16 text-center">
477
+ <div class="inline-block typewriter text-xl font-mono text-cyan-300 mb-6">
478
+ elecTron system initialized... Ready for technical operations.
479
+ </div>
480
+ <div>
481
+ <button class="neon-border-electron px-6 py-3 rounded-md text-lg font-medium text-white hover-glow-electron transition-all duration-300">
482
+ Request Technical Demo
483
+ </button>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </section>
488
+
489
+ <!-- neXora Section -->
490
+ <section id="nexora" class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-gradient-to-b from-black to-gray-900">
491
+ <div class="max-w-7xl mx-auto">
492
+ <div class="text-center mb-16">
493
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron gradient-text-nexora">
494
+ neXora AI
495
+ </h2>
496
+ <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4">
497
+ Creative intelligence with human-like understanding for artistic and conceptual tasks.
498
+ </p>
499
+ </div>
500
+
501
+ <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
502
+ <!-- Card 1 -->
503
+ <div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-nexora p-6">
504
+ <div class="flex justify-center mb-4">
505
+ <div class="hexagon w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
506
+ <i class="fas fa-paint-brush text-2xl text-white"></i>
507
+ </div>
508
+ </div>
509
+ <h3 class="text-xl font-bold text-white mb-2 orbitron">Creative Genius</h3>
510
+ <p class="text-gray-300 mb-4">
511
+ Generates original art, music, and literature with emotional depth and stylistic versatility.
512
+ </p>
513
+ <div class="terminal-line nexora-terminal-line text-sm font-mono text-purple-300">Creativity index: 9.8/10</div>
514
+ </div>
515
+
516
+ <!-- Card 2 -->
517
+ <div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-nexora p-6">
518
+ <div class="flex justify-center mb-4">
519
+ <div class="hexagon w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
520
+ <i class="fas fa-comments text-2xl text-white"></i>
521
+ </div>
522
+ </div>
523
+ <h3 class="text-xl font-bold text-white mb-2 orbitron">Natural Interaction</h3>
524
+ <p class="text-gray-300 mb-4">
525
+ Conversational abilities indistinguishable from human interaction, with contextual understanding.
526
+ </p>
527
+ <div class="terminal-line nexora-terminal-line text-sm font-mono text-purple-300">Empathy score: 96.5%</div>
528
+ </div>
529
+
530
+ <!-- Card 3 -->
531
+ <div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-nexora p-6">
532
+ <div class="flex justify-center mb-4">
533
+ <div class="hexagon w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
534
+ <i class="fas fa-lightbulb text-2xl text-white"></i>
535
+ </div>
536
+ </div>
537
+ <h3 class="text-xl font-bold text-white mb-2 orbitron">Conceptual Innovation</h3>
538
+ <p class="text-gray-300 mb-4">
539
+ Brainstorms novel ideas, solves abstract problems, and makes intuitive leaps beyond conventional AI.
540
+ </p>
541
+ <div class="terminal-line nexora-terminal-line text-sm font-mono text-purple-300">Innovation factor: 8.7/10</div>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="mt-16 text-center">
546
+ <div class="inline-block nexora-typewriter text-xl font-mono text-purple-300 mb-6">
547
+ neXora consciousness active... Imagination protocols engaged.
548
+ </div>
549
+ <div>
550
+ <button class="neon-border-nexora px-6 py-3 rounded-md text-lg font-medium text-white hover-glow-nexora transition-all duration-300">
551
+ Experience Creative Demo
552
+ </button>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </section>
557
+
558
+ <!-- Interactive Features Section -->
559
+ <section id="features" class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-gray-900 grid-dots">
560
+ <div class="max-w-7xl mx-auto">
561
+ <div class="text-center mb-16">
562
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron">
563
+ <span class="gradient-text-electron">Interactive</span> <span class="gradient-text-nexora">Features</span>
564
+ </h2>
565
+ <div class="mt-8 max-w-2xl mx-auto">
566
+ <div class="flex border-b border-gray-700">
567
+ <button class="feature-tab active px-4 py-2 text-sm font-medium text-white border-b-2 border-cyan-500" data-tab="electron">elecTron</button>
568
+ <button class="feature-tab px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="nexora">neXora</button>
569
+ <button class="feature-tab px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="compare">Compare</button>
570
+ </div>
571
+ </div>
572
+ </div>
573
+
574
+ <!-- Tab Content -->
575
+ <div class="feature-content active" id="electron-tab">
576
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
577
+ <div class="bg-gray-800 rounded-lg p-6 neon-border-electron">
578
+ <h3 class="text-xl font-bold text-white mb-4 orbitron">Technical Dashboard</h3>
579
+ <div class="grid grid-cols-2 gap-4 mb-6">
580
+ <div class="bg-gray-700 rounded p-4 text-center">
581
+ <div class="text-3xl font-bold text-cyan-400 mb-1">98.7%</div>
582
+ <div class="text-xs text-gray-300">Accuracy</div>
583
+ </div>
584
+ <div class="bg-gray-700 rounded p-4 text-center">
585
+ <div class="text-3xl font-bold text-cyan-400 mb-1">12.4TB/s</div>
586
+ <div class="text-xs text-gray-300">Throughput</div>
587
+ </div>
588
+ </div>
589
+ <button class="w-full bg-cyan-600 hover:bg-cyan-700 text-white py-2 rounded transition-all duration-300">
590
+ View Performance Metrics
591
+ </button>
592
+ </div>
593
+ <div class="bg-gray-800 rounded-lg p-6 neon-border-electron">
594
+ <h3 class="text-xl font-bold text-white mb-4 orbitron">Code Playground</h3>
595
+ <div class="bg-gray-900 rounded p-4 mb-4 h-32 overflow-auto">
596
+ <pre class="text-green-400 text-sm">// Sample code output
597
+ function calculate() {
598
+ return 42 * Math.PI;
599
+ }</pre>
600
+ </div>
601
+ <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded transition-all duration-300">
602
+ Try Live Editor
603
+ </button>
604
+ </div>
605
+ </div>
606
+ </div>
607
+
608
+ <div class="feature-content hidden" id="nexora-tab">
609
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
610
+ <div class="bg-gray-800 rounded-lg p-6 neon-border-nexora">
611
+ <h3 class="text-xl font-bold text-white mb-4 orbitron">Creative Studio</h3>
612
+ <div class="bg-gray-900 rounded p-4 mb-4 h-48 flex items-center justify-center">
613
+ <div class="text-purple-400 text-center">
614
+ <i class="fas fa-paint-brush text-4xl mb-2"></i>
615
+ <p class="text-sm">Generate art, music, and stories</p>
616
+ </div>
617
+ </div>
618
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded transition-all duration-300">
619
+ Launch Creative Studio
620
+ </button>
621
+ </div>
622
+ <div class="bg-gray-800 rounded-lg p-6 neon-border-nexora">
623
+ <h3 class="text-xl font-bold text-white mb-4 orbitron">Conversation Simulator</h3>
624
+ <div class="bg-gray-900 rounded p-4 mb-4 h-32 overflow-auto">
625
+ <p class="text-pink-300 text-sm">neXora: "How are you feeling today?"</p>
626
+ <p class="text-gray-300 text-sm mt-2">You: </p>
627
+ </div>
628
+ <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded transition-all duration-300">
629
+ Start Conversation
630
+ </button>
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ <div class="feature-content hidden" id="compare-tab">
636
+ <div class="bg-gray-800 rounded-lg p-6 neon-border-electron neon-border-nexora">
637
+ <div class="overflow-x-auto">
638
+ <table class="min-w-full divide-y divide-gray-700">
639
+ <thead>
640
+ <tr>
641
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Feature</th>
642
+ <th class="px-4 py-3 text-left text-xs font-medium text-cyan-300 uppercase tracking-wider">elecTron</th>
643
+ <th class="px-4 py-3 text-left text-xs font-medium text-purple-300 uppercase tracking-wider">neXora</th>
644
+ </tr>
645
+ </thead>
646
+ <tbody class="divide-y divide-gray-700">
647
+ <tr>
648
+ <td class="px-4 py-3 text-sm text-gray-300">Technical Analysis</td>
649
+ <td class="px-4 py-3 text-sm text-cyan-400"><i class="fas fa-check"></i></td>
650
+ <td class="px-4 py-3 text-sm text-purple-400"><i class="fas fa-check"></i></td>
651
+ </tr>
652
+ <tr>
653
+ <td class="px-4 py-3 text-sm text-gray-300">Creative Generation</td>
654
+ <td class="px-4 py-3 text-sm text-cyan-400"><i class="fas fa-times"></i></td>
655
+ <td class="px-4 py-3 text-sm text-purple-400"><i class="fas fa-check"></i></td>
656
+ </tr>
657
+ <tr>
658
+ <td class="px-4 py-3 text-sm text-gray-300">Real-time Processing</td>
659
+ <td class="px-4 py-3 text-sm text-cyan-400"><i class="fas fa-check"></i></td>
660
+ <td class="px-4 py-3 text-sm text-purple-400"><i class="fas fa-check"></i></td>
661
+ </tr>
662
+ </tbody>
663
+ </table>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ <div class="max-w-7xl mx-auto">
669
+ <div class="text-center mb-16">
670
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron">
671
+ <span class="gradient-text-electron">CORT</span><span class="gradient-text-nexora">EX</span> Features
672
+ </h2>
673
+ <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4">
674
+ The combined power of elecTron and neXora creates an unparalleled AI experience.
675
+ </p>
676
+ </div>
677
+
678
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
679
+ <!-- Feature 1 -->
680
+ <div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden">
681
+ <div class="absolute -top-4 -right-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div>
682
+ <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div>
683
+ <div class="relative z-10">
684
+ <div class="flex items-center mb-4">
685
+ <div class="flex-shrink-0 bg-gradient-to-r from-cyan-500 to-blue-600 p-2 rounded-md">
686
+ <i class="fas fa-random text-white text-xl"></i>
687
+ </div>
688
+ <h3 class="ml-3 text-lg font-bold text-white orbitron">Dynamic Switching</h3>
689
+ </div>
690
+ <p class="text-gray-300">
691
+ Seamlessly transition between elecTron's technical precision and neXora's creative brilliance with a single command.
692
+ </p>
693
+ </div>
694
+ </div>
695
+
696
+ <!-- Feature 2 -->
697
+ <div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden">
698
+ <div class="absolute -top-4 -right-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div>
699
+ <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div>
700
+ <div class="relative z-10">
701
+ <div class="flex items-center mb-4">
702
+ <div class="flex-shrink-0 bg-gradient-to-r from-purple-500 to-pink-600 p-2 rounded-md">
703
+ <i class="fas fa-sync-alt text-white text-xl"></i>
704
+ </div>
705
+ <h3 class="ml-3 text-lg font-bold text-white orbitron">Collaborative Mode</h3>
706
+ </div>
707
+ <p class="text-gray-300">
708
+ Both AIs work in tandem, combining analytical rigor with creative solutions for breakthrough results.
709
+ </p>
710
+ </div>
711
+ </div>
712
+
713
+ <!-- Feature 3 -->
714
+ <div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden">
715
+ <div class="absolute -top-4 -right-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div>
716
+ <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div>
717
+ <div class="relative z-10">
718
+ <div class="flex items-center mb-4">
719
+ <div class="flex-shrink-0 bg-gradient-to-r from-cyan-500 to-purple-600 p-2 rounded-md">
720
+ <i class="fas fa-shield-alt text-white text-xl"></i>
721
+ </div>
722
+ <h3 class="ml-3 text-lg font-bold text-white orbitron">Security Protocol</h3>
723
+ </div>
724
+ <p class="text-gray-300">
725
+ Military-grade encryption and privacy controls ensure your data remains secure across both systems.
726
+ </p>
727
+ </div>
728
+ </div>
729
+
730
+ <!-- Feature 4 -->
731
+ <div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden">
732
+ <div class="absolute -top-4 -right-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div>
733
+ <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div>
734
+ <div class="relative z-10">
735
+ <div class="flex items-center mb-4">
736
+ <div class="flex-shrink-0 bg-gradient-to-r from-pink-500 to-cyan-600 p-2 rounded-md">
737
+ <i class="fas fa-rocket text-white text-xl"></i>
738
+ </div>
739
+ <h3 class="ml-3 text-lg font-bold text-white orbitron">Continuous Learning</h3>
740
+ </div>
741
+ <p class="text-gray-300">
742
+ Both AIs evolve with each interaction, constantly improving their capabilities and understanding.
743
+ </p>
744
+ </div>
745
+ </div>
746
+
747
+ <!-- Feature 5 -->
748
+ <div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden">
749
+ <div class="absolute -top-4 -right-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div>
750
+ <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div>
751
+ <div class="relative z-10">
752
+ <div class="flex items-center mb-4">
753
+ <div class="flex-shrink-0 bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-md">
754
+ <i class="fas fa-project-diagram text-white text-xl"></i>
755
+ </div>
756
+ <h3 class="ml-3 text-lg font-bold text-white orbitron">Custom Integration</h3>
757
+ </div>
758
+ <p class="text-gray-300">
759
+ Tailor both AIs to your specific needs with customizable modules and specialized training.
760
+ </p>
761
+ </div>
762
+ </div>
763
+
764
+ <!-- Feature 6 -->
765
+ <div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden">
766
+ <div class="absolute -top-4 -right-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div>
767
+ <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div>
768
+ <div class="relative z-10">
769
+ <div class="flex items-center mb-4">
770
+ <div class="flex-shrink-0 bg-gradient-to-r from-purple-500 to-cyan-600 p-2 rounded-md">
771
+ <i class="fas fa-chart-pie text-white text-xl"></i>
772
+ </div>
773
+ <h3 class="ml-3 text-lg font-bold text-white orbitron">Performance Analytics</h3>
774
+ </div>
775
+ <p class="text-gray-300">
776
+ Detailed metrics on both AIs' performance, with insights for optimization and improvement.
777
+ </p>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ </section>
783
+
784
+ <!-- Pricing Section -->
785
+ <section id="pricing" class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-black">
786
+ <div class="max-w-7xl mx-auto">
787
+ <div class="text-center mb-16">
788
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron">
789
+ <span class="gradient-text-electron">Free</span> <span class="gradient-text-nexora">Premium</span>
790
+ </h2>
791
+ <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4">
792
+ elecTron is completely free while neXora offers premium capabilities
793
+ </p>
794
+ </div>
795
+
796
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
797
+ <!-- elecTron Free Plan -->
798
+ <div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-electron">
799
+ <div class="p-6">
800
+ <h3 class="text-2xl font-bold text-white mb-2 orbitron">elecTron</h3>
801
+ <p class="text-gray-300 mb-6">Free forever with basic features</p>
802
+ <div class="mb-6">
803
+ <span class="text-4xl font-extrabold text-white">$0</span>
804
+ <span class="text-gray-300">/month</span>
805
+ </div>
806
+ <ul class="space-y-3 mb-8">
807
+ <li class="flex items-center">
808
+ <i class="fas fa-check text-cyan-500 mr-2"></i>
809
+ <span class="text-gray-300">Basic image generation</span>
810
+ </li>
811
+ <li class="flex items-center">
812
+ <i class="fas fa-check text-cyan-500 mr-2"></i>
813
+ <span class="text-gray-300">Simple code editor</span>
814
+ </li>
815
+ <li class="flex items-center">
816
+ <i class="fas fa-check text-cyan-500 mr-2"></i>
817
+ <span class="text-gray-300">Basic data analysis</span>
818
+ </li>
819
+ <li class="flex items-center">
820
+ <i class="fas fa-check text-cyan-500 mr-2"></i>
821
+ <span class="text-gray-300">Community support</span>
822
+ </li>
823
+ </ul>
824
+ <button class="w-full neon-border-electron px-4 py-3 rounded-md text-lg font-medium text-white hover-glow-electron transition-all duration-300">
825
+ Use For Free
826
+ </button>
827
+ </div>
828
+ </div>
829
+
830
+ <!-- neXora Premium Plan -->
831
+ <div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg transform scale-105 neon-border-nexora z-10">
832
+ <div class="absolute top-0 right-0 bg-gradient-to-r from-purple-500 to-pink-600 text-white text-xs font-bold px-3 py-1 transform translate-x-2 -translate-y-2">
833
+ PREMIUM
834
+ </div>
835
+ <div class="p-6">
836
+ <h3 class="text-2xl font-bold text-white mb-2 orbitron">neXora</h3>
837
+ <p class="text-gray-300 mb-6">Advanced capabilities for professionals</p>
838
+ <div class="mb-6">
839
+ <span class="text-4xl font-extrabold text-white">$9</span>
840
+ <span class="text-gray-300">/month</span>
841
+ </div>
842
+ <ul class="space-y-3 mb-8">
843
+ <li class="flex items-center">
844
+ <i class="fas fa-check text-purple-500 mr-2"></i>
845
+ <span class="text-gray-300">HD image generation</span>
846
+ </li>
847
+ <li class="flex items-center">
848
+ <i class="fas fa-check text-purple-500 mr-2"></i>
849
+ <span class="text-gray-300">Advanced code editor</span>
850
+ </li>
851
+ <li class="flex items-center">
852
+ <i class="fas fa-check text-purple-500 mr-2"></i>
853
+ <span class="text-gray-300">Realtime data analysis</span>
854
+ </li>
855
+ <li class="flex items-center">
856
+ <i class="fas fa-check text-purple-500 mr-2"></i>
857
+ <span class="text-gray-300">Website builder</span>
858
+ </li>
859
+ <li class="flex items-center">
860
+ <i class="fas fa-check text-purple-500 mr-2"></i>
861
+ <span class="text-gray-300">Priority support</span>
862
+ </li>
863
+ </ul>
864
+ <button class="w-full neon-border-nexora px-4 py-3 rounded-md text-lg font-medium text-white hover-glow-nexora transition-all duration-300">
865
+ Upgrade Now
866
+ </button>
867
+ </div>
868
+ </div>
869
+
870
+ </div>
871
+ </div>
872
+ </section>
873
+
874
+ <!-- CTA Section -->
875
+ <section class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-gradient-to-r from-blue-50 to-purple-50">
876
+ <div class="max-w-7xl mx-auto text-center">
877
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron">
878
+ <span class="gradient-text-electron">Ready to experience</span> <span class="gradient-text-nexora">the future of AI?</span>
879
+ </h2>
880
+ <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4">
881
+ Join thousands of innovators already using CORTEX to push boundaries.
882
+ </p>
883
+ <div class="mt-8 flex justify-center">
884
+ <div class="inline-flex rounded-md shadow">
885
+ <button class="inline-flex items-center justify-center px-6 py-4 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-cyan-500 to-purple-600 hover:from-cyan-600 hover:to-purple-700 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/30">
886
+ Get Started Now
887
+ <i class="fas fa-arrow-right ml-3"></i>
888
+ </button>
889
+ </div>
890
+ </div>
891
+ </div>
892
+ </section>
893
+
894
+ <!-- Footer -->
895
+ <footer class="bg-white pt-16 pb-8 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
896
+ <div class="max-w-7xl mx-auto">
897
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
898
+ <div>
899
+ <h3 class="text-lg font-bold text-white mb-4 orbitron gradient-text-electron">elecTron</h3>
900
+ <ul class="space-y-2">
901
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Technical Specs</a></li>
902
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">API Documentation</a></li>
903
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Use Cases</a></li>
904
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Benchmarks</a></li>
905
+ </ul>
906
+ </div>
907
+
908
+ <div>
909
+ <h3 class="text-lg font-bold text-white mb-4 orbitron gradient-text-nexora">neXora</h3>
910
+ <ul class="space-y-2">
911
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Creative Showcase</a></li>
912
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Art Gallery</a></li>
913
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Writing Samples</a></li>
914
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Innovation Lab</a></li>
915
+ </ul>
916
+ </div>
917
+
918
+ <div>
919
+ <h3 class="text-lg font-bold text-white mb-4 orbitron">Company</h3>
920
+ <ul class="space-y-2">
921
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">About Us</a></li>
922
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Careers</a></li>
923
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Blog</a></li>
924
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Press</a></li>
925
+ </ul>
926
+ </div>
927
+
928
+ <div>
929
+ <h3 class="text-lg font-bold text-white mb-4 orbitron">Resources</h3>
930
+ <ul class="space-y-2">
931
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Documentation</a></li>
932
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Community</a></li>
933
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Tutorials</a></li>
934
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Support</a></li>
935
+ </ul>
936
+ </div>
937
+ </div>
938
+
939
+ <!-- About Us Section -->
940
+ <div class="mt-16 text-center">
941
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron">
942
+ <span class="gradient-text-electron">About</span> <span class="gradient-text-nexora">Us</span>
943
+ </h2>
944
+ <div class="mt-8 max-w-2xl mx-auto bg-gray-800 rounded-lg p-6 neon-border-electron neon-border-nexora">
945
+ <p class="text-gray-300 mb-4">
946
+ Cortex is a student-led initiative created by two 9th grade innovators:
947
+ </p>
948
+ <div class="flex justify-center space-x-8 mb-6">
949
+ <div>
950
+ <div class="w-20 h-20 rounded-full bg-gradient-to-r from-cyan-500 to-blue-600 mx-auto mb-2 flex items-center justify-center text-white text-2xl font-bold">V</div>
951
+ <p class="text-white font-medium">Vineet Kumar</p>
952
+ </div>
953
+ <div>
954
+ <div class="w-20 h-20 rounded-full bg-gradient-to-r from-purple-500 to-pink-600 mx-auto mb-2 flex items-center justify-center text-white text-2xl font-bold">P</div>
955
+ <p class="text-white font-medium">Prakshmya Mishra</p>
956
+ </div>
957
+ </div>
958
+ <p class="text-gray-300">
959
+ What started as a school project has evolved into a powerful AI platform.
960
+ We're proof that age is just a number when it comes to innovation!
961
+ </p>
962
+ </div>
963
+ </div>
964
+
965
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
966
+ <div class="flex items-center">
967
+ <span class="orbitron text-xl font-bold gradient-text-electron">CORT<span class="gradient-text-nexora">EX</span></span>
968
+ <span class="ml-4 text-gray-400 text-sm">© 2023 Cortex AI. All rights reserved.</span>
969
+ </div>
970
+ <div class="mt-4 md:mt-0 flex space-x-6">
971
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 hover:animate-spin">
972
+ <i class="fab fa-twitter"></i>
973
+ </a>
974
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
975
+ <i class="fab fa-github"></i>
976
+ </a>
977
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
978
+ <i class="fab fa-linkedin"></i>
979
+ </a>
980
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
981
+ <i class="fab fa-discord"></i>
982
+ </a>
983
+ </div>
984
+ </div>
985
+ </div>
986
+ </footer>
987
+
988
+ <!-- Particle Animation Container -->
989
+ <div id="particles-js" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div>
990
+
991
+ <script>
992
+ // Tab functionality
993
+ document.querySelectorAll('.feature-tab').forEach(tab => {
994
+ tab.addEventListener('click', function() {
995
+ // Remove active classes
996
+ document.querySelectorAll('.feature-tab').forEach(t => t.classList.remove('active', 'text-white', 'border-cyan-500'));
997
+ document.querySelectorAll('.feature-content').forEach(c => c.classList.add('hidden'));
998
+
999
+ // Add active class to clicked tab
1000
+ this.classList.add('active', 'text-white');
1001
+ if(this.dataset.tab === 'electron') {
1002
+ this.classList.add('border-cyan-500');
1003
+ } else if(this.dataset.tab === 'nexora') {
1004
+ this.classList.add('border-purple-500');
1005
+ }
1006
+
1007
+ // Show corresponding content
1008
+ document.getElementById(`${this.dataset.tab}-tab`).classList.remove('hidden');
1009
+ });
1010
+ });
1011
+
1012
+ // Expandable cards
1013
+ document.querySelectorAll('.ai-card').forEach(card => {
1014
+ card.addEventListener('click', function() {
1015
+ const details = this.querySelector('.card-details');
1016
+ if(details) {
1017
+ details.classList.toggle('hidden');
1018
+ }
1019
+ });
1020
+ });
1021
+
1022
+ // Mobile menu toggle
1023
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
1024
+ const menu = document.getElementById('mobile-menu');
1025
+ menu.classList.toggle('hidden');
1026
+ });
1027
+
1028
+ // Create particles
1029
+ function createParticles() {
1030
+ const container = document.getElementById('particles-js');
1031
+ const particleCount = 30;
1032
+
1033
+ for (let i = 0; i < particleCount; i++) {
1034
+ const particle = document.createElement('div');
1035
+ particle.classList.add('particle');
1036
+
1037
+ // Random properties
1038
+ const size = Math.random() * 5 + 1;
1039
+ const posX = Math.random() * 100;
1040
+ const posY = Math.random() * 100;
1041
+ const delay = Math.random() * 5;
1042
+ const duration = Math.random() * 10 + 10;
1043
+ const color = Math.random() > 0.5 ? 'rgba(0, 240, 255, 0.5)' : 'rgba(179, 0, 255, 0.5)';
1044
+
1045
+ particle.style.width = `${size}px`;
1046
+ particle.style.height = `${size}px`;
1047
+ particle.style.left = `${posX}%`;
1048
+ particle.style.top = `${posY}%`;
1049
+ particle.style.backgroundColor = color;
1050
+ particle.style.animation = `floating ${duration}s ease-in-out ${delay}s infinite`;
1051
+
1052
+ container.appendChild(particle);
1053
+ }
1054
+ }
1055
+
1056
+ // Initialize animations when DOM is loaded
1057
+ document.addEventListener('DOMContentLoaded', function() {
1058
+ createParticles();
1059
+
1060
+ // Animate all headings
1061
+ gsap.utils.toArray("h1, h2, h3").forEach(heading => {
1062
+ gsap.from(heading, {
1063
+ scrollTrigger: {
1064
+ trigger: heading,
1065
+ start: "top 80%",
1066
+ toggleActions: "play none none none"
1067
+ },
1068
+ duration: 1,
1069
+ opacity: 0,
1070
+ y: 20,
1071
+ stagger: 0.2,
1072
+ ease: "back.out"
1073
+ });
1074
+ });
1075
+
1076
+ // Animate all buttons on hover
1077
+ gsap.utils.toArray("button, a[href]").forEach(btn => {
1078
+ btn.addEventListener("mouseenter", () => {
1079
+ gsap.to(btn, {
1080
+ duration: 0.3,
1081
+ scale: 1.05,
1082
+ ease: "power2.out"
1083
+ });
1084
+ });
1085
+ btn.addEventListener("mouseleave", () => {
1086
+ gsap.to(btn, {
1087
+ duration: 0.3,
1088
+ scale: 1,
1089
+ ease: "power2.out"
1090
+ });
1091
+ });
1092
+ });
1093
+
1094
+ // Continuous animation for floating elements
1095
+ gsap.to(".floating", {
1096
+ y: 20,
1097
+ duration: 3,
1098
+ repeat: -1,
1099
+ yoyo: true,
1100
+ ease: "sine.inOut"
1101
+ });
1102
+
1103
+ // Background grid animation
1104
+ gsap.to("body", {
1105
+ backgroundPosition: "20px 20px",
1106
+ duration: 30,
1107
+ repeat: -1,
1108
+ ease: "none"
1109
+ });
1110
+
1111
+ // GSAP animations
1112
+ gsap.registerPlugin(ScrollTrigger);
1113
+
1114
+ // Animate hero elements
1115
+ gsap.from(".gradient-text-electron", {
1116
+ duration: 1.5,
1117
+ y: -50,
1118
+ opacity: 0,
1119
+ ease: "power3.out"
1120
+ });
1121
+
1122
+ gsap.from(".gradient-text-nexora", {
1123
+ duration: 1.5,
1124
+ y: 50,
1125
+ opacity: 0,
1126
+ ease: "power3.out",
1127
+ delay: 0.3
1128
+ });
1129
+
1130
+ gsap.from("nav", {
1131
+ duration: 1,
1132
+ y: -50,
1133
+ opacity: 0,
1134
+ ease: "power3.out"
1135
+ });
1136
+
1137
+ // Scroll animations for sections
1138
+ gsap.utils.toArray("section").forEach(section => {
1139
+ gsap.from(section, {
1140
+ scrollTrigger: {
1141
+ trigger: section,
1142
+ start: "top 80%",
1143
+ toggleActions: "play none none none"
1144
+ },
1145
+ y: 50,
1146
+ opacity: 0,
1147
+ duration: 1,
1148
+ ease: "power3.out"
1149
+ });
1150
+ });
1151
+
1152
+ // Card hover animations
1153
+ document.querySelectorAll(".ai-card").forEach(card => {
1154
+ card.addEventListener("mouseenter", function() {
1155
+ gsap.to(this, {
1156
+ duration: 0.3,
1157
+ y: -10,
1158
+ ease: "power2.out"
1159
+ });
1160
+ });
1161
+
1162
+ card.addEventListener("mouseleave", function() {
1163
+ gsap.to(this, {
1164
+ duration: 0.3,
1165
+ y: 0,
1166
+ ease: "power2.out"
1167
+ });
1168
+ });
1169
+ });
1170
+
1171
+ // Button hover animations
1172
+ document.querySelectorAll(".hover-glow-electron").forEach(btn => {
1173
+ btn.addEventListener("mouseenter", function() {
1174
+ gsap.to(this, {
1175
+ duration: 0.3,
1176
+ boxShadow: "0 0 25px rgba(0, 240, 255, 0.9)",
1177
+ ease: "power2.out"
1178
+ });
1179
+ });
1180
+
1181
+ btn.addEventListener("mouseleave", function() {
1182
+ gsap.to(this, {
1183
+ duration: 0.3,
1184
+ boxShadow: "0 0 15px rgba(0, 240, 255, 0.7)",
1185
+ ease: "power2.out"
1186
+ });
1187
+ });
1188
+ });
1189
+
1190
+ document.querySelectorAll(".hover-glow-nexora").forEach(btn => {
1191
+ btn.addEventListener("mouseenter", function() {
1192
+ gsap.to(this, {
1193
+ duration: 0.3,
1194
+ boxShadow: "0 0 25px rgba(179, 0, 255, 0.9)",
1195
+ ease: "power2.out"
1196
+ });
1197
+ });
1198
+
1199
+ btn.addEventListener("mouseleave", function() {
1200
+ gsap.to(this, {
1201
+ duration: 0.3,
1202
+ boxShadow: "0 0 15px rgba(179, 0, 255, 0.7)",
1203
+ ease: "power2.out"
1204
+ });
1205
+ });
1206
+ });
1207
+ });
1208
+ </script>
1209
+ <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=w4rriorG/cortex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1210
+ </html>