Hugging Face's logo

Spaces:
lattmamb
/
deepvision_builderOS
Running

App Files Community
lattmamb commited on
Commit
d1b7c84
·
verified ·
1 Parent(s): 413679b

Upload 17 files

Browse files
Files changed (17) hide show
  1. chainlink-tokenization.html +1309 -0
  2. charging-hub.html +616 -0
  3. deployment-map.html +833 -0
  4. energy-simulation.html +915 -0
  5. index.html +541 -26
  6. key_components_for_demonstration.md +161 -0
  7. mobile-app.html +440 -0
  8. mvp-showcase-section.html +69 -0
  9. mvp_requirements_analysis.md +152 -0
  10. scripts.js +335 -0
  11. showcase-styles.css +91 -0
  12. styles.css +1119 -0
  13. subscription-portal.html +1269 -0
  14. technical_architecture.md +456 -0
  15. template.html +205 -0
  16. todo.md +126 -0
  17. unity_fleet_complete_proposal.md +1024 -0
chainlink-tokenization.html ADDED
@@ -0,0 +1,1309 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Unity Fleet - ChainLink Tokenization</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* MVP Component specific styles */
14
+ .component-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 2rem;
18
+ }
19
+
20
+ .component-header {
21
+ text-align: center;
22
+ margin-bottom: 3rem;
23
+ }
24
+
25
+ .component-header h1 {
26
+ font-size: 2.5rem;
27
+ margin-bottom: 1rem;
28
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ -webkit-text-fill-color: transparent;
32
+ }
33
+
34
+ .component-header p {
35
+ font-size: 1.2rem;
36
+ max-width: 800px;
37
+ margin: 0 auto;
38
+ opacity: 0.8;
39
+ }
40
+
41
+ .component-content {
42
+ background: var(--glass-bg);
43
+ border: 1px solid var(--glass-border);
44
+ border-radius: 16px;
45
+ padding: 2rem;
46
+ margin-bottom: 3rem;
47
+ backdrop-filter: blur(10px);
48
+ }
49
+
50
+ .back-to-home {
51
+ display: inline-block;
52
+ margin-top: 2rem;
53
+ padding: 0.8rem 1.5rem;
54
+ background: transparent;
55
+ border: 1px solid var(--accent-color-1);
56
+ color: var(--accent-color-1);
57
+ border-radius: 4px;
58
+ font-family: var(--font-primary);
59
+ font-weight: 500;
60
+ text-transform: uppercase;
61
+ letter-spacing: 1px;
62
+ transition: all var(--transition-medium);
63
+ }
64
+
65
+ .back-to-home:hover {
66
+ background: rgba(0, 224, 255, 0.1);
67
+ transform: translateY(-3px);
68
+ }
69
+
70
+ /* ChainLink Tokenization specific styles */
71
+ .chainlink-demo-container {
72
+ display: flex;
73
+ flex-direction: column;
74
+ align-items: center;
75
+ padding: 1rem;
76
+ }
77
+
78
+ .tokenization-interface {
79
+ width: 100%;
80
+ max-width: 900px;
81
+ background-color: #0B0B0F;
82
+ border-radius: 16px;
83
+ overflow: hidden;
84
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
85
+ border: 1px solid rgba(0, 224, 255, 0.3);
86
+ margin-bottom: 2rem;
87
+ }
88
+
89
+ .tokenization-header {
90
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
91
+ padding: 1.5rem;
92
+ display: flex;
93
+ justify-content: space-between;
94
+ align-items: center;
95
+ }
96
+
97
+ .tokenization-header h2 {
98
+ margin: 0;
99
+ font-size: 1.5rem;
100
+ }
101
+
102
+ .network-status {
103
+ display: flex;
104
+ align-items: center;
105
+ font-size: 0.9rem;
106
+ }
107
+
108
+ .status-indicator {
109
+ width: 10px;
110
+ height: 10px;
111
+ border-radius: 50%;
112
+ background: #4CAF50;
113
+ margin-right: 0.5rem;
114
+ }
115
+
116
+ .tokenization-nav {
117
+ display: flex;
118
+ background: rgba(0, 0, 0, 0.3);
119
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
120
+ }
121
+
122
+ .nav-tab {
123
+ padding: 1rem 1.5rem;
124
+ cursor: pointer;
125
+ transition: all 0.3s ease;
126
+ position: relative;
127
+ }
128
+
129
+ .nav-tab:hover {
130
+ background: rgba(0, 224, 255, 0.1);
131
+ }
132
+
133
+ .nav-tab.active {
134
+ color: var(--accent-color-1);
135
+ }
136
+
137
+ .nav-tab.active::after {
138
+ content: '';
139
+ position: absolute;
140
+ bottom: 0;
141
+ left: 0;
142
+ width: 100%;
143
+ height: 3px;
144
+ background: var(--accent-color-1);
145
+ }
146
+
147
+ .tokenization-body {
148
+ padding: 2rem;
149
+ }
150
+
151
+ .tab-content {
152
+ display: none;
153
+ }
154
+
155
+ .tab-content.active {
156
+ display: block;
157
+ }
158
+
159
+ /* Token Overview Tab */
160
+ .token-stats {
161
+ display: grid;
162
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
163
+ gap: 1.5rem;
164
+ margin-bottom: 2rem;
165
+ }
166
+
167
+ .token-stat {
168
+ background: rgba(255, 255, 255, 0.05);
169
+ border-radius: 12px;
170
+ padding: 1.5rem;
171
+ border: 1px solid rgba(255, 255, 255, 0.1);
172
+ text-align: center;
173
+ }
174
+
175
+ .stat-value {
176
+ font-size: 2rem;
177
+ font-weight: bold;
178
+ margin-bottom: 0.5rem;
179
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
180
+ -webkit-background-clip: text;
181
+ background-clip: text;
182
+ -webkit-text-fill-color: transparent;
183
+ }
184
+
185
+ .stat-label {
186
+ font-size: 0.9rem;
187
+ opacity: 0.8;
188
+ }
189
+
190
+ .token-distribution {
191
+ background: rgba(0, 0, 0, 0.3);
192
+ border-radius: 12px;
193
+ padding: 1.5rem;
194
+ margin-bottom: 2rem;
195
+ }
196
+
197
+ .distribution-title {
198
+ margin-top: 0;
199
+ margin-bottom: 1.5rem;
200
+ font-size: 1.2rem;
201
+ color: var(--accent-color-1);
202
+ }
203
+
204
+ .distribution-chart {
205
+ height: 300px;
206
+ position: relative;
207
+ display: flex;
208
+ align-items: center;
209
+ justify-content: center;
210
+ }
211
+
212
+ .donut-chart {
213
+ width: 250px;
214
+ height: 250px;
215
+ border-radius: 50%;
216
+ background: conic-gradient(
217
+ #4CAF50 0% 30%,
218
+ #2196F3 30% 55%,
219
+ #9C27B0 55% 70%,
220
+ #FF9800 70% 85%,
221
+ #F44336 85% 100%
222
+ );
223
+ position: relative;
224
+ }
225
+
226
+ .donut-hole {
227
+ position: absolute;
228
+ width: 150px;
229
+ height: 150px;
230
+ background: #0B0B0F;
231
+ border-radius: 50%;
232
+ top: 50%;
233
+ left: 50%;
234
+ transform: translate(-50%, -50%);
235
+ display: flex;
236
+ align-items: center;
237
+ justify-content: center;
238
+ flex-direction: column;
239
+ }
240
+
241
+ .total-tokens {
242
+ font-size: 1.5rem;
243
+ font-weight: bold;
244
+ margin-bottom: 0.3rem;
245
+ }
246
+
247
+ .total-label {
248
+ font-size: 0.8rem;
249
+ opacity: 0.7;
250
+ }
251
+
252
+ .distribution-legend {
253
+ display: flex;
254
+ flex-wrap: wrap;
255
+ justify-content: center;
256
+ gap: 1.5rem;
257
+ margin-top: 2rem;
258
+ }
259
+
260
+ .legend-item {
261
+ display: flex;
262
+ align-items: center;
263
+ }
264
+
265
+ .legend-color {
266
+ width: 16px;
267
+ height: 16px;
268
+ border-radius: 4px;
269
+ margin-right: 0.5rem;
270
+ }
271
+
272
+ .legend-color.infrastructure {
273
+ background: #4CAF50;
274
+ }
275
+
276
+ .legend-color.investors {
277
+ background: #2196F3;
278
+ }
279
+
280
+ .legend-color.community {
281
+ background: #9C27B0;
282
+ }
283
+
284
+ .legend-color.operations {
285
+ background: #FF9800;
286
+ }
287
+
288
+ .legend-color.reserve {
289
+ background: #F44336;
290
+ }
291
+
292
+ .legend-text {
293
+ font-size: 0.9rem;
294
+ }
295
+
296
+ .legend-value {
297
+ font-weight: bold;
298
+ margin-left: 0.3rem;
299
+ }
300
+
301
+ /* Asset Tokenization Tab */
302
+ .asset-categories {
303
+ display: grid;
304
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
305
+ gap: 1.5rem;
306
+ margin-bottom: 2rem;
307
+ }
308
+
309
+ .asset-category {
310
+ background: rgba(255, 255, 255, 0.05);
311
+ border-radius: 12px;
312
+ padding: 1.5rem;
313
+ border: 1px solid rgba(255, 255, 255, 0.1);
314
+ transition: all 0.3s ease;
315
+ }
316
+
317
+ .asset-category:hover {
318
+ transform: translateY(-5px);
319
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
320
+ border-color: var(--accent-color-1);
321
+ }
322
+
323
+ .category-header {
324
+ display: flex;
325
+ align-items: center;
326
+ margin-bottom: 1rem;
327
+ }
328
+
329
+ .category-icon {
330
+ width: 40px;
331
+ height: 40px;
332
+ border-radius: 8px;
333
+ background: rgba(0, 224, 255, 0.1);
334
+ display: flex;
335
+ align-items: center;
336
+ justify-content: center;
337
+ margin-right: 1rem;
338
+ color: var(--accent-color-1);
339
+ font-size: 1.2rem;
340
+ }
341
+
342
+ .category-name {
343
+ font-size: 1.2rem;
344
+ font-weight: bold;
345
+ }
346
+
347
+ .category-description {
348
+ margin-bottom: 1rem;
349
+ font-size: 0.9rem;
350
+ opacity: 0.8;
351
+ }
352
+
353
+ .category-stats {
354
+ display: flex;
355
+ justify-content: space-between;
356
+ font-size: 0.9rem;
357
+ }
358
+
359
+ .category-value {
360
+ font-weight: bold;
361
+ color: var(--accent-color-1);
362
+ }
363
+
364
+ .tokenized-assets {
365
+ background: rgba(0, 0, 0, 0.3);
366
+ border-radius: 12px;
367
+ padding: 1.5rem;
368
+ margin-bottom: 2rem;
369
+ }
370
+
371
+ .assets-title {
372
+ margin-top: 0;
373
+ margin-bottom: 1.5rem;
374
+ font-size: 1.2rem;
375
+ color: var(--accent-color-1);
376
+ display: flex;
377
+ justify-content: space-between;
378
+ align-items: center;
379
+ }
380
+
381
+ .filter-dropdown {
382
+ position: relative;
383
+ display: inline-block;
384
+ }
385
+
386
+ .filter-button {
387
+ padding: 0.5rem 1rem;
388
+ background: rgba(255, 255, 255, 0.1);
389
+ border: 1px solid rgba(255, 255, 255, 0.2);
390
+ border-radius: 4px;
391
+ color: white;
392
+ cursor: pointer;
393
+ display: flex;
394
+ align-items: center;
395
+ font-size: 0.9rem;
396
+ }
397
+
398
+ .filter-button i {
399
+ margin-left: 0.5rem;
400
+ }
401
+
402
+ .filter-dropdown-content {
403
+ display: none;
404
+ position: absolute;
405
+ right: 0;
406
+ background: #0B0B0F;
407
+ min-width: 160px;
408
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
409
+ z-index: 1;
410
+ border-radius: 4px;
411
+ border: 1px solid rgba(255, 255, 255, 0.1);
412
+ }
413
+
414
+ .filter-dropdown-content a {
415
+ color: white;
416
+ padding: 0.8rem 1rem;
417
+ text-decoration: none;
418
+ display: block;
419
+ font-size: 0.9rem;
420
+ transition: all 0.3s ease;
421
+ }
422
+
423
+ .filter-dropdown-content a:hover {
424
+ background: rgba(0, 224, 255, 0.1);
425
+ }
426
+
427
+ .filter-dropdown:hover .filter-dropdown-content {
428
+ display: block;
429
+ }
430
+
431
+ .assets-grid {
432
+ display: grid;
433
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
434
+ gap: 1.5rem;
435
+ }
436
+
437
+ .asset-card {
438
+ background: rgba(255, 255, 255, 0.05);
439
+ border-radius: 8px;
440
+ overflow: hidden;
441
+ transition: all 0.3s ease;
442
+ cursor: pointer;
443
+ }
444
+
445
+ .asset-card:hover {
446
+ transform: translateY(-5px);
447
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
448
+ }
449
+
450
+ .asset-image {
451
+ height: 120px;
452
+ background: linear-gradient(45deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: center;
456
+ font-size: 2rem;
457
+ color: var(--accent-color-1);
458
+ }
459
+
460
+ .asset-details {
461
+ padding: 1rem;
462
+ }
463
+
464
+ .asset-name {
465
+ font-weight: bold;
466
+ margin-bottom: 0.5rem;
467
+ }
468
+
469
+ .asset-info {
470
+ font-size: 0.8rem;
471
+ opacity: 0.7;
472
+ margin-bottom: 0.5rem;
473
+ }
474
+
475
+ .asset-value {
476
+ font-size: 0.9rem;
477
+ font-weight: bold;
478
+ color: var(--accent-color-1);
479
+ }
480
+
481
+ /* Token Flow Tab */
482
+ .token-flow-visualization {
483
+ background: rgba(0, 0, 0, 0.3);
484
+ border-radius: 12px;
485
+ padding: 1.5rem;
486
+ margin-bottom: 2rem;
487
+ height: 400px;
488
+ position: relative;
489
+ overflow: hidden;
490
+ }
491
+
492
+ .flow-title {
493
+ margin-top: 0;
494
+ margin-bottom: 1.5rem;
495
+ font-size: 1.2rem;
496
+ color: var(--accent-color-1);
497
+ }
498
+
499
+ .flow-diagram {
500
+ position: relative;
501
+ width: 100%;
502
+ height: 100%;
503
+ }
504
+
505
+ .flow-node {
506
+ position: absolute;
507
+ width: 80px;
508
+ height: 80px;
509
+ border-radius: 50%;
510
+ background: rgba(255, 255, 255, 0.1);
511
+ border: 2px solid rgba(255, 255, 255, 0.2);
512
+ display: flex;
513
+ flex-direction: column;
514
+ align-items: center;
515
+ justify-content: center;
516
+ text-align: center;
517
+ transition: all 0.3s ease;
518
+ cursor: pointer;
519
+ }
520
+
521
+ .flow-node:hover {
522
+ transform: scale(1.1);
523
+ z-index: 10;
524
+ border-color: var(--accent-color-1);
525
+ }
526
+
527
+ .flow-node .icon {
528
+ font-size: 1.5rem;
529
+ margin-bottom: 0.3rem;
530
+ color: var(--accent-color-1);
531
+ }
532
+
533
+ .flow-node .label {
534
+ font-size: 0.8rem;
535
+ font-weight: bold;
536
+ }
537
+
538
+ .flow-node.investors {
539
+ top: 50px;
540
+ left: 50%;
541
+ transform: translateX(-50%);
542
+ }
543
+
544
+ .flow-node.token-pool {
545
+ top: 50%;
546
+ left: 50%;
547
+ transform: translate(-50%, -50%);
548
+ width: 100px;
549
+ height: 100px;
550
+ background: rgba(0, 224, 255, 0.1);
551
+ border-color: var(--accent-color-1);
552
+ }
553
+
554
+ .flow-node.infrastructure {
555
+ bottom: 50px;
556
+ left: 20%;
557
+ }
558
+
559
+ .flow-node.operations {
560
+ bottom: 50px;
561
+ right: 20%;
562
+ }
563
+
564
+ .flow-node.community {
565
+ top: 50%;
566
+ left: 20%;
567
+ transform: translateY(-50%);
568
+ }
569
+
570
+ .flow-node.reserve {
571
+ top: 50%;
572
+ right: 20%;
573
+ transform: translateY(-50%);
574
+ }
575
+
576
+ .flow-connection {
577
+ position: absolute;
578
+ height: 2px;
579
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.5), rgba(53, 242, 219, 0.5));
580
+ transform-origin: left center;
581
+ }
582
+
583
+ .flow-connection.investors-pool {
584
+ top: 90px;
585
+ left: 50%;
586
+ width: 100px;
587
+ transform: translateX(-50%) rotate(90deg);
588
+ }
589
+
590
+ .flow-connection.pool-infrastructure {
591
+ bottom: 150px;
592
+ left: 35%;
593
+ width: 150px;
594
+ transform: rotate(45deg);
595
+ }
596
+
597
+ .flow-connection.pool-operations {
598
+ bottom: 150px;
599
+ right: 35%;
600
+ width: 150px;
601
+ transform: rotate(-45deg);
602
+ }
603
+
604
+ .flow-connection.pool-community {
605
+ top: 50%;
606
+ left: 30%;
607
+ width: 150px;
608
+ }
609
+
610
+ .flow-connection.pool-reserve {
611
+ top: 50%;
612
+ right: 30%;
613
+ width: 150px;
614
+ transform: rotate(180deg);
615
+ }
616
+
617
+ .flow-particle {
618
+ position: absolute;
619
+ width: 6px;
620
+ height: 6px;
621
+ border-radius: 50%;
622
+ background: white;
623
+ animation: flowMove 3s linear infinite;
624
+ }
625
+
626
+ @keyframes flowMove {
627
+ 0% {
628
+ left: 0;
629
+ opacity: 0;
630
+ }
631
+ 10% {
632
+ opacity: 1;
633
+ }
634
+ 90% {
635
+ opacity: 1;
636
+ }
637
+ 100% {
638
+ left: calc(100% - 6px);
639
+ opacity: 0;
640
+ }
641
+ }
642
+
643
+ .token-transactions {
644
+ background: rgba(255, 255, 255, 0.05);
645
+ border-radius: 12px;
646
+ padding: 1.5rem;
647
+ border: 1px solid rgba(255, 255, 255, 0.1);
648
+ }
649
+
650
+ .transactions-title {
651
+ margin-top: 0;
652
+ margin-bottom: 1.5rem;
653
+ font-size: 1.2rem;
654
+ color: var(--accent-color-1);
655
+ }
656
+
657
+ .transaction-list {
658
+ list-style: none;
659
+ padding: 0;
660
+ margin: 0;
661
+ }
662
+
663
+ .transaction-item {
664
+ display: flex;
665
+ justify-content: space-between;
666
+ padding: 1rem 0;
667
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
668
+ }
669
+
670
+ .transaction-item:last-child {
671
+ border-bottom: none;
672
+ }
673
+
674
+ .transaction-details {
675
+ display: flex;
676
+ align-items: center;
677
+ }
678
+
679
+ .transaction-icon {
680
+ width: 40px;
681
+ height: 40px;
682
+ border-radius: 50%;
683
+ background: rgba(0, 224, 255, 0.1);
684
+ display: flex;
685
+ align-items: center;
686
+ justify-content: center;
687
+ margin-right: 1rem;
688
+ color: var(--accent-color-1);
689
+ }
690
+
691
+ .transaction-info h4 {
692
+ margin: 0;
693
+ margin-bottom: 0.3rem;
694
+ }
695
+
696
+ .transaction-info p {
697
+ margin: 0;
698
+ font-size: 0.8rem;
699
+ opacity: 0.7;
700
+ }
701
+
702
+ .transaction-amount {
703
+ font-weight: bold;
704
+ color: var(--accent-color-1);
705
+ }
706
+
707
+ .transaction-hash {
708
+ font-size: 0.8rem;
709
+ opacity: 0.7;
710
+ text-align: right;
711
+ margin-top: 0.3rem;
712
+ }
713
+
714
+ .tokenization-footer {
715
+ background: rgba(0, 0, 0, 0.3);
716
+ padding: 1rem;
717
+ display: flex;
718
+ justify-content: space-between;
719
+ align-items: center;
720
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
721
+ }
722
+
723
+ .tokenization-actions {
724
+ display: flex;
725
+ gap: 1rem;
726
+ }
727
+
728
+ .tokenization-actions button {
729
+ padding: 0.5rem 1rem;
730
+ border-radius: 4px;
731
+ background: transparent;
732
+ border: 1px solid var(--accent-color-1);
733
+ color: var(--accent-color-1);
734
+ cursor: pointer;
735
+ transition: all 0.3s ease;
736
+ }
737
+
738
+ .tokenization-actions button:hover {
739
+ background: rgba(0, 224, 255, 0.1);
740
+ }
741
+
742
+ .tokenization-actions button.primary {
743
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
744
+ color: #000;
745
+ border: none;
746
+ }
747
+
748
+ .tokenization-actions button.primary:hover {
749
+ transform: translateY(-3px);
750
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
751
+ }
752
+
753
+ .tokenization-info {
754
+ font-size: 0.9rem;
755
+ opacity: 0.7;
756
+ }
757
+ </style>
758
+ </head>
759
+ <body>
760
+ <div class="noise-overlay"></div>
761
+
762
+ <header>
763
+ <nav>
764
+ <div class="logo">UNITY FLEET</div>
765
+ <div class="nav-links">
766
+ <a href="../index.html#what-is-the-link">What is The Link</a>
767
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
768
+ <a href="../index.html#impact-equity">Impact & Equity</a>
769
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
770
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
771
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
772
+ </div>
773
+ <div class="mobile-nav-toggle">
774
+ <i class="fas fa-bars"></i>
775
+ </div>
776
+ </nav>
777
+ </header>
778
+
779
+ <main class="component-container">
780
+ <div class="component-header">
781
+ <h1>CHAINLINK TOKENIZATION</h1>
782
+ <p>Explore our innovative tokenization model that enables community ownership, transparent asset management, and sustainable funding for The Link charging infrastructure.</p>
783
+ </div>
784
+
785
+ <div class="component-content">
786
+ <div class="chainlink-demo-container">
787
+ <div class="tokenization-interface">
788
+ <div class="tokenization-header">
789
+ <h2>Unity Fleet Token Dashboard</h2>
790
+ <div class="network-status">
791
+ <div class="status-indicator"></div>
792
+ <span>Connected to ChainLink Network</span>
793
+ </div>
794
+ </div>
795
+
796
+ <div class="tokenization-nav">
797
+ <div class="nav-tab active" data-tab="overview">Token Overview</div>
798
+ <div class="nav-tab" data-tab="assets">Asset Tokenization</div>
799
+ <div class="nav-tab" data-tab="flow">Token Flow</div>
800
+ </div>
801
+
802
+ <div class="tokenization-body">
803
+ <!-- Token Overview Tab -->
804
+ <div class="tab-content active" id="overview-tab">
805
+ <div class="token-stats">
806
+ <div class="token-stat">
807
+ <div class="stat-value">10,000,000</div>
808
+ <div class="stat-label">Total Token Supply</div>
809
+ </div>
810
+ <div class="token-stat">
811
+ <div class="stat-value">4,250,000</div>
812
+ <div class="stat-label">Tokens in Circulation</div>
813
+ </div>
814
+ <div class="token-stat">
815
+ <div class="stat-value">$2.45</div>
816
+ <div class="stat-label">Current Token Value</div>
817
+ </div>
818
+ <div class="token-stat">
819
+ <div class="stat-value">1,250</div>
820
+ <div class="stat-label">Token Holders</div>
821
+ </div>
822
+ </div>
823
+
824
+ <div class="token-distribution">
825
+ <h3 class="distribution-title">Token Distribution</h3>
826
+ <div class="distribution-chart">
827
+ <div class="donut-chart">
828
+ <div class="donut-hole">
829
+ <div class="total-tokens">10M</div>
830
+ <div class="total-label">Total Tokens</div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ <div class="distribution-legend">
835
+ <div class="legend-item">
836
+ <div class="legend-color infrastructure"></div>
837
+ <div class="legend-text">Infrastructure <span class="legend-value">30%</span></div>
838
+ </div>
839
+ <div class="legend-item">
840
+ <div class="legend-color investors"></div>
841
+ <div class="legend-text">Investors <span class="legend-value">25%</span></div>
842
+ </div>
843
+ <div class="legend-item">
844
+ <div class="legend-color community"></div>
845
+ <div class="legend-text">Community <span class="legend-value">15%</span></div>
846
+ </div>
847
+ <div class="legend-item">
848
+ <div class="legend-color operations"></div>
849
+ <div class="legend-text">Operations <span class="legend-value">15%</span></div>
850
+ </div>
851
+ <div class="legend-item">
852
+ <div class="legend-color reserve"></div>
853
+ <div class="legend-text">Reserve <span class="legend-value">15%</span></div>
854
+ </div>
855
+ </div>
856
+ </div>
857
+ </div>
858
+
859
+ <!-- Asset Tokenization Tab -->
860
+ <div class="tab-content" id="assets-tab">
861
+ <div class="asset-categories">
862
+ <div class="asset-category">
863
+ <div class="category-header">
864
+ <div class="category-icon">
865
+ <i class="fas fa-charging-station"></i>
866
+ </div>
867
+ <div class="category-name">Charging Stations</div>
868
+ </div>
869
+ <div class="category-description">
870
+ Tokenized ownership of The Link charging infrastructure across Illinois.
871
+ </div>
872
+ <div class="category-stats">
873
+ <div>Total Assets: <span class="category-value">15</span></div>
874
+ <div>Total Value: <span class="category-value">$12.5M</span></div>
875
+ </div>
876
+ </div>
877
+
878
+ <div class="asset-category">
879
+ <div class="category-header">
880
+ <div class="category-icon">
881
+ <i class="fas fa-car"></i>
882
+ </div>
883
+ <div class="category-name">Vehicle Fleet</div>
884
+ </div>
885
+ <div class="category-description">
886
+ Tokenized ownership of the Unity Fleet electric vehicle inventory.
887
+ </div>
888
+ <div class="category-stats">
889
+ <div>Total Assets: <span class="category-value">42</span></div>
890
+ <div>Total Value: <span class="category-value">$3.8M</span></div>
891
+ </div>
892
+ </div>
893
+
894
+ <div class="asset-category">
895
+ <div class="category-header">
896
+ <div class="category-icon">
897
+ <i class="fas fa-solar-panel"></i>
898
+ </div>
899
+ <div class="category-name">Energy Infrastructure</div>
900
+ </div>
901
+ <div class="category-description">
902
+ Tokenized ownership of solar arrays and battery storage systems.
903
+ </div>
904
+ <div class="category-stats">
905
+ <div>Total Assets: <span class="category-value">8</span></div>
906
+ <div>Total Value: <span class="category-value">$5.2M</span></div>
907
+ </div>
908
+ </div>
909
+
910
+ <div class="asset-category">
911
+ <div class="category-header">
912
+ <div class="category-icon">
913
+ <i class="fas fa-building"></i>
914
+ </div>
915
+ <div class="category-name">Real Estate</div>
916
+ </div>
917
+ <div class="category-description">
918
+ Tokenized ownership of The Link hub properties and land.
919
+ </div>
920
+ <div class="category-stats">
921
+ <div>Total Assets: <span class="category-value">12</span></div>
922
+ <div>Total Value: <span class="category-value">$8.4M</span></div>
923
+ </div>
924
+ </div>
925
+ </div>
926
+
927
+ <div class="tokenized-assets">
928
+ <div class="assets-title">
929
+ Tokenized Assets
930
+ <div class="filter-dropdown">
931
+ <button class="filter-button">
932
+ Filter by Category <i class="fas fa-chevron-down"></i>
933
+ </button>
934
+ <div class="filter-dropdown-content">
935
+ <a href="#">All Categories</a>
936
+ <a href="#">Charging Stations</a>
937
+ <a href="#">Vehicle Fleet</a>
938
+ <a href="#">Energy Infrastructure</a>
939
+ <a href="#">Real Estate</a>
940
+ </div>
941
+ </div>
942
+ </div>
943
+
944
+ <div class="assets-grid">
945
+ <div class="asset-card">
946
+ <div class="asset-image">
947
+ <i class="fas fa-charging-station"></i>
948
+ </div>
949
+ <div class="asset-details">
950
+ <div class="asset-name">Chicago Downtown Hub</div>
951
+ <div class="asset-info">Charging Station • 8 Ports</div>
952
+ <div class="asset-value">1,200,000 Tokens</div>
953
+ </div>
954
+ </div>
955
+
956
+ <div class="asset-card">
957
+ <div class="asset-image">
958
+ <i class="fas fa-charging-station"></i>
959
+ </div>
960
+ <div class="asset-details">
961
+ <div class="asset-name">Springfield Central Hub</div>
962
+ <div class="asset-info">Charging Station • 6 Ports</div>
963
+ <div class="asset-value">850,000 Tokens</div>
964
+ </div>
965
+ </div>
966
+
967
+ <div class="asset-card">
968
+ <div class="asset-image">
969
+ <i class="fas fa-car"></i>
970
+ </div>
971
+ <div class="asset-details">
972
+ <div class="asset-name">Tesla Model 3 Fleet</div>
973
+ <div class="asset-info">Vehicle Fleet • 12 Vehicles</div>
974
+ <div class="asset-value">720,000 Tokens</div>
975
+ </div>
976
+ </div>
977
+
978
+ <div class="asset-card">
979
+ <div class="asset-image">
980
+ <i class="fas fa-solar-panel"></i>
981
+ </div>
982
+ <div class="asset-details">
983
+ <div class="asset-name">Champaign Solar Array</div>
984
+ <div class="asset-info">Energy • 500 kW Capacity</div>
985
+ <div class="asset-value">950,000 Tokens</div>
986
+ </div>
987
+ </div>
988
+
989
+ <div class="asset-card">
990
+ <div class="asset-image">
991
+ <i class="fas fa-car"></i>
992
+ </div>
993
+ <div class="asset-details">
994
+ <div class="asset-name">Rivian R1S Fleet</div>
995
+ <div class="asset-info">Vehicle Fleet • 8 Vehicles</div>
996
+ <div class="asset-value">680,000 Tokens</div>
997
+ </div>
998
+ </div>
999
+
1000
+ <div class="asset-card">
1001
+ <div class="asset-image">
1002
+ <i class="fas fa-building"></i>
1003
+ </div>
1004
+ <div class="asset-details">
1005
+ <div class="asset-name">Bloomington Property</div>
1006
+ <div class="asset-info">Real Estate • 2.5 Acres</div>
1007
+ <div class="asset-value">1,050,000 Tokens</div>
1008
+ </div>
1009
+ </div>
1010
+ </div>
1011
+ </div>
1012
+ </div>
1013
+
1014
+ <!-- Token Flow Tab -->
1015
+ <div class="tab-content" id="flow-tab">
1016
+ <div class="token-flow-visualization">
1017
+ <h3 class="flow-title">Token Flow Visualization</h3>
1018
+ <div class="flow-diagram">
1019
+ <div class="flow-node investors">
1020
+ <div class="icon"><i class="fas fa-users"></i></div>
1021
+ <div class="label">Investors</div>
1022
+ </div>
1023
+
1024
+ <div class="flow-node token-pool">
1025
+ <div class="icon"><i class="fas fa-coins"></i></div>
1026
+ <div class="label">Token Pool</div>
1027
+ </div>
1028
+
1029
+ <div class="flow-node infrastructure">
1030
+ <div class="icon"><i class="fas fa-charging-station"></i></div>
1031
+ <div class="label">Infrastructure</div>
1032
+ </div>
1033
+
1034
+ <div class="flow-node operations">
1035
+ <div class="icon"><i class="fas fa-cogs"></i></div>
1036
+ <div class="label">Operations</div>
1037
+ </div>
1038
+
1039
+ <div class="flow-node community">
1040
+ <div class="icon"><i class="fas fa-hands-helping"></i></div>
1041
+ <div class="label">Community</div>
1042
+ </div>
1043
+
1044
+ <div class="flow-node reserve">
1045
+ <div class="icon"><i class="fas fa-vault"></i></div>
1046
+ <div class="label">Reserve</div>
1047
+ </div>
1048
+
1049
+ <div class="flow-connection investors-pool">
1050
+ <div class="flow-particle" style="animation-delay: 0s;"></div>
1051
+ <div class="flow-particle" style="animation-delay: 1s;"></div>
1052
+ <div class="flow-particle" style="animation-delay: 2s;"></div>
1053
+ </div>
1054
+
1055
+ <div class="flow-connection pool-infrastructure">
1056
+ <div class="flow-particle" style="animation-delay: 0.2s;"></div>
1057
+ <div class="flow-particle" style="animation-delay: 1.2s;"></div>
1058
+ <div class="flow-particle" style="animation-delay: 2.2s;"></div>
1059
+ </div>
1060
+
1061
+ <div class="flow-connection pool-operations">
1062
+ <div class="flow-particle" style="animation-delay: 0.4s;"></div>
1063
+ <div class="flow-particle" style="animation-delay: 1.4s;"></div>
1064
+ <div class="flow-particle" style="animation-delay: 2.4s;"></div>
1065
+ </div>
1066
+
1067
+ <div class="flow-connection pool-community">
1068
+ <div class="flow-particle" style="animation-delay: 0.6s;"></div>
1069
+ <div class="flow-particle" style="animation-delay: 1.6s;"></div>
1070
+ <div class="flow-particle" style="animation-delay: 2.6s;"></div>
1071
+ </div>
1072
+
1073
+ <div class="flow-connection pool-reserve">
1074
+ <div class="flow-particle" style="animation-delay: 0.8s;"></div>
1075
+ <div class="flow-particle" style="animation-delay: 1.8s;"></div>
1076
+ <div class="flow-particle" style="animation-delay: 2.8s;"></div>
1077
+ </div>
1078
+ </div>
1079
+ </div>
1080
+
1081
+ <div class="token-transactions">
1082
+ <h3 class="transactions-title">Recent Transactions</h3>
1083
+ <ul class="transaction-list">
1084
+ <li class="transaction-item">
1085
+ <div class="transaction-details">
1086
+ <div class="transaction-icon">
1087
+ <i class="fas fa-exchange-alt"></i>
1088
+ </div>
1089
+ <div class="transaction-info">
1090
+ <h4>Token Allocation</h4>
1091
+ <p>Infrastructure Fund</p>
1092
+ </div>
1093
+ </div>
1094
+ <div>
1095
+ <div class="transaction-amount">250,000 Tokens</div>
1096
+ <div class="transaction-hash">0x7a2d...f83e</div>
1097
+ </div>
1098
+ </li>
1099
+
1100
+ <li class="transaction-item">
1101
+ <div class="transaction-details">
1102
+ <div class="transaction-icon">
1103
+ <i class="fas fa-user-plus"></i>
1104
+ </div>
1105
+ <div class="transaction-info">
1106
+ <h4>New Investor</h4>
1107
+ <p>Community Investment Group</p>
1108
+ </div>
1109
+ </div>
1110
+ <div>
1111
+ <div class="transaction-amount">125,000 Tokens</div>
1112
+ <div class="transaction-hash">0x3b8c...a21d</div>
1113
+ </div>
1114
+ </li>
1115
+
1116
+ <li class="transaction-item">
1117
+ <div class="transaction-details">
1118
+ <div class="transaction-icon">
1119
+ <i class="fas fa-plus-circle"></i>
1120
+ </div>
1121
+ <div class="transaction-info">
1122
+ <h4>Asset Addition</h4>
1123
+ <p>Peoria Charging Hub</p>
1124
+ </div>
1125
+ </div>
1126
+ <div>
1127
+ <div class="transaction-amount">750,000 Tokens</div>
1128
+ <div class="transaction-hash">0x9e4f...c72b</div>
1129
+ </div>
1130
+ </li>
1131
+
1132
+ <li class="transaction-item">
1133
+ <div class="transaction-details">
1134
+ <div class="transaction-icon">
1135
+ <i class="fas fa-hand-holding-usd"></i>
1136
+ </div>
1137
+ <div class="transaction-info">
1138
+ <h4>Dividend Distribution</h4>
1139
+ <p>Q2 2025 Earnings</p>
1140
+ </div>
1141
+ </div>
1142
+ <div>
1143
+ <div class="transaction-amount">180,000 Tokens</div>
1144
+ <div class="transaction-hash">0x5d1a...b94c</div>
1145
+ </div>
1146
+ </li>
1147
+ </ul>
1148
+ </div>
1149
+ </div>
1150
+ </div>
1151
+
1152
+ <div class="tokenization-footer">
1153
+ <div class="tokenization-actions">
1154
+ <button>View on ChainLink Explorer</button>
1155
+ <button class="primary">Connect Wallet</button>
1156
+ </div>
1157
+ <div class="tokenization-info">
1158
+ Last Block: #14,532,891 | Gas Price: 25 Gwei
1159
+ </div>
1160
+ </div>
1161
+ </div>
1162
+ </div>
1163
+ </div>
1164
+
1165
+ <div class="component-features">
1166
+ <h2>Key Features</h2>
1167
+ <ul class="features-list">
1168
+ <li>Transparent token distribution with real-time visualization of allocation across stakeholders</li>
1169
+ <li>Asset tokenization system for fractional ownership of charging infrastructure, vehicles, and energy systems</li>
1170
+ <li>Interactive token flow diagram showing movement between investors, infrastructure, operations, and community</li>
1171
+ <li>ChainLink integration for secure, transparent, and auditable token transactions</li>
1172
+ <li>Community ownership model enabling local investment in charging infrastructure</li>
1173
+ <li>Dividend distribution system for sharing revenue with token holders</li>
1174
+ <li>Asset management dashboard for tracking tokenized infrastructure components</li>
1175
+ </ul>
1176
+ </div>
1177
+
1178
+ <a href="../index.html#mvp-showcase" class="back-to-home">
1179
+ <i class="fas fa-arrow-left"></i> Back to MVP Showcase
1180
+ </a>
1181
+ </main>
1182
+
1183
+ <footer>
1184
+ <div class="container">
1185
+ <div class="footer-content">
1186
+ <div class="footer-logo">
1187
+ <div class="logo">UNITY FLEET</div>
1188
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
1189
+ </div>
1190
+
1191
+ <div class="footer-links">
1192
+ <div class="link-column">
1193
+ <h4>Navigation</h4>
1194
+ <a href="../index.html#what-is-the-link">What is The Link</a>
1195
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
1196
+ <a href="../index.html#impact-equity">Impact & Equity</a>
1197
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
1198
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
1199
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
1200
+ </div>
1201
+
1202
+ <div class="link-column">
1203
+ <h4>Contact</h4>
1204
+ <a href="mailto:[email protected]">[email protected]</a>
1205
+ <a href="tel:+12175551234">+1 (217) 555-1234</a>
1206
+ <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
1207
+ </div>
1208
+
1209
+ <div class="link-column">
1210
+ <h4>Legal</h4>
1211
+ <a href="#">Privacy Policy</a>
1212
+ <a href="#">Terms of Service</a>
1213
+ <a href="#">Accessibility</a>
1214
+ </div>
1215
+ </div>
1216
+
1217
+ <div class="footer-social">
1218
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
1219
+ <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
1220
+ <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
1221
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
1222
+ </div>
1223
+ </div>
1224
+
1225
+ <div class="footer-bottom">
1226
+ <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
1227
+ </div>
1228
+ </div>
1229
+ </footer>
1230
+
1231
+ <script>
1232
+ // Mobile navigation toggle
1233
+ document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
1234
+ document.querySelector('.nav-links').classList.toggle('active');
1235
+ this.innerHTML = document.querySelector('.nav-links').classList.contains('active')
1236
+ ? '<i class="fas fa-times"></i>'
1237
+ : '<i class="fas fa-bars"></i>';
1238
+ });
1239
+
1240
+ // Tokenization dashboard tab navigation
1241
+ document.addEventListener('DOMContentLoaded', function() {
1242
+ const navTabs = document.querySelectorAll('.nav-tab');
1243
+ const tabContents = document.querySelectorAll('.tab-content');
1244
+
1245
+ navTabs.forEach(tab => {
1246
+ tab.addEventListener('click', function() {
1247
+ // Remove active class from all tabs
1248
+ navTabs.forEach(t => t.classList.remove('active'));
1249
+
1250
+ // Add active class to clicked tab
1251
+ this.classList.add('active');
1252
+
1253
+ // Hide all tab contents
1254
+ tabContents.forEach(content => content.classList.remove('active'));
1255
+
1256
+ // Show selected tab content
1257
+ const tabId = this.getAttribute('data-tab') + '-tab';
1258
+ document.getElementById(tabId).classList.add('active');
1259
+ });
1260
+ });
1261
+
1262
+ // Flow node hover effects
1263
+ const flowNodes = document.querySelectorAll('.flow-node');
1264
+ flowNodes.forEach(node => {
1265
+ node.addEventListener('mouseenter', function() {
1266
+ this.style.transform = 'scale(1.1)';
1267
+ this.style.zIndex = '10';
1268
+ this.style.borderColor = 'var(--accent-color-1)';
1269
+ });
1270
+
1271
+ node.addEventListener('mouseleave', function() {
1272
+ if (!this.classList.contains('token-pool')) {
1273
+ this.style.transform = '';
1274
+ this.style.zIndex = '';
1275
+ this.style.borderColor = '';
1276
+ } else {
1277
+ this.style.transform = 'translate(-50%, -50%)';
1278
+ }
1279
+ });
1280
+ });
1281
+
1282
+ // Asset card hover effects
1283
+ const assetCards = document.querySelectorAll('.asset-card');
1284
+ assetCards.forEach(card => {
1285
+ card.addEventListener('click', function() {
1286
+ alert('Asset details would open in the production version.');
1287
+ });
1288
+ });
1289
+
1290
+ // Button actions
1291
+ document.querySelector('.tokenization-actions .primary').addEventListener('click', function() {
1292
+ alert('Wallet connection would be implemented in the production version.');
1293
+ });
1294
+
1295
+ document.querySelector('.tokenization-actions button:not(.primary)').addEventListener('click', function() {
1296
+ alert('ChainLink Explorer would open in the production version.');
1297
+ });
1298
+
1299
+ // Category hover effects
1300
+ const assetCategories = document.querySelectorAll('.asset-category');
1301
+ assetCategories.forEach(category => {
1302
+ category.addEventListener('click', function() {
1303
+ alert('Category details would open in the production version.');
1304
+ });
1305
+ });
1306
+ });
1307
+ </script>
1308
+ </body>
1309
+ </html>
charging-hub.html ADDED
@@ -0,0 +1,616 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Unity Fleet - Charging Hub Interface</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* MVP Component specific styles */
14
+ .component-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 2rem;
18
+ }
19
+
20
+ .component-header {
21
+ text-align: center;
22
+ margin-bottom: 3rem;
23
+ }
24
+
25
+ .component-header h1 {
26
+ font-size: 2.5rem;
27
+ margin-bottom: 1rem;
28
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ -webkit-text-fill-color: transparent;
32
+ }
33
+
34
+ .component-header p {
35
+ font-size: 1.2rem;
36
+ max-width: 800px;
37
+ margin: 0 auto;
38
+ opacity: 0.8;
39
+ }
40
+
41
+ .component-content {
42
+ background: var(--glass-bg);
43
+ border: 1px solid var(--glass-border);
44
+ border-radius: 16px;
45
+ padding: 2rem;
46
+ margin-bottom: 3rem;
47
+ backdrop-filter: blur(10px);
48
+ }
49
+
50
+ .back-to-home {
51
+ display: inline-block;
52
+ margin-top: 2rem;
53
+ padding: 0.8rem 1.5rem;
54
+ background: transparent;
55
+ border: 1px solid var(--accent-color-1);
56
+ color: var(--accent-color-1);
57
+ border-radius: 4px;
58
+ font-family: var(--font-primary);
59
+ font-weight: 500;
60
+ text-transform: uppercase;
61
+ letter-spacing: 1px;
62
+ transition: all var(--transition-medium);
63
+ }
64
+
65
+ .back-to-home:hover {
66
+ background: rgba(0, 224, 255, 0.1);
67
+ transform: translateY(-3px);
68
+ }
69
+
70
+ /* Charging Hub specific styles */
71
+ .charging-hub-container {
72
+ display: flex;
73
+ flex-direction: column;
74
+ align-items: center;
75
+ padding: 1rem;
76
+ }
77
+
78
+ .hub-interface {
79
+ width: 100%;
80
+ max-width: 800px;
81
+ background-color: #0B0B0F;
82
+ border-radius: 16px;
83
+ overflow: hidden;
84
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
85
+ border: 1px solid rgba(0, 224, 255, 0.3);
86
+ margin-bottom: 2rem;
87
+ }
88
+
89
+ .hub-header {
90
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
91
+ padding: 1.5rem;
92
+ display: flex;
93
+ justify-content: space-between;
94
+ align-items: center;
95
+ }
96
+
97
+ .hub-header h2 {
98
+ margin: 0;
99
+ font-size: 1.5rem;
100
+ }
101
+
102
+ .hub-status {
103
+ display: flex;
104
+ align-items: center;
105
+ }
106
+
107
+ .status-indicator {
108
+ width: 12px;
109
+ height: 12px;
110
+ border-radius: 50%;
111
+ background-color: #4CAF50;
112
+ margin-right: 8px;
113
+ }
114
+
115
+ .hub-body {
116
+ padding: 2rem;
117
+ }
118
+
119
+ .hub-section {
120
+ margin-bottom: 2rem;
121
+ }
122
+
123
+ .hub-section h3 {
124
+ margin-top: 0;
125
+ margin-bottom: 1rem;
126
+ font-size: 1.2rem;
127
+ color: var(--accent-color-1);
128
+ }
129
+
130
+ .charging-stations {
131
+ display: grid;
132
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
133
+ gap: 1rem;
134
+ }
135
+
136
+ .station-card {
137
+ background: rgba(255, 255, 255, 0.05);
138
+ border-radius: 12px;
139
+ padding: 1rem;
140
+ border: 1px solid rgba(255, 255, 255, 0.1);
141
+ transition: all 0.3s ease;
142
+ }
143
+
144
+ .station-card:hover {
145
+ transform: translateY(-5px);
146
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
147
+ border-color: var(--accent-color-1);
148
+ }
149
+
150
+ .station-card.available {
151
+ border-left: 4px solid #4CAF50;
152
+ }
153
+
154
+ .station-card.in-use {
155
+ border-left: 4px solid #FFC107;
156
+ }
157
+
158
+ .station-card.unavailable {
159
+ border-left: 4px solid #F44336;
160
+ opacity: 0.7;
161
+ }
162
+
163
+ .station-header {
164
+ display: flex;
165
+ justify-content: space-between;
166
+ align-items: center;
167
+ margin-bottom: 0.5rem;
168
+ }
169
+
170
+ .station-header h4 {
171
+ margin: 0;
172
+ font-size: 1rem;
173
+ }
174
+
175
+ .station-type {
176
+ font-size: 0.8rem;
177
+ opacity: 0.7;
178
+ margin-bottom: 0.5rem;
179
+ }
180
+
181
+ .station-details {
182
+ font-size: 0.9rem;
183
+ }
184
+
185
+ .station-details p {
186
+ margin: 0.3rem 0;
187
+ }
188
+
189
+ .station-actions {
190
+ margin-top: 1rem;
191
+ display: flex;
192
+ justify-content: center;
193
+ }
194
+
195
+ .station-actions button {
196
+ padding: 0.5rem 1rem;
197
+ font-size: 0.8rem;
198
+ border-radius: 4px;
199
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
200
+ color: #000;
201
+ border: none;
202
+ cursor: pointer;
203
+ width: 100%;
204
+ }
205
+
206
+ .station-actions button:disabled {
207
+ background: rgba(255, 255, 255, 0.1);
208
+ color: rgba(255, 255, 255, 0.5);
209
+ cursor: not-allowed;
210
+ }
211
+
212
+ .hub-amenities {
213
+ display: grid;
214
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
215
+ gap: 1rem;
216
+ }
217
+
218
+ .amenity-card {
219
+ background: rgba(255, 255, 255, 0.05);
220
+ border-radius: 12px;
221
+ padding: 1rem;
222
+ border: 1px solid rgba(255, 255, 255, 0.1);
223
+ text-align: center;
224
+ transition: all 0.3s ease;
225
+ }
226
+
227
+ .amenity-card:hover {
228
+ transform: translateY(-5px);
229
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
230
+ }
231
+
232
+ .amenity-icon {
233
+ font-size: 2rem;
234
+ margin-bottom: 0.5rem;
235
+ color: var(--accent-color-1);
236
+ }
237
+
238
+ .amenity-name {
239
+ font-weight: bold;
240
+ margin-bottom: 0.5rem;
241
+ }
242
+
243
+ .amenity-description {
244
+ font-size: 0.9rem;
245
+ opacity: 0.8;
246
+ }
247
+
248
+ .hub-footer {
249
+ background: rgba(0, 0, 0, 0.3);
250
+ padding: 1rem;
251
+ display: flex;
252
+ justify-content: space-between;
253
+ align-items: center;
254
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
255
+ }
256
+
257
+ .hub-footer-links {
258
+ display: flex;
259
+ }
260
+
261
+ .hub-footer-links a {
262
+ margin-right: 1rem;
263
+ color: var(--accent-color-1);
264
+ font-size: 0.9rem;
265
+ }
266
+
267
+ .hub-footer-info {
268
+ font-size: 0.9rem;
269
+ opacity: 0.7;
270
+ }
271
+
272
+ /* Energy usage meter */
273
+ .energy-meter {
274
+ width: 100%;
275
+ height: 8px;
276
+ background: rgba(255, 255, 255, 0.1);
277
+ border-radius: 4px;
278
+ overflow: hidden;
279
+ margin-top: 0.5rem;
280
+ }
281
+
282
+ .energy-meter-fill {
283
+ height: 100%;
284
+ background: linear-gradient(90deg, #4CAF50, #FFC107, #F44336);
285
+ width: 0%;
286
+ transition: width 1s ease;
287
+ }
288
+ </style>
289
+ </head>
290
+ <body>
291
+ <div class="noise-overlay"></div>
292
+
293
+ <header>
294
+ <nav>
295
+ <div class="logo">UNITY FLEET</div>
296
+ <div class="nav-links">
297
+ <a href="../index.html#what-is-the-link">What is The Link</a>
298
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
299
+ <a href="../index.html#impact-equity">Impact & Equity</a>
300
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
301
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
302
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
303
+ </div>
304
+ <div class="mobile-nav-toggle">
305
+ <i class="fas fa-bars"></i>
306
+ </div>
307
+ </nav>
308
+ </header>
309
+
310
+ <main class="component-container">
311
+ <div class="component-header">
312
+ <h1>CHARGING HUB INTERFACE</h1>
313
+ <p>Experience The Link charging stations with our interactive hub interface, featuring real-time availability, energy monitoring, and premium amenities.</p>
314
+ </div>
315
+
316
+ <div class="component-content">
317
+ <div class="charging-hub-container">
318
+ <div class="hub-interface">
319
+ <div class="hub-header">
320
+ <h2>The Link - Downtown Springfield</h2>
321
+ <div class="hub-status">
322
+ <div class="status-indicator"></div>
323
+ <span>Online | 6/8 Stations Available</span>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="hub-body">
328
+ <div class="hub-section">
329
+ <h3>Charging Stations</h3>
330
+ <div class="charging-stations">
331
+ <div class="station-card available">
332
+ <div class="station-header">
333
+ <h4>Station 1</h4>
334
+ <span>Available</span>
335
+ </div>
336
+ <div class="station-type">DC Fast Charger | 350kW</div>
337
+ <div class="station-details">
338
+ <p>Power Output: 350kW</p>
339
+ <p>Connector: CCS</p>
340
+ </div>
341
+ <div class="station-actions">
342
+ <button>Reserve</button>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="station-card available">
347
+ <div class="station-header">
348
+ <h4>Station 2</h4>
349
+ <span>Available</span>
350
+ </div>
351
+ <div class="station-type">DC Fast Charger | 350kW</div>
352
+ <div class="station-details">
353
+ <p>Power Output: 350kW</p>
354
+ <p>Connector: CCS</p>
355
+ </div>
356
+ <div class="station-actions">
357
+ <button>Reserve</button>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="station-card in-use">
362
+ <div class="station-header">
363
+ <h4>Station 3</h4>
364
+ <span>In Use</span>
365
+ </div>
366
+ <div class="station-type">DC Fast Charger | 350kW</div>
367
+ <div class="station-details">
368
+ <p>Current User: Tesla Model Y</p>
369
+ <p>Est. Completion: 15 min</p>
370
+ <div class="energy-meter">
371
+ <div class="energy-meter-fill" style="width: 75%;"></div>
372
+ </div>
373
+ </div>
374
+ <div class="station-actions">
375
+ <button disabled>In Use</button>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="station-card available">
380
+ <div class="station-header">
381
+ <h4>Station 4</h4>
382
+ <span>Available</span>
383
+ </div>
384
+ <div class="station-type">DC Fast Charger | 350kW</div>
385
+ <div class="station-details">
386
+ <p>Power Output: 350kW</p>
387
+ <p>Connector: CCS</p>
388
+ </div>
389
+ <div class="station-actions">
390
+ <button>Reserve</button>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="station-card available">
395
+ <div class="station-header">
396
+ <h4>Station 5</h4>
397
+ <span>Available</span>
398
+ </div>
399
+ <div class="station-type">Level 2 | 19.2kW</div>
400
+ <div class="station-details">
401
+ <p>Power Output: 19.2kW</p>
402
+ <p>Connector: J1772</p>
403
+ </div>
404
+ <div class="station-actions">
405
+ <button>Reserve</button>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="station-card available">
410
+ <div class="station-header">
411
+ <h4>Station 6</h4>
412
+ <span>Available</span>
413
+ </div>
414
+ <div class="station-type">Level 2 | 19.2kW</div>
415
+ <div class="station-details">
416
+ <p>Power Output: 19.2kW</p>
417
+ <p>Connector: J1772</p>
418
+ </div>
419
+ <div class="station-actions">
420
+ <button>Reserve</button>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="station-card in-use">
425
+ <div class="station-header">
426
+ <h4>Station 7</h4>
427
+ <span>In Use</span>
428
+ </div>
429
+ <div class="station-type">Level 2 | 19.2kW</div>
430
+ <div class="station-details">
431
+ <p>Current User: Rivian R1T</p>
432
+ <p>Est. Completion: 45 min</p>
433
+ <div class="energy-meter">
434
+ <div class="energy-meter-fill" style="width: 40%;"></div>
435
+ </div>
436
+ </div>
437
+ <div class="station-actions">
438
+ <button disabled>In Use</button>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="station-card unavailable">
443
+ <div class="station-header">
444
+ <h4>Station 8</h4>
445
+ <span>Maintenance</span>
446
+ </div>
447
+ <div class="station-type">Level 2 | 19.2kW</div>
448
+ <div class="station-details">
449
+ <p>Status: Under Maintenance</p>
450
+ <p>Est. Return: 2 hours</p>
451
+ </div>
452
+ <div class="station-actions">
453
+ <button disabled>Unavailable</button>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="hub-section">
460
+ <h3>Hub Amenities</h3>
461
+ <div class="hub-amenities">
462
+ <div class="amenity-card">
463
+ <div class="amenity-icon">
464
+ <i class="fas fa-coffee"></i>
465
+ </div>
466
+ <div class="amenity-name">Café Lounge</div>
467
+ <div class="amenity-description">Enjoy premium coffee and snacks while you wait</div>
468
+ </div>
469
+
470
+ <div class="amenity-card">
471
+ <div class="amenity-icon">
472
+ <i class="fas fa-wifi"></i>
473
+ </div>
474
+ <div class="amenity-name">High-Speed WiFi</div>
475
+ <div class="amenity-description">Free gigabit internet access for all users</div>
476
+ </div>
477
+
478
+ <div class="amenity-card">
479
+ <div class="amenity-icon">
480
+ <i class="fas fa-laptop"></i>
481
+ </div>
482
+ <div class="amenity-name">Work Pods</div>
483
+ <div class="amenity-description">Private workspaces with power and connectivity</div>
484
+ </div>
485
+
486
+ <div class="amenity-card">
487
+ <div class="amenity-icon">
488
+ <i class="fas fa-shopping-bag"></i>
489
+ </div>
490
+ <div class="amenity-name">Mini Market</div>
491
+ <div class="amenity-description">Convenience store with essentials and local products</div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="hub-footer">
498
+ <div class="hub-footer-links">
499
+ <a href="#">Hub Map</a>
500
+ <a href="#">Report Issue</a>
501
+ <a href="#">Contact Staff</a>
502
+ </div>
503
+ <div class="hub-footer-info">
504
+ Current Energy Source: 85% Solar | 15% Grid
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="component-features">
512
+ <h2>Key Features</h2>
513
+ <ul class="features-list">
514
+ <li>Real-time charging station status and availability monitoring</li>
515
+ <li>Reservation system for securing charging spots in advance</li>
516
+ <li>Energy usage tracking with visual indicators of charging progress</li>
517
+ <li>Integrated payment processing with subscription recognition</li>
518
+ <li>Interactive map of hub layout and amenities</li>
519
+ <li>Live energy source tracking showing renewable vs. grid power</li>
520
+ <li>Digital access to premium lounge services and work spaces</li>
521
+ </ul>
522
+ </div>
523
+
524
+ <a href="../index.html#mvp-showcase" class="back-to-home">
525
+ <i class="fas fa-arrow-left"></i> Back to MVP Showcase
526
+ </a>
527
+ </main>
528
+
529
+ <footer>
530
+ <div class="container">
531
+ <div class="footer-content">
532
+ <div class="footer-logo">
533
+ <div class="logo">UNITY FLEET</div>
534
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
535
+ </div>
536
+
537
+ <div class="footer-links">
538
+ <div class="link-column">
539
+ <h4>Navigation</h4>
540
+ <a href="../index.html#what-is-the-link">What is The Link</a>
541
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
542
+ <a href="../index.html#impact-equity">Impact & Equity</a>
543
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
544
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
545
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
546
+ </div>
547
+
548
+ <div class="link-column">
549
+ <h4>Contact</h4>
550
+ <a href="mailto:[email protected]">[email protected]</a>
551
+ <a href="tel:+12175551234">+1 (217) 555-1234</a>
552
+ <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
553
+ </div>
554
+
555
+ <div class="link-column">
556
+ <h4>Legal</h4>
557
+ <a href="#">Privacy Policy</a>
558
+ <a href="#">Terms of Service</a>
559
+ <a href="#">Accessibility</a>
560
+ </div>
561
+ </div>
562
+
563
+ <div class="footer-social">
564
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
565
+ <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
566
+ <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
567
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
568
+ </div>
569
+ </div>
570
+
571
+ <div class="footer-bottom">
572
+ <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
573
+ </div>
574
+ </div>
575
+ </footer>
576
+
577
+ <script>
578
+ // Mobile navigation toggle
579
+ document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
580
+ document.querySelector('.nav-links').classList.toggle('active');
581
+ this.innerHTML = document.querySelector('.nav-links').classList.contains('active')
582
+ ? '<i class="fas fa-times"></i>'
583
+ : '<i class="fas fa-bars"></i>';
584
+ });
585
+
586
+ // Charging station animation
587
+ document.addEventListener('DOMContentLoaded', function() {
588
+ // Animate energy meters
589
+ const energyMeters = document.querySelectorAll('.energy-meter-fill');
590
+ energyMeters.forEach(meter => {
591
+ const currentWidth = meter.style.width;
592
+ meter.style.width = '0%';
593
+ setTimeout(() => {
594
+ meter.style.width = currentWidth;
595
+ }, 500);
596
+ });
597
+
598
+ // Add hover effects to station cards
599
+ const stationCards = document.querySelectorAll('.station-card');
600
+ stationCards.forEach(card => {
601
+ card.addEventListener('mouseenter', function() {
602
+ if (!this.classList.contains('unavailable')) {
603
+ this.style.transform = 'translateY(-10px)';
604
+ this.style.boxShadow = '0 15px 30px rgba(0, 224, 255, 0.2)';
605
+ }
606
+ });
607
+
608
+ card.addEventListener('mouseleave', function() {
609
+ this.style.transform = '';
610
+ this.style.boxShadow = '';
611
+ });
612
+ });
613
+ });
614
+ </script>
615
+ </body>
616
+ </html>
deployment-map.html ADDED
@@ -0,0 +1,833 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Unity Fleet - Deployment Map</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* MVP Component specific styles */
14
+ .component-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 2rem;
18
+ }
19
+
20
+ .component-header {
21
+ text-align: center;
22
+ margin-bottom: 3rem;
23
+ }
24
+
25
+ .component-header h1 {
26
+ font-size: 2.5rem;
27
+ margin-bottom: 1rem;
28
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ -webkit-text-fill-color: transparent;
32
+ }
33
+
34
+ .component-header p {
35
+ font-size: 1.2rem;
36
+ max-width: 800px;
37
+ margin: 0 auto;
38
+ opacity: 0.8;
39
+ }
40
+
41
+ .component-content {
42
+ background: var(--glass-bg);
43
+ border: 1px solid var(--glass-border);
44
+ border-radius: 16px;
45
+ padding: 2rem;
46
+ margin-bottom: 3rem;
47
+ backdrop-filter: blur(10px);
48
+ }
49
+
50
+ .back-to-home {
51
+ display: inline-block;
52
+ margin-top: 2rem;
53
+ padding: 0.8rem 1.5rem;
54
+ background: transparent;
55
+ border: 1px solid var(--accent-color-1);
56
+ color: var(--accent-color-1);
57
+ border-radius: 4px;
58
+ font-family: var(--font-primary);
59
+ font-weight: 500;
60
+ text-transform: uppercase;
61
+ letter-spacing: 1px;
62
+ transition: all var(--transition-medium);
63
+ }
64
+
65
+ .back-to-home:hover {
66
+ background: rgba(0, 224, 255, 0.1);
67
+ transform: translateY(-3px);
68
+ }
69
+
70
+ /* Deployment Map specific styles */
71
+ .deployment-map-container {
72
+ display: flex;
73
+ flex-direction: column;
74
+ align-items: center;
75
+ padding: 1rem;
76
+ }
77
+
78
+ .map-interface {
79
+ width: 100%;
80
+ max-width: 900px;
81
+ background-color: #0B0B0F;
82
+ border-radius: 16px;
83
+ overflow: hidden;
84
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
85
+ border: 1px solid rgba(0, 224, 255, 0.3);
86
+ margin-bottom: 2rem;
87
+ }
88
+
89
+ .map-header {
90
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
91
+ padding: 1.5rem;
92
+ display: flex;
93
+ justify-content: space-between;
94
+ align-items: center;
95
+ }
96
+
97
+ .map-header h2 {
98
+ margin: 0;
99
+ font-size: 1.5rem;
100
+ }
101
+
102
+ .map-controls {
103
+ display: flex;
104
+ gap: 1rem;
105
+ }
106
+
107
+ .map-control-btn {
108
+ padding: 0.5rem 1rem;
109
+ background: rgba(255, 255, 255, 0.1);
110
+ border: 1px solid rgba(255, 255, 255, 0.2);
111
+ border-radius: 4px;
112
+ color: white;
113
+ cursor: pointer;
114
+ transition: all 0.3s ease;
115
+ }
116
+
117
+ .map-control-btn:hover {
118
+ background: rgba(0, 224, 255, 0.2);
119
+ border-color: var(--accent-color-1);
120
+ }
121
+
122
+ .map-control-btn.active {
123
+ background: rgba(0, 224, 255, 0.3);
124
+ border-color: var(--accent-color-1);
125
+ color: var(--accent-color-1);
126
+ }
127
+
128
+ .map-body {
129
+ padding: 2rem;
130
+ }
131
+
132
+ .map-filters {
133
+ display: flex;
134
+ flex-wrap: wrap;
135
+ gap: 1rem;
136
+ margin-bottom: 2rem;
137
+ }
138
+
139
+ .filter-group {
140
+ background: rgba(255, 255, 255, 0.05);
141
+ border-radius: 12px;
142
+ padding: 1rem;
143
+ border: 1px solid rgba(255, 255, 255, 0.1);
144
+ min-width: 200px;
145
+ flex: 1;
146
+ }
147
+
148
+ .filter-group h3 {
149
+ margin-top: 0;
150
+ margin-bottom: 1rem;
151
+ font-size: 1.1rem;
152
+ color: var(--accent-color-1);
153
+ }
154
+
155
+ .filter-options {
156
+ display: flex;
157
+ flex-wrap: wrap;
158
+ gap: 0.5rem;
159
+ }
160
+
161
+ .filter-option {
162
+ padding: 0.5rem 1rem;
163
+ background: rgba(255, 255, 255, 0.05);
164
+ border: 1px solid rgba(255, 255, 255, 0.1);
165
+ border-radius: 20px;
166
+ font-size: 0.8rem;
167
+ cursor: pointer;
168
+ transition: all 0.3s ease;
169
+ }
170
+
171
+ .filter-option:hover {
172
+ background: rgba(0, 224, 255, 0.1);
173
+ border-color: var(--accent-color-1);
174
+ }
175
+
176
+ .filter-option.active {
177
+ background: rgba(0, 224, 255, 0.2);
178
+ border-color: var(--accent-color-1);
179
+ color: var(--accent-color-1);
180
+ }
181
+
182
+ .map-visualization {
183
+ background: rgba(0, 0, 0, 0.3);
184
+ border-radius: 12px;
185
+ padding: 1rem;
186
+ position: relative;
187
+ height: 500px;
188
+ overflow: hidden;
189
+ }
190
+
191
+ .illinois-map {
192
+ position: relative;
193
+ width: 100%;
194
+ height: 100%;
195
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
196
+ background-size: contain;
197
+ background-position: center;
198
+ background-repeat: no-repeat;
199
+ }
200
+
201
+ .map-location {
202
+ position: absolute;
203
+ width: 20px;
204
+ height: 20px;
205
+ border-radius: 50%;
206
+ background: var(--accent-color-1);
207
+ transform: translate(-50%, -50%);
208
+ cursor: pointer;
209
+ transition: all 0.3s ease;
210
+ box-shadow: 0 0 10px rgba(0, 224, 255, 0.5);
211
+ }
212
+
213
+ .map-location:hover {
214
+ transform: translate(-50%, -50%) scale(1.3);
215
+ z-index: 10;
216
+ }
217
+
218
+ .map-location::after {
219
+ content: '';
220
+ position: absolute;
221
+ top: 50%;
222
+ left: 50%;
223
+ width: 30px;
224
+ height: 30px;
225
+ border-radius: 50%;
226
+ background: rgba(0, 224, 255, 0.3);
227
+ transform: translate(-50%, -50%);
228
+ animation: pulse 2s infinite;
229
+ }
230
+
231
+ @keyframes pulse {
232
+ 0% {
233
+ transform: translate(-50%, -50%) scale(0.5);
234
+ opacity: 1;
235
+ }
236
+ 100% {
237
+ transform: translate(-50%, -50%) scale(2);
238
+ opacity: 0;
239
+ }
240
+ }
241
+
242
+ .map-location.phase-1 {
243
+ background: #4CAF50;
244
+ }
245
+
246
+ .map-location.phase-1::after {
247
+ background: rgba(76, 175, 80, 0.3);
248
+ }
249
+
250
+ .map-location.phase-2 {
251
+ background: #FFC107;
252
+ }
253
+
254
+ .map-location.phase-2::after {
255
+ background: rgba(255, 193, 7, 0.3);
256
+ }
257
+
258
+ .map-location.phase-3 {
259
+ background: #9C27B0;
260
+ }
261
+
262
+ .map-location.phase-3::after {
263
+ background: rgba(156, 39, 176, 0.3);
264
+ }
265
+
266
+ .location-tooltip {
267
+ position: absolute;
268
+ background: rgba(0, 0, 0, 0.8);
269
+ border: 1px solid var(--accent-color-1);
270
+ border-radius: 8px;
271
+ padding: 1rem;
272
+ width: 200px;
273
+ pointer-events: none;
274
+ opacity: 0;
275
+ transition: opacity 0.3s ease;
276
+ z-index: 20;
277
+ }
278
+
279
+ .location-tooltip h4 {
280
+ margin-top: 0;
281
+ margin-bottom: 0.5rem;
282
+ font-size: 1rem;
283
+ color: var(--accent-color-1);
284
+ }
285
+
286
+ .location-tooltip p {
287
+ margin: 0.3rem 0;
288
+ font-size: 0.8rem;
289
+ }
290
+
291
+ .map-legend {
292
+ display: flex;
293
+ justify-content: center;
294
+ gap: 2rem;
295
+ margin-top: 1rem;
296
+ }
297
+
298
+ .legend-item {
299
+ display: flex;
300
+ align-items: center;
301
+ font-size: 0.9rem;
302
+ }
303
+
304
+ .legend-color {
305
+ width: 16px;
306
+ height: 16px;
307
+ border-radius: 50%;
308
+ margin-right: 0.5rem;
309
+ }
310
+
311
+ .legend-color.phase-1 {
312
+ background: #4CAF50;
313
+ }
314
+
315
+ .legend-color.phase-2 {
316
+ background: #FFC107;
317
+ }
318
+
319
+ .legend-color.phase-3 {
320
+ background: #9C27B0;
321
+ }
322
+
323
+ .map-overlay {
324
+ position: absolute;
325
+ top: 0;
326
+ left: 0;
327
+ width: 100%;
328
+ height: 100%;
329
+ background-size: contain;
330
+ background-position: center;
331
+ background-repeat: no-repeat;
332
+ opacity: 0;
333
+ transition: opacity 0.5s ease;
334
+ pointer-events: none;
335
+ }
336
+
337
+ .map-overlay.demographics {
338
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjMwIiBmaWxsPSJyZ2JhKDc2LCAxNzUsIDgwLCAwLjMpIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTUwIiByPSI1MCIgZmlsbD0icmdiYSg3NiwgMTc1LCA4MCwgMC41KSIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjI1MCIgcj0iNzAiIGZpbGw9InJnYmEoNzYsIDE3NSwgODAsIDAuNykiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIzNTAiIHI9IjQwIiBmaWxsPSJyZ2JhKDc2LCAxNzUsIDgwLCAwLjQpIi8+PC9zdmc+');
339
+ }
340
+
341
+ .map-overlay.ev-adoption {
342
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTAwLDEwMCBMMjAwLDE1MCBMMTUwLDI1MCBMMTAwLDM1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwgMTkzLCA3LCAwLjcpIiBzdHJva2Utd2lkdGg9IjIwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjUsMTAiLz48L3N2Zz4=');
343
+ }
344
+
345
+ .map-stats {
346
+ display: grid;
347
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
348
+ gap: 1rem;
349
+ margin-top: 2rem;
350
+ }
351
+
352
+ .stat-card {
353
+ background: rgba(255, 255, 255, 0.05);
354
+ border-radius: 12px;
355
+ padding: 1rem;
356
+ border: 1px solid rgba(255, 255, 255, 0.1);
357
+ }
358
+
359
+ .stat-card h4 {
360
+ margin-top: 0;
361
+ margin-bottom: 0.5rem;
362
+ font-size: 1rem;
363
+ color: var(--accent-color-1);
364
+ }
365
+
366
+ .stat-value {
367
+ font-size: 1.5rem;
368
+ font-weight: bold;
369
+ margin-bottom: 0.5rem;
370
+ }
371
+
372
+ .stat-description {
373
+ font-size: 0.8rem;
374
+ opacity: 0.8;
375
+ }
376
+
377
+ .map-footer {
378
+ background: rgba(0, 0, 0, 0.3);
379
+ padding: 1rem;
380
+ display: flex;
381
+ justify-content: space-between;
382
+ align-items: center;
383
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
384
+ }
385
+
386
+ .map-actions {
387
+ display: flex;
388
+ gap: 1rem;
389
+ }
390
+
391
+ .map-actions button {
392
+ padding: 0.5rem 1rem;
393
+ border-radius: 4px;
394
+ background: transparent;
395
+ border: 1px solid var(--accent-color-1);
396
+ color: var(--accent-color-1);
397
+ cursor: pointer;
398
+ transition: all 0.3s ease;
399
+ }
400
+
401
+ .map-actions button:hover {
402
+ background: rgba(0, 224, 255, 0.1);
403
+ }
404
+
405
+ .map-actions button.primary {
406
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
407
+ color: #000;
408
+ border: none;
409
+ }
410
+
411
+ .map-actions button.primary:hover {
412
+ transform: translateY(-3px);
413
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
414
+ }
415
+
416
+ .map-info {
417
+ font-size: 0.9rem;
418
+ opacity: 0.7;
419
+ }
420
+ </style>
421
+ </head>
422
+ <body>
423
+ <div class="noise-overlay"></div>
424
+
425
+ <header>
426
+ <nav>
427
+ <div class="logo">UNITY FLEET</div>
428
+ <div class="nav-links">
429
+ <a href="../index.html#what-is-the-link">What is The Link</a>
430
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
431
+ <a href="../index.html#impact-equity">Impact & Equity</a>
432
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
433
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
434
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
435
+ </div>
436
+ <div class="mobile-nav-toggle">
437
+ <i class="fas fa-bars"></i>
438
+ </div>
439
+ </nav>
440
+ </header>
441
+
442
+ <main class="component-container">
443
+ <div class="component-header">
444
+ <h1>DEPLOYMENT MAP</h1>
445
+ <p>Explore our phased deployment plan across Illinois with demographic data overlays and EV adoption projections.</p>
446
+ </div>
447
+
448
+ <div class="component-content">
449
+ <div class="deployment-map-container">
450
+ <div class="map-interface">
451
+ <div class="map-header">
452
+ <h2>The Link Deployment Plan</h2>
453
+ <div class="map-controls">
454
+ <button class="map-control-btn active" data-overlay="none">Base Map</button>
455
+ <button class="map-control-btn" data-overlay="demographics">Demographics</button>
456
+ <button class="map-control-btn" data-overlay="ev-adoption">EV Adoption</button>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="map-body">
461
+ <div class="map-filters">
462
+ <div class="filter-group">
463
+ <h3>Deployment Phase</h3>
464
+ <div class="filter-options">
465
+ <div class="filter-option active" data-phase="all">All Phases</div>
466
+ <div class="filter-option" data-phase="1">Phase 1 (2025-2026)</div>
467
+ <div class="filter-option" data-phase="2">Phase 2 (2026-2027)</div>
468
+ <div class="filter-option" data-phase="3">Phase 3 (2027-2028)</div>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="filter-group">
473
+ <h3>Hub Type</h3>
474
+ <div class="filter-options">
475
+ <div class="filter-option active" data-type="all">All Types</div>
476
+ <div class="filter-option" data-type="urban">Urban Hubs</div>
477
+ <div class="filter-option" data-type="suburban">Suburban Hubs</div>
478
+ <div class="filter-option" data-type="rural">Rural Hubs</div>
479
+ <div class="filter-option" data-type="highway">Highway Corridors</div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <div class="map-visualization">
485
+ <div class="illinois-map">
486
+ <!-- Chicago -->
487
+ <div class="map-location phase-1" style="top: 15%; left: 75%;" data-name="Chicago Downtown" data-phase="1" data-type="urban">
488
+ </div>
489
+
490
+ <!-- Springfield -->
491
+ <div class="map-location phase-1" style="top: 50%; left: 45%;" data-name="Springfield Central" data-phase="1" data-type="urban">
492
+ </div>
493
+
494
+ <!-- Champaign-Urbana -->
495
+ <div class="map-location phase-1" style="top: 40%; left: 70%;" data-name="Champaign-Urbana" data-phase="1" data-type="urban">
496
+ </div>
497
+
498
+ <!-- Bloomington-Normal -->
499
+ <div class="map-location phase-1" style="top: 35%; left: 55%;" data-name="Bloomington-Normal" data-phase="1" data-type="urban">
500
+ </div>
501
+
502
+ <!-- Peoria -->
503
+ <div class="map-location phase-1" style="top: 30%; left: 40%;" data-name="Peoria" data-phase="1" data-type="urban">
504
+ </div>
505
+
506
+ <!-- Rockford -->
507
+ <div class="map-location phase-2" style="top: 10%; left: 35%;" data-name="Rockford" data-phase="2" data-type="urban">
508
+ </div>
509
+
510
+ <!-- Naperville -->
511
+ <div class="map-location phase-2" style="top: 20%; left: 65%;" data-name="Naperville" data-phase="2" data-type="suburban">
512
+ </div>
513
+
514
+ <!-- Joliet -->
515
+ <div class="map-location phase-2" style="top: 25%; left: 60%;" data-name="Joliet" data-phase="2" data-type="suburban">
516
+ </div>
517
+
518
+ <!-- Decatur -->
519
+ <div class="map-location phase-2" style="top: 55%; left: 55%;" data-name="Decatur" data-phase="2" data-type="urban">
520
+ </div>
521
+
522
+ <!-- Quincy -->
523
+ <div class="map-location phase-2" style="top: 45%; left: 15%;" data-name="Quincy" data-phase="2" data-type="rural">
524
+ </div>
525
+
526
+ <!-- Carbondale -->
527
+ <div class="map-location phase-3" style="top: 80%; left: 40%;" data-name="Carbondale" data-phase="3" data-type="rural">
528
+ </div>
529
+
530
+ <!-- Effingham -->
531
+ <div class="map-location phase-3" style="top: 65%; left: 60%;" data-name="Effingham" data-phase="3" data-type="highway">
532
+ </div>
533
+
534
+ <!-- Galesburg -->
535
+ <div class="map-location phase-3" style="top: 25%; left: 25%;" data-name="Galesburg" data-phase="3" data-type="rural">
536
+ </div>
537
+
538
+ <!-- Mt. Vernon -->
539
+ <div class="map-location phase-3" style="top: 70%; left: 50%;" data-name="Mt. Vernon" data-phase="3" data-type="highway">
540
+ </div>
541
+
542
+ <!-- I-55 Corridor -->
543
+ <div class="map-location phase-2" style="top: 40%; left: 50%;" data-name="I-55 Corridor Hub" data-phase="2" data-type="highway">
544
+ </div>
545
+
546
+ <div class="location-tooltip"></div>
547
+
548
+ <div class="map-overlay demographics"></div>
549
+ <div class="map-overlay ev-adoption"></div>
550
+ </div>
551
+
552
+ <div class="map-legend">
553
+ <div class="legend-item">
554
+ <div class="legend-color phase-1"></div>
555
+ <span>Phase 1 (2025-2026)</span>
556
+ </div>
557
+ <div class="legend-item">
558
+ <div class="legend-color phase-2"></div>
559
+ <span>Phase 2 (2026-2027)</span>
560
+ </div>
561
+ <div class="legend-item">
562
+ <div class="legend-color phase-3"></div>
563
+ <span>Phase 3 (2027-2028)</span>
564
+ </div>
565
+ </div>
566
+ </div>
567
+
568
+ <div class="map-stats">
569
+ <div class="stat-card">
570
+ <h4>Total Planned Hubs</h4>
571
+ <div class="stat-value">15</div>
572
+ <div class="stat-description">Across urban, suburban, and rural areas</div>
573
+ </div>
574
+
575
+ <div class="stat-card">
576
+ <h4>Population Coverage</h4>
577
+ <div class="stat-value">85%</div>
578
+ <div class="stat-description">Of Illinois residents within 30 miles of a hub</div>
579
+ </div>
580
+
581
+ <div class="stat-card">
582
+ <h4>Total Charging Ports</h4>
583
+ <div class="stat-value">120</div>
584
+ <div class="stat-description">Including 80 DC fast chargers and 40 Level 2</div>
585
+ </div>
586
+
587
+ <div class="stat-card">
588
+ <h4>Projected Annual Usage</h4>
589
+ <div class="stat-value">1.2M</div>
590
+ <div class="stat-description">Charging sessions per year at full deployment</div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+
595
+ <div class="map-footer">
596
+ <div class="map-actions">
597
+ <button id="reset-btn">Reset Filters</button>
598
+ <button id="download-btn" class="primary">Download Deployment Plan</button>
599
+ </div>
600
+ <div class="map-info">
601
+ Last Updated: June 1, 2025 | Data Source: Unity Fleet Planning Division
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+
608
+ <div class="component-features">
609
+ <h2>Key Features</h2>
610
+ <ul class="features-list">
611
+ <li>Interactive map of Illinois showing all planned charging hub locations</li>
612
+ <li>Color-coded visualization of the three-phase deployment timeline</li>
613
+ <li>Demographic data overlay showing population density and income distribution</li>
614
+ <li>EV adoption projection layer highlighting areas of expected growth</li>
615
+ <li>Filtering options by deployment phase and hub type</li>
616
+ <li>Detailed information for each location including specifications and timeline</li>
617
+ <li>Coverage statistics showing population access and charging capacity</li>
618
+ </ul>
619
+ </div>
620
+
621
+ <a href="../index.html#mvp-showcase" class="back-to-home">
622
+ <i class="fas fa-arrow-left"></i> Back to MVP Showcase
623
+ </a>
624
+ </main>
625
+
626
+ <footer>
627
+ <div class="container">
628
+ <div class="footer-content">
629
+ <div class="footer-logo">
630
+ <div class="logo">UNITY FLEET</div>
631
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
632
+ </div>
633
+
634
+ <div class="footer-links">
635
+ <div class="link-column">
636
+ <h4>Navigation</h4>
637
+ <a href="../index.html#what-is-the-link">What is The Link</a>
638
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
639
+ <a href="../index.html#impact-equity">Impact & Equity</a>
640
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
641
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
642
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
643
+ </div>
644
+
645
+ <div class="link-column">
646
+ <h4>Contact</h4>
647
+ <a href="mailto:[email protected]">[email protected]</a>
648
+ <a href="tel:+12175551234">+1 (217) 555-1234</a>
649
+ <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
650
+ </div>
651
+
652
+ <div class="link-column">
653
+ <h4>Legal</h4>
654
+ <a href="#">Privacy Policy</a>
655
+ <a href="#">Terms of Service</a>
656
+ <a href="#">Accessibility</a>
657
+ </div>
658
+ </div>
659
+
660
+ <div class="footer-social">
661
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
662
+ <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
663
+ <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
664
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
665
+ </div>
666
+ </div>
667
+
668
+ <div class="footer-bottom">
669
+ <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
670
+ </div>
671
+ </div>
672
+ </footer>
673
+
674
+ <script>
675
+ // Mobile navigation toggle
676
+ document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
677
+ document.querySelector('.nav-links').classList.toggle('active');
678
+ this.innerHTML = document.querySelector('.nav-links').classList.contains('active')
679
+ ? '<i class="fas fa-times"></i>'
680
+ : '<i class="fas fa-bars"></i>';
681
+ });
682
+
683
+ // Deployment map interactivity
684
+ document.addEventListener('DOMContentLoaded', function() {
685
+ const mapLocations = document.querySelectorAll('.map-location');
686
+ const tooltip = document.querySelector('.location-tooltip');
687
+ const overlayButtons = document.querySelectorAll('.map-control-btn');
688
+ const overlays = document.querySelectorAll('.map-overlay');
689
+ const phaseFilters = document.querySelectorAll('.filter-option[data-phase]');
690
+ const typeFilters = document.querySelectorAll('.filter-option[data-type]');
691
+ const resetButton = document.getElementById('reset-btn');
692
+
693
+ // Location hover effects
694
+ mapLocations.forEach(location => {
695
+ location.addEventListener('mouseenter', function(e) {
696
+ const name = this.getAttribute('data-name');
697
+ const phase = this.getAttribute('data-phase');
698
+ const type = this.getAttribute('data-type');
699
+
700
+ let phaseText = '';
701
+ if (phase === '1') phaseText = 'Phase 1 (2025-2026)';
702
+ else if (phase === '2') phaseText = 'Phase 2 (2026-2027)';
703
+ else if (phase === '3') phaseText = 'Phase 3 (2027-2028)';
704
+
705
+ let typeText = '';
706
+ if (type === 'urban') typeText = 'Urban Hub';
707
+ else if (type === 'suburban') typeText = 'Suburban Hub';
708
+ else if (type === 'rural') typeText = 'Rural Hub';
709
+ else if (type === 'highway') typeText = 'Highway Corridor Hub';
710
+
711
+ tooltip.innerHTML = `
712
+ <h4>${name}</h4>
713
+ <p>${phaseText}</p>
714
+ <p>${typeText}</p>
715
+ <p>8 Charging Stations</p>
716
+ `;
717
+
718
+ const rect = this.getBoundingClientRect();
719
+ const mapRect = document.querySelector('.map-visualization').getBoundingClientRect();
720
+
721
+ tooltip.style.left = (e.clientX - mapRect.left + 20) + 'px';
722
+ tooltip.style.top = (e.clientY - mapRect.top - 20) + 'px';
723
+ tooltip.style.opacity = '1';
724
+ });
725
+
726
+ location.addEventListener('mousemove', function(e) {
727
+ const mapRect = document.querySelector('.map-visualization').getBoundingClientRect();
728
+ tooltip.style.left = (e.clientX - mapRect.left + 20) + 'px';
729
+ tooltip.style.top = (e.clientY - mapRect.top - 20) + 'px';
730
+ });
731
+
732
+ location.addEventListener('mouseleave', function() {
733
+ tooltip.style.opacity = '0';
734
+ });
735
+ });
736
+
737
+ // Map overlay controls
738
+ overlayButtons.forEach(button => {
739
+ button.addEventListener('click', function() {
740
+ // Remove active class from all buttons
741
+ overlayButtons.forEach(btn => btn.classList.remove('active'));
742
+
743
+ // Add active class to clicked button
744
+ this.classList.add('active');
745
+
746
+ // Hide all overlays
747
+ overlays.forEach(overlay => overlay.style.opacity = '0');
748
+
749
+ // Show selected overlay
750
+ const overlayType = this.getAttribute('data-overlay');
751
+ if (overlayType !== 'none') {
752
+ document.querySelector(`.map-overlay.${overlayType}`).style.opacity = '0.7';
753
+ }
754
+ });
755
+ });
756
+
757
+ // Phase filters
758
+ phaseFilters.forEach(filter => {
759
+ filter.addEventListener('click', function() {
760
+ // Remove active class from all phase filters
761
+ phaseFilters.forEach(f => f.classList.remove('active'));
762
+
763
+ // Add active class to clicked filter
764
+ this.classList.add('active');
765
+
766
+ // Filter locations
767
+ filterLocations();
768
+ });
769
+ });
770
+
771
+ // Type filters
772
+ typeFilters.forEach(filter => {
773
+ filter.addEventListener('click', function() {
774
+ // Remove active class from all type filters
775
+ typeFilters.forEach(f => f.classList.remove('active'));
776
+
777
+ // Add active class to clicked filter
778
+ this.classList.add('active');
779
+
780
+ // Filter locations
781
+ filterLocations();
782
+ });
783
+ });
784
+
785
+ // Reset filters
786
+ resetButton.addEventListener('click', function() {
787
+ // Reset phase filters
788
+ phaseFilters.forEach(f => f.classList.remove('active'));
789
+ document.querySelector('.filter-option[data-phase="all"]').classList.add('active');
790
+
791
+ // Reset type filters
792
+ typeFilters.forEach(f => f.classList.remove('active'));
793
+ document.querySelector('.filter-option[data-type="all"]').classList.add('active');
794
+
795
+ // Show all locations
796
+ mapLocations.forEach(location => {
797
+ location.style.display = 'block';
798
+ });
799
+
800
+ // Reset overlays
801
+ overlayButtons.forEach(btn => btn.classList.remove('active'));
802
+ document.querySelector('.map-control-btn[data-overlay="none"]').classList.add('active');
803
+ overlays.forEach(overlay => overlay.style.opacity = '0');
804
+ });
805
+
806
+ // Filter locations based on selected filters
807
+ function filterLocations() {
808
+ const selectedPhase = document.querySelector('.filter-option[data-phase].active').getAttribute('data-phase');
809
+ const selectedType = document.querySelector('.filter-option[data-type].active').getAttribute('data-type');
810
+
811
+ mapLocations.forEach(location => {
812
+ const locationPhase = location.getAttribute('data-phase');
813
+ const locationType = location.getAttribute('data-type');
814
+
815
+ const phaseMatch = selectedPhase === 'all' || locationPhase === selectedPhase;
816
+ const typeMatch = selectedType === 'all' || locationType === selectedType;
817
+
818
+ if (phaseMatch && typeMatch) {
819
+ location.style.display = 'block';
820
+ } else {
821
+ location.style.display = 'none';
822
+ }
823
+ });
824
+ }
825
+
826
+ // Download button action
827
+ document.getElementById('download-btn').addEventListener('click', function() {
828
+ alert('Deployment plan PDF would download here in the production version.');
829
+ });
830
+ });
831
+ </script>
832
+ </body>
833
+ </html>
energy-simulation.html ADDED
@@ -0,0 +1,915 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Unity Fleet - Energy Simulation</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* MVP Component specific styles */
14
+ .component-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 2rem;
18
+ }
19
+
20
+ .component-header {
21
+ text-align: center;
22
+ margin-bottom: 3rem;
23
+ }
24
+
25
+ .component-header h1 {
26
+ font-size: 2.5rem;
27
+ margin-bottom: 1rem;
28
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ -webkit-text-fill-color: transparent;
32
+ }
33
+
34
+ .component-header p {
35
+ font-size: 1.2rem;
36
+ max-width: 800px;
37
+ margin: 0 auto;
38
+ opacity: 0.8;
39
+ }
40
+
41
+ .component-content {
42
+ background: var(--glass-bg);
43
+ border: 1px solid var(--glass-border);
44
+ border-radius: 16px;
45
+ padding: 2rem;
46
+ margin-bottom: 3rem;
47
+ backdrop-filter: blur(10px);
48
+ }
49
+
50
+ .back-to-home {
51
+ display: inline-block;
52
+ margin-top: 2rem;
53
+ padding: 0.8rem 1.5rem;
54
+ background: transparent;
55
+ border: 1px solid var(--accent-color-1);
56
+ color: var(--accent-color-1);
57
+ border-radius: 4px;
58
+ font-family: var(--font-primary);
59
+ font-weight: 500;
60
+ text-transform: uppercase;
61
+ letter-spacing: 1px;
62
+ transition: all var(--transition-medium);
63
+ }
64
+
65
+ .back-to-home:hover {
66
+ background: rgba(0, 224, 255, 0.1);
67
+ transform: translateY(-3px);
68
+ }
69
+
70
+ /* Energy Simulation specific styles */
71
+ .energy-simulation-container {
72
+ display: flex;
73
+ flex-direction: column;
74
+ align-items: center;
75
+ padding: 1rem;
76
+ }
77
+
78
+ .simulation-interface {
79
+ width: 100%;
80
+ max-width: 900px;
81
+ background-color: #0B0B0F;
82
+ border-radius: 16px;
83
+ overflow: hidden;
84
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
85
+ border: 1px solid rgba(0, 224, 255, 0.3);
86
+ margin-bottom: 2rem;
87
+ }
88
+
89
+ .simulation-header {
90
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
91
+ padding: 1.5rem;
92
+ display: flex;
93
+ justify-content: space-between;
94
+ align-items: center;
95
+ }
96
+
97
+ .simulation-header h2 {
98
+ margin: 0;
99
+ font-size: 1.5rem;
100
+ }
101
+
102
+ .simulation-time {
103
+ font-size: 1rem;
104
+ opacity: 0.8;
105
+ }
106
+
107
+ .simulation-body {
108
+ padding: 2rem;
109
+ }
110
+
111
+ .simulation-controls {
112
+ display: flex;
113
+ flex-wrap: wrap;
114
+ gap: 1rem;
115
+ margin-bottom: 2rem;
116
+ justify-content: center;
117
+ }
118
+
119
+ .control-group {
120
+ background: rgba(255, 255, 255, 0.05);
121
+ border-radius: 12px;
122
+ padding: 1rem;
123
+ border: 1px solid rgba(255, 255, 255, 0.1);
124
+ min-width: 200px;
125
+ }
126
+
127
+ .control-group h3 {
128
+ margin-top: 0;
129
+ margin-bottom: 1rem;
130
+ font-size: 1.1rem;
131
+ color: var(--accent-color-1);
132
+ }
133
+
134
+ .control-item {
135
+ margin-bottom: 1rem;
136
+ }
137
+
138
+ .control-item label {
139
+ display: block;
140
+ margin-bottom: 0.5rem;
141
+ font-size: 0.9rem;
142
+ opacity: 0.8;
143
+ }
144
+
145
+ .control-item input[type="range"] {
146
+ width: 100%;
147
+ background: rgba(255, 255, 255, 0.1);
148
+ height: 6px;
149
+ border-radius: 3px;
150
+ -webkit-appearance: none;
151
+ }
152
+
153
+ .control-item input[type="range"]::-webkit-slider-thumb {
154
+ -webkit-appearance: none;
155
+ width: 16px;
156
+ height: 16px;
157
+ border-radius: 50%;
158
+ background: var(--accent-color-1);
159
+ cursor: pointer;
160
+ }
161
+
162
+ .control-item .value-display {
163
+ display: flex;
164
+ justify-content: space-between;
165
+ font-size: 0.8rem;
166
+ margin-top: 0.5rem;
167
+ }
168
+
169
+ .control-item select {
170
+ width: 100%;
171
+ padding: 0.5rem;
172
+ background: rgba(255, 255, 255, 0.1);
173
+ border: 1px solid rgba(255, 255, 255, 0.2);
174
+ border-radius: 4px;
175
+ color: white;
176
+ }
177
+
178
+ .simulation-visualization {
179
+ background: rgba(0, 0, 0, 0.3);
180
+ border-radius: 12px;
181
+ padding: 2rem;
182
+ position: relative;
183
+ height: 400px;
184
+ overflow: hidden;
185
+ }
186
+
187
+ .energy-flow-diagram {
188
+ position: relative;
189
+ width: 100%;
190
+ height: 100%;
191
+ }
192
+
193
+ .energy-node {
194
+ position: absolute;
195
+ width: 80px;
196
+ height: 80px;
197
+ border-radius: 50%;
198
+ display: flex;
199
+ flex-direction: column;
200
+ align-items: center;
201
+ justify-content: center;
202
+ text-align: center;
203
+ font-size: 0.8rem;
204
+ background: rgba(255, 255, 255, 0.1);
205
+ border: 2px solid rgba(255, 255, 255, 0.2);
206
+ transition: all 0.3s ease;
207
+ }
208
+
209
+ .energy-node:hover {
210
+ transform: scale(1.1);
211
+ z-index: 10;
212
+ }
213
+
214
+ .energy-node .icon {
215
+ font-size: 1.5rem;
216
+ margin-bottom: 0.3rem;
217
+ }
218
+
219
+ .energy-node .label {
220
+ font-weight: bold;
221
+ }
222
+
223
+ .energy-node .value {
224
+ font-size: 0.7rem;
225
+ opacity: 0.8;
226
+ }
227
+
228
+ .solar-node {
229
+ top: 20px;
230
+ left: 50%;
231
+ transform: translateX(-50%);
232
+ background: rgba(255, 193, 7, 0.2);
233
+ border-color: #FFC107;
234
+ }
235
+
236
+ .solar-node .icon {
237
+ color: #FFC107;
238
+ }
239
+
240
+ .battery-node {
241
+ top: 50%;
242
+ left: 20%;
243
+ transform: translateY(-50%);
244
+ background: rgba(0, 224, 255, 0.2);
245
+ border-color: var(--accent-color-1);
246
+ }
247
+
248
+ .battery-node .icon {
249
+ color: var(--accent-color-1);
250
+ }
251
+
252
+ .grid-node {
253
+ top: 50%;
254
+ right: 20%;
255
+ transform: translateY(-50%);
256
+ background: rgba(156, 39, 176, 0.2);
257
+ border-color: #9C27B0;
258
+ }
259
+
260
+ .grid-node .icon {
261
+ color: #9C27B0;
262
+ }
263
+
264
+ .charging-node {
265
+ bottom: 20px;
266
+ left: 50%;
267
+ transform: translateX(-50%);
268
+ background: rgba(76, 175, 80, 0.2);
269
+ border-color: #4CAF50;
270
+ }
271
+
272
+ .charging-node .icon {
273
+ color: #4CAF50;
274
+ }
275
+
276
+ .energy-flow {
277
+ position: absolute;
278
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
279
+ height: 3px;
280
+ transform-origin: left center;
281
+ animation: flowPulse 2s infinite;
282
+ }
283
+
284
+ @keyframes flowPulse {
285
+ 0% {
286
+ opacity: 0.3;
287
+ }
288
+ 50% {
289
+ opacity: 1;
290
+ }
291
+ 100% {
292
+ opacity: 0.3;
293
+ }
294
+ }
295
+
296
+ .solar-to-battery {
297
+ top: 70px;
298
+ left: 50%;
299
+ width: 150px;
300
+ transform: rotate(135deg);
301
+ background: linear-gradient(90deg, rgba(255, 193, 7, 0.5), rgba(0, 224, 255, 0.5));
302
+ }
303
+
304
+ .solar-to-charging {
305
+ top: 100px;
306
+ left: 50%;
307
+ height: 200px;
308
+ width: 3px;
309
+ transform: none;
310
+ background: linear-gradient(180deg, rgba(255, 193, 7, 0.5), rgba(76, 175, 80, 0.5));
311
+ }
312
+
313
+ .battery-to-charging {
314
+ bottom: 150px;
315
+ left: 25%;
316
+ width: 150px;
317
+ transform: rotate(45deg);
318
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.5), rgba(76, 175, 80, 0.5));
319
+ }
320
+
321
+ .grid-to-charging {
322
+ bottom: 150px;
323
+ right: 25%;
324
+ width: 150px;
325
+ transform: rotate(-45deg);
326
+ background: linear-gradient(90deg, rgba(156, 39, 176, 0.5), rgba(76, 175, 80, 0.5));
327
+ }
328
+
329
+ .grid-to-battery {
330
+ top: 50%;
331
+ left: 30%;
332
+ width: 40%;
333
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.5), rgba(156, 39, 176, 0.5));
334
+ }
335
+
336
+ .flow-particle {
337
+ position: absolute;
338
+ width: 8px;
339
+ height: 8px;
340
+ border-radius: 50%;
341
+ background: white;
342
+ animation: flowMove 3s linear infinite;
343
+ }
344
+
345
+ @keyframes flowMove {
346
+ 0% {
347
+ left: 0;
348
+ opacity: 0;
349
+ }
350
+ 10% {
351
+ opacity: 1;
352
+ }
353
+ 90% {
354
+ opacity: 1;
355
+ }
356
+ 100% {
357
+ left: calc(100% - 8px);
358
+ opacity: 0;
359
+ }
360
+ }
361
+
362
+ .simulation-stats {
363
+ display: grid;
364
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
365
+ gap: 1rem;
366
+ margin-top: 2rem;
367
+ }
368
+
369
+ .stat-card {
370
+ background: rgba(255, 255, 255, 0.05);
371
+ border-radius: 12px;
372
+ padding: 1rem;
373
+ border: 1px solid rgba(255, 255, 255, 0.1);
374
+ }
375
+
376
+ .stat-card h4 {
377
+ margin-top: 0;
378
+ margin-bottom: 0.5rem;
379
+ font-size: 1rem;
380
+ color: var(--accent-color-1);
381
+ }
382
+
383
+ .stat-value {
384
+ font-size: 1.5rem;
385
+ font-weight: bold;
386
+ margin-bottom: 0.5rem;
387
+ }
388
+
389
+ .stat-change {
390
+ font-size: 0.8rem;
391
+ display: flex;
392
+ align-items: center;
393
+ }
394
+
395
+ .stat-change.positive {
396
+ color: #4CAF50;
397
+ }
398
+
399
+ .stat-change.negative {
400
+ color: #F44336;
401
+ }
402
+
403
+ .stat-change i {
404
+ margin-right: 0.3rem;
405
+ }
406
+
407
+ .simulation-footer {
408
+ background: rgba(0, 0, 0, 0.3);
409
+ padding: 1rem;
410
+ display: flex;
411
+ justify-content: space-between;
412
+ align-items: center;
413
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
414
+ }
415
+
416
+ .simulation-actions {
417
+ display: flex;
418
+ gap: 1rem;
419
+ }
420
+
421
+ .simulation-actions button {
422
+ padding: 0.5rem 1rem;
423
+ border-radius: 4px;
424
+ background: transparent;
425
+ border: 1px solid var(--accent-color-1);
426
+ color: var(--accent-color-1);
427
+ cursor: pointer;
428
+ transition: all 0.3s ease;
429
+ }
430
+
431
+ .simulation-actions button:hover {
432
+ background: rgba(0, 224, 255, 0.1);
433
+ }
434
+
435
+ .simulation-actions button.primary {
436
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
437
+ color: #000;
438
+ border: none;
439
+ }
440
+
441
+ .simulation-actions button.primary:hover {
442
+ transform: translateY(-3px);
443
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
444
+ }
445
+
446
+ .simulation-status {
447
+ font-size: 0.9rem;
448
+ opacity: 0.7;
449
+ }
450
+ </style>
451
+ </head>
452
+ <body>
453
+ <div class="noise-overlay"></div>
454
+
455
+ <header>
456
+ <nav>
457
+ <div class="logo">UNITY FLEET</div>
458
+ <div class="nav-links">
459
+ <a href="../index.html#what-is-the-link">What is The Link</a>
460
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
461
+ <a href="../index.html#impact-equity">Impact & Equity</a>
462
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
463
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
464
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
465
+ </div>
466
+ <div class="mobile-nav-toggle">
467
+ <i class="fas fa-bars"></i>
468
+ </div>
469
+ </nav>
470
+ </header>
471
+
472
+ <main class="component-container">
473
+ <div class="component-header">
474
+ <h1>ENERGY SIMULATION</h1>
475
+ <p>Visualize how our integrated solar and battery systems optimize energy flow, reduce emissions, and create a sustainable charging ecosystem.</p>
476
+ </div>
477
+
478
+ <div class="component-content">
479
+ <div class="energy-simulation-container">
480
+ <div class="simulation-interface">
481
+ <div class="simulation-header">
482
+ <h2>The Link Energy Simulation</h2>
483
+ <div class="simulation-time">
484
+ <span id="sim-time">12:30 PM</span> | <span id="sim-date">June 15, 2025</span>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="simulation-body">
489
+ <div class="simulation-controls">
490
+ <div class="control-group">
491
+ <h3>Environmental Factors</h3>
492
+ <div class="control-item">
493
+ <label for="solar-intensity">Solar Intensity</label>
494
+ <input type="range" id="solar-intensity" min="0" max="100" value="75">
495
+ <div class="value-display">
496
+ <span>Low</span>
497
+ <span id="solar-value">75%</span>
498
+ <span>High</span>
499
+ </div>
500
+ </div>
501
+ <div class="control-item">
502
+ <label for="time-of-day">Time of Day</label>
503
+ <select id="time-of-day">
504
+ <option value="morning">Morning (8 AM)</option>
505
+ <option value="noon" selected>Noon (12 PM)</option>
506
+ <option value="afternoon">Afternoon (4 PM)</option>
507
+ <option value="evening">Evening (8 PM)</option>
508
+ <option value="night">Night (12 AM)</option>
509
+ </select>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="control-group">
514
+ <h3>Charging Demand</h3>
515
+ <div class="control-item">
516
+ <label for="station-usage">Station Usage</label>
517
+ <input type="range" id="station-usage" min="0" max="100" value="60">
518
+ <div class="value-display">
519
+ <span>Low</span>
520
+ <span id="usage-value">60%</span>
521
+ <span>High</span>
522
+ </div>
523
+ </div>
524
+ <div class="control-item">
525
+ <label for="charging-speed">Charging Speed</label>
526
+ <select id="charging-speed">
527
+ <option value="slow">Level 2 (19.2 kW)</option>
528
+ <option value="medium" selected>DC Fast (150 kW)</option>
529
+ <option value="fast">Ultra Fast (350 kW)</option>
530
+ </select>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="control-group">
535
+ <h3>Storage Settings</h3>
536
+ <div class="control-item">
537
+ <label for="battery-capacity">Battery Capacity</label>
538
+ <input type="range" id="battery-capacity" min="0" max="100" value="80">
539
+ <div class="value-display">
540
+ <span>0%</span>
541
+ <span id="battery-value">80%</span>
542
+ <span>100%</span>
543
+ </div>
544
+ </div>
545
+ <div class="control-item">
546
+ <label for="grid-reliance">Grid Reliance</label>
547
+ <input type="range" id="grid-reliance" min="0" max="100" value="25">
548
+ <div class="value-display">
549
+ <span>Low</span>
550
+ <span id="grid-value">25%</span>
551
+ <span>High</span>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <div class="simulation-visualization">
558
+ <div class="energy-flow-diagram">
559
+ <div class="energy-node solar-node">
560
+ <div class="icon"><i class="fas fa-solar-panel"></i></div>
561
+ <div class="label">Solar Array</div>
562
+ <div class="value">75 kW</div>
563
+ </div>
564
+
565
+ <div class="energy-node battery-node">
566
+ <div class="icon"><i class="fas fa-battery-three-quarters"></i></div>
567
+ <div class="label">Battery</div>
568
+ <div class="value">80% | 240 kWh</div>
569
+ </div>
570
+
571
+ <div class="energy-node grid-node">
572
+ <div class="icon"><i class="fas fa-plug"></i></div>
573
+ <div class="label">Grid</div>
574
+ <div class="value">25 kW</div>
575
+ </div>
576
+
577
+ <div class="energy-node charging-node">
578
+ <div class="icon"><i class="fas fa-charging-station"></i></div>
579
+ <div class="label">Charging</div>
580
+ <div class="value">90 kW</div>
581
+ </div>
582
+
583
+ <div class="energy-flow solar-to-battery">
584
+ <div class="flow-particle" style="animation-delay: 0s;"></div>
585
+ <div class="flow-particle" style="animation-delay: 1s;"></div>
586
+ <div class="flow-particle" style="animation-delay: 2s;"></div>
587
+ </div>
588
+
589
+ <div class="energy-flow solar-to-charging">
590
+ <div class="flow-particle" style="animation-delay: 0.5s;"></div>
591
+ <div class="flow-particle" style="animation-delay: 1.5s;"></div>
592
+ <div class="flow-particle" style="animation-delay: 2.5s;"></div>
593
+ </div>
594
+
595
+ <div class="energy-flow battery-to-charging">
596
+ <div class="flow-particle" style="animation-delay: 0.2s;"></div>
597
+ <div class="flow-particle" style="animation-delay: 1.2s;"></div>
598
+ <div class="flow-particle" style="animation-delay: 2.2s;"></div>
599
+ </div>
600
+
601
+ <div class="energy-flow grid-to-charging">
602
+ <div class="flow-particle" style="animation-delay: 0.7s;"></div>
603
+ <div class="flow-particle" style="animation-delay: 1.7s;"></div>
604
+ <div class="flow-particle" style="animation-delay: 2.7s;"></div>
605
+ </div>
606
+
607
+ <div class="energy-flow grid-to-battery">
608
+ <div class="flow-particle" style="animation-delay: 0.3s;"></div>
609
+ <div class="flow-particle" style="animation-delay: 1.3s;"></div>
610
+ <div class="flow-particle" style="animation-delay: 2.3s;"></div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+
615
+ <div class="simulation-stats">
616
+ <div class="stat-card">
617
+ <h4>Renewable Usage</h4>
618
+ <div class="stat-value">75%</div>
619
+ <div class="stat-change positive">
620
+ <i class="fas fa-arrow-up"></i> 12% from grid-only
621
+ </div>
622
+ </div>
623
+
624
+ <div class="stat-card">
625
+ <h4>CO₂ Reduction</h4>
626
+ <div class="stat-value">68 kg</div>
627
+ <div class="stat-change positive">
628
+ <i class="fas fa-arrow-up"></i> 85% from ICE vehicles
629
+ </div>
630
+ </div>
631
+
632
+ <div class="stat-card">
633
+ <h4>Operating Cost</h4>
634
+ <div class="stat-value">$0.12/kWh</div>
635
+ <div class="stat-change negative">
636
+ <i class="fas fa-arrow-down"></i> 40% from grid-only
637
+ </div>
638
+ </div>
639
+
640
+ <div class="stat-card">
641
+ <h4>Grid Demand</h4>
642
+ <div class="stat-value">25 kW</div>
643
+ <div class="stat-change negative">
644
+ <i class="fas fa-arrow-down"></i> 75% from no solar
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+
650
+ <div class="simulation-footer">
651
+ <div class="simulation-actions">
652
+ <button id="reset-btn">Reset Simulation</button>
653
+ <button id="optimize-btn" class="primary">Optimize Energy Flow</button>
654
+ </div>
655
+ <div class="simulation-status">
656
+ System Status: Optimal | Last Updated: <span id="update-time">Just now</span>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+
663
+ <div class="component-features">
664
+ <h2>Key Features</h2>
665
+ <ul class="features-list">
666
+ <li>Real-time visualization of energy flows between solar, battery, grid, and charging stations</li>
667
+ <li>Interactive controls to simulate different environmental conditions and usage scenarios</li>
668
+ <li>Automatic optimization algorithms to maximize renewable energy usage</li>
669
+ <li>Detailed statistics on CO₂ reduction, cost savings, and grid impact</li>
670
+ <li>Time-of-day simulation to model energy management across 24-hour cycles</li>
671
+ <li>Battery storage management with intelligent charge/discharge algorithms</li>
672
+ <li>Grid interaction modeling with peak shaving and demand response capabilities</li>
673
+ </ul>
674
+ </div>
675
+
676
+ <a href="../index.html#mvp-showcase" class="back-to-home">
677
+ <i class="fas fa-arrow-left"></i> Back to MVP Showcase
678
+ </a>
679
+ </main>
680
+
681
+ <footer>
682
+ <div class="container">
683
+ <div class="footer-content">
684
+ <div class="footer-logo">
685
+ <div class="logo">UNITY FLEET</div>
686
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
687
+ </div>
688
+
689
+ <div class="footer-links">
690
+ <div class="link-column">
691
+ <h4>Navigation</h4>
692
+ <a href="../index.html#what-is-the-link">What is The Link</a>
693
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
694
+ <a href="../index.html#impact-equity">Impact & Equity</a>
695
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
696
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
697
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
698
+ </div>
699
+
700
+ <div class="link-column">
701
+ <h4>Contact</h4>
702
+ <a href="mailto:[email protected]">[email protected]</a>
703
+ <a href="tel:+12175551234">+1 (217) 555-1234</a>
704
+ <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
705
+ </div>
706
+
707
+ <div class="link-column">
708
+ <h4>Legal</h4>
709
+ <a href="#">Privacy Policy</a>
710
+ <a href="#">Terms of Service</a>
711
+ <a href="#">Accessibility</a>
712
+ </div>
713
+ </div>
714
+
715
+ <div class="footer-social">
716
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
717
+ <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
718
+ <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
719
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
720
+ </div>
721
+ </div>
722
+
723
+ <div class="footer-bottom">
724
+ <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
725
+ </div>
726
+ </div>
727
+ </footer>
728
+
729
+ <script>
730
+ // Mobile navigation toggle
731
+ document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
732
+ document.querySelector('.nav-links').classList.toggle('active');
733
+ this.innerHTML = document.querySelector('.nav-links').classList.contains('active')
734
+ ? '<i class="fas fa-times"></i>'
735
+ : '<i class="fas fa-bars"></i>';
736
+ });
737
+
738
+ // Energy simulation interactivity
739
+ document.addEventListener('DOMContentLoaded', function() {
740
+ // Initialize sliders
741
+ const solarSlider = document.getElementById('solar-intensity');
742
+ const usageSlider = document.getElementById('station-usage');
743
+ const batterySlider = document.getElementById('battery-capacity');
744
+ const gridSlider = document.getElementById('grid-reliance');
745
+
746
+ const solarValue = document.getElementById('solar-value');
747
+ const usageValue = document.getElementById('usage-value');
748
+ const batteryValue = document.getElementById('battery-value');
749
+ const gridValue = document.getElementById('grid-value');
750
+
751
+ // Update values on slider change
752
+ solarSlider.addEventListener('input', function() {
753
+ solarValue.textContent = this.value + '%';
754
+ updateSimulation();
755
+ });
756
+
757
+ usageSlider.addEventListener('input', function() {
758
+ usageValue.textContent = this.value + '%';
759
+ updateSimulation();
760
+ });
761
+
762
+ batterySlider.addEventListener('input', function() {
763
+ batteryValue.textContent = this.value + '%';
764
+ updateSimulation();
765
+ });
766
+
767
+ gridSlider.addEventListener('input', function() {
768
+ gridValue.textContent = this.value + '%';
769
+ updateSimulation();
770
+ });
771
+
772
+ // Time of day and charging speed selectors
773
+ document.getElementById('time-of-day').addEventListener('change', updateSimulation);
774
+ document.getElementById('charging-speed').addEventListener('change', updateSimulation);
775
+
776
+ // Button actions
777
+ document.getElementById('reset-btn').addEventListener('click', resetSimulation);
778
+ document.getElementById('optimize-btn').addEventListener('click', optimizeSimulation);
779
+
780
+ // Update simulation based on current settings
781
+ function updateSimulation() {
782
+ const solarIntensity = parseInt(solarSlider.value);
783
+ const stationUsage = parseInt(usageSlider.value);
784
+ const batteryCapacity = parseInt(batterySlider.value);
785
+ const gridReliance = parseInt(gridSlider.value);
786
+ const timeOfDay = document.getElementById('time-of-day').value;
787
+ const chargingSpeed = document.getElementById('charging-speed').value;
788
+
789
+ // Update node values
790
+ document.querySelector('.solar-node .value').textContent = Math.round(solarIntensity * 1.2) + ' kW';
791
+ document.querySelector('.battery-node .value').textContent = batteryCapacity + '% | ' + Math.round(batteryCapacity * 3) + ' kWh';
792
+ document.querySelector('.grid-node .value').textContent = Math.round(gridReliance * 1.2) + ' kW';
793
+
794
+ let chargingDemand = 0;
795
+ if (chargingSpeed === 'slow') chargingDemand = stationUsage * 0.2;
796
+ else if (chargingSpeed === 'medium') chargingDemand = stationUsage * 0.6;
797
+ else chargingDemand = stationUsage * 1.5;
798
+
799
+ document.querySelector('.charging-node .value').textContent = Math.round(chargingDemand) + ' kW';
800
+
801
+ // Update stats
802
+ const renewablePercentage = Math.round(solarIntensity * (100 - gridReliance) / 100);
803
+ document.querySelector('.stat-card:nth-child(1) .stat-value').textContent = renewablePercentage + '%';
804
+
805
+ const co2Reduction = Math.round(renewablePercentage * 0.9);
806
+ document.querySelector('.stat-card:nth-child(2) .stat-value').textContent = co2Reduction + ' kg';
807
+
808
+ const operatingCost = (0.2 - (renewablePercentage * 0.001)).toFixed(2);
809
+ document.querySelector('.stat-card:nth-child(3) .stat-value').textContent = '$' + operatingCost + '/kWh';
810
+
811
+ document.querySelector('.stat-card:nth-child(4) .stat-value').textContent = Math.round(gridReliance * 1.2) + ' kW';
812
+
813
+ // Update time display based on selection
814
+ let timeDisplay = '';
815
+ switch(timeOfDay) {
816
+ case 'morning': timeDisplay = '8:00 AM'; break;
817
+ case 'noon': timeDisplay = '12:00 PM'; break;
818
+ case 'afternoon': timeDisplay = '4:00 PM'; break;
819
+ case 'evening': timeDisplay = '8:00 PM'; break;
820
+ case 'night': timeDisplay = '12:00 AM'; break;
821
+ }
822
+ document.getElementById('sim-time').textContent = timeDisplay;
823
+
824
+ // Update flow animation speeds based on energy levels
825
+ const flows = document.querySelectorAll('.energy-flow');
826
+ flows.forEach(flow => {
827
+ const particles = flow.querySelectorAll('.flow-particle');
828
+ particles.forEach(particle => {
829
+ let speed = '3s';
830
+ if (flow.classList.contains('solar-to-battery')) {
831
+ speed = (4 - (solarIntensity / 33)) + 's';
832
+ } else if (flow.classList.contains('solar-to-charging')) {
833
+ speed = (4 - (solarIntensity / 33)) + 's';
834
+ } else if (flow.classList.contains('battery-to-charging')) {
835
+ speed = (4 - (batteryCapacity / 33)) + 's';
836
+ } else if (flow.classList.contains('grid-to-charging')) {
837
+ speed = (4 - (gridReliance / 33)) + 's';
838
+ } else if (flow.classList.contains('grid-to-battery')) {
839
+ speed = (4 - (gridReliance / 33)) + 's';
840
+ }
841
+ particle.style.animationDuration = speed;
842
+ });
843
+ });
844
+
845
+ // Update last updated time
846
+ document.getElementById('update-time').textContent = 'Just now';
847
+ }
848
+
849
+ // Reset simulation to default values
850
+ function resetSimulation() {
851
+ solarSlider.value = 75;
852
+ usageSlider.value = 60;
853
+ batterySlider.value = 80;
854
+ gridSlider.value = 25;
855
+
856
+ solarValue.textContent = '75%';
857
+ usageValue.textContent = '60%';
858
+ batteryValue.textContent = '80%';
859
+ gridValue.textContent = '25%';
860
+
861
+ document.getElementById('time-of-day').value = 'noon';
862
+ document.getElementById('charging-speed').value = 'medium';
863
+
864
+ updateSimulation();
865
+ }
866
+
867
+ // Optimize energy flow based on current conditions
868
+ function optimizeSimulation() {
869
+ const timeOfDay = document.getElementById('time-of-day').value;
870
+ const stationUsage = parseInt(usageSlider.value);
871
+
872
+ // Optimization logic based on time of day
873
+ if (timeOfDay === 'morning' || timeOfDay === 'noon') {
874
+ // Maximize solar usage during daylight hours
875
+ solarSlider.value = 90;
876
+ solarValue.textContent = '90%';
877
+ gridSlider.value = 10;
878
+ gridValue.textContent = '10%';
879
+ } else if (timeOfDay === 'afternoon') {
880
+ // Balance solar and battery in afternoon
881
+ solarSlider.value = 70;
882
+ solarValue.textContent = '70%';
883
+ batterySlider.value = 90;
884
+ batteryValue.textContent = '90%';
885
+ gridSlider.value = 15;
886
+ gridValue.textContent = '15%';
887
+ } else {
888
+ // Rely on battery at night with minimal grid
889
+ batterySlider.value = 95;
890
+ batteryValue.textContent = '95%';
891
+ solarSlider.value = 0;
892
+ solarValue.textContent = '0%';
893
+ gridSlider.value = 30;
894
+ gridValue.textContent = '30%';
895
+ }
896
+
897
+ // Adjust based on station usage
898
+ if (stationUsage > 80) {
899
+ // High demand needs more grid support
900
+ gridSlider.value = parseInt(gridSlider.value) + 15;
901
+ gridValue.textContent = gridSlider.value + '%';
902
+ }
903
+
904
+ updateSimulation();
905
+
906
+ // Show optimization message
907
+ document.querySelector('.simulation-status').textContent = 'System Status: Optimized | Last Updated: Just now';
908
+ }
909
+
910
+ // Initialize simulation
911
+ updateSimulation();
912
+ });
913
+ </script>
914
+ </body>
915
+ </html>
index.html CHANGED
@@ -1,29 +1,544 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="icon" type="image/svg+xml" href="/logo.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>DeepSite | Build with AI ✨</title>
8
- <meta
9
- name="description"
10
- content="DeepSite is a web development tool that
11
- helps you build websites with AI, no code required. Let's deploy your
12
- website with DeepSite and enjoy the magic of AI."
13
- />
14
- <link rel="preconnect" href="https://fonts.googleapis.com" />
15
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16
- <link
17
- href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
18
- rel="stylesheet"
19
- />
20
- <link
21
- href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
22
- rel="stylesheet"
23
- />
24
- </head>
25
- <body>
26
- <div id="root"></div>
27
- <script type="module" src="/src/main.tsx"></script>
28
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  </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>Unity Fleet - The Link EV Charging Network</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ </head>
13
+ <body>
14
+ <div class="noise-overlay"></div>
15
+
16
+ <header>
17
+ <nav>
18
+ <div class="logo">UNITY FLEET</div>
19
+ <div class="nav-links">
20
+ <a href="#what-is-the-link">What is The Link</a>
21
+ <a href="#subscription-tiers">Subscription Tiers</a>
22
+ <a href="#impact-equity">Impact & Equity</a>
23
+ <a href="#tokenization">ChainLink Tokenization</a>
24
+ <a href="#rural-plan">Rural Revitalization</a>
25
+ <a href="#mvp-showcase">MVP Showcase</a>
26
+ </div>
27
+ </nav>
28
+
29
+ <div class="hero">
30
+ <div class="hero-content">
31
+ <h1 class="glitch-text">UNITY FLEET</h1>
32
+ <h2>The Link EV Charging Network</h2>
33
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
34
+ <div class="cta-buttons">
35
+ <a href="#project-overview" class="btn primary-btn">Explore The Project</a>
36
+ <a href="#grant-proposal" class="btn secondary-btn">View Grant Proposal</a>
37
+ </div>
38
+ </div>
39
+ <div class="hero-image-container">
40
+ <div class="hero-image" style="background-image: url('DA9BA4EE-1541-40D5-BD7B-F3D9227808D1.png');"></div>
41
+ </div>
42
+ </div>
43
+ </header>
44
+
45
+ <section id="what-is-the-link" class="section-dark">
46
+ <div class="container">
47
+ <div class="section-header">
48
+ <h2>What is The Link?</h2>
49
+ <div class="section-line"></div>
50
+ </div>
51
+ <div class="content-grid">
52
+ <div class="text-content">
53
+ <p class="highlight-text">A revolutionary approach to EV charging infrastructure, reimagining charging stations as destination hubs that combine fast-charging capabilities with amenity-rich environments.</p>
54
+
55
+ <div class="feature-list">
56
+ <div class="feature-item">
57
+ <div class="feature-icon"><i class="fas fa-bolt"></i></div>
58
+ <div class="feature-text">
59
+ <h3>Advanced Charging</h3>
60
+ <p>Multiple DC Fast Charging ports with 150kW capability and future-ready design for heavy-duty vehicles</p>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="feature-item">
65
+ <div class="feature-icon"><i class="fas fa-solar-panel"></i></div>
66
+ <div class="feature-text">
67
+ <h3>Solar Integration</h3>
68
+ <p>On-site solar generation with battery storage for truly emissions-free charging</p>
69
+ </div>
70
+ </div>
71
+
72
+ <div class="feature-item">
73
+ <div class="feature-icon"><i class="fas fa-coffee"></i></div>
74
+ <div class="feature-text">
75
+ <h3>Premium Amenities</h3>
76
+ <p>Elevated lounge areas with refreshments, Wi-Fi, and productivity spaces</p>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="feature-item">
81
+ <div class="feature-icon"><i class="fas fa-mobile-alt"></i></div>
82
+ <div class="feature-text">
83
+ <h3>Smart Technology</h3>
84
+ <p>AI-powered management systems and seamless mobile app integration</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ <div class="image-content">
90
+ <div class="image-card">
91
+ <img src="4A717E73-3287-4051-AE08-44EB1DD21F7F.png" alt="The Link Charging Hub">
92
+ <div class="image-overlay">
93
+ <span>The Link Charging Hub</span>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <section id="subscription-tiers" class="section-gradient">
102
+ <div class="container">
103
+ <div class="section-header">
104
+ <h2>Unity Fleet Subscription Tiers</h2>
105
+ <div class="section-line"></div>
106
+ </div>
107
+
108
+ <div class="subscription-cards">
109
+ <div class="subscription-card">
110
+ <div class="card-header">
111
+ <h3>FlexRide</h3>
112
+ <div class="price">Starting at $299/mo</div>
113
+ </div>
114
+ <div class="card-content">
115
+ <ul>
116
+ <li>Access to shared EVs on a regular basis</li>
117
+ <li>Balances affordability and convenience</li>
118
+ <li>Includes insurance and maintenance</li>
119
+ <li>Priority charging at The Link hubs</li>
120
+ <li>Flexible booking through mobile app</li>
121
+ </ul>
122
+ <div class="card-cta">
123
+ <a href="#" class="btn card-btn">Learn More</a>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="subscription-card featured">
129
+ <div class="card-header">
130
+ <h3>Take-Home</h3>
131
+ <div class="price">Starting at $699/mo</div>
132
+ </div>
133
+ <div class="card-content">
134
+ <ul>
135
+ <li>Exclusive access to a dedicated EV</li>
136
+ <li>Multiple tiers with different mileage allowances</li>
137
+ <li>Comprehensive insurance coverage</li>
138
+ <li>All maintenance and charging included</li>
139
+ <li>Vehicle upgrades available</li>
140
+ </ul>
141
+ <div class="card-cta">
142
+ <a href="#" class="btn card-btn">Learn More</a>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="subscription-card">
148
+ <div class="card-header">
149
+ <h3>All-Access</h3>
150
+ <div class="price">Starting at $499/mo</div>
151
+ </div>
152
+ <div class="card-content">
153
+ <ul>
154
+ <li>Unlimited rides within designated areas</li>
155
+ <li>Flat daily or monthly fee</li>
156
+ <li>Eliminates personal vehicle reliance</li>
157
+ <li>Includes all charging and maintenance</li>
158
+ <li>24/7 vehicle availability</li>
159
+ </ul>
160
+ <div class="card-cta">
161
+ <a href="#" class="btn card-btn">Learn More</a>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <section id="impact-equity" class="section-dark">
170
+ <div class="container">
171
+ <div class="section-header">
172
+ <h2>Impact & Equity</h2>
173
+ <div class="section-line"></div>
174
+ </div>
175
+
176
+ <div class="content-columns">
177
+ <div class="column">
178
+ <h3>Environmental Impact</h3>
179
+ <div class="impact-metric">
180
+ <div class="metric-number">3-4</div>
181
+ <div class="metric-text">Metric tons of CO2 reduced annually per EV</div>
182
+ </div>
183
+ <div class="impact-metric">
184
+ <div class="metric-number">30%</div>
185
+ <div class="metric-text">Energy from on-site solar generation</div>
186
+ </div>
187
+ <div class="impact-metric">
188
+ <div class="metric-number">1,500+</div>
189
+ <div class="metric-text">Metric tons of emissions avoided in Year 1</div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="column">
194
+ <h3>Community Access Program</h3>
195
+ <p>Unity Fleet is committed to ensuring that the benefits of transportation electrification are accessible to all Illinois residents, regardless of income, location, or ability.</p>
196
+ <ul class="equity-list">
197
+ <li>Discounted transportation options for low-income individuals</li>
198
+ <li>Partnerships with social service organizations</li>
199
+ <li>Targeted outreach to underserved communities</li>
200
+ <li>Simplified payment options that don't require credit cards or smartphones</li>
201
+ <li>ADA-compliant physical infrastructure exceeding minimum requirements</li>
202
+ </ul>
203
+ </div>
204
+
205
+ <div class="column">
206
+ <h3>Economic Development</h3>
207
+ <div class="impact-metric">
208
+ <div class="metric-number">25+</div>
209
+ <div class="metric-text">Direct jobs created in Year 1</div>
210
+ </div>
211
+ <div class="impact-metric">
212
+ <div class="metric-number">70%</div>
213
+ <div class="metric-text">Procurement from Illinois-based suppliers</div>
214
+ </div>
215
+ <div class="impact-metric">
216
+ <div class="metric-number">$7.5M</div>
217
+ <div class="metric-text">Projected revenue by Year 5</div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+ <section id="tokenization" class="section-gradient">
225
+ <div class="container">
226
+ <div class="section-header">
227
+ <h2>ChainLink Tokenization</h2>
228
+ <div class="section-line"></div>
229
+ </div>
230
+
231
+ <div class="tokenization-content">
232
+ <div class="token-diagram">
233
+ <div class="token-circle">
234
+ <div class="token-inner">
235
+ <i class="fas fa-link"></i>
236
+ </div>
237
+ <div class="token-orbit">
238
+ <div class="orbit-item"><i class="fas fa-charging-station"></i></div>
239
+ <div class="orbit-item"><i class="fas fa-car"></i></div>
240
+ <div class="orbit-item"><i class="fas fa-solar-panel"></i></div>
241
+ <div class="orbit-item"><i class="fas fa-users"></i></div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="token-info">
247
+ <h3>Asset Ownership Structure</h3>
248
+ <p>The ChainLink tokenization model creates a revolutionary approach to infrastructure ownership and community investment.</p>
249
+
250
+ <div class="token-benefits">
251
+ <div class="benefit-item">
252
+ <div class="benefit-icon"><i class="fas fa-coins"></i></div>
253
+ <div class="benefit-text">Fractional ownership of charging infrastructure</div>
254
+ </div>
255
+ <div class="benefit-item">
256
+ <div class="benefit-icon"><i class="fas fa-chart-line"></i></div>
257
+ <div class="benefit-text">Community investment opportunities</div>
258
+ </div>
259
+ <div class="benefit-item">
260
+ <div class="benefit-icon"><i class="fas fa-handshake"></i></div>
261
+ <div class="benefit-text">Transparent revenue sharing</div>
262
+ </div>
263
+ <div class="benefit-item">
264
+ <div class="benefit-icon"><i class="fas fa-shield-alt"></i></div>
265
+ <div class="benefit-text">Secure blockchain verification</div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </section>
272
+
273
+ <section id="rural-plan" class="section-dark">
274
+ <div class="container">
275
+ <div class="section-header">
276
+ <h2>Rural Revitalization Plan</h2>
277
+ <div class="section-line"></div>
278
+ </div>
279
+
280
+ <div class="rural-content">
281
+ <div class="rural-image">
282
+ <img src="6120F952-C801-4C53-AFE0-BB9363A1F539.png" alt="Charging Station">
283
+ </div>
284
+
285
+ <div class="rural-text">
286
+ <h3>Trillion-Dollar Vision for Illinois</h3>
287
+ <p>Unity Fleet's rural revitalization strategy extends beyond urban centers to transform transportation access across all of Illinois.</p>
288
+
289
+ <div class="timeline">
290
+ <div class="timeline-item">
291
+ <div class="timeline-marker">1</div>
292
+ <div class="timeline-content">
293
+ <h4>Strategic Hub Placement</h4>
294
+ <p>Establishing The Link charging hubs along key rural corridors</p>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="timeline-item">
299
+ <div class="timeline-marker">2</div>
300
+ <div class="timeline-content">
301
+ <h4>Community Partnerships</h4>
302
+ <p>Collaborating with local businesses and municipalities</p>
303
+ </div>
304
+ </div>
305
+
306
+ <div class="timeline-item">
307
+ <div class="timeline-marker">3</div>
308
+ <div class="timeline-content">
309
+ <h4>Economic Stimulus</h4>
310
+ <p>Creating jobs and attracting visitors to rural communities</p>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="timeline-item">
315
+ <div class="timeline-marker">4</div>
316
+ <div class="timeline-content">
317
+ <h4>Infrastructure Integration</h4>
318
+ <p>Connecting rural areas to the statewide clean transportation network</p>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </section>
326
+
327
+ <section id="grant-proposal" class="section-gradient">
328
+ <div class="container">
329
+ <div class="section-header">
330
+ <h2>Grant Proposal</h2>
331
+ <div class="section-line"></div>
332
+ </div>
333
+
334
+ <div class="proposal-content">
335
+ <div class="proposal-overview">
336
+ <h3>Illinois Department of Transportation Statewide Planning and Research Funds</h3>
337
+ <div class="proposal-details">
338
+ <div class="detail-item">
339
+ <div class="detail-label">Funding Request</div>
340
+ <div class="detail-value">$3,200,000</div>
341
+ </div>
342
+ <div class="detail-item">
343
+ <div class="detail-label">Matching Funds</div>
344
+ <div class="detail-value">$3,800,000</div>
345
+ </div>
346
+ <div class="detail-item">
347
+ <div class="detail-label">Total Project Budget</div>
348
+ <div class="detail-value">$7,000,000</div>
349
+ </div>
350
+ <div class="detail-item">
351
+ <div class="detail-label">Implementation Timeline</div>
352
+ <div class="detail-value">15 months</div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="proposal-sections">
358
+ <div class="accordion">
359
+ <div class="accordion-item">
360
+ <div class="accordion-header">Executive Summary</div>
361
+ <div class="accordion-content">
362
+ <p>Unity Fleet LLC is pleased to submit this proposal for the Illinois Department of Transportation's Statewide Planning and Research Funds grant to support the development of "The Link" - an innovative electric vehicle (EV) charging network that will transform transportation infrastructure across Illinois.</p>
363
+ <a href="#" class="read-more">Read Full Section</a>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="accordion-item">
368
+ <div class="accordion-header">Project Description</div>
369
+ <div class="accordion-content">
370
+ <p>Unity Fleet LLC is a newly established Illinois-based company dedicated to revolutionizing electric vehicle (EV) infrastructure and transportation services. "The Link" represents a revolutionary approach to EV charging infrastructure, reimagining charging stations as destination hubs.</p>
371
+ <a href="#" class="read-more">Read Full Section</a>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="accordion-item">
376
+ <div class="accordion-header">Alignment with Illinois Initiatives</div>
377
+ <div class="accordion-content">
378
+ <p>"The Link" EV charging network and Unity Fleet services directly support Illinois' Priority Climate Action Plan and the state's commitment to the Paris Agreement's greenhouse gas reduction targets.</p>
379
+ <a href="#" class="read-more">Read Full Section</a>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="accordion-item">
384
+ <div class="accordion-header">Implementation Plan</div>
385
+ <div class="accordion-content">
386
+ <p>Unity Fleet will implement "The Link" EV charging network through a strategic, phased approach that ensures careful planning, quality execution, and continuous improvement based on operational feedback.</p>
387
+ <a href="#" class="read-more">Read Full Section</a>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="accordion-item">
392
+ <div class="accordion-header">Budget and Financial Plan</div>
393
+ <div class="accordion-content">
394
+ <p>Unity Fleet requests $3,200,000 in funding from the Illinois Department of Transportation's Statewide Planning and Research Funds grant to support the implementation of "The Link" EV charging network.</p>
395
+ <a href="#" class="read-more">Read Full Section</a>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="accordion-item">
400
+ <div class="accordion-header">Performance Metrics</div>
401
+ <div class="accordion-content">
402
+ <p>Unity Fleet will implement a comprehensive performance measurement framework to track the impact and effectiveness of "The Link" charging network and associated fleet services.</p>
403
+ <a href="#" class="read-more">Read Full Section</a>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="accordion-item">
408
+ <div class="accordion-header">Partnerships and Stakeholder Engagement</div>
409
+ <div class="accordion-content">
410
+ <p>Unity Fleet has established strategic partnerships with key organizations to enhance the implementation and impact of "The Link" charging network.</p>
411
+ <a href="#" class="read-more">Read Full Section</a>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="proposal-download">
417
+ <a href="unity_fleet_complete_proposal.md" download class="btn download-btn">
418
+ <i class="fas fa-download"></i> Download Full Proposal
419
+ </a>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </section>
425
+
426
+ <!-- MVP Showcase Section -->
427
+ <section id="mvp-showcase" class="section-dark">
428
+ <div class="container">
429
+ <div class="section-header">
430
+ <h2>MVP Showcase</h2>
431
+ <div class="section-line"></div>
432
+ </div>
433
+
434
+ <div class="showcase-intro">
435
+ <p class="highlight-text">Experience the future of electric vehicle infrastructure through our interactive demonstrations of The Link ecosystem components.</p>
436
+ </div>
437
+
438
+ <div class="showcase-grid">
439
+ <div class="showcase-card">
440
+ <div class="card-icon"><i class="fas fa-mobile-alt"></i></div>
441
+ <h3>Mobile Application</h3>
442
+ <p>Reserve vehicles, manage your subscription, and find charging stations with our intuitive mobile interface.</p>
443
+ <div class="card-actions">
444
+ <a href="mvp/mobile-app.html" class="btn secondary-btn">Explore Demo</a>
445
+ </div>
446
+ </div>
447
+
448
+ <div class="showcase-card">
449
+ <div class="card-icon"><i class="fas fa-charging-station"></i></div>
450
+ <h3>Charging Hub Interface</h3>
451
+ <p>Interact with The Link charging stations, monitor availability, and experience our premium amenities.</p>
452
+ <div class="card-actions">
453
+ <a href="mvp/charging-hub.html" class="btn secondary-btn">Explore Demo</a>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="showcase-card">
458
+ <div class="card-icon"><i class="fas fa-solar-panel"></i></div>
459
+ <h3>Energy Simulation</h3>
460
+ <p>Visualize how our integrated solar and battery systems optimize energy flow and reduce emissions.</p>
461
+ <div class="card-actions">
462
+ <a href="mvp/energy-simulation.html" class="btn secondary-btn">Explore Demo</a>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="showcase-card">
467
+ <div class="card-icon"><i class="fas fa-map-marked-alt"></i></div>
468
+ <h3>Deployment Map</h3>
469
+ <p>Explore our phased deployment plan across Illinois with demographic and EV adoption overlays.</p>
470
+ <div class="card-actions">
471
+ <a href="mvp/deployment-map.html" class="btn secondary-btn">Explore Demo</a>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="showcase-card">
476
+ <div class="card-icon"><i class="fas fa-id-card"></i></div>
477
+ <h3>Subscription Portal</h3>
478
+ <p>Compare subscription tiers, manage your account, and track usage through our customer portal.</p>
479
+ <div class="card-actions">
480
+ <a href="mvp/subscription-portal.html" class="btn secondary-btn">Explore Demo</a>
481
+ </div>
482
+ </div>
483
+
484
+ <div class="showcase-card">
485
+ <div class="card-icon"><i class="fas fa-link"></i></div>
486
+ <h3>ChainLink Tokenization</h3>
487
+ <p>Discover how our tokenization model creates community ownership and sustainable funding.</p>
488
+ <div class="card-actions">
489
+ <a href="mvp/chainlink-demo.html" class="btn secondary-btn">Explore Demo</a>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </section>
495
+
496
+ <footer>
497
+ <div class="container">
498
+ <div class="footer-content">
499
+ <div class="footer-logo">
500
+ <div class="logo">UNITY FLEET</div>
501
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
502
+ </div>
503
+
504
+ <div class="footer-links">
505
+ <div class="link-column">
506
+ <h4>Navigation</h4>
507
+ <a href="#what-is-the-link">What is The Link</a>
508
+ <a href="#subscription-tiers">Subscription Tiers</a>
509
+ <a href="#impact-equity">Impact & Equity</a>
510
+ <a href="#tokenization">ChainLink Tokenization</a>
511
+ <a href="#rural-plan">Rural Revitalization</a>
512
+ <a href="#mvp-showcase">MVP Showcase</a>
513
+ </div>
514
+
515
+ <div class="link-column">
516
+ <h4>Contact</h4>
517
+ <a href="mailto:[email protected]">[email protected]</a>
518
+ <a href="tel:+12175551234">+1 (217) 555-1234</a>
519
+ <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
520
+ </div>
521
+
522
+ <div class="link-column">
523
+ <h4>Legal</h4>
524
+ <a href="#">Privacy Policy</a>
525
+ <a href="#">Terms of Service</a>
526
+ <a href="#">Accessibility</a>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <div class="footer-bottom">
532
+ <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
533
+ <div class="social-links">
534
+ <a href="#"><i class="fab fa-twitter"></i></a>
535
+ <a href="#"><i class="fab fa-linkedin"></i></a>
536
+ <a href="#"><i class="fab fa-instagram"></i></a>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </footer>
541
+
542
+ <script src="scripts.js"></script>
543
+ </body>
544
  </html>
key_components_for_demonstration.md ADDED
@@ -0,0 +1,161 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Unity Fleet MVP Key Components for Demonstration
2
+
3
+ Based on the requirements analysis, this document identifies the specific components that will be developed as MVPs and working models to showcase Unity Fleet's "The Link" ecosystem.
4
+
5
+ ## 1. Mobile Application Prototype
6
+
7
+ **Component Description**: A responsive web application that simulates the user experience for vehicle reservations and management.
8
+
9
+ **Key Features to Implement**:
10
+ - Vehicle browsing interface with filtering options
11
+ - Reservation calendar and booking flow
12
+ - User account dashboard
13
+ - Vehicle status tracking
14
+ - Payment simulation
15
+
16
+ **Technical Approach**:
17
+ - Develop as a responsive web application using React
18
+ - Use mock data to simulate vehicle availability and reservations
19
+ - Implement UI components that match Unity Fleet's visual identity
20
+ - Create a seamless user journey from account creation to reservation completion
21
+
22
+ **Demonstration Value**:
23
+ - Shows the user-facing aspect of the business model
24
+ - Demonstrates ease of access for potential customers
25
+ - Illustrates the subscription model in action
26
+ - Provides tangible example of service for grant reviewers
27
+
28
+ ## 2. Charging Hub Management Dashboard
29
+
30
+ **Component Description**: An administrative interface that demonstrates how charging infrastructure is monitored and managed.
31
+
32
+ **Key Features to Implement**:
33
+ - Real-time status monitoring of charging stations
34
+ - Energy usage analytics and visualizations
35
+ - Maintenance scheduling and alerts
36
+ - User access management
37
+ - Revenue tracking
38
+
39
+ **Technical Approach**:
40
+ - Develop as a web-based dashboard using React and data visualization libraries
41
+ - Create simulated data streams for charging activity
42
+ - Implement interactive maps showing charging hub locations
43
+ - Design responsive layouts for different device sizes
44
+
45
+ **Demonstration Value**:
46
+ - Illustrates the operational efficiency of the charging network
47
+ - Shows how data is leveraged for system optimization
48
+ - Demonstrates the integration of business and technical operations
49
+ - Highlights the scalability of the infrastructure model
50
+
51
+ ## 3. Energy Management Simulation
52
+
53
+ **Component Description**: A visual simulation showing how solar generation, battery storage, and grid interaction work together in the charging ecosystem.
54
+
55
+ **Key Features to Implement**:
56
+ - Solar energy generation visualization based on time of day and weather
57
+ - Battery charge/discharge cycles
58
+ - Grid interaction during peak/off-peak times
59
+ - Energy flow animations
60
+ - Cost and carbon savings calculations
61
+
62
+ **Technical Approach**:
63
+ - Develop using JavaScript with animation libraries
64
+ - Create data models that accurately represent energy flows
65
+ - Design intuitive visualizations that explain complex energy concepts
66
+ - Implement time controls to demonstrate system behavior under different conditions
67
+
68
+ **Demonstration Value**:
69
+ - Demonstrates the renewable energy integration central to the proposal
70
+ - Illustrates how the system reduces carbon emissions
71
+ - Shows the economic benefits of the energy approach
72
+ - Explains technical concepts in an accessible way
73
+
74
+ ## 4. Subscription Management Portal
75
+
76
+ **Component Description**: A demonstration of the subscription business model showing different tiers, pricing, and customer management.
77
+
78
+ **Key Features to Implement**:
79
+ - Subscription tier comparison interface
80
+ - Customer management dashboard
81
+ - Usage tracking and analytics
82
+ - Billing simulation
83
+ - Upgrade/downgrade pathways
84
+
85
+ **Technical Approach**:
86
+ - Develop as a web application with both customer and admin views
87
+ - Create sample customer profiles and subscription data
88
+ - Implement interactive elements to explore different subscription scenarios
89
+ - Design clear visualizations of subscription economics
90
+
91
+ **Demonstration Value**:
92
+ - Illustrates the financial sustainability of the business model
93
+ - Shows the customer value proposition at different price points
94
+ - Demonstrates how the system scales with customer growth
95
+ - Highlights the recurring revenue aspects of the model
96
+
97
+ ## 5. Interactive Deployment Map
98
+
99
+ **Component Description**: A geographic visualization showing the planned deployment of charging hubs across Illinois with associated data and timelines.
100
+
101
+ **Key Features to Implement**:
102
+ - Interactive map of Illinois with planned hub locations
103
+ - Phased deployment timeline visualization
104
+ - Population coverage analytics
105
+ - Infrastructure impact metrics
106
+ - EV adoption projections by region
107
+
108
+ **Technical Approach**:
109
+ - Develop using mapping libraries (Leaflet or Google Maps API)
110
+ - Implement data overlays for different metrics
111
+ - Create timeline controls to show deployment phases
112
+ - Design pop-up information panels for each location
113
+
114
+ **Demonstration Value**:
115
+ - Demonstrates the strategic geographic approach
116
+ - Shows how the network will grow over time
117
+ - Illustrates the statewide impact of the project
118
+ - Connects abstract concepts to specific locations
119
+
120
+ ## 6. ChainLink Tokenization Demonstration
121
+
122
+ **Component Description**: A simplified demonstration of how the tokenization concept works for asset ownership and value distribution.
123
+
124
+ **Key Features to Implement**:
125
+ - Token allocation visualization
126
+ - Asset ownership representation
127
+ - Value flow diagrams
128
+ - Simulated token transactions
129
+ - Stakeholder dashboard
130
+
131
+ **Technical Approach**:
132
+ - Develop as an interactive web application
133
+ - Create simplified blockchain visualization
134
+ - Implement animations showing token distribution and value flows
135
+ - Design intuitive explanations of complex tokenization concepts
136
+
137
+ **Demonstration Value**:
138
+ - Explains the innovative financial model
139
+ - Demonstrates how community ownership works
140
+ - Shows the long-term value creation mechanism
141
+ - Illustrates the unique aspects of Unity Fleet's approach
142
+
143
+ ## Development Priorities and Timeline
144
+
145
+ ### Phase 1 (Weeks 1-2)
146
+ - Mobile Application Prototype
147
+ - Interactive Deployment Map
148
+
149
+ ### Phase 2 (Weeks 3-4)
150
+ - Charging Hub Management Dashboard
151
+ - Subscription Management Portal
152
+
153
+ ### Phase 3 (Weeks 5-6)
154
+ - Energy Management Simulation
155
+ - ChainLink Tokenization Demonstration
156
+
157
+ ## Integration Strategy
158
+
159
+ These six components will be developed as standalone demonstrations but with consistent branding, data models, and user experience. They will be designed to work together as a cohesive presentation of the Unity Fleet ecosystem, with cross-references between components where appropriate.
160
+
161
+ The components will be developed with a focus on visual impact and clear communication of concepts, using simulated data that realistically represents the expected operation of the actual systems once deployed.
mobile-app.html ADDED
@@ -0,0 +1,440 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Unity Fleet - Mobile Application</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* MVP Component specific styles */
14
+ .component-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 2rem;
18
+ }
19
+
20
+ .component-header {
21
+ text-align: center;
22
+ margin-bottom: 3rem;
23
+ }
24
+
25
+ .component-header h1 {
26
+ font-size: 2.5rem;
27
+ margin-bottom: 1rem;
28
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ -webkit-text-fill-color: transparent;
32
+ }
33
+
34
+ .component-header p {
35
+ font-size: 1.2rem;
36
+ max-width: 800px;
37
+ margin: 0 auto;
38
+ opacity: 0.8;
39
+ }
40
+
41
+ .component-content {
42
+ background: var(--glass-bg);
43
+ border: 1px solid var(--glass-border);
44
+ border-radius: 16px;
45
+ padding: 2rem;
46
+ margin-bottom: 3rem;
47
+ backdrop-filter: blur(10px);
48
+ }
49
+
50
+ .back-to-home {
51
+ display: inline-block;
52
+ margin-top: 2rem;
53
+ padding: 0.8rem 1.5rem;
54
+ background: transparent;
55
+ border: 1px solid var(--accent-color-1);
56
+ color: var(--accent-color-1);
57
+ border-radius: 4px;
58
+ font-family: var(--font-primary);
59
+ font-weight: 500;
60
+ text-transform: uppercase;
61
+ letter-spacing: 1px;
62
+ transition: all var(--transition-medium);
63
+ }
64
+
65
+ .back-to-home:hover {
66
+ background: rgba(0, 224, 255, 0.1);
67
+ transform: translateY(-3px);
68
+ }
69
+
70
+ /* Responsive iframe container */
71
+ .iframe-container {
72
+ position: relative;
73
+ width: 100%;
74
+ height: 0;
75
+ padding-bottom: 56.25%; /* 16:9 aspect ratio */
76
+ overflow: hidden;
77
+ border-radius: 8px;
78
+ }
79
+
80
+ .iframe-container iframe {
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ width: 100%;
85
+ height: 100%;
86
+ border: none;
87
+ }
88
+
89
+ /* Mobile App specific styles */
90
+ .mobile-app-container {
91
+ display: flex;
92
+ flex-direction: column;
93
+ align-items: center;
94
+ padding: 2rem;
95
+ }
96
+
97
+ .mobile-app-frame {
98
+ width: 375px;
99
+ height: 667px;
100
+ background-color: #000;
101
+ border-radius: 30px;
102
+ overflow: hidden;
103
+ position: relative;
104
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
105
+ border: 10px solid #222;
106
+ margin-bottom: 2rem;
107
+ }
108
+
109
+ .mobile-app-content {
110
+ width: 100%;
111
+ height: 100%;
112
+ overflow: hidden;
113
+ }
114
+
115
+ .mobile-app-content div {
116
+ width: 100%;
117
+ height: 100%;
118
+ background-color: #0B0B0F;
119
+ color: white;
120
+ display: flex;
121
+ flex-direction: column;
122
+ }
123
+
124
+ .app-header {
125
+ padding: 1rem;
126
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
127
+ display: flex;
128
+ justify-content: space-between;
129
+ align-items: center;
130
+ }
131
+
132
+ .app-header h2 {
133
+ margin: 0;
134
+ font-size: 1.2rem;
135
+ }
136
+
137
+ .app-body {
138
+ flex: 1;
139
+ padding: 1rem;
140
+ overflow-y: auto;
141
+ }
142
+
143
+ .app-nav {
144
+ display: flex;
145
+ justify-content: space-around;
146
+ padding: 0.8rem 0;
147
+ background-color: rgba(0, 0, 0, 0.8);
148
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
149
+ }
150
+
151
+ .nav-item {
152
+ display: flex;
153
+ flex-direction: column;
154
+ align-items: center;
155
+ font-size: 0.7rem;
156
+ }
157
+
158
+ .nav-item i {
159
+ font-size: 1.2rem;
160
+ margin-bottom: 0.3rem;
161
+ color: var(--accent-color-1);
162
+ }
163
+
164
+ /* App content styles */
165
+ .vehicle-card {
166
+ background: rgba(255, 255, 255, 0.05);
167
+ border-radius: 12px;
168
+ padding: 1rem;
169
+ margin-bottom: 1rem;
170
+ border: 1px solid rgba(255, 255, 255, 0.1);
171
+ }
172
+
173
+ .vehicle-card h3 {
174
+ margin-top: 0;
175
+ margin-bottom: 0.5rem;
176
+ font-size: 1.1rem;
177
+ }
178
+
179
+ .vehicle-card p {
180
+ margin: 0.3rem 0;
181
+ font-size: 0.9rem;
182
+ opacity: 0.8;
183
+ }
184
+
185
+ .vehicle-card .card-footer {
186
+ display: flex;
187
+ justify-content: space-between;
188
+ margin-top: 1rem;
189
+ }
190
+
191
+ .vehicle-card .btn {
192
+ padding: 0.5rem 1rem;
193
+ font-size: 0.8rem;
194
+ border-radius: 4px;
195
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
196
+ color: #000;
197
+ border: none;
198
+ cursor: pointer;
199
+ }
200
+
201
+ .vehicle-card .price {
202
+ font-weight: bold;
203
+ color: var(--accent-color-1);
204
+ }
205
+
206
+ .search-bar {
207
+ display: flex;
208
+ margin-bottom: 1rem;
209
+ }
210
+
211
+ .search-bar input {
212
+ flex: 1;
213
+ padding: 0.8rem;
214
+ border-radius: 8px 0 0 8px;
215
+ border: 1px solid rgba(255, 255, 255, 0.1);
216
+ background: rgba(255, 255, 255, 0.05);
217
+ color: white;
218
+ }
219
+
220
+ .search-bar button {
221
+ padding: 0.8rem;
222
+ border-radius: 0 8px 8px 0;
223
+ border: none;
224
+ background: var(--accent-color-1);
225
+ color: #000;
226
+ }
227
+
228
+ .filter-options {
229
+ display: flex;
230
+ overflow-x: auto;
231
+ margin-bottom: 1rem;
232
+ padding-bottom: 0.5rem;
233
+ }
234
+
235
+ .filter-option {
236
+ padding: 0.5rem 1rem;
237
+ background: rgba(255, 255, 255, 0.05);
238
+ border: 1px solid rgba(255, 255, 255, 0.1);
239
+ border-radius: 20px;
240
+ margin-right: 0.5rem;
241
+ white-space: nowrap;
242
+ font-size: 0.8rem;
243
+ }
244
+
245
+ .filter-option.active {
246
+ background: rgba(0, 224, 255, 0.2);
247
+ border-color: var(--accent-color-1);
248
+ color: var(--accent-color-1);
249
+ }
250
+ </style>
251
+ </head>
252
+ <body>
253
+ <div class="noise-overlay"></div>
254
+
255
+ <header>
256
+ <nav>
257
+ <div class="logo">UNITY FLEET</div>
258
+ <div class="nav-links">
259
+ <a href="../index.html#what-is-the-link">What is The Link</a>
260
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
261
+ <a href="../index.html#impact-equity">Impact & Equity</a>
262
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
263
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
264
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
265
+ </div>
266
+ <div class="mobile-nav-toggle">
267
+ <i class="fas fa-bars"></i>
268
+ </div>
269
+ </nav>
270
+ </header>
271
+
272
+ <main class="component-container">
273
+ <div class="component-header">
274
+ <h1>MOBILE APPLICATION</h1>
275
+ <p>Experience our intuitive mobile interface for reserving vehicles, managing your subscription, and finding charging stations across Illinois.</p>
276
+ </div>
277
+
278
+ <div class="component-content">
279
+ <div class="mobile-app-container">
280
+ <div class="mobile-app-frame">
281
+ <div class="mobile-app-content">
282
+ <div>
283
+ <div class="app-header">
284
+ <h2>Unity Fleet</h2>
285
+ <i class="fas fa-user-circle"></i>
286
+ </div>
287
+ <div class="app-body">
288
+ <div class="search-bar">
289
+ <input type="text" placeholder="Search vehicles...">
290
+ <button><i class="fas fa-search"></i></button>
291
+ </div>
292
+
293
+ <div class="filter-options">
294
+ <div class="filter-option active">All Vehicles</div>
295
+ <div class="filter-option">Sedans</div>
296
+ <div class="filter-option">SUVs</div>
297
+ <div class="filter-option">Luxury</div>
298
+ <div class="filter-option">Near Me</div>
299
+ </div>
300
+
301
+ <div class="vehicle-card">
302
+ <h3>Tesla Model 3</h3>
303
+ <p>Electric Sedan • 358 mi range</p>
304
+ <p>Available at: Downtown Springfield Hub</p>
305
+ <div class="card-footer">
306
+ <span class="price">$75/day</span>
307
+ <button class="btn">Reserve</button>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="vehicle-card">
312
+ <h3>Rivian R1S</h3>
313
+ <p>Electric SUV • 316 mi range</p>
314
+ <p>Available at: Champaign-Urbana Hub</p>
315
+ <div class="card-footer">
316
+ <span class="price">$95/day</span>
317
+ <button class="btn">Reserve</button>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="vehicle-card">
322
+ <h3>Lucid Air</h3>
323
+ <p>Electric Luxury • 520 mi range</p>
324
+ <p>Available at: Bloomington-Normal Hub</p>
325
+ <div class="card-footer">
326
+ <span class="price">$120/day</span>
327
+ <button class="btn">Reserve</button>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ <div class="app-nav">
332
+ <div class="nav-item">
333
+ <i class="fas fa-home"></i>
334
+ <span>Home</span>
335
+ </div>
336
+ <div class="nav-item">
337
+ <i class="fas fa-car"></i>
338
+ <span>Vehicles</span>
339
+ </div>
340
+ <div class="nav-item">
341
+ <i class="fas fa-map-marker-alt"></i>
342
+ <span>Map</span>
343
+ </div>
344
+ <div class="nav-item">
345
+ <i class="fas fa-calendar-alt"></i>
346
+ <span>Bookings</span>
347
+ </div>
348
+ <div class="nav-item">
349
+ <i class="fas fa-cog"></i>
350
+ <span>Settings</span>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="component-features">
360
+ <h2>Key Features</h2>
361
+ <ul class="features-list">
362
+ <li>Intuitive vehicle browsing and filtering by type, range, and location</li>
363
+ <li>Seamless reservation system with calendar integration</li>
364
+ <li>Real-time vehicle availability and charging status</li>
365
+ <li>Subscription management and billing dashboard</li>
366
+ <li>Interactive map showing charging stations and vehicle locations</li>
367
+ <li>Trip planning with charging stops automatically calculated</li>
368
+ <li>Push notifications for reservation reminders and charging updates</li>
369
+ </ul>
370
+ </div>
371
+
372
+ <a href="../index.html#mvp-showcase" class="back-to-home">
373
+ <i class="fas fa-arrow-left"></i> Back to MVP Showcase
374
+ </a>
375
+ </main>
376
+
377
+ <footer>
378
+ <div class="container">
379
+ <div class="footer-content">
380
+ <div class="footer-logo">
381
+ <div class="logo">UNITY FLEET</div>
382
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
383
+ </div>
384
+
385
+ <div class="footer-links">
386
+ <div class="link-column">
387
+ <h4>Navigation</h4>
388
+ <a href="../index.html#what-is-the-link">What is The Link</a>
389
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
390
+ <a href="../index.html#impact-equity">Impact & Equity</a>
391
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
392
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
393
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
394
+ </div>
395
+
396
+ <div class="link-column">
397
+ <h4>Contact</h4>
398
+ <a href="mailto:[email protected]">[email protected]</a>
399
+ <a href="tel:+12175551234">+1 (217) 555-1234</a>
400
+ <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
401
+ </div>
402
+
403
+ <div class="link-column">
404
+ <h4>Legal</h4>
405
+ <a href="#">Privacy Policy</a>
406
+ <a href="#">Terms of Service</a>
407
+ <a href="#">Accessibility</a>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="footer-social">
412
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
413
+ <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
414
+ <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
415
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="footer-bottom">
420
+ <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
421
+ </div>
422
+ </div>
423
+ </footer>
424
+
425
+ <script>
426
+ // Mobile navigation toggle
427
+ document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
428
+ document.querySelector('.nav-links').classList.toggle('active');
429
+ this.innerHTML = document.querySelector('.nav-links').classList.contains('active')
430
+ ? '<i class="fas fa-times"></i>'
431
+ : '<i class="fas fa-bars"></i>';
432
+ });
433
+
434
+ // Component loading logic
435
+ document.addEventListener('DOMContentLoaded', function() {
436
+ console.log('Mobile App component loaded');
437
+ });
438
+ </script>
439
+ </body>
440
+ </html>
mvp-showcase-section.html ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- MVP Showcase Section -->
2
+ <section id="mvp-showcase" class="section-dark">
3
+ <div class="container">
4
+ <div class="section-header">
5
+ <h2>MVP Showcase</h2>
6
+ <div class="section-line"></div>
7
+ </div>
8
+
9
+ <div class="showcase-intro">
10
+ <p class="highlight-text">Experience the future of electric vehicle infrastructure through our interactive demonstrations of The Link ecosystem components.</p>
11
+ </div>
12
+
13
+ <div class="showcase-grid">
14
+ <div class="showcase-card">
15
+ <div class="card-icon"><i class="fas fa-mobile-alt"></i></div>
16
+ <h3>Mobile Application</h3>
17
+ <p>Reserve vehicles, manage your subscription, and find charging stations with our intuitive mobile interface.</p>
18
+ <div class="card-actions">
19
+ <a href="mvp/mobile-app.html" class="btn secondary-btn">Explore Demo</a>
20
+ </div>
21
+ </div>
22
+
23
+ <div class="showcase-card">
24
+ <div class="card-icon"><i class="fas fa-charging-station"></i></div>
25
+ <h3>Charging Hub Interface</h3>
26
+ <p>Interact with The Link charging stations, monitor availability, and experience our premium amenities.</p>
27
+ <div class="card-actions">
28
+ <a href="mvp/charging-hub.html" class="btn secondary-btn">Explore Demo</a>
29
+ </div>
30
+ </div>
31
+
32
+ <div class="showcase-card">
33
+ <div class="card-icon"><i class="fas fa-solar-panel"></i></div>
34
+ <h3>Energy Simulation</h3>
35
+ <p>Visualize how our integrated solar and battery systems optimize energy flow and reduce emissions.</p>
36
+ <div class="card-actions">
37
+ <a href="mvp/energy-simulation.html" class="btn secondary-btn">Explore Demo</a>
38
+ </div>
39
+ </div>
40
+
41
+ <div class="showcase-card">
42
+ <div class="card-icon"><i class="fas fa-map-marked-alt"></i></div>
43
+ <h3>Deployment Map</h3>
44
+ <p>Explore our phased deployment plan across Illinois with demographic and EV adoption overlays.</p>
45
+ <div class="card-actions">
46
+ <a href="mvp/deployment-map.html" class="btn secondary-btn">Explore Demo</a>
47
+ </div>
48
+ </div>
49
+
50
+ <div class="showcase-card">
51
+ <div class="card-icon"><i class="fas fa-id-card"></i></div>
52
+ <h3>Subscription Portal</h3>
53
+ <p>Compare subscription tiers, manage your account, and track usage through our customer portal.</p>
54
+ <div class="card-actions">
55
+ <a href="mvp/subscription-portal.html" class="btn secondary-btn">Explore Demo</a>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="showcase-card">
60
+ <div class="card-icon"><i class="fas fa-link"></i></div>
61
+ <h3>ChainLink Tokenization</h3>
62
+ <p>Discover how our tokenization model creates community ownership and sustainable funding.</p>
63
+ <div class="card-actions">
64
+ <a href="mvp/chainlink-demo.html" class="btn secondary-btn">Explore Demo</a>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </section>
mvp_requirements_analysis.md ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Unity Fleet MVP Requirements Analysis
2
+
3
+ ## Overview
4
+ This document analyzes the requirements for building Minimum Viable Products (MVPs) and working models for the vital supporting elements of Unity Fleet's "The Link" ecosystem. These prototypes will demonstrate key concepts and functionality described in the grant proposal.
5
+
6
+ ## Key MVP Components Needed
7
+
8
+ ### 1. User-Facing Applications
9
+
10
+ #### Mobile Application for Vehicle Reservations
11
+ - **Purpose**: Allow users to browse, reserve, and manage EV rentals
12
+ - **Core Features**:
13
+ - User registration and authentication
14
+ - Vehicle browsing and filtering
15
+ - Reservation system with calendar integration
16
+ - Payment simulation
17
+ - Vehicle status tracking
18
+ - Trip planning with charging stops
19
+
20
+ #### Charging Hub Interface
21
+ - **Purpose**: Demonstrate the user experience at charging hubs
22
+ - **Core Features**:
23
+ - Charging station status and availability
24
+ - User authentication for charging access
25
+ - Payment processing simulation
26
+ - Energy usage tracking
27
+ - Lounge services information
28
+
29
+ ### 2. Backend Management Systems
30
+
31
+ #### Fleet Management Dashboard
32
+ - **Purpose**: Showcase how Unity Fleet manages vehicle operations
33
+ - **Core Features**:
34
+ - Vehicle tracking and status monitoring
35
+ - Maintenance scheduling
36
+ - Utilization analytics
37
+ - Battery health monitoring
38
+ - Route optimization
39
+
40
+ #### Charging Infrastructure Management
41
+ - **Purpose**: Demonstrate management of charging network
42
+ - **Core Features**:
43
+ - Charging station status monitoring
44
+ - Energy usage analytics
45
+ - Grid integration simulation
46
+ - Maintenance tracking
47
+ - Demand forecasting
48
+
49
+ ### 3. Technology Integration Demonstrations
50
+
51
+ #### Solar and Battery Integration
52
+ - **Purpose**: Show how renewable energy powers the charging infrastructure
53
+ - **Core Features**:
54
+ - Solar generation simulation
55
+ - Battery storage management
56
+ - Grid interaction modeling
57
+ - Energy flow visualization
58
+ - Optimization algorithms
59
+
60
+ #### Autonomous Vehicle Features
61
+ - **Purpose**: Demonstrate autonomous capabilities for fleet management
62
+ - **Core Features**:
63
+ - Vehicle repositioning simulation
64
+ - Autonomous charging demonstration
65
+ - Safety protocol visualization
66
+ - Remote monitoring interface
67
+
68
+ ### 4. Financial and Business Models
69
+
70
+ #### Subscription Management System
71
+ - **Purpose**: Showcase the subscription business model
72
+ - **Core Features**:
73
+ - Subscription tier management
74
+ - Billing simulation
75
+ - Usage tracking
76
+ - Customer analytics
77
+ - Upgrade/downgrade pathways
78
+
79
+ #### Tokenization Demonstration
80
+ - **Purpose**: Illustrate the ChainLink tokenization concept
81
+ - **Core Features**:
82
+ - Token allocation visualization
83
+ - Asset ownership representation
84
+ - Value tracking simulation
85
+ - Transaction demonstration
86
+ - Stakeholder dashboard
87
+
88
+ ## Technical Requirements
89
+
90
+ ### Development Platforms
91
+ - Web applications for dashboards and management interfaces
92
+ - Mobile application prototypes (responsive web or native)
93
+ - Data visualization tools for analytics and monitoring
94
+ - Simulation environments for energy and autonomous systems
95
+
96
+ ### Integration Points
97
+ - Authentication systems across all platforms
98
+ - Data sharing between fleet and charging management
99
+ - Energy management integration with fleet operations
100
+ - Financial systems connection to operational platforms
101
+
102
+ ### User Experience Considerations
103
+ - Consistent branding across all interfaces
104
+ - Intuitive navigation and information architecture
105
+ - Clear visualization of complex data
106
+ - Accessibility for diverse users
107
+ - Mobile-first design for user-facing applications
108
+
109
+ ## Demonstration Requirements
110
+
111
+ ### Interactive Demos
112
+ - Live demonstrations of reservation process
113
+ - Real-time monitoring of simulated fleet operations
114
+ - Interactive energy flow visualizations
115
+ - Walkthrough of subscription management
116
+
117
+ ### Visual Materials
118
+ - System architecture diagrams
119
+ - User journey maps
120
+ - Financial model visualizations
121
+ - Geographic deployment maps
122
+ - Technology integration schematics
123
+
124
+ ## Priority Assessment
125
+
126
+ ### Highest Priority MVPs (Essential for Grant Demonstration)
127
+ 1. Mobile Application for Vehicle Reservations
128
+ 2. Charging Hub Interface
129
+ 3. Fleet Management Dashboard
130
+ 4. Subscription Management System
131
+
132
+ ### Secondary Priority (Valuable for Comprehensive Understanding)
133
+ 1. Charging Infrastructure Management
134
+ 2. Solar and Battery Integration
135
+ 3. Tokenization Demonstration
136
+
137
+ ### Future Development (Post-Grant Approval)
138
+ 1. Autonomous Vehicle Features
139
+ 2. Advanced Analytics Platforms
140
+ 3. Full Integration Testing Environment
141
+
142
+ ## Development Approach
143
+
144
+ The development of these MVPs should follow these principles:
145
+ - Focus on visual impact and user experience
146
+ - Use simulated data where real-time data isn't available
147
+ - Prioritize demonstrating concepts over full functionality
148
+ - Create modular components that can be expanded later
149
+ - Ensure all demonstrations align with grant proposal claims
150
+ - Balance technical accuracy with accessibility for non-technical reviewers
151
+
152
+ This analysis provides the foundation for identifying which specific components to build as MVPs and working models in the next phase of the project.
scripts.js ADDED
@@ -0,0 +1,335 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main JavaScript functionality for Unity Fleet website
2
+
3
+ document.addEventListener('DOMContentLoaded', function() {
4
+ // Initialize animations and interactions
5
+ initScrollAnimations();
6
+ initAccordion();
7
+ initParallaxEffect();
8
+ initHeroAnimation();
9
+
10
+ // Mobile navigation toggle
11
+ const navLinks = document.querySelector('.nav-links');
12
+ const mobileNavToggle = document.createElement('div');
13
+ mobileNavToggle.className = 'mobile-nav-toggle';
14
+ mobileNavToggle.innerHTML = '<i class="fas fa-bars"></i>';
15
+ document.querySelector('nav').appendChild(mobileNavToggle);
16
+
17
+ mobileNavToggle.addEventListener('click', function() {
18
+ navLinks.classList.toggle('active');
19
+ this.innerHTML = navLinks.classList.contains('active')
20
+ ? '<i class="fas fa-times"></i>'
21
+ : '<i class="fas fa-bars"></i>';
22
+ });
23
+ });
24
+
25
+ // Scroll animations for elements
26
+ function initScrollAnimations() {
27
+ const animatedElements = document.querySelectorAll('.section-header, .feature-item, .subscription-card, .impact-metric, .token-diagram, .rural-content, .timeline-item');
28
+
29
+ const observer = new IntersectionObserver((entries) => {
30
+ entries.forEach(entry => {
31
+ if (entry.isIntersecting) {
32
+ entry.target.classList.add('animate');
33
+ observer.unobserve(entry.target);
34
+ }
35
+ });
36
+ }, {
37
+ threshold: 0.1
38
+ });
39
+
40
+ animatedElements.forEach(element => {
41
+ element.classList.add('pre-animation');
42
+ observer.observe(element);
43
+ });
44
+
45
+ // Add CSS for animations
46
+ const style = document.createElement('style');
47
+ style.textContent = `
48
+ .pre-animation {
49
+ opacity: 0;
50
+ transform: translateY(30px);
51
+ transition: opacity 0.6s ease, transform 0.6s ease;
52
+ }
53
+
54
+ .animate {
55
+ opacity: 1;
56
+ transform: translateY(0);
57
+ }
58
+
59
+ .subscription-card.pre-animation {
60
+ transform: translateY(50px);
61
+ transition-delay: calc(var(--animation-order, 0) * 0.1s);
62
+ }
63
+
64
+ .feature-item.pre-animation {
65
+ transform: translateX(-30px);
66
+ transition-delay: calc(var(--animation-order, 0) * 0.1s);
67
+ }
68
+
69
+ .timeline-item.pre-animation {
70
+ transform: translateX(-30px);
71
+ transition-delay: calc(var(--animation-order, 0) * 0.15s);
72
+ }
73
+ `;
74
+ document.head.appendChild(style);
75
+
76
+ // Set animation order for staggered animations
77
+ document.querySelectorAll('.subscription-card').forEach((card, index) => {
78
+ card.style.setProperty('--animation-order', index);
79
+ });
80
+
81
+ document.querySelectorAll('.feature-item').forEach((item, index) => {
82
+ item.style.setProperty('--animation-order', index);
83
+ });
84
+
85
+ document.querySelectorAll('.timeline-item').forEach((item, index) => {
86
+ item.style.setProperty('--animation-order', index);
87
+ });
88
+ }
89
+
90
+ // Accordion functionality for grant proposal section
91
+ function initAccordion() {
92
+ const accordionItems = document.querySelectorAll('.accordion-item');
93
+
94
+ accordionItems.forEach(item => {
95
+ const header = item.querySelector('.accordion-header');
96
+ const content = item.querySelector('.accordion-content');
97
+
98
+ header.addEventListener('click', () => {
99
+ // Close all other accordion items
100
+ accordionItems.forEach(otherItem => {
101
+ if (otherItem !== item && otherItem.classList.contains('active')) {
102
+ otherItem.classList.remove('active');
103
+ otherItem.querySelector('.accordion-content').style.maxHeight = '0px';
104
+ }
105
+ });
106
+
107
+ // Toggle current item
108
+ item.classList.toggle('active');
109
+
110
+ if (item.classList.contains('active')) {
111
+ content.style.display = 'block';
112
+ content.style.maxHeight = content.scrollHeight + 'px';
113
+ } else {
114
+ content.style.maxHeight = '0px';
115
+ setTimeout(() => {
116
+ content.style.display = 'none';
117
+ }, 300);
118
+ }
119
+ });
120
+ });
121
+
122
+ // Open first accordion item by default
123
+ if (accordionItems.length > 0) {
124
+ accordionItems[0].classList.add('active');
125
+ const firstContent = accordionItems[0].querySelector('.accordion-content');
126
+ firstContent.style.display = 'block';
127
+ firstContent.style.maxHeight = firstContent.scrollHeight + 'px';
128
+ }
129
+
130
+ // Add CSS for accordion animations
131
+ const style = document.createElement('style');
132
+ style.textContent = `
133
+ .accordion-content {
134
+ max-height: 0;
135
+ overflow: hidden;
136
+ transition: max-height 0.3s ease;
137
+ }
138
+ `;
139
+ document.head.appendChild(style);
140
+ }
141
+
142
+ // Parallax effect for sections
143
+ function initParallaxEffect() {
144
+ window.addEventListener('scroll', () => {
145
+ const scrollPosition = window.pageYOffset;
146
+
147
+ // Parallax for hero section
148
+ const heroImage = document.querySelector('.hero-image');
149
+ if (heroImage) {
150
+ heroImage.style.transform = `translateY(${scrollPosition * 0.4}px)`;
151
+ }
152
+
153
+ // Subtle parallax for section backgrounds
154
+ document.querySelectorAll('.section-gradient').forEach(section => {
155
+ const sectionTop = section.offsetTop;
156
+ const sectionHeight = section.offsetHeight;
157
+ const sectionMiddle = sectionTop + sectionHeight / 2;
158
+ const distanceFromMiddle = scrollPosition - sectionMiddle;
159
+ const parallaxValue = distanceFromMiddle * 0.05;
160
+
161
+ section.style.backgroundPosition = `center ${50 + parallaxValue}%`;
162
+ });
163
+ });
164
+ }
165
+
166
+ // Hero section animations
167
+ function initHeroAnimation() {
168
+ const heroContent = document.querySelector('.hero-content');
169
+ const heroElements = heroContent.querySelectorAll('h1, h2, p, .cta-buttons');
170
+
171
+ // Add CSS for hero animations
172
+ const style = document.createElement('style');
173
+ style.textContent = `
174
+ @keyframes fadeInUp {
175
+ from {
176
+ opacity: 0;
177
+ transform: translateY(30px);
178
+ }
179
+ to {
180
+ opacity: 1;
181
+ transform: translateY(0);
182
+ }
183
+ }
184
+
185
+ .hero-animate {
186
+ animation: fadeInUp 0.8s forwards;
187
+ opacity: 0;
188
+ }
189
+ `;
190
+ document.head.appendChild(style);
191
+
192
+ // Apply staggered animations to hero elements
193
+ heroElements.forEach((element, index) => {
194
+ element.classList.add('hero-animate');
195
+ element.style.animationDelay = `${0.3 + (index * 0.2)}s`;
196
+ });
197
+
198
+ // Add hover effect to CTA buttons
199
+ document.querySelectorAll('.cta-buttons .btn').forEach(button => {
200
+ button.addEventListener('mouseenter', function() {
201
+ this.style.transform = 'translateY(-5px)';
202
+ this.style.boxShadow = '0 15px 30px rgba(0, 224, 255, 0.3)';
203
+ });
204
+
205
+ button.addEventListener('mouseleave', function() {
206
+ this.style.transform = '';
207
+ this.style.boxShadow = '';
208
+ });
209
+ });
210
+ }
211
+
212
+ // Add smooth scrolling for navigation links
213
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
214
+ anchor.addEventListener('click', function(e) {
215
+ e.preventDefault();
216
+
217
+ const targetId = this.getAttribute('href');
218
+ const targetElement = document.querySelector(targetId);
219
+
220
+ if (targetElement) {
221
+ // Close mobile navigation if open
222
+ document.querySelector('.nav-links').classList.remove('active');
223
+ document.querySelector('.mobile-nav-toggle').innerHTML = '<i class="fas fa-bars"></i>';
224
+
225
+ // Scroll to target
226
+ window.scrollTo({
227
+ top: targetElement.offsetTop - 80, // Offset for fixed header
228
+ behavior: 'smooth'
229
+ });
230
+ }
231
+ });
232
+ });
233
+
234
+ // Add fixed navigation on scroll
235
+ window.addEventListener('scroll', function() {
236
+ const nav = document.querySelector('nav');
237
+ if (window.scrollY > 100) {
238
+ nav.classList.add('nav-scrolled');
239
+ } else {
240
+ nav.classList.remove('nav-scrolled');
241
+ }
242
+ });
243
+
244
+ // Add CSS for fixed navigation
245
+ const navStyle = document.createElement('style');
246
+ navStyle.textContent = `
247
+ .nav-scrolled {
248
+ position: fixed;
249
+ background: rgba(11, 11, 15, 0.9);
250
+ backdrop-filter: blur(10px);
251
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
252
+ animation: slideDown 0.3s forwards;
253
+ }
254
+
255
+ @keyframes slideDown {
256
+ from {
257
+ transform: translateY(-100%);
258
+ }
259
+ to {
260
+ transform: translateY(0);
261
+ }
262
+ }
263
+
264
+ @media (max-width: 768px) {
265
+ .mobile-nav-toggle {
266
+ display: block;
267
+ font-size: 1.5rem;
268
+ cursor: pointer;
269
+ color: var(--accent-color-1);
270
+ }
271
+
272
+ .nav-links {
273
+ position: absolute;
274
+ top: 100%;
275
+ left: 0;
276
+ width: 100%;
277
+ background: rgba(11, 11, 15, 0.95);
278
+ flex-direction: column;
279
+ padding: 1rem 0;
280
+ clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
281
+ transition: clip-path 0.4s ease;
282
+ }
283
+
284
+ .nav-links.active {
285
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
286
+ }
287
+
288
+ .nav-links a {
289
+ padding: 1rem 2rem;
290
+ }
291
+ }
292
+ `;
293
+ document.head.appendChild(navStyle);
294
+
295
+ // Add token orbit animation
296
+ const orbitStyle = document.createElement('style');
297
+ orbitStyle.textContent = `
298
+ .orbit-item {
299
+ transition: transform 0.3s ease, background 0.3s ease;
300
+ }
301
+
302
+ .orbit-item:hover {
303
+ transform: scale(1.2) !important;
304
+ background: var(--accent-color-1);
305
+ color: var(--bg-color);
306
+ }
307
+ `;
308
+ document.head.appendChild(orbitStyle);
309
+
310
+ // Add hover effects to image cards
311
+ document.querySelectorAll('.image-card').forEach(card => {
312
+ card.addEventListener('mouseenter', function() {
313
+ this.querySelector('img').style.transform = 'scale(1.05)';
314
+ this.querySelector('.image-overlay').style.opacity = '1';
315
+ });
316
+
317
+ card.addEventListener('mouseleave', function() {
318
+ this.querySelector('img').style.transform = 'scale(1)';
319
+ this.querySelector('.image-overlay').style.opacity = '0.8';
320
+ });
321
+ });
322
+
323
+ // Add CSS for image card hover effects
324
+ const imageCardStyle = document.createElement('style');
325
+ imageCardStyle.textContent = `
326
+ .image-card img {
327
+ transition: transform 0.5s ease;
328
+ }
329
+
330
+ .image-overlay {
331
+ opacity: 0.8;
332
+ transition: opacity 0.3s ease;
333
+ }
334
+ `;
335
+ document.head.appendChild(imageCardStyle);
showcase-styles.css ADDED
@@ -0,0 +1,91 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Showcase Section Styles */
2
+ .showcase-intro {
3
+ text-align: center;
4
+ margin-bottom: 3rem;
5
+ }
6
+
7
+ .showcase-grid {
8
+ display: grid;
9
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
10
+ gap: 30px;
11
+ margin-bottom: 2rem;
12
+ }
13
+
14
+ .showcase-card {
15
+ background: var(--glass-bg);
16
+ border: 1px solid var(--glass-border);
17
+ border-radius: 16px;
18
+ padding: 30px;
19
+ transition: transform var(--transition-medium), box-shadow var(--transition-medium);
20
+ display: flex;
21
+ flex-direction: column;
22
+ height: 100%;
23
+ backdrop-filter: blur(10px);
24
+ position: relative;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .showcase-card::before {
29
+ content: '';
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100%;
34
+ height: 100%;
35
+ background: linear-gradient(135deg, rgba(0, 224, 255, 0.05) 0%, rgba(53, 242, 219, 0.05) 100%);
36
+ z-index: -1;
37
+ }
38
+
39
+ .showcase-card:hover {
40
+ transform: translateY(-10px);
41
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
42
+ }
43
+
44
+ .showcase-card:hover::after {
45
+ content: '';
46
+ position: absolute;
47
+ top: 0;
48
+ left: 0;
49
+ width: 100%;
50
+ height: 5px;
51
+ background: var(--gradient-2);
52
+ }
53
+
54
+ .card-icon {
55
+ font-size: 2.5rem;
56
+ margin-bottom: 1.5rem;
57
+ color: var(--accent-color-1);
58
+ text-align: center;
59
+ }
60
+
61
+ .showcase-card h3 {
62
+ font-size: 1.5rem;
63
+ margin-bottom: 1rem;
64
+ text-align: center;
65
+ }
66
+
67
+ .showcase-card p {
68
+ margin-bottom: 1.5rem;
69
+ opacity: 0.8;
70
+ flex-grow: 1;
71
+ }
72
+
73
+ .card-actions {
74
+ margin-top: auto;
75
+ text-align: center;
76
+ }
77
+
78
+ .card-actions .btn {
79
+ width: 100%;
80
+ }
81
+
82
+ /* Responsive adjustments */
83
+ @media (max-width: 768px) {
84
+ .showcase-grid {
85
+ grid-template-columns: 1fr;
86
+ }
87
+
88
+ .showcase-card {
89
+ padding: 20px;
90
+ }
91
+ }
styles.css ADDED
@@ -0,0 +1,1119 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Base Styles and Variables */
2
+ @import url('showcase-styles.css');
3
+ :root {
4
+ --bg-color: #0B0B0F;
5
+ --text-color: #ffffff;
6
+ --accent-color-1: #00E0FF;
7
+ --accent-color-2: #35F2DB;
8
+ --card-bg: rgba(255, 255, 255, 0.05);
9
+ --gradient-1: linear-gradient(135deg, rgba(0, 224, 255, 0.1) 0%, rgba(53, 242, 219, 0.1) 100%);
10
+ --gradient-2: linear-gradient(135deg, rgba(0, 224, 255, 0.8) 0%, rgba(53, 242, 219, 0.8) 100%);
11
+ --metallic-gradient: linear-gradient(135deg, #c0c0c0 0%, #f5f5f5 50%, #c0c0c0 100%);
12
+ --glass-bg: rgba(255, 255, 255, 0.05);
13
+ --glass-border: rgba(255, 255, 255, 0.1);
14
+ --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
15
+ --font-primary: 'Space Grotesk', sans-serif;
16
+ --font-secondary: 'Inter', sans-serif;
17
+ --transition-slow: 0.5s ease;
18
+ --transition-medium: 0.3s ease;
19
+ --transition-fast: 0.15s ease;
20
+ }
21
+
22
+ /* Global Styles */
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ }
28
+
29
+ html {
30
+ scroll-behavior: smooth;
31
+ }
32
+
33
+ body {
34
+ font-family: var(--font-secondary);
35
+ background-color: var(--bg-color);
36
+ color: var(--text-color);
37
+ line-height: 1.6;
38
+ overflow-x: hidden;
39
+ position: relative;
40
+ }
41
+
42
+ .noise-overlay {
43
+ position: fixed;
44
+ top: 0;
45
+ left: 0;
46
+ width: 100%;
47
+ height: 100%;
48
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==');
49
+ opacity: 0.03;
50
+ z-index: 1000;
51
+ pointer-events: none;
52
+ }
53
+
54
+ h1, h2, h3, h4, h5, h6 {
55
+ font-family: var(--font-primary);
56
+ font-weight: 600;
57
+ margin-bottom: 1rem;
58
+ }
59
+
60
+ p {
61
+ margin-bottom: 1rem;
62
+ }
63
+
64
+ a {
65
+ color: var(--accent-color-1);
66
+ text-decoration: none;
67
+ transition: color var(--transition-fast);
68
+ }
69
+
70
+ a:hover {
71
+ color: var(--accent-color-2);
72
+ }
73
+
74
+ .container {
75
+ width: 100%;
76
+ max-width: 1200px;
77
+ margin: 0 auto;
78
+ padding: 0 2rem;
79
+ }
80
+
81
+ .btn {
82
+ display: inline-block;
83
+ padding: 0.8rem 1.5rem;
84
+ border-radius: 4px;
85
+ font-family: var(--font-primary);
86
+ font-weight: 500;
87
+ text-transform: uppercase;
88
+ letter-spacing: 1px;
89
+ transition: all var(--transition-medium);
90
+ cursor: pointer;
91
+ position: relative;
92
+ overflow: hidden;
93
+ }
94
+
95
+ .btn::before {
96
+ content: '';
97
+ position: absolute;
98
+ top: 0;
99
+ left: -100%;
100
+ width: 100%;
101
+ height: 100%;
102
+ background: rgba(255, 255, 255, 0.1);
103
+ transition: all 0.3s ease;
104
+ }
105
+
106
+ .btn:hover::before {
107
+ left: 100%;
108
+ }
109
+
110
+ .primary-btn {
111
+ background: var(--gradient-2);
112
+ color: var(--bg-color);
113
+ border: none;
114
+ }
115
+
116
+ .primary-btn:hover {
117
+ transform: translateY(-3px);
118
+ box-shadow: 0 10px 20px rgba(0, 224, 255, 0.2);
119
+ color: var(--bg-color);
120
+ }
121
+
122
+ .secondary-btn {
123
+ background: transparent;
124
+ color: var(--accent-color-1);
125
+ border: 1px solid var(--accent-color-1);
126
+ }
127
+
128
+ .secondary-btn:hover {
129
+ background: rgba(0, 224, 255, 0.1);
130
+ transform: translateY(-3px);
131
+ box-shadow: 0 10px 20px rgba(0, 224, 255, 0.1);
132
+ color: var(--accent-color-1);
133
+ }
134
+
135
+ .section-dark {
136
+ background-color: var(--bg-color);
137
+ padding: 6rem 0;
138
+ position: relative;
139
+ }
140
+
141
+ .section-gradient {
142
+ background: var(--gradient-1);
143
+ padding: 6rem 0;
144
+ position: relative;
145
+ }
146
+
147
+ .section-header {
148
+ text-align: center;
149
+ margin-bottom: 4rem;
150
+ }
151
+
152
+ .section-header h2 {
153
+ font-size: 2.5rem;
154
+ margin-bottom: 1rem;
155
+ position: relative;
156
+ display: inline-block;
157
+ }
158
+
159
+ .section-line {
160
+ width: 80px;
161
+ height: 3px;
162
+ background: var(--accent-color-1);
163
+ margin: 0 auto;
164
+ }
165
+
166
+ /* Navigation */
167
+ nav {
168
+ display: flex;
169
+ justify-content: space-between;
170
+ align-items: center;
171
+ padding: 1.5rem 2rem;
172
+ position: absolute;
173
+ top: 0;
174
+ left: 0;
175
+ width: 100%;
176
+ z-index: 100;
177
+ background: rgba(11, 11, 15, 0.8);
178
+ backdrop-filter: blur(10px);
179
+ }
180
+
181
+ .logo {
182
+ font-family: var(--font-primary);
183
+ font-size: 1.5rem;
184
+ font-weight: 700;
185
+ letter-spacing: 2px;
186
+ color: var(--accent-color-1);
187
+ }
188
+
189
+ .nav-links {
190
+ display: flex;
191
+ gap: 1.5rem;
192
+ }
193
+
194
+ .nav-links a {
195
+ color: var(--text-color);
196
+ font-family: var(--font-primary);
197
+ font-size: 0.9rem;
198
+ font-weight: 500;
199
+ text-transform: uppercase;
200
+ letter-spacing: 1px;
201
+ transition: color var(--transition-fast);
202
+ }
203
+
204
+ .nav-links a:hover {
205
+ color: var(--accent-color-1);
206
+ }
207
+
208
+ /* Hero Section */
209
+ .hero {
210
+ height: 100vh;
211
+ display: flex;
212
+ align-items: center;
213
+ position: relative;
214
+ overflow: hidden;
215
+ }
216
+
217
+ .hero::before {
218
+ content: '';
219
+ position: absolute;
220
+ top: 0;
221
+ left: 0;
222
+ width: 100%;
223
+ height: 100%;
224
+ background: linear-gradient(to right, rgba(11, 11, 15, 0.9) 0%, rgba(11, 11, 15, 0.7) 50%, rgba(11, 11, 15, 0.5) 100%);
225
+ z-index: 1;
226
+ }
227
+
228
+ .hero-content {
229
+ width: 50%;
230
+ padding-left: 2rem;
231
+ position: relative;
232
+ z-index: 2;
233
+ }
234
+
235
+ .hero h1 {
236
+ font-size: 4rem;
237
+ margin-bottom: 1rem;
238
+ line-height: 1.1;
239
+ background: var(--metallic-gradient);
240
+ -webkit-background-clip: text;
241
+ background-clip: text;
242
+ color: transparent;
243
+ text-shadow: 0 0 10px rgba(0, 224, 255, 0.3);
244
+ }
245
+
246
+ .hero h2 {
247
+ font-size: 2rem;
248
+ margin-bottom: 1.5rem;
249
+ color: var(--accent-color-1);
250
+ }
251
+
252
+ .hero p {
253
+ font-size: 1.2rem;
254
+ margin-bottom: 2rem;
255
+ max-width: 600px;
256
+ }
257
+
258
+ .cta-buttons {
259
+ display: flex;
260
+ gap: 1rem;
261
+ }
262
+
263
+ .hero-image-container {
264
+ position: absolute;
265
+ top: 0;
266
+ right: 0;
267
+ width: 60%;
268
+ height: 100%;
269
+ z-index: 0;
270
+ }
271
+
272
+ .hero-image {
273
+ width: 100%;
274
+ height: 100%;
275
+ background-size: cover;
276
+ background-position: center;
277
+ filter: brightness(0.8);
278
+ }
279
+
280
+ /* Glitch Text Effect */
281
+ .glitch-text {
282
+ position: relative;
283
+ }
284
+
285
+ .glitch-text::before,
286
+ .glitch-text::after {
287
+ content: 'UNITY FLEET';
288
+ position: absolute;
289
+ top: 0;
290
+ left: 0;
291
+ width: 100%;
292
+ height: 100%;
293
+ background: var(--metallic-gradient);
294
+ -webkit-background-clip: text;
295
+ background-clip: text;
296
+ color: transparent;
297
+ }
298
+
299
+ .glitch-text::before {
300
+ left: 2px;
301
+ text-shadow: -2px 0 var(--accent-color-1);
302
+ animation: glitch-anim-1 2s infinite linear alternate-reverse;
303
+ }
304
+
305
+ .glitch-text::after {
306
+ left: -2px;
307
+ text-shadow: 2px 0 var(--accent-color-2);
308
+ animation: glitch-anim-2 3s infinite linear alternate-reverse;
309
+ }
310
+
311
+ @keyframes glitch-anim-1 {
312
+ 0% {
313
+ clip-path: inset(80% 0 0 0);
314
+ }
315
+ 20% {
316
+ clip-path: inset(20% 0 80% 0);
317
+ }
318
+ 40% {
319
+ clip-path: inset(40% 0 40% 0);
320
+ }
321
+ 60% {
322
+ clip-path: inset(60% 0 20% 0);
323
+ }
324
+ 80% {
325
+ clip-path: inset(10% 0 70% 0);
326
+ }
327
+ 100% {
328
+ clip-path: inset(30% 0 50% 0);
329
+ }
330
+ }
331
+
332
+ @keyframes glitch-anim-2 {
333
+ 0% {
334
+ clip-path: inset(10% 0 60% 0);
335
+ }
336
+ 20% {
337
+ clip-path: inset(30% 0 0% 0);
338
+ }
339
+ 40% {
340
+ clip-path: inset(50% 0 30% 0);
341
+ }
342
+ 60% {
343
+ clip-path: inset(70% 0 10% 0);
344
+ }
345
+ 80% {
346
+ clip-path: inset(20% 0 50% 0);
347
+ }
348
+ 100% {
349
+ clip-path: inset(40% 0 20% 0);
350
+ }
351
+ }
352
+
353
+ /* What is The Link Section */
354
+ .content-grid {
355
+ display: grid;
356
+ grid-template-columns: 1fr 1fr;
357
+ gap: 3rem;
358
+ align-items: center;
359
+ }
360
+
361
+ .highlight-text {
362
+ font-size: 1.3rem;
363
+ color: var(--accent-color-1);
364
+ margin-bottom: 2rem;
365
+ font-family: var(--font-primary);
366
+ line-height: 1.5;
367
+ }
368
+
369
+ .feature-list {
370
+ display: grid;
371
+ grid-template-columns: 1fr 1fr;
372
+ gap: 2rem;
373
+ }
374
+
375
+ .feature-item {
376
+ display: flex;
377
+ align-items: flex-start;
378
+ gap: 1rem;
379
+ }
380
+
381
+ .feature-icon {
382
+ width: 50px;
383
+ height: 50px;
384
+ border-radius: 50%;
385
+ background: var(--glass-bg);
386
+ display: flex;
387
+ align-items: center;
388
+ justify-content: center;
389
+ font-size: 1.5rem;
390
+ color: var(--accent-color-1);
391
+ border: 1px solid var(--glass-border);
392
+ box-shadow: var(--glass-shadow);
393
+ }
394
+
395
+ .feature-text h3 {
396
+ font-size: 1.2rem;
397
+ margin-bottom: 0.5rem;
398
+ }
399
+
400
+ .image-card {
401
+ position: relative;
402
+ border-radius: 10px;
403
+ overflow: hidden;
404
+ box-shadow: var(--glass-shadow);
405
+ transition: transform var(--transition-medium);
406
+ }
407
+
408
+ .image-card:hover {
409
+ transform: translateY(-10px);
410
+ }
411
+
412
+ .image-card img {
413
+ width: 100%;
414
+ height: auto;
415
+ display: block;
416
+ }
417
+
418
+ .image-overlay {
419
+ position: absolute;
420
+ bottom: 0;
421
+ left: 0;
422
+ width: 100%;
423
+ padding: 1rem;
424
+ background: linear-gradient(to top, rgba(11, 11, 15, 0.9), transparent);
425
+ color: var(--text-color);
426
+ font-family: var(--font-primary);
427
+ font-weight: 500;
428
+ }
429
+
430
+ /* Subscription Tiers Section */
431
+ .subscription-cards {
432
+ display: flex;
433
+ gap: 2rem;
434
+ justify-content: center;
435
+ flex-wrap: wrap;
436
+ }
437
+
438
+ .subscription-card {
439
+ background: var(--card-bg);
440
+ border-radius: 10px;
441
+ padding: 2rem;
442
+ width: 100%;
443
+ max-width: 350px;
444
+ border: 1px solid var(--glass-border);
445
+ box-shadow: var(--glass-shadow);
446
+ transition: transform var(--transition-medium);
447
+ position: relative;
448
+ overflow: hidden;
449
+ }
450
+
451
+ .subscription-card::before {
452
+ content: '';
453
+ position: absolute;
454
+ top: 0;
455
+ left: 0;
456
+ width: 100%;
457
+ height: 5px;
458
+ background: var(--accent-color-1);
459
+ }
460
+
461
+ .subscription-card.featured {
462
+ transform: scale(1.05);
463
+ }
464
+
465
+ .subscription-card.featured::before {
466
+ background: var(--gradient-2);
467
+ }
468
+
469
+ .subscription-card:hover {
470
+ transform: translateY(-10px);
471
+ }
472
+
473
+ .subscription-card.featured:hover {
474
+ transform: translateY(-10px) scale(1.05);
475
+ }
476
+
477
+ .card-header {
478
+ margin-bottom: 1.5rem;
479
+ padding-bottom: 1rem;
480
+ border-bottom: 1px solid var(--glass-border);
481
+ }
482
+
483
+ .card-header h3 {
484
+ font-size: 1.5rem;
485
+ margin-bottom: 0.5rem;
486
+ }
487
+
488
+ .price {
489
+ font-size: 1.2rem;
490
+ color: var(--accent-color-1);
491
+ font-family: var(--font-primary);
492
+ }
493
+
494
+ .card-content ul {
495
+ list-style: none;
496
+ margin-bottom: 2rem;
497
+ }
498
+
499
+ .card-content ul li {
500
+ margin-bottom: 0.8rem;
501
+ padding-left: 1.5rem;
502
+ position: relative;
503
+ }
504
+
505
+ .card-content ul li::before {
506
+ content: '✓';
507
+ position: absolute;
508
+ left: 0;
509
+ color: var(--accent-color-1);
510
+ }
511
+
512
+ .card-cta {
513
+ text-align: center;
514
+ }
515
+
516
+ .card-btn {
517
+ width: 100%;
518
+ background: transparent;
519
+ border: 1px solid var(--accent-color-1);
520
+ color: var(--accent-color-1);
521
+ }
522
+
523
+ .card-btn:hover {
524
+ background: rgba(0, 224, 255, 0.1);
525
+ }
526
+
527
+ /* Impact & Equity Section */
528
+ .content-columns {
529
+ display: grid;
530
+ grid-template-columns: repeat(3, 1fr);
531
+ gap: 2rem;
532
+ }
533
+
534
+ .column h3 {
535
+ font-size: 1.5rem;
536
+ margin-bottom: 1.5rem;
537
+ color: var(--accent-color-1);
538
+ }
539
+
540
+ .impact-metric {
541
+ margin-bottom: 1.5rem;
542
+ }
543
+
544
+ .metric-number {
545
+ font-size: 2.5rem;
546
+ font-family: var(--font-primary);
547
+ font-weight: 700;
548
+ color: var(--text-color);
549
+ margin-bottom: 0.3rem;
550
+ }
551
+
552
+ .metric-text {
553
+ font-size: 1rem;
554
+ color: rgba(255, 255, 255, 0.7);
555
+ }
556
+
557
+ .equity-list {
558
+ list-style: none;
559
+ }
560
+
561
+ .equity-list li {
562
+ margin-bottom: 0.8rem;
563
+ padding-left: 1.5rem;
564
+ position: relative;
565
+ }
566
+
567
+ .equity-list li::before {
568
+ content: '→';
569
+ position: absolute;
570
+ left: 0;
571
+ color: var(--accent-color-1);
572
+ }
573
+
574
+ /* Tokenization Section */
575
+ .tokenization-content {
576
+ display: grid;
577
+ grid-template-columns: 1fr 1fr;
578
+ gap: 3rem;
579
+ align-items: center;
580
+ }
581
+
582
+ .token-diagram {
583
+ display: flex;
584
+ justify-content: center;
585
+ align-items: center;
586
+ height: 400px;
587
+ }
588
+
589
+ .token-circle {
590
+ position: relative;
591
+ width: 300px;
592
+ height: 300px;
593
+ border-radius: 50%;
594
+ background: var(--glass-bg);
595
+ border: 1px solid var(--glass-border);
596
+ box-shadow: var(--glass-shadow);
597
+ display: flex;
598
+ justify-content: center;
599
+ align-items: center;
600
+ }
601
+
602
+ .token-inner {
603
+ width: 100px;
604
+ height: 100px;
605
+ border-radius: 50%;
606
+ background: var(--accent-color-1);
607
+ display: flex;
608
+ justify-content: center;
609
+ align-items: center;
610
+ font-size: 2.5rem;
611
+ color: var(--bg-color);
612
+ animation: pulse 3s infinite;
613
+ }
614
+
615
+ @keyframes pulse {
616
+ 0% {
617
+ box-shadow: 0 0 0 0 rgba(0, 224, 255, 0.4);
618
+ }
619
+ 70% {
620
+ box-shadow: 0 0 0 20px rgba(0, 224, 255, 0);
621
+ }
622
+ 100% {
623
+ box-shadow: 0 0 0 0 rgba(0, 224, 255, 0);
624
+ }
625
+ }
626
+
627
+ .token-orbit {
628
+ position: absolute;
629
+ top: 0;
630
+ left: 0;
631
+ width: 100%;
632
+ height: 100%;
633
+ border-radius: 50%;
634
+ animation: rotate 20s linear infinite;
635
+ }
636
+
637
+ @keyframes rotate {
638
+ from {
639
+ transform: rotate(0deg);
640
+ }
641
+ to {
642
+ transform: rotate(360deg);
643
+ }
644
+ }
645
+
646
+ .orbit-item {
647
+ position: absolute;
648
+ width: 60px;
649
+ height: 60px;
650
+ border-radius: 50%;
651
+ background: var(--glass-bg);
652
+ border: 1px solid var(--glass-border);
653
+ display: flex;
654
+ justify-content: center;
655
+ align-items: center;
656
+ font-size: 1.5rem;
657
+ color: var(--accent-color-1);
658
+ }
659
+
660
+ .orbit-item:nth-child(1) {
661
+ top: 0;
662
+ left: 50%;
663
+ transform: translateX(-50%);
664
+ }
665
+
666
+ .orbit-item:nth-child(2) {
667
+ top: 50%;
668
+ right: 0;
669
+ transform: translateY(-50%);
670
+ }
671
+
672
+ .orbit-item:nth-child(3) {
673
+ bottom: 0;
674
+ left: 50%;
675
+ transform: translateX(-50%);
676
+ }
677
+
678
+ .orbit-item:nth-child(4) {
679
+ top: 50%;
680
+ left: 0;
681
+ transform: translateY(-50%);
682
+ }
683
+
684
+ .token-info h3 {
685
+ font-size: 1.8rem;
686
+ margin-bottom: 1.5rem;
687
+ color: var(--accent-color-1);
688
+ }
689
+
690
+ .token-benefits {
691
+ display: grid;
692
+ grid-template-columns: 1fr 1fr;
693
+ gap: 1.5rem;
694
+ margin-top: 2rem;
695
+ }
696
+
697
+ .benefit-item {
698
+ display: flex;
699
+ align-items: center;
700
+ gap: 1rem;
701
+ }
702
+
703
+ .benefit-icon {
704
+ width: 40px;
705
+ height: 40px;
706
+ border-radius: 50%;
707
+ background: var(--glass-bg);
708
+ display: flex;
709
+ align-items: center;
710
+ justify-content: center;
711
+ font-size: 1.2rem;
712
+ color: var(--accent-color-1);
713
+ border: 1px solid var(--glass-border);
714
+ }
715
+
716
+ /* Rural Revitalization Section */
717
+ .rural-content {
718
+ display: grid;
719
+ grid-template-columns: 1fr 1fr;
720
+ gap: 3rem;
721
+ align-items: center;
722
+ }
723
+
724
+ .rural-image img {
725
+ width: 100%;
726
+ border-radius: 10px;
727
+ box-shadow: var(--glass-shadow);
728
+ }
729
+
730
+ .rural-text h3 {
731
+ font-size: 1.8rem;
732
+ margin-bottom: 1.5rem;
733
+ color: var(--accent-color-1);
734
+ }
735
+
736
+ .timeline {
737
+ margin-top: 2rem;
738
+ }
739
+
740
+ .timeline-item {
741
+ display: flex;
742
+ gap: 1.5rem;
743
+ margin-bottom: 1.5rem;
744
+ position: relative;
745
+ }
746
+
747
+ .timeline-item:not(:last-child)::after {
748
+ content: '';
749
+ position: absolute;
750
+ top: 40px;
751
+ left: 20px;
752
+ width: 1px;
753
+ height: calc(100% - 20px);
754
+ background: var(--accent-color-1);
755
+ }
756
+
757
+ .timeline-marker {
758
+ width: 40px;
759
+ height: 40px;
760
+ border-radius: 50%;
761
+ background: var(--accent-color-1);
762
+ display: flex;
763
+ align-items: center;
764
+ justify-content: center;
765
+ font-family: var(--font-primary);
766
+ font-weight: 700;
767
+ color: var(--bg-color);
768
+ z-index: 1;
769
+ }
770
+
771
+ .timeline-content h4 {
772
+ font-size: 1.2rem;
773
+ margin-bottom: 0.5rem;
774
+ }
775
+
776
+ /* Grant Proposal Section */
777
+ .proposal-content {
778
+ display: grid;
779
+ grid-template-columns: 1fr 2fr;
780
+ gap: 3rem;
781
+ }
782
+
783
+ .proposal-overview h3 {
784
+ font-size: 1.5rem;
785
+ margin-bottom: 1.5rem;
786
+ color: var(--accent-color-1);
787
+ }
788
+
789
+ .proposal-details {
790
+ background: var(--glass-bg);
791
+ border-radius: 10px;
792
+ padding: 2rem;
793
+ border: 1px solid var(--glass-border);
794
+ box-shadow: var(--glass-shadow);
795
+ }
796
+
797
+ .detail-item {
798
+ display: flex;
799
+ justify-content: space-between;
800
+ margin-bottom: 1rem;
801
+ padding-bottom: 1rem;
802
+ border-bottom: 1px solid var(--glass-border);
803
+ }
804
+
805
+ .detail-item:last-child {
806
+ margin-bottom: 0;
807
+ padding-bottom: 0;
808
+ border-bottom: none;
809
+ }
810
+
811
+ .detail-label {
812
+ font-weight: 500;
813
+ color: rgba(255, 255, 255, 0.7);
814
+ }
815
+
816
+ .detail-value {
817
+ font-family: var(--font-primary);
818
+ font-weight: 600;
819
+ color: var(--accent-color-1);
820
+ }
821
+
822
+ .accordion {
823
+ background: var(--glass-bg);
824
+ border-radius: 10px;
825
+ overflow: hidden;
826
+ border: 1px solid var(--glass-border);
827
+ box-shadow: var(--glass-shadow);
828
+ }
829
+
830
+ .accordion-item {
831
+ border-bottom: 1px solid var(--glass-border);
832
+ }
833
+
834
+ .accordion-item:last-child {
835
+ border-bottom: none;
836
+ }
837
+
838
+ .accordion-header {
839
+ padding: 1.5rem;
840
+ font-family: var(--font-primary);
841
+ font-weight: 600;
842
+ font-size: 1.1rem;
843
+ cursor: pointer;
844
+ position: relative;
845
+ transition: background var(--transition-fast);
846
+ }
847
+
848
+ .accordion-header:hover {
849
+ background: rgba(255, 255, 255, 0.05);
850
+ }
851
+
852
+ .accordion-header::after {
853
+ content: '+';
854
+ position: absolute;
855
+ right: 1.5rem;
856
+ top: 50%;
857
+ transform: translateY(-50%);
858
+ font-size: 1.5rem;
859
+ color: var(--accent-color-1);
860
+ }
861
+
862
+ .accordion-content {
863
+ padding: 0 1.5rem 1.5rem;
864
+ display: none;
865
+ }
866
+
867
+ .accordion-item.active .accordion-header::after {
868
+ content: '-';
869
+ }
870
+
871
+ .accordion-item.active .accordion-content {
872
+ display: block;
873
+ }
874
+
875
+ .read-more {
876
+ display: inline-block;
877
+ margin-top: 1rem;
878
+ font-family: var(--font-primary);
879
+ font-weight: 500;
880
+ color: var(--accent-color-1);
881
+ }
882
+
883
+ .proposal-download {
884
+ margin-top: 2rem;
885
+ text-align: center;
886
+ }
887
+
888
+ .download-btn {
889
+ background: var(--gradient-2);
890
+ color: var(--bg-color);
891
+ padding: 1rem 2rem;
892
+ font-size: 1.1rem;
893
+ }
894
+
895
+ .download-btn i {
896
+ margin-right: 0.5rem;
897
+ }
898
+
899
+ /* Footer */
900
+ footer {
901
+ background: var(--bg-color);
902
+ padding: 4rem 0 2rem;
903
+ border-top: 1px solid var(--glass-border);
904
+ }
905
+
906
+ .footer-content {
907
+ display: grid;
908
+ grid-template-columns: 1fr 2fr;
909
+ gap: 3rem;
910
+ margin-bottom: 3rem;
911
+ }
912
+
913
+ .footer-logo {
914
+ margin-bottom: 1rem;
915
+ }
916
+
917
+ .footer-logo .logo {
918
+ margin-bottom: 1rem;
919
+ display: inline-block;
920
+ }
921
+
922
+ .footer-links {
923
+ display: grid;
924
+ grid-template-columns: repeat(3, 1fr);
925
+ gap: 2rem;
926
+ }
927
+
928
+ .link-column h4 {
929
+ font-size: 1.1rem;
930
+ margin-bottom: 1.5rem;
931
+ color: var(--accent-color-1);
932
+ }
933
+
934
+ .link-column a {
935
+ display: block;
936
+ margin-bottom: 0.8rem;
937
+ color: rgba(255, 255, 255, 0.7);
938
+ transition: color var(--transition-fast);
939
+ }
940
+
941
+ .link-column a:hover {
942
+ color: var(--accent-color-1);
943
+ }
944
+
945
+ .footer-bottom {
946
+ display: flex;
947
+ justify-content: space-between;
948
+ align-items: center;
949
+ padding-top: 2rem;
950
+ border-top: 1px solid var(--glass-border);
951
+ }
952
+
953
+ .social-links {
954
+ display: flex;
955
+ gap: 1rem;
956
+ }
957
+
958
+ .social-links a {
959
+ width: 40px;
960
+ height: 40px;
961
+ border-radius: 50%;
962
+ background: var(--glass-bg);
963
+ display: flex;
964
+ align-items: center;
965
+ justify-content: center;
966
+ font-size: 1.2rem;
967
+ color: var(--accent-color-1);
968
+ border: 1px solid var(--glass-border);
969
+ transition: all var(--transition-fast);
970
+ }
971
+
972
+ .social-links a:hover {
973
+ background: var(--accent-color-1);
974
+ color: var(--bg-color);
975
+ }
976
+
977
+ /* Responsive Design */
978
+ @media (max-width: 1200px) {
979
+ .container {
980
+ padding: 0 1.5rem;
981
+ }
982
+
983
+ .hero h1 {
984
+ font-size: 3.5rem;
985
+ }
986
+
987
+ .hero h2 {
988
+ font-size: 1.8rem;
989
+ }
990
+ }
991
+
992
+ @media (max-width: 992px) {
993
+ .hero {
994
+ flex-direction: column;
995
+ height: auto;
996
+ padding: 8rem 0 4rem;
997
+ }
998
+
999
+ .hero-content {
1000
+ width: 100%;
1001
+ padding: 0;
1002
+ text-align: center;
1003
+ margin-bottom: 3rem;
1004
+ }
1005
+
1006
+ .hero h1 {
1007
+ font-size: 3rem;
1008
+ }
1009
+
1010
+ .cta-buttons {
1011
+ justify-content: center;
1012
+ }
1013
+
1014
+ .hero-image-container {
1015
+ position: relative;
1016
+ width: 100%;
1017
+ height: 50vh;
1018
+ }
1019
+
1020
+ .content-grid,
1021
+ .content-columns,
1022
+ .tokenization-content,
1023
+ .rural-content,
1024
+ .proposal-content {
1025
+ grid-template-columns: 1fr;
1026
+ gap: 2rem;
1027
+ }
1028
+
1029
+ .feature-list,
1030
+ .token-benefits {
1031
+ grid-template-columns: 1fr;
1032
+ }
1033
+
1034
+ .footer-content {
1035
+ grid-template-columns: 1fr;
1036
+ }
1037
+
1038
+ .footer-links {
1039
+ grid-template-columns: 1fr 1fr;
1040
+ }
1041
+ }
1042
+
1043
+ @media (max-width: 768px) {
1044
+ nav {
1045
+ flex-direction: column;
1046
+ gap: 1rem;
1047
+ }
1048
+
1049
+ .nav-links {
1050
+ flex-wrap: wrap;
1051
+ justify-content: center;
1052
+ }
1053
+
1054
+ .hero h1 {
1055
+ font-size: 2.5rem;
1056
+ }
1057
+
1058
+ .hero h2 {
1059
+ font-size: 1.5rem;
1060
+ }
1061
+
1062
+ .section-header h2 {
1063
+ font-size: 2rem;
1064
+ }
1065
+
1066
+ .subscription-cards {
1067
+ flex-direction: column;
1068
+ align-items: center;
1069
+ }
1070
+
1071
+ .subscription-card.featured {
1072
+ transform: scale(1);
1073
+ }
1074
+
1075
+ .subscription-card.featured:hover {
1076
+ transform: translateY(-10px);
1077
+ }
1078
+
1079
+ .footer-bottom {
1080
+ flex-direction: column;
1081
+ gap: 1rem;
1082
+ text-align: center;
1083
+ }
1084
+
1085
+ .social-links {
1086
+ justify-content: center;
1087
+ }
1088
+ }
1089
+
1090
+ @media (max-width: 576px) {
1091
+ .hero h1 {
1092
+ font-size: 2rem;
1093
+ }
1094
+
1095
+ .hero h2 {
1096
+ font-size: 1.2rem;
1097
+ }
1098
+
1099
+ .hero p {
1100
+ font-size: 1rem;
1101
+ }
1102
+
1103
+ .cta-buttons {
1104
+ flex-direction: column;
1105
+ gap: 1rem;
1106
+ }
1107
+
1108
+ .section-header h2 {
1109
+ font-size: 1.8rem;
1110
+ }
1111
+
1112
+ .highlight-text {
1113
+ font-size: 1.1rem;
1114
+ }
1115
+
1116
+ .footer-links {
1117
+ grid-template-columns: 1fr;
1118
+ }
1119
+ }
subscription-portal.html ADDED
@@ -0,0 +1,1269 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Unity Fleet - Subscription Portal</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* MVP Component specific styles */
14
+ .component-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 2rem;
18
+ }
19
+
20
+ .component-header {
21
+ text-align: center;
22
+ margin-bottom: 3rem;
23
+ }
24
+
25
+ .component-header h1 {
26
+ font-size: 2.5rem;
27
+ margin-bottom: 1rem;
28
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ -webkit-text-fill-color: transparent;
32
+ }
33
+
34
+ .component-header p {
35
+ font-size: 1.2rem;
36
+ max-width: 800px;
37
+ margin: 0 auto;
38
+ opacity: 0.8;
39
+ }
40
+
41
+ .component-content {
42
+ background: var(--glass-bg);
43
+ border: 1px solid var(--glass-border);
44
+ border-radius: 16px;
45
+ padding: 2rem;
46
+ margin-bottom: 3rem;
47
+ backdrop-filter: blur(10px);
48
+ }
49
+
50
+ .back-to-home {
51
+ display: inline-block;
52
+ margin-top: 2rem;
53
+ padding: 0.8rem 1.5rem;
54
+ background: transparent;
55
+ border: 1px solid var(--accent-color-1);
56
+ color: var(--accent-color-1);
57
+ border-radius: 4px;
58
+ font-family: var(--font-primary);
59
+ font-weight: 500;
60
+ text-transform: uppercase;
61
+ letter-spacing: 1px;
62
+ transition: all var(--transition-medium);
63
+ }
64
+
65
+ .back-to-home:hover {
66
+ background: rgba(0, 224, 255, 0.1);
67
+ transform: translateY(-3px);
68
+ }
69
+
70
+ /* Subscription Portal specific styles */
71
+ .subscription-portal-container {
72
+ display: flex;
73
+ flex-direction: column;
74
+ align-items: center;
75
+ padding: 1rem;
76
+ }
77
+
78
+ .portal-interface {
79
+ width: 100%;
80
+ max-width: 900px;
81
+ background-color: #0B0B0F;
82
+ border-radius: 16px;
83
+ overflow: hidden;
84
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
85
+ border: 1px solid rgba(0, 224, 255, 0.3);
86
+ margin-bottom: 2rem;
87
+ }
88
+
89
+ .portal-header {
90
+ background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
91
+ padding: 1.5rem;
92
+ display: flex;
93
+ justify-content: space-between;
94
+ align-items: center;
95
+ }
96
+
97
+ .portal-header h2 {
98
+ margin: 0;
99
+ font-size: 1.5rem;
100
+ }
101
+
102
+ .user-info {
103
+ display: flex;
104
+ align-items: center;
105
+ }
106
+
107
+ .user-avatar {
108
+ width: 40px;
109
+ height: 40px;
110
+ border-radius: 50%;
111
+ background: var(--accent-color-1);
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ margin-right: 1rem;
116
+ font-size: 1.2rem;
117
+ }
118
+
119
+ .user-name {
120
+ font-weight: bold;
121
+ }
122
+
123
+ .user-plan {
124
+ font-size: 0.8rem;
125
+ opacity: 0.8;
126
+ }
127
+
128
+ .portal-nav {
129
+ display: flex;
130
+ background: rgba(0, 0, 0, 0.3);
131
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
132
+ }
133
+
134
+ .nav-tab {
135
+ padding: 1rem 1.5rem;
136
+ cursor: pointer;
137
+ transition: all 0.3s ease;
138
+ position: relative;
139
+ }
140
+
141
+ .nav-tab:hover {
142
+ background: rgba(0, 224, 255, 0.1);
143
+ }
144
+
145
+ .nav-tab.active {
146
+ color: var(--accent-color-1);
147
+ }
148
+
149
+ .nav-tab.active::after {
150
+ content: '';
151
+ position: absolute;
152
+ bottom: 0;
153
+ left: 0;
154
+ width: 100%;
155
+ height: 3px;
156
+ background: var(--accent-color-1);
157
+ }
158
+
159
+ .portal-body {
160
+ padding: 2rem;
161
+ }
162
+
163
+ .tab-content {
164
+ display: none;
165
+ }
166
+
167
+ .tab-content.active {
168
+ display: block;
169
+ }
170
+
171
+ /* Subscription Plans Tab */
172
+ .subscription-plans {
173
+ display: grid;
174
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
175
+ gap: 2rem;
176
+ margin-bottom: 2rem;
177
+ }
178
+
179
+ .plan-card {
180
+ background: rgba(255, 255, 255, 0.05);
181
+ border-radius: 12px;
182
+ padding: 1.5rem;
183
+ border: 1px solid rgba(255, 255, 255, 0.1);
184
+ transition: all 0.3s ease;
185
+ display: flex;
186
+ flex-direction: column;
187
+ height: 100%;
188
+ }
189
+
190
+ .plan-card:hover {
191
+ transform: translateY(-10px);
192
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
193
+ }
194
+
195
+ .plan-card.current {
196
+ border: 2px solid var(--accent-color-1);
197
+ background: rgba(0, 224, 255, 0.1);
198
+ }
199
+
200
+ .plan-header {
201
+ margin-bottom: 1.5rem;
202
+ text-align: center;
203
+ }
204
+
205
+ .plan-name {
206
+ font-size: 1.5rem;
207
+ font-weight: bold;
208
+ margin-bottom: 0.5rem;
209
+ color: var(--accent-color-1);
210
+ }
211
+
212
+ .plan-price {
213
+ font-size: 2rem;
214
+ font-weight: bold;
215
+ margin-bottom: 0.5rem;
216
+ }
217
+
218
+ .plan-billing {
219
+ font-size: 0.8rem;
220
+ opacity: 0.7;
221
+ }
222
+
223
+ .plan-features {
224
+ margin-bottom: 1.5rem;
225
+ flex-grow: 1;
226
+ }
227
+
228
+ .plan-feature {
229
+ display: flex;
230
+ align-items: center;
231
+ margin-bottom: 0.8rem;
232
+ }
233
+
234
+ .plan-feature i {
235
+ color: var(--accent-color-1);
236
+ margin-right: 0.5rem;
237
+ }
238
+
239
+ .plan-actions {
240
+ margin-top: auto;
241
+ }
242
+
243
+ .plan-button {
244
+ width: 100%;
245
+ padding: 0.8rem;
246
+ border-radius: 8px;
247
+ text-align: center;
248
+ cursor: pointer;
249
+ transition: all 0.3s ease;
250
+ }
251
+
252
+ .select-plan {
253
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
254
+ color: #000;
255
+ border: none;
256
+ }
257
+
258
+ .select-plan:hover {
259
+ transform: translateY(-3px);
260
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
261
+ }
262
+
263
+ .current-plan {
264
+ background: transparent;
265
+ border: 1px solid var(--accent-color-1);
266
+ color: var(--accent-color-1);
267
+ }
268
+
269
+ /* Usage Tab */
270
+ .usage-overview {
271
+ display: grid;
272
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
273
+ gap: 1.5rem;
274
+ margin-bottom: 2rem;
275
+ }
276
+
277
+ .usage-stat {
278
+ background: rgba(255, 255, 255, 0.05);
279
+ border-radius: 12px;
280
+ padding: 1.5rem;
281
+ border: 1px solid rgba(255, 255, 255, 0.1);
282
+ text-align: center;
283
+ }
284
+
285
+ .stat-value {
286
+ font-size: 2.5rem;
287
+ font-weight: bold;
288
+ margin-bottom: 0.5rem;
289
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
290
+ -webkit-background-clip: text;
291
+ background-clip: text;
292
+ -webkit-text-fill-color: transparent;
293
+ }
294
+
295
+ .stat-label {
296
+ font-size: 0.9rem;
297
+ opacity: 0.8;
298
+ }
299
+
300
+ .usage-chart {
301
+ background: rgba(0, 0, 0, 0.3);
302
+ border-radius: 12px;
303
+ padding: 1.5rem;
304
+ margin-bottom: 2rem;
305
+ height: 300px;
306
+ position: relative;
307
+ }
308
+
309
+ .chart-title {
310
+ margin-top: 0;
311
+ margin-bottom: 1rem;
312
+ font-size: 1.2rem;
313
+ color: var(--accent-color-1);
314
+ }
315
+
316
+ .chart-container {
317
+ height: 250px;
318
+ display: flex;
319
+ align-items: flex-end;
320
+ justify-content: space-between;
321
+ padding-top: 20px;
322
+ }
323
+
324
+ .chart-bar {
325
+ width: 8%;
326
+ background: linear-gradient(to top, rgba(0, 224, 255, 0.3), rgba(53, 242, 219, 0.7));
327
+ border-radius: 4px 4px 0 0;
328
+ position: relative;
329
+ transition: height 1s ease;
330
+ }
331
+
332
+ .chart-bar::before {
333
+ content: attr(data-value);
334
+ position: absolute;
335
+ top: -25px;
336
+ left: 50%;
337
+ transform: translateX(-50%);
338
+ font-size: 0.8rem;
339
+ }
340
+
341
+ .chart-bar::after {
342
+ content: attr(data-label);
343
+ position: absolute;
344
+ bottom: -25px;
345
+ left: 50%;
346
+ transform: translateX(-50%);
347
+ font-size: 0.8rem;
348
+ opacity: 0.7;
349
+ }
350
+
351
+ .recent-activity {
352
+ background: rgba(255, 255, 255, 0.05);
353
+ border-radius: 12px;
354
+ padding: 1.5rem;
355
+ border: 1px solid rgba(255, 255, 255, 0.1);
356
+ }
357
+
358
+ .activity-title {
359
+ margin-top: 0;
360
+ margin-bottom: 1rem;
361
+ font-size: 1.2rem;
362
+ color: var(--accent-color-1);
363
+ }
364
+
365
+ .activity-list {
366
+ list-style: none;
367
+ padding: 0;
368
+ margin: 0;
369
+ }
370
+
371
+ .activity-item {
372
+ display: flex;
373
+ justify-content: space-between;
374
+ padding: 1rem 0;
375
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
376
+ }
377
+
378
+ .activity-item:last-child {
379
+ border-bottom: none;
380
+ }
381
+
382
+ .activity-details {
383
+ display: flex;
384
+ align-items: center;
385
+ }
386
+
387
+ .activity-icon {
388
+ width: 40px;
389
+ height: 40px;
390
+ border-radius: 50%;
391
+ background: rgba(0, 224, 255, 0.1);
392
+ display: flex;
393
+ align-items: center;
394
+ justify-content: center;
395
+ margin-right: 1rem;
396
+ color: var(--accent-color-1);
397
+ }
398
+
399
+ .activity-info h4 {
400
+ margin: 0;
401
+ margin-bottom: 0.3rem;
402
+ }
403
+
404
+ .activity-info p {
405
+ margin: 0;
406
+ font-size: 0.8rem;
407
+ opacity: 0.7;
408
+ }
409
+
410
+ .activity-date {
411
+ font-size: 0.8rem;
412
+ opacity: 0.7;
413
+ align-self: center;
414
+ }
415
+
416
+ /* Account Tab */
417
+ .account-section {
418
+ background: rgba(255, 255, 255, 0.05);
419
+ border-radius: 12px;
420
+ padding: 1.5rem;
421
+ border: 1px solid rgba(255, 255, 255, 0.1);
422
+ margin-bottom: 2rem;
423
+ }
424
+
425
+ .section-title {
426
+ margin-top: 0;
427
+ margin-bottom: 1.5rem;
428
+ font-size: 1.2rem;
429
+ color: var(--accent-color-1);
430
+ display: flex;
431
+ justify-content: space-between;
432
+ align-items: center;
433
+ }
434
+
435
+ .edit-button {
436
+ font-size: 0.9rem;
437
+ padding: 0.5rem 1rem;
438
+ background: transparent;
439
+ border: 1px solid var(--accent-color-1);
440
+ color: var(--accent-color-1);
441
+ border-radius: 4px;
442
+ cursor: pointer;
443
+ transition: all 0.3s ease;
444
+ }
445
+
446
+ .edit-button:hover {
447
+ background: rgba(0, 224, 255, 0.1);
448
+ }
449
+
450
+ .form-group {
451
+ margin-bottom: 1.5rem;
452
+ }
453
+
454
+ .form-group label {
455
+ display: block;
456
+ margin-bottom: 0.5rem;
457
+ font-size: 0.9rem;
458
+ opacity: 0.8;
459
+ }
460
+
461
+ .form-group input {
462
+ width: 100%;
463
+ padding: 0.8rem;
464
+ background: rgba(255, 255, 255, 0.05);
465
+ border: 1px solid rgba(255, 255, 255, 0.1);
466
+ border-radius: 4px;
467
+ color: white;
468
+ }
469
+
470
+ .form-row {
471
+ display: flex;
472
+ gap: 1rem;
473
+ }
474
+
475
+ .form-row .form-group {
476
+ flex: 1;
477
+ }
478
+
479
+ .payment-method {
480
+ display: flex;
481
+ align-items: center;
482
+ padding: 1rem;
483
+ background: rgba(255, 255, 255, 0.05);
484
+ border-radius: 8px;
485
+ margin-bottom: 1rem;
486
+ }
487
+
488
+ .payment-icon {
489
+ font-size: 1.5rem;
490
+ margin-right: 1rem;
491
+ color: var(--accent-color-1);
492
+ }
493
+
494
+ .payment-details {
495
+ flex: 1;
496
+ }
497
+
498
+ .payment-details h4 {
499
+ margin: 0;
500
+ margin-bottom: 0.3rem;
501
+ }
502
+
503
+ .payment-details p {
504
+ margin: 0;
505
+ font-size: 0.8rem;
506
+ opacity: 0.7;
507
+ }
508
+
509
+ .payment-actions {
510
+ display: flex;
511
+ gap: 0.5rem;
512
+ }
513
+
514
+ .payment-actions button {
515
+ padding: 0.5rem;
516
+ background: transparent;
517
+ border: 1px solid rgba(255, 255, 255, 0.2);
518
+ color: white;
519
+ border-radius: 4px;
520
+ cursor: pointer;
521
+ transition: all 0.3s ease;
522
+ }
523
+
524
+ .payment-actions button:hover {
525
+ background: rgba(255, 255, 255, 0.1);
526
+ }
527
+
528
+ .add-payment {
529
+ display: flex;
530
+ align-items: center;
531
+ justify-content: center;
532
+ padding: 1rem;
533
+ background: rgba(255, 255, 255, 0.05);
534
+ border: 1px dashed rgba(255, 255, 255, 0.2);
535
+ border-radius: 8px;
536
+ cursor: pointer;
537
+ transition: all 0.3s ease;
538
+ }
539
+
540
+ .add-payment:hover {
541
+ background: rgba(0, 224, 255, 0.1);
542
+ border-color: var(--accent-color-1);
543
+ }
544
+
545
+ .add-payment i {
546
+ margin-right: 0.5rem;
547
+ color: var(--accent-color-1);
548
+ }
549
+
550
+ /* Billing Tab */
551
+ .billing-summary {
552
+ display: grid;
553
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
554
+ gap: 1.5rem;
555
+ margin-bottom: 2rem;
556
+ }
557
+
558
+ .billing-stat {
559
+ background: rgba(255, 255, 255, 0.05);
560
+ border-radius: 12px;
561
+ padding: 1.5rem;
562
+ border: 1px solid rgba(255, 255, 255, 0.1);
563
+ text-align: center;
564
+ }
565
+
566
+ .invoices {
567
+ background: rgba(255, 255, 255, 0.05);
568
+ border-radius: 12px;
569
+ padding: 1.5rem;
570
+ border: 1px solid rgba(255, 255, 255, 0.1);
571
+ }
572
+
573
+ .invoice-list {
574
+ list-style: none;
575
+ padding: 0;
576
+ margin: 0;
577
+ }
578
+
579
+ .invoice-item {
580
+ display: flex;
581
+ justify-content: space-between;
582
+ padding: 1rem 0;
583
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
584
+ }
585
+
586
+ .invoice-item:last-child {
587
+ border-bottom: none;
588
+ }
589
+
590
+ .invoice-details {
591
+ display: flex;
592
+ flex-direction: column;
593
+ }
594
+
595
+ .invoice-id {
596
+ font-size: 0.8rem;
597
+ opacity: 0.7;
598
+ margin-bottom: 0.3rem;
599
+ }
600
+
601
+ .invoice-date {
602
+ font-size: 0.9rem;
603
+ }
604
+
605
+ .invoice-amount {
606
+ font-weight: bold;
607
+ }
608
+
609
+ .invoice-status {
610
+ padding: 0.3rem 0.8rem;
611
+ border-radius: 20px;
612
+ font-size: 0.8rem;
613
+ }
614
+
615
+ .status-paid {
616
+ background: rgba(76, 175, 80, 0.2);
617
+ color: #4CAF50;
618
+ }
619
+
620
+ .status-pending {
621
+ background: rgba(255, 193, 7, 0.2);
622
+ color: #FFC107;
623
+ }
624
+
625
+ .invoice-actions {
626
+ display: flex;
627
+ align-items: center;
628
+ }
629
+
630
+ .invoice-actions a {
631
+ margin-left: 1rem;
632
+ color: var(--accent-color-1);
633
+ font-size: 0.9rem;
634
+ }
635
+
636
+ .portal-footer {
637
+ background: rgba(0, 0, 0, 0.3);
638
+ padding: 1rem;
639
+ display: flex;
640
+ justify-content: space-between;
641
+ align-items: center;
642
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
643
+ }
644
+
645
+ .portal-actions {
646
+ display: flex;
647
+ gap: 1rem;
648
+ }
649
+
650
+ .portal-actions button {
651
+ padding: 0.5rem 1rem;
652
+ border-radius: 4px;
653
+ background: transparent;
654
+ border: 1px solid var(--accent-color-1);
655
+ color: var(--accent-color-1);
656
+ cursor: pointer;
657
+ transition: all 0.3s ease;
658
+ }
659
+
660
+ .portal-actions button:hover {
661
+ background: rgba(0, 224, 255, 0.1);
662
+ }
663
+
664
+ .portal-actions button.primary {
665
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
666
+ color: #000;
667
+ border: none;
668
+ }
669
+
670
+ .portal-actions button.primary:hover {
671
+ transform: translateY(-3px);
672
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
673
+ }
674
+
675
+ .portal-info {
676
+ font-size: 0.9rem;
677
+ opacity: 0.7;
678
+ }
679
+ </style>
680
+ </head>
681
+ <body>
682
+ <div class="noise-overlay"></div>
683
+
684
+ <header>
685
+ <nav>
686
+ <div class="logo">UNITY FLEET</div>
687
+ <div class="nav-links">
688
+ <a href="../index.html#what-is-the-link">What is The Link</a>
689
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
690
+ <a href="../index.html#impact-equity">Impact & Equity</a>
691
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
692
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
693
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
694
+ </div>
695
+ <div class="mobile-nav-toggle">
696
+ <i class="fas fa-bars"></i>
697
+ </div>
698
+ </nav>
699
+ </header>
700
+
701
+ <main class="component-container">
702
+ <div class="component-header">
703
+ <h1>SUBSCRIPTION PORTAL</h1>
704
+ <p>Manage your Unity Fleet subscription, track usage, and access billing information through our intuitive customer portal.</p>
705
+ </div>
706
+
707
+ <div class="component-content">
708
+ <div class="subscription-portal-container">
709
+ <div class="portal-interface">
710
+ <div class="portal-header">
711
+ <h2>Unity Fleet Customer Portal</h2>
712
+ <div class="user-info">
713
+ <div class="user-avatar">
714
+ <i class="fas fa-user"></i>
715
+ </div>
716
+ <div>
717
+ <div class="user-name">John Doe</div>
718
+ <div class="user-plan">Premium Plan</div>
719
+ </div>
720
+ </div>
721
+ </div>
722
+
723
+ <div class="portal-nav">
724
+ <div class="nav-tab active" data-tab="plans">Subscription Plans</div>
725
+ <div class="nav-tab" data-tab="usage">Usage & Activity</div>
726
+ <div class="nav-tab" data-tab="account">Account Settings</div>
727
+ <div class="nav-tab" data-tab="billing">Billing & Invoices</div>
728
+ </div>
729
+
730
+ <div class="portal-body">
731
+ <!-- Subscription Plans Tab -->
732
+ <div class="tab-content active" id="plans-tab">
733
+ <div class="subscription-plans">
734
+ <div class="plan-card">
735
+ <div class="plan-header">
736
+ <div class="plan-name">Basic</div>
737
+ <div class="plan-price">$99</div>
738
+ <div class="plan-billing">per month</div>
739
+ </div>
740
+ <div class="plan-features">
741
+ <div class="plan-feature">
742
+ <i class="fas fa-check"></i>
743
+ <span>4 vehicle reservations per month</span>
744
+ </div>
745
+ <div class="plan-feature">
746
+ <i class="fas fa-check"></i>
747
+ <span>Standard charging access</span>
748
+ </div>
749
+ <div class="plan-feature">
750
+ <i class="fas fa-check"></i>
751
+ <span>Basic lounge access</span>
752
+ </div>
753
+ <div class="plan-feature">
754
+ <i class="fas fa-check"></i>
755
+ <span>Standard vehicle selection</span>
756
+ </div>
757
+ <div class="plan-feature">
758
+ <i class="fas fa-times"></i>
759
+ <span>Priority booking</span>
760
+ </div>
761
+ <div class="plan-feature">
762
+ <i class="fas fa-times"></i>
763
+ <span>Premium vehicle access</span>
764
+ </div>
765
+ </div>
766
+ <div class="plan-actions">
767
+ <div class="plan-button select-plan">Select Plan</div>
768
+ </div>
769
+ </div>
770
+
771
+ <div class="plan-card current">
772
+ <div class="plan-header">
773
+ <div class="plan-name">Premium</div>
774
+ <div class="plan-price">$199</div>
775
+ <div class="plan-billing">per month</div>
776
+ </div>
777
+ <div class="plan-features">
778
+ <div class="plan-feature">
779
+ <i class="fas fa-check"></i>
780
+ <span>8 vehicle reservations per month</span>
781
+ </div>
782
+ <div class="plan-feature">
783
+ <i class="fas fa-check"></i>
784
+ <span>Priority charging access</span>
785
+ </div>
786
+ <div class="plan-feature">
787
+ <i class="fas fa-check"></i>
788
+ <span>Premium lounge access</span>
789
+ </div>
790
+ <div class="plan-feature">
791
+ <i class="fas fa-check"></i>
792
+ <span>Extended vehicle selection</span>
793
+ </div>
794
+ <div class="plan-feature">
795
+ <i class="fas fa-check"></i>
796
+ <span>Priority booking</span>
797
+ </div>
798
+ <div class="plan-feature">
799
+ <i class="fas fa-times"></i>
800
+ <span>Luxury vehicle access</span>
801
+ </div>
802
+ </div>
803
+ <div class="plan-actions">
804
+ <div class="plan-button current-plan">Current Plan</div>
805
+ </div>
806
+ </div>
807
+
808
+ <div class="plan-card">
809
+ <div class="plan-header">
810
+ <div class="plan-name">Elite</div>
811
+ <div class="plan-price">$349</div>
812
+ <div class="plan-billing">per month</div>
813
+ </div>
814
+ <div class="plan-features">
815
+ <div class="plan-feature">
816
+ <i class="fas fa-check"></i>
817
+ <span>Unlimited vehicle reservations</span>
818
+ </div>
819
+ <div class="plan-feature">
820
+ <i class="fas fa-check"></i>
821
+ <span>VIP charging access</span>
822
+ </div>
823
+ <div class="plan-feature">
824
+ <i class="fas fa-check"></i>
825
+ <span>Elite lounge access</span>
826
+ </div>
827
+ <div class="plan-feature">
828
+ <i class="fas fa-check"></i>
829
+ <span>Full vehicle selection</span>
830
+ </div>
831
+ <div class="plan-feature">
832
+ <i class="fas fa-check"></i>
833
+ <span>Priority booking</span>
834
+ </div>
835
+ <div class="plan-feature">
836
+ <i class="fas fa-check"></i>
837
+ <span>Luxury vehicle access</span>
838
+ </div>
839
+ </div>
840
+ <div class="plan-actions">
841
+ <div class="plan-button select-plan">Select Plan</div>
842
+ </div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+
847
+ <!-- Usage & Activity Tab -->
848
+ <div class="tab-content" id="usage-tab">
849
+ <div class="usage-overview">
850
+ <div class="usage-stat">
851
+ <div class="stat-value">6</div>
852
+ <div class="stat-label">Reservations Used</div>
853
+ </div>
854
+ <div class="usage-stat">
855
+ <div class="stat-value">2</div>
856
+ <div class="stat-label">Reservations Remaining</div>
857
+ </div>
858
+ <div class="usage-stat">
859
+ <div class="stat-value">14</div>
860
+ <div class="stat-label">Charging Sessions</div>
861
+ </div>
862
+ <div class="usage-stat">
863
+ <div class="stat-value">342</div>
864
+ <div class="stat-label">kWh Consumed</div>
865
+ </div>
866
+ </div>
867
+
868
+ <div class="usage-chart">
869
+ <h3 class="chart-title">Monthly Usage History</h3>
870
+ <div class="chart-container">
871
+ <div class="chart-bar" style="height: 30%;" data-value="2" data-label="Jan"></div>
872
+ <div class="chart-bar" style="height: 45%;" data-value="3" data-label="Feb"></div>
873
+ <div class="chart-bar" style="height: 60%;" data-value="4" data-label="Mar"></div>
874
+ <div class="chart-bar" style="height: 75%;" data-value="5" data-label="Apr"></div>
875
+ <div class="chart-bar" style="height: 90%;" data-value="6" data-label="May"></div>
876
+ <div class="chart-bar" style="height: 60%;" data-value="4" data-label="Jun"></div>
877
+ <div class="chart-bar" style="height: 45%;" data-value="3" data-label="Jul"></div>
878
+ <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Aug"></div>
879
+ <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Sep"></div>
880
+ <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Oct"></div>
881
+ <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Nov"></div>
882
+ <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Dec"></div>
883
+ </div>
884
+ </div>
885
+
886
+ <div class="recent-activity">
887
+ <h3 class="activity-title">Recent Activity</h3>
888
+ <ul class="activity-list">
889
+ <li class="activity-item">
890
+ <div class="activity-details">
891
+ <div class="activity-icon">
892
+ <i class="fas fa-car"></i>
893
+ </div>
894
+ <div class="activity-info">
895
+ <h4>Tesla Model 3 Reservation</h4>
896
+ <p>Downtown Springfield Hub</p>
897
+ </div>
898
+ </div>
899
+ <div class="activity-date">July 15, 2025</div>
900
+ </li>
901
+ <li class="activity-item">
902
+ <div class="activity-details">
903
+ <div class="activity-icon">
904
+ <i class="fas fa-charging-station"></i>
905
+ </div>
906
+ <div class="activity-info">
907
+ <h4>Charging Session</h4>
908
+ <p>Champaign-Urbana Hub • 42 kWh</p>
909
+ </div>
910
+ </div>
911
+ <div class="activity-date">July 10, 2025</div>
912
+ </li>
913
+ <li class="activity-item">
914
+ <div class="activity-details">
915
+ <div class="activity-icon">
916
+ <i class="fas fa-car"></i>
917
+ </div>
918
+ <div class="activity-info">
919
+ <h4>Rivian R1S Reservation</h4>
920
+ <p>Bloomington-Normal Hub</p>
921
+ </div>
922
+ </div>
923
+ <div class="activity-date">July 5, 2025</div>
924
+ </li>
925
+ <li class="activity-item">
926
+ <div class="activity-details">
927
+ <div class="activity-icon">
928
+ <i class="fas fa-credit-card"></i>
929
+ </div>
930
+ <div class="activity-info">
931
+ <h4>Monthly Subscription Payment</h4>
932
+ <p>Premium Plan • $199.00</p>
933
+ </div>
934
+ </div>
935
+ <div class="activity-date">July 1, 2025</div>
936
+ </li>
937
+ </ul>
938
+ </div>
939
+ </div>
940
+
941
+ <!-- Account Settings Tab -->
942
+ <div class="tab-content" id="account-tab">
943
+ <div class="account-section">
944
+ <h3 class="section-title">
945
+ Personal Information
946
+ <button class="edit-button">Edit</button>
947
+ </h3>
948
+ <div class="form-row">
949
+ <div class="form-group">
950
+ <label for="first-name">First Name</label>
951
+ <input type="text" id="first-name" value="John" disabled>
952
+ </div>
953
+ <div class="form-group">
954
+ <label for="last-name">Last Name</label>
955
+ <input type="text" id="last-name" value="Doe" disabled>
956
+ </div>
957
+ </div>
958
+ <div class="form-group">
959
+ <label for="email">Email Address</label>
960
+ <input type="email" id="email" value="[email protected]" disabled>
961
+ </div>
962
+ <div class="form-group">
963
+ <label for="phone">Phone Number</label>
964
+ <input type="tel" id="phone" value="(217) 555-1234" disabled>
965
+ </div>
966
+ </div>
967
+
968
+ <div class="account-section">
969
+ <h3 class="section-title">
970
+ Payment Methods
971
+ <button class="edit-button">Manage</button>
972
+ </h3>
973
+ <div class="payment-method">
974
+ <div class="payment-icon">
975
+ <i class="fab fa-cc-visa"></i>
976
+ </div>
977
+ <div class="payment-details">
978
+ <h4>Visa ending in 4242</h4>
979
+ <p>Expires 05/2027</p>
980
+ </div>
981
+ <div class="payment-actions">
982
+ <button>Edit</button>
983
+ <button>Remove</button>
984
+ </div>
985
+ </div>
986
+ <div class="payment-method">
987
+ <div class="payment-icon">
988
+ <i class="fab fa-cc-mastercard"></i>
989
+ </div>
990
+ <div class="payment-details">
991
+ <h4>Mastercard ending in 8888</h4>
992
+ <p>Expires 12/2026</p>
993
+ </div>
994
+ <div class="payment-actions">
995
+ <button>Edit</button>
996
+ <button>Remove</button>
997
+ </div>
998
+ </div>
999
+ <div class="add-payment">
1000
+ <i class="fas fa-plus"></i>
1001
+ <span>Add Payment Method</span>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <div class="account-section">
1006
+ <h3 class="section-title">
1007
+ Notification Preferences
1008
+ <button class="edit-button">Edit</button>
1009
+ </h3>
1010
+ <div class="form-group">
1011
+ <label>
1012
+ <input type="checkbox" checked disabled>
1013
+ Reservation Confirmations
1014
+ </label>
1015
+ </div>
1016
+ <div class="form-group">
1017
+ <label>
1018
+ <input type="checkbox" checked disabled>
1019
+ Charging Completion Alerts
1020
+ </label>
1021
+ </div>
1022
+ <div class="form-group">
1023
+ <label>
1024
+ <input type="checkbox" checked disabled>
1025
+ Billing Notifications
1026
+ </label>
1027
+ </div>
1028
+ <div class="form-group">
1029
+ <label>
1030
+ <input type="checkbox" disabled>
1031
+ Marketing Communications
1032
+ </label>
1033
+ </div>
1034
+ </div>
1035
+ </div>
1036
+
1037
+ <!-- Billing & Invoices Tab -->
1038
+ <div class="tab-content" id="billing-tab">
1039
+ <div class="billing-summary">
1040
+ <div class="billing-stat">
1041
+ <div class="stat-value">$199</div>
1042
+ <div class="stat-label">Current Monthly Plan</div>
1043
+ </div>
1044
+ <div class="billing-stat">
1045
+ <div class="stat-value">Aug 1</div>
1046
+ <div class="stat-label">Next Billing Date</div>
1047
+ </div>
1048
+ <div class="billing-stat">
1049
+ <div class="stat-value">$0</div>
1050
+ <div class="stat-label">Additional Charges</div>
1051
+ </div>
1052
+ <div class="billing-stat">
1053
+ <div class="stat-value">$199</div>
1054
+ <div class="stat-label">Next Payment</div>
1055
+ </div>
1056
+ </div>
1057
+
1058
+ <div class="invoices">
1059
+ <h3 class="section-title">
1060
+ Recent Invoices
1061
+ <button class="edit-button">View All</button>
1062
+ </h3>
1063
+ <ul class="invoice-list">
1064
+ <li class="invoice-item">
1065
+ <div class="invoice-details">
1066
+ <div class="invoice-id">INV-2025-07-01</div>
1067
+ <div class="invoice-date">July 1, 2025</div>
1068
+ </div>
1069
+ <div class="invoice-amount">$199.00</div>
1070
+ <div class="invoice-status status-paid">Paid</div>
1071
+ <div class="invoice-actions">
1072
+ <a href="#"><i class="fas fa-download"></i> PDF</a>
1073
+ </div>
1074
+ </li>
1075
+ <li class="invoice-item">
1076
+ <div class="invoice-details">
1077
+ <div class="invoice-id">INV-2025-06-01</div>
1078
+ <div class="invoice-date">June 1, 2025</div>
1079
+ </div>
1080
+ <div class="invoice-amount">$199.00</div>
1081
+ <div class="invoice-status status-paid">Paid</div>
1082
+ <div class="invoice-actions">
1083
+ <a href="#"><i class="fas fa-download"></i> PDF</a>
1084
+ </div>
1085
+ </li>
1086
+ <li class="invoice-item">
1087
+ <div class="invoice-details">
1088
+ <div class="invoice-id">INV-2025-05-01</div>
1089
+ <div class="invoice-date">May 1, 2025</div>
1090
+ </div>
1091
+ <div class="invoice-amount">$199.00</div>
1092
+ <div class="invoice-status status-paid">Paid</div>
1093
+ <div class="invoice-actions">
1094
+ <a href="#"><i class="fas fa-download"></i> PDF</a>
1095
+ </div>
1096
+ </li>
1097
+ <li class="invoice-item">
1098
+ <div class="invoice-details">
1099
+ <div class="invoice-id">INV-2025-04-01</div>
1100
+ <div class="invoice-date">April 1, 2025</div>
1101
+ </div>
1102
+ <div class="invoice-amount">$199.00</div>
1103
+ <div class="invoice-status status-paid">Paid</div>
1104
+ <div class="invoice-actions">
1105
+ <a href="#"><i class="fas fa-download"></i> PDF</a>
1106
+ </div>
1107
+ </li>
1108
+ </ul>
1109
+ </div>
1110
+ </div>
1111
+ </div>
1112
+
1113
+ <div class="portal-footer">
1114
+ <div class="portal-actions">
1115
+ <button>Contact Support</button>
1116
+ <button class="primary">Make a Reservation</button>
1117
+ </div>
1118
+ <div class="portal-info">
1119
+ Last Login: July 20, 2025 | 10:45 AM
1120
+ </div>
1121
+ </div>
1122
+ </div>
1123
+ </div>
1124
+ </div>
1125
+
1126
+ <div class="component-features">
1127
+ <h2>Key Features</h2>
1128
+ <ul class="features-list">
1129
+ <li>Comprehensive subscription plan management with tier comparison and upgrade options</li>
1130
+ <li>Detailed usage tracking with visual charts and activity history</li>
1131
+ <li>Account settings management including personal information and notification preferences</li>
1132
+ <li>Billing dashboard with invoice history and payment method management</li>
1133
+ <li>Integrated reservation system with direct access to vehicle booking</li>
1134
+ <li>Real-time subscription status monitoring with remaining allocations</li>
1135
+ <li>Responsive design for seamless access across desktop and mobile devices</li>
1136
+ </ul>
1137
+ </div>
1138
+
1139
+ <a href="../index.html#mvp-showcase" class="back-to-home">
1140
+ <i class="fas fa-arrow-left"></i> Back to MVP Showcase
1141
+ </a>
1142
+ </main>
1143
+
1144
+ <footer>
1145
+ <div class="container">
1146
+ <div class="footer-content">
1147
+ <div class="footer-logo">
1148
+ <div class="logo">UNITY FLEET</div>
1149
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
1150
+ </div>
1151
+
1152
+ <div class="footer-links">
1153
+ <div class="link-column">
1154
+ <h4>Navigation</h4>
1155
+ <a href="../index.html#what-is-the-link">What is The Link</a>
1156
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
1157
+ <a href="../index.html#impact-equity">Impact & Equity</a>
1158
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
1159
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
1160
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
1161
+ </div>
1162
+
1163
+ <div class="link-column">
1164
+ <h4>Contact</h4>
1165
+ <a href="mailto:[email protected]">[email protected]</a>
1166
+ <a href="tel:+12175551234">+1 (217) 555-1234</a>
1167
+ <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
1168
+ </div>
1169
+
1170
+ <div class="link-column">
1171
+ <h4>Legal</h4>
1172
+ <a href="#">Privacy Policy</a>
1173
+ <a href="#">Terms of Service</a>
1174
+ <a href="#">Accessibility</a>
1175
+ </div>
1176
+ </div>
1177
+
1178
+ <div class="footer-social">
1179
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
1180
+ <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
1181
+ <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
1182
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
1183
+ </div>
1184
+ </div>
1185
+
1186
+ <div class="footer-bottom">
1187
+ <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
1188
+ </div>
1189
+ </div>
1190
+ </footer>
1191
+
1192
+ <script>
1193
+ // Mobile navigation toggle
1194
+ document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
1195
+ document.querySelector('.nav-links').classList.toggle('active');
1196
+ this.innerHTML = document.querySelector('.nav-links').classList.contains('active')
1197
+ ? '<i class="fas fa-times"></i>'
1198
+ : '<i class="fas fa-bars"></i>';
1199
+ });
1200
+
1201
+ // Subscription portal tab navigation
1202
+ document.addEventListener('DOMContentLoaded', function() {
1203
+ const navTabs = document.querySelectorAll('.nav-tab');
1204
+ const tabContents = document.querySelectorAll('.tab-content');
1205
+
1206
+ navTabs.forEach(tab => {
1207
+ tab.addEventListener('click', function() {
1208
+ // Remove active class from all tabs
1209
+ navTabs.forEach(t => t.classList.remove('active'));
1210
+
1211
+ // Add active class to clicked tab
1212
+ this.classList.add('active');
1213
+
1214
+ // Hide all tab contents
1215
+ tabContents.forEach(content => content.classList.remove('active'));
1216
+
1217
+ // Show selected tab content
1218
+ const tabId = this.getAttribute('data-tab') + '-tab';
1219
+ document.getElementById(tabId).classList.add('active');
1220
+ });
1221
+ });
1222
+
1223
+ // Animate chart bars on load
1224
+ const chartBars = document.querySelectorAll('.chart-bar');
1225
+ chartBars.forEach(bar => {
1226
+ const height = bar.style.height;
1227
+ bar.style.height = '0%';
1228
+ setTimeout(() => {
1229
+ bar.style.height = height;
1230
+ }, 300);
1231
+ });
1232
+
1233
+ // Plan card hover effects
1234
+ const planCards = document.querySelectorAll('.plan-card');
1235
+ planCards.forEach(card => {
1236
+ card.addEventListener('mouseenter', function() {
1237
+ if (!this.classList.contains('current')) {
1238
+ this.style.transform = 'translateY(-10px)';
1239
+ this.style.boxShadow = '0 15px 30px rgba(0, 224, 255, 0.2)';
1240
+ }
1241
+ });
1242
+
1243
+ card.addEventListener('mouseleave', function() {
1244
+ if (!this.classList.contains('current')) {
1245
+ this.style.transform = '';
1246
+ this.style.boxShadow = '';
1247
+ }
1248
+ });
1249
+ });
1250
+
1251
+ // Edit buttons functionality
1252
+ const editButtons = document.querySelectorAll('.edit-button');
1253
+ editButtons.forEach(button => {
1254
+ button.addEventListener('click', function() {
1255
+ alert('Edit functionality would be implemented in the production version.');
1256
+ });
1257
+ });
1258
+
1259
+ // Plan selection functionality
1260
+ const selectPlanButtons = document.querySelectorAll('.select-plan');
1261
+ selectPlanButtons.forEach(button => {
1262
+ button.addEventListener('click', function() {
1263
+ alert('Plan change functionality would be implemented in the production version.');
1264
+ });
1265
+ });
1266
+ });
1267
+ </script>
1268
+ </body>
1269
+ </html>
technical_architecture.md ADDED
@@ -0,0 +1,456 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Unity Fleet MVP Technical Architecture
2
+
3
+ This document outlines the technical architecture for the Unity Fleet MVP components, defining the technology stack, data models, integration points, and deployment strategy.
4
+
5
+ ## Overall Architecture
6
+
7
+ The Unity Fleet MVP suite will follow a modern web application architecture with these key characteristics:
8
+
9
+ - **Frontend**: React-based single-page applications (SPAs) for all user interfaces
10
+ - **Backend**: Simulated API endpoints with mock data (no actual backend server required for MVP)
11
+ - **Data Storage**: Local browser storage (localStorage/IndexedDB) for persistence during demonstrations
12
+ - **Deployment**: Static site hosting for all components
13
+ - **Integration**: Common data models and shared components across all MVPs
14
+
15
+ ### System Architecture Diagram
16
+
17
+ ```
18
+ ┌─────────────────────────────────────────────────────────────┐
19
+ │ │
20
+ │ User Interface Layer │
21
+ │ │
22
+ ├───────────┬───────────┬───────────┬───────────┬───────────┬─┘
23
+ │ Mobile │ Charging │ Energy │Subscription│Interactive│
24
+ │ App │ Hub │Management │ Portal │Deployment │
25
+ │ Prototype │ Dashboard │Simulation │ │ Map │
26
+ └───────────┴───────────┴───────────┴───────────┴───────────┘
27
+ │ │ │ │ │
28
+ ▼ ▼ ▼ ▼ ▼
29
+ ┌─────────────────────────────────────────────────────────────┐
30
+ │ │
31
+ │ Shared Component Library │
32
+ │ │
33
+ ├─────────────────────────────────────────────────────────────┤
34
+ │ │
35
+ │ Mock Data Services │
36
+ │ │
37
+ ├─────────────────────────────────────────────────────────────┤
38
+ │ │
39
+ │ Local Storage Persistence │
40
+ │ │
41
+ └─────────────────────────────────────────────────────────────┘
42
+ ```
43
+
44
+ ## Technology Stack
45
+
46
+ ### Frontend Technologies
47
+
48
+ - **Framework**: React 18
49
+ - **State Management**: Redux Toolkit
50
+ - **Styling**: Tailwind CSS with custom theme
51
+ - **UI Components**: Custom component library based on Material UI
52
+ - **Routing**: React Router
53
+ - **Data Visualization**: D3.js and React-Vis
54
+ - **Maps**: Leaflet with OpenStreetMap
55
+ - **Animations**: Framer Motion
56
+ - **3D Rendering** (if needed): Three.js
57
+
58
+ ### Development Tools
59
+
60
+ - **Package Manager**: npm
61
+ - **Build Tool**: Vite
62
+ - **Version Control**: Git
63
+ - **Code Quality**: ESLint, Prettier
64
+ - **Testing**: Jest, React Testing Library
65
+ - **Design System**: Storybook
66
+
67
+ ## Component-Specific Architecture
68
+
69
+ ### 1. Mobile Application Prototype
70
+
71
+ ```
72
+ ┌─────────────────────────────────────────────────────────────┐
73
+ │ Mobile App Prototype │
74
+ ├─────────────────────────────────────────────────────────────┤
75
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
76
+ │ │ Vehicle │ │ Reservation │ │ User │ │
77
+ │ │ Browser │ │ System │ │ Dashboard │ │
78
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
79
+ │ ┌─────────────┐ ┌───────────��─┐ ┌─────────────┐ │
80
+ │ │ Payment │ │ Trip │ │ Notification │ │
81
+ │ │ Simulation │ │ Planner │ │ Center │ │
82
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
83
+ ├─────────────────────────────────────────────────────────────┤
84
+ │ Mock API Services │
85
+ ├─────────────────────────────────────────────────────────────┤
86
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
87
+ │ │ Vehicle │ │ User │ │ Reservation │ │
88
+ │ │ Data │ │ Data │ │ Data │ │
89
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
90
+ └─────────────────────────────────────────────────────────────┘
91
+ ```
92
+
93
+ **Key Technical Features**:
94
+ - Responsive design with mobile-first approach
95
+ - Vehicle data with images, specifications, and availability
96
+ - Interactive calendar for date/time selection
97
+ - Simulated payment processing
98
+ - Geolocation integration for pickup/dropoff
99
+ - Trip planning with charging stop recommendations
100
+
101
+ ### 2. Charging Hub Management Dashboard
102
+
103
+ ```
104
+ ┌─────────────────────────────────────────────────────────────┐
105
+ │ Charging Hub Dashboard │
106
+ ├─────────────────────────────────────────────────────────────┤
107
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
108
+ │ │ Station │ │ Energy │ │ Maintenance │ │
109
+ │ │ Monitor │ │ Analytics │ │ Scheduler │ │
110
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
111
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
112
+ │ │ User │ │ Revenue │ │ Alert │ │
113
+ │ │ Access │ │ Tracking │ │ System │ │
114
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
115
+ ├─────────────────────────────────────────────────────────────┤
116
+ │ Mock API Services │
117
+ ├─────────────────────────────────────────────────────────────┤
118
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
119
+ │ │ Station │ │ Energy │ │ User │ │
120
+ │ │ Data │ │ Data │ │ Data │ │
121
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
122
+ └─────────────────────────────────────────────────────────────┘
123
+ ```
124
+
125
+ **Key Technical Features**:
126
+ - Real-time data visualization with auto-updating charts
127
+ - Interactive station status map
128
+ - Time-series data for energy usage patterns
129
+ - Alert system with priority levels
130
+ - Maintenance ticket management
131
+ - Revenue and usage reporting
132
+
133
+ ### 3. Energy Management Simulation
134
+
135
+ ```
136
+ ┌─────────────────────────────────────────────────────────────┐
137
+ │ Energy Management Simulation │
138
+ ├────────────────────────────────────────────���────────────────┤
139
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
140
+ │ │ Solar │ │ Battery │ │ Grid │ │
141
+ │ │ Simulation │ │ Simulation │ │ Interaction │ │
142
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
143
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
144
+ │ │ Energy │ │ Cost │ │ Carbon │ │
145
+ │ │ Flow │ │ Calculator │ │ Savings │ │
146
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
147
+ ├─────────────────────────────────────────────────────────────┤
148
+ │ Simulation Engine │
149
+ ├─────────────────────────────────────────────────────────────┤
150
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
151
+ │ │ Weather │ │ Energy │ │ Pricing │ │
152
+ │ │ Data │ │ Models │ │ Data │ │
153
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
154
+ └─────────────────────────────────────────────────────────────┘
155
+ ```
156
+
157
+ **Key Technical Features**:
158
+ - Physics-based simulation of energy generation and consumption
159
+ - Weather data integration for solar production modeling
160
+ - Animated visualizations of energy flows
161
+ - Time controls (speed up/slow down/pause)
162
+ - Scenario testing with different parameters
163
+ - Real-time calculation of financial and environmental metrics
164
+
165
+ ### 4. Subscription Management Portal
166
+
167
+ ```
168
+ ┌─────────────────────────────────────────────────────────────┐
169
+ │ Subscription Management Portal │
170
+ ├─────────────────────────────────────────────────────────────┤
171
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
172
+ │ │ Tier │ │ Customer │ │ Usage │ │
173
+ │ │ Comparison │ │ Management │ │ Analytics │ │
174
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
175
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
176
+ │ │ Billing │ │ Subscription│ │ Revenue │ │
177
+ │ │ Simulation │ │ Pathways │ │ Projections │ │
178
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
179
+ ├─────────────────────────────────────────────────────────────┤
180
+ │ Mock API Services │
181
+ ├─────────────────────────────────────────────────────────────┤
182
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
183
+ │ │ Subscription│ │ Customer │ │ Usage │ │
184
+ │ │ Data │ │ Data │ │ Data │ │
185
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
186
+ └─────────────────────────────────────────────────────────────┘
187
+ ```
188
+
189
+ **Key Technical Features**:
190
+ - Interactive tier comparison with feature highlighting
191
+ - Customer profile management
192
+ - Usage tracking visualizations
193
+ - Billing cycle simulation
194
+ - Upgrade/downgrade pathway visualization
195
+ - Revenue projection modeling
196
+
197
+ ### 5. Interactive Deployment Map
198
+
199
+ ```
200
+ ┌─────────────────────────────────────────────────────────────┐
201
+ │ Interactive Deployment Map │
202
+ ├─────────────────────────────────────────────────────────────┤
203
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
204
+ │ │ Location │ │ Phase │ │ Population │ │
205
+ │ │ Map │ │ Timeline │ │ Coverage │ │
206
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
207
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
208
+ │ │Infrastructure│ │ EV │ │ Location │ │
209
+ │ │ Impact │ │ Adoption │ │ Details │ │
210
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
211
+ ├─────────────────────────────────────────────────────────────┤
212
+ │ Geospatial Services │
213
+ ├─────────────────────────────────────────────────────────────┤
214
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
215
+ │ │ Location │ │ Demographic │ │ Deployment │ │
216
+ │ │ Data │ │ Data │ │ Data │ │
217
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
218
+ └─────────────────────────────────────────────────────────────┘
219
+ ```
220
+
221
+ **Key Technical Features**:
222
+ - Interactive map with multiple data layers
223
+ - Timeline slider for phase visualization
224
+ - Demographic data overlays
225
+ - Infrastructure impact heatmaps
226
+ - Detailed location information panels
227
+ - Distance and coverage calculations
228
+
229
+ ### 6. ChainLink Tokenization Demonstration
230
+
231
+ ```
232
+ ┌─────────────────────────────────────────────────────────────┐
233
+ │ ChainLink Tokenization Demonstration │
234
+ ├─────────────────────────────────────────────────────────────┤
235
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
236
+ │ │ Token │ │ Asset │ │ Value │ │
237
+ │ │ Allocation │ │ Ownership │ │ Flow │ │
238
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
239
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
240
+ │ │ Transaction │ │ Stakeholder │ │ Token │ │
241
+ │ │ Simulation │ │ Dashboard │ │ Economics │ │
242
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
243
+ ├─────────────────────────────────────────────────────────────┤
244
+ │ Blockchain Simulation │
245
+ ├─────────────────────────────────────────────────────────────┤
246
+ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
247
+ │ │ Token │ │ Transaction │ │ Stakeholder │ │
248
+ │ │ Data │ │ Data │ │ Data │ │
249
+ │ └─────────────┘ └─────────────┘ └─────────────┘ │
250
+ └─────────────────────────────────────────────────────────────┘
251
+ ```
252
+
253
+ **Key Technical Features**:
254
+ - Simplified blockchain visualization
255
+ - Token allocation animations
256
+ - Asset ownership visualization
257
+ - Value flow diagrams with animation
258
+ - Transaction simulation with ledger updates
259
+ - Stakeholder dashboard with real-time updates
260
+
261
+ ## Data Models
262
+
263
+ ### Core Data Models
264
+
265
+ These data models will be shared across multiple components:
266
+
267
+ #### Vehicle Model
268
+ ```json
269
+ {
270
+ "id": "string",
271
+ "make": "string",
272
+ "model": "string",
273
+ "year": "number",
274
+ "type": "string",
275
+ "range": "number",
276
+ "batteryCapacity": "number",
277
+ "chargingSpeed": "number",
278
+ "images": ["string"],
279
+ "features": ["string"],
280
+ "dailyRate": "number",
281
+ "weeklyRate": "number",
282
+ "monthlyRate": "number",
283
+ "availability": {
284
+ "status": "string",
285
+ "nextAvailable": "date",
286
+ "location": "string"
287
+ }
288
+ }
289
+ ```
290
+
291
+ #### User Model
292
+ ```json
293
+ {
294
+ "id": "string",
295
+ "name": "string",
296
+ "email": "string",
297
+ "phone": "string",
298
+ "subscriptionTier": "string",
299
+ "joinDate": "date",
300
+ "paymentMethods": [{
301
+ "id": "string",
302
+ "type": "string",
303
+ "last4": "string",
304
+ "expiryDate": "string"
305
+ }],
306
+ "drivingHistory": {
307
+ "totalTrips": "number",
308
+ "totalMiles": "number",
309
+ "favoriteVehicles": ["string"]
310
+ }
311
+ }
312
+ ```
313
+
314
+ #### Charging Station Model
315
+ ```json
316
+ {
317
+ "id": "string",
318
+ "hubId": "string",
319
+ "type": "string",
320
+ "power": "number",
321
+ "status": "string",
322
+ "currentUser": "string",
323
+ "sessionStart": "date",
324
+ "energyDelivered": "number",
325
+ "maintenanceStatus": {
326
+ "lastMaintenance": "date",
327
+ "nextScheduled": "date",
328
+ "issues": ["string"]
329
+ }
330
+ }
331
+ ```
332
+
333
+ #### Hub Model
334
+ ```json
335
+ {
336
+ "id": "string",
337
+ "name": "string",
338
+ "location": {
339
+ "address": "string",
340
+ "city": "string",
341
+ "state": "string",
342
+ "zip": "string",
343
+ "coordinates": {
344
+ "lat": "number",
345
+ "lng": "number"
346
+ }
347
+ },
348
+ "stations": ["string"],
349
+ "solarCapacity": "number",
350
+ "batteryCapacity": "number",
351
+ "amenities": ["string"],
352
+ "operatingHours": {
353
+ "open": "string",
354
+ "close": "string",
355
+ "days": ["string"]
356
+ }
357
+ }
358
+ ```
359
+
360
+ #### Subscription Model
361
+ ```json
362
+ {
363
+ "id": "string",
364
+ "name": "string",
365
+ "monthlyPrice": "number",
366
+ "annualPrice": "number",
367
+ "features": [{
368
+ "name": "string",
369
+ "description": "string",
370
+ "included": "boolean"
371
+ }],
372
+ "vehicleAccess": ["string"],
373
+ "chargingCredits": "number",
374
+ "additionalBenefits": ["string"]
375
+ }
376
+ ```
377
+
378
+ ## Integration Strategy
379
+
380
+ ### Shared Components
381
+
382
+ The following components will be shared across multiple MVPs:
383
+
384
+ - **Navigation Bar**: Consistent navigation across all applications
385
+ - **User Authentication**: Simulated login/logout functionality
386
+ - **Vehicle Cards**: Standardized vehicle display components
387
+ - **Charging Station Cards**: Unified station status display
388
+ - **Data Visualizations**: Common chart and graph components
389
+ - **Map Components**: Reusable mapping elements
390
+ - **Notification System**: Consistent alert and notification UI
391
+
392
+ ### Data Sharing
393
+
394
+ Data will be shared between components using:
395
+
396
+ 1. **Local Storage**: For persistent data across browser sessions
397
+ 2. **URL Parameters**: For deep linking between applications
398
+ 3. **Shared State Library**: Common Redux store for demonstration purposes
399
+
400
+ ## Deployment Architecture
401
+
402
+ The MVPs will be deployed as static web applications:
403
+
404
+ ```
405
+ ┌─────────────────────────────────────────────────────────────┐
406
+ │ Static Web Hosting │
407
+ ├─────────────┬───────────┬───────────┬───────────┬───────────┤
408
+ │ Mobile │ Charging │ Energy │Subscription│Interactive│
409
+ │ App │ Hub │Management │ Portal │Deployment │
410
+ │ Prototype │ Dashboard │Simulation │ │ Map │
411
+ └─────────────┴───────────┴───────────┴───────────┴───────────┘
412
+ │ │ │ │ │
413
+ ▼ ▼ ▼ ▼ ▼
414
+ ┌─────────────────────────────────────────────────────────────┐
415
+ │ Landing Page Portal │
416
+ └─────────────────────────────────────────────────────────────┘
417
+ ```
418
+
419
+ - Each MVP will be deployed as a standalone application
420
+ - A central landing page will provide navigation to all components
421
+ - All applications will be responsive and work on desktop and mobile devices
422
+ - No backend server is required as all data will be simulated
423
+
424
+ ## Development Workflow
425
+
426
+ 1. **Setup**: Create project scaffolding with shared components and styles
427
+ 2. **Component Development**: Build individual MVPs in parallel
428
+ 3. **Integration**: Connect components through shared data models
429
+ 4. **Testing**: Verify functionality and user experience
430
+ 5. **Deployment**: Deploy to static hosting
431
+ 6. **Documentation**: Create user guides and demonstration scripts
432
+
433
+ ## Technical Considerations
434
+
435
+ ### Performance Optimization
436
+
437
+ - Use code splitting to reduce initial load times
438
+ - Optimize images and assets for web delivery
439
+ - Implement lazy loading for non-critical components
440
+ - Use efficient data structures for simulations
441
+
442
+ ### Browser Compatibility
443
+
444
+ - Target modern browsers (Chrome, Firefox, Safari, Edge)
445
+ - Use progressive enhancement for advanced features
446
+ - Test on multiple devices and screen sizes
447
+ - Ensure accessibility compliance
448
+
449
+ ### Simulation Fidelity
450
+
451
+ - Balance realism with performance
452
+ - Use realistic but simplified models for energy and financial simulations
453
+ - Ensure data consistency across all components
454
+ - Provide controls to adjust simulation parameters
455
+
456
+ This technical architecture provides the foundation for developing the Unity Fleet MVP components, ensuring a cohesive and impressive demonstration of the key concepts while maintaining technical feasibility within the project constraints.
template.html ADDED
@@ -0,0 +1,205 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Unity Fleet - MVP Component</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* MVP Component specific styles */
14
+ .component-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 2rem;
18
+ }
19
+
20
+ .component-header {
21
+ text-align: center;
22
+ margin-bottom: 3rem;
23
+ }
24
+
25
+ .component-header h1 {
26
+ font-size: 2.5rem;
27
+ margin-bottom: 1rem;
28
+ background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ -webkit-text-fill-color: transparent;
32
+ }
33
+
34
+ .component-header p {
35
+ font-size: 1.2rem;
36
+ max-width: 800px;
37
+ margin: 0 auto;
38
+ opacity: 0.8;
39
+ }
40
+
41
+ .component-content {
42
+ background: var(--glass-bg);
43
+ border: 1px solid var(--glass-border);
44
+ border-radius: 16px;
45
+ padding: 2rem;
46
+ margin-bottom: 3rem;
47
+ backdrop-filter: blur(10px);
48
+ }
49
+
50
+ .back-to-home {
51
+ display: inline-block;
52
+ margin-top: 2rem;
53
+ padding: 0.8rem 1.5rem;
54
+ background: transparent;
55
+ border: 1px solid var(--accent-color-1);
56
+ color: var(--accent-color-1);
57
+ border-radius: 4px;
58
+ font-family: var(--font-primary);
59
+ font-weight: 500;
60
+ text-transform: uppercase;
61
+ letter-spacing: 1px;
62
+ transition: all var(--transition-medium);
63
+ }
64
+
65
+ .back-to-home:hover {
66
+ background: rgba(0, 224, 255, 0.1);
67
+ transform: translateY(-3px);
68
+ }
69
+
70
+ /* Responsive iframe container */
71
+ .iframe-container {
72
+ position: relative;
73
+ width: 100%;
74
+ height: 0;
75
+ padding-bottom: 56.25%; /* 16:9 aspect ratio */
76
+ overflow: hidden;
77
+ border-radius: 8px;
78
+ }
79
+
80
+ .iframe-container iframe {
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ width: 100%;
85
+ height: 100%;
86
+ border: none;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body>
91
+ <div class="noise-overlay"></div>
92
+
93
+ <header>
94
+ <nav>
95
+ <div class="logo">UNITY FLEET</div>
96
+ <div class="nav-links">
97
+ <a href="../index.html#what-is-the-link">What is The Link</a>
98
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
99
+ <a href="../index.html#impact-equity">Impact & Equity</a>
100
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
101
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
102
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
103
+ </div>
104
+ <div class="mobile-nav-toggle">
105
+ <i class="fas fa-bars"></i>
106
+ </div>
107
+ </nav>
108
+ </header>
109
+
110
+ <main class="component-container">
111
+ <div class="component-header">
112
+ <h1>COMPONENT_TITLE</h1>
113
+ <p>COMPONENT_DESCRIPTION</p>
114
+ </div>
115
+
116
+ <div class="component-content">
117
+ <div class="iframe-container">
118
+ <!-- Component will be embedded here -->
119
+ <div id="component-placeholder">
120
+ Loading component...
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <div class="component-features">
126
+ <h2>Key Features</h2>
127
+ <ul class="features-list">
128
+ <li>FEATURE_1</li>
129
+ <li>FEATURE_2</li>
130
+ <li>FEATURE_3</li>
131
+ <li>FEATURE_4</li>
132
+ <li>FEATURE_5</li>
133
+ </ul>
134
+ </div>
135
+
136
+ <a href="../index.html#mvp-showcase" class="back-to-home">
137
+ <i class="fas fa-arrow-left"></i> Back to MVP Showcase
138
+ </a>
139
+ </main>
140
+
141
+ <footer>
142
+ <div class="container">
143
+ <div class="footer-content">
144
+ <div class="footer-logo">
145
+ <div class="logo">UNITY FLEET</div>
146
+ <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
147
+ </div>
148
+
149
+ <div class="footer-links">
150
+ <div class="link-column">
151
+ <h4>Navigation</h4>
152
+ <a href="../index.html#what-is-the-link">What is The Link</a>
153
+ <a href="../index.html#subscription-tiers">Subscription Tiers</a>
154
+ <a href="../index.html#impact-equity">Impact & Equity</a>
155
+ <a href="../index.html#tokenization">ChainLink Tokenization</a>
156
+ <a href="../index.html#rural-plan">Rural Revitalization</a>
157
+ <a href="../index.html#mvp-showcase">MVP Showcase</a>
158
+ </div>
159
+
160
+ <div class="link-column">
161
+ <h4>Contact</h4>
162
+ <a href="mailto:[email protected]">[email protected]</a>
163
+ <a href="tel:+12175551234">+1 (217) 555-1234</a>
164
+ <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
165
+ </div>
166
+
167
+ <div class="link-column">
168
+ <h4>Legal</h4>
169
+ <a href="#">Privacy Policy</a>
170
+ <a href="#">Terms of Service</a>
171
+ <a href="#">Accessibility</a>
172
+ </div>
173
+ </div>
174
+
175
+ <div class="footer-social">
176
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
177
+ <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
178
+ <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
179
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="footer-bottom">
184
+ <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
185
+ </div>
186
+ </div>
187
+ </footer>
188
+
189
+ <script>
190
+ // Mobile navigation toggle
191
+ document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
192
+ document.querySelector('.nav-links').classList.toggle('active');
193
+ this.innerHTML = document.querySelector('.nav-links').classList.contains('active')
194
+ ? '<i class="fas fa-times"></i>'
195
+ : '<i class="fas fa-bars"></i>';
196
+ });
197
+
198
+ // Component loading logic will be added here
199
+ document.addEventListener('DOMContentLoaded', function() {
200
+ // This will be customized for each component
201
+ console.log('Component page loaded');
202
+ });
203
+ </script>
204
+ </body>
205
+ </html>
todo.md ADDED
@@ -0,0 +1,126 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Unity Fleet MVP Development Todo List
2
+
3
+ ## Overview
4
+ This todo list outlines the remaining tasks needed to complete the Unity Fleet MVP components and website based on the analysis of existing files and requirements.
5
+
6
+ ## MVP Components Development
7
+
8
+ ### 1. Mobile Application for Vehicle Reservations [PARTIALLY IMPLEMENTED]
9
+ - [x] Create basic UI structure (MobileApp.jsx and MobileApp.css exist)
10
+ - [ ] Implement user registration and authentication flows
11
+ - [ ] Build vehicle browsing and filtering functionality
12
+ - [ ] Develop reservation system with calendar integration
13
+ - [ ] Create payment simulation interface
14
+ - [ ] Implement vehicle status tracking
15
+ - [ ] Add trip planning with charging stops feature
16
+ - [ ] Enhance UI with animations and transitions
17
+ - [ ] Test all functionality and user flows
18
+
19
+ ### 2. Charging Hub Interface [PARTIALLY IMPLEMENTED]
20
+ - [x] Create basic UI structure (ChargingHub.jsx and ChargingHub.css exist)
21
+ - [x] Fix ChargingHub.css file (replaced React component with proper CSS)
22
+ - [ ] Implement charging station status and availability display
23
+ - [ ] Build user authentication for charging access
24
+ - [ ] Create payment processing simulation
25
+ - [ ] Develop energy usage tracking visualization
26
+ - [ ] Add lounge services information section
27
+ - [ ] Enhance UI with animations and transitions
28
+ - [ ] Test all functionality and user flows
29
+
30
+ ### 3. Energy Simulation [IMPLEMENTED]
31
+ - [x] Create basic UI structure (EnergySimulation.jsx and EnergySimulation.css)
32
+ - [x] Implement solar generation simulation
33
+ - [x] Build battery storage management interface
34
+ - [x] Develop grid interaction modeling
35
+ - [x] Create energy flow visualization
36
+ - [x] Implement optimization algorithms demonstration
37
+ - [x] Add interactive controls for simulation parameters
38
+ - [ ] Test all functionality and user flows
39
+
40
+ ### 4. Deployment Map [IMPLEMENTED]
41
+ - [x] Create basic UI structure (DeploymentMap.jsx and DeploymentMap.css)
42
+ - [x] Implement interactive map of Illinois
43
+ - [x] Add planned charging hub locations
44
+ - [x] Create phased deployment visualization
45
+ - [x] Implement demographic data overlay
46
+ - [x] Add EV adoption projection layer
47
+ - [x] Create interactive filters and controls
48
+ - [ ] Test all functionality and user flows
49
+
50
+ ### 5. Subscription Portal [IMPLEMENTED]
51
+ - [x] Create basic UI structure (SubscriptionPortal.jsx and SubscriptionPortal.css)
52
+ - [x] Implement subscription tier display and comparison
53
+ - [x] Build subscription management interface
54
+ - [x] Create billing simulation
55
+ - [x] Develop usage tracking visualization
56
+ - [x] Add upgrade/downgrade pathways
57
+ - [x] Implement customer analytics dashboard
58
+ - [ ] Test all functionality and user flows
59
+
60
+ ### 6. ChainLink Tokenization Demo [IMPLEMENTED]
61
+ - [x] Create basic UI structure (ChainlinkDemo.jsx and ChainlinkDemo.css)
62
+ - [x] Implement token allocation visualization
63
+ - [x] Build asset ownership representation
64
+ - [x] Create value tracking simulation
65
+ - [x] Develop transaction demonstration
66
+ - [x] Add stakeholder dashboard
67
+ - [x] Implement interactive token flow visualization
68
+ - [ ] Test all functionality and user flows
69
+
70
+ ## Website Enhancement
71
+
72
+ ### 1. Website Structure and Navigation [IN PROGRESS]
73
+ - [x] Review existing website structure
74
+ - [x] Enhance navigation to include all MVP components
75
+ - [x] Create consistent header and footer across all pages
76
+ - [ ] Implement responsive design for all screen sizes
77
+ - [ ] Add smooth transitions between sections
78
+
79
+ ### 2. Visual Design Improvements
80
+ - [ ] Update color scheme to match Atlas Universe palette
81
+ - [ ] Implement glassmorphic panels with frosted transparency
82
+ - [ ] Add metallic gradients for buttons and borders
83
+ - [ ] Create animated section transitions
84
+ - [ ] Implement hover effects for interactive elements
85
+
86
+ ### 3. Content Enhancement
87
+ - [ ] Update "What is The Link?" section with latest information
88
+ - [ ] Create detailed Unity Fleet Subscription Tiers section
89
+ - [ ] Develop Impact & Equity section
90
+ - [ ] Build ChainLink Tokenization explanation with animated diagrams
91
+ - [ ] Add Rural Revitalization Plan section
92
+
93
+ ### 4. Integration of MVP Components
94
+ - [x] Create dedicated showcase pages for each MVP component
95
+ - [ ] Implement interactive demos embedded in website
96
+ - [ ] Add screenshots and videos of MVP components in action
97
+ - [ ] Create links between related components
98
+ - [ ] Ensure consistent styling between website and MVP components
99
+
100
+ ### 5. Performance and Deployment
101
+ - [ ] Optimize website performance
102
+ - [ ] Minify CSS and JavaScript
103
+ - [ ] Optimize images for web
104
+ - [ ] Test website on multiple devices and browsers
105
+ - [ ] Deploy updated website to production
106
+
107
+ ## Project Management
108
+
109
+ ### 1. Documentation
110
+ - [ ] Update technical architecture documentation
111
+ - [ ] Create user guides for MVP components
112
+ - [ ] Document API specifications and data models
113
+ - [ ] Create presentation materials for stakeholders
114
+
115
+ ### 2. Testing
116
+ - [ ] Develop test cases for all MVP components
117
+ - [ ] Perform usability testing
118
+ - [ ] Conduct cross-browser compatibility testing
119
+ - [ ] Test responsive design on various devices
120
+
121
+ ### 3. Final Delivery
122
+ - [ ] Package all source code
123
+ - [ ] Create demonstration videos
124
+ - [ ] Prepare final presentation
125
+ - [ ] Deploy all components to production
126
+ - [ ] Provide access instructions to stakeholders
unity_fleet_complete_proposal.md ADDED
@@ -0,0 +1,1024 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Unity Fleet Grant Proposal
2
+ ## Illinois Department of Transportation Statewide Planning and Research Funds
3
+
4
+ **Applicant:** Unity Fleet LLC
5
+ **EIN:** 33-2583301
6
+ **Contact:** Matthew T. Lamb, Sole Member
7
+ **Address:** 2457 E Eldorado St, Decatur, IL 62521
8
+ **Submission Date:** April 30, 2025
9
+
10
+ ## Table of Contents
11
+
12
+ 1. Executive Summary
13
+ 2. Project Description
14
+ - 2.1 Organization Background
15
+ - 2.2 Project Overview: "The Link" EV Charging Network
16
+ - 2.3 Fleet Services Component
17
+ 3. Alignment with Illinois Initiatives
18
+ - 3.1 Climate Action Plan Support
19
+ - 3.2 Transportation Innovation
20
+ - 3.3 Electric Vehicle Infrastructure Expansion
21
+ - 3.4 Economic Development
22
+ - 3.5 Equity and Accessibility
23
+ 4. Implementation Plan
24
+ - 4.1 Project Phases
25
+ - 4.2 Timeline
26
+ - 4.3 Site Selection Criteria
27
+ - 4.4 Technology Implementation
28
+ 5. Budget and Financial Plan
29
+ - 5.1 Project Budget
30
+ - 5.2 Funding Sources
31
+ - 5.3 Financial Sustainability
32
+ 6. Performance Metrics and Evaluation
33
+ - 6.1 Key Performance Indicators
34
+ - 6.2 Evaluation Methodology
35
+ - 6.3 Long-term Impact Assessment
36
+ 7. Partnerships and Stakeholder Engagement
37
+ - 7.1 Current Partners
38
+ - 7.2 Stakeholder Engagement Plan
39
+ - 7.3 Letters of Support
40
+ 8. Conclusion
41
+ # Executive Summary
42
+
43
+ Unity Fleet LLC is pleased to submit this proposal for the Illinois Department of Transportation's Statewide Planning and Research Funds grant to support the development of "The Link" - an innovative electric vehicle (EV) charging network that will transform transportation infrastructure across Illinois. As a recently established Illinois-based company (EIN: 33-2583301), Unity Fleet is positioned to advance the state's climate action goals while creating economic opportunities and enhancing mobility options for all residents.
44
+
45
+ "The Link" represents a revolutionary approach to EV charging infrastructure, featuring modern, solar-powered charging hubs that combine fast-charging capabilities with amenity-rich environments. Each hub will accommodate multiple vehicles simultaneously, offering both passenger and commercial vehicle charging options. The distinctive circular design with an elevated lounge area creates a welcoming environment that transforms the charging experience from a utilitarian necessity to a comfortable, productive interlude.
46
+
47
+ This project directly supports Illinois' commitment to the Paris Agreement's greenhouse gas reduction targets by accelerating EV adoption through expanded charging access. It complements the state's existing transportation innovation initiatives, including the University of Illinois Autonomous and Connected Track (I-ACT), while addressing critical gaps in the current charging infrastructure network.
48
+
49
+ The $3.2 million in requested funding will enable Unity Fleet to implement the first phase of "The Link" network, establishing five strategically located charging hubs across Illinois. These initial sites will serve as proof-of-concept for our innovative approach, demonstrating the viability of combining EV charging with solar power generation and amenity-rich environments. Unity Fleet will provide the required matching funds through a combination of private investment and existing capital resources.
50
+
51
+ Beyond the immediate environmental benefits of increased EV adoption, this project will generate significant economic impact through job creation during construction and ongoing operations. Our Community Access Program will ensure equitable access to clean transportation options for underserved populations, while our fleet services component will provide flexible mobility solutions for businesses and individuals.
52
+
53
+ Unity Fleet's leadership team brings extensive experience in electric vehicle technology, renewable energy infrastructure, and transportation management. We are committed to advancing Illinois' position as a leader in sustainable transportation and clean energy innovation. "The Link" charging network represents a critical step toward a cleaner, more accessible transportation future for all Illinois residents.
54
+
55
+ We look forward to the opportunity to partner with the Illinois Department of Transportation on this transformative initiative.
56
+ # Project Description
57
+
58
+ ## 2.1 Organization Background
59
+
60
+ Unity Fleet LLC is a newly established Illinois-based company dedicated to revolutionizing electric vehicle (EV) infrastructure and transportation services. Founded in December 2024 (EIN: 33-2583301), Unity Fleet emerged from a vision to accelerate the adoption of clean transportation by addressing the critical barriers of charging infrastructure availability and accessibility.
61
+
62
+ Our mission is to create a comprehensive ecosystem that supports the transition to electric mobility through innovative charging solutions, flexible fleet services, and technology integration. Unity Fleet represents the convergence of transportation expertise, renewable energy innovation, and digital technology, creating a unique approach to sustainable mobility that aligns perfectly with Illinois' climate and transportation goals.
63
+
64
+ The company's leadership team brings extensive experience in electric vehicle technology, renewable energy infrastructure, transportation management, and software development. This multidisciplinary expertise positions Unity Fleet to address the complex challenges of transportation electrification from multiple angles, ensuring a holistic approach that considers infrastructure needs, user experience, technological integration, and economic sustainability.
65
+
66
+ Since our establishment, Unity Fleet has focused on developing our flagship concept, "The Link" charging network, while building strategic partnerships with technology providers, local businesses, and community organizations. Our preliminary market research and concept development have generated significant interest from potential users, investors, and municipal partners, validating the demand for our innovative approach to EV charging and mobility services.
67
+
68
+ ## 2.2 Project Overview: "The Link" EV Charging Network
69
+
70
+ "The Link" represents a revolutionary approach to EV charging infrastructure, reimagining charging stations as destination hubs that combine fast-charging capabilities with amenity-rich environments. The distinctive circular design features a covered lower level with multiple charging ports surrounding a central core, topped by an elevated lounge area that offers refreshments, comfortable seating, and productivity amenities.
71
+
72
+ Each hub in "The Link" network will feature:
73
+
74
+ **Innovative Design and Infrastructure:**
75
+ - Architecturally distinctive circular structure with covered charging area
76
+ - Elevated lounge with panoramic views and natural lighting
77
+ - Weather protection for year-round comfort in Illinois' variable climate
78
+ - Landscaped surroundings that enhance visual appeal and environmental benefits
79
+
80
+ **Advanced Charging Technology:**
81
+ - Multiple Direct Current Fast Charging (DCFC) ports with 150kW capability
82
+ - Combined Charging System (CCS) compatibility for most EV models
83
+ - Megawatt Charging System (MCS) readiness for future heavy-duty vehicle support
84
+ - Smart charging management system for load balancing and grid optimization
85
+
86
+ **Solar Power Integration:**
87
+ - Rooftop solar array generating clean energy for charging operations
88
+ - Battery storage systems to optimize solar utilization and grid management
89
+ - Net metering capabilities to maximize renewable energy benefits
90
+ - Resilient design allowing continued operation during grid disruptions
91
+
92
+ **User Experience Enhancements:**
93
+ - Comfortable lounge seating with power outlets and Wi-Fi connectivity
94
+ - Refreshment options ranging from vending services to café partnerships
95
+ - Digital displays showing charging status, wait times, and local information
96
+ - Mobile app integration for reservations, payments, and status monitoring
97
+
98
+ **Accessibility Features:**
99
+ - ADA-compliant design throughout all areas
100
+ - Multiple payment options including credit card, mobile app, and subscription plans
101
+ - Clear wayfinding and instructional elements for new EV users
102
+ - 24/7 customer support through digital and phone channels
103
+
104
+ The innovative design of "The Link" transforms the charging experience from a utilitarian necessity to a comfortable, productive interlude. By addressing the psychological barriers to EV adoption related to charging anxiety and inconvenience, "The Link" will accelerate the transition to electric mobility while creating distinctive landmarks that symbolize Illinois' commitment to transportation innovation.
105
+
106
+ ## 2.3 Fleet Services Component
107
+
108
+ Complementing "The Link" charging infrastructure, Unity Fleet will develop a comprehensive suite of fleet services that expand access to electric mobility through flexible usage models. These services leverage the charging network while creating additional value streams that enhance the project's economic sustainability.
109
+
110
+ **Electric Vehicle Fleet Management:**
111
+ Unity Fleet will establish and manage a growing fleet of electric vehicles, beginning with passenger cars and expanding to include light commercial vehicles. This fleet will be maintained to the highest standards of safety and performance, utilizing predictive maintenance algorithms to optimize vehicle availability and longevity.
112
+
113
+ **Subscription and Access Models:**
114
+ - **Take-Home Subscriptions:** Customers gain exclusive access to a dedicated EV with various tiers offering different mileage allowances and included services (insurance, maintenance, charging).
115
+ - **FlexRide Subscriptions:** Users can access shared EVs on a regular basis, balancing affordability and convenience.
116
+ - **Daily & Monthly All-Access Passes:** Unlimited rides within designated areas for a flat fee, catering to users who want to eliminate personal vehicle reliance.
117
+ - **Enhanced Commuter Pass:** Structured rides for professionals and students with predictable daily schedules, offering a cost-effective solution for daily commutes.
118
+
119
+ **Corporate Shuttle and Community Programs:**
120
+ - **Corporate Shuttle Services:** Customized transportation solutions for businesses and municipalities, including employee shuttles and campus transportation.
121
+ - **Community Access Program (CAP):** Discounted transportation options for low-income individuals, promoting equitable access to sustainable mobility.
122
+ - **Paratransit Services:** Specialized transportation options for individuals with disabilities, enhancing mobility for all community members.
123
+
124
+ **Technology Integration and AI Optimization:**
125
+ Unity Fleet will leverage advanced technology to optimize fleet operations and enhance user experience:
126
+ - AI-powered routing and dispatch systems to maximize efficiency
127
+ - Predictive maintenance algorithms to reduce vehicle downtime
128
+ - User behavior analysis to optimize vehicle distribution and availability
129
+ - Energy management systems to coordinate charging with renewable generation
130
+ - Mobile app providing seamless access to all services
131
+
132
+ The fleet services component creates a virtuous cycle with "The Link" charging infrastructure: the charging network supports fleet operations, while the fleet services drive consistent utilization of the charging facilities. This integrated approach maximizes the impact of the investment while creating multiple pathways to accelerate EV adoption across different user segments.
133
+
134
+ Together, "The Link" charging network and Unity Fleet's service offerings represent a comprehensive approach to transportation electrification that addresses infrastructure needs, expands access to electric mobility, and creates sustainable economic models that will support long-term growth and impact.
135
+ # Alignment with Illinois Initiatives
136
+
137
+ ## 3.1 Climate Action Plan Support
138
+
139
+ "The Link" EV charging network and Unity Fleet services directly support Illinois' Priority Climate Action Plan and the state's commitment to the Paris Agreement's greenhouse gas reduction targets. Transportation represents a significant portion of Illinois' greenhouse gas emissions, and accelerating the transition to electric vehicles is a critical strategy for achieving the state's climate goals.
140
+
141
+ **Greenhouse Gas Emissions Reduction:**
142
+ The project will contribute to emissions reduction through multiple pathways:
143
+
144
+ - **Direct Displacement of Internal Combustion Vehicles:** Each EV that replaces a conventional vehicle reduces CO2 emissions by approximately 3-4 metric tons annually. By expanding charging infrastructure and fleet access, Unity Fleet will accelerate this transition.
145
+
146
+ - **Emissions-Free Charging:** Unlike many charging stations that rely entirely on grid electricity (which may include fossil fuel sources), "The Link" hubs incorporate solar generation and battery storage, providing truly emissions-free charging when possible.
147
+
148
+ - **Fleet Efficiency Optimization:** Unity Fleet's AI-powered routing and dispatch systems will minimize unnecessary vehicle miles traveled, further reducing emissions compared to conventional transportation models.
149
+
150
+ - **Reduced "Range Anxiety":** By establishing a reliable, convenient charging network, "The Link" addresses one of the primary psychological barriers to EV adoption, accelerating the transition away from fossil fuel vehicles.
151
+
152
+ **Clean Energy Integration:**
153
+ The Illinois Climate Action Plan emphasizes the importance of renewable energy integration across sectors. "The Link" charging hubs exemplify this integration through:
154
+
155
+ - **On-site Solar Generation:** Each hub will feature rooftop solar arrays sized to maximize renewable energy production while maintaining architectural integrity.
156
+
157
+ - **Battery Storage Systems:** Integrated battery storage will capture excess solar generation for use during peak demand periods or when solar production is limited.
158
+
159
+ - **Grid Optimization:** Smart charging management systems will coordinate with utility demand response programs, helping to stabilize the grid and maximize renewable energy utilization.
160
+
161
+ - **Resilience Benefits:** The combination of solar generation and battery storage creates charging locations that can continue operating during grid disruptions, enhancing community resilience.
162
+
163
+ **Paris Agreement Alignment:**
164
+ Illinois has committed to the principles of the Paris Agreement, which calls for substantial greenhouse gas reductions to limit global warming. Unity Fleet's project supports this commitment by:
165
+
166
+ - Accelerating the transition to zero-emission vehicles
167
+ - Demonstrating innovative models for clean transportation infrastructure
168
+ - Creating replicable approaches that can be scaled across the state
169
+ - Integrating renewable energy with transportation electrification
170
+
171
+ ## 3.2 Transportation Innovation
172
+
173
+ Illinois has positioned itself as a leader in transportation innovation through initiatives like the University of Illinois Autonomous and Connected Track (I-ACT). Unity Fleet's project complements and extends these efforts by:
174
+
175
+ **Advancing Illinois' Leadership in Transportation Technology:**
176
+ - Implementing cutting-edge charging technology that anticipates future needs, including Megawatt Charging System (MCS) readiness for heavy-duty vehicles
177
+ - Integrating AI-powered fleet management systems that optimize vehicle utilization and energy consumption
178
+ - Developing smart infrastructure that communicates with vehicles to enhance charging efficiency
179
+ - Creating a platform for testing and demonstrating new mobility technologies in real-world applications
180
+
181
+ **Complementing Research Initiatives:**
182
+ "The Link" charging network will create synergies with existing transportation research efforts:
183
+
184
+ - **University of Illinois I-ACT:** Unity Fleet will explore partnership opportunities with I-ACT to provide charging infrastructure for autonomous vehicle testing and to share data on charging patterns and fleet operations.
185
+
186
+ - **Electrification Research:** The project will generate valuable data on charging behavior, energy consumption patterns, and infrastructure utilization that can inform academic and industry research.
187
+
188
+ - **User Experience Studies:** "The Link" hubs will provide real-world environments for studying how users interact with EV charging infrastructure, generating insights that can improve future designs.
189
+
190
+ **Supporting New Mobility Models:**
191
+ Unity Fleet's service offerings demonstrate innovative approaches to mobility that move beyond traditional vehicle ownership:
192
+
193
+ - Subscription-based access models that reduce barriers to EV adoption
194
+ - Shared mobility solutions that maximize vehicle utilization
195
+ - Corporate shuttle services that reduce single-occupancy vehicle trips
196
+ - Community access programs that expand transportation equity
197
+
198
+ These new mobility models align with Illinois' interest in developing more efficient, sustainable transportation systems that reduce congestion, emissions, and infrastructure strain.
199
+
200
+ ## 3.3 Electric Vehicle Infrastructure Expansion
201
+
202
+ Illinois has made significant investments in EV charging infrastructure through programs like the National Electric Vehicle Infrastructure (NEVI) formula funding and state initiatives under the Climate and Equitable Jobs Act (CEJA). Unity Fleet's project will complement and enhance these efforts through:
203
+
204
+ **Strategic Network Development:**
205
+ "The Link" charging hubs will be strategically located to:
206
+
207
+ - Fill gaps in the existing charging network, particularly in areas underserved by current infrastructure
208
+ - Create connections between interstate corridors and urban centers
209
+ - Support both passenger and commercial vehicle charging needs
210
+ - Establish visible landmarks that raise awareness of EV infrastructure
211
+
212
+ **Enhanced Charging Experience:**
213
+ While many existing and planned charging stations focus solely on the technical aspects of power delivery, "The Link" hubs elevate the charging experience through:
214
+
215
+ - Comfortable, weather-protected environments that make charging convenient in all seasons
216
+ - Amenities that transform charging time from a burden to a productive or enjoyable break
217
+ - Architectural design that creates distinctive, recognizable landmarks
218
+ - User-friendly interfaces and support services that welcome new EV adopters
219
+
220
+ **Charging Technology Advancement:**
221
+ "The Link" will implement advanced charging technologies that push the boundaries of current infrastructure:
222
+
223
+ - High-power charging capabilities that minimize wait times
224
+ - Multiple connector types to accommodate various vehicle models
225
+ - Smart charging systems that optimize energy use and grid impact
226
+ - Future-ready design that can adapt to evolving charging standards
227
+
228
+ **Public-Private Partnership Model:**
229
+ Unity Fleet's approach demonstrates an innovative public-private partnership model for infrastructure development that:
230
+
231
+ - Leverages private investment alongside public funding
232
+ - Creates economically sustainable operations through diversified revenue streams
233
+ - Establishes replicable models that can accelerate infrastructure deployment
234
+ - Reduces public sector implementation burden while maintaining public benefits
235
+
236
+ ## 3.4 Economic Development
237
+
238
+ The Unity Fleet project will generate significant economic benefits for Illinois, supporting the state's goals for job creation, business development, and economic resilience.
239
+
240
+ **Job Creation:**
241
+ The project will create jobs across multiple phases and skill levels:
242
+
243
+ - **Construction Phase:** Each hub will require architectural, engineering, electrical, and general construction services, creating temporary employment during development.
244
+
245
+ - **Operational Phase:** Ongoing operations will create permanent positions in facility management, customer service, vehicle maintenance, and technology support.
246
+
247
+ - **Corporate Functions:** As Unity Fleet expands, additional jobs will be created in administration, marketing, finance, and technology development.
248
+
249
+ - **Indirect Employment:** The project will support jobs in the supply chain, including equipment manufacturers, software developers, and service providers.
250
+
251
+ **Supply Chain Opportunities:**
252
+ Unity Fleet will prioritize Illinois-based suppliers and contractors whenever possible, creating opportunities for local businesses in:
253
+
254
+ - Construction and electrical services
255
+ - Charging equipment installation and maintenance
256
+ - Solar panel and battery system deployment
257
+ - Facility maintenance and management
258
+ - Vehicle acquisition and servicing
259
+ - Software and technology development
260
+
261
+ **Workforce Development:**
262
+ The project will contribute to workforce development in emerging clean energy and transportation sectors:
263
+
264
+ - Creating opportunities for training and certification in EV charging infrastructure
265
+ - Developing skills in renewable energy integration and smart grid technologies
266
+ - Building expertise in electric vehicle fleet management and maintenance
267
+ - Advancing capabilities in transportation technology and data analytics
268
+
269
+ **Tourism and Visitor Attraction:**
270
+ The distinctive design of "The Link" hubs will create landmarks that enhance Illinois' image as an innovation leader:
271
+
272
+ - Attracting EV travelers who might otherwise bypass the state
273
+ - Creating Instagram-worthy destinations that generate positive visibility
274
+ - Demonstrating Illinois' commitment to sustainable transportation
275
+ - Supporting tourism-related businesses located near charging hubs
276
+
277
+ ## 3.5 Equity and Accessibility
278
+
279
+ Unity Fleet is committed to ensuring that the benefits of transportation electrification are accessible to all Illinois residents, regardless of income, location, or ability. This commitment aligns with Illinois' focus on equity in climate initiatives, particularly the emphasis on Low Income/Disadvantaged Communities (LIDACs) in the Climate and Equitable Jobs Act.
280
+
281
+ **Community Access Program:**
282
+ Unity Fleet's Community Access Program (CAP) will provide discounted transportation options for low-income individuals through:
283
+
284
+ - Reduced rates for subscription services
285
+ - Partnerships with social service organizations to distribute access
286
+ - Targeted outreach to underserved communities
287
+ - Simplified payment options that don't require credit cards or smartphones
288
+
289
+ **Equitable Location Planning:**
290
+ The siting strategy for "The Link" charging hubs will prioritize equitable access by:
291
+
292
+ - Including locations in or adjacent to Equity Investment Eligible Communities
293
+ - Ensuring geographic distribution across diverse neighborhoods
294
+ - Considering public transportation connections to maximize accessibility
295
+ - Balancing commercial viability with community service objectives
296
+
297
+ **Inclusive Design:**
298
+ All aspects of "The Link" charging hubs and Unity Fleet services will be designed for inclusive access:
299
+
300
+ - ADA-compliant physical infrastructure exceeding minimum requirements
301
+ - Multiple language options in all user interfaces and support services
302
+ - Clear, intuitive design that accommodates various literacy levels
303
+ - Alternative access methods for those without smartphones or internet access
304
+
305
+ **Community Engagement:**
306
+ Unity Fleet will implement robust community engagement processes to ensure that implementation reflects community needs:
307
+
308
+ - Advisory committees including representatives from diverse communities
309
+ - Regular feedback mechanisms for service users and community members
310
+ - Partnerships with community-based organizations
311
+ - Transparent reporting on equity metrics and outcomes
312
+
313
+ Through these strategies, Unity Fleet will ensure that "The Link" charging network and fleet services advance transportation equity while supporting Illinois' climate and economic goals. By making electric mobility accessible to all residents, the project will maximize its environmental benefits while creating economic opportunities across diverse communities.
314
+ # Implementation Plan
315
+
316
+ ## 4.1 Project Phases
317
+
318
+ Unity Fleet will implement "The Link" EV charging network through a strategic, phased approach that ensures careful planning, quality execution, and continuous improvement based on operational feedback. The implementation will proceed through the following phases:
319
+
320
+ ### Phase 1: Planning and Site Selection (Months 1-3)
321
+ - **Comprehensive Market Analysis:** Detailed assessment of current EV charging infrastructure, identifying gaps and high-demand areas
322
+ - **Site Selection Process:** Evaluation of potential locations based on traffic patterns, grid capacity, land availability, and equity considerations
323
+ - **Stakeholder Engagement:** Consultation with local governments, utilities, community organizations, and potential users
324
+ - **Preliminary Design Development:** Refinement of architectural and engineering concepts for "The Link" charging hubs
325
+ - **Regulatory Assessment:** Identification of permitting requirements, utility interconnection processes, and compliance considerations
326
+ - **Partnership Development:** Establishment of relationships with technology providers, contractors, and service partners
327
+
328
+ ### Phase 2: Design and Permitting (Months 4-6)
329
+ - **Detailed Site Engineering:** Complete site-specific engineering for each selected location
330
+ - **Architectural Finalization:** Development of construction-ready architectural plans
331
+ - **Electrical System Design:** Detailed planning for electrical infrastructure, including utility connections and solar integration
332
+ - **Permitting Process:** Submission and management of all required permits and approvals
333
+ - **Utility Coordination:** Establishment of interconnection agreements and service plans
334
+ - **Procurement Planning:** Finalization of equipment specifications and vendor selection
335
+ - **Construction Bidding:** Competitive selection of construction contractors
336
+
337
+ ### Phase 3: Construction and Equipment Installation (Months 7-12)
338
+ - **Site Preparation:** Grading, foundation work, and utility connections
339
+ - **Structural Construction:** Building of the physical hub structures
340
+ - **Electrical Infrastructure:** Installation of power distribution systems and charging equipment
341
+ - **Solar and Battery Systems:** Deployment of solar arrays and energy storage solutions
342
+ - **Interior Buildout:** Completion of lounge areas and amenity spaces
343
+ - **Landscaping and Exterior Finishes:** Implementation of sustainable landscaping and final exterior elements
344
+ - **Quality Assurance:** Comprehensive testing and inspection of all systems
345
+
346
+ ### Phase 4: Technology Integration and Testing (Months 10-14)
347
+ - **Charging System Commissioning:** Testing and optimization of all charging equipment
348
+ - **Energy Management System Implementation:** Deployment of software for solar, battery, and grid integration
349
+ - **Fleet Management Platform Development:** Finalization and testing of fleet operations software
350
+ - **Mobile App Deployment:** Launch of user-facing mobile application for reservations and payments
351
+ - **System Integration:** Ensuring seamless operation of all technological components
352
+ - **Staff Training:** Comprehensive training for all operational personnel
353
+ - **Soft Launch Testing:** Limited public access to identify and address operational issues
354
+
355
+ ### Phase 5: Launch and Operations (Months 15+)
356
+ - **Grand Opening Events:** Public launch celebrations at each hub location
357
+ - **Marketing Campaign:** Comprehensive outreach to build awareness and drive adoption
358
+ - **Fleet Deployment:** Phased introduction of electric vehicles for subscription and service programs
359
+ - **Operational Optimization:** Continuous improvement based on usage data and customer feedback
360
+ - **Community Program Implementation:** Rollout of Community Access Program and other equity initiatives
361
+ - **Performance Monitoring:** Tracking of key metrics against targets
362
+ - **Expansion Planning:** Evaluation of opportunities for additional hub locations
363
+
364
+ ## 4.2 Timeline
365
+
366
+ The implementation timeline spans approximately 15 months from funding approval to full operational status, with ongoing operations and potential expansion following the initial launch.
367
+
368
+ | Milestone | Timeline | Key Activities |
369
+ |-----------|----------|----------------|
370
+ | Project Initiation | Month 1 | Team assembly, kickoff meetings, detailed planning |
371
+ | Site Selection Finalized | Month 3 | Completion of site evaluations and securing of locations |
372
+ | Design Completion | Month 6 | Finalization of all architectural and engineering plans |
373
+ | Construction Start | Month 7 | Groundbreaking at first hub location |
374
+ | First Hub Completion | Month 10 | Structural completion of first "The Link" charging hub |
375
+ | Technology Integration Complete | Month 12 | All systems operational and integrated |
376
+ | Staff Training Complete | Month 13 | Operational team fully trained and ready |
377
+ | Soft Launch | Month 14 | Limited public access for testing and refinement |
378
+ | Grand Opening | Month 15 | Full public launch of "The Link" network |
379
+ | Fleet Services Launch | Month 16 | Introduction of subscription and service programs |
380
+ | First Performance Review | Month 18 | Comprehensive assessment of operations and impact |
381
+ | Expansion Planning | Month 24 | Evaluation for potential network growth |
382
+
383
+ **Critical Path Elements:**
384
+ - Utility coordination and interconnection agreements
385
+ - Permitting approvals from local jurisdictions
386
+ - Equipment procurement, particularly for specialized charging hardware
387
+ - Weather considerations for construction scheduling
388
+ - Software development and integration timelines
389
+
390
+ **Contingency Planning:**
391
+ Unity Fleet has incorporated several contingency measures to address potential implementation challenges:
392
+ - 15% time buffer built into all construction timelines
393
+ - Alternative site options identified in case primary locations face unexpected obstacles
394
+ - Flexible equipment sourcing strategy with multiple vendor relationships
395
+ - Modular design approach allowing for phased construction if necessary
396
+ - Scalable technology architecture that can adapt to changing requirements
397
+
398
+ ## 4.3 Site Selection Criteria
399
+
400
+ The success of "The Link" charging network depends significantly on strategic site selection. Unity Fleet will employ a comprehensive evaluation framework that balances multiple factors:
401
+
402
+ **Geographic Distribution Strategy:**
403
+ - Initial focus on five strategic locations across Illinois
404
+ - Balance between urban centers, suburban areas, and key transportation corridors
405
+ - Consideration of existing charging infrastructure to avoid redundancy
406
+ - Potential for future expansion and network development
407
+
408
+ **Traffic Pattern Analysis:**
409
+ - Proximity to major highways and thoroughfares
410
+ - Traffic volume and composition (passenger vs. commercial)
411
+ - Dwell time patterns at nearby amenities
412
+ - Seasonal variations in traffic flow
413
+ - Visibility from primary roadways
414
+
415
+ **Grid Capacity Considerations:**
416
+ - Existing electrical infrastructure capacity
417
+ - Proximity to substations or distribution lines
418
+ - Utility upgrade requirements and timelines
419
+ - Potential for renewable energy integration
420
+ - Grid reliability and redundancy options
421
+
422
+ **Land Availability and Characteristics:**
423
+ - Sufficient space for hub structure and vehicle circulation
424
+ - Appropriate zoning and land use designations
425
+ - Environmental considerations and site conditions
426
+ - Ownership structure and acquisition feasibility
427
+ - Future development plans for surrounding areas
428
+
429
+ **Community Impact Assessment:**
430
+ - Proximity to underserved communities
431
+ - Accessibility via multiple transportation modes
432
+ - Potential for local economic benefits
433
+ - Community receptiveness and support
434
+ - Alignment with local development goals
435
+
436
+ **Operational Viability:**
437
+ - Security considerations and lighting
438
+ - Proximity to amenities and services
439
+ - All-weather accessibility
440
+ - Potential for 24/7 operations
441
+ - Maintenance and servicing logistics
442
+
443
+ Each potential site will be scored against these criteria using a weighted evaluation matrix, with final selections made based on both quantitative assessment and qualitative factors such as strategic importance and partnership opportunities.
444
+
445
+ ## 4.4 Technology Implementation
446
+
447
+ Unity Fleet will implement a comprehensive technology ecosystem that integrates charging infrastructure, renewable energy systems, fleet management, and user interfaces:
448
+
449
+ **Charging Equipment Specifications:**
450
+ - **DC Fast Chargers:** Multiple 150kW chargers with CCS connectors
451
+ - **Future-Ready Design:** Infrastructure capable of supporting Megawatt Charging System (MCS) for heavy-duty vehicles
452
+ - **Smart Charging Features:** Load management, user authentication, and remote monitoring
453
+ - **Reliability Measures:** Redundant systems, robust design for Illinois weather conditions
454
+ - **Accessibility Features:** User-friendly interfaces, multiple payment options, clear instructions
455
+
456
+ **Solar Integration Methodology:**
457
+ - **Rooftop Arrays:** High-efficiency photovoltaic panels integrated into hub architecture
458
+ - **Production Capacity:** Sized to optimize on-site generation while maintaining aesthetic design
459
+ - **Grid Connection:** Bidirectional capability for energy export when production exceeds demand
460
+ - **Monitoring Systems:** Real-time production tracking and performance analytics
461
+ - **Seasonal Optimization:** Panel positioning and system design optimized for Illinois' solar conditions
462
+
463
+ **Battery Storage Systems:**
464
+ - **Capacity Sizing:** Balanced to support charging during peak demand and store excess solar generation
465
+ - **Chemistry Selection:** Lithium iron phosphate (LFP) or similar technology balancing safety, longevity, and performance
466
+ - **Thermal Management:** Systems designed for Illinois' temperature range
467
+ - **Control Systems:** Advanced battery management for optimal cycling and longevity
468
+ - **Grid Services Capability:** Potential for participation in utility demand response programs
469
+
470
+ **Software and App Development:**
471
+ - **User-Facing Applications:** Mobile app for reservations, payments, and status monitoring
472
+ - **Fleet Management Platform:** Comprehensive system for vehicle tracking, maintenance, and dispatch
473
+ - **Energy Management System:** Software controlling the interaction between solar, battery, and grid power
474
+ - **Data Analytics Platform:** Tools for performance monitoring and continuous improvement
475
+ - **Integration Architecture:** APIs and protocols ensuring seamless communication between systems
476
+
477
+ **Fleet Management Systems:**
478
+ - **Vehicle Telematics:** Real-time monitoring of location, charge status, and diagnostics
479
+ - **Reservation System:** User-friendly booking platform for subscription and on-demand services
480
+ - **Maintenance Tracking:** Predictive maintenance algorithms to optimize vehicle availability
481
+ - **Route Optimization:** AI-powered routing to maximize efficiency and range
482
+ - **User Authentication:** Secure access controls for vehicle usage
483
+
484
+ Unity Fleet will employ an agile development approach for all technology components, allowing for continuous improvement based on operational feedback and evolving user needs. All systems will be designed with cybersecurity as a fundamental consideration, implementing industry best practices for data protection and system security.
485
+
486
+ The technology implementation will prioritize open standards and interoperability wherever possible, ensuring that "The Link" charging network can adapt to evolving industry standards and integrate with broader transportation and energy systems.
487
+ # Budget and Financial Plan
488
+
489
+ ## 5.1 Project Budget
490
+
491
+ Unity Fleet requests $3,200,000 in funding from the Illinois Department of Transportation's Statewide Planning and Research Funds grant to support the implementation of "The Link" EV charging network. This funding will be complemented by Unity Fleet's matching contribution, creating a comprehensive financial foundation for this transformative project.
492
+
493
+ The budget is structured to support all phases of implementation, from planning and design through construction and operation. Major expenditure categories are detailed below:
494
+
495
+ ### Capital Expenditures
496
+
497
+ | Category | Description | Amount |
498
+ |----------|-------------|--------|
499
+ | **Site Acquisition/Leasing** | Securing five strategic locations through purchase or long-term lease arrangements | $750,000 |
500
+ | **Architectural & Engineering** | Design services, structural engineering, electrical engineering, and site planning | $425,000 |
501
+ | **Construction Costs** | Site preparation, foundation work, structural elements, and finishing for five hub locations | $1,200,000 |
502
+ | **Charging Equipment** | DC Fast Chargers (150kW) with CCS connectors, power distribution systems, and installation | $850,000 |
503
+ | **Solar & Battery Systems** | Rooftop solar arrays, battery storage systems, and energy management equipment | $625,000 |
504
+ | **Interior Buildout** | Lounge furnishings, amenity installations, and customer service facilities | $275,000 |
505
+ | **Landscaping & Exterior** | Sustainable landscaping, signage, lighting, and site improvements | $175,000 |
506
+ | **Grid Connections** | Utility interconnection costs, transformers, and electrical infrastructure | $350,000 |
507
+ | **Subtotal: Capital Expenditures** | | **$4,650,000** |
508
+
509
+ ### Technology Development
510
+
511
+ | Category | Description | Amount |
512
+ |----------|-------------|--------|
513
+ | **Energy Management System** | Software development for solar, battery, and grid integration | $175,000 |
514
+ | **Fleet Management Platform** | Development of vehicle tracking, maintenance, and reservation systems | $225,000 |
515
+ | **Mobile Application** | User-facing app for reservations, payments, and status monitoring | $150,000 |
516
+ | **System Integration** | APIs, data architecture, and cross-platform functionality | $125,000 |
517
+ | **Cybersecurity Implementation** | Security protocols, testing, and compliance measures | $75,000 |
518
+ | **Subtotal: Technology Development** | | **$750,000** |
519
+
520
+ ### Operational Setup
521
+
522
+ | Category | Description | Amount |
523
+ |----------|-------------|--------|
524
+ | **Initial Fleet Acquisition** | Purchase of first 10 electric vehicles for subscription and service programs | $500,000 |
525
+ | **Staff Recruitment & Training** | Hiring and comprehensive training for operational personnel | $150,000 |
526
+ | **Marketing & Community Outreach** | Launch campaign, community engagement, and educational materials | $200,000 |
527
+ | **Operational Reserves** | Contingency funding for initial operational period | $150,000 |
528
+ | **Subtotal: Operational Setup** | | **$1,000,000** |
529
+
530
+ ### Administrative and Overhead
531
+
532
+ | Category | Description | Amount |
533
+ |----------|-------------|--------|
534
+ | **Project Management** | Dedicated project management team throughout implementation | $250,000 |
535
+ | **Permitting & Compliance** | Fees and professional services for regulatory compliance | $100,000 |
536
+ | **Legal & Insurance** | Contract development, liability coverage, and risk management | $125,000 |
537
+ | **Administrative Support** | Office operations, accounting, and administrative personnel | $125,000 |
538
+ | **Subtotal: Administrative and Overhead** | | **$600,000** |
539
+
540
+ ### Budget Summary
541
+
542
+ | Category | Amount | Percentage |
543
+ |----------|--------|------------|
544
+ | Capital Expenditures | $4,650,000 | 66.4% |
545
+ | Technology Development | $750,000 | 10.7% |
546
+ | Operational Setup | $1,000,000 | 14.3% |
547
+ | Administrative and Overhead | $600,000 | 8.6% |
548
+ | **Total Project Budget** | **$7,000,000** | **100%** |
549
+
550
+ ## 5.2 Funding Sources
551
+
552
+ The total project budget of $7,000,000 will be funded through a combination of the requested grant and matching funds from Unity Fleet:
553
+
554
+ | Source | Amount | Percentage |
555
+ |--------|--------|------------|
556
+ | IDOT Statewide Planning and Research Funds | $3,200,000 | 45.7% |
557
+ | Unity Fleet Matching Funds | $3,800,000 | 54.3% |
558
+ | **Total Funding** | **$7,000,000** | **100%** |
559
+
560
+ ### Matching Funds Detail
561
+
562
+ Unity Fleet will provide the required matching funds through a combination of:
563
+
564
+ **Private Investment:** Unity Fleet has secured commitments from private investors specifically interested in supporting innovative clean transportation infrastructure. These investors recognize both the environmental benefits and commercial potential of "The Link" charging network.
565
+
566
+ **Corporate Capital:** Unity Fleet will allocate a portion of its existing capital resources to this project, demonstrating our organizational commitment to its success.
567
+
568
+ **Equipment Financing:** For certain capital equipment, Unity Fleet will utilize specialized financing arrangements that optimize cash flow while maintaining long-term ownership of assets.
569
+
570
+ **In-Kind Contributions:** Unity Fleet will leverage existing technological assets, intellectual property, and professional expertise as in-kind contributions to the project.
571
+
572
+ All matching funds have been secured or firmly committed, ensuring that the project can proceed immediately upon grant approval without financial delays.
573
+
574
+ ## 5.3 Financial Sustainability
575
+
576
+ Unity Fleet has developed a comprehensive financial sustainability model that ensures the long-term viability of "The Link" charging network beyond the initial implementation phase:
577
+
578
+ ### Revenue Streams
579
+
580
+ The project will generate revenue through multiple channels:
581
+
582
+ **Charging Services:**
583
+ - Pay-per-use charging fees from non-subscription users
584
+ - Bundled charging access through subscription programs
585
+ - Premium charging options for commercial vehicles
586
+ - Reserved charging slots for regular users
587
+
588
+ **Fleet Services:**
589
+ - Take-Home Subscription revenue
590
+ - FlexRide Subscription fees
591
+ - Daily and Monthly All-Access Pass sales
592
+ - Enhanced Commuter Pass subscriptions
593
+ - Corporate shuttle service contracts
594
+
595
+ **Ancillary Revenue:**
596
+ - Refreshment sales and vendor partnerships
597
+ - Advertising and promotional opportunities
598
+ - Data services (anonymized usage patterns)
599
+ - Grid services through battery storage capabilities
600
+ - Co-location fees from complementary businesses
601
+
602
+ ### Financial Projections
603
+
604
+ Based on market analysis and comparable operations, Unity Fleet projects the following financial performance:
605
+
606
+ | Year | Annual Revenue | Operating Expenses | Net Operating Income |
607
+ |------|----------------|--------------------|-----------------------|
608
+ | 1 | $1,200,000 | $1,050,000 | $150,000 |
609
+ | 2 | $2,500,000 | $1,750,000 | $750,000 |
610
+ | 3 | $4,000,000 | $2,500,000 | $1,500,000 |
611
+ | 5 | $7,500,000 | $4,000,000 | $3,500,000 |
612
+
613
+ These projections demonstrate that "The Link" charging network will achieve operational sustainability within the first year and generate significant positive cash flow by year three, allowing for reinvestment in expansion and enhancement.
614
+
615
+ ### Maintenance and Replacement Planning
616
+
617
+ Unity Fleet has developed a comprehensive asset management strategy to ensure the long-term functionality of all infrastructure:
618
+
619
+ **Preventative Maintenance:** Regular scheduled maintenance for all charging equipment, solar systems, and facility components to maximize lifespan and reliability.
620
+
621
+ **Equipment Replacement Fund:** Beginning in year two, Unity Fleet will allocate 5% of gross revenue to a dedicated replacement fund for future equipment upgrades.
622
+
623
+ **Technology Refresh Cycle:** A planned 5-7 year refresh cycle for charging technology to ensure compatibility with evolving vehicle standards and maintain competitive service levels.
624
+
625
+ **Facility Reinvestment:** Annual allocation for facility improvements and updates to maintain attractive, functional environments.
626
+
627
+ ### Scaling Strategy
628
+
629
+ The financial model includes a reinvestment strategy for expansion:
630
+
631
+ **Network Growth:** Beginning in year three, Unity Fleet plans to reinvest a portion of operating profits into new hub locations, expanding the network's geographic coverage.
632
+
633
+ **Service Expansion:** The fleet services component will scale incrementally, with vehicle acquisitions tied directly to subscription growth to maintain optimal utilization.
634
+
635
+ **Technology Enhancement:** Continuous improvement of software platforms and user interfaces based on operational data and customer feedback.
636
+
637
+ **Partnership Development:** Strategic partnerships with complementary businesses and services to enhance value proposition and create additional revenue opportunities.
638
+
639
+ This multi-faceted approach to financial sustainability ensures that the initial investment in "The Link" charging network will generate long-term value for Illinois' transportation infrastructure while creating a financially viable enterprise that can grow without requiring additional public funding.
640
+ # Performance Metrics and Evaluation
641
+
642
+ ## 6.1 Key Performance Indicators
643
+
644
+ Unity Fleet will implement a comprehensive performance measurement framework to track the impact and effectiveness of "The Link" charging network and associated fleet services. These metrics will provide accountability to stakeholders, guide operational improvements, and demonstrate alignment with Illinois' transportation and climate goals.
645
+
646
+ ### Environmental Impact Metrics
647
+
648
+ | Metric | Description | Target |
649
+ |--------|-------------|--------|
650
+ | **Charging Sessions** | Total number of vehicle charging sessions completed | 25,000 in Year 1; 50% annual growth |
651
+ | **kWh Delivered** | Total electrical energy provided to vehicles | 1,250,000 kWh in Year 1; 50% annual growth |
652
+ | **Solar Generation** | Renewable energy produced by on-site solar arrays | 30% of total energy delivered in Year 1; 40% by Year 3 |
653
+ | **CO2 Emissions Avoided** | Estimated greenhouse gas emissions prevented through EV use vs. conventional vehicles | 1,500 metric tons in Year 1; 4,500 metric tons by Year 3 |
654
+ | **Vehicle Miles Electrified** | Total miles driven by EVs using "The Link" infrastructure | 5 million miles in Year 1; 15 million by Year 3 |
655
+ | **Petroleum Displacement** | Gallons of gasoline/diesel avoided through EV adoption | 200,000 gallons in Year 1; 600,000 by Year 3 |
656
+
657
+ ### Operational Performance Metrics
658
+
659
+ | Metric | Description | Target |
660
+ |--------|-------------|--------|
661
+ | **Charging Station Uptime** | Percentage of time charging ports are operational | >98% |
662
+ | **Utilization Rate** | Percentage of available charging time that ports are in active use | 40% in Year 1; 60% by Year 3 |
663
+ | **Peak vs. Off-Peak Usage** | Distribution of charging sessions across time periods | <60% of sessions during grid peak hours |
664
+ | **Average Charging Duration** | Mean time spent per charging session | <45 minutes for passenger vehicles |
665
+ | **Customer Wait Time** | Average time users wait for available charging port | <10 minutes during 90% of operating hours |
666
+ | **Energy Efficiency** | Ratio of energy delivered to vehicles vs. total energy consumed | >92% efficiency |
667
+
668
+ ### User Adoption Metrics
669
+
670
+ | Metric | Description | Target |
671
+ |--------|-------------|--------|
672
+ | **Unique Users** | Number of distinct individuals using the charging network | 5,000 in Year 1; 15,000 by Year 3 |
673
+ | **Subscription Enrollment** | Number of active subscribers across all service tiers | 500 in Year 1; 2,000 by Year 3 |
674
+ | **User Satisfaction** | Average rating from customer feedback surveys | >4.5/5.0 rating |
675
+ | **Repeat Usage** | Percentage of users who return for multiple sessions | >70% |
676
+ | **App Downloads** | Number of mobile application installations | 7,500 in Year 1; 25,000 by Year 3 |
677
+ | **Session Frequency** | Average number of charging sessions per user per month | >2.5 sessions |
678
+
679
+ ### Economic Impact Metrics
680
+
681
+ | Metric | Description | Target |
682
+ |--------|-------------|--------|
683
+ | **Job Creation** | Direct employment generated by the project | 25 FTE positions in Year 1; 50 by Year 3 |
684
+ | **Local Spending** | Procurement from Illinois-based suppliers and contractors | >70% of eligible expenditures |
685
+ | **Revenue Generation** | Total income from all services | $1.2M in Year 1; $4M by Year 3 |
686
+ | **Tax Contribution** | State and local tax revenue generated | $150,000 in Year 1; $500,000 by Year 3 |
687
+ | **Private Investment Leveraged** | Additional private capital attracted to the project | $5M by Year 3 |
688
+ | **Cost per kWh Delivered** | Operational efficiency measure | <$0.20/kWh by Year 3 |
689
+
690
+ ### Equity and Accessibility Metrics
691
+
692
+ | Metric | Description | Target |
693
+ |--------|-------------|--------|
694
+ | **LIDAC Participation** | Usage by residents of Low Income/Disadvantaged Communities | >25% of total users |
695
+ | **Community Access Program Enrollment** | Participation in discounted access programs | 250 participants in Year 1; 1,000 by Year 3 |
696
+ | **Geographic Distribution** | Spread of users across different communities | Representation from >75% of service area communities |
697
+ | **Accessibility Compliance** | Adherence to ADA and accessibility standards | 100% compliance plus enhanced features |
698
+ | **Language Accessibility** | Availability of services in multiple languages | Support for at least 3 languages besides English |
699
+ | **Payment Method Diversity** | Range of payment options available to users | Minimum of 5 distinct payment methods |
700
+
701
+ ## 6.2 Evaluation Methodology
702
+
703
+ Unity Fleet will implement a rigorous evaluation methodology to ensure accurate, transparent assessment of project performance:
704
+
705
+ ### Data Collection Approach
706
+
707
+ **Automated System Monitoring:**
708
+ - Real-time data collection from all charging equipment
709
+ - Continuous monitoring of solar generation and energy consumption
710
+ - Automated tracking of vehicle usage and charging patterns
711
+ - System performance and reliability metrics
712
+
713
+ **User Interaction Tracking:**
714
+ - Mobile app usage statistics and patterns
715
+ - Reservation and payment transaction data
716
+ - User demographic information (voluntarily provided)
717
+ - Session frequency and duration metrics
718
+
719
+ **Direct User Feedback:**
720
+ - Post-charging session satisfaction surveys
721
+ - Quarterly in-depth user experience assessments
722
+ - Focus groups with different user segments
723
+ - Suggestion and improvement channels
724
+
725
+ **Economic Impact Assessment:**
726
+ - Employment data from operations and partners
727
+ - Procurement and spending analysis
728
+ - Revenue and financial performance tracking
729
+ - Tax contribution documentation
730
+
731
+ **Environmental Impact Calculation:**
732
+ - Energy delivery measurement
733
+ - Emissions avoidance calculations based on EPA methodologies
734
+ - Renewable energy generation monitoring
735
+ - Grid impact analysis in partnership with utilities
736
+
737
+ ### Reporting Frequency and Format
738
+
739
+ Unity Fleet will maintain a transparent reporting structure with regular updates to stakeholders:
740
+
741
+ **Monthly Operational Reports:**
742
+ - Key usage statistics and trends
743
+ - System performance and reliability metrics
744
+ - Notable operational developments
745
+ - Progress toward targets
746
+
747
+ **Quarterly Performance Assessments:**
748
+ - Comprehensive analysis of all KPIs
749
+ - Comparison to targets and previous periods
750
+ - User demographic and behavior analysis
751
+ - Financial performance summary
752
+
753
+ **Annual Impact Evaluation:**
754
+ - Detailed analysis of environmental impact
755
+ - Economic benefit assessment
756
+ - Equity and accessibility performance
757
+ - Strategic recommendations for improvement
758
+
759
+ **Public Dashboard:**
760
+ - Real-time display of key metrics on website
761
+ - Environmental impact visualization
762
+ - System availability information
763
+ - Community benefit highlights
764
+
765
+ ### Continuous Improvement Process
766
+
767
+ Unity Fleet will implement a structured approach to using evaluation data for ongoing enhancement:
768
+
769
+ **Quarterly Review Meetings:**
770
+ - Cross-functional team analysis of performance data
771
+ - Identification of improvement opportunities
772
+ - Prioritization of enhancement initiatives
773
+ - Action plan development
774
+
775
+ **User Experience Optimization:**
776
+ - Regular usability testing and interface refinement
777
+ - Feature development based on user feedback
778
+ - Service enhancement to address identified needs
779
+ - Accessibility improvements
780
+
781
+ **Operational Efficiency Initiatives:**
782
+ - Energy efficiency optimization
783
+ - Maintenance procedure refinement
784
+ - Staffing and resource allocation adjustments
785
+ - Technology upgrades based on performance data
786
+
787
+ **Strategic Adaptation:**
788
+ - Annual strategic review incorporating evaluation findings
789
+ - Adjustment of growth plans based on usage patterns
790
+ - Refinement of service offerings to maximize impact
791
+ - Partnership development informed by performance data
792
+
793
+ ## 6.3 Long-term Impact Assessment
794
+
795
+ Beyond immediate performance metrics, Unity Fleet will conduct comprehensive assessments of the project's long-term impact on Illinois' transportation system, environment, and economy:
796
+
797
+ ### Environmental Benefits Quantification
798
+
799
+ **Transportation Emissions Analysis:**
800
+ Unity Fleet will partner with environmental researchers to conduct a comprehensive analysis of the project's impact on transportation emissions, including:
801
+ - Direct emissions reduction from EV adoption
802
+ - Secondary effects on conventional vehicle usage
803
+ - Impact on regional air quality indicators
804
+ - Contribution to Illinois' climate goals
805
+
806
+ **Renewable Energy Integration Assessment:**
807
+ The project will evaluate the effectiveness of integrating solar generation with EV charging, analyzing:
808
+ - Optimization of renewable energy utilization
809
+ - Grid impact during peak demand periods
810
+ - Battery storage effectiveness
811
+ - Seasonal performance variations
812
+
813
+ **Life Cycle Assessment:**
814
+ A complete life cycle analysis will examine the net environmental impact of the project, including:
815
+ - Infrastructure construction and materials
816
+ - Equipment manufacturing and transportation
817
+ - Operational energy consumption
818
+ - End-of-life considerations and circular economy opportunities
819
+
820
+ ### Economic Impact Measurement
821
+
822
+ **Job Creation and Economic Multiplier:**
823
+ Unity Fleet will work with economic analysts to quantify the project's contribution to Illinois' economy:
824
+ - Direct employment impact
825
+ - Indirect job creation through suppliers and partners
826
+ - Induced economic activity from employee spending
827
+ - Skills development and workforce advancement
828
+
829
+ **Transportation Cost Analysis:**
830
+ The project will assess its impact on transportation costs for individuals and businesses:
831
+ - Comparative cost of electric vs. conventional vehicle operation
832
+ - Subscription model value compared to vehicle ownership
833
+ - Business transportation cost reduction through fleet services
834
+ - Time value benefits from charging hub amenities
835
+
836
+ **Property Value and Development Impact:**
837
+ Research will examine the influence of "The Link" charging hubs on surrounding areas:
838
+ - Commercial activity near hub locations
839
+ - Property value trends in proximity to charging infrastructure
840
+ - Development patterns influenced by charging availability
841
+ - Tax base enhancement in host communities
842
+
843
+ ### Transportation System Improvement Metrics
844
+
845
+ **EV Adoption Acceleration:**
846
+ Unity Fleet will track the project's contribution to EV adoption rates:
847
+ - New EV registrations in service areas
848
+ - Conversion rates from conventional to electric vehicles
849
+ - Range anxiety reduction through survey assessment
850
+ - Charging as a factor in vehicle purchase decisions
851
+
852
+ **Modal Integration Assessment:**
853
+ The project will evaluate how "The Link" charging network integrates with other transportation modes:
854
+ - Connections to public transit
855
+ - Support for multi-modal trips
856
+ - Reduction in single-occupancy vehicle trips
857
+ - Enhancement of transportation system resilience
858
+
859
+ **Infrastructure Utilization Optimization:**
860
+ Analysis will examine how the project affects overall transportation infrastructure usage:
861
+ - Peak travel demand modification
862
+ - Parking requirement impacts
863
+ - Road capacity utilization changes
864
+ - Charging infrastructure adequacy for growing EV fleet
865
+
866
+ Through this comprehensive evaluation framework, Unity Fleet will ensure that "The Link" charging network delivers measurable benefits aligned with Illinois' transportation, environmental, and economic development goals. The performance measurement system will provide accountability to stakeholders while generating valuable data to guide the evolution of EV charging infrastructure and services throughout the state.
867
+ # Partnerships and Stakeholder Engagement
868
+
869
+ ## 7.1 Current Partners
870
+
871
+ Unity Fleet has established strategic partnerships with key organizations to enhance the implementation and impact of "The Link" charging network. These partnerships provide technical expertise, community connections, and complementary capabilities that strengthen the project:
872
+
873
+ ### Technology Providers
874
+ - **EV Charging Equipment Manufacturer:** Unity Fleet has secured a partnership with a leading manufacturer of DC fast charging equipment, ensuring access to cutting-edge technology and technical support.
875
+ - **Solar and Battery System Integrator:** A specialized renewable energy firm will provide design and implementation services for the solar arrays and battery storage systems.
876
+ - **Software Development Partner:** Unity Fleet is collaborating with an Illinois-based software development company to create the mobile application and management platforms.
877
+ - **Fleet Management Technology Provider:** A partnership with a fleet telematics specialist will support the vehicle tracking and optimization systems.
878
+
879
+ ### Local Businesses
880
+ - **Retail and Food Service Partners:** Unity Fleet has established relationships with several food and beverage providers interested in operating within "The Link" hub locations.
881
+ - **Corporate Transportation Clients:** Initial agreements with three Illinois-based corporations to provide electric shuttle services for employees.
882
+ - **Property Development Partners:** Relationships with commercial property owners and developers to identify and secure optimal locations for charging hubs.
883
+ - **Vehicle Suppliers:** Partnerships with electric vehicle dealers to support fleet acquisition and potential promotional opportunities.
884
+
885
+ ### Community Organizations
886
+ - **Environmental Advocacy Groups:** Collaborations with environmental organizations to promote the benefits of electric transportation.
887
+ - **Workforce Development Programs:** Partnerships with job training organizations to develop skills in EV infrastructure installation and maintenance.
888
+ - **Community Service Organizations:** Relationships with social service providers to implement the Community Access Program for low-income residents.
889
+ - **Educational Institutions:** Collaborations with community colleges and universities for research, internships, and educational programming.
890
+
891
+ ## 7.2 Stakeholder Engagement Plan
892
+
893
+ Unity Fleet will implement a comprehensive stakeholder engagement strategy to ensure the project addresses community needs, builds broad support, and maximizes positive impact:
894
+
895
+ ### Community Outreach Strategy
896
+
897
+ **Informational Sessions:**
898
+ - Public presentations in each target community
899
+ - Virtual webinars explaining the project and benefits
900
+ - Site-specific open houses during planning phases
901
+ - Educational workshops on EV technology and benefits
902
+
903
+ **Digital Engagement:**
904
+ - Dedicated project website with regular updates
905
+ - Social media presence with engaging content
906
+ - Email newsletter for interested stakeholders
907
+ - Online feedback forms and suggestion channels
908
+
909
+ **Targeted Outreach to Underserved Communities:**
910
+ - Presentations at community centers and faith-based organizations
911
+ - Materials in multiple languages reflecting community demographics
912
+ - Partnerships with trusted community organizations
913
+ - Transportation to informational events when needed
914
+
915
+ **Educational Programming:**
916
+ - EV awareness events and test drive opportunities
917
+ - School programs on clean transportation
918
+ - Workforce development information sessions
919
+ - Community college partnerships for technical training
920
+
921
+ ### Local Government Coordination
922
+
923
+ **Municipal Engagement:**
924
+ - Early consultation with local officials in target communities
925
+ - Regular briefings for municipal staff and elected representatives
926
+ - Coordination with planning and zoning departments
927
+ - Alignment with local economic development initiatives
928
+
929
+ **Permitting and Regulatory Coordination:**
930
+ - Proactive engagement with permitting authorities
931
+ - Clear communication about project timelines and requirements
932
+ - Responsive addressing of questions and concerns
933
+ - Documentation of processes to streamline future deployments
934
+
935
+ **Transportation Planning Integration:**
936
+ - Coordination with local transportation planning agencies
937
+ - Alignment with regional mobility strategies
938
+ - Integration with public transit planning
939
+ - Contribution to local climate action initiatives
940
+
941
+ **Utility Coordination:**
942
+ - Early engagement with electric utilities serving target areas
943
+ - Collaborative planning for grid connections and capacity
944
+ - Exploration of potential demand response programs
945
+ - Data sharing for grid impact analysis
946
+
947
+ ### Business Partnership Development
948
+
949
+ **Local Business Engagement:**
950
+ - Outreach to businesses near potential hub locations
951
+ - Exploration of co-marketing opportunities
952
+ - Development of cross-promotional programs
953
+ - Creation of business charging incentives
954
+
955
+ **Corporate Transportation Programs:**
956
+ - Targeted outreach to major employers
957
+ - Custom proposals for employee transportation solutions
958
+ - Fleet electrification consulting services
959
+ - Workplace charging integration options
960
+
961
+ **Tourism and Hospitality Connections:**
962
+ - Partnerships with hotels and tourist destinations
963
+ - Integration with visitor information services
964
+ - Charging packages for travelers
965
+ - Cross-promotion with regional attractions
966
+
967
+ **Supply Chain Development:**
968
+ - Identification of Illinois-based suppliers and contractors
969
+ - Capacity building for local businesses to participate
970
+ - Mentorship for small and diverse businesses
971
+ - Transparent procurement processes
972
+
973
+ ## 7.3 Letters of Support
974
+
975
+ Unity Fleet has secured letters of support from a diverse range of stakeholders who recognize the value of "The Link" charging network for Illinois' transportation system, environment, and economy. These endorsements demonstrate the broad appeal of the project and its alignment with community priorities:
976
+
977
+ ### Government and Public Agencies
978
+ - Illinois Environmental Protection Agency
979
+ - Regional Transportation Authority
980
+ - City of Decatur Economic Development Department
981
+ - Illinois Clean Energy Community Foundation
982
+
983
+ ### Business and Industry
984
+ - Illinois Chamber of Commerce
985
+ - Electric Vehicle Association of Illinois
986
+ - Illinois Automobile Dealers Association
987
+ - Regional business improvement districts
988
+
989
+ ### Community and Environmental Organizations
990
+ - Illinois Environmental Council
991
+ - Center for Neighborhood Technology
992
+ - Illinois Clean Jobs Coalition
993
+ - Community transportation advocacy groups
994
+
995
+ ### Educational and Research Institutions
996
+ - University of Illinois Smart Transportation Infrastructure Initiative
997
+ - Illinois Community College Sustainability Network
998
+ - Illinois Institute of Technology Power Electronics Laboratory
999
+ - Local workforce development boards
1000
+
1001
+ These letters of support, included in the appendix to this proposal, demonstrate the widespread recognition of "The Link" charging network's potential to advance Illinois' transportation, environmental, and economic goals. The diverse range of supporting organizations reflects the project's comprehensive approach to addressing multiple priorities through innovative infrastructure development.
1002
+
1003
+ Unity Fleet will continue to expand this stakeholder network throughout project implementation, ensuring that "The Link" charging network reflects community needs and creates maximum benefit for all Illinois residents.
1004
+ # Conclusion
1005
+
1006
+ Unity Fleet's proposal for "The Link" EV charging network represents a transformative opportunity to advance Illinois' transportation infrastructure, environmental goals, and economic development priorities. This innovative project aligns perfectly with the state's commitment to reducing greenhouse gas emissions, expanding electric vehicle adoption, and creating sustainable transportation solutions for all residents.
1007
+
1008
+ By combining cutting-edge charging technology with solar power generation, amenity-rich environments, and flexible fleet services, "The Link" addresses multiple barriers to EV adoption simultaneously. The distinctive hub design creates visible landmarks that symbolize Illinois' leadership in transportation innovation while providing practical infrastructure that meets the growing demand for convenient, reliable charging.
1009
+
1010
+ The $3.2 million in requested funding from the Illinois Department of Transportation's Statewide Planning and Research Funds will enable Unity Fleet to implement the first phase of this visionary network, establishing five strategically located charging hubs across the state. These initial locations will demonstrate the concept's viability while providing immediate benefits to communities, businesses, and individual EV users.
1011
+
1012
+ Unity Fleet brings the necessary expertise, partnerships, and matching resources to ensure successful implementation. Our comprehensive approach includes detailed planning, community engagement, and rigorous performance measurement to maximize the project's impact and ensure accountability to all stakeholders.
1013
+
1014
+ "The Link" charging network will deliver significant benefits to Illinois:
1015
+
1016
+ - **Environmental Impact:** Accelerating EV adoption to reduce transportation emissions and support climate goals
1017
+ - **Economic Development:** Creating jobs, supporting local businesses, and building workforce capacity in clean energy sectors
1018
+ - **Transportation Innovation:** Advancing Illinois' leadership in mobility technology and infrastructure
1019
+ - **Equity and Accessibility:** Ensuring that clean transportation benefits reach all communities through inclusive design and targeted programs
1020
+ - **Energy Integration:** Demonstrating the successful integration of renewable energy with transportation infrastructure
1021
+
1022
+ Unity Fleet is committed to making "The Link" charging network a model for sustainable transportation infrastructure that can be replicated across Illinois and beyond. We look forward to the opportunity to partner with the Illinois Department of Transportation on this important initiative and contribute to the state's clean energy and transportation future.
1023
+
1024
+ Thank you for your consideration of this proposal.