Hugging Face's logo

Spaces:
pranjalkar9
/
vitaledge
Running

App Files Community
pranjalkar9 commited on
Commit
7dc8ee2
·
verified ·
1 Parent(s): 015c914

This is for a hackthon demo ,, so make it accordingly, better cool vibes - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1374 -19
  3. prompts.txt +5 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vitaledge
3
- emoji: 🏢
4
- colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: vitaledge
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1374 @@
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>VitalEdge | AI-Powered Health Companion</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.1048.0/aws-sdk.min.js"></script>
12
+ <style>
13
+ :root {
14
+ --primary: #00f0ff;
15
+ --secondary: #ff2df2;
16
+ --accent: #7b2dff;
17
+ --dark: #05051e;
18
+ --darker: #010112;
19
+ --light: #f0f0ff;
20
+ --gray: #1a1a2e;
21
+ --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
22
+ --glow: 0 0 15px rgba(0, 240, 255, 0.7);
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Space Grotesk', sans-serif;
33
+ background-color: var(--dark);
34
+ color: var(--light);
35
+ overflow-x: hidden;
36
+ line-height: 1.6;
37
+ }
38
+
39
+ .container {
40
+ max-width: 1200px;
41
+ margin: 0 auto;
42
+ padding: 0 2rem;
43
+ }
44
+
45
+ /* Header */
46
+ header {
47
+ padding: 2rem 0;
48
+ position: relative;
49
+ z-index: 100;
50
+ }
51
+
52
+ nav {
53
+ display: flex;
54
+ justify-content: space-between;
55
+ align-items: center;
56
+ }
57
+
58
+ .logo {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 0.5rem;
62
+ font-size: 1.5rem;
63
+ font-weight: 700;
64
+ color: var(--light);
65
+ text-decoration: none;
66
+ }
67
+
68
+ .logo-icon {
69
+ width: 32px;
70
+ height: 32px;
71
+ background: var(--gradient);
72
+ border-radius: 8px;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ }
77
+
78
+ .nav-links {
79
+ display: flex;
80
+ gap: 2rem;
81
+ }
82
+
83
+ .nav-links a {
84
+ color: var(--light);
85
+ text-decoration: none;
86
+ font-weight: 500;
87
+ position: relative;
88
+ transition: all 0.3s ease;
89
+ }
90
+
91
+ .nav-links a:hover {
92
+ color: var(--primary);
93
+ }
94
+
95
+ .nav-links a::after {
96
+ content: '';
97
+ position: absolute;
98
+ bottom: -5px;
99
+ left: 0;
100
+ width: 0;
101
+ height: 2px;
102
+ background: var(--gradient);
103
+ transition: width 0.3s ease;
104
+ }
105
+
106
+ .nav-links a:hover::after {
107
+ width: 100%;
108
+ }
109
+
110
+ .cta-button {
111
+ background: var(--gradient);
112
+ color: var(--dark);
113
+ padding: 0.75rem 1.5rem;
114
+ border-radius: 50px;
115
+ font-weight: 600;
116
+ text-decoration: none;
117
+ transition: all 0.3s ease;
118
+ border: none;
119
+ cursor: pointer;
120
+ font-size: 1rem;
121
+ }
122
+
123
+ .cta-button:hover {
124
+ transform: translateY(-3px);
125
+ box-shadow: var(--glow), 0 10px 20px rgba(0, 240, 255, 0.4);
126
+ filter: brightness(1.1);
127
+ }
128
+
129
+ /* Hero Section */
130
+ .hero {
131
+ padding: 6rem 0;
132
+ position: relative;
133
+ overflow: hidden;
134
+ }
135
+
136
+ .hero-content {
137
+ display: flex;
138
+ flex-direction: column;
139
+ align-items: flex-start;
140
+ gap: 2rem;
141
+ max-width: 600px;
142
+ position: relative;
143
+ z-index: 2;
144
+ }
145
+
146
+ .hero h1 {
147
+ font-size: 4rem;
148
+ font-weight: 700;
149
+ line-height: 1.1;
150
+ background: linear-gradient(to right, var(--light), var(--primary), var(--secondary));
151
+ -webkit-background-clip: text;
152
+ -webkit-text-fill-color: transparent;
153
+ margin-bottom: 1rem;
154
+ text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
155
+ animation: textFlicker 5s infinite alternate;
156
+ }
157
+
158
+ @keyframes textFlicker {
159
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
160
+ text-shadow:
161
+ 0 0 10px rgba(0, 240, 255, 0.5),
162
+ 0 0 20px rgba(0, 240, 255, 0.3),
163
+ 0 0 30px rgba(123, 45, 255, 0.2);
164
+ }
165
+ 20%, 22%, 24%, 55% {
166
+ text-shadow: none;
167
+ }
168
+ }
169
+
170
+ .hero p {
171
+ font-size: 1.25rem;
172
+ color: rgba(255, 255, 255, 0.8);
173
+ margin-bottom: 1.5rem;
174
+ }
175
+
176
+ .hero-buttons {
177
+ display: flex;
178
+ gap: 1rem;
179
+ }
180
+
181
+ .secondary-button {
182
+ background: transparent;
183
+ color: var(--light);
184
+ padding: 0.75rem 1.5rem;
185
+ border-radius: 50px;
186
+ font-weight: 600;
187
+ text-decoration: none;
188
+ transition: all 0.3s ease;
189
+ border: 2px solid var(--gray);
190
+ }
191
+
192
+ .secondary-button:hover {
193
+ border-color: var(--primary);
194
+ color: var(--primary);
195
+ }
196
+
197
+ .hero-image {
198
+ position: absolute;
199
+ right: -100px;
200
+ top: 50%;
201
+ transform: translateY(-50%);
202
+ width: 600px;
203
+ height: 600px;
204
+ background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, rgba(0, 240, 255, 0) 70%);
205
+ border-radius: 50%;
206
+ z-index: 1;
207
+ }
208
+
209
+ .hero-image::before {
210
+ content: '';
211
+ position: absolute;
212
+ top: 0;
213
+ left: 0;
214
+ width: 100%;
215
+ height: 100%;
216
+ background: url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80') center/cover no-repeat;
217
+ border-radius: 20px;
218
+ transform: rotate(10deg) scale(0.9);
219
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
220
+ }
221
+
222
+ /* Floating Elements */
223
+ .floating-element {
224
+ position: absolute;
225
+ border-radius: 50%;
226
+ filter: blur(40px);
227
+ opacity: 0.7;
228
+ z-index: 0;
229
+ }
230
+
231
+ .floating-1 {
232
+ width: 300px;
233
+ height: 300px;
234
+ background: var(--primary);
235
+ top: 10%;
236
+ left: 10%;
237
+ animation: float 8s ease-in-out infinite;
238
+ }
239
+
240
+ .floating-2 {
241
+ width: 200px;
242
+ height: 200px;
243
+ background: var(--secondary);
244
+ bottom: 20%;
245
+ right: 15%;
246
+ animation: float 6s ease-in-out infinite reverse;
247
+ }
248
+
249
+ .floating-3 {
250
+ width: 150px;
251
+ height: 150px;
252
+ background: var(--primary);
253
+ top: 60%;
254
+ left: 30%;
255
+ animation: float 5s ease-in-out infinite 2s;
256
+ }
257
+
258
+ @keyframes float {
259
+ 0% {
260
+ transform: translateY(0) rotate(0deg);
261
+ filter: blur(40px);
262
+ }
263
+ 25% {
264
+ filter: blur(50px);
265
+ }
266
+ 50% {
267
+ transform: translateY(-30px) rotate(5deg);
268
+ filter: blur(40px);
269
+ }
270
+ 75% {
271
+ filter: blur(30px);
272
+ }
273
+ 100% {
274
+ transform: translateY(0) rotate(0deg);
275
+ filter: blur(40px);
276
+ }
277
+ }
278
+
279
+ /* Features Section */
280
+ .section {
281
+ padding: 6rem 0;
282
+ position: relative;
283
+ }
284
+
285
+ .section-title {
286
+ font-size: 2.5rem;
287
+ font-weight: 700;
288
+ margin-bottom: 3rem;
289
+ text-align: center;
290
+ background: linear-gradient(to right, var(--light), var(--primary));
291
+ -webkit-background-clip: text;
292
+ -webkit-text-fill-color: transparent;
293
+ }
294
+
295
+ .features-grid {
296
+ display: grid;
297
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
298
+ gap: 2rem;
299
+ }
300
+
301
+ .feature-card {
302
+ background: rgba(26, 26, 46, 0.5);
303
+ border-radius: 16px;
304
+ padding: 2rem;
305
+ transition: all 0.3s ease;
306
+ position: relative;
307
+ overflow: hidden;
308
+ z-index: 1;
309
+ backdrop-filter: blur(12px);
310
+ border: 1px solid rgba(0, 240, 255, 0.2);
311
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
312
+ }
313
+
314
+ .feature-card::before {
315
+ content: '';
316
+ position: absolute;
317
+ inset: -2px;
318
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
319
+ z-index: -2;
320
+ filter: blur(10px);
321
+ opacity: 0;
322
+ transition: opacity 0.3s ease;
323
+ }
324
+
325
+ .feature-card:hover::before {
326
+ opacity: 0.7;
327
+ }
328
+
329
+ .feature-card:hover {
330
+ transform: translateY(-10px);
331
+ box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
332
+ }
333
+
334
+ .feature-card::before {
335
+ content: '';
336
+ position: absolute;
337
+ top: 0;
338
+ left: 0;
339
+ width: 100%;
340
+ height: 100%;
341
+ background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(123, 45, 255, 0.1));
342
+ z-index: -1;
343
+ opacity: 0;
344
+ transition: opacity 0.3s ease;
345
+ }
346
+
347
+ .feature-card:hover::before {
348
+ opacity: 1;
349
+ }
350
+
351
+ .feature-icon {
352
+ width: 60px;
353
+ height: 60px;
354
+ background: var(--gradient);
355
+ border-radius: 12px;
356
+ display: flex;
357
+ align-items: center;
358
+ justify-content: center;
359
+ margin-bottom: 1.5rem;
360
+ font-size: 1.5rem;
361
+ }
362
+
363
+ .feature-title {
364
+ font-size: 1.5rem;
365
+ font-weight: 600;
366
+ margin-bottom: 1rem;
367
+ color: var(--light);
368
+ }
369
+
370
+ .feature-description {
371
+ color: rgba(255, 255, 255, 0.7);
372
+ font-size: 1rem;
373
+ }
374
+
375
+ /* Tech Stack */
376
+ .tech-stack {
377
+ display: flex;
378
+ justify-content: center;
379
+ flex-wrap: wrap;
380
+ gap: 2rem;
381
+ margin-top: 3rem;
382
+ }
383
+
384
+ .tech-item {
385
+ display: flex;
386
+ flex-direction: column;
387
+ align-items: center;
388
+ gap: 0.5rem;
389
+ }
390
+
391
+ .tech-icon {
392
+ width: 80px;
393
+ height: 80px;
394
+ background: rgba(255, 255, 255, 0.05);
395
+ border-radius: 50%;
396
+ display: flex;
397
+ align-items: center;
398
+ justify-content: center;
399
+ font-size: 2rem;
400
+ transition: all 0.3s ease;
401
+ }
402
+
403
+ .tech-icon:hover {
404
+ background: rgba(0, 240, 255, 0.1);
405
+ transform: scale(1.1);
406
+ }
407
+
408
+ .tech-name {
409
+ font-size: 0.9rem;
410
+ color: rgba(255, 255, 255, 0.7);
411
+ }
412
+
413
+ /* Testimonials */
414
+ .testimonials {
415
+ background: rgba(42, 42, 58, 0.3);
416
+ border-radius: 20px;
417
+ padding: 3rem;
418
+ margin-top: 3rem;
419
+ position: relative;
420
+ overflow: hidden;
421
+ }
422
+
423
+ .testimonial-card {
424
+ background: rgba(10, 10, 20, 0.7);
425
+ border-radius: 15px;
426
+ padding: 2rem;
427
+ margin-bottom: 1.5rem;
428
+ position: relative;
429
+ border: 1px solid rgba(255, 255, 255, 0.05);
430
+ }
431
+
432
+ .testimonial-text {
433
+ font-style: italic;
434
+ color: rgba(255, 255, 255, 0.9);
435
+ margin-bottom: 1rem;
436
+ }
437
+
438
+ .testimonial-author {
439
+ display: flex;
440
+ align-items: center;
441
+ gap: 1rem;
442
+ }
443
+
444
+ .author-avatar {
445
+ width: 50px;
446
+ height: 50px;
447
+ border-radius: 50%;
448
+ background: var(--gradient);
449
+ }
450
+
451
+ .author-info h4 {
452
+ font-weight: 600;
453
+ margin-bottom: 0.2rem;
454
+ }
455
+
456
+ .author-info p {
457
+ color: rgba(255, 255, 255, 0.6);
458
+ font-size: 0.9rem;
459
+ }
460
+
461
+ /* CTA Section */
462
+ .cta-section {
463
+ text-align: center;
464
+ padding: 6rem 0;
465
+ position: relative;
466
+ }
467
+
468
+ .cta-section h2 {
469
+ font-size: 2.5rem;
470
+ font-weight: 700;
471
+ margin-bottom: 1.5rem;
472
+ background: linear-gradient(to right, var(--light), var(--primary));
473
+ -webkit-background-clip: text;
474
+ -webkit-text-fill-color: transparent;
475
+ }
476
+
477
+ .cta-section p {
478
+ max-width: 600px;
479
+ margin: 0 auto 2rem;
480
+ color: rgba(255, 255, 255, 0.8);
481
+ font-size: 1.1rem;
482
+ }
483
+
484
+ /* Footer */
485
+ footer {
486
+ background: var(--darker);
487
+ padding: 4rem 0 2rem;
488
+ }
489
+
490
+ .footer-content {
491
+ display: grid;
492
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
493
+ gap: 2rem;
494
+ margin-bottom: 3rem;
495
+ }
496
+
497
+ .footer-column h3 {
498
+ font-size: 1.2rem;
499
+ font-weight: 600;
500
+ margin-bottom: 1.5rem;
501
+ color: var(--light);
502
+ }
503
+
504
+ .footer-links {
505
+ list-style: none;
506
+ }
507
+
508
+ .footer-links li {
509
+ margin-bottom: 0.75rem;
510
+ }
511
+
512
+ .footer-links a {
513
+ color: rgba(255, 255, 255, 0.6);
514
+ text-decoration: none;
515
+ transition: all 0.3s ease;
516
+ }
517
+
518
+ .footer-links a:hover {
519
+ color: var(--primary);
520
+ }
521
+
522
+ .social-links {
523
+ display: flex;
524
+ gap: 1rem;
525
+ margin-top: 1.5rem;
526
+ }
527
+
528
+ .social-link {
529
+ width: 40px;
530
+ height: 40px;
531
+ border-radius: 50%;
532
+ background: rgba(255, 255, 255, 0.05);
533
+ display: flex;
534
+ align-items: center;
535
+ justify-content: center;
536
+ transition: all 0.3s ease;
537
+ }
538
+
539
+ .social-link:hover {
540
+ background: var(--primary);
541
+ color: var(--dark);
542
+ transform: translateY(-3px);
543
+ }
544
+
545
+ .footer-bottom {
546
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
547
+ padding-top: 2rem;
548
+ text-align: center;
549
+ color: rgba(255, 255, 255, 0.4);
550
+ font-size: 0.9rem;
551
+ }
552
+
553
+ /* Animations */
554
+ @keyframes pulse {
555
+ 0% {
556
+ transform: scale(1);
557
+ opacity: 1;
558
+ }
559
+ 50% {
560
+ transform: scale(1.05);
561
+ opacity: 0.8;
562
+ }
563
+ 100% {
564
+ transform: scale(1);
565
+ opacity: 1;
566
+ }
567
+ }
568
+
569
+ .pulse {
570
+ animation: pulse 3s infinite;
571
+ }
572
+
573
+ /* 3D Visualization */
574
+ .tech-visualization {
575
+ position: relative;
576
+ height: 600px;
577
+ background: var(--darker);
578
+ overflow: hidden;
579
+ }
580
+
581
+ #threejs-container {
582
+ width: 100%;
583
+ height: 100%;
584
+ }
585
+
586
+ .visualization-caption {
587
+ position: absolute;
588
+ bottom: 50px;
589
+ left: 50px;
590
+ max-width: 500px;
591
+ z-index: 10;
592
+ }
593
+
594
+ .visualization-caption h3 {
595
+ font-size: 2rem;
596
+ margin-bottom: 1rem;
597
+ }
598
+
599
+ /* AWS Architecture */
600
+ .aws-architecture {
601
+ padding: 6rem 0;
602
+ background: rgba(10, 10, 20, 0.5);
603
+ position: relative;
604
+ }
605
+
606
+ .architecture-diagram {
607
+ display: flex;
608
+ justify-content: center;
609
+ align-items: center;
610
+ margin: 3rem auto;
611
+ max-width: 900px;
612
+ }
613
+
614
+ .architecture-node {
615
+ width: 80px;
616
+ height: 80px;
617
+ border-radius: 50%;
618
+ background: var(--gradient);
619
+ display: flex;
620
+ align-items: center;
621
+ justify-content: center;
622
+ font-size: 1.5rem;
623
+ color: var(--dark);
624
+ position: relative;
625
+ z-index: 2;
626
+ box-shadow: 0 5px 20px rgba(0, 240, 255, 0.3);
627
+ transition: all 0.3s ease;
628
+ }
629
+
630
+ .architecture-node:hover {
631
+ transform: scale(1.2);
632
+ }
633
+
634
+ .architecture-node::after {
635
+ content: attr(data-tooltip);
636
+ position: absolute;
637
+ top: -50px;
638
+ left: 50%;
639
+ transform: translateX(-50%);
640
+ background: rgba(0,0,0,0.8);
641
+ color: white;
642
+ padding: 0.5rem 1rem;
643
+ border-radius: 5px;
644
+ font-size: 0.9rem;
645
+ white-space: nowrap;
646
+ opacity: 0;
647
+ transition: opacity 0.3s ease;
648
+ }
649
+
650
+ .architecture-node:hover::after {
651
+ opacity: 1;
652
+ }
653
+
654
+ .architecture-line {
655
+ flex-grow: 1;
656
+ height: 3px;
657
+ background: var(--gradient);
658
+ position: relative;
659
+ }
660
+
661
+ .architecture-line::after {
662
+ content: '';
663
+ position: absolute;
664
+ right: 0;
665
+ top: -5px;
666
+ width: 15px;
667
+ height: 15px;
668
+ background: var(--secondary);
669
+ transform: rotate(45deg);
670
+ }
671
+
672
+ .architecture-caption {
673
+ text-align: center;
674
+ max-width: 600px;
675
+ margin: 0 auto;
676
+ color: rgba(255,255,255,0.8);
677
+ }
678
+
679
+ /* Responsive */
680
+ @media (max-width: 1024px) {
681
+ .hero-image {
682
+ opacity: 0.3;
683
+ right: -200px;
684
+ }
685
+ }
686
+
687
+ @media (max-width: 768px) {
688
+ .hero h1 {
689
+ font-size: 2.5rem;
690
+ }
691
+
692
+ .hero p {
693
+ font-size: 1.1rem;
694
+ }
695
+
696
+ .hero-image {
697
+ display: none;
698
+ }
699
+
700
+ .nav-links {
701
+ display: none;
702
+ }
703
+ }
704
+ </style>
705
+ </head>
706
+ <body>
707
+ <!-- Floating Background Elements -->
708
+ <div class="floating-element floating-1"></div>
709
+ <div class="floating-element floating-2"></div>
710
+ <div class="floating-element floating-3"></div>
711
+
712
+ <!-- Header -->
713
+ <header class="container">
714
+ <nav>
715
+ <a href="#" class="logo">
716
+ <div class="logo-icon">
717
+ <i class="fas fa-heartbeat"></i>
718
+ </div>
719
+ VitalEdge
720
+ </a>
721
+ <div class="nav-links">
722
+ <a href="#features">Features</a>
723
+ <a href="#technology">Technology</a>
724
+ <a href="#testimonials">Testimonials</a>
725
+ <a href="#pricing">Pricing</a>
726
+ </div>
727
+ <a href="#cta" class="cta-button">Get Early Access</a>
728
+ </nav>
729
+ </header>
730
+
731
+ <!-- Hero Section -->
732
+ <section class="hero container">
733
+ <div class="hero-content">
734
+ <h1>The Future of Personalized Health Monitoring</h1>
735
+ <p>VitalEdge combines cutting-edge AI, IoT, and Edge Computing to deliver real-time health insights and personalized coaching right on your wearable device.</p>
736
+ <div class="hero-buttons">
737
+ <a href="#cta" class="cta-button pulse">
738
+ <i class="fas fa-rocket"></i> Join Beta
739
+ </a>
740
+ <a href="#features" class="secondary-button">
741
+ <i class="fas fa-play-circle"></i> Watch Demo
742
+ </a>
743
+ </div>
744
+ </div>
745
+ <div class="hero-image"></div>
746
+ </section>
747
+
748
+ <!-- AI/IoT Animation Visualization -->
749
+ <div class="cyber-grid"></div>
750
+ <style>
751
+ .cyber-grid {
752
+ position: fixed;
753
+ top: 0;
754
+ left: 0;
755
+ width: 100%;
756
+ height: 100%;
757
+ z-index: -1;
758
+ background:
759
+ linear-gradient(var(--darker) 1px, transparent 1px) 0 -1px,
760
+ linear-gradient(90deg, var(--darker) 1px, transparent 1px) -1px 0;
761
+ background-size: 30px 30px;
762
+ background-color: var(--dark);
763
+ opacity: 0.3;
764
+ }
765
+
766
+ .iot-animation-container {
767
+ height: 600px;
768
+ position: relative;
769
+ overflow: hidden;
770
+ background: radial-gradient(circle at center, var(--darker) 0%, var(--dark) 100%);
771
+ }
772
+
773
+ .iot-device {
774
+ position: absolute;
775
+ width: 80px;
776
+ height: 80px;
777
+ border-radius: 50%;
778
+ background: var(--gradient);
779
+ display: flex;
780
+ align-items: center;
781
+ justify-content: center;
782
+ font-size: 1.5rem;
783
+ box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
784
+ opacity: 0;
785
+ }
786
+
787
+ .data-connection {
788
+ position: absolute;
789
+ height: 2px;
790
+ background: var(--primary);
791
+ transform-origin: left center;
792
+ opacity: 0;
793
+ box-shadow: 0 0 5px var(--primary);
794
+ }
795
+
796
+ .ai-bot {
797
+ position: absolute;
798
+ width: 100px;
799
+ height: 100px;
800
+ border-radius: 50%;
801
+ background: conic-gradient(from 180deg, var(--accent), var(--secondary));
802
+ display: flex;
803
+ align-items: center;
804
+ justify-content: center;
805
+ font-size: 2rem;
806
+ opacity: 0;
807
+ box-shadow: 0 0 20px rgba(123, 45, 255, 0.5);
808
+ }
809
+
810
+ .health-record {
811
+ position: absolute;
812
+ width: 120px;
813
+ height: 80px;
814
+ background: rgba(255,255,255,0.1);
815
+ border-radius: 10px;
816
+ backdrop-filter: blur(5px);
817
+ border: 1px solid rgba(0,240,255,0.3);
818
+ display: flex;
819
+ justify-content: center;
820
+ align-items: center;
821
+ font-size: 0.8rem;
822
+ text-align: center;
823
+ padding: 10px;
824
+ opacity: 0;
825
+ }
826
+ </style>
827
+ <section class="iot-animation-container" style="height: 80vh;">
828
+ <div class="demo-title">
829
+ <h2>Hackathon Demo</h2>
830
+ <p>Live AI Health Monitoring System</p>
831
+ <div class="demo-stats">
832
+ <div class="stat-item">
833
+ <div class="stat-value" id="heartrate">--</div>
834
+ <div class="stat-label">BPM</div>
835
+ </div>
836
+ <div class="stat-item">
837
+ <div class="stat-value" id="oxygen">--</div>
838
+ <div class="stat-label">SpO2 %</div>
839
+ </div>
840
+ <div class="stat-item">
841
+ <div class="stat-value" id="stress">--</div>
842
+ <div class="stat-label">Stress Lvl</div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+ <div class="iot-device" style="top: 20%; left: 20%">
847
+ <i class="fas fa-watch-fitness"></i>
848
+ </div>
849
+ <div class="iot-device" style="top: 60%; left: 15%">
850
+ <i class="fas fa-heartbeat"></i>
851
+ </div>
852
+ <div class="iot-device" style="top: 40%; left: 80%">
853
+ <i class="fas fa-mobile-alt"></i>
854
+ </div>
855
+ <div class="ai-bot" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">
856
+ <i class="fas fa-robot"></i>
857
+ </div>
858
+ <div class="health-record" style="top: 25%; left: 50%">
859
+ Real-time ECG Analysis
860
+ </div>
861
+ <div class="health-record" style="top: 70%; left: 50%">
862
+ Predictive Health Insights
863
+ </div>
864
+ <div class="visualization-caption">
865
+ <h3>Our <span class="gradient-text">AI+IoT Health</span> Ecosystem</h3>
866
+ <p>See how devices, AI, and health data work together in real-time</p>
867
+ </div>
868
+ </section>
869
+
870
+ <script>
871
+ // Animation sequence for IoT/AI visualization
872
+ function animateIoT() {
873
+ const devices = document.querySelectorAll('.iot-device');
874
+ const connections = [];
875
+ const aiBot = document.querySelector('.ai-bot');
876
+ const records = document.querySelectorAll('.health-record');
877
+
878
+ // Create data connections
879
+ devices.forEach(device => {
880
+ const rect = device.getBoundingClientRect();
881
+ const botRect = aiBot.getBoundingClientRect();
882
+
883
+ const connection = document.createElement('div');
884
+ connection.className = 'data-connection';
885
+
886
+ const length = Math.sqrt(
887
+ Math.pow(botRect.left - rect.left, 2) +
888
+ Math.pow(botRect.top - rect.top, 2)
889
+ );
890
+
891
+ const angle = Math.atan2(
892
+ botRect.top - rect.top,
893
+ botRect.left - rect.left
894
+ ) * 180 / Math.PI;
895
+
896
+ connection.style.width = `${length}px`;
897
+ connection.style.left = `${rect.left + rect.width/2}px`;
898
+ connection.style.top = `${rect.top + rect.height/2}px`;
899
+ connection.style.transform = `rotate(${angle}deg)`;
900
+
901
+ document.querySelector('.iot-animation-container').appendChild(connection);
902
+ connections.push(connection);
903
+ });
904
+
905
+ // Animation timeline
906
+ let delay = 0;
907
+
908
+ // Show devices
909
+ devices.forEach((device, i) => {
910
+ setTimeout(() => {
911
+ device.style.opacity = 1;
912
+ device.style.animation = 'pulse 2s infinite';
913
+ device.style.animationDelay = `${i * 0.3}s`;
914
+ }, delay);
915
+ delay += 300;
916
+ });
917
+
918
+ // Show connections
919
+ setTimeout(() => {
920
+ connections.forEach(conn => {
921
+ conn.style.opacity = 0.7;
922
+ conn.style.transition = 'opacity 0.5s ease';
923
+ });
924
+ }, delay);
925
+
926
+ delay += 500;
927
+
928
+ // Show AI bot
929
+ setTimeout(() => {
930
+ aiBot.style.opacity = 1;
931
+ aiBot.style.animation = 'pulse 2s infinite';
932
+ }, delay);
933
+
934
+ delay += 500;
935
+
936
+ // Show health records
937
+ records.forEach((record, i) => {
938
+ setTimeout(() => {
939
+ record.style.opacity = 1;
940
+ record.style.transform = `translateY(${i % 2 ? '10px' : '-10px'})`;
941
+ record.style.transition = 'all 0.5s ease';
942
+ }, delay + i * 300);
943
+
944
+ // Floating animation
945
+ setTimeout(() => {
946
+ record.style.animation = `
947
+ float 3s ease-in-out infinite ${i * 0.3}s
948
+ `;
949
+ }, delay + records.length * 300);
950
+ });
951
+
952
+ // Animate connections
953
+ setInterval(() => {
954
+ connections.forEach(conn => {
955
+ if (Math.random() > 0.7) {
956
+ conn.style.opacity = 0.3;
957
+ setTimeout(() => {
958
+ conn.style.opacity = 0.7;
959
+ }, 200);
960
+ }
961
+ });
962
+ }, 300);
963
+ }
964
+
965
+ document.addEventListener('DOMContentLoaded', function() {
966
+ animateIoT();
967
+
968
+ // Demo data simulation
969
+ const heartRate = document.getElementById('heartrate');
970
+ const oxygen = document.getElementById('oxygen');
971
+ const stress = document.getElementById('stress');
972
+
973
+ let hr = 72;
974
+ let spo2 = 98;
975
+ let stressLvl = 35;
976
+
977
+ setInterval(() => {
978
+ hr = Math.max(60, Math.min(120, hr + (Math.random() * 4 - 2)));
979
+ spo2 = Math.max(92, Math.min(100, spo2 + (Math.random() * 1 - 0.5)));
980
+ stressLvl = Math.max(15, Math.min(90, stressLvl + (Math.random() * 10 - 5)));
981
+
982
+ heartRate.textContent = Math.round(hr);
983
+ oxygen.textContent = Math.round(spo2);
984
+ stress.textContent = Math.round(stressLvl);
985
+
986
+ // Change colors based on values
987
+ heartRate.style.color = hr > 90 ? '#ff2df2' : '#00f0ff';
988
+ oxygen.style.color = spo2 < 94 ? '#ff2df2' : '#00f0ff';
989
+ stress.style.color = stressLvl > 70 ? '#ff2df2' : '#00f0ff';
990
+ }, 1000);
991
+
992
+ // Make pulses more pronounced for demo
993
+ setInterval(() => {
994
+ document.querySelectorAll('.iot-device').forEach(device => {
995
+ device.style.transform = 'scale(1.2)';
996
+ setTimeout(() => {
997
+ device.style.transform = 'scale(1)';
998
+ }, 200);
999
+ });
1000
+ }, 3000);
1001
+ });
1002
+
1003
+ // Add floating animation
1004
+ const style = document.createElement('style');
1005
+ style.innerHTML = `
1006
+ @keyframes float {
1007
+ 0% { transform: translateY(0) rotate(0deg); }
1008
+ 25% { transform: translateY(-5px) rotate(2deg); }
1009
+ 50% { transform: translateY(0) rotate(0deg); }
1010
+ 75% { transform: translateY(5px) rotate(-2deg); }
1011
+ 100% { transform: translateY(0) rotate(0deg); }
1012
+ }
1013
+ `;
1014
+ document.head.appendChild(style);
1015
+ </script>
1016
+
1017
+ <!-- Features Section -->
1018
+ <section id="features" class="section container">
1019
+ <h2 class="section-title">Why VitalEdge?</h2>
1020
+ <div class="features-grid">
1021
+ <div class="feature-card">
1022
+ <div class="feature-icon">
1023
+ <i class="fas fa-bolt"></i>
1024
+ </div>
1025
+ <h3 class="feature-title">Real-time Processing</h3>
1026
+ <p class="feature-description">Edge computing enables instant health analysis without cloud latency, giving you immediate feedback on your vitals.</p>
1027
+ </div>
1028
+ <div class="feature-card">
1029
+ <div class="feature-icon">
1030
+ <i class="fas fa-brain"></i>
1031
+ </div>
1032
+ <h3 class="feature-title">AI-Powered Insights</h3>
1033
+ <p class="feature-description">Our AWS-powered generative AI learns your unique patterns to provide hyper-personalized health recommendations.</p>
1034
+ </div>
1035
+ <div class="feature-card">
1036
+ <div class="feature-icon">
1037
+ <i class="fas fa-shield-alt"></i>
1038
+ </div>
1039
+ <h3 class="feature-title">Privacy First</h3>
1040
+ <p class="feature-description">Your sensitive health data stays on your device with our local processing architecture, never touching the cloud.</p>
1041
+ </div>
1042
+ <div class="feature-card">
1043
+ <div class="feature-icon">
1044
+ <i class="fas fa-network-wired"></i>
1045
+ </div>
1046
+ <h3 class="feature-title">5G Connected</h3>
1047
+ <p class="feature-description">Ultra-low latency 5G connectivity ensures seamless synchronization when cloud processing is needed.</p>
1048
+ </div>
1049
+ <div class="feature-card">
1050
+ <div class="feature-icon">
1051
+ <i class="fas fa-chart-line"></i>
1052
+ </div>
1053
+ <h3 class="feature-title">Predictive Analytics</h3>
1054
+ <p class="feature-description">Our models can predict potential health issues before they become serious, giving you time to take action.</p>
1055
+ </div>
1056
+ <div class="feature-card">
1057
+ <div class="feature-icon">
1058
+ <i class="fas fa-robot"></i>
1059
+ </div>
1060
+ <h3 class="feature-title">AI Health Coach</h3>
1061
+ <p class="feature-description">Your personal AI coach adapts to your lifestyle, providing just-in-time guidance for optimal wellbeing.</p>
1062
+ </div>
1063
+ </div>
1064
+ </section>
1065
+
1066
+ <!-- Technology Section -->
1067
+ <section id="technology" class="section container">
1068
+ <h2 class="section-title">Powered By Cutting-Edge Tech</h2>
1069
+ <div class="tech-stack">
1070
+ <div class="tech-item">
1071
+ <div class="tech-icon">
1072
+ <i class="fab fa-aws"></i>
1073
+ </div>
1074
+ <span class="tech-name">AWS Generative AI</span>
1075
+ </div>
1076
+ <div class="tech-item">
1077
+ <div class="tech-icon">
1078
+ <i class="fas fa-microchip"></i>
1079
+ </div>
1080
+ <span class="tech-name">Edge Computing</span>
1081
+ </div>
1082
+ <div class="tech-item">
1083
+ <div class="tech-icon">
1084
+ <i class="fas fa-wifi"></i>
1085
+ </div>
1086
+ <span class="tech-name">5G Networks</span>
1087
+ </div>
1088
+ <div class="tech-item">
1089
+ <div class="tech-icon">
1090
+ <i class="fas fa-bluetooth-b"></i>
1091
+ </div>
1092
+ <span class="tech-name">IoT Sensors</span>
1093
+ </div>
1094
+ <div class="tech-item">
1095
+ <div class="tech-icon">
1096
+ <i class="fas fa-lock"></i>
1097
+ </div>
1098
+ <span class="tech-name">Blockchain</span>
1099
+ </div>
1100
+ </div>
1101
+ </section>
1102
+
1103
+ <!-- AWS Architecture -->
1104
+ <section class="aws-architecture">
1105
+ <div class="container">
1106
+ <h2 class="section-title">Our <span class="gradient-text">AWS Edge AI</span> Architecture</h2>
1107
+ <div class="architecture-diagram">
1108
+ <div class="architecture-node" data-tooltip="IoT Device">
1109
+ <i class="fas fa-microchip"></i>
1110
+ </div>
1111
+ <div class="architecture-line"></div>
1112
+ <div class="architecture-node" data-tooltip="AWS IoT Greengrass">
1113
+ <i class="fab fa-aws"></i>
1114
+ </div>
1115
+ <div class="architecture-line"></div>
1116
+ <div class="architecture-node" data-tooltip="Edge Lambda">
1117
+ <i class="fas fa-bolt"></i>
1118
+ </div>
1119
+ <div class="architecture-line"></div>
1120
+ <div class="architecture-node" data-tooltip="Sagemaker Neo">
1121
+ <i class="fas fa-brain"></i>
1122
+ </div>
1123
+ <div class="architecture-line"></div>
1124
+ <div class="architecture-node" data-tooltip="Personalized Insights">
1125
+ <i class="fas fa-chart-line"></i>
1126
+ </div>
1127
+ </div>
1128
+ <div class="architecture-caption">
1129
+ <p>Data flows through our optimized edge AI pipeline, reducing latency by 90% compared to cloud-only solutions</p>
1130
+ </div>
1131
+ </div>
1132
+ </section>
1133
+
1134
+ <!-- Testimonials -->
1135
+ <section id="testimonials" class="section container">
1136
+ <h2 class="section-title">Trusted By Health Pioneers</h2>
1137
+ <div class="testimonials">
1138
+ <div class="testimonial-card">
1139
+ <p class="testimonial-text">"VitalEdge detected irregular heart patterns that my doctor missed. The AI analysis likely saved my life by catching early signs of atrial fibrillation."</p>
1140
+ <div class="testimonial-author">
1141
+ <div class="author-avatar"></div>
1142
+ <div class="author-info">
1143
+ <h4>Dr. Sarah Chen</h4>
1144
+ <p>Cardiologist, Stanford Health</p>
1145
+ </div>
1146
+ </div>
1147
+ </div>
1148
+ <div class="testimonial-card">
1149
+ <p class="testimonial-text">"As a biohacker, I've tried every health wearable. VitalEdge is the first that provides truly actionable insights with its edge AI processing."</p>
1150
+ <div class="testimonial-author">
1151
+ <div class="author-avatar"></div>
1152
+ <div class="author-info">
1153
+ <h4>Mark Williams</h4>
1154
+ <p>Professional Athlete</p>
1155
+ </div>
1156
+ </div>
1157
+ </div>
1158
+ </div>
1159
+ </section>
1160
+
1161
+ <!-- CTA Section -->
1162
+ <section id="cta" class="cta-section container">
1163
+ <h2>Ready to Transform Your Health?</h2>
1164
+ <p>Join our exclusive beta program and be among the first to experience the future of personalized health monitoring.</p>
1165
+ <a href="#" class="cta-button pulse">
1166
+ <i class="fas fa-user-plus"></i> Apply for Beta Access
1167
+ </a>
1168
+ </section>
1169
+
1170
+ <!-- Footer -->
1171
+ <footer>
1172
+ <div class="container">
1173
+ <div class="footer-content">
1174
+ <div class="footer-column">
1175
+ <h3>VitalEdge</h3>
1176
+ <p>The future of health monitoring powered by AI, IoT, and Edge Computing.</p>
1177
+ <div class="social-links">
1178
+ <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
1179
+ <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
1180
+ <a href="#" class="social-link"><i class="fab fa-github"></i></a>
1181
+ <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
1182
+ </div>
1183
+ </div>
1184
+ <div class="footer-column">
1185
+ <h3>Product</h3>
1186
+ <ul class="footer-links">
1187
+ <li><a href="#">Features</a></li>
1188
+ <li><a href="#">Technology</a></li>
1189
+ <li><a href="#">Pricing</a></li>
1190
+ <li><a href="#">Roadmap</a></li>
1191
+ </ul>
1192
+ </div>
1193
+ <div class="footer-column">
1194
+ <h3>Resources</h3>
1195
+ <ul class="footer-links">
1196
+ <li><a href="#">Documentation</a></li>
1197
+ <li><a href="#">API</a></li>
1198
+ <li><a href="#">Developers</a></li>
1199
+ <li><a href="#">Research</a></li>
1200
+ </ul>
1201
+ </div>
1202
+ <div class="footer-column">
1203
+ <h3>Company</h3>
1204
+ <ul class="footer-links">
1205
+ <li><a href="#">About</a></li>
1206
+ <li><a href="#">Careers</a></li>
1207
+ <li><a href="#">Blog</a></li>
1208
+ <li><a href="#">Contact</a></li>
1209
+ </ul>
1210
+ </div>
1211
+ </div>
1212
+ <div class="footer-bottom">
1213
+ <p>&copy; 2023 VitalEdge Technologies. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
1214
+ </div>
1215
+ </div>
1216
+ </footer>
1217
+
1218
+ <script>
1219
+ // Three.js Neural Network Visualization
1220
+ const initThreeJS = () => {
1221
+ const container = document.getElementById('threejs-container');
1222
+ const width = container.clientWidth;
1223
+ const height = container.clientHeight;
1224
+
1225
+ // Scene setup
1226
+ const scene = new THREE.Scene();
1227
+ scene.background = new THREE.Color(0x0a0a14);
1228
+
1229
+ const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
1230
+ camera.position.z = 30;
1231
+
1232
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
1233
+ renderer.setSize(width, height);
1234
+ container.appendChild(renderer.domElement);
1235
+
1236
+ // Controls
1237
+ const controls = new THREE.OrbitControls(camera, renderer.domElement);
1238
+ controls.enableDamping = true;
1239
+ controls.dampingFactor = 0.05;
1240
+ controls.autoRotate = true;
1241
+ controls.autoRotateSpeed = 0.5;
1242
+
1243
+ // Create neural network structure
1244
+ const createNeuralNetwork = () => {
1245
+ const group = new THREE.Group();
1246
+
1247
+ // Create layers
1248
+ const layerCount = 5;
1249
+ const nodesPerLayer = 8;
1250
+ const spacing = 5;
1251
+
1252
+ // Nodes material
1253
+ const nodeMaterial = new THREE.MeshBasicMaterial({
1254
+ color: 0x00f0ff,
1255
+ transparent: true,
1256
+ opacity: 0.8
1257
+ });
1258
+
1259
+ // Connections material
1260
+ const connectionMaterial = new THREE.LineBasicMaterial({
1261
+ color: 0x7b2dff,
1262
+ transparent: true,
1263
+ opacity: 0.3
1264
+ });
1265
+
1266
+ // Create nodes and connections
1267
+ for (let l = 0; l < layerCount; l++) {
1268
+ const layerNodes = [];
1269
+
1270
+ // Create nodes in this layer
1271
+ for (let n = 0; n < nodesPerLayer; n++) {
1272
+ const radius = 0.5;
1273
+ const geometry = new THREE.SphereGeometry(radius, 16, 16);
1274
+ const node = new THREE.Mesh(geometry, nodeMaterial);
1275
+
1276
+ node.position.x = (l - (layerCount/2 - 0.5)) * spacing;
1277
+ node.position.y = (n - (nodesPerLayer/2 - 0.5)) * spacing;
1278
+
1279
+ group.add(node);
1280
+ layerNodes.push(node);
1281
+
1282
+ // If not first layer, connect to previous layer
1283
+ if (l > 0) {
1284
+ for (let p = 0; p < nodesPerLayer; p++) {
1285
+ const points = [];
1286
+ points.push(new THREE.Vector3(
1287
+ node.position.x - spacing/2,
1288
+ node.position.y,
1289
+ node.position.z
1290
+ ));
1291
+ points.push(new THREE.Vector3(
1292
+ node.position.x - spacing/2,
1293
+ (p - (nodesPerLayer/2 - 0.5)) * spacing,
1294
+ node.position.z
1295
+ ));
1296
+
1297
+ const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
1298
+ const line = new THREE.Line(lineGeometry, connectionMaterial);
1299
+ group.add(line);
1300
+ }
1301
+ }
1302
+ }
1303
+ }
1304
+
1305
+ return group;
1306
+ };
1307
+
1308
+ const nn = createNeuralNetwork();
1309
+ scene.add(nn);
1310
+
1311
+ // Pulsing animation for nodes
1312
+ const pulseNodes = () => {
1313
+ nn.children.forEach(child => {
1314
+ if (child instanceof THREE.Mesh) {
1315
+ const scale = 1 + Math.sin(Date.now() * 0.002) * 0.2;
1316
+ child.scale.set(scale, scale, scale);
1317
+ }
1318
+ });
1319
+ };
1320
+
1321
+ // Animation loop
1322
+ const animate = () => {
1323
+ requestAnimationFrame(animate);
1324
+ pulseNodes();
1325
+ controls.update();
1326
+ renderer.render(scene, camera);
1327
+ };
1328
+
1329
+ animate();
1330
+
1331
+ // Handle resize
1332
+ window.addEventListener('resize', () => {
1333
+ const width = container.clientWidth;
1334
+ const height = container.clientHeight;
1335
+ camera.aspect = width / height;
1336
+ camera.updateProjectionMatrix();
1337
+ renderer.setSize(width, height);
1338
+ });
1339
+ };
1340
+
1341
+ // Initialize when DOM is loaded
1342
+ document.addEventListener('DOMContentLoaded', initThreeJS);
1343
+
1344
+ // Simple animation for elements when they come into view
1345
+ const observer = new IntersectionObserver((entries) => {
1346
+ entries.forEach(entry => {
1347
+ if (entry.isIntersecting) {
1348
+ entry.target.classList.add('animate');
1349
+ }
1350
+ });
1351
+ }, {
1352
+ threshold: 0.1
1353
+ });
1354
+
1355
+ document.querySelectorAll('.feature-card, .tech-item, .testimonial-card').forEach(el => {
1356
+ observer.observe(el);
1357
+ });
1358
+
1359
+ // Theme toggle (simplified for this example)
1360
+ const themeToggle = document.createElement('button');
1361
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
1362
+ themeToggle.style.position = 'fixed';
1363
+ themeToggle.style.bottom = '20px';
1364
+ themeToggle.style.right = '20px';
1365
+ themeToggle.style.width = '50px';
1366
+ themeToggle.style.height = '50px';
1367
+ themeToggle.style.borderRadius = '50%';
1368
+ themeToggle.style.background = 'var(--gradient)';
1369
+ themeToggle.style.color = 'var(--dark)';
1370
+ themeToggle.style.border = 'none';
1371
+ themeToggle.style.cursor = 'pointer';
1372
+ themeToggle.style.zIndex = '1000';
1373
+ themeToggle
1374
+ </html>
prompts.txt ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ Add 3djs animations, and aws architecture diagrams,etc for giving off a more DeepTech startup, that is at the very tech edge of AI , modern
2
+ Fix this design, alignment etc. Improve styling and design
3
+ Mka eit more neon, and feel like the cutting edge of deep tech startup and AI
4
+ Add a better animation instead of the 3d js neural network,, show animation of iot and ai , chatbot, health records, animation connections
5
+ This is for a hackthon demo ,, so make it accordingly, better cool vibes