Upload 32 files

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+4A717E73-3287-4051-AE08-44EB1DD21F7F.png filter=lfs diff=lfs merge=lfs -text
+6120F952-C801-4C53-AFE0-BB9363A1F539.png filter=lfs diff=lfs merge=lfs -text
+DA9BA4EE-1541-40D5-BD7B-F3D9227808D1.png filter=lfs diff=lfs merge=lfs -text

ChainlinkDemo.css

@@ -0,0 +1,2026 @@
+/* ChainLink Tokenization Demo Styles */
+.chainlink-demo {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  background-color: #0B0B0F;
+  color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+/* Loading Screen */
+.chainlink-demo.loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loading-logo {
+  width: 150px;
+  height: 150px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.loading-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.loading-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  border: 2px solid #00E0FF;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+/* Header */
+.demo-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.demo-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.demo-title h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 1px;
+}
+
+.demo-subtitle {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.token-stats {
+  display: flex;
+  gap: 20px;
+}
+
+.token-price, .token-market-cap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 224, 255, 0.2);
+}
+
+.price-label, .cap-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.price-value, .cap-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.price-change {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.price-change.positive {
+  background-color: rgba(53, 242, 219, 0.2);
+  color: #35F2DB;
+}
+
+.price-change.negative {
+  background-color: rgba(255, 85, 85, 0.2);
+  color: #FF5555;
+}
+
+/* Navigation */
+.demo-navigation {
+  display: flex;
+  gap: 2px;
+  background-color: rgba(20, 20, 30, 0.5);
+  padding: 0 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.demo-navigation::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-button {
+  padding: 16px 20px;
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+}
+
+.nav-button.active {
+  color: #00E0FF;
+}
+
+.nav-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 3px 3px 0 0;
+}
+
+/* Main Content */
+.demo-content {
+  padding: 20px;
+  min-height: calc(100vh - 200px);
+}
+
+/* Overview Tab */
+.overview-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.network-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.stats-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.stats-card h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.token-supply-chart {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.supply-chart-container {
+  width: 200px;
+  height: 200px;
+}
+
+.supply-chart {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+.supply-segment {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: center;
+}
+
+.supply-segment.circulating {
+  background-color: #00E0FF;
+}
+
+.supply-segment.reserved {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.supply-inner {
+  position: absolute;
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+  background-color: #0B0B0F;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.supply-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #00E0FF;
+}
+
+.supply-label {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.supply-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.legend-color.circulating {
+  background-color: #00E0FF;
+}
+
+.legend-color.reserved {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.legend-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.legend-value {
+  margin-left: auto;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+.metric-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 15px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metric-icon {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.metric-value {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.metric-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.token-distribution {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.token-distribution h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.distribution-chart {
+  display: flex;
+  gap: 30px;
+  flex-wrap: wrap;
+}
+
+.pie-chart-container {
+  width: 200px;
+  height: 200px;
+  flex-shrink: 0;
+}
+
+.pie-chart {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+.pie-segment {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: center;
+}
+
+.pie-inner {
+  position: absolute;
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+  background-color: #0B0B0F;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pie-icon {
+  font-size: 24px;
+}
+
+.distribution-legend {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px;
+}
+
+.token-utility {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.token-utility h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.utility-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.utility-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.utility-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.utility-icon {
+  font-size: 20px;
+  color: #00E0FF;
+}
+
+.utility-card h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.utility-card p {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 1.5;
+}
+
+.value-drivers {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.value-drivers h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.drivers-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table-header {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  border-radius: 8px 8px 0 0;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.table-row {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.table-row:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.driver-column {
+  width: 25%;
+  padding: 0 10px;
+}
+
+.impact-column {
+  width: 15%;
+  padding: 0 10px;
+  font-weight: 600;
+}
+
+.impact-high {
+  color: #35F2DB;
+}
+
+.impact-medium {
+  color: #FFC107;
+}
+
+.impact-low {
+  color: #FF5555;
+}
+
+.description-column {
+  flex: 1;
+  padding: 0 10px;
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+/* Wallet Tab */
+.wallet-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.wallet-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.wallet-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.wallet-card.balance {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.wallet-icon {
+  font-size: 36px;
+  margin-bottom: 15px;
+}
+
+.wallet-balance {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.wallet-label {
+  font-size: 16px;
+  opacity: 0.7;
+  margin-bottom: 10px;
+}
+
+.wallet-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.staking-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.staking-header h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.staking-apy {
+  background-color: rgba(53, 242, 219, 0.2);
+  color: #35F2DB;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.staking-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.staking-metric {
+  text-align: center;
+}
+
+.metric-label {
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 5px;
+}
+
+.metric-value {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.metric-value-usd {
+  font-size: 14px;
+  color: #00E0FF;
+}
+
+.staking-button {
+  width: 100%;
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  color: #00E0FF;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.staking-button:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+.wallet-card.actions h3 {
+  margin: 0 0 15px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.action-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.action-button {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.action-button.active {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+.token-action-form {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 15px;
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.form-header h4 {
+  margin: 0 0 15px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.form-content {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.amount-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.amount-selector label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.amount-controls {
+  display: flex;
+  align-items: center;
+}
+
+.amount-button {
+  width: 30px;
+  height: 30px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  color: white;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.amount-button:hover:not(:disabled) {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.amount-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.amount-controls input {
+  width: 60px;
+  height: 30px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: white;
+  font-size: 14px;
+  text-align: center;
+  margin: 0 10px;
+}
+
+.conversion-preview {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.conversion-detail {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.conversion-detail:last-child {
+  margin-bottom: 0;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.detail-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.detail-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.confirm-action-button {
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  color: #0B0B0F;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.confirm-action-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0, 224, 255, 0.3);
+}
+
+.transaction-history {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.transaction-history h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.history-tabs {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.history-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.history-tab {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 8px 15px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.history-tab:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.history-tab.active {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+.history-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.date-column {
+  width: 120px;
+  padding: 0 10px;
+}
+
+.type-column {
+  flex: 1;
+  padding: 0 10px;
+}
+
+.amount-column {
+  width: 120px;
+  padding: 0 10px;
+  text-align: right;
+}
+
+.status-column {
+  width: 100px;
+  padding: 0 10px;
+  text-align: right;
+}
+
+.table-row.acquisition .amount-column {
+  color: #35F2DB;
+}
+
+.table-row.usage .amount-column {
+  color: #FF5555;
+}
+
+/* Ownership Tab */
+.ownership-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.ownership-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.ownership-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.ownership-card h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.ownership-percentage {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.percentage-value {
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.percentage-label {
+  font-size: 16px;
+  opacity: 0.7;
+}
+
+.ownership-details {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 15px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.detail-item:last-child {
+  margin-bottom: 0;
+}
+
+.detail-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.detail-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.returns-chart {
+  height: 200px;
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.chart-bars {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+
+.chart-bar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 60px;
+}
+
+.bar-label {
+  margin-bottom: 10px;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.bar-wrapper {
+  width: 40px;
+  height: 80%;
+  display: flex;
+  align-items: flex-end;
+}
+
+.bar {
+  width: 100%;
+  background: linear-gradient(180deg, #00E0FF, #35F2DB);
+  border-radius: 4px 4px 0 0;
+  transition: height 0.5s ease;
+}
+
+.bar-value {
+  margin-top: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.returns-note {
+  font-size: 14px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+.asset-holdings {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.asset-holdings h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.holdings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.holding-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.holding-card.operational {
+  border-color: rgba(53, 242, 219, 0.3);
+}
+
+.holding-card.construction {
+  border-color: rgba(255, 193, 7, 0.3);
+}
+
+.holding-card.planning {
+  border-color: rgba(0, 224, 255, 0.3);
+}
+
+.holding-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.holding-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.holding-status {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.holding-status.operational {
+  background-color: rgba(53, 242, 219, 0.2);
+  color: #35F2DB;
+}
+
+.holding-status.construction {
+  background-color: rgba(255, 193, 7, 0.2);
+  color: #FFC107;
+}
+
+.holding-status.planning {
+  background-color: rgba(0, 224, 255, 0.2);
+  color: #00E0FF;
+}
+
+.holding-details {
+  margin-bottom: 15px;
+}
+
+.holding-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.holding-item:last-child {
+  margin-bottom: 0;
+}
+
+.item-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.item-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.holding-actions {
+  text-align: center;
+}
+
+.view-details-button {
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 8px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.view-details-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.network-growth {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.network-growth h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.opportunities-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.opportunity-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+
+.opportunity-icon {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.opportunity-card h4 {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.opportunity-card p {
+  margin: 0 0 15px 0;
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 1.5;
+  flex-grow: 1;
+}
+
+.opportunity-metrics {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+
+.metric {
+  text-align: center;
+}
+
+.metric-label {
+  font-size: 12px;
+  opacity: 0.7;
+  margin-bottom: 5px;
+}
+
+.metric-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.opportunity-button {
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 8px;
+  color: #00E0FF;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.opportunity-button:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+/* Market Tab */
+.market-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.market-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.market-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.market-card h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.current-price {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.price-value {
+  font-size: 36px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.price-change {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.price-chart {
+  height: 200px;
+  position: relative;
+  padding-bottom: 30px;
+}
+
+.chart-lines {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.chart-point {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+}
+
+.point-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #00E0FF;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.point-line {
+  height: 2px;
+  background-color: #00E0FF;
+  position: absolute;
+  top: 5px;
+  left: 0;
+}
+
+.chart-labels {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.chart-label {
+  position: absolute;
+  font-size: 12px;
+  opacity: 0.7;
+  transform: translateX(-50%);
+}
+
+.volume-chart {
+  height: 200px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+
+.volume-bar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 60px;
+}
+
+.bar-wrapper {
+  width: 40px;
+  height: 150px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.volume-bar {
+  width: 100%;
+  background: linear-gradient(180deg, #FFC107, #FF9800);
+  border-radius: 4px 4px 0 0;
+  transition: height 0.5s ease;
+}
+
+.price-projections {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.price-projections h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.projections-chart {
+  height: 250px;
+  margin-bottom: 20px;
+}
+
+.projection-bar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80px;
+}
+
+.projection-range {
+  width: 20px;
+  background-color: rgba(0, 224, 255, 0.2);
+  border-radius: 10px;
+  position: absolute;
+}
+
+.projection-line {
+  width: 40px;
+  height: 2px;
+  background-color: #00E0FF;
+  position: absolute;
+}
+
+.range-values {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.high-value, .low-value {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.high-value {
+  color: #35F2DB;
+}
+
+.low-value {
+  color: #00E0FF;
+  margin-top: 5px;
+}
+
+.projections-note {
+  font-size: 14px;
+  opacity: 0.7;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.market-insights {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.market-insights h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.insights-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.insight-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.insight-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.insight-icon {
+  font-size: 24px;
+}
+
+.insight-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.insight-list {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.insight-list li {
+  margin-bottom: 8px;
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 1.5;
+}
+
+/* Token Flow Tab */
+.token-flow-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.flow-visualization {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.flow-visualization h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.flow-container {
+  height: 400px;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.flow-diagram {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.flow-node {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 10px;
+}
+
+.flow-node.subscribers {
+  top: 50px;
+  left: 50px;
+}
+
+.flow-node.network {
+  top: 50px;
+  right: 50px;
+}
+
+.flow-node.infrastructure {
+  bottom: 50px;
+  right: 50px;
+}
+
+.flow-node.revenue {
+  bottom: 50px;
+  left: 50px;
+}
+
+.node-icon {
+  font-size: 24px;
+  margin-bottom: 5px;
+}
+
+.node-label {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.node-value {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.flow-path {
+  position: absolute;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 0.2);
+  transform-origin: left center;
+}
+
+.flow-path.subscription {
+  top: 110px;
+  left: 170px;
+  width: calc(100% - 340px);
+}
+
+.flow-path.redemption {
+  top: 170px;
+  left: 170px;
+  width: calc(100% - 340px);
+  transform: rotate(90deg);
+}
+
+.flow-path.investment {
+  bottom: 110px;
+  left: 170px;
+  width: calc(100% - 340px);
+}
+
+.flow-path.returns {
+  bottom: 170px;
+  left: 170px;
+  width: calc(100% - 340px);
+  transform: rotate(90deg);
+}
+
+.path-label {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+.token-particle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #00E0FF;
+  top: -3px;
+}
+
+.flow-diagram.animate .token-particle {
+  animation: moveParticle 5s infinite linear;
+}
+
+@keyframes moveParticle {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+.flow-diagram.animate .flow-path.subscription .token-particle:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.flow-diagram.animate .flow-path.subscription .token-particle:nth-child(2) {
+  animation-delay: 1.5s;
+}
+
+.flow-diagram.animate .flow-path.subscription .token-particle:nth-child(3) {
+  animation-delay: 3s;
+}
+
+.flow-diagram.animate .flow-path.redemption .token-particle:nth-child(1) {
+  animation-delay: 0.5s;
+}
+
+.flow-diagram.animate .flow-path.redemption .token-particle:nth-child(2) {
+  animation-delay: 2.5s;
+}
+
+.flow-diagram.animate .flow-path.investment .token-particle:nth-child(1) {
+  animation-delay: 1s;
+}
+
+.flow-diagram.animate .flow-path.investment .token-particle:nth-child(2) {
+  animation-delay: 2s;
+}
+
+.flow-diagram.animate .flow-path.investment .token-particle:nth-child(3) {
+  animation-delay: 3.5s;
+}
+
+.flow-diagram.animate .flow-path.returns .token-particle:nth-child(1) {
+  animation-delay: 1.5s;
+}
+
+.flow-diagram.animate .flow-path.returns .token-particle:nth-child(2) {
+  animation-delay: 3.5s;
+}
+
+.flow-controls {
+  text-align: center;
+}
+
+.animate-flow-button {
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #00E0FF;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.animate-flow-button:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+.flow-explanation {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.flow-explanation h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.explanation-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.step {
+  display: flex;
+  gap: 15px;
+}
+
+.step-number {
+  width: 30px;
+  height: 30px;
+  background-color: rgba(0, 224, 255, 0.2);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #00E0FF;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-content h4 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.step-content p {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 1.5;
+}
+
+.token-benefits {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.token-benefits h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.benefits-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.benefit-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.benefit-icon {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.benefit-card h4 {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.benefit-card p {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 1.5;
+}
+
+/* Token Confirmation Modal */
+.token-confirmation-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+}
+
+.modal-content {
+  background-color: #0B0B0F;
+  border-radius: 16px;
+  padding: 30px;
+  border: 1px solid rgba(0, 224, 255, 0.3);
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  animation: modalFadeIn 0.3s ease;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modal-content h3 {
+  margin: 0 0 20px 0;
+  font-size: 24px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.confirmation-details {
+  margin-bottom: 20px;
+}
+
+.confirmation-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.confirmation-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 15px;
+}
+
+.cancel-button, .confirm-button {
+  flex: 1;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cancel-button {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+.confirm-button {
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border: none;
+  color: #0B0B0F;
+}
+
+.cancel-button:hover, .confirm-button:hover {
+  transform: translateY(-2px);
+}
+
+/* Footer */
+.demo-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 30px;
+}
+
+.footer-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.footer-info span {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.footer-links {
+  display: flex;
+  gap: 20px;
+}
+
+.footer-link {
+  font-size: 12px;
+  opacity: 0.7;
+  text-decoration: none;
+  color: white;
+  transition: all 0.2s ease;
+}
+
+.footer-link:hover {
+  opacity: 1;
+  color: #00E0FF;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .demo-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+  
+  .token-stats {
+    width: 100%;
+    justify-content: space-between;
+  }
+  
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .distribution-chart {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .utility-grid, .insights-grid, .benefits-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .wallet-overview, .ownership-overview, .market-overview {
+    grid-template-columns: 1fr;
+  }
+  
+  .action-buttons {
+    grid-template-columns: 1fr;
+  }
+  
+  .holdings-grid, .opportunities-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .flow-node {
+    width: 80px;
+    height: 80px;
+  }
+  
+  .flow-node.subscribers {
+    top: 30px;
+    left: 30px;
+  }
+  
+  .flow-node.network {
+    top: 30px;
+    right: 30px;
+  }
+  
+  .flow-node.infrastructure {
+    bottom: 30px;
+    right: 30px;
+  }
+  
+  .flow-node.revenue {
+    bottom: 30px;
+    left: 30px;
+  }
+  
+  .flow-path.subscription {
+    top: 70px;
+    left: 110px;
+    width: calc(100% - 220px);
+  }
+  
+  .flow-path.redemption {
+    top: 110px;
+    left: 110px;
+    width: calc(100% - 220px);
+  }
+  
+  .flow-path.investment {
+    bottom: 70px;
+    left: 110px;
+    width: calc(100% - 220px);
+  }
+  
+  .flow-path.returns {
+    bottom: 110px;
+    left: 110px;
+    width: calc(100% - 220px);
+  }
+  
+  .step {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .confirmation-actions {
+    flex-direction: column;
+  }
+  
+  .demo-footer {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .footer-links {
+    width: 100%;
+    justify-content: space-between;
+  }
+}

ChainlinkDemo.jsx

@@ -0,0 +1,1082 @@
+import React, { useState, useEffect } from 'react';
+import './ChainlinkDemo.css';
+
+// Mock data for demonstration purposes
+const mockTokenData = {
+  networkStats: {
+    totalTokens: 1000000,
+    circulatingSupply: 350000,
+    reservedPool: 650000,
+    tokenPrice: 2.75,
+    marketCap: 962500,
+    stakeholders: 1250,
+    chargingHubs: 36,
+    totalTransactions: 15782
+  },
+  userWallet: {
+    balance: 45,
+    stakingRewards: 3.2,
+    acquisitionHistory: [
+      { date: "Apr 1, 2025", amount: 15, source: "Monthly Subscription", price: 2.65 },
+      { date: "Mar 1, 2025", amount: 15, source: "Monthly Subscription", price: 2.58 },
+      { date: "Feb 1, 2025", amount: 15, source: "Monthly Subscription", price: 2.42 }
+    ],
+    transactionHistory: [
+      { date: "Mar 15, 2025", type: "Staking", amount: 20, status: "Active" },
+      { date: "Mar 10, 2025", type: "Charging Credit", amount: 5, status: "Completed" },
+      { date: "Feb 22, 2025", type: "Governance Vote", amount: 0, status: "Completed" }
+    ]
+  },
+  assetOwnership: {
+    totalOwnership: 0.0045, // percentage of network
+    hubs: [
+      { id: 101, name: "Springfield Downtown", ownership: 0.0012, status: "Operational", monthlyRevenue: 0.32 },
+      { id: 102, name: "Champaign-Urbana Hub", ownership: 0.0018, status: "Construction", monthlyRevenue: 0 },
+      { id: 103, name: "Bloomington-Normal", ownership: 0.0015, status: "Planning", monthlyRevenue: 0 }
+    ],
+    projectedReturns: [
+      { year: 2025, quarter: 2, returns: 0.45 },
+      { year: 2025, quarter: 3, returns: 0.68 },
+      { year: 2025, quarter: 4, returns: 0.92 },
+      { year: 2026, quarter: 1, returns: 1.25 }
+    ]
+  },
+  tokenomics: {
+    distribution: [
+      { category: "Subscriber Rewards", percentage: 35, color: "#00E0FF" },
+      { category: "Infrastructure Development", percentage: 25, color: "#35F2DB" },
+      { category: "Operations", percentage: 15, color: "#FFC107" },
+      { category: "Community Governance", percentage: 10, color: "#FF5555" },
+      { category: "Partnerships", percentage: 10, color: "#9C27B0" },
+      { category: "Reserve", percentage: 5, color: "#607D8B" }
+    ],
+    utilityFunctions: [
+      { function: "Charging Credits", description: "Redeem tokens for charging credits at The Link hubs" },
+      { function: "Subscription Discounts", description: "Apply tokens toward Unity Fleet subscription fees" },
+      { function: "Governance Rights", description: "Vote on network expansion and feature development" },
+      { function: "Revenue Sharing", description: "Earn a portion of network revenue based on token holdings" },
+      { function: "Asset Ownership", description: "Tokens represent fractional ownership in physical infrastructure" }
+    ],
+    valueDrivers: [
+      { driver: "Network Expansion", impact: "High", description: "Each new charging hub increases token utility and demand" },
+      { driver: "EV Adoption Rate", impact: "High", description: "Accelerating EV adoption drives charging demand and token usage" },
+      { driver: "Subscription Growth", impact: "Medium", description: "New subscribers receive tokens, increasing distribution and usage" },
+      { driver: "Energy Efficiency", impact: "Medium", description: "Optimized energy usage improves hub profitability and token value" },
+      { driver: "Governance Decisions", impact: "Low", description: "Community governance ensures alignment with token holder interests" }
+    ]
+  },
+  marketData: {
+    priceHistory: [
+      { month: "Jan", price: 2.25 },
+      { month: "Feb", price: 2.42 },
+      { month: "Mar", price: 2.58 },
+      { month: "Apr", price: 2.75 }
+    ],
+    volumeHistory: [
+      { month: "Jan", volume: 15000 },
+      { month: "Feb", volume: 22500 },
+      { month: "Mar", volume: 28000 },
+      { month: "Apr", volume: 35000 }
+    ],
+    projections: [
+      { quarter: "Q2 2025", lowEstimate: 2.85, highEstimate: 3.25 },
+      { quarter: "Q3 2025", lowEstimate: 3.10, highEstimate: 3.75 },
+      { quarter: "Q4 2025", lowEstimate: 3.50, highEstimate: 4.50 },
+      { quarter: "Q1 2026", lowEstimate: 4.00, highEstimate: 5.25 }
+    ]
+  }
+};
+
+function ChainlinkDemo() {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [loading, setLoading] = useState(true);
+  const [selectedAsset, setSelectedAsset] = useState(null);
+  const [tokenAction, setTokenAction] = useState(null);
+  const [tokenAmount, setTokenAmount] = useState(1);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [animateTokenFlow, setAnimateTokenFlow] = useState(false);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1500);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleAssetSelect = (asset) => {
+    setSelectedAsset(asset);
+  };
+
+  const handleTokenActionSelect = (action) => {
+    setTokenAction(action);
+    setShowConfirmation(false);
+  };
+
+  const handleTokenAmountChange = (amount) => {
+    setTokenAmount(Math.max(1, Math.min(mockTokenData.userWallet.balance, amount)));
+  };
+
+  const handleActionConfirm = () => {
+    setShowConfirmation(true);
+  };
+
+  const handleTokenFlowDemo = () => {
+    setAnimateTokenFlow(true);
+    setTimeout(() => {
+      setAnimateTokenFlow(false);
+    }, 5000);
+  };
+
+  // Helper function to render the network overview
+  const renderOverview = () => {
+    const { networkStats, tokenomics } = mockTokenData;
+    
+    return (
+      <div className="overview-tab">
+        <div className="network-stats">
+          <div className="stats-card token-supply">
+            <h3>Token Supply & Distribution</h3>
+            <div className="token-supply-chart">
+              <div className="supply-chart-container">
+                <div className="supply-chart">
+                  <div 
+                    className="supply-segment circulating" 
+                    style={{ 
+                      transform: `rotate(0deg) skew(${90 - (networkStats.circulatingSupply / networkStats.totalTokens) * 360}deg)` 
+                    }}
+                  ></div>
+                  <div 
+                    className="supply-segment reserved" 
+                    style={{ 
+                      transform: `rotate(${(networkStats.circulatingSupply / networkStats.totalTokens) * 360}deg) skew(${90 - (networkStats.reservedPool / networkStats.totalTokens) * 360}deg)` 
+                    }}
+                  ></div>
+                  <div className="supply-inner">
+                    <div className="supply-value">{networkStats.totalTokens.toLocaleString()}</div>
+                    <div className="supply-label">Total Tokens</div>
+                  </div>
+                </div>
+              </div>
+              <div className="supply-legend">
+                <div className="legend-item">
+                  <div className="legend-color circulating"></div>
+                  <div className="legend-label">Circulating Supply</div>
+                  <div className="legend-value">{networkStats.circulatingSupply.toLocaleString()} tokens</div>
+                </div>
+                <div className="legend-item">
+                  <div className="legend-color reserved"></div>
+                  <div className="legend-label">Reserved Pool</div>
+                  <div className="legend-value">{networkStats.reservedPool.toLocaleString()} tokens</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="stats-card network-metrics">
+            <h3>Network Metrics</h3>
+            <div className="metrics-grid">
+              <div className="metric-item">
+                <div className="metric-icon">💰</div>
+                <div className="metric-value">${networkStats.tokenPrice.toFixed(2)}</div>
+                <div className="metric-label">Token Price</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-icon">📊</div>
+                <div className="metric-value">${networkStats.marketCap.toLocaleString()}</div>
+                <div className="metric-label">Market Cap</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-icon">👥</div>
+                <div className="metric-value">{networkStats.stakeholders.toLocaleString()}</div>
+                <div className="metric-label">Stakeholders</div>
+              </div>
+              <div className="metric-item">
+                <div className="metric-icon">🔌</div>
+                <div className="metric-value">{networkStats.chargingHubs}</div>
+                <div className="metric-label">Charging Hubs</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div className="token-distribution">
+          <h3>Token Distribution</h3>
+          <div className="distribution-chart">
+            <div className="pie-chart-container">
+              <div className="pie-chart">
+                {tokenomics.distribution.map((segment, index) => {
+                  const previousSegments = tokenomics.distribution
+                    .slice(0, index)
+                    .reduce((sum, item) => sum + item.percentage, 0);
+                  
+                  return (
+                    <div 
+                      key={index}
+                      className="pie-segment"
+                      style={{ 
+                        transform: `rotate(${previousSegments * 3.6}deg) skew(${90 - segment.percentage * 3.6}deg)`,
+                        background: segment.color
+                      }}
+                    ></div>
+                  );
+                })}
+                <div className="pie-inner">
+                  <div className="pie-icon">⬡</div>
+                </div>
+              </div>
+            </div>
+            <div className="distribution-legend">
+              {tokenomics.distribution.map((segment, index) => (
+                <div key={index} className="legend-item">
+                  <div className="legend-color" style={{ backgroundColor: segment.color }}></div>
+                  <div className="legend-label">{segment.category}</div>
+                  <div className="legend-value">{segment.percentage}%</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        
+        <div className="token-utility">
+          <h3>Token Utility Functions</h3>
+          <div className="utility-grid">
+            {tokenomics.utilityFunctions.map((utility, index) => (
+              <div key={index} className="utility-card">
+                <div className="utility-header">
+                  <div className="utility-icon">⬡</div>
+                  <h4>{utility.function}</h4>
+                </div>
+                <p>{utility.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+        
+        <div className="value-drivers">
+          <h3>Value Drivers</h3>
+          <div className="drivers-table">
+            <div className="table-header">
+              <div className="driver-column">Driver</div>
+              <div className="impact-column">Impact</div>
+              <div className="description-column">Description</div>
+            </div>
+            {tokenomics.valueDrivers.map((driver, index) => (
+              <div key={index} className="table-row">
+                <div className="driver-column">{driver.driver}</div>
+                <div className={`impact-column impact-${driver.impact.toLowerCase()}`}>{driver.impact}</div>
+                <div className="description-column">{driver.description}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Helper function to render the wallet tab
+  const renderWallet = () => {
+    const { userWallet } = mockTokenData;
+    
+    return (
+      <div className="wallet-tab">
+        <div className="wallet-overview">
+          <div className="wallet-card balance">
+            <div className="wallet-icon">⬡</div>
+            <div className="wallet-balance">{userWallet.balance}</div>
+            <div className="wallet-label">Available Tokens</div>
+            <div className="wallet-value">${(userWallet.balance * mockTokenData.networkStats.tokenPrice).toFixed(2)}</div>
+          </div>
+          
+          <div className="wallet-card staking">
+            <div className="staking-header">
+              <h3>Staking Rewards</h3>
+              <div className="staking-apy">8.5% APY</div>
+            </div>
+            <div className="staking-metrics">
+              <div className="staking-metric">
+                <div className="metric-label">Monthly Rewards</div>
+                <div className="metric-value">{userWallet.stakingRewards} tokens</div>
+                <div className="metric-value-usd">${(userWallet.stakingRewards * mockTokenData.networkStats.tokenPrice).toFixed(2)}</div>
+              </div>
+              <div className="staking-metric">
+                <div className="metric-label">Staked Amount</div>
+                <div className="metric-value">20 tokens</div>
+                <div className="metric-value-usd">${(20 * mockTokenData.networkStats.tokenPrice).toFixed(2)}</div>
+              </div>
+            </div>
+            <button className="staking-button">Manage Staking</button>
+          </div>
+          
+          <div className="wallet-card actions">
+            <h3>Token Actions</h3>
+            <div className="action-buttons">
+              <button 
+                className={`action-button ${tokenAction === 'redeem' ? 'active' : ''}`}
+                onClick={() => handleTokenActionSelect('redeem')}
+              >
+                Redeem for Credits
+              </button>
+              <button 
+                className={`action-button ${tokenAction === 'stake' ? 'active' : ''}`}
+                onClick={() => handleTokenActionSelect('stake')}
+              >
+                Stake Tokens
+              </button>
+              <button 
+                className={`action-button ${tokenAction === 'vote' ? 'active' : ''}`}
+                onClick={() => handleTokenActionSelect('vote')}
+              >
+                Governance Vote
+              </button>
+            </div>
+            
+            {tokenAction && (
+              <div className="token-action-form">
+                <div className="form-header">
+                  <h4>
+                    {tokenAction === 'redeem' ? 'Redeem Tokens for Credits' : 
+                     tokenAction === 'stake' ? 'Stake Tokens for Rewards' : 
+                     'Use Tokens for Governance Vote'}
+                  </h4>
+                </div>
+                
+                <div className="form-content">
+                  <div className="amount-selector">
+                    <label>Token Amount</label>
+                    <div className="amount-controls">
+                      <button 
+                        className="amount-button decrease"
+                        onClick={() => handleTokenAmountChange(tokenAmount - 1)}
+                        disabled={tokenAmount <= 1}
+                      >
+                        -
+                      </button>
+                      <input 
+                        type="number" 
+                        value={tokenAmount} 
+                        onChange={(e) => handleTokenAmountChange(parseInt(e.target.value) || 1)}
+                        min="1"
+                        max={userWallet.balance}
+                      />
+                      <button 
+                        className="amount-button increase"
+                        onClick={() => handleTokenAmountChange(tokenAmount + 1)}
+                        disabled={tokenAmount >= userWallet.balance}
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                  
+                  <div className="conversion-preview">
+                    {tokenAction === 'redeem' && (
+                      <div className="conversion-detail">
+                        <span className="detail-label">Charging Credits:</span>
+                        <span className="detail-value">{tokenAmount * 10} credits</span>
+                      </div>
+                    )}
+                    {tokenAction === 'stake' && (
+                      <div className="conversion-detail">
+                        <span className="detail-label">Monthly Rewards:</span>
+                        <span className="detail-value">{(tokenAmount * 0.085 / 12).toFixed(2)} tokens</span>
+                      </div>
+                    )}
+                    {tokenAction === 'vote' && (
+                      <div className="conversion-detail">
+                        <span className="detail-label">Voting Power:</span>
+                        <span className="detail-value">{tokenAmount} votes</span>
+                      </div>
+                    )}
+                    <div className="conversion-detail">
+                      <span className="detail-label">Token Value:</span>
+                      <span className="detail-value">${(tokenAmount * mockTokenData.networkStats.tokenPrice).toFixed(2)}</span>
+                    </div>
+                  </div>
+                  
+                  <button 
+                    className="confirm-action-button"
+                    onClick={handleActionConfirm}
+                  >
+                    Confirm {tokenAction === 'redeem' ? 'Redemption' : tokenAction === 'stake' ? 'Staking' : 'Vote'}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        
+        <div className="transaction-history">
+          <h3>Transaction History</h3>
+          <div className="history-tabs">
+            <button 
+              className={`history-tab ${!selectedAsset ? 'active' : ''}`}
+              onClick={() => setSelectedAsset(null)}
+            >
+              All Transactions
+            </button>
+            <button 
+              className={`history-tab ${selectedAsset === 'acquisition' ? 'active' : ''}`}
+              onClick={() => handleAssetSelect('acquisition')}
+            >
+              Token Acquisition
+            </button>
+            <button 
+              className={`history-tab ${selectedAsset === 'usage' ? 'active' : ''}`}
+              onClick={() => handleAssetSelect('usage')}
+            >
+              Token Usage
+            </button>
+          </div>
+          
+          <div className="history-table">
+            <div className="table-header">
+              <div className="date-column">Date</div>
+              <div className="type-column">Type</div>
+              <div className="amount-column">Amount</div>
+              <div className="status-column">Status</div>
+            </div>
+            
+            {!selectedAsset && (
+              <>
+                {userWallet.acquisitionHistory.map((transaction, index) => (
+                  <div key={`acq-${index}`} className="table-row acquisition">
+                    <div className="date-column">{transaction.date}</div>
+                    <div className="type-column">{transaction.source}</div>
+                    <div className="amount-column">+{transaction.amount} tokens</div>
+                    <div className="status-column">Completed</div>
+                  </div>
+                ))}
+                {userWallet.transactionHistory.map((transaction, index) => (
+                  <div key={`tx-${index}`} className="table-row usage">
+                    <div className="date-column">{transaction.date}</div>
+                    <div className="type-column">{transaction.type}</div>
+                    <div className="amount-column">{transaction.amount > 0 ? `-${transaction.amount} tokens` : 'N/A'}</div>
+                    <div className="status-column">{transaction.status}</div>
+                  </div>
+                ))}
+              </>
+            )}
+            
+            {selectedAsset === 'acquisition' && (
+              <>
+                {userWallet.acquisitionHistory.map((transaction, index) => (
+                  <div key={index} className="table-row acquisition">
+                    <div className="date-column">{transaction.date}</div>
+                    <div className="type-column">{transaction.source}</div>
+                    <div className="amount-column">+{transaction.amount} tokens</div>
+                    <div className="status-column">Completed</div>
+                  </div>
+                ))}
+              </>
+            )}
+            
+            {selectedAsset === 'usage' && (
+              <>
+                {userWallet.transactionHistory.map((transaction, index) => (
+                  <div key={index} className="table-row usage">
+                    <div className="date-column">{transaction.date}</div>
+                    <div className="type-column">{transaction.type}</div>
+                    <div className="amount-column">{transaction.amount > 0 ? `-${transaction.amount} tokens` : 'N/A'}</div>
+                    <div className="status-column">{transaction.status}</div>
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Helper function to render the asset ownership tab
+  const renderAssetOwnership = () => {
+    const { assetOwnership } = mockTokenData;
+    
+    return (
+      <div className="ownership-tab">
+        <div className="ownership-overview">
+          <div className="ownership-card summary">
+            <h3>Your Network Ownership</h3>
+            <div className="ownership-percentage">
+              <div className="percentage-value">{(assetOwnership.totalOwnership * 100).toFixed(4)}%</div>
+              <div className="percentage-label">of The Link Network</div>
+            </div>
+            <div className="ownership-details">
+              <div className="detail-item">
+                <div className="detail-label">Token Holdings</div>
+                <div className="detail-value">{mockTokenData.userWallet.balance} tokens</div>
+              </div>
+              <div className="detail-item">
+                <div className="detail-label">Network Value</div>
+                <div className="detail-value">${(mockTokenData.networkStats.marketCap).toLocaleString()}</div>
+              </div>
+              <div className="detail-item">
+                <div className="detail-label">Your Share Value</div>
+                <div className="detail-value">
+                  ${(mockTokenData.networkStats.marketCap * assetOwnership.totalOwnership).toFixed(2)}
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="ownership-card projections">
+            <h3>Projected Returns</h3>
+            <div className="returns-chart">
+              <div className="chart-bars">
+                {assetOwnership.projectedReturns.map((quarter, index) => (
+                  <div key={index} className="chart-bar-container">
+                    <div className="bar-label">{`Q${quarter.quarter} ${quarter.year}`}</div>
+                    <div className="bar-wrapper">
+                      <div 
+                        className="bar"
+                        style={{ height: `${quarter.returns * 50}%` }}
+                      ></div>
+                    </div>
+                    <div className="bar-value">${quarter.returns.toFixed(2)}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="returns-note">
+              Projected returns based on current token holdings and network growth forecasts.
+            </div>
+          </div>
+        </div>
+        
+        <div className="asset-holdings">
+          <h3>Your Infrastructure Holdings</h3>
+          <div className="holdings-grid">
+            {assetOwnership.hubs.map((hub, index) => (
+              <div key={index} className={`holding-card ${hub.status.toLowerCase()}`}>
+                <div className="holding-header">
+                  <h4>{hub.name}</h4>
+                  <div className={`holding-status ${hub.status.toLowerCase()}`}>
+                    {hub.status}
+                  </div>
+                </div>
+                <div className="holding-details">
+                  <div className="holding-item">
+                    <div className="item-label">Ownership Stake</div>
+                    <div className="item-value">{(hub.ownership * 100).toFixed(4)}%</div>
+                  </div>
+                  <div className="holding-item">
+                    <div className="item-label">Monthly Revenue</div>
+                    <div className="item-value">
+                      {hub.monthlyRevenue > 0 ? `$${hub.monthlyRevenue.toFixed(2)}` : 'Pending'}
+                    </div>
+                  </div>
+                  <div className="holding-item">
+                    <div className="item-label">Token Allocation</div>
+                    <div className="item-value">
+                      {Math.round(mockTokenData.userWallet.balance * (hub.ownership / assetOwnership.totalOwnership))} tokens
+                    </div>
+                  </div>
+                </div>
+                <div className="holding-actions">
+                  <button className="view-details-button">View Details</button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        
+        <div className="network-growth">
+          <h3>Network Growth Opportunities</h3>
+          <div className="opportunities-grid">
+            <div className="opportunity-card">
+              <div className="opportunity-icon">🏙️</div>
+              <h4>Urban Hub Expansion</h4>
+              <p>New charging hubs planned for Chicago metro area in Q3 2025.</p>
+              <div className="opportunity-metrics">
+                <div className="metric">
+                  <div className="metric-label">Projected ROI</div>
+                  <div className="metric-value">12.5%</div>
+                </div>
+                <div className="metric">
+                  <div className="metric-label">Min. Investment</div>
+                  <div className="metric-value">50 tokens</div>
+                </div>
+              </div>
+              <button className="opportunity-button">Express Interest</button>
+            </div>
+            
+            <div className="opportunity-card">
+              <div className="opportunity-icon">🛣️</div>
+              <h4>I-55 Corridor</h4>
+              <p>Strategic corridor deployment connecting Chicago to St. Louis.</p>
+              <div className="opportunity-metrics">
+                <div className="metric">
+                  <div className="metric-label">Projected ROI</div>
+                  <div className="metric-value">9.8%</div>
+                </div>
+                <div className="metric">
+                  <div className="metric-label">Min. Investment</div>
+                  <div className="metric-value">25 tokens</div>
+                </div>
+              </div>
+              <button className="opportunity-button">Express Interest</button>
+            </div>
+            
+            <div className="opportunity-card">
+              <div className="opportunity-icon">🔋</div>
+              <h4>Battery Storage Upgrade</h4>
+              <p>Technology upgrade for existing hubs to increase capacity.</p>
+              <div className="opportunity-metrics">
+                <div className="metric">
+                  <div className="metric-label">Projected ROI</div>
+                  <div className="metric-value">7.2%</div>
+                </div>
+                <div className="metric">
+                  <div className="metric-label">Min. Investment</div>
+                  <div className="metric-value">10 tokens</div>
+                </div>
+              </div>
+              <button className="opportunity-button">Express Interest</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Helper function to render the market data tab
+  const renderMarketData = () => {
+    const { marketData } = mockTokenData;
+    
+    return (
+      <div className="market-tab">
+        <div className="market-overview">
+          <div className="market-card price">
+            <h3>Token Price</h3>
+            <div className="current-price">
+              <div className="price-value">${mockTokenData.networkStats.tokenPrice.toFixed(2)}</div>
+              <div className="price-change positive">+6.6% (30d)</div>
+            </div>
+            <div className="price-chart">
+              <div className="chart-lines">
+                {marketData.priceHistory.map((month, index) => (
+                  <div key={index} className="chart-point" style={{ left: `${index * 33}%`, bottom: `${(month.price / 3) * 100}%` }}>
+                    <div className="point-dot"></div>
+                    {index > 0 && (
+                      <div 
+                        className="point-line" 
+                        style={{ 
+                          width: `33%`, 
+                          transform: `rotate(${Math.atan2(
+                            (month.price - marketData.priceHistory[index - 1].price) / 3, 
+                            0.33
+                          ) * (180 / Math.PI)}deg)`,
+                          transformOrigin: 'left center'
+                        }}
+                      ></div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <div className="chart-labels">
+                {marketData.priceHistory.map((month, index) => (
+                  <div key={index} className="chart-label" style={{ left: `${index * 33}%` }}>
+                    {month.month}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          
+          <div className="market-card volume">
+            <h3>Trading Volume</h3>
+            <div className="volume-chart">
+              {marketData.volumeHistory.map((month, index) => (
+                <div key={index} className="volume-bar-container">
+                  <div className="bar-label">{month.month}</div>
+                  <div className="bar-wrapper">
+                    <div 
+                      className="volume-bar"
+                      style={{ height: `${(month.volume / 40000) * 100}%` }}
+                    ></div>
+                  </div>
+                  <div className="bar-value">{month.volume.toLocaleString()}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        
+        <div className="price-projections">
+          <h3>Price Projections</h3>
+          <div className="projections-chart">
+            <div className="chart-bars">
+              {marketData.projections.map((quarter, index) => (
+                <div key={index} className="projection-bar-container">
+                  <div className="bar-label">{quarter.quarter}</div>
+                  <div className="bar-wrapper">
+                    <div 
+                      className="projection-range"
+                      style={{ 
+                        height: `${(quarter.highEstimate / 6) * 100}%`,
+                        bottom: `${(quarter.lowEstimate / 6) * 100}%`
+                      }}
+                    ></div>
+                    <div 
+                      className="projection-line"
+                      style={{ 
+                        bottom: `${((quarter.highEstimate + quarter.lowEstimate) / 2 / 6) * 100}%`
+                      }}
+                    ></div>
+                  </div>
+                  <div className="range-values">
+                    <div className="high-value">${quarter.highEstimate.toFixed(2)}</div>
+                    <div className="low-value">${quarter.lowEstimate.toFixed(2)}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="projections-note">
+            Projections based on network growth, EV adoption rates, and infrastructure expansion plans.
+            Actual results may vary.
+          </div>
+        </div>
+        
+        <div className="market-insights">
+          <h3>Market Insights</h3>
+          <div className="insights-grid">
+            <div className="insight-card">
+              <div className="insight-header">
+                <div className="insight-icon">📈</div>
+                <h4>Growth Drivers</h4>
+              </div>
+              <ul className="insight-list">
+                <li>Illinois EV adoption projected to reach 7.8% by end of 2025</li>
+                <li>State incentives for charging infrastructure increasing by 25%</li>
+                <li>Phase 2 expansion adding 8 new charging hubs in Q3 2025</li>
+                <li>Corporate fleet partnerships expected to drive token demand</li>
+              </ul>
+            </div>
+            
+            <div className="insight-card">
+              <div className="insight-header">
+                <div className="insight-icon">⚖️</div>
+                <h4>Risk Factors</h4>
+              </div>
+              <ul className="insight-list">
+                <li>Regulatory changes in tokenized asset classification</li>
+                <li>Competition from other charging networks</li>
+                <li>Supply chain constraints for charging equipment</li>
+                <li>Potential delays in infrastructure deployment timeline</li>
+              </ul>
+            </div>
+            
+            <div className="insight-card">
+              <div className="insight-header">
+                <div className="insight-icon">🔮</div>
+                <h4>Future Developments</h4>
+              </div>
+              <ul className="insight-list">
+                <li>Token governance system launching in Q3 2025</li>
+                <li>Secondary market for token trading in development</li>
+                <li>Enhanced staking rewards program planned for Q4 2025</li>
+                <li>Cross-network partnerships with other mobility tokens</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Helper function to render the token flow visualization
+  const renderTokenFlow = () => {
+    return (
+      <div className="token-flow-tab">
+        <div className="flow-visualization">
+          <h3>Token Flow Visualization</h3>
+          <div className="flow-container">
+            <div className={`flow-diagram ${animateTokenFlow ? 'animate' : ''}`}>
+              <div className="flow-node subscribers">
+                <div className="node-icon">👤</div>
+                <div className="node-label">Subscribers</div>
+                <div className="node-value">1,250 users</div>
+              </div>
+              
+              <div className="flow-node network">
+                <div className="node-icon">⬡</div>
+                <div className="node-label">Token Network</div>
+                <div className="node-value">1M tokens</div>
+              </div>
+              
+              <div className="flow-node infrastructure">
+                <div className="node-icon">🔌</div>
+                <div className="node-label">Charging Hubs</div>
+                <div className="node-value">36 locations</div>
+              </div>
+              
+              <div className="flow-node revenue">
+                <div className="node-icon">💰</div>
+                <div className="node-label">Revenue Pool</div>
+                <div className="node-value">$125K monthly</div>
+              </div>
+              
+              <div className="flow-path subscription">
+                <div className="path-label">Monthly Subscription</div>
+                <div className="token-particle"></div>
+                <div className="token-particle"></div>
+                <div className="token-particle"></div>
+              </div>
+              
+              <div className="flow-path redemption">
+                <div className="path-label">Token Redemption</div>
+                <div className="token-particle"></div>
+                <div className="token-particle"></div>
+              </div>
+              
+              <div className="flow-path investment">
+                <div className="path-label">Infrastructure Investment</div>
+                <div className="token-particle"></div>
+                <div className="token-particle"></div>
+                <div className="token-particle"></div>
+              </div>
+              
+              <div className="flow-path returns">
+                <div className="path-label">Revenue Distribution</div>
+                <div className="token-particle"></div>
+                <div className="token-particle"></div>
+              </div>
+            </div>
+          </div>
+          <div className="flow-controls">
+            <button className="animate-flow-button" onClick={handleTokenFlowDemo}>
+              Animate Token Flow
+            </button>
+          </div>
+        </div>
+        
+        <div className="flow-explanation">
+          <h3>How ChainLink Tokens Work</h3>
+          <div className="explanation-steps">
+            <div className="step">
+              <div className="step-number">1</div>
+              <div className="step-content">
+                <h4>Token Distribution</h4>
+                <p>
+                  Unity Fleet subscribers earn ChainLink tokens monthly as part of their subscription.
+                  These tokens represent fractional ownership in The Link charging infrastructure.
+                </p>
+              </div>
+            </div>
+            
+            <div className="step">
+              <div className="step-number">2</div>
+              <div className="step-content">
+                <h4>Token Utility</h4>
+                <p>
+                  Tokens can be redeemed for charging credits, applied to subscription discounts,
+                  or held as an investment in the growing charging network.
+                </p>
+              </div>
+            </div>
+            
+            <div className="step">
+              <div className="step-number">3</div>
+              <div className="step-content">
+                <h4>Infrastructure Expansion</h4>
+                <p>
+                  Token value is backed by physical charging infrastructure. As the network grows,
+                  token holders benefit from increased utility and potential value appreciation.
+                </p>
+              </div>
+            </div>
+            
+            <div className="step">
+              <div className="step-number">4</div>
+              <div className="step-content">
+                <h4>Revenue Sharing</h4>
+                <p>
+                  Charging revenue is distributed to token holders proportional to their ownership stake,
+                  creating a sustainable economic model that aligns all stakeholders.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div className="token-benefits">
+          <h3>Benefits of Tokenization</h3>
+          <div className="benefits-grid">
+            <div className="benefit-card">
+              <div className="benefit-icon">🔄</div>
+              <h4>Circular Economy</h4>
+              <p>
+                Creates a closed-loop system where subscribers become stakeholders,
+                aligning incentives across the ecosystem.
+              </p>
+            </div>
+            
+            <div className="benefit-card">
+              <div className="benefit-icon">📊</div>
+              <h4>Transparent Ownership</h4>
+              <p>
+                Blockchain-based tokens provide clear, verifiable ownership records
+                and automated distribution of benefits.
+              </p>
+            </div>
+            
+            <div className="benefit-card">
+              <div className="benefit-icon">🌱</div>
+              <h4>Sustainable Funding</h4>
+              <p>
+                Tokenization creates a sustainable funding model for infrastructure
+                development without relying solely on external investment.
+              </p>
+            </div>
+            
+            <div className="benefit-card">
+              <div className="benefit-icon">🔐</div>
+              <h4>Community Governance</h4>
+              <p>
+                Token holders can participate in network decisions, ensuring
+                the system evolves to meet community needs.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="chainlink-demo loading">
+        <div className="loading-logo">
+          <img src="/images/unity_fleet_logo.png" alt="Unity Fleet" />
+          <div className="loading-pulse"></div>
+        </div>
+        <p>Loading ChainLink Tokenization Demo...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="chainlink-demo">
+      <header className="demo-header">
+        <div className="demo-title">
+          <h1>ChainLink Tokenization</h1>
+          <span className="demo-subtitle">Unity Fleet Ownership Model</span>
+        </div>
+        
+        <div className="token-stats">
+          <div className="token-price">
+            <span className="price-label">Token Price:</span>
+            <span className="price-value">${mockTokenData.networkStats.tokenPrice.toFixed(2)}</span>
+            <span className="price-change positive">+6.6%</span>
+          </div>
+          <div className="token-market-cap">
+            <span className="cap-label">Market Cap:</span>
+            <span className="cap-value">${mockTokenData.networkStats.marketCap.toLocaleString()}</span>
+          </div>
+        </div>
+      </header>
+      
+      <div className="demo-navigation">
+        <button 
+          className={`nav-button ${activeTab === 'overview' ? 'active' : ''}`}
+          onClick={() => setActiveTab('overview')}
+        >
+          Network Overview
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'wallet' ? 'active' : ''}`}
+          onClick={() => setActiveTab('wallet')}
+        >
+          Token Wallet
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'ownership' ? 'active' : ''}`}
+          onClick={() => setActiveTab('ownership')}
+        >
+          Asset Ownership
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'market' ? 'active' : ''}`}
+          onClick={() => setActiveTab('market')}
+        >
+          Market Data
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'flow' ? 'active' : ''}`}
+          onClick={() => setActiveTab('flow')}
+        >
+          Token Flow
+        </button>
+      </div>
+      
+      <main className="demo-content">
+        {activeTab === 'overview' && renderOverview()}
+        {activeTab === 'wallet' && renderWallet()}
+        {activeTab === 'ownership' && renderAssetOwnership()}
+        {activeTab === 'market' && renderMarketData()}
+        {activeTab === 'flow' && renderTokenFlow()}
+      </main>
+      
+      {showConfirmation && (
+        <div className="token-confirmation-modal">
+          <div className="modal-content">
+            <h3>Confirm Token Action</h3>
+            
+            <div className="confirmation-details">
+              <div className="confirmation-item">
+                <span className="item-label">Action:</span>
+                <span className="item-value">
+                  {tokenAction === 'redeem' ? 'Redeem Tokens for Credits' : 
+                   tokenAction === 'stake' ? 'Stake Tokens for Rewards' : 
+                   'Use Tokens for Governance Vote'}
+                </span>
+              </div>
+              <div className="confirmation-item">
+                <span className="item-label">Amount:</span>
+                <span className="item-value">{tokenAmount} tokens</span>
+              </div>
+              <div className="confirmation-item">
+                <span className="item-label">Value:</span>
+                <span className="item-value">${(tokenAmount * mockTokenData.networkStats.tokenPrice).toFixed(2)}</span>
+              </div>
+              {tokenAction === 'redeem' && (
+                <div className="confirmation-item">
+                  <span className="item-label">Credits:</span>
+                  <span className="item-value">{tokenAmount * 10} charging credits</span>
+                </div>
+              )}
+              {tokenAction === 'stake' && (
+                <div className="confirmation-item">
+                  <span className="item-label">Monthly Reward:</span>
+                  <span className="item-value">{(tokenAmount * 0.085 / 12).toFixed(2)} tokens</span>
+                </div>
+              )}
+            </div>
+            
+            <div className="confirmation-actions">
+              <button className="cancel-button" onClick={() => setShowConfirmation(false)}>Cancel</button>
+              <button className="confirm-button">Confirm</button>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      <footer className="demo-footer">
+        <div className="footer-info">
+          <span>ChainLink Tokenization Demo</span>
+          <span>Powered by Atlas Intelligence</span>
+        </div>
+        <div className="footer-links">
+          <a href="#" className="footer-link">Token Whitepaper</a>
+          <a href="#" className="footer-link">Legal Disclosure</a>
+          <a href="#" className="footer-link">FAQ</a>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default ChainlinkDemo;

ChargingHub.css

@@ -0,0 +1,568 @@
+/* Charging Hub Styles */
+.charging-hub {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  background-color: #0B0B0F;
+  color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+/* Loading Screen */
+.charging-hub.loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loading-logo {
+  width: 150px;
+  height: 150px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.loading-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.loading-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  border: 2px solid #00E0FF;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+/* Header */
+.hub-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.hub-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.hub-title h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 1px;
+}
+
+.hub-subtitle {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.hub-status {
+  display: flex;
+  gap: 20px;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.status-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.status-value.operational {
+  color: #35F2DB;
+}
+
+.hub-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.action-button .icon {
+  font-size: 16px;
+}
+
+.user-profile {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid #00E0FF;
+}
+
+.user-profile img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Navigation */
+.hub-navigation {
+  display: flex;
+  gap: 2px;
+  background-color: rgba(20, 20, 30, 0.5);
+  padding: 0 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.hub-navigation::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-button {
+  padding: 16px 20px;
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+}
+
+.nav-button.active {
+  color: #00E0FF;
+}
+
+.nav-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 3px 3px 0 0;
+}
+
+/* Main Content */
+.hub-content {
+  padding: 20px;
+  min-height: calc(100vh - 200px);
+}
+
+/* Dashboard View */
+.dashboard-view {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.hub-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.overview-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.overview-card h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.location-details {
+  margin-bottom: 16px;
+}
+
+.location-name {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.location-address {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.location-map {
+  height: 150px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.location-map img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.occupancy-gauge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+/* Status Badges */
+.status-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.status-badge.available {
+  background-color: rgba(53, 242, 219, 0.2);
+  color: #35F2DB;
+}
+
+.status-badge.charging {
+  background-color: rgba(0, 224, 255, 0.2);
+  color: #00E0FF;
+}
+
+.status-badge.reserved {
+  background-color: rgba(255, 193, 7, 0.2);
+  color: #FFC107;
+}
+
+.status-badge.maintenance {
+  background-color: rgba(255, 85, 85, 0.2);
+  color: #FF5555;
+}
+
+/* Progress Bar */
+.progress-container {
+  width: 100%;
+  height: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  margin-top: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 4px;
+  position: relative;
+}
+
+.progress-glow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 20px;
+  background: linear-gradient(90deg, rgba(0, 224, 255, 0), #00E0FF);
+  animation: glow 1.5s infinite;
+}
+
+@keyframes glow {
+  0% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}
+
+.progress-text {
+  position: absolute;
+  right: 8px;
+  top: -18px;
+  font-size: 12px;
+  color: #00E0FF;
+}
+
+/* Charging Ports View */
+.charging-ports-view {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.port-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 16px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+  transition: transform 0.2s ease;
+}
+
+.port-card:hover {
+  transform: translateY(-4px);
+}
+
+.port-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.port-number {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.port-details {
+  margin-bottom: 12px;
+}
+
+.port-detail {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.detail-label {
+  opacity: 0.7;
+}
+
+.port-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.port-action {
+  background-color: rgba(0, 224, 255, 0.2);
+  border: none;
+  border-radius: 4px;
+  color: #00E0FF;
+  padding: 6px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.port-action:hover {
+  background-color: rgba(0, 224, 255, 0.3);
+}
+
+/* Energy Management View */
+.energy-management-view {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.energy-chart {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+  height: 300px;
+}
+
+.energy-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.energy-stat-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 10px 0;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.stat-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+/* Visitor Analytics View */
+.visitor-analytics-view {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.visitor-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.amenity-usage {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.amenity-bar {
+  height: 24px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  margin-bottom: 12px;
+  overflow: hidden;
+  position: relative;
+}
+
+.amenity-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 12px;
+}
+
+.amenity-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+/* Reservations View */
+.reservations-view {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.reservation-list {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.reservation-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.reservation-item:last-child {
+  border-bottom: none;
+}
+
+.reservation-status {
+  margin-left: auto;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.reservation-status.confirmed {
+  background-color: rgba(53, 242, 219, 0.2);
+  color: #35F2DB;
+}
+
+.reservation-status.pending {
+  background-color: rgba(255, 193, 7, 0.2);
+  color: #FFC107;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .hub-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  
+  .hub-status {
+    flex-direction: column;
+    gap: 5px;
+  }
+  
+  .hub-actions {
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+  
+  .dashboard-view,
+  .hub-overview {
+    grid-template-columns: 1fr;
+  }
+}

ChargingHub.jsx

@@ -0,0 +1,712 @@
+import React, { useState, useEffect } from 'react';
+import './ChargingHub.css';
+
+// Mock data for demonstration purposes
+const mockChargingPorts = [
+  { id: 1, number: 1, status: 'available', type: 'DC Fast', power: '250kW', lastUsed: null },
+  { id: 2, number: 2, status: 'charging', type: 'DC Fast', power: '250kW', vehicle: 'Tesla Model 3', startTime: '14:30', endTime: '15:15', progress: 68 },
+  { id: 3, number: 3, status: 'reserved', type: 'DC Fast', power: '250kW', reservedFor: '17:00', duration: '45 min' },
+  { id: 4, number: 4, status: 'maintenance', type: 'DC Fast', power: '250kW', maintenanceNote: 'Scheduled maintenance', estimatedCompletion: '18:00' },
+  { id: 5, number: 5, status: 'available', type: 'DC Fast', power: '250kW', lastUsed: '13:45' },
+  { id: 6, number: 6, status: 'charging', type: 'DC Fast', power: '250kW', vehicle: 'Tesla Model Y', startTime: '15:10', endTime: '15:55', progress: 42 },
+  { id: 7, number: 7, status: 'available', type: 'DC Fast', power: '250kW', lastUsed: '12:30' },
+  { id: 8, number: 8, status: 'charging', type: 'DC Fast', power: '250kW', vehicle: 'GMC Hummer EV', startTime: '15:25', endTime: '16:10', progress: 25 },
+];
+
+const mockEnergyData = {
+  currentDemand: 625,
+  peakDemand: 1200,
+  solarGeneration: 85,
+  batteryStorage: 72,
+  gridConsumption: 540,
+  dailyUsage: [
+    { hour: '00:00', demand: 120 },
+    { hour: '01:00', demand: 90 },
+    { hour: '02:00', demand: 75 },
+    { hour: '03:00', demand: 60 },
+    { hour: '04:00', demand: 45 },
+    { hour: '05:00', demand: 60 },
+    { hour: '06:00', demand: 150 },
+    { hour: '07:00', demand: 300 },
+    { hour: '08:00', demand: 450 },
+    { hour: '09:00', demand: 600 },
+    { hour: '10:00', demand: 750 },
+    { hour: '11:00', demand: 900 },
+    { hour: '12:00', demand: 1050 },
+    { hour: '13:00', demand: 1150 },
+    { hour: '14:00', demand: 1200 },
+    { hour: '15:00', demand: 1100 },
+    { hour: '16:00', demand: 950 },
+    { hour: '17:00', demand: 800 },
+    { hour: '18:00', demand: 700 },
+    { hour: '19:00', demand: 600 },
+    { hour: '20:00', demand: 500 },
+    { hour: '21:00', demand: 400 },
+    { hour: '22:00', demand: 300 },
+    { hour: '23:00', demand: 200 },
+  ],
+};
+
+const mockVisitors = {
+  current: 24,
+  capacity: 50,
+  averageDuration: 38,
+  peakHours: '12:00 - 14:00',
+  amenityUsage: {
+    lounge: 65,
+    cafe: 48,
+    retail: 32,
+    workspace: 25,
+  },
+};
+
+const mockReservations = [
+  { id: 101, name: 'John Smith', vehicle: 'Tesla Model 3', time: '17:00', duration: '45 min', port: 3, status: 'confirmed' },
+  { id: 102, name: 'Sarah Johnson', vehicle: 'Tesla Model Y', time: '17:30', duration: '30 min', port: 1, status: 'confirmed' },
+  { id: 103, name: 'Michael Brown', vehicle: 'Ford F-150 Lightning', time: '18:15', duration: '60 min', port: 5, status: 'pending' },
+  { id: 104, name: 'Emily Davis', vehicle: 'Rivian R1T', time: '19:00', duration: '45 min', port: 7, status: 'confirmed' },
+];
+
+function ChargingHub() {
+  const [activeTab, setActiveTab] = useState('dashboard');
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState('');
+  const [hubStatus, setHubStatus] = useState({
+    name: 'The Link - Downtown',
+    location: 'Springfield, IL',
+    status: 'operational',
+    occupancy: '48%',
+    availablePorts: 3,
+    totalPorts: 8,
+    energyEfficiency: '92%',
+  });
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1500);
+    
+    // Update current time
+    const updateTime = () => {
+      const now = new Date();
+      const hours = now.getHours().toString().padStart(2, '0');
+      const minutes = now.getMinutes().toString().padStart(2, '0');
+      setCurrentTime(`${hours}:${minutes}`);
+    };
+    
+    updateTime();
+    const timeInterval = setInterval(updateTime, 60000);
+    
+    return () => {
+      clearTimeout(timer);
+      clearInterval(timeInterval);
+    };
+  }, []);
+
+  // Function to render status badge with appropriate color
+  const renderStatusBadge = (status) => {
+    let className = 'status-badge';
+    
+    switch(status) {
+      case 'available':
+        className += ' available';
+        break;
+      case 'charging':
+        className += ' charging';
+        break;
+      case 'reserved':
+        className += ' reserved';
+        break;
+      case 'maintenance':
+        className += ' maintenance';
+        break;
+      default:
+        break;
+    }
+    
+    return <span className={className}>{status}</span>;
+  };
+
+  // Function to render progress bar for charging ports
+  const renderProgressBar = (progress) => {
+    return (
+      <div className="progress-container">
+        <div className="progress-bar" style={{ width: `${progress}%` }}>
+          <div className="progress-glow"></div>
+        </div>
+        <span className="progress-text">{progress}%</span>
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="charging-hub loading">
+        <div className="loading-logo">
+          <img src="/images/the_link_logo.png" alt="The Link" />
+          <div className="loading-pulse"></div>
+        </div>
+        <p>Initializing Hub Dashboard...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="charging-hub">
+      <header className="hub-header">
+        <div className="hub-title">
+          <h1>THE LINK</h1>
+          <span className="hub-subtitle">Charging Hub Dashboard</span>
+        </div>
+        <div className="hub-status">
+          <div className="status-item">
+            <span className="status-label">Hub Status:</span>
+            <span className={`status-value ${hubStatus.status}`}>{hubStatus.status}</span>
+          </div>
+          <div className="status-item">
+            <span className="status-label">Current Time:</span>
+            <span className="status-value">{currentTime}</span>
+          </div>
+        </div>
+        <div className="hub-actions">
+          <button className="action-button">
+            <span className="icon">⚙️</span>
+            <span>Settings</span>
+          </button>
+          <button className="action-button">
+            <span className="icon">🔔</span>
+            <span>Alerts</span>
+          </button>
+          <div className="user-profile">
+            <img src="/images/admin_avatar.png" alt="Admin" />
+          </div>
+        </div>
+      </header>
+
+      <div className="hub-navigation">
+        <button 
+          className={`nav-button ${activeTab === 'dashboard' ? 'active' : ''}`}
+          onClick={() => setActiveTab('dashboard')}
+        >
+          Dashboard
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'charging' ? 'active' : ''}`}
+          onClick={() => setActiveTab('charging')}
+        >
+          Charging Ports
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'energy' ? 'active' : ''}`}
+          onClick={() => setActiveTab('energy')}
+        >
+          Energy Management
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'visitors' ? 'active' : ''}`}
+          onClick={() => setActiveTab('visitors')}
+        >
+          Visitor Analytics
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'reservations' ? 'active' : ''}`}
+          onClick={() => setActiveTab('reservations')}
+        >
+          Reservations
+        </button>
+      </div>
+
+      <main className="hub-content">
+        {activeTab === 'dashboard' && (
+          <div className="dashboard-view">
+            <div className="hub-overview">
+              <div className="overview-card location">
+                <h3>Hub Location</h3>
+                <div className="location-details">
+                  <div className="location-name">{hubStatus.name}</div>
+                  <div className="location-address">{hubStatus.location}</div>
+                </div>
+                <div className="location-map">
+                  <img src="/images/hub_location_map.png" alt="Hub Location" />
+                </div>
+              </div>
+              
+              <div className="overview-card occupancy">
+                <h3>Current Occupancy</h3>
+                <div className="occupancy-gauge">
+                  <svg viewBox="0 0 120 120" className="gauge">
+                    <circle cx="60" cy="60" r="50" className="gauge-background" />
+                    <circle 
+                      cx="60" 
+                      cy="60" 
+                      r="50" 
+                      className="gauge-progress" 
+                      style={{ 
+                        strokeDasharray: `${parseInt(hubStatus.occupancy) * 3.14}px, 314px` 
+                      }} 
+                    />
+                    <text x="60" y="65" textAnchor="middle" className="gauge-text">
+                      {hubStatus.occupancy}
+                    </text>
+                  </svg>
+                </div>
+                <div className="occupancy-details">
+                  <div className="detail-item">
+                    <span className="detail-label">Available Ports:</span>
+                    <span className="detail-value">{hubStatus.availablePorts}/{hubStatus.totalPorts}</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="overview-card energy">
+                <h3>Energy Overview</h3>
+                <div className="energy-metrics">
+                  <div className="metric">
+                    <div className="metric-value">{mockEnergyData.currentDemand} kW</div>
+                    <div className="metric-label">Current Demand</div>
+                  </div>
+                  <div className="metric">
+                    <div className="metric-value">{mockEnergyData.solarGeneration}%</div>
+                    <div className="metric-label">Solar Generation</div>
+                  </div>
+                  <div className="metric">
+                    <div className="metric-value">{mockEnergyData.batteryStorage}%</div>
+                    <div className="metric-label">Battery Storage</div>
+                  </div>
+                </div>
+                <div className="energy-chart">
+                  <div className="chart-container">
+                    {/* Simplified chart representation */}
+                    <div className="chart-bars">
+                      {mockEnergyData.dailyUsage.slice(-8).map((hour, index) => (
+                        <div 
+                          key={index} 
+                          className="chart-bar" 
+                          style={{ height: `${(hour.demand / mockEnergyData.peakDemand) * 100}%` }}
+                        >
+                          <div className="bar-glow"></div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="overview-card visitors">
+                <h3>Visitor Analytics</h3>
+                <div className="visitor-count">
+                  <div className="count-value">{mockVisitors.current}</div>
+                  <div className="count-label">Current Visitors</div>
+                </div>
+                <div className="visitor-details">
+                  <div className="detail-item">
+                    <span className="detail-label">Capacity:</span>
+                    <span className="detail-value">{mockVisitors.capacity}</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Avg. Duration:</span>
+                    <span className="detail-value">{mockVisitors.averageDuration} min</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Peak Hours:</span>
+                    <span className="detail-value">{mockVisitors.peakHours}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="quick-status">
+              <h3>Charging Port Status</h3>
+              <div className="port-status-grid">
+                {mockChargingPorts.map(port => (
+                  <div key={port.id} className={`port-status-card ${port.status}`}>
+                    <div className="port-number">{port.number}</div>
+                    <div className="port-status">{renderStatusBadge(port.status)}</div>
+                    {port.status === 'charging' && (
+                      <div className="port-progress">{renderProgressBar(port.progress)}</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <div className="upcoming-reservations">
+              <h3>Upcoming Reservations</h3>
+              <div className="reservation-list">
+                {mockReservations.map(reservation => (
+                  <div key={reservation.id} className="reservation-card">
+                    <div className="reservation-time">{reservation.time}</div>
+                    <div className="reservation-details">
+                      <div className="reservation-name">{reservation.name}</div>
+                      <div className="reservation-vehicle">{reservation.vehicle}</div>
+                    </div>
+                    <div className="reservation-port">Port {reservation.port}</div>
+                    <div className="reservation-duration">{reservation.duration}</div>
+                    <div className={`reservation-status ${reservation.status}`}>
+                      {reservation.status}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'charging' && (
+          <div className="charging-view">
+            <div className="section-header">
+              <h2>Charging Port Management</h2>
+              <div className="header-actions">
+                <button className="action-button">
+                  <span className="icon">+</span>
+                  <span>Add Port</span>
+                </button>
+                <div className="filter-dropdown">
+                  <select>
+                    <option value="all">All Statuses</option>
+                    <option value="available">Available</option>
+                    <option value="charging">Charging</option>
+                    <option value="reserved">Reserved</option>
+                    <option value="maintenance">Maintenance</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            
+            <div className="charging-ports-grid">
+              {mockChargingPorts.map(port => (
+                <div key={port.id} className={`port-card ${port.status}`}>
+                  <div className="port-header">
+                    <div className="port-number">Port {port.number}</div>
+                    <div className="port-status">{renderStatusBadge(port.status)}</div>
+                  </div>
+                  
+                  <div className="port-details">
+                    <div className="detail-item">
+                      <span className="detail-label">Type:</span>
+                      <span className="detail-value">{port.type}</span>
+                    </div>
+                    <div className="detail-item">
+                      <span className="detail-label">Power:</span>
+                      <span className="detail-value">{port.power}</span>
+                    </div>
+                    
+                    {port.status === 'available' && (
+                      <div className="detail-item">
+                        <span className="detail-label">Last Used:</span>
+                        <span className="detail-value">{port.lastUsed || 'N/A'}</span>
+                      </div>
+                    )}
+                    
+                    {port.status === 'charging' && (
+                      <>
+                        <div className="detail-item">
+                          <span className="detail-label">Vehicle:</span>
+                          <span className="detail-value">{port.vehicle}</span>
+                        </div>
+                        <div className="detail-item">
+                          <span className="detail-label">Started:</span>
+                          <span className="detail-value">{port.startTime}</span>
+                        </div>
+                        <div className="detail-item">
+                          <span className="detail-label">Est. Completion:</span>
+                          <span className="detail-value">{port.endTime}</span>
+                        </div>
+                        <div className="detail-item full-width">
+                          <div className="progress-label">Charging Progress</div>
+                          {renderProgressBar(port.progress)}
+                        </div>
+                      </>
+                    )}
+                    
+                    {port.status === 'reserved' && (
+                      <>
+                        <div className="detail-item">
+                          <span className="detail-label">Reserved For:</span>
+                          <span className="detail-value">{port.reservedFor}</span>
+                        </div>
+                        <div className="detail-item">
+                          <span className="detail-label">Duration:</span>
+                          <span className="detail-value">{port.duration}</span>
+                        </div>
+                      </>
+                    )}
+                    
+                    {port.status === 'maintenance' && (
+                      <>
+                        <div className="detail-item">
+                          <span className="detail-label">Note:</span>
+                          <span className="detail-value">{port.maintenanceNote}</span>
+                        </div>
+                        <div className="detail-item">
+                          <span className="detail-label">Est. Completion:</span>
+                          <span className="detail-value">{port.estimatedCompletion}</span>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  
+                  <div className="port-actions">
+                    {port.status === 'available' && (
+                      <>
+                        <button className="port-action reserve">Reserve</button>
+                        <button className="port-action maintenance">Set Maintenance</button>
+                      </>
+                    )}
+                    
+                    {port.status === 'charging' && (
+                      <>
+                        <button className="port-action stop">Stop Charging</button>
+                        <button className="port-action details">View Details</button>
+                      </>
+                    )}
+                    
+                    {port.status === 'reserved' && (
+                      <>
+                        <button className="port-action cancel">Cancel Reservation</button>
+                        <button className="port-action edit">Edit Reservation</button>
+                      </>
+                    )}
+                    
+                    {port.status === 'maintenance' && (
+                      <>
+                        <button className="port-action complete">Complete Maintenance</button>
+                        <button className="port-action update">Update Status</button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'energy' && (
+          <div className="energy-view">
+            <div className="section-header">
+              <h2>Energy Management System</h2>
+              <div className="header-actions">
+                <button className="action-button">
+                  <span className="icon">📊</span>
+                  <span>Export Data</span>
+                </button>
+                <div className="time-range-selector">
+                  <select>
+                    <option value="day">Today</option>
+                    <option value="week">This Week</option>
+                    <option value="month">This Month</option>
+                    <option value="custom">Custom Range</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            
+            <div className="energy-overview">
+              <div className="energy-card current-demand">
+                <h3>Current Demand</h3>
+                <div className="energy-value">{mockEnergyData.currentDemand} kW</div>
+                <div className="energy-chart">
+                  <div className="chart-container">
+                    {/* Simplified chart representation */}
+                    <div className="chart-line">
+                      <svg viewBox="0 0 100 30">
+                        <path 
+                          d="M0,25 L10,20 L20,22 L30,15 L40,18 L50,10 L60,12 L70,8 L80,15 L90,5 L100,10" 
+                          className="chart-path"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                <div className="energy-details">
+                  <div className="detail-item">
+                    <span className="detail-label">Peak Today:</span>
+                    <span className="detail-value">{mockEnergyData.peakDemand} kW</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Average:</span>
+                    <span className="detail-value">780 kW</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="energy-card energy-sources">
+                <h3>Energy Sources</h3>
+                <div className="sources-chart">
+                  <div className="donut-chart">
+                    <svg viewBox="0 0 100 100">
+                      <circle cx="50" cy="50" r="40" className="donut-ring" />
+                      <circle 
+                        cx="50" 
+                        cy="50" 
+                        r="40" 
+                        className="donut-segment grid" 
+                        style={{ 
+                          strokeDasharray: `${mockEnergyData.gridConsumption / 10} 251.2` 
+                        }} 
+                      />
+                      <circle 
+                        cx="50" 
+                        cy="50" 
+                        r="40" 
+                        className="donut-segment solar" 
+                        style={{ 
+                          strokeDasharray: `${mockEnergyData.solarGeneration / 10} 251.2`,
+                          strokeDashoffset: `-${mockEnergyData.gridConsumption / 10}` 
+                        }} 
+                      />
+                      <circle 
+                        cx="50" 
+                        cy="50" 
+                        r="40" 
+                        className="donut-segment battery" 
+                        style={{ 
+                          strokeDasharray: `${mockEnergyData.batteryStorage / 10} 251.2`,
+                          strokeDashoffset: `-${(mockEnergyData.gridConsumption + mockEnergyData.solarGeneration) / 10}` 
+                        }} 
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div className="sources-legend">
+                  <div className="legend-item grid">
+                    <span className="legend-color"></span>
+                    <span className="legend-label">Grid</span>
+                    <span className="legend-value">{mockEnergyData.gridConsumption} kW</span>
+                  </div>
+                  <div className="legend-item solar">
+                    <span className="legend-color"></span>
+                    <span className="legend-label">Solar</span>
+                    <span className="legend-value">{mockEnergyData.solarGeneration}%</span>
+                  </div>
+                  <div className="legend-item battery">
+                    <span className="legend-color"></span>
+                    <span className="legend-label">Battery</span>
+                    <span className="legend-value">{mockEnergyData.batteryStorage}%</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="energy-card efficiency">
+                <h3>System Efficiency</h3>
+                <div className="efficiency-gauge">
+                  <svg viewBox="0 0 120 120" className="gauge">
+                    <circle cx="60" cy="60" r="50" className="gauge-background" />
+                    <circle 
+                      cx="60" 
+                      cy="60" 
+                      r="50" 
+                      className="gauge-progress efficiency" 
+                      style={{ 
+                        strokeDasharray: `${parseInt(hubStatus.energyEfficiency) * 3.14}px, 314px` 
+                      }} 
+                    />
+                    <text x="60" y="65" textAnchor="middle" className="gauge-text">
+                      {hubStatus.energyEfficiency}
+                    </text>
+                  </svg>
+                </div>
+                <div className="efficiency-details">
+                  <div className="detail-item">
+                    <span className="detail-label">Power Factor:</span>
+                    <span className="detail-value">0.98</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Conversion Loss:</span>
+                    <span className="detail-value">8%</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="energy-daily-chart">
+              <h3>24-Hour Energy Demand</h3>
+              <div className="chart-container">
+                <div className="chart-y-axis">
+                  <div className="axis-label">1200 kW</div>
+                  <div className="axis-label">900 kW</div>
+                  <div className="axis-label">600 kW</div>
+                  <div className="axis-label">300 kW</div>
+                  <div className="axis-label">0 kW</div>
+                </div>
+                <div className="chart-content">
+                  <div className="chart-bars">
+                    {mockEnergyData.dailyUsage.map((hour, index) => (
+                      <div key={index} className="chart-bar-container">
+                        <div 
+                          className="chart-bar" 
+                          style={{ height: `${(hour.demand / mockEnergyData.peakDemand) * 100}%` }}
+                        >
+                          <div className="bar-glow"></div>
+                        </div>
+                        <div className="bar-label">{hour.hour}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="energy-controls">
+              <h3>Energy Management Controls</h3>
+              <div className="controls-grid">
+                <div className="control-card">
+                  <h4>Load Balancing</h4>
+                  <div className="control-status">
+                    <span className="status-indicator active"></span>
+                    <span className="status-text">Active</span>
+                  </div>
+                  <div className="control-actions">
+                    <button className="control-action">Configure</button>
+                    <button className="control-action">Disable</button>
+                  </div>
+                </div>
+                
+                <div className="control-card">
+                  <h4>Peak Shaving</h4>
+                  <div className="control-status">
+                    <span className="status-indicator active"></span>
+                    <span className="status-text">Active</span>
+                  </div>
+                  <div className="control-actions">
+                    <button className="control-action">Configure</button>
+                    <button className="control-action">Disable</button>
+                  </div>
+                </div>
+                
+                <div className="control-card">
+                  <h4>Battery Storage</h4>
+                  <div className="control-status">
+                    <span className="status-indicator active"></span>
+                    <span className="status-text">Discharging</span>
+                  </div>
+                  <div className="control-actions">
+                    <button className="control-action">Switch to Charging</button>
+                    <button className="control-action">Set to Auto</button>
+                  </div>
+                </div>
+                
+                <div className="control-card">
+                  <h4>Grid Connection</h4>
+                  <div className="control-status">
+                    <span className="status-indicator active"></span>
+                    <span className="status-text">Connected</span>
+                  </div>
+                  <div className="control-actions">
+                    <button className="control-action">Emergency Disconnect</button>
+                    <button className="control-action">Test Backup</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Additional tabs would be implemented here */}
+      </main>
+    </div>
+  );
+}
+
+export default ChargingHub;

DeploymentMap.css

@@ -0,0 +1,918 @@
+/* Deployment Map Styles */
+.deployment-map {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  background-color: #0B0B0F;
+  color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+/* Loading Screen */
+.deployment-map.loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loading-logo {
+  width: 150px;
+  height: 150px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.loading-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.loading-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  border: 2px solid #00E0FF;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+/* Header */
+.map-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.map-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.map-title h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 1px;
+}
+
+.map-subtitle {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+/* Navigation */
+.map-navigation {
+  display: flex;
+  gap: 2px;
+  background-color: rgba(20, 20, 30, 0.5);
+  padding: 0 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.map-navigation::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-button {
+  padding: 16px 20px;
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+}
+
+.nav-button.active {
+  color: #00E0FF;
+}
+
+.nav-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 3px 3px 0 0;
+}
+
+/* Main Content */
+.map-content {
+  padding: 20px;
+  min-height: calc(100vh - 200px);
+}
+
+/* Map Container */
+.map-container {
+  position: relative;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+  margin-bottom: 20px;
+}
+
+.illinois-map {
+  position: relative;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.map-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.map-marker {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  z-index: 10;
+}
+
+.map-marker::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+.map-marker.planned {
+  color: #00E0FF;
+}
+
+.map-marker.future {
+  color: #FFC107;
+}
+
+.map-marker.urban {
+  border: 2px solid rgba(255, 255, 255, 0.7);
+}
+
+.map-marker.corridor {
+  border: 2px solid rgba(255, 255, 255, 0.4);
+}
+
+.map-marker.selected {
+  width: 20px;
+  height: 20px;
+  z-index: 20;
+  box-shadow: 0 0 0 4px rgba(0, 224, 255, 0.3);
+}
+
+.marker-pulse {
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border-radius: 50%;
+  background-color: currentColor;
+  opacity: 0.3;
+  animation: markerPulse 2s infinite;
+}
+
+@keyframes markerPulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  70% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.marker-label {
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.location-detail-popup {
+  position: absolute;
+  transform: translate(-50%, -120%);
+  background-color: rgba(20, 20, 30, 0.9);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  padding: 15px;
+  border: 1px solid rgba(0, 224, 255, 0.3);
+  min-width: 200px;
+  z-index: 30;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.location-detail-popup h4 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.detail-label {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.detail-value {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.detail-value.planned {
+  color: #00E0FF;
+}
+
+.detail-value.future {
+  color: #FFC107;
+}
+
+.close-popup {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.close-popup:hover {
+  opacity: 1;
+}
+
+/* Map Controls */
+.map-controls {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.zoom-controls, .view-controls {
+  display: flex;
+  gap: 5px;
+}
+
+.zoom-button, .view-button {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 8px 12px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.zoom-button:hover, .view-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.zoom-button.active, .view-button.active {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+/* Map Legend */
+.map-legend {
+  background-color: rgba(20, 20, 30, 0.7);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  padding: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 20;
+}
+
+.map-legend h4 {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.legend-items {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.legend-marker {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  position: relative;
+}
+
+.legend-marker.planned {
+  background-color: #00E0FF;
+}
+
+.legend-marker.future {
+  background-color: #FFC107;
+}
+
+.legend-marker.urban {
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 2px solid rgba(255, 255, 255, 0.7);
+}
+
+.legend-marker.corridor {
+  background-color: rgba(255, 255, 255, 0.4);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+}
+
+/* Deployment Phases */
+.deployment-phases {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.phase-tabs {
+  display: flex;
+  gap: 5px;
+  margin-bottom: 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.phase-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.phase-tab {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px 15px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.phase-tab:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.phase-tab.active {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+.phase-tab.planning {
+  border-color: rgba(0, 224, 255, 0.3);
+}
+
+.phase-tab.future {
+  border-color: rgba(255, 193, 7, 0.3);
+}
+
+.phase-details {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.phase-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.phase-header h3 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.phase-timeline {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+}
+
+.phase-status {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.phase-status.planning {
+  background-color: rgba(0, 224, 255, 0.2);
+  color: #00E0FF;
+}
+
+.phase-status.future {
+  background-color: rgba(255, 193, 7, 0.2);
+  color: #FFC107;
+}
+
+.phase-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 15px;
+  margin-bottom: 30px;
+}
+
+.metric-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 15px;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metric-value {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.metric-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.location-list {
+  margin-top: 20px;
+}
+
+.location-list h4 {
+  margin: 0 0 15px 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.location-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 15px;
+}
+
+.location-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+  padding: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.location-card:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+  transform: translateY(-3px);
+}
+
+.location-card.selected {
+  border-color: #00E0FF;
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.location-name {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.location-type {
+  font-size: 12px;
+  opacity: 0.7;
+  margin-bottom: 8px;
+}
+
+.location-capacity {
+  font-size: 14px;
+  color: #00E0FF;
+}
+
+/* Demographics Tab */
+.demographics-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.demographics-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.demographics-section h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.county-chart {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.chart-header {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  border-radius: 8px 8px 0 0;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.chart-row {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.chart-row:last-child {
+  border-bottom: none;
+}
+
+.chart-row:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.chart-column {
+  padding: 0 10px;
+  font-size: 14px;
+}
+
+.chart-column.county {
+  width: 120px;
+  flex-shrink: 0;
+}
+
+.chart-column.population {
+  width: 120px;
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.chart-column.adoption {
+  flex: 1;
+  min-width: 200px;
+}
+
+.chart-column.stations {
+  width: 80px;
+  flex-shrink: 0;
+  text-align: center;
+}
+
+.adoption-bar-container {
+  height: 20px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+}
+
+.adoption-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 10px;
+}
+
+.adoption-value {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.projection-chart {
+  height: 300px;
+  position: relative;
+  padding: 20px 0 40px 0;
+}
+
+.projection-bars {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  height: 100%;
+}
+
+.projection-bar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 60px;
+}
+
+.projection-year {
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+.projection-bar-wrapper {
+  width: 40px;
+  height: 80%;
+  display: flex;
+  align-items: flex-end;
+}
+
+.projection-bar {
+  width: 100%;
+  background: linear-gradient(180deg, #00E0FF, #35F2DB);
+  border-radius: 4px 4px 0 0;
+  transition: height 0.5s ease;
+}
+
+.projection-value {
+  margin-top: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.projection-axis {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+
+.axis-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.projection-notes {
+  margin-top: 20px;
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 1.5;
+}
+
+/* Impact Metrics Tab */
+.impact-metrics-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.impact-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.impact-section.economic {
+  border-color: rgba(0, 224, 255, 0.2);
+}
+
+.impact-section.environmental {
+  border-color: rgba(53, 242, 219, 0.2);
+}
+
+.impact-section.social {
+  border-color: rgba(255, 193, 7, 0.2);
+}
+
+.impact-section h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.impact-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.impact-metric {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.impact-icon {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.impact-value {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.impact-label {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.impact-description {
+  font-size: 12px;
+  opacity: 0.7;
+  line-height: 1.5;
+}
+
+/* Footer */
+.map-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 30px;
+}
+
+.footer-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.footer-info span {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.footer-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.footer-button {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 6px;
+  padding: 8px 12px;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.footer-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .map-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  
+  .illinois-map {
+    height: 400px;
+  }
+  
+  .map-controls {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .zoom-controls, .view-controls {
+    width: 100%;
+    justify-content: space-between;
+  }
+  
+  .map-legend {
+    position: relative;
+    bottom: auto;
+    right: auto;
+    margin-top: 20px;
+  }
+  
+  .phase-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  
+  .impact-metrics {
+    grid-template-columns: 1fr;
+  }
+  
+  .map-footer {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .footer-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+}

DeploymentMap.jsx

@@ -0,0 +1,561 @@
+import React, { useState, useEffect } from 'react';
+import './DeploymentMap.css';
+
+// Mock data for demonstration purposes
+const mockDeploymentData = {
+  phases: [
+    {
+      id: 1,
+      name: "Phase 1",
+      timeline: "Q3 2025 - Q1 2026",
+      status: "planning",
+      locations: [
+        { id: 101, name: "Springfield Downtown", lat: 39.801, lng: -89.644, status: "planned", type: "urban", capacity: 12 },
+        { id: 102, name: "Champaign-Urbana Hub", lat: 40.116, lng: -88.243, status: "planned", type: "urban", capacity: 8 },
+        { id: 103, name: "Bloomington-Normal", lat: 40.484, lng: -88.993, status: "planned", type: "urban", capacity: 8 },
+        { id: 104, name: "Peoria Central", lat: 40.694, lng: -89.589, status: "planned", type: "urban", capacity: 8 }
+      ]
+    },
+    {
+      id: 2,
+      name: "Phase 2",
+      timeline: "Q2 2026 - Q4 2026",
+      status: "future",
+      locations: [
+        { id: 201, name: "Rockford Hub", lat: 42.271, lng: -89.093, status: "future", type: "urban", capacity: 8 },
+        { id: 202, name: "Quad Cities", lat: 41.512, lng: -90.578, status: "future", type: "urban", capacity: 8 },
+        { id: 203, name: "Carbondale", lat: 37.727, lng: -89.216, status: "future", type: "urban", capacity: 6 },
+        { id: 204, name: "Quincy", lat: 39.936, lng: -91.410, status: "future", type: "urban", capacity: 6 },
+        { id: 205, name: "I-55 Corridor North", lat: 41.097, lng: -88.841, status: "future", type: "corridor", capacity: 4 },
+        { id: 206, name: "I-55 Corridor South", lat: 39.144, lng: -89.479, status: "future", type: "corridor", capacity: 4 }
+      ]
+    },
+    {
+      id: 3,
+      name: "Phase 3",
+      timeline: "Q1 2027 - Q3 2027",
+      status: "future",
+      locations: [
+        { id: 301, name: "Decatur", lat: 39.840, lng: -88.954, status: "future", type: "urban", capacity: 6 },
+        { id: 302, name: "Danville", lat: 40.124, lng: -87.630, status: "future", type: "urban", capacity: 6 },
+        { id: 303, name: "Galesburg", lat: 40.947, lng: -90.371, status: "future", type: "urban", capacity: 4 },
+        { id: 304, name: "Mt. Vernon", lat: 38.317, lng: -88.903, status: "future", type: "urban", capacity: 4 },
+        { id: 305, name: "I-57 Corridor North", lat: 41.201, lng: -87.866, status: "future", type: "corridor", capacity: 4 },
+        { id: 306, name: "I-57 Corridor South", lat: 38.729, lng: -88.978, status: "future", type: "corridor", capacity: 4 },
+        { id: 307, name: "I-70 Corridor", lat: 39.123, lng: -88.542, status: "future", type: "corridor", capacity: 4 },
+        { id: 308, name: "I-74 Corridor", lat: 40.681, lng: -89.893, status: "future", type: "corridor", capacity: 4 }
+      ]
+    }
+  ],
+  demographics: {
+    population: [
+      { county: "Cook", population: 5150233, evAdoption: 2.8, chargingStations: 487 },
+      { county: "DuPage", population: 922921, evAdoption: 3.2, chargingStations: 112 },
+      { county: "Lake", population: 696535, evAdoption: 2.9, chargingStations: 78 },
+      { county: "Will", population: 677560, evAdoption: 2.1, chargingStations: 54 },
+      { county: "Kane", population: 532403, evAdoption: 2.3, chargingStations: 42 },
+      { county: "McHenry", population: 307774, evAdoption: 1.9, chargingStations: 28 },
+      { county: "Winnebago", population: 285350, evAdoption: 1.2, chargingStations: 18 },
+      { county: "Madison", population: 264461, evAdoption: 0.9, chargingStations: 14 },
+      { county: "St. Clair", population: 259686, evAdoption: 0.7, chargingStations: 12 },
+      { county: "Champaign", population: 205865, evAdoption: 1.8, chargingStations: 22 }
+    ],
+    evProjections: [
+      { year: 2025, percentage: 3.5 },
+      { year: 2026, percentage: 5.2 },
+      { year: 2027, percentage: 7.8 },
+      { year: 2028, percentage: 11.5 },
+      { year: 2029, percentage: 16.3 },
+      { year: 2030, percentage: 22.0 }
+    ]
+  },
+  impactMetrics: {
+    economic: {
+      jobsCreated: 450,
+      localBusinessImpact: 28,
+      taxRevenue: 3.2
+    },
+    environmental: {
+      co2Reduction: 12500,
+      gasDisplaced: 1.4,
+      renewableIntegration: 65
+    },
+    social: {
+      underservedCommunities: 14,
+      accessibilityScore: 72,
+      publicTransportIntegration: 8
+    }
+  }
+};
+
+function DeploymentMap() {
+  const [activeTab, setActiveTab] = useState('map');
+  const [loading, setLoading] = useState(true);
+  const [selectedPhase, setSelectedPhase] = useState(1);
+  const [mapView, setMapView] = useState('phases');
+  const [selectedLocation, setSelectedLocation] = useState(null);
+  const [mapZoom, setMapZoom] = useState(1);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1500);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handlePhaseChange = (phaseId) => {
+    setSelectedPhase(phaseId);
+    setSelectedLocation(null);
+  };
+
+  const handleMapViewChange = (view) => {
+    setMapView(view);
+    setSelectedLocation(null);
+  };
+
+  const handleLocationSelect = (location) => {
+    setSelectedLocation(location);
+    setMapZoom(2);
+  };
+
+  const handleZoomChange = (zoom) => {
+    setMapZoom(zoom);
+    if (zoom === 1) {
+      setSelectedLocation(null);
+    }
+  };
+
+  // Helper function to render the Illinois map with deployment locations
+  const renderMap = () => {
+    const currentPhase = mockDeploymentData.phases.find(phase => phase.id === selectedPhase);
+    const allLocations = mockDeploymentData.phases.flatMap(phase => phase.locations);
+    const displayLocations = mapView === 'phases' ? currentPhase.locations : allLocations;
+    
+    return (
+      <div className="map-container">
+        <div className="illinois-map">
+          <img src="/images/illinois_map.png" alt="Illinois Map" className="map-image" />
+          
+          {displayLocations.map(location => (
+            <div 
+              key={location.id}
+              className={`map-marker ${location.status} ${location.type} ${selectedLocation && selectedLocation.id === location.id ? 'selected' : ''}`}
+              style={{ 
+                top: `${(1 - (location.lat - 37) / 6) * 100}%`, 
+                left: `${((location.lng + 91.5) / 4) * 100}%` 
+              }}
+              onClick={() => handleLocationSelect(location)}
+            >
+              <div className="marker-pulse"></div>
+              {mapZoom > 1 && (
+                <div className="marker-label">{location.name}</div>
+              )}
+            </div>
+          ))}
+          
+          {selectedLocation && (
+            <div 
+              className="location-detail-popup"
+              style={{ 
+                top: `${(1 - (selectedLocation.lat - 37) / 6) * 100}%`, 
+                left: `${((selectedLocation.lng + 91.5) / 4) * 100}%` 
+              }}
+            >
+              <h4>{selectedLocation.name}</h4>
+              <div className="detail-item">
+                <span className="detail-label">Status:</span>
+                <span className={`detail-value ${selectedLocation.status}`}>
+                  {selectedLocation.status.charAt(0).toUpperCase() + selectedLocation.status.slice(1)}
+                </span>
+              </div>
+              <div className="detail-item">
+                <span className="detail-label">Type:</span>
+                <span className="detail-value">
+                  {selectedLocation.type === 'urban' ? 'Urban Hub' : 'Corridor Station'}
+                </span>
+              </div>
+              <div className="detail-item">
+                <span className="detail-label">Capacity:</span>
+                <span className="detail-value">{selectedLocation.capacity} Chargers</span>
+              </div>
+              <div className="detail-item">
+                <span className="detail-label">Phase:</span>
+                <span className="detail-value">
+                  {mockDeploymentData.phases.find(phase => 
+                    phase.locations.some(loc => loc.id === selectedLocation.id)
+                  ).name}
+                </span>
+              </div>
+              <button className="close-popup" onClick={() => setSelectedLocation(null)}>×</button>
+            </div>
+          )}
+        </div>
+        
+        <div className="map-controls">
+          <div className="zoom-controls">
+            <button 
+              className={`zoom-button ${mapZoom === 1 ? 'active' : ''}`}
+              onClick={() => handleZoomChange(1)}
+            >
+              State View
+            </button>
+            <button 
+              className={`zoom-button ${mapZoom === 2 ? 'active' : ''}`}
+              onClick={() => handleZoomChange(2)}
+            >
+              Detailed View
+            </button>
+          </div>
+          
+          <div className="view-controls">
+            <button 
+              className={`view-button ${mapView === 'phases' ? 'active' : ''}`}
+              onClick={() => handleMapViewChange('phases')}
+            >
+              Phase View
+            </button>
+            <button 
+              className={`view-button ${mapView === 'all' ? 'active' : ''}`}
+              onClick={() => handleMapViewChange('all')}
+            >
+              All Locations
+            </button>
+          </div>
+        </div>
+        
+        <div className="map-legend">
+          <h4>Map Legend</h4>
+          <div className="legend-items">
+            <div className="legend-item">
+              <div className="legend-marker planned"></div>
+              <span>Planned (Phase 1)</span>
+            </div>
+            <div className="legend-item">
+              <div className="legend-marker future"></div>
+              <span>Future Phases</span>
+            </div>
+            <div className="legend-item">
+              <div className="legend-marker urban"></div>
+              <span>Urban Hub</span>
+            </div>
+            <div className="legend-item">
+              <div className="legend-marker corridor"></div>
+              <span>Corridor Station</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Helper function to render the deployment phases
+  const renderPhases = () => {
+    return (
+      <div className="deployment-phases">
+        <div className="phase-tabs">
+          {mockDeploymentData.phases.map(phase => (
+            <button 
+              key={phase.id}
+              className={`phase-tab ${selectedPhase === phase.id ? 'active' : ''} ${phase.status}`}
+              onClick={() => handlePhaseChange(phase.id)}
+            >
+              {phase.name}
+            </button>
+          ))}
+        </div>
+        
+        {mockDeploymentData.phases.map(phase => (
+          phase.id === selectedPhase && (
+            <div key={phase.id} className="phase-details">
+              <div className="phase-header">
+                <h3>{phase.name}</h3>
+                <div className="phase-timeline">{phase.timeline}</div>
+                <div className={`phase-status ${phase.status}`}>
+                  {phase.status.charAt(0).toUpperCase() + phase.status.slice(1)}
+                </div>
+              </div>
+              
+              <div className="phase-metrics">
+                <div className="metric-card">
+                  <div className="metric-value">{phase.locations.length}</div>
+                  <div className="metric-label">Charging Locations</div>
+                </div>
+                <div className="metric-card">
+                  <div className="metric-value">
+                    {phase.locations.reduce((sum, location) => sum + location.capacity, 0)}
+                  </div>
+                  <div className="metric-label">Total Chargers</div>
+                </div>
+                <div className="metric-card">
+                  <div className="metric-value">
+                    {phase.locations.filter(location => location.type === 'urban').length}
+                  </div>
+                  <div className="metric-label">Urban Hubs</div>
+                </div>
+                <div className="metric-card">
+                  <div className="metric-value">
+                    {phase.locations.filter(location => location.type === 'corridor').length}
+                  </div>
+                  <div className="metric-label">Corridor Stations</div>
+                </div>
+              </div>
+              
+              <div className="location-list">
+                <h4>Deployment Locations</h4>
+                <div className="location-grid">
+                  {phase.locations.map(location => (
+                    <div 
+                      key={location.id} 
+                      className={`location-card ${selectedLocation && selectedLocation.id === location.id ? 'selected' : ''}`}
+                      onClick={() => handleLocationSelect(location)}
+                    >
+                      <div className="location-name">{location.name}</div>
+                      <div className="location-type">
+                        {location.type === 'urban' ? 'Urban Hub' : 'Corridor Station'}
+                      </div>
+                      <div className="location-capacity">{location.capacity} Chargers</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )
+        ))}
+      </div>
+    );
+  };
+
+  // Helper function to render the demographics tab
+  const renderDemographics = () => {
+    return (
+      <div className="demographics-tab">
+        <div className="demographics-section">
+          <h3>Population & EV Adoption by County</h3>
+          <div className="county-chart">
+            <div className="chart-header">
+              <div className="chart-column county">County</div>
+              <div className="chart-column population">Population</div>
+              <div className="chart-column adoption">EV Adoption %</div>
+              <div className="chart-column stations">Charging Stations</div>
+            </div>
+            {mockDeploymentData.demographics.population.map((county, index) => (
+              <div key={index} className="chart-row">
+                <div className="chart-column county">{county.county}</div>
+                <div className="chart-column population">{county.population.toLocaleString()}</div>
+                <div className="chart-column adoption">
+                  <div className="adoption-bar-container">
+                    <div 
+                      className="adoption-bar"
+                      style={{ width: `${county.evAdoption * 10}%` }}
+                    ></div>
+                    <span className="adoption-value">{county.evAdoption}%</span>
+                  </div>
+                </div>
+                <div className="chart-column stations">{county.chargingStations}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        
+        <div className="demographics-section">
+          <h3>EV Adoption Projections</h3>
+          <div className="projection-chart">
+            <div className="projection-bars">
+              {mockDeploymentData.demographics.evProjections.map((projection, index) => (
+                <div key={index} className="projection-bar-container">
+                  <div className="projection-year">{projection.year}</div>
+                  <div className="projection-bar-wrapper">
+                    <div 
+                      className="projection-bar"
+                      style={{ height: `${projection.percentage * 3}%` }}
+                    ></div>
+                  </div>
+                  <div className="projection-value">{projection.percentage}%</div>
+                </div>
+              ))}
+            </div>
+            <div className="projection-axis">
+              <div className="axis-label">Projected EV Adoption Rate (%)</div>
+            </div>
+          </div>
+          
+          <div className="projection-notes">
+            <p>Projections based on current adoption trends, state incentives, and manufacturer production forecasts.</p>
+            <p>The Link deployment strategy is designed to stay ahead of projected adoption curves to ensure adequate charging infrastructure.</p>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Helper function to render the impact metrics tab
+  const renderImpactMetrics = () => {
+    const { economic, environmental, social } = mockDeploymentData.impactMetrics;
+    
+    return (
+      <div className="impact-metrics-tab">
+        <div className="impact-section economic">
+          <h3>Economic Impact</h3>
+          <div className="impact-metrics">
+            <div className="impact-metric">
+              <div className="impact-icon">💼</div>
+              <div className="impact-value">{economic.jobsCreated}</div>
+              <div className="impact-label">Jobs Created</div>
+              <div className="impact-description">
+                Direct and indirect employment opportunities across all deployment phases
+              </div>
+            </div>
+            <div className="impact-metric">
+              <div className="impact-icon">🏪</div>
+              <div className="impact-value">{economic.localBusinessImpact}%</div>
+              <div className="impact-label">Local Business Growth</div>
+              <div className="impact-description">
+                Projected increase in revenue for businesses near charging hubs
+              </div>
+            </div>
+            <div className="impact-metric">
+              <div className="impact-icon">💰</div>
+              <div className="impact-value">${economic.taxRevenue}M</div>
+              <div className="impact-label">Annual Tax Revenue</div>
+              <div className="impact-description">
+                Estimated additional tax revenue for state and local governments
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div className="impact-section environmental">
+          <h3>Environmental Impact</h3>
+          <div className="impact-metrics">
+            <div className="impact-metric">
+              <div className="impact-icon">🌱</div>
+              <div className="impact-value">{environmental.co2Reduction}</div>
+              <div className="impact-label">Tons CO₂ Reduced</div>
+              <div className="impact-description">
+                Annual carbon emissions reduction from EV adoption enabled by The Link
+              </div>
+            </div>
+            <div className="impact-metric">
+              <div className="impact-icon">⛽</div>
+              <div className="impact-value">{environmental.gasDisplaced}M</div>
+              <div className="impact-label">Gallons Gas Displaced</div>
+              <div className="impact-description">
+                Annual reduction in gasoline consumption
+              </div>
+            </div>
+            <div className="impact-metric">
+              <div className="impact-icon">☀️</div>
+              <div className="impact-value">{environmental.renewableIntegration}%</div>
+              <div className="impact-label">Renewable Energy</div>
+              <div className="impact-description">
+                Percentage of charging energy from renewable sources
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div className="impact-section social">
+          <h3>Social Impact</h3>
+          <div className="impact-metrics">
+            <div className="impact-metric">
+              <div className="impact-icon">🏘️</div>
+              <div className="impact-value">{social.underservedCommunities}</div>
+              <div className="impact-label">Underserved Communities</div>
+              <div className="impact-description">
+                Number of underserved communities with improved EV access
+              </div>
+            </div>
+            <div className="impact-metric">
+              <div className="impact-icon">♿</div>
+              <div className="impact-value">{social.accessibilityScore}/100</div>
+              <div className="impact-label">Accessibility Score</div>
+              <div className="impact-description">
+                Rating of charging infrastructure accessibility for all users
+              </div>
+            </div>
+            <div className="impact-metric">
+              <div className="impact-icon">🚌</div>
+              <div className="impact-value">{social.publicTransportIntegration}</div>
+              <div className="impact-label">Transit Connections</div>
+              <div className="impact-description">
+                Number of charging hubs with public transportation connections
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="deployment-map loading">
+        <div className="loading-logo">
+          <img src="/images/unity_fleet_logo.png" alt="Unity Fleet" />
+          <div className="loading-pulse"></div>
+        </div>
+        <p>Loading Deployment Map...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="deployment-map">
+      <header className="map-header">
+        <div className="map-title">
+          <h1>Deployment Map</h1>
+          <span className="map-subtitle">The Link Charging Network</span>
+        </div>
+      </header>
+      
+      <div className="map-navigation">
+        <button 
+          className={`nav-button ${activeTab === 'map' ? 'active' : ''}`}
+          onClick={() => setActiveTab('map')}
+        >
+          Interactive Map
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'phases' ? 'active' : ''}`}
+          onClick={() => setActiveTab('phases')}
+        >
+          Deployment Phases
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'demographics' ? 'active' : ''}`}
+          onClick={() => setActiveTab('demographics')}
+        >
+          Demographics
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'impact' ? 'active' : ''}`}
+          onClick={() => setActiveTab('impact')}
+        >
+          Impact Metrics
+        </button>
+      </div>
+      
+      <main className="map-content">
+        {activeTab === 'map' && renderMap()}
+        {activeTab === 'phases' && renderPhases()}
+        {activeTab === 'demographics' && renderDemographics()}
+        {activeTab === 'impact' && renderImpactMetrics()}
+      </main>
+      
+      <footer className="map-footer">
+        <div className="footer-info">
+          <span>Unity Fleet Deployment Strategy</span>
+          <span>Powered by Atlas Intelligence</span>
+        </div>
+        <div className="footer-actions">
+          <button className="footer-button">Download Map Data</button>
+          <button className="footer-button">Share Deployment Plan</button>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default DeploymentMap;

EnergySimulation.css

@@ -0,0 +1,1377 @@
+/* Energy Simulation Styles */
+.energy-simulation {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  background-color: #0B0B0F;
+  color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+/* Loading Screen */
+.energy-simulation.loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loading-logo {
+  width: 150px;
+  height: 150px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.loading-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.loading-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  border: 2px solid #00E0FF;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+/* Header */
+.simulation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-wrap: wrap;
+}
+
+.simulation-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.simulation-title h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 1px;
+}
+
+.simulation-subtitle {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.simulation-controls {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.time-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 224, 255, 0.2);
+}
+
+.time-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.time-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.control-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.control-button {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.control-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.control-button.active {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+.speed-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.speed-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.speed-buttons {
+  display: flex;
+  gap: 2px;
+}
+
+.speed-button {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 4px 8px;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.speed-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.speed-button.active {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+/* Navigation */
+.simulation-navigation {
+  display: flex;
+  gap: 2px;
+  background-color: rgba(20, 20, 30, 0.5);
+  padding: 0 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.simulation-navigation::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-button {
+  padding: 16px 20px;
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+}
+
+.nav-button.active {
+  color: #00E0FF;
+}
+
+.nav-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 3px 3px 0 0;
+}
+
+/* Main Content */
+.simulation-content {
+  padding: 20px;
+  min-height: calc(100vh - 200px);
+}
+
+/* Overview Tab */
+.overview-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.energy-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.summary-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.summary-card h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.balance-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+}
+
+.metric {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.metric-value {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.metric-value.positive {
+  color: #35F2DB;
+}
+
+.metric-value.negative {
+  color: #FF5555;
+}
+
+/* Energy Flow Diagram */
+.energy-flow-diagram {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 30px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  position: relative;
+}
+
+.energy-sources {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.energy-source {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 15px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.energy-source.solar {
+  border-color: rgba(255, 215, 0, 0.3);
+}
+
+.energy-source.grid {
+  border-color: rgba(255, 85, 85, 0.3);
+}
+
+.source-icon {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.source-label {
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 5px;
+}
+
+.source-value {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.energy-flows {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  position: relative;
+  height: 40px;
+}
+
+.flow {
+  height: 10px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 5px;
+  position: relative;
+  animation: flowPulse 2s infinite;
+}
+
+@keyframes flowPulse {
+  0% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+.solar-flow {
+  background: linear-gradient(90deg, #FFD700, #FFA500);
+}
+
+.grid-flow {
+  background: linear-gradient(90deg, #FF5555, #FF8888);
+}
+
+.battery-flow {
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+}
+
+.energy-storage {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 224, 255, 0.3);
+  width: 200px;
+}
+
+.storage-icon {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.storage-label {
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 5px;
+}
+
+.storage-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #00E0FF;
+  margin-bottom: 5px;
+}
+
+.storage-capacity {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.energy-demand {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(53, 242, 219, 0.3);
+  width: 200px;
+}
+
+.demand-icon {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.demand-label {
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 5px;
+}
+
+.demand-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #35F2DB;
+  margin-bottom: 5px;
+}
+
+.demand-details {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+/* Optimization Summary */
+.optimization-summary {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.optimization-summary h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.optimization-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.metric-bar-container {
+  height: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 8px;
+}
+
+.metric-bar {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+/* Gauge Component */
+.gauge-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.gauge {
+  width: 150px;
+  height: 150px;
+  position: relative;
+}
+
+.gauge-body {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.gauge-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: center bottom;
+  transition: transform 1s ease;
+}
+
+.gauge-cover {
+  position: absolute;
+  top: 15%;
+  left: 15%;
+  width: 70%;
+  height: 70%;
+  background-color: #0B0B0F;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.gauge-value {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.gauge-label {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.gauge-max {
+  font-size: 12px;
+  opacity: 0.7;
+  margin-top: 5px;
+}
+
+/* Bar Chart Component */
+.bar-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bar-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.bar-label {
+  width: 60px;
+  font-size: 12px;
+  text-align: right;
+}
+
+.bar-wrapper {
+  flex: 1;
+  height: 20px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.bar {
+  height: 100%;
+  transition: width 0.5s ease;
+}
+
+.bar-value {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* Solar Tab */
+.solar-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.solar-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.metric-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.metric-card h3 {
+  margin: 10px 0 0 0;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.daily-production {
+  width: 100%;
+}
+
+.daily-production h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.solar-details {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.detail-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.detail-card h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.detail-value {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.weather-forecast {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.weather-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+}
+
+.weather-icon {
+  font-size: 24px;
+  margin-bottom: 5px;
+}
+
+.weather-day {
+  font-size: 12px;
+  opacity: 0.7;
+  margin-bottom: 5px;
+}
+
+.weather-impact {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.weather-impact.positive {
+  color: #35F2DB;
+}
+
+.weather-impact.neutral {
+  color: #FFC107;
+}
+
+.weather-impact.negative {
+  color: #FF5555;
+}
+
+/* Battery Tab */
+.battery-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.battery-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.battery-status {
+  width: 100%;
+}
+
+.battery-status h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+}
+
+.status-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.status-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.status-value {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.status-value.positive {
+  color: #35F2DB;
+}
+
+.status-value.negative {
+  color: #FF5555;
+}
+
+.status-value.status-active {
+  color: #35F2DB;
+}
+
+.status-value.status-stable {
+  color: #35F2DB;
+}
+
+.battery-history {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.battery-history h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.battery-controls {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.battery-controls h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.control-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.control-item {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.control-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.control-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.control-slider {
+  flex: 1;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  outline: none;
+}
+
+.control-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #00E0FF;
+  cursor: pointer;
+}
+
+.control-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #00E0FF;
+  cursor: pointer;
+}
+
+.slider-value {
+  font-size: 14px;
+  font-weight: 600;
+  min-width: 50px;
+}
+
+.control-buttons {
+  display: flex;
+  gap: 5px;
+}
+
+.mode-button {
+  flex: 1;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 6px 10px;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mode-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.mode-button.active {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+/* Toggle Switch */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.toggle-input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-label {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  transition: .4s;
+  border-radius: 24px;
+}
+
+.toggle-label:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+.toggle-input:checked + .toggle-label {
+  background-color: rgba(0, 224, 255, 0.5);
+}
+
+.toggle-input:checked + .toggle-label:before {
+  transform: translateX(26px);
+  background-color: #00E0FF;
+}
+
+/* Grid Tab */
+.grid-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.grid-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.grid-status {
+  width: 100%;
+}
+
+.grid-status h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.grid-history {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.grid-history h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.grid-controls {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.grid-controls h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* Demand Tab */
+.demand-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.demand-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.charger-status {
+  width: 100%;
+}
+
+.charger-status h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.charger-types {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.charger-types h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.charger-type-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.charger-type-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.type-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.type-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.type-power {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.type-count {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.count-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #35F2DB;
+}
+
+.count-label {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.type-usage, .type-power-share {
+  margin-bottom: 10px;
+}
+
+.usage-bar-container, .power-bar-container {
+  height: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 5px;
+}
+
+.usage-bar, .power-bar {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+.usage-label, .power-label {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.demand-forecast {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.demand-forecast h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* Optimization Tab */
+.optimization-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.optimization-modes {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.optimization-modes h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.mode-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.mode-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.mode-card:hover {
+  transform: translateY(-5px);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.mode-card.active {
+  border-color: #00E0FF;
+  background: rgba(0, 224, 255, 0.1);
+}
+
+.mode-icon {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.mode-card h4 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.mode-card p {
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 15px;
+}
+
+.mode-benefits {
+  padding-left: 20px;
+  margin: 0;
+}
+
+.mode-benefits li {
+  font-size: 12px;
+  margin-bottom: 5px;
+}
+
+.optimization-results {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.optimization-results h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.results-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.result-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.result-card h4 {
+  margin: 0 0 15px 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.result-comparison {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.comparison-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.comparison-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.comparison-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.comparison-value.optimized {
+  color: #00E0FF;
+}
+
+.comparison-value.savings {
+  color: #35F2DB;
+}
+
+.optimization-actions {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.action-button {
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.3);
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-button:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+  transform: translateY(-2px);
+}
+
+.action-button.apply {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+/* Footer */
+.simulation-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 30px;
+}
+
+.footer-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.footer-info span {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.footer-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.footer-button {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 6px;
+  padding: 8px 12px;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.footer-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .simulation-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+  
+  .simulation-controls {
+    width: 100%;
+    justify-content: space-between;
+  }
+  
+  .time-display {
+    width: 100%;
+  }
+  
+  .control-buttons, .speed-control {
+    width: 100%;
+    justify-content: space-between;
+  }
+  
+  .mode-cards, .results-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .solar-metrics, .battery-metrics, .grid-metrics, .demand-metrics {
+    grid-template-columns: 1fr;
+  }
+  
+  .weather-forecast {
+    flex-wrap: wrap;
+  }
+  
+  .weather-item {
+    min-width: 80px;
+  }
+  
+  .simulation-footer {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .footer-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+}

EnergySimulation.jsx

@@ -0,0 +1,1050 @@
+import React, { useState, useEffect } from 'react';
+import './EnergySimulation.css';
+
+// Mock data for demonstration purposes
+const mockEnergyData = {
+  solarGeneration: {
+    current: 85,
+    capacity: 150,
+    dailyForecast: [
+      { hour: '06:00', value: 0 },
+      { hour: '07:00', value: 15 },
+      { hour: '08:00', value: 45 },
+      { hour: '09:00', value: 75 },
+      { hour: '10:00', value: 95 },
+      { hour: '11:00', value: 120 },
+      { hour: '12:00', value: 140 },
+      { hour: '13:00', value: 150 },
+      { hour: '14:00', value: 145 },
+      { hour: '15:00', value: 130 },
+      { hour: '16:00', value: 100 },
+      { hour: '17:00', value: 70 },
+      { hour: '18:00', value: 40 },
+      { hour: '19:00', value: 10 },
+      { hour: '20:00', value: 0 },
+    ]
+  },
+  batteryStorage: {
+    current: 72,
+    capacity: 500,
+    chargingRate: 45,
+    dischargingRate: 60,
+    history: [
+      { time: '00:00', level: 65 },
+      { time: '01:00', level: 68 },
+      { time: '02:00', level: 70 },
+      { time: '03:00', level: 72 },
+      { time: '04:00', level: 74 },
+      { time: '05:00', level: 76 },
+      { time: '06:00', level: 78 },
+      { time: '07:00', level: 80 },
+      { time: '08:00', level: 82 },
+      { time: '09:00', level: 80 },
+      { time: '10:00', level: 78 },
+      { time: '11:00', level: 75 },
+      { time: '12:00', level: 72 },
+    ]
+  },
+  gridConsumption: {
+    current: 120,
+    peak: 250,
+    average: 180,
+    history: [
+      { time: '00:00', value: 100 },
+      { time: '01:00', value: 90 },
+      { time: '02:00', value: 85 },
+      { time: '03:00', value: 80 },
+      { time: '04:00', value: 90 },
+      { time: '05:00', value: 110 },
+      { time: '06:00', value: 130 },
+      { time: '07:00', value: 150 },
+      { time: '08:00', value: 180 },
+      { time: '09:00', value: 210 },
+      { time: '10:00', value: 230 },
+      { time: '11:00', value: 250 },
+      { time: '12:00', value: 240 },
+    ]
+  },
+  chargingDemand: {
+    current: 210,
+    activeChargers: 6,
+    totalChargers: 12,
+    byType: [
+      { type: 'Level 2', count: 2, power: 20 },
+      { type: 'DC Fast', count: 3, power: 150 },
+      { type: 'Ultra Fast', count: 1, power: 350 }
+    ],
+    forecast: [
+      { time: '13:00', value: 220 },
+      { time: '14:00', value: 240 },
+      { time: '15:00', value: 260 },
+      { time: '16:00', value: 280 },
+      { time: '17:00', value: 300 },
+      { time: '18:00', value: 280 },
+      { time: '19:00', value: 250 },
+      { time: '20:00', value: 220 },
+      { time: '21:00', value: 180 },
+      { time: '22:00', value: 150 },
+      { time: '23:00', value: 120 },
+    ]
+  }
+};
+
+function EnergySimulation() {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [loading, setLoading] = useState(true);
+  const [simulationSpeed, setSimulationSpeed] = useState(1);
+  const [simulationRunning, setSimulationRunning] = useState(false);
+  const [simulationTime, setSimulationTime] = useState('12:00');
+  const [energyData, setEnergyData] = useState(mockEnergyData);
+  const [optimizationMode, setOptimizationMode] = useState('balanced');
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1500);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    let interval;
+    
+    if (simulationRunning) {
+      interval = setInterval(() => {
+        // Update simulation time
+        setSimulationTime(prevTime => {
+          const [hours, minutes] = prevTime.split(':').map(Number);
+          let newMinutes = minutes + 15;
+          let newHours = hours;
+          
+          if (newMinutes >= 60) {
+            newMinutes = 0;
+            newHours = (newHours + 1) % 24;
+          }
+          
+          return `${newHours.toString().padStart(2, '0')}:${newMinutes.toString().padStart(2, '0')}`;
+        });
+        
+        // Update energy data based on simulation
+        setEnergyData(prevData => {
+          // This would be a more complex algorithm in a real implementation
+          // For demo purposes, we're just making small random adjustments
+          
+          const solarVariation = Math.random() * 10 - 5;
+          const batteryVariation = Math.random() * 3 - 1;
+          const gridVariation = Math.random() * 15 - 7;
+          const demandVariation = Math.random() * 20 - 10;
+          
+          return {
+            solarGeneration: {
+              ...prevData.solarGeneration,
+              current: Math.max(0, Math.min(prevData.solarGeneration.capacity, prevData.solarGeneration.current + solarVariation))
+            },
+            batteryStorage: {
+              ...prevData.batteryStorage,
+              current: Math.max(0, Math.min(100, prevData.batteryStorage.current + batteryVariation))
+            },
+            gridConsumption: {
+              ...prevData.gridConsumption,
+              current: Math.max(0, prevData.gridConsumption.current + gridVariation)
+            },
+            chargingDemand: {
+              ...prevData.chargingDemand,
+              current: Math.max(0, prevData.chargingDemand.current + demandVariation)
+            }
+          };
+        });
+      }, 1000 / simulationSpeed);
+    }
+    
+    return () => clearInterval(interval);
+  }, [simulationRunning, simulationSpeed]);
+
+  const toggleSimulation = () => {
+    setSimulationRunning(!simulationRunning);
+  };
+
+  const resetSimulation = () => {
+    setSimulationRunning(false);
+    setSimulationTime('12:00');
+    setEnergyData(mockEnergyData);
+  };
+
+  const handleOptimizationChange = (mode) => {
+    setOptimizationMode(mode);
+    
+    // In a real implementation, this would adjust the simulation parameters
+    // For demo purposes, we'll just show different messages
+    let message;
+    switch(mode) {
+      case 'cost':
+        message = "Optimizing for lowest operational cost";
+        break;
+      case 'renewable':
+        message = "Maximizing renewable energy usage";
+        break;
+      case 'demand':
+        message = "Prioritizing charging demand fulfillment";
+        break;
+      default:
+        message = "Balanced optimization mode";
+    }
+    
+    // This would show a notification in a real implementation
+    console.log(message);
+  };
+
+  // Helper function to render a gauge chart
+  const renderGauge = (value, max, label, color) => {
+    const percentage = (value / max) * 100;
+    const angle = (percentage / 100) * 180;
+    
+    return (
+      <div className="gauge-container">
+        <div className="gauge">
+          <div className="gauge-body">
+            <div 
+              className="gauge-fill"
+              style={{ 
+                transform: `rotate(${angle}deg)`,
+                background: `linear-gradient(90deg, ${color}, ${color}CC)`
+              }}
+            ></div>
+            <div className="gauge-cover">
+              <div className="gauge-value">{value}</div>
+              <div className="gauge-label">{label}</div>
+            </div>
+          </div>
+        </div>
+        <div className="gauge-max">{max} {label}</div>
+      </div>
+    );
+  };
+
+  // Helper function to render a simple bar chart
+  const renderBarChart = (data, valueKey, labelKey, color) => {
+    const maxValue = Math.max(...data.map(item => item[valueKey]));
+    
+    return (
+      <div className="bar-chart">
+        {data.map((item, index) => (
+          <div key={index} className="bar-container">
+            <div className="bar-label">{item[labelKey]}</div>
+            <div className="bar-wrapper">
+              <div 
+                className="bar"
+                style={{ 
+                  width: `${(item[valueKey] / maxValue) * 100}%`,
+                  background: `linear-gradient(90deg, ${color}, ${color}CC)`
+                }}
+              ></div>
+              <span className="bar-value">{item[valueKey]}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Helper function to render the energy flow diagram
+  const renderEnergyFlow = () => {
+    const { solarGeneration, batteryStorage, gridConsumption, chargingDemand } = energyData;
+    
+    // Calculate flow widths based on energy values
+    const solarWidth = Math.min(100, (solarGeneration.current / 200) * 100);
+    const gridWidth = Math.min(100, (gridConsumption.current / 300) * 100);
+    const batteryWidth = Math.min(100, (batteryStorage.chargingRate / 100) * 100);
+    const demandWidth = Math.min(100, (chargingDemand.current / 400) * 100);
+    
+    return (
+      <div className="energy-flow-diagram">
+        <div className="energy-sources">
+          <div className="energy-source solar">
+            <div className="source-icon">☀️</div>
+            <div className="source-label">Solar Array</div>
+            <div className="source-value">{solarGeneration.current} kW</div>
+          </div>
+          <div className="energy-source grid">
+            <div className="source-icon">⚡</div>
+            <div className="source-label">Grid Power</div>
+            <div className="source-value">{gridConsumption.current} kW</div>
+          </div>
+        </div>
+        
+        <div className="energy-flows">
+          <div className="flow solar-flow" style={{ width: `${solarWidth}%` }}></div>
+          <div className="flow grid-flow" style={{ width: `${gridWidth}%` }}></div>
+        </div>
+        
+        <div className="energy-storage">
+          <div className="storage-icon">🔋</div>
+          <div className="storage-label">Battery Storage</div>
+          <div className="storage-value">{batteryStorage.current}%</div>
+          <div className="storage-capacity">{batteryStorage.capacity} kWh</div>
+        </div>
+        
+        <div className="energy-flows">
+          <div className="flow battery-flow" style={{ width: `${batteryWidth}%` }}></div>
+        </div>
+        
+        <div className="energy-demand">
+          <div className="demand-icon">🚗</div>
+          <div className="demand-label">Charging Demand</div>
+          <div className="demand-value">{chargingDemand.current} kW</div>
+          <div className="demand-details">{chargingDemand.activeChargers}/{chargingDemand.totalChargers} Chargers Active</div>
+        </div>
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="energy-simulation loading">
+        <div className="loading-logo">
+          <img src="/images/unity_fleet_logo.png" alt="Unity Fleet" />
+          <div className="loading-pulse"></div>
+        </div>
+        <p>Initializing Energy Simulation...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="energy-simulation">
+      <header className="simulation-header">
+        <div className="simulation-title">
+          <h1>Energy Simulation</h1>
+          <span className="simulation-subtitle">The Link Charging Network</span>
+        </div>
+        
+        <div className="simulation-controls">
+          <div className="time-display">
+            <span className="time-label">Simulation Time:</span>
+            <span className="time-value">{simulationTime}</span>
+          </div>
+          
+          <div className="control-buttons">
+            <button 
+              className={`control-button ${simulationRunning ? 'active' : ''}`}
+              onClick={toggleSimulation}
+            >
+              {simulationRunning ? 'Pause' : 'Start'} Simulation
+            </button>
+            
+            <button 
+              className="control-button"
+              onClick={resetSimulation}
+            >
+              Reset
+            </button>
+          </div>
+          
+          <div className="speed-control">
+            <span className="speed-label">Speed:</span>
+            <div className="speed-buttons">
+              <button 
+                className={`speed-button ${simulationSpeed === 0.5 ? 'active' : ''}`}
+                onClick={() => setSimulationSpeed(0.5)}
+              >
+                0.5x
+              </button>
+              <button 
+                className={`speed-button ${simulationSpeed === 1 ? 'active' : ''}`}
+                onClick={() => setSimulationSpeed(1)}
+              >
+                1x
+              </button>
+              <button 
+                className={`speed-button ${simulationSpeed === 2 ? 'active' : ''}`}
+                onClick={() => setSimulationSpeed(2)}
+              >
+                2x
+              </button>
+              <button 
+                className={`speed-button ${simulationSpeed === 5 ? 'active' : ''}`}
+                onClick={() => setSimulationSpeed(5)}
+              >
+                5x
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      
+      <div className="simulation-navigation">
+        <button 
+          className={`nav-button ${activeTab === 'overview' ? 'active' : ''}`}
+          onClick={() => setActiveTab('overview')}
+        >
+          Overview
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'solar' ? 'active' : ''}`}
+          onClick={() => setActiveTab('solar')}
+        >
+          Solar Generation
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'battery' ? 'active' : ''}`}
+          onClick={() => setActiveTab('battery')}
+        >
+          Battery Storage
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'grid' ? 'active' : ''}`}
+          onClick={() => setActiveTab('grid')}
+        >
+          Grid Integration
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'demand' ? 'active' : ''}`}
+          onClick={() => setActiveTab('demand')}
+        >
+          Charging Demand
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'optimization' ? 'active' : ''}`}
+          onClick={() => setActiveTab('optimization')}
+        >
+          Optimization
+        </button>
+      </div>
+      
+      <main className="simulation-content">
+        {activeTab === 'overview' && (
+          <div className="overview-tab">
+            <div className="energy-summary">
+              <div className="summary-card">
+                <h3>Current Energy Balance</h3>
+                <div className="balance-metrics">
+                  <div className="metric">
+                    <span className="metric-label">Total Input:</span>
+                    <span className="metric-value">{energyData.solarGeneration.current + energyData.gridConsumption.current} kW</span>
+                  </div>
+                  <div className="metric">
+                    <span className="metric-label">Total Demand:</span>
+                    <span className="metric-value">{energyData.chargingDemand.current} kW</span>
+                  </div>
+                  <div className="metric">
+                    <span className="metric-label">Battery Change:</span>
+                    <span className={`metric-value ${energyData.batteryStorage.chargingRate > energyData.batteryStorage.dischargingRate ? 'positive' : 'negative'}`}>
+                      {energyData.batteryStorage.chargingRate > energyData.batteryStorage.dischargingRate ? '+' : '-'}
+                      {Math.abs(energyData.batteryStorage.chargingRate - energyData.batteryStorage.dischargingRate)} kW
+                    </span>
+                  </div>
+                  <div className="metric">
+                    <span className="metric-label">Renewable Ratio:</span>
+                    <span className="metric-value">
+                      {Math.round((energyData.solarGeneration.current / (energyData.solarGeneration.current + energyData.gridConsumption.current)) * 100)}%
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            {renderEnergyFlow()}
+            
+            <div className="optimization-summary">
+              <h3>Optimization Mode: {optimizationMode.charAt(0).toUpperCase() + optimizationMode.slice(1)}</h3>
+              <div className="optimization-metrics">
+                <div className="metric">
+                  <span className="metric-label">Cost Efficiency:</span>
+                  <div className="metric-bar-container">
+                    <div 
+                      className="metric-bar"
+                      style={{ 
+                        width: `${optimizationMode === 'cost' ? 90 : optimizationMode === 'balanced' ? 70 : 50}%`,
+                        background: 'linear-gradient(90deg, #00E0FF, #35F2DB)'
+                      }}
+                    ></div>
+                  </div>
+                </div>
+                <div className="metric">
+                  <span className="metric-label">Renewable Usage:</span>
+                  <div className="metric-bar-container">
+                    <div 
+                      className="metric-bar"
+                      style={{ 
+                        width: `${optimizationMode === 'renewable' ? 90 : optimizationMode === 'balanced' ? 70 : 50}%`,
+                        background: 'linear-gradient(90deg, #00E0FF, #35F2DB)'
+                      }}
+                    ></div>
+                  </div>
+                </div>
+                <div className="metric">
+                  <span className="metric-label">Charging Capacity:</span>
+                  <div className="metric-bar-container">
+                    <div 
+                      className="metric-bar"
+                      style={{ 
+                        width: `${optimizationMode === 'demand' ? 90 : optimizationMode === 'balanced' ? 70 : 50}%`,
+                        background: 'linear-gradient(90deg, #00E0FF, #35F2DB)'
+                      }}
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {activeTab === 'solar' && (
+          <div className="solar-tab">
+            <div className="solar-metrics">
+              <div className="metric-card">
+                {renderGauge(
+                  energyData.solarGeneration.current,
+                  energyData.solarGeneration.capacity,
+                  'kW',
+                  '#FFD700'
+                )}
+                <h3>Current Solar Generation</h3>
+              </div>
+              
+              <div className="metric-card">
+                <div className="daily-production">
+                  <h3>Daily Production Forecast</h3>
+                  {renderBarChart(
+                    energyData.solarGeneration.dailyForecast,
+                    'value',
+                    'hour',
+                    '#FFD700'
+                  )}
+                </div>
+              </div>
+            </div>
+            
+            <div className="solar-details">
+              <div className="detail-card">
+                <h3>Solar Array Details</h3>
+                <div className="detail-grid">
+                  <div className="detail-item">
+                    <span className="detail-label">Array Capacity:</span>
+                    <span className="detail-value">{energyData.solarGeneration.capacity} kW</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Panel Type:</span>
+                    <span className="detail-value">Monocrystalline</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Panel Count:</span>
+                    <span className="detail-value">375</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Array Area:</span>
+                    <span className="detail-value">750 m²</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Efficiency:</span>
+                    <span className="detail-value">22.5%</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="detail-label">Installation Date:</span>
+                    <span className="detail-value">March 2025</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="detail-card">
+                <h3>Weather Impact</h3>
+                <div className="weather-forecast">
+                  <div className="weather-item">
+                    <div className="weather-icon">☀️</div>
+                    <div className="weather-day">Today</div>
+                    <div className="weather-impact positive">100%</div>
+                  </div>
+                  <div className="weather-item">
+                    <div className="weather-icon">🌤️</div>
+                    <div className="weather-day">Tomorrow</div>
+                    <div className="weather-impact neutral">85%</div>
+                  </div>
+                  <div className="weather-item">
+                    <div className="weather-icon">☁️</div>
+                    <div className="weather-day">Wednesday</div>
+                    <div className="weather-impact negative">60%</div>
+                  </div>
+                  <div className="weather-item">
+                    <div className="weather-icon">🌧️</div>
+                    <div className="weather-day">Thursday</div>
+                    <div className="weather-impact negative">40%</div>
+                  </div>
+                  <div className="weather-item">
+                    <div className="weather-icon">🌤️</div>
+                    <div className="weather-day">Friday</div>
+                    <div className="weather-impact neutral">75%</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {activeTab === 'battery' && (
+          <div className="battery-tab">
+            <div className="battery-metrics">
+              <div className="metric-card">
+                {renderGauge(
+                  energyData.batteryStorage.current,
+                  100,
+                  '%',
+                  '#00E0FF'
+                )}
+                <h3>Current Battery Level</h3>
+              </div>
+              
+              <div className="metric-card">
+                <div className="battery-status">
+                  <h3>Battery Status</h3>
+                  <div className="status-grid">
+                    <div className="status-item">
+                      <span className="status-label">Capacity:</span>
+                      <span className="status-value">{energyData.batteryStorage.capacity} kWh</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Charging Rate:</span>
+                      <span className="status-value">{energyData.batteryStorage.chargingRate} kW</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Discharging Rate:</span>
+                      <span className="status-value">{energyData.batteryStorage.dischargingRate} kW</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Net Flow:</span>
+                      <span className={`status-value ${energyData.batteryStorage.chargingRate > energyData.batteryStorage.dischargingRate ? 'positive' : 'negative'}`}>
+                        {energyData.batteryStorage.chargingRate > energyData.batteryStorage.dischargingRate ? '+' : '-'}
+                        {Math.abs(energyData.batteryStorage.chargingRate - energyData.batteryStorage.dischargingRate)} kW
+                      </span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Estimated Runtime:</span>
+                      <span className="status-value">
+                        {Math.round((energyData.batteryStorage.current / 100) * energyData.batteryStorage.capacity / energyData.batteryStorage.dischargingRate)} hours
+                      </span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Health:</span>
+                      <span className="status-value">98%</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="battery-history">
+              <h3>Battery Level History</h3>
+              {renderBarChart(
+                energyData.batteryStorage.history,
+                'level',
+                'time',
+                '#00E0FF'
+              )}
+            </div>
+            
+            <div className="battery-controls">
+              <h3>Battery Management Controls</h3>
+              <div className="control-grid">
+                <div className="control-item">
+                  <span className="control-label">Charge Limit:</span>
+                  <div className="control-slider-container">
+                    <input type="range" min="50" max="100" defaultValue="90" className="control-slider" />
+                    <span className="slider-value">90%</span>
+                  </div>
+                </div>
+                <div className="control-item">
+                  <span className="control-label">Discharge Limit:</span>
+                  <div className="control-slider-container">
+                    <input type="range" min="10" max="50" defaultValue="20" className="control-slider" />
+                    <span className="slider-value">20%</span>
+                  </div>
+                </div>
+                <div className="control-item">
+                  <span className="control-label">Priority Mode:</span>
+                  <div className="control-buttons">
+                    <button className="mode-button active">Auto</button>
+                    <button className="mode-button">Charge</button>
+                    <button className="mode-button">Discharge</button>
+                    <button className="mode-button">Hold</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {activeTab === 'grid' && (
+          <div className="grid-tab">
+            <div className="grid-metrics">
+              <div className="metric-card">
+                {renderGauge(
+                  energyData.gridConsumption.current,
+                  energyData.gridConsumption.peak,
+                  'kW',
+                  '#FF5555'
+                )}
+                <h3>Current Grid Consumption</h3>
+              </div>
+              
+              <div className="metric-card">
+                <div className="grid-status">
+                  <h3>Grid Connection Status</h3>
+                  <div className="status-grid">
+                    <div className="status-item">
+                      <span className="status-label">Connection:</span>
+                      <span className="status-value status-active">Active</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Peak Capacity:</span>
+                      <span className="status-value">{energyData.gridConsumption.peak} kW</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Average Load:</span>
+                      <span className="status-value">{energyData.gridConsumption.average} kW</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Current Rate:</span>
+                      <span className="status-value">$0.12/kWh</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Peak Hours:</span>
+                      <span className="status-value">2:00 PM - 7:00 PM</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Grid Stability:</span>
+                      <span className="status-value status-stable">Stable</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="grid-history">
+              <h3>Grid Consumption History</h3>
+              {renderBarChart(
+                energyData.gridConsumption.history,
+                'value',
+                'time',
+                '#FF5555'
+              )}
+            </div>
+            
+            <div className="grid-controls">
+              <h3>Grid Integration Controls</h3>
+              <div className="control-grid">
+                <div className="control-item">
+                  <span className="control-label">Peak Shaving:</span>
+                  <div className="toggle-switch">
+                    <input type="checkbox" id="peak-shaving" className="toggle-input" defaultChecked />
+                    <label htmlFor="peak-shaving" className="toggle-label"></label>
+                  </div>
+                </div>
+                <div className="control-item">
+                  <span className="control-label">Load Balancing:</span>
+                  <div className="toggle-switch">
+                    <input type="checkbox" id="load-balancing" className="toggle-input" defaultChecked />
+                    <label htmlFor="load-balancing" className="toggle-label"></label>
+                  </div>
+                </div>
+                <div className="control-item">
+                  <span className="control-label">Grid Export:</span>
+                  <div className="toggle-switch">
+                    <input type="checkbox" id="grid-export" className="toggle-input" />
+                    <label htmlFor="grid-export" className="toggle-label"></label>
+                  </div>
+                </div>
+                <div className="control-item">
+                  <span className="control-label">Max Grid Draw:</span>
+                  <div className="control-slider-container">
+                    <input type="range" min="100" max="300" defaultValue="250" className="control-slider" />
+                    <span className="slider-value">250 kW</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {activeTab === 'demand' && (
+          <div className="demand-tab">
+            <div className="demand-metrics">
+              <div className="metric-card">
+                {renderGauge(
+                  energyData.chargingDemand.current,
+                  energyData.chargingDemand.byType.reduce((sum, item) => sum + item.count * item.power, 0),
+                  'kW',
+                  '#35F2DB'
+                )}
+                <h3>Current Charging Demand</h3>
+              </div>
+              
+              <div className="metric-card">
+                <div className="charger-status">
+                  <h3>Charger Status</h3>
+                  <div className="status-grid">
+                    <div className="status-item">
+                      <span className="status-label">Active Chargers:</span>
+                      <span className="status-value">{energyData.chargingDemand.activeChargers}/{energyData.chargingDemand.totalChargers}</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Utilization:</span>
+                      <span className="status-value">{Math.round((energyData.chargingDemand.activeChargers / energyData.chargingDemand.totalChargers) * 100)}%</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Average Session:</span>
+                      <span className="status-value">42 minutes</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Queue Length:</span>
+                      <span className="status-value">3 vehicles</span>
+                    </div>
+                    <div className="status-item">
+                      <span className="status-label">Wait Time:</span>
+                      <span className="status-value">15 minutes</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="charger-types">
+              <h3>Charger Types and Usage</h3>
+              <div className="charger-type-grid">
+                {energyData.chargingDemand.byType.map((type, index) => (
+                  <div key={index} className="charger-type-card">
+                    <div className="type-header">
+                      <h4>{type.type}</h4>
+                      <span className="type-power">{type.power} kW</span>
+                    </div>
+                    <div className="type-count">
+                      <span className="count-value">{type.count}</span>
+                      <span className="count-label">Chargers</span>
+                    </div>
+                    <div className="type-usage">
+                      <div className="usage-bar-container">
+                        <div 
+                          className="usage-bar"
+                          style={{ 
+                            width: `${(type.count / energyData.chargingDemand.totalChargers) * 100}%`,
+                            background: `linear-gradient(90deg, #35F2DB, #35F2DBCC)`
+                          }}
+                        ></div>
+                      </div>
+                      <span className="usage-label">
+                        {Math.round((type.count / energyData.chargingDemand.totalChargers) * 100)}% of Total
+                      </span>
+                    </div>
+                    <div className="type-power-share">
+                      <div className="power-bar-container">
+                        <div 
+                          className="power-bar"
+                          style={{ 
+                            width: `${(type.count * type.power / energyData.chargingDemand.byType.reduce((sum, item) => sum + item.count * item.power, 0)) * 100}%`,
+                            background: `linear-gradient(90deg, #00E0FF, #00E0FFCC)`
+                          }}
+                        ></div>
+                      </div>
+                      <span className="power-label">
+                        {Math.round((type.count * type.power / energyData.chargingDemand.byType.reduce((sum, item) => sum + item.count * item.power, 0)) * 100)}% of Power
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <div className="demand-forecast">
+              <h3>Demand Forecast</h3>
+              {renderBarChart(
+                energyData.chargingDemand.forecast,
+                'value',
+                'time',
+                '#35F2DB'
+              )}
+            </div>
+          </div>
+        )}
+        
+        {activeTab === 'optimization' && (
+          <div className="optimization-tab">
+            <div className="optimization-modes">
+              <h3>Optimization Mode Selection</h3>
+              <div className="mode-cards">
+                <div 
+                  className={`mode-card ${optimizationMode === 'balanced' ? 'active' : ''}`}
+                  onClick={() => handleOptimizationChange('balanced')}
+                >
+                  <div className="mode-icon">⚖️</div>
+                  <h4>Balanced</h4>
+                  <p>Optimize for balanced performance across all metrics</p>
+                  <ul className="mode-benefits">
+                    <li>Moderate cost efficiency</li>
+                    <li>Good renewable utilization</li>
+                    <li>Reliable charging availability</li>
+                  </ul>
+                </div>
+                
+                <div 
+                  className={`mode-card ${optimizationMode === 'cost' ? 'active' : ''}`}
+                  onClick={() => handleOptimizationChange('cost')}
+                >
+                  <div className="mode-icon">💰</div>
+                  <h4>Cost Optimization</h4>
+                  <p>Minimize operational costs and maximize revenue</p>
+                  <ul className="mode-benefits">
+                    <li>Reduced grid consumption during peak hours</li>
+                    <li>Strategic battery usage</li>
+                    <li>Dynamic pricing implementation</li>
+                  </ul>
+                </div>
+                
+                <div 
+                  className={`mode-card ${optimizationMode === 'renewable' ? 'active' : ''}`}
+                  onClick={() => handleOptimizationChange('renewable')}
+                >
+                  <div className="mode-icon">🌱</div>
+                  <h4>Renewable Maximization</h4>
+                  <p>Prioritize usage of renewable energy sources</p>
+                  <ul className="mode-benefits">
+                    <li>Highest solar utilization</li>
+                    <li>Reduced carbon footprint</li>
+                    <li>Battery storage optimization</li>
+                  </ul>
+                </div>
+                
+                <div 
+                  className={`mode-card ${optimizationMode === 'demand' ? 'active' : ''}`}
+                  onClick={() => handleOptimizationChange('demand')}
+                >
+                  <div className="mode-icon">⚡</div>
+                  <h4>Demand Response</h4>
+                  <p>Focus on meeting charging demand and reducing wait times</p>
+                  <ul className="mode-benefits">
+                    <li>Maximum charger availability</li>
+                    <li>Reduced wait times</li>
+                    <li>Optimized charging speeds</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            
+            <div className="optimization-results">
+              <h3>Projected Optimization Results</h3>
+              <div className="results-grid">
+                <div className="result-card">
+                  <h4>Daily Operational Cost</h4>
+                  <div className="result-comparison">
+                    <div className="comparison-item">
+                      <span className="comparison-label">Current:</span>
+                      <span className="comparison-value">$480</span>
+                    </div>
+                    <div className="comparison-item">
+                      <span className="comparison-label">Optimized:</span>
+                      <span className="comparison-value optimized">
+                        ${optimizationMode === 'cost' ? 380 : optimizationMode === 'balanced' ? 420 : optimizationMode === 'renewable' ? 450 : 460}
+                      </span>
+                    </div>
+                    <div className="comparison-item">
+                      <span className="comparison-label">Savings:</span>
+                      <span className="comparison-value savings">
+                        ${optimizationMode === 'cost' ? 100 : optimizationMode === 'balanced' ? 60 : optimizationMode === 'renewable' ? 30 : 20}
+                        ({optimizationMode === 'cost' ? 21 : optimizationMode === 'balanced' ? 13 : optimizationMode === 'renewable' ? 6 : 4}%)
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="result-card">
+                  <h4>Renewable Energy Usage</h4>
+                  <div className="result-comparison">
+                    <div className="comparison-item">
+                      <span className="comparison-label">Current:</span>
+                      <span className="comparison-value">42%</span>
+                    </div>
+                    <div className="comparison-item">
+                      <span className="comparison-label">Optimized:</span>
+                      <span className="comparison-value optimized">
+                        {optimizationMode === 'renewable' ? 68 : optimizationMode === 'balanced' ? 55 : optimizationMode === 'cost' ? 48 : 45}%
+                      </span>
+                    </div>
+                    <div className="comparison-item">
+                      <span className="comparison-label">Improvement:</span>
+                      <span className="comparison-value savings">
+                        +{optimizationMode === 'renewable' ? 26 : optimizationMode === 'balanced' ? 13 : optimizationMode === 'cost' ? 6 : 3}%
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="result-card">
+                  <h4>Average Wait Time</h4>
+                  <div className="result-comparison">
+                    <div className="comparison-item">
+                      <span className="comparison-label">Current:</span>
+                      <span className="comparison-value">15 min</span>
+                    </div>
+                    <div className="comparison-item">
+                      <span className="comparison-label">Optimized:</span>
+                      <span className="comparison-value optimized">
+                        {optimizationMode === 'demand' ? 5 : optimizationMode === 'balanced' ? 8 : optimizationMode === 'cost' ? 12 : 10} min
+                      </span>
+                    </div>
+                    <div className="comparison-item">
+                      <span className="comparison-label">Reduction:</span>
+                      <span className="comparison-value savings">
+                        -{optimizationMode === 'demand' ? 10 : optimizationMode === 'balanced' ? 7 : optimizationMode === 'cost' ? 3 : 5} min
+                        ({optimizationMode === 'demand' ? 67 : optimizationMode === 'balanced' ? 47 : optimizationMode === 'cost' ? 20 : 33}%)
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="result-card">
+                  <h4>Carbon Footprint</h4>
+                  <div className="result-comparison">
+                    <div className="comparison-item">
+                      <span className="comparison-label">Current:</span>
+                      <span className="comparison-value">320 kg CO₂/day</span>
+                    </div>
+                    <div className="comparison-item">
+                      <span className="comparison-label">Optimized:</span>
+                      <span className="comparison-value optimized">
+                        {optimizationMode === 'renewable' ? 180 : optimizationMode === 'balanced' ? 240 : optimizationMode === 'cost' ? 280 : 300} kg CO₂/day
+                      </span>
+                    </div>
+                    <div className="comparison-item">
+                      <span className="comparison-label">Reduction:</span>
+                      <span className="comparison-value savings">
+                        -{optimizationMode === 'renewable' ? 140 : optimizationMode === 'balanced' ? 80 : optimizationMode === 'cost' ? 40 : 20} kg
+                        ({optimizationMode === 'renewable' ? 44 : optimizationMode === 'balanced' ? 25 : optimizationMode === 'cost' ? 13 : 6}%)
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="optimization-actions">
+              <button className="action-button apply">Apply Optimization Settings</button>
+              <button className="action-button schedule">Schedule Optimization</button>
+              <button className="action-button report">Generate Efficiency Report</button>
+            </div>
+          </div>
+        )}
+      </main>
+      
+      <footer className="simulation-footer">
+        <div className="footer-info">
+          <span>Unity Fleet Energy Simulation</span>
+          <span>Powered by Atlas Intelligence</span>
+        </div>
+        <div className="footer-actions">
+          <button className="footer-button">Export Data</button>
+          <button className="footer-button">Save Scenario</button>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default EnergySimulation;

MobileApp.css

@@ -0,0 +1,921 @@
+/* Mobile App Styles */
+.mobile-app {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  max-width: 480px;
+  height: 100vh;
+  margin: 0 auto;
+  background-color: #0B0B0F;
+  color: #ffffff;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* Loading Screen */
+.mobile-app.loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loading-logo {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.loading-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.loading-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  border: 2px solid #00E0FF;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+/* Header */
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background-color: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.app-header h1 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 1px;
+}
+
+.user-profile {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid #00E0FF;
+}
+
+.user-profile img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Main Content */
+.app-content {
+  padding: 16px;
+  overflow-y: auto;
+  height: calc(100vh - 130px);
+}
+
+/* Home Screen */
+.welcome-card {
+  background: linear-gradient(135deg, rgba(0, 224, 255, 0.1), rgba(53, 242, 219, 0.05));
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  backdrop-filter: blur(10px);
+}
+
+.welcome-card h2 {
+  margin: 0 0 4px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.welcome-card p {
+  margin: 0 0 16px 0;
+  opacity: 0.8;
+  font-size: 14px;
+}
+
+.credit-display {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.credit-amount {
+  font-size: 32px;
+  font-weight: 700;
+  color: #00E0FF;
+}
+
+.credit-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.action-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 12px;
+  padding: 12px 8px;
+  transition: all 0.2s ease;
+}
+
+.action-button:hover {
+  background-color: rgba(0, 224, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.action-button .icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.action-button span {
+  font-size: 12px;
+}
+
+.upcoming-reservations, .nearby-hubs {
+  margin-bottom: 24px;
+}
+
+.upcoming-reservations h3, .nearby-hubs h3 {
+  font-size: 18px;
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+
+.reservation-card {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.reservation-vehicle {
+  font-weight: 600;
+  margin-right: 12px;
+  min-width: 100px;
+}
+
+.reservation-details {
+  flex: 1;
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.reservation-action {
+  background-color: rgba(0, 224, 255, 0.2);
+  border: none;
+  border-radius: 8px;
+  color: #00E0FF;
+  padding: 8px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.reservation-action:hover {
+  background-color: rgba(0, 224, 255, 0.3);
+}
+
+.no-reservations {
+  text-align: center;
+  opacity: 0.6;
+  padding: 20px;
+}
+
+.hub-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.hub-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.hub-info h4 {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+}
+
+.hub-info p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.availability {
+  font-size: 14px;
+}
+
+.available {
+  color: #35F2DB;
+}
+
+.unavailable {
+  color: #ff5555;
+}
+
+.hub-action {
+  background-color: rgba(0, 224, 255, 0.2);
+  border: none;
+  border-radius: 8px;
+  color: #00E0FF;
+  padding: 8px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.hub-action:hover {
+  background-color: rgba(0, 224, 255, 0.3);
+}
+
+/* Vehicles Screen */
+.vehicles-screen h2 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 24px;
+}
+
+.vehicle-filters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+}
+
+.filter-button {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  color: white;
+  padding: 8px 16px;
+  font-size: 14px;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+}
+
+.filter-button.active {
+  background-color: rgba(0, 224, 255, 0.2);
+  border-color: #00E0FF;
+  color: #00E0FF;
+}
+
+.vehicle-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.vehicle-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+}
+
+.vehicle-card:hover {
+  transform: translateY(-4px);
+}
+
+.vehicle-card.unavailable {
+  opacity: 0.7;
+}
+
+.vehicle-image {
+  height: 160px;
+  position: relative;
+  overflow: hidden;
+}
+
+.vehicle-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.unavailable-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-weight: 600;
+}
+
+.vehicle-info {
+  padding: 16px;
+}
+
+.vehicle-info h3 {
+  margin: 0 0 4px 0;
+  font-size: 18px;
+}
+
+.vehicle-type, .vehicle-range {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.vehicle-reserve {
+  width: 100%;
+  padding: 12px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border: none;
+  color: #0B0B0F;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.vehicle-reserve:hover:not(:disabled) {
+  background: linear-gradient(90deg, #35F2DB, #00E0FF);
+}
+
+.vehicle-reserve:disabled {
+  background: #333;
+  color: #777;
+  cursor: not-allowed;
+}
+
+/* Subscriptions Screen */
+.subscriptions-screen h2 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  font-size: 24px;
+}
+
+.current-plan {
+  margin-bottom: 24px;
+  font-size: 16px;
+  opacity: 0.8;
+}
+
+.subscription-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.subscription-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+}
+
+.subscription-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.subscription-card.current {
+  border: 1px solid #00E0FF;
+  background: linear-gradient(135deg, rgba(0, 224, 255, 0.1), rgba(53, 242, 219, 0.05));
+}
+
+.subscription-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.subscription-header h3 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.subscription-price {
+  font-size: 24px;
+  font-weight: 700;
+  color: #00E0FF;
+}
+
+.subscription-price span {
+  font-size: 14px;
+  opacity: 0.7;
+  font-weight: 400;
+}
+
+.subscription-desc {
+  margin-bottom: 16px;
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.subscription-features {
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+
+.subscription-features li {
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.subscription-action {
+  width: 100%;
+  padding: 12px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border: none;
+  border-radius: 8px;
+  color: #0B0B0F;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.subscription-action:hover:not(.current) {
+  background: linear-gradient(90deg, #35F2DB, #00E0FF);
+}
+
+.subscription-action.current {
+  background: rgba(0, 224, 255, 0.2);
+  color: #00E0FF;
+  cursor: default;
+}
+
+/* Charging Screen */
+.charging-screen h2 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 24px;
+}
+
+.map-container {
+  height: 200px;
+  border-radius: 16px;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.charging-map {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.map-markers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.map-marker {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #00E0FF;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.map-marker[data-available="0"] {
+  background-color: #ff5555;
+}
+
+.marker-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  background-color: rgba(0, 224, 255, 0.4);
+  animation: markerPulse 1.5s infinite;
+}
+
+@keyframes markerPulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+  70% {
+    transform: scale(2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.marker-label {
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  font-size: 10px;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.charging-list h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+}
+
+.charging-location-card {
+  display: flex;
+  justify-content: space-between;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.location-info {
+  flex: 1;
+}
+
+.location-info h4 {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+}
+
+.location-info p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.amenities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.amenity-tag {
+  background-color: rgba(0, 224, 255, 0.1);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 12px;
+  color: #00E0FF;
+}
+
+.location-status {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.availability-indicator {
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.availability-indicator.available {
+  color: #35F2DB;
+}
+
+.availability-indicator.full {
+  color: #ff5555;
+}
+
+.location-action {
+  background-color: rgba(0, 224, 255, 0.2);
+  border: none;
+  border-radius: 8px;
+  color: #00E0FF;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.location-action:hover {
+  background-color: rgba(0, 224, 255, 0.3);
+}
+
+/* ChainLink Screen */
+.chainlink-screen h2 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 24px;
+}
+
+.token-balance {
+  background: linear-gradient(135deg, rgba(0, 224, 255, 0.1), rgba(53, 242, 219, 0.05));
+  border-radius: 16px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 16px;
+  border: 1px solid rgba(0, 224, 255, 0.2);
+}
+
+.token-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+  color: #00E0FF;
+}
+
+.token-amount {
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.token-label {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.token-value {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.value-label {
+  font-size: 14px;
+  opacity: 0.8;
+  margin-bottom: 4px;
+}
+
+.value-amount {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.value-change {
+  font-size: 14px;
+}
+
+.value-change.positive {
+  color: #35F2DB;
+}
+
+.value-change.negative {
+  color: #ff5555;
+}
+
+.token-categories h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+}
+
+.category-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.category-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.category-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 20px;
+}
+
+.category-name {
+  font-size: 12px;
+  margin-bottom: 4px;
+  line-height: 1.2;
+}
+
+.category-amount {
+  font-size: 14px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.token-actions {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.token-action-button {
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  color: #00E0FF;
+  padding: 10px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.token-action-button:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+.token-history h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 18px;
+}
+
+.transaction-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.transaction-item {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.transaction-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 12px;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.transaction-icon.purchase {
+  background-color: rgba(0, 224, 255, 0.2);
+  color: #00E0FF;
+}
+
+.transaction-icon.reward {
+  background-color: rgba(255, 215, 0, 0.2);
+  color: gold;
+}
+
+.transaction-icon.dividend {
+  background-color: rgba(50, 205, 50, 0.2);
+  color: limegreen;
+}
+
+.transaction-details {
+  flex: 1;
+}
+
+.transaction-title {
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+
+.transaction-date {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.transaction-amount {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+/* Navigation Footer */
+.app-navigation {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  background-color: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px 0;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.nav-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  padding: 8px 0;
+  transition: all 0.2s ease;
+}
+
+.nav-button.active {
+  color: #00E0FF;
+}
+
+.nav-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.nav-label {
+  font-size: 10px;
+}
+
+/* Responsive Adjustments */
+@media (min-width: 400px) {
+  .vehicle-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 360px) {
+  .category-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .token-actions {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .quick-actions {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

MobileApp.jsx

@@ -0,0 +1,360 @@
+import React, { useState, useEffect } from 'react';
+import './MobileApp.css';
+
+// Mock data for demonstration purposes
+const mockVehicles = [
+  { id: 1, name: 'Tesla Model 3', type: 'sedan', range: '310 miles', available: true, image: '/images/tesla_model3.png' },
+  { id: 2, name: 'Tesla Model Y', type: 'suv', range: '330 miles', available: true, image: '/images/tesla_modely.png' },
+  { id: 3, name: 'Tesla Cybertruck', type: 'truck', range: '500 miles', available: false, image: '/images/cybertruck.png' },
+  { id: 4, name: 'GMC Hummer EV', type: 'truck', range: '350 miles', available: true, image: '/images/hummer_ev.png' },
+];
+
+const mockSubscriptions = [
+  { id: 1, name: 'FlexRide', price: 500, description: 'Basic access to Unity Fleet vehicles', features: ['24/7 vehicle access', 'Basic charging', 'Standard support'] },
+  { id: 2, name: 'Take-Home', price: 1200, description: 'Dedicated vehicle for personal use', features: ['Dedicated vehicle', 'Home charging setup', 'Premium support', 'Insurance included'] },
+  { id: 3, name: 'All-Access', price: 2000, description: 'Complete mobility solution', features: ['Multiple vehicle types', 'Priority charging', 'Concierge service', 'VIP lounge access', 'Unlimited miles'] },
+];
+
+const mockChargingLocations = [
+  { id: 1, name: 'The Link - Downtown', address: '123 Main St, Springfield, IL', available: 5, total: 8, amenities: ['Lounge', 'Coffee Bar', 'WiFi'] },
+  { id: 2, name: 'The Link - Westside', address: '456 Oak Ave, Springfield, IL', available: 2, total: 6, amenities: ['Lounge', 'Retail', 'WiFi'] },
+  { id: 3, name: 'The Link - University', address: '789 Campus Dr, Urbana, IL', available: 8, total: 12, amenities: ['Lounge', 'Restaurant', 'WiFi', 'Conference Room'] },
+];
+
+function MobileApp() {
+  const [activeTab, setActiveTab] = useState('home');
+  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useState({
+    name: 'Matthew Lamb',
+    subscription: 'All-Access',
+    credits: 2500,
+    reservations: [
+      { id: 101, vehicle: 'Tesla Model 3', date: '2025-04-08', time: '09:00 AM', location: 'The Link - Downtown' }
+    ]
+  });
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1500);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="mobile-app loading">
+        <div className="loading-logo">
+          <img src="/images/unity_fleet_logo.png" alt="Unity Fleet" />
+          <div className="loading-pulse"></div>
+        </div>
+        <p>Connecting to The Link...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mobile-app">
+      <header className="app-header">
+        <h1>THE LINK</h1>
+        <div className="user-profile">
+          <img src="/images/profile_avatar.png" alt="Profile" />
+        </div>
+      </header>
+
+      <main className="app-content">
+        {activeTab === 'home' && (
+          <div className="home-screen">
+            <div className="welcome-card">
+              <h2>Welcome back, {user.name}</h2>
+              <p>{user.subscription} Member</p>
+              <div className="credit-display">
+                <span className="credit-amount">${user.credits}</span>
+                <span className="credit-label">Available Credits</span>
+              </div>
+            </div>
+
+            <div className="quick-actions">
+              <button className="action-button">
+                <span className="icon">🚗</span>
+                <span>Reserve</span>
+              </button>
+              <button className="action-button">
+                <span className="icon">⚡</span>
+                <span>Charge</span>
+              </button>
+              <button className="action-button">
+                <span className="icon">🔑</span>
+                <span>Unlock</span>
+              </button>
+              <button className="action-button">
+                <span className="icon">📍</span>
+                <span>Locate</span>
+              </button>
+            </div>
+
+            <div className="upcoming-reservations">
+              <h3>Upcoming Reservations</h3>
+              {user.reservations.length > 0 ? (
+                user.reservations.map(reservation => (
+                  <div key={reservation.id} className="reservation-card">
+                    <div className="reservation-vehicle">{reservation.vehicle}</div>
+                    <div className="reservation-details">
+                      <div>{reservation.date} at {reservation.time}</div>
+                      <div>{reservation.location}</div>
+                    </div>
+                    <button className="reservation-action">Manage</button>
+                  </div>
+                ))
+              ) : (
+                <p className="no-reservations">No upcoming reservations</p>
+              )}
+            </div>
+
+            <div className="nearby-hubs">
+              <h3>Nearby Charging Hubs</h3>
+              <div className="hub-list">
+                {mockChargingLocations.map(hub => (
+                  <div key={hub.id} className="hub-card">
+                    <div className="hub-info">
+                      <h4>{hub.name}</h4>
+                      <p>{hub.address}</p>
+                      <div className="availability">
+                        <span className={hub.available > 0 ? "available" : "unavailable"}>
+                          {hub.available}/{hub.total} Available
+                        </span>
+                      </div>
+                    </div>
+                    <button className="hub-action">Navigate</button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'vehicles' && (
+          <div className="vehicles-screen">
+            <h2>Available Vehicles</h2>
+            <div className="vehicle-filters">
+              <button className="filter-button active">All</button>
+              <button className="filter-button">Sedan</button>
+              <button className="filter-button">SUV</button>
+              <button className="filter-button">Truck</button>
+            </div>
+            <div className="vehicle-list">
+              {mockVehicles.map(vehicle => (
+                <div key={vehicle.id} className={`vehicle-card ${!vehicle.available ? 'unavailable' : ''}`}>
+                  <div className="vehicle-image">
+                    <img src={vehicle.image} alt={vehicle.name} />
+                    {!vehicle.available && <div className="unavailable-overlay">Reserved</div>}
+                  </div>
+                  <div className="vehicle-info">
+                    <h3>{vehicle.name}</h3>
+                    <p className="vehicle-type">{vehicle.type}</p>
+                    <p className="vehicle-range">Range: {vehicle.range}</p>
+                  </div>
+                  <button className="vehicle-reserve" disabled={!vehicle.available}>
+                    {vehicle.available ? 'Reserve' : 'Unavailable'}
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'subscriptions' && (
+          <div className="subscriptions-screen">
+            <h2>Subscription Plans</h2>
+            <p className="current-plan">Current Plan: <strong>{user.subscription}</strong></p>
+            
+            <div className="subscription-list">
+              {mockSubscriptions.map(sub => (
+                <div key={sub.id} className={`subscription-card ${sub.name === user.subscription ? 'current' : ''}`}>
+                  <div className="subscription-header">
+                    <h3>{sub.name}</h3>
+                    <div className="subscription-price">${sub.price}<span>/mo</span></div>
+                  </div>
+                  <p className="subscription-desc">{sub.description}</p>
+                  <ul className="subscription-features">
+                    {sub.features.map((feature, index) => (
+                      <li key={index}>{feature}</li>
+                    ))}
+                  </ul>
+                  <button className={`subscription-action ${sub.name === user.subscription ? 'current' : ''}`}>
+                    {sub.name === user.subscription ? 'Current Plan' : 'Switch Plan'}
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'charging' && (
+          <div className="charging-screen">
+            <h2>Charging Lounges</h2>
+            
+            <div className="map-container">
+              <img src="/images/charging_map.png" alt="Charging Map" className="charging-map" />
+              <div className="map-markers">
+                {mockChargingLocations.map(location => (
+                  <div 
+                    key={location.id} 
+                    className="map-marker" 
+                    style={{ 
+                      top: `${20 + location.id * 15}%`, 
+                      left: `${20 + location.id * 20}%` 
+                    }}
+                    data-available={location.available}
+                  >
+                    <div className="marker-pulse"></div>
+                    <div className="marker-label">{location.name}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <div className="charging-list">
+              <h3>Charging Locations</h3>
+              {mockChargingLocations.map(location => (
+                <div key={location.id} className="charging-location-card">
+                  <div className="location-info">
+                    <h4>{location.name}</h4>
+                    <p>{location.address}</p>
+                    <div className="amenities">
+                      {location.amenities.map((amenity, index) => (
+                        <span key={index} className="amenity-tag">{amenity}</span>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="location-status">
+                    <div className={`availability-indicator ${location.available > 0 ? 'available' : 'full'}`}>
+                      {location.available > 0 ? `${location.available} Available` : 'Full'}
+                    </div>
+                    <button className="location-action">Details</button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'chainlink' && (
+          <div className="chainlink-screen">
+            <h2>ChainLink Tokenization</h2>
+            
+            <div className="token-balance">
+              <div className="token-icon">⬡</div>
+              <div className="token-amount">125.5</div>
+              <div className="token-label">LINK Tokens</div>
+            </div>
+            
+            <div className="token-value">
+              <div className="value-label">Estimated Value</div>
+              <div className="value-amount">$12,550</div>
+              <div className="value-change positive">+5.2% this week</div>
+            </div>
+            
+            <div className="token-categories">
+              <h3>Your Token Portfolio</h3>
+              <div className="category-cards">
+                <div className="category-card">
+                  <div className="category-icon" style={{backgroundColor: '#00E0FF'}}>⚡</div>
+                  <div className="category-name">Charging Infrastructure</div>
+                  <div className="category-amount">75.0 LINK</div>
+                </div>
+                <div className="category-card">
+                  <div className="category-icon" style={{backgroundColor: '#35F2DB'}}>🚗</div>
+                  <div className="category-name">Fleet Vehicles</div>
+                  <div className="category-amount">32.5 LINK</div>
+                </div>
+                <div className="category-card">
+                  <div className="category-icon" style={{backgroundColor: '#4A7AFF'}}>🔋</div>
+                  <div className="category-name">Energy Systems</div>
+                  <div className="category-amount">18.0 LINK</div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="token-actions">
+              <button className="token-action-button">Buy Tokens</button>
+              <button className="token-action-button">Sell Tokens</button>
+              <button className="token-action-button">View Benefits</button>
+            </div>
+            
+            <div className="token-history">
+              <h3>Recent Transactions</h3>
+              <div className="transaction-list">
+                <div className="transaction-item">
+                  <div className="transaction-icon purchase">+</div>
+                  <div className="transaction-details">
+                    <div className="transaction-title">Purchased 10.0 LINK</div>
+                    <div className="transaction-date">Apr 5, 2025</div>
+                  </div>
+                  <div className="transaction-amount">$1,000</div>
+                </div>
+                <div className="transaction-item">
+                  <div className="transaction-icon reward">★</div>
+                  <div className="transaction-details">
+                    <div className="transaction-title">Loyalty Reward</div>
+                    <div className="transaction-date">Apr 1, 2025</div>
+                  </div>
+                  <div className="transaction-amount">+2.5 LINK</div>
+                </div>
+                <div className="transaction-item">
+                  <div className="transaction-icon dividend">$</div>
+                  <div className="transaction-details">
+                    <div className="transaction-title">Quarterly Dividend</div>
+                    <div className="transaction-date">Mar 31, 2025</div>
+                  </div>
+                  <div className="transaction-amount">$325</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+
+      <footer className="app-navigation">
+        <button 
+          className={`nav-button ${activeTab === 'home' ? 'active' : ''}`}
+          onClick={() => setActiveTab('home')}
+        >
+          <span className="nav-icon">🏠</span>
+          <span className="nav-label">Home</span>
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'vehicles' ? 'active' : ''}`}
+          onClick={() => setActiveTab('vehicles')}
+        >
+          <span className="nav-icon">🚗</span>
+          <span className="nav-label">Vehicles</span>
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'subscriptions' ? 'active' : ''}`}
+          onClick={() => setActiveTab('subscriptions')}
+        >
+          <span className="nav-icon">📱</span>
+          <span className="nav-label">Plans</span>
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'charging' ? 'active' : ''}`}
+          onClick={() => setActiveTab('charging')}
+        >
+          <span className="nav-icon">⚡</span>
+          <span className="nav-label">Charging</span>
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'chainlink' ? 'active' : ''}`}
+          onClick={() => setActiveTab('chainlink')}
+        >
+          <span className="nav-icon">⬡</span>
+          <span className="nav-label">ChainLink</span>
+        </button>
+      </footer>
+    </div>
+  );
+}
+
+export default MobileApp;

SubscriptionPortal.css

@@ -0,0 +1,1498 @@
+/* Subscription Portal Styles */
+.subscription-portal {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  background-color: #0B0B0F;
+  color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+/* Loading Screen */
+.subscription-portal.loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loading-logo {
+  width: 150px;
+  height: 150px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.loading-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.loading-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  border: 2px solid #00E0FF;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+/* Header */
+.portal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.portal-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.portal-title h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 1px;
+}
+
+.portal-subtitle {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.profile-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid #00E0FF;
+}
+
+.profile-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.profile-name {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.profile-plan {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+/* Navigation */
+.portal-navigation {
+  display: flex;
+  gap: 2px;
+  background-color: rgba(20, 20, 30, 0.5);
+  padding: 0 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.portal-navigation::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-button {
+  padding: 16px 20px;
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+}
+
+.nav-button.active {
+  color: #00E0FF;
+}
+
+.nav-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border-radius: 3px 3px 0 0;
+}
+
+/* Main Content */
+.portal-content {
+  padding: 20px;
+  min-height: calc(100vh - 200px);
+}
+
+/* Plans Tab */
+.plans-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.current-plan-banner {
+  background: linear-gradient(135deg, rgba(0, 224, 255, 0.1), rgba(53, 242, 219, 0.05));
+  border-radius: 16px;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.banner-content h3 {
+  margin: 0 0 8px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.banner-content p {
+  margin: 0;
+  opacity: 0.7;
+  font-size: 14px;
+}
+
+.banner-button {
+  background-color: rgba(0, 224, 255, 0.2);
+  border: 1px solid rgba(0, 224, 255, 0.3);
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #00E0FF;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.banner-button:hover {
+  background-color: rgba(0, 224, 255, 0.3);
+}
+
+/* Billing Toggle */
+.billing-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.billing-option {
+  font-size: 16px;
+  opacity: 0.7;
+  position: relative;
+}
+
+.billing-option.active {
+  opacity: 1;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+.discount-badge {
+  position: absolute;
+  top: -15px;
+  right: -30px;
+  background-color: rgba(255, 193, 7, 0.2);
+  color: #FFC107;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-weight: 600;
+}
+
+/* Toggle Switch */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  transition: .4s;
+  border-radius: 24px;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .toggle-slider {
+  background-color: rgba(0, 224, 255, 0.5);
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(26px);
+  background-color: #00E0FF;
+}
+
+/* Subscription Tiers */
+.subscription-tiers {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.tier-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.tier-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.tier-card.selected {
+  border-color: #00E0FF;
+  box-shadow: 0 0 15px rgba(0, 224, 255, 0.3);
+}
+
+.tier-card.popular {
+  border-color: #FFC107;
+}
+
+.popular-badge {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background-color: rgba(255, 193, 7, 0.2);
+  color: #FFC107;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 20px;
+  font-weight: 600;
+}
+
+.tier-header {
+  padding: 20px;
+  text-align: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tier-name {
+  margin: 0 0 10px 0;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.tier-price {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  margin-bottom: 5px;
+}
+
+.price-amount {
+  font-size: 36px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.price-period {
+  font-size: 16px;
+  opacity: 0.7;
+  margin-left: 5px;
+}
+
+.annual-savings {
+  font-size: 14px;
+  color: #FFC107;
+  margin-top: 5px;
+}
+
+.tier-description {
+  padding: 20px;
+  text-align: center;
+  font-size: 14px;
+  opacity: 0.8;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tier-features {
+  padding: 20px;
+  list-style-type: none;
+  margin: 0;
+}
+
+.tier-features li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.tier-features li:last-child {
+  margin-bottom: 0;
+}
+
+.feature-icon {
+  margin-right: 10px;
+  font-size: 16px;
+  min-width: 20px;
+  text-align: center;
+}
+
+.tier-features li.included .feature-icon {
+  color: #35F2DB;
+}
+
+.tier-features li.excluded {
+  opacity: 0.5;
+}
+
+.feature-details {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.tier-action {
+  padding: 20px;
+  text-align: center;
+}
+
+.select-plan-button, .current-plan-button {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+}
+
+.select-plan-button {
+  color: white;
+}
+
+.select-plan-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.current-plan-button {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  cursor: default;
+}
+
+/* Add-Ons Section */
+.add-ons-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+  margin-bottom: 30px;
+}
+
+.add-ons-section h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.add-ons-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 15px;
+}
+
+.add-on-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-on-card:hover {
+  background-color: rgba(0, 224, 255, 0.05);
+}
+
+.add-on-card.selected {
+  border-color: #00E0FF;
+  background-color: rgba(0, 224, 255, 0.1);
+}
+
+.add-on-checkbox {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.add-on-card.selected .add-on-checkbox {
+  border-color: #00E0FF;
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+.add-on-card.selected .checkbox-inner {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  background-color: #00E0FF;
+}
+
+.add-on-details {
+  flex: 1;
+}
+
+.add-on-name {
+  margin: 0 0 5px 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.add-on-description {
+  margin: 0;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.add-on-price {
+  font-size: 14px;
+  font-weight: 600;
+  color: #00E0FF;
+}
+
+/* Subscription Summary */
+.subscription-summary {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.subscription-summary h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.summary-details {
+  margin-bottom: 20px;
+}
+
+.summary-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.summary-total {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 0;
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 10px;
+}
+
+.total-price {
+  color: #00E0FF;
+}
+
+.summary-action {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.subscribe-button {
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border: none;
+  border-radius: 8px;
+  padding: 12px 30px;
+  color: #0B0B0F;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.subscribe-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0, 224, 255, 0.3);
+}
+
+.subscribe-button:disabled {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* Confirmation Modal */
+.confirmation-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+}
+
+.modal-content {
+  background-color: #0B0B0F;
+  border-radius: 16px;
+  padding: 30px;
+  border: 1px solid rgba(0, 224, 255, 0.3);
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  animation: modalFadeIn 0.3s ease;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modal-content h3 {
+  margin: 0 0 20px 0;
+  font-size: 24px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.confirmation-details {
+  margin-bottom: 20px;
+}
+
+.confirmation-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.confirmation-item.total {
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 10px;
+}
+
+.item-value {
+  font-weight: 600;
+}
+
+.payment-method {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.payment-label {
+  opacity: 0.7;
+  margin-right: 10px;
+}
+
+.payment-value {
+  flex: 1;
+  font-weight: 600;
+}
+
+.change-payment {
+  background: none;
+  border: none;
+  color: #00E0FF;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.confirmation-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 15px;
+}
+
+.cancel-button, .confirm-button {
+  flex: 1;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cancel-button {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+.confirm-button {
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  border: none;
+  color: #0B0B0F;
+}
+
+.cancel-button:hover, .confirm-button:hover {
+  transform: translateY(-2px);
+}
+
+/* Account Tab */
+.account-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.account-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.account-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.account-card h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.profile-details {
+  margin-bottom: 20px;
+}
+
+.profile-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.item-label {
+  opacity: 0.7;
+}
+
+.item-value {
+  font-weight: 600;
+}
+
+.edit-profile-button {
+  width: 100%;
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  color: #00E0FF;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.edit-profile-button:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+.balance-items {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+}
+
+.balance-item {
+  text-align: center;
+}
+
+.balance-icon {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.balance-amount {
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.balance-label {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.balance-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.balance-action {
+  flex: 1;
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  color: #00E0FF;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.balance-action:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+.payment-details {
+  margin-bottom: 20px;
+}
+
+.payment-method-item {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 20px;
+}
+
+.card-icon {
+  font-size: 24px;
+  margin-right: 15px;
+}
+
+.card-details {
+  flex: 1;
+}
+
+.card-type {
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.billing-date {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.edit-payment-button {
+  background: none;
+  border: none;
+  color: #00E0FF;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.payment-history h4 {
+  margin: 0 0 15px 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.payment-history-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 14px;
+}
+
+.payment-date {
+  width: 100px;
+}
+
+.payment-description {
+  flex: 1;
+  padding: 0 15px;
+}
+
+.payment-amount {
+  font-weight: 600;
+}
+
+.view-all-button {
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-top: 15px;
+}
+
+.view-all-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.preferences-list {
+  margin-bottom: 20px;
+}
+
+.preference-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.preference-label {
+  font-size: 14px;
+}
+
+.save-preferences-button {
+  width: 100%;
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  color: #00E0FF;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.save-preferences-button:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+/* Usage Tab */
+.usage-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.usage-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.usage-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.usage-card h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.usage-chart {
+  height: 200px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.chart-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.bar-chart {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+
+.chart-bar {
+  width: 40px;
+  background: linear-gradient(180deg, #00E0FF, #35F2DB);
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  transition: height 0.5s ease;
+}
+
+.chart-bar.current {
+  background: linear-gradient(180deg, #FFC107, #FFD54F);
+}
+
+.bar-label {
+  position: absolute;
+  bottom: -25px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.usage-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 15px;
+}
+
+.summary-item {
+  text-align: center;
+}
+
+.summary-label {
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 5px;
+}
+
+.summary-value {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.token-balance {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.token-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+}
+
+.token-amount {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.token-label {
+  font-size: 16px;
+  opacity: 0.7;
+}
+
+.token-details {
+  margin-bottom: 20px;
+}
+
+.token-detail {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.detail-label {
+  opacity: 0.7;
+}
+
+.detail-value {
+  font-weight: 600;
+}
+
+.token-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.token-action {
+  flex: 1;
+  background-color: rgba(0, 224, 255, 0.1);
+  border: 1px solid rgba(0, 224, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  color: #00E0FF;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.token-action:hover {
+  background-color: rgba(0, 224, 255, 0.2);
+}
+
+.usage-history-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.usage-history-section h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.activity-list {
+  margin-bottom: 20px;
+}
+
+.activity-item {
+  display: flex;
+  padding: 15px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.activity-date {
+  width: 120px;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.activity-details {
+  flex: 1;
+}
+
+.activity-type {
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.activity-vehicle, .activity-location {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.activity-cost {
+  text-align: right;
+  min-width: 100px;
+}
+
+.credit-cost {
+  color: #FF5555;
+  font-weight: 600;
+}
+
+.token-cost {
+  color: #FFC107;
+  font-weight: 600;
+}
+
+.view-all-activity {
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.view-all-activity:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.usage-insights {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.usage-insights h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.insights-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.insight-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.insight-icon {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.insight-title {
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 10px;
+}
+
+.insight-value {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  background: linear-gradient(90deg, #00E0FF, #35F2DB);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.insight-detail {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+/* Compare Tab */
+.compare-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.feature-comparison {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.feature-comparison h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.comparison-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.comparison-header {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 15px;
+  border-radius: 8px 8px 0 0;
+  font-weight: 600;
+}
+
+.comparison-row {
+  display: flex;
+  padding: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.comparison-row:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.feature-name {
+  width: 200px;
+  flex-shrink: 0;
+}
+
+.tier-column {
+  flex: 1;
+  min-width: 120px;
+  text-align: center;
+}
+
+.feature-included {
+  color: #35F2DB;
+}
+
+.check-icon {
+  margin-right: 5px;
+}
+
+.feature-details {
+  font-size: 12px;
+  opacity: 0.7;
+  display: block;
+}
+
+.feature-excluded {
+  opacity: 0.5;
+}
+
+.plan-benefits {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.plan-benefits h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.benefits-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.benefit-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.benefit-icon {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.benefit-card h4 {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.benefit-card p {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 1.5;
+}
+
+.faq-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(0, 224, 255, 0.1);
+}
+
+.faq-section h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.faq-item {
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 15px;
+}
+
+.faq-item:last-child {
+  margin-bottom: 0;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.faq-question {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: #00E0FF;
+}
+
+.faq-answer {
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 1.5;
+}
+
+/* Footer */
+.portal-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(20, 20, 30, 0.8);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 30px;
+}
+
+.footer-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.footer-info span {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.footer-links {
+  display: flex;
+  gap: 20px;
+}
+
+.footer-link {
+  font-size: 12px;
+  opacity: 0.7;
+  text-decoration: none;
+  color: white;
+  transition: all 0.2s ease;
+}
+
+.footer-link:hover {
+  opacity: 1;
+  color: #00E0FF;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .portal-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+  
+  .current-plan-banner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .subscription-tiers {
+    grid-template-columns: 1fr;
+  }
+  
+  .add-ons-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .confirmation-actions {
+    flex-direction: column;
+  }
+  
+  .account-overview {
+    grid-template-columns: 1fr;
+  }
+  
+  .usage-overview {
+    grid-template-columns: 1fr;
+  }
+  
+  .insights-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .benefits-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .portal-footer {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .footer-links {
+    width: 100%;
+    justify-content: space-between;
+  }
+}

SubscriptionPortal.jsx

@@ -0,0 +1,771 @@
+import React, { useState, useEffect } from 'react';
+import './SubscriptionPortal.css';
+
+// Mock data for demonstration purposes
+const mockSubscriptionData = {
+  tiers: [
+    {
+      id: 1,
+      name: "FlexRide",
+      price: 499,
+      description: "Basic access to Unity Fleet vehicles with pay-per-use model",
+      features: [
+        { name: "24/7 Vehicle Access", included: true },
+        { name: "Basic Charging Access", included: true },
+        { name: "Vehicle Variety", included: true, details: "Sedans & Compact SUVs" },
+        { name: "Monthly Credits", included: true, details: "500 credits" },
+        { name: "Reservation Priority", included: false },
+        { name: "Premium Charging", included: false },
+        { name: "Lounge Access", included: false },
+        { name: "Home Charging Setup", included: false },
+        { name: "Dedicated Vehicle", included: false },
+        { name: "ChainLink Tokens", included: true, details: "5 tokens/month" }
+      ],
+      popular: false,
+      color: "#00E0FF"
+    },
+    {
+      id: 2,
+      name: "Take-Home",
+      price: 1299,
+      description: "Dedicated vehicle for personal use with enhanced benefits",
+      features: [
+        { name: "24/7 Vehicle Access", included: true },
+        { name: "Basic Charging Access", included: true },
+        { name: "Vehicle Variety", included: true, details: "All Vehicle Types" },
+        { name: "Monthly Credits", included: true, details: "1500 credits" },
+        { name: "Reservation Priority", included: true },
+        { name: "Premium Charging", included: true },
+        { name: "Lounge Access", included: true, details: "Standard Access" },
+        { name: "Home Charging Setup", included: true },
+        { name: "Dedicated Vehicle", included: true },
+        { name: "ChainLink Tokens", included: true, details: "15 tokens/month" }
+      ],
+      popular: true,
+      color: "#35F2DB"
+    },
+    {
+      id: 3,
+      name: "All-Access",
+      price: 1999,
+      description: "Complete mobility solution with premium benefits and maximum flexibility",
+      features: [
+        { name: "24/7 Vehicle Access", included: true },
+        { name: "Basic Charging Access", included: true },
+        { name: "Vehicle Variety", included: true, details: "All Vehicle Types + Premium" },
+        { name: "Monthly Credits", included: true, details: "Unlimited" },
+        { name: "Reservation Priority", included: true },
+        { name: "Premium Charging", included: true },
+        { name: "Lounge Access", included: true, details: "VIP Access" },
+        { name: "Home Charging Setup", included: true },
+        { name: "Dedicated Vehicle", included: true, details: "Multiple Vehicles" },
+        { name: "ChainLink Tokens", included: true, details: "30 tokens/month" }
+      ],
+      popular: false,
+      color: "#FFC107"
+    }
+  ],
+  addOns: [
+    { id: 101, name: "Additional Driver", price: 99, description: "Add an additional authorized driver to your account" },
+    { id: 102, name: "Premium Insurance", price: 149, description: "Enhanced insurance coverage with lower deductible" },
+    { id: 103, name: "Charging Credit Pack", price: 199, description: "Additional 500 charging credits" },
+    { id: 104, name: "Road Trip Package", price: 249, description: "Extended range access and premium roadside assistance" },
+    { id: 105, name: "Token Booster", price: 299, description: "Additional 10 ChainLink tokens per month" }
+  ],
+  userProfile: {
+    name: "Matthew Lamb",
+    email: "[email protected]",
+    currentPlan: "Take-Home",
+    memberSince: "January 2025",
+    credits: 1250,
+    tokens: 45,
+    paymentMethod: "Visa ending in 4242",
+    nextBillingDate: "May 1, 2025"
+  },
+  usageHistory: [
+    { date: "April 5, 2025", activity: "Vehicle Reservation", vehicle: "Tesla Model 3", credits: 150, location: "Downtown Hub" },
+    { date: "April 3, 2025", activity: "Premium Charging", vehicle: "Tesla Model 3", credits: 75, location: "Westside Station" },
+    { date: "March 28, 2025", activity: "Lounge Access", vehicle: null, credits: 50, location: "University Hub" },
+    { date: "March 25, 2025", activity: "Vehicle Reservation", vehicle: "Tesla Model Y", credits: 200, location: "Downtown Hub" },
+    { date: "March 20, 2025", activity: "Token Redemption", vehicle: null, credits: 0, tokens: 10, location: null }
+  ]
+};
+
+function SubscriptionPortal() {
+  const [activeTab, setActiveTab] = useState('plans');
+  const [loading, setLoading] = useState(true);
+  const [selectedTier, setSelectedTier] = useState(null);
+  const [selectedAddOns, setSelectedAddOns] = useState([]);
+  const [billingCycle, setBillingCycle] = useState('monthly');
+  const [showConfirmation, setShowConfirmation] = useState(false);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setLoading(false);
+      // Set the user's current plan as selected
+      const currentPlan = mockSubscriptionData.tiers.find(
+        tier => tier.name === mockSubscriptionData.userProfile.currentPlan
+      );
+      setSelectedTier(currentPlan);
+    }, 1500);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleTierSelect = (tier) => {
+    setSelectedTier(tier);
+    setShowConfirmation(false);
+  };
+
+  const handleAddOnToggle = (addOn) => {
+    if (selectedAddOns.some(item => item.id === addOn.id)) {
+      setSelectedAddOns(selectedAddOns.filter(item => item.id !== addOn.id));
+    } else {
+      setSelectedAddOns([...selectedAddOns, addOn]);
+    }
+    setShowConfirmation(false);
+  };
+
+  const handleBillingCycleChange = (cycle) => {
+    setBillingCycle(cycle);
+    setShowConfirmation(false);
+  };
+
+  const calculateTotalPrice = () => {
+    if (!selectedTier) return 0;
+    
+    let basePrice = selectedTier.price;
+    if (billingCycle === 'annual') {
+      basePrice = basePrice * 10; // 2 months free for annual billing
+    }
+    
+    const addOnsTotal = selectedAddOns.reduce((sum, addOn) => {
+      let addOnPrice = addOn.price;
+      if (billingCycle === 'annual') {
+        addOnPrice = addOnPrice * 10; // 2 months free for annual billing
+      }
+      return sum + addOnPrice;
+    }, 0);
+    
+    return basePrice + addOnsTotal;
+  };
+
+  const handleSubscribe = () => {
+    setShowConfirmation(true);
+  };
+
+  const renderFeatureComparison = () => {
+    // Get all unique features across all tiers
+    const allFeatures = Array.from(
+      new Set(
+        mockSubscriptionData.tiers.flatMap(tier => 
+          tier.features.map(feature => feature.name)
+        )
+      )
+    );
+    
+    return (
+      <div className="feature-comparison">
+        <h3>Feature Comparison</h3>
+        <div className="comparison-table">
+          <div className="comparison-header">
+            <div className="feature-name">Feature</div>
+            {mockSubscriptionData.tiers.map(tier => (
+              <div key={tier.id} className="tier-column">
+                {tier.name}
+              </div>
+            ))}
+          </div>
+          
+          {allFeatures.map((featureName, index) => (
+            <div key={index} className="comparison-row">
+              <div className="feature-name">{featureName}</div>
+              {mockSubscriptionData.tiers.map(tier => {
+                const feature = tier.features.find(f => f.name === featureName);
+                return (
+                  <div key={tier.id} className="tier-column">
+                    {feature && feature.included ? (
+                      <div className="feature-included">
+                        <span className="check-icon">✓</span>
+                        {feature.details && <span className="feature-details">{feature.details}</span>}
+                      </div>
+                    ) : (
+                      <div className="feature-excluded">—</div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="subscription-portal loading">
+        <div className="loading-logo">
+          <img src="/images/unity_fleet_logo.png" alt="Unity Fleet" />
+          <div className="loading-pulse"></div>
+        </div>
+        <p>Loading Subscription Portal...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="subscription-portal">
+      <header className="portal-header">
+        <div className="portal-title">
+          <h1>Subscription Portal</h1>
+          <span className="portal-subtitle">Unity Fleet Membership</span>
+        </div>
+        
+        <div className="user-profile">
+          <div className="profile-avatar">
+            <img src="/images/profile_avatar.png" alt="Profile" />
+          </div>
+          <div className="profile-info">
+            <div className="profile-name">{mockSubscriptionData.userProfile.name}</div>
+            <div className="profile-plan">{mockSubscriptionData.userProfile.currentPlan} Member</div>
+          </div>
+        </div>
+      </header>
+      
+      <div className="portal-navigation">
+        <button 
+          className={`nav-button ${activeTab === 'plans' ? 'active' : ''}`}
+          onClick={() => setActiveTab('plans')}
+        >
+          Subscription Plans
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'account' ? 'active' : ''}`}
+          onClick={() => setActiveTab('account')}
+        >
+          My Account
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'usage' ? 'active' : ''}`}
+          onClick={() => setActiveTab('usage')}
+        >
+          Usage History
+        </button>
+        <button 
+          className={`nav-button ${activeTab === 'compare' ? 'active' : ''}`}
+          onClick={() => setActiveTab('compare')}
+        >
+          Plan Comparison
+        </button>
+      </div>
+      
+      <main className="portal-content">
+        {activeTab === 'plans' && (
+          <div className="plans-tab">
+            <div className="current-plan-banner">
+              <div className="banner-content">
+                <h3>Your Current Plan: {mockSubscriptionData.userProfile.currentPlan}</h3>
+                <p>Member since {mockSubscriptionData.userProfile.memberSince} • Next billing date: {mockSubscriptionData.userProfile.nextBillingDate}</p>
+              </div>
+              <div className="banner-actions">
+                <button className="banner-button">Manage Payment</button>
+              </div>
+            </div>
+            
+            <div className="billing-toggle">
+              <span className={`billing-option ${billingCycle === 'monthly' ? 'active' : ''}`}>Monthly</span>
+              <label className="toggle-switch">
+                <input 
+                  type="checkbox" 
+                  checked={billingCycle === 'annual'} 
+                  onChange={() => handleBillingCycleChange(billingCycle === 'monthly' ? 'annual' : 'monthly')}
+                />
+                <span className="toggle-slider"></span>
+              </label>
+              <span className={`billing-option ${billingCycle === 'annual' ? 'active' : ''}`}>
+                Annual
+                <span className="discount-badge">Save 16%</span>
+              </span>
+            </div>
+            
+            <div className="subscription-tiers">
+              {mockSubscriptionData.tiers.map(tier => (
+                <div 
+                  key={tier.id} 
+                  className={`tier-card ${selectedTier && selectedTier.id === tier.id ? 'selected' : ''} ${tier.popular ? 'popular' : ''}`}
+                  onClick={() => handleTierSelect(tier)}
+                >
+                  {tier.popular && <div className="popular-badge">Most Popular</div>}
+                  <div className="tier-header" style={{ background: `linear-gradient(135deg, ${tier.color}22, ${tier.color}11)` }}>
+                    <h3 className="tier-name">{tier.name}</h3>
+                    <div className="tier-price">
+                      <span className="price-amount">${tier.price}</span>
+                      <span className="price-period">/{billingCycle === 'monthly' ? 'mo' : 'yr'}</span>
+                    </div>
+                    {billingCycle === 'annual' && (
+                      <div className="annual-savings">
+                        Save ${tier.price * 2} with annual billing
+                      </div>
+                    )}
+                  </div>
+                  
+                  <div className="tier-description">{tier.description}</div>
+                  
+                  <ul className="tier-features">
+                    {tier.features.slice(0, 5).map((feature, index) => (
+                      <li key={index} className={feature.included ? 'included' : 'excluded'}>
+                        <span className="feature-icon">{feature.included ? '✓' : '—'}</span>
+                        <span className="feature-text">
+                          {feature.name}
+                          {feature.included && feature.details && (
+                            <span className="feature-details"> ({feature.details})</span>
+                          )}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                  
+                  <div className="tier-action">
+                    {mockSubscriptionData.userProfile.currentPlan === tier.name ? (
+                      <button className="current-plan-button">Current Plan</button>
+                    ) : (
+                      <button 
+                        className="select-plan-button"
+                        style={{ background: `linear-gradient(90deg, ${tier.color}, ${tier.color}AA)` }}
+                      >
+                        Select Plan
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+            
+            {selectedTier && (
+              <div className="add-ons-section">
+                <h3>Available Add-Ons</h3>
+                <div className="add-ons-grid">
+                  {mockSubscriptionData.addOns.map(addOn => (
+                    <div 
+                      key={addOn.id} 
+                      className={`add-on-card ${selectedAddOns.some(item => item.id === addOn.id) ? 'selected' : ''}`}
+                      onClick={() => handleAddOnToggle(addOn)}
+                    >
+                      <div className="add-on-checkbox">
+                        <div className="checkbox-inner"></div>
+                      </div>
+                      <div className="add-on-details">
+                        <h4 className="add-on-name">{addOn.name}</h4>
+                        <p className="add-on-description">{addOn.description}</p>
+                      </div>
+                      <div className="add-on-price">
+                        ${addOn.price}/{billingCycle === 'monthly' ? 'mo' : 'yr'}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            
+            {selectedTier && (
+              <div className="subscription-summary">
+                <h3>Subscription Summary</h3>
+                <div className="summary-details">
+                  <div className="summary-item">
+                    <span className="item-name">{selectedTier.name} Plan</span>
+                    <span className="item-price">
+                      ${billingCycle === 'monthly' ? selectedTier.price : selectedTier.price * 10}/
+                      {billingCycle === 'monthly' ? 'mo' : 'yr'}
+                    </span>
+                  </div>
+                  
+                  {selectedAddOns.map(addOn => (
+                    <div key={addOn.id} className="summary-item">
+                      <span className="item-name">{addOn.name}</span>
+                      <span className="item-price">
+                        ${billingCycle === 'monthly' ? addOn.price : addOn.price * 10}/
+                        {billingCycle === 'monthly' ? 'mo' : 'yr'}
+                      </span>
+                    </div>
+                  ))}
+                  
+                  <div className="summary-total">
+                    <span className="total-label">Total</span>
+                    <span className="total-price">
+                      ${calculateTotalPrice()}/{billingCycle === 'monthly' ? 'mo' : 'yr'}
+                    </span>
+                  </div>
+                </div>
+                
+                <div className="summary-action">
+                  <button 
+                    className="subscribe-button"
+                    onClick={handleSubscribe}
+                    disabled={selectedTier.name === mockSubscriptionData.userProfile.currentPlan && selectedAddOns.length === 0}
+                  >
+                    {selectedTier.name === mockSubscriptionData.userProfile.currentPlan ? 'Update Subscription' : 'Subscribe Now'}
+                  </button>
+                </div>
+              </div>
+            )}
+            
+            {showConfirmation && (
+              <div className="confirmation-modal">
+                <div className="modal-content">
+                  <h3>Confirm Your Subscription</h3>
+                  
+                  <div className="confirmation-details">
+                    <div className="confirmation-item">
+                      <span className="item-label">Selected Plan:</span>
+                      <span className="item-value">{selectedTier.name}</span>
+                    </div>
+                    <div className="confirmation-item">
+                      <span className="item-label">Billing Cycle:</span>
+                      <span className="item-value">{billingCycle === 'monthly' ? 'Monthly' : 'Annual'}</span>
+                    </div>
+                    {selectedAddOns.length > 0 && (
+                      <div className="confirmation-item">
+                        <span className="item-label">Add-Ons:</span>
+                        <span className="item-value">{selectedAddOns.map(addOn => addOn.name).join(', ')}</span>
+                      </div>
+                    )}
+                    <div className="confirmation-item total">
+                      <span className="item-label">Total Price:</span>
+                      <span className="item-value">${calculateTotalPrice()}/{billingCycle === 'monthly' ? 'mo' : 'yr'}</span>
+                    </div>
+                  </div>
+                  
+                  <div className="payment-method">
+                    <span className="payment-label">Payment Method:</span>
+                    <span className="payment-value">{mockSubscriptionData.userProfile.paymentMethod}</span>
+                    <button className="change-payment">Change</button>
+                  </div>
+                  
+                  <div className="confirmation-actions">
+                    <button className="cancel-button" onClick={() => setShowConfirmation(false)}>Cancel</button>
+                    <button className="confirm-button">Confirm Subscription</button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        
+        {activeTab === 'account' && (
+          <div className="account-tab">
+            <div className="account-overview">
+              <div className="account-card profile">
+                <h3>Profile Information</h3>
+                <div className="profile-details">
+                  <div className="profile-item">
+                    <span className="item-label">Name:</span>
+                    <span className="item-value">{mockSubscriptionData.userProfile.name}</span>
+                  </div>
+                  <div className="profile-item">
+                    <span className="item-label">Email:</span>
+                    <span className="item-value">{mockSubscriptionData.userProfile.email}</span>
+                  </div>
+                  <div className="profile-item">
+                    <span className="item-label">Member Since:</span>
+                    <span className="item-value">{mockSubscriptionData.userProfile.memberSince}</span>
+                  </div>
+                  <div className="profile-item">
+                    <span className="item-label">Current Plan:</span>
+                    <span className="item-value">{mockSubscriptionData.userProfile.currentPlan}</span>
+                  </div>
+                </div>
+                <button className="edit-profile-button">Edit Profile</button>
+              </div>
+              
+              <div className="account-card balance">
+                <h3>Account Balance</h3>
+                <div className="balance-items">
+                  <div className="balance-item credits">
+                    <div className="balance-icon">🔋</div>
+                    <div className="balance-amount">{mockSubscriptionData.userProfile.credits}</div>
+                    <div className="balance-label">Available Credits</div>
+                  </div>
+                  <div className="balance-item tokens">
+                    <div className="balance-icon">⬡</div>
+                    <div className="balance-amount">{mockSubscriptionData.userProfile.tokens}</div>
+                    <div className="balance-label">ChainLink Tokens</div>
+                  </div>
+                </div>
+                <div className="balance-actions">
+                  <button className="balance-action">Purchase Credits</button>
+                  <button className="balance-action">Manage Tokens</button>
+                </div>
+              </div>
+            </div>
+            
+            <div className="account-card payment">
+              <h3>Payment Information</h3>
+              <div className="payment-details">
+                <div className="payment-method-item">
+                  <div className="card-icon">💳</div>
+                  <div className="card-details">
+                    <div className="card-type">{mockSubscriptionData.userProfile.paymentMethod}</div>
+                    <div className="billing-date">Next billing: {mockSubscriptionData.userProfile.nextBillingDate}</div>
+                  </div>
+                  <button className="edit-payment-button">Edit</button>
+                </div>
+              </div>
+              <div className="payment-history">
+                <h4>Recent Payments</h4>
+                <div className="payment-history-item">
+                  <div className="payment-date">April 1, 2025</div>
+                  <div className="payment-description">Monthly Subscription - {mockSubscriptionData.userProfile.currentPlan}</div>
+                  <div className="payment-amount">$1,299.00</div>
+                </div>
+                <div className="payment-history-item">
+                  <div className="payment-date">March 1, 2025</div>
+                  <div className="payment-description">Monthly Subscription - {mockSubscriptionData.userProfile.currentPlan}</div>
+                  <div className="payment-amount">$1,299.00</div>
+                </div>
+                <div className="payment-history-item">
+                  <div className="payment-date">February 1, 2025</div>
+                  <div className="payment-description">Monthly Subscription - {mockSubscriptionData.userProfile.currentPlan}</div>
+                  <div className="payment-amount">$1,299.00</div>
+                </div>
+              </div>
+              <button className="view-all-button">View All Payments</button>
+            </div>
+            
+            <div className="account-card preferences">
+              <h3>Account Preferences</h3>
+              <div className="preferences-list">
+                <div className="preference-item">
+                  <div className="preference-label">Email Notifications</div>
+                  <label className="toggle-switch">
+                    <input type="checkbox" defaultChecked />
+                    <span className="toggle-slider"></span>
+                  </label>
+                </div>
+                <div className="preference-item">
+                  <div className="preference-label">SMS Alerts</div>
+                  <label className="toggle-switch">
+                    <input type="checkbox" defaultChecked />
+                    <span className="toggle-slider"></span>
+                  </label>
+                </div>
+                <div className="preference-item">
+                  <div className="preference-label">Reservation Reminders</div>
+                  <label className="toggle-switch">
+                    <input type="checkbox" defaultChecked />
+                    <span className="toggle-slider"></span>
+                  </label>
+                </div>
+                <div className="preference-item">
+                  <div className="preference-label">Special Offers</div>
+                  <label className="toggle-switch">
+                    <input type="checkbox" />
+                    <span className="toggle-slider"></span>
+                  </label>
+                </div>
+              </div>
+              <button className="save-preferences-button">Save Preferences</button>
+            </div>
+          </div>
+        )}
+        
+        {activeTab === 'usage' && (
+          <div className="usage-tab">
+            <div className="usage-overview">
+              <div className="usage-card credits">
+                <h3>Credit Usage</h3>
+                <div className="usage-chart">
+                  <div className="chart-placeholder">
+                    <div className="bar-chart">
+                      <div className="chart-bar" style={{ height: '60%' }}>
+                        <div className="bar-label">Jan</div>
+                      </div>
+                      <div className="chart-bar" style={{ height: '75%' }}>
+                        <div className="bar-label">Feb</div>
+                      </div>
+                      <div className="chart-bar" style={{ height: '45%' }}>
+                        <div className="bar-label">Mar</div>
+                      </div>
+                      <div className="chart-bar current" style={{ height: '30%' }}>
+                        <div className="bar-label">Apr</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="usage-summary">
+                  <div className="summary-item">
+                    <div className="summary-label">Monthly Allocation</div>
+                    <div className="summary-value">1,500 credits</div>
+                  </div>
+                  <div className="summary-item">
+                    <div className="summary-label">Used This Month</div>
+                    <div className="summary-value">250 credits</div>
+                  </div>
+                  <div className="summary-item">
+                    <div className="summary-label">Remaining</div>
+                    <div className="summary-value">1,250 credits</div>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="usage-card tokens">
+                <h3>Token Balance</h3>
+                <div className="token-balance">
+                  <div className="token-icon">⬡</div>
+                  <div className="token-amount">{mockSubscriptionData.userProfile.tokens}</div>
+                  <div className="token-label">ChainLink Tokens</div>
+                </div>
+                <div className="token-details">
+                  <div className="token-detail">
+                    <span className="detail-label">Monthly Accrual:</span>
+                    <span className="detail-value">15 tokens</span>
+                  </div>
+                  <div className="token-detail">
+                    <span className="detail-label">Next Distribution:</span>
+                    <span className="detail-value">May 1, 2025</span>
+                  </div>
+                  <div className="token-detail">
+                    <span className="detail-label">Lifetime Earned:</span>
+                    <span className="detail-value">60 tokens</span>
+                  </div>
+                </div>
+                <div className="token-actions">
+                  <button className="token-action">View Token Details</button>
+                  <button className="token-action">Redeem Tokens</button>
+                </div>
+              </div>
+            </div>
+            
+            <div className="usage-history-section">
+              <h3>Recent Activity</h3>
+              <div className="activity-list">
+                {mockSubscriptionData.usageHistory.map((activity, index) => (
+                  <div key={index} className="activity-item">
+                    <div className="activity-date">{activity.date}</div>
+                    <div className="activity-details">
+                      <div className="activity-type">{activity.activity}</div>
+                      {activity.vehicle && <div className="activity-vehicle">{activity.vehicle}</div>}
+                      {activity.location && <div className="activity-location">{activity.location}</div>}
+                    </div>
+                    <div className="activity-cost">
+                      {activity.credits > 0 && <div className="credit-cost">-{activity.credits} credits</div>}
+                      {activity.tokens > 0 && <div className="token-cost">-{activity.tokens} tokens</div>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <button className="view-all-activity">View All Activity</button>
+            </div>
+            
+            <div className="usage-insights">
+              <h3>Usage Insights</h3>
+              <div className="insights-grid">
+                <div className="insight-card">
+                  <div className="insight-icon">🚗</div>
+                  <div className="insight-title">Most Used Vehicle</div>
+                  <div className="insight-value">Tesla Model 3</div>
+                  <div className="insight-detail">8 reservations this month</div>
+                </div>
+                <div className="insight-card">
+                  <div className="insight-icon">⚡</div>
+                  <div className="insight-title">Favorite Charging Location</div>
+                  <div className="insight-value">Downtown Hub</div>
+                  <div className="insight-detail">12 charging sessions</div>
+                </div>
+                <div className="insight-card">
+                  <div className="insight-icon">📊</div>
+                  <div className="insight-title">Average Trip Length</div>
+                  <div className="insight-value">42 miles</div>
+                  <div className="insight-detail">Based on last 20 trips</div>
+                </div>
+                <div className="insight-card">
+                  <div className="insight-icon">💰</div>
+                  <div className="insight-title">Estimated Savings</div>
+                  <div className="insight-value">$345</div>
+                  <div className="insight-detail">Compared to traditional ownership</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {activeTab === 'compare' && (
+          <div className="compare-tab">
+            {renderFeatureComparison()}
+            
+            <div className="plan-benefits">
+              <h3>Membership Benefits</h3>
+              <div className="benefits-grid">
+                <div className="benefit-card">
+                  <div className="benefit-icon">🔄</div>
+                  <h4>Flexibility</h4>
+                  <p>Change or upgrade your plan at any time to match your evolving mobility needs.</p>
+                </div>
+                <div className="benefit-card">
+                  <div className="benefit-icon">💰</div>
+                  <h4>Cost Savings</h4>
+                  <p>Save on insurance, maintenance, and depreciation costs compared to traditional ownership.</p>
+                </div>
+                <div className="benefit-card">
+                  <div className="benefit-icon">⚡</div>
+                  <h4>Charging Network</h4>
+                  <p>Access to The Link's growing network of premium charging stations across Illinois.</p>
+                </div>
+                <div className="benefit-card">
+                  <div className="benefit-icon">⬡</div>
+                  <h4>Token Ownership</h4>
+                  <p>Earn ChainLink tokens with every subscription payment, building equity in the network.</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="faq-section">
+              <h3>Frequently Asked Questions</h3>
+              <div className="faq-list">
+                <div className="faq-item">
+                  <div className="faq-question">How do subscription credits work?</div>
+                  <div className="faq-answer">
+                    <p>Subscription credits are allocated monthly based on your plan tier. These credits can be used for vehicle reservations, charging sessions, and lounge access. Unused credits roll over for up to 3 months.</p>
+                  </div>
+                </div>
+                <div className="faq-item">
+                  <div className="faq-question">Can I change my plan?</div>
+                  <div className="faq-answer">
+                    <p>Yes, you can upgrade or downgrade your plan at any time. Changes take effect at the start of your next billing cycle. Upgrades may be applied immediately upon request.</p>
+                  </div>
+                </div>
+                <div className="faq-item">
+                  <div className="faq-question">What are ChainLink tokens?</div>
+                  <div className="faq-answer">
+                    <p>ChainLink tokens represent fractional ownership in The Link charging infrastructure. Tokens are earned monthly with your subscription and can be redeemed for charging credits, subscription discounts, or held as an appreciating asset.</p>
+                  </div>
+                </div>
+                <div className="faq-item">
+                  <div className="faq-question">How does the home charging setup work?</div>
+                  <div className="faq-answer">
+                    <p>Take-Home and All-Access plans include installation of a Level 2 home charger at your residence. Our team will coordinate installation with a certified electrician. Installation costs are covered up to $1,000.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+      
+      <footer className="portal-footer">
+        <div className="footer-info">
+          <span>Unity Fleet Subscription Portal</span>
+          <span>Powered by Atlas Intelligence</span>
+        </div>
+        <div className="footer-links">
+          <a href="#" className="footer-link">Terms & Conditions</a>
+          <a href="#" className="footer-link">Privacy Policy</a>
+          <a href="#" className="footer-link">Contact Support</a>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default SubscriptionPortal;

chainlink-tokenization.html

@@ -0,0 +1,1309 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity Fleet - ChainLink Tokenization</title>
+    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
+    <style>
+        /* MVP Component specific styles */
+        .component-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        .component-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .component-header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .component-header p {
+            font-size: 1.2rem;
+            max-width: 800px;
+            margin: 0 auto;
+            opacity: 0.8;
+        }
+        
+        .component-content {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            padding: 2rem;
+            margin-bottom: 3rem;
+            backdrop-filter: blur(10px);
+        }
+        
+        .back-to-home {
+            display: inline-block;
+            margin-top: 2rem;
+            padding: 0.8rem 1.5rem;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            border-radius: 4px;
+            font-family: var(--font-primary);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all var(--transition-medium);
+        }
+        
+        .back-to-home:hover {
+            background: rgba(0, 224, 255, 0.1);
+            transform: translateY(-3px);
+        }
+        
+        /* ChainLink Tokenization specific styles */
+        .chainlink-demo-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 1rem;
+        }
+
+        .tokenization-interface {
+            width: 100%;
+            max-width: 900px;
+            background-color: #0B0B0F;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(0, 224, 255, 0.3);
+            margin-bottom: 2rem;
+        }
+
+        .tokenization-header {
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
+            padding: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .tokenization-header h2 {
+            margin: 0;
+            font-size: 1.5rem;
+        }
+
+        .network-status {
+            display: flex;
+            align-items: center;
+            font-size: 0.9rem;
+        }
+
+        .status-indicator {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #4CAF50;
+            margin-right: 0.5rem;
+        }
+
+        .tokenization-nav {
+            display: flex;
+            background: rgba(0, 0, 0, 0.3);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .nav-tab {
+            padding: 1rem 1.5rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+
+        .nav-tab:hover {
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .nav-tab.active {
+            color: var(--accent-color-1);
+        }
+
+        .nav-tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: var(--accent-color-1);
+        }
+
+        .tokenization-body {
+            padding: 2rem;
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        /* Token Overview Tab */
+        .token-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .token-stat {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .stat-label {
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .token-distribution {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .distribution-title {
+            margin-top: 0;
+            margin-bottom: 1.5rem;
+            font-size: 1.2rem;
+            color: var(--accent-color-1);
+        }
+
+        .distribution-chart {
+            height: 300px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .donut-chart {
+            width: 250px;
+            height: 250px;
+            border-radius: 50%;
+            background: conic-gradient(
+                #4CAF50 0% 30%,
+                #2196F3 30% 55%,
+                #9C27B0 55% 70%,
+                #FF9800 70% 85%,
+                #F44336 85% 100%
+            );
+            position: relative;
+        }
+
+        .donut-hole {
+            position: absolute;
+            width: 150px;
+            height: 150px;
+            background: #0B0B0F;
+            border-radius: 50%;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .total-tokens {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 0.3rem;
+        }
+
+        .total-label {
+            font-size: 0.8rem;
+            opacity: 0.7;
+        }
+
+        .distribution-legend {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+        }
+
+        .legend-color {
+            width: 16px;
+            height: 16px;
+            border-radius: 4px;
+            margin-right: 0.5rem;
+        }
+
+        .legend-color.infrastructure {
+            background: #4CAF50;
+        }
+
+        .legend-color.investors {
+            background: #2196F3;
+        }
+
+        .legend-color.community {
+            background: #9C27B0;
+        }
+
+        .legend-color.operations {
+            background: #FF9800;
+        }
+
+        .legend-color.reserve {
+            background: #F44336;
+        }
+
+        .legend-text {
+            font-size: 0.9rem;
+        }
+
+        .legend-value {
+            font-weight: bold;
+            margin-left: 0.3rem;
+        }
+
+        /* Asset Tokenization Tab */
+        .asset-categories {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .asset-category {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .asset-category:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+            border-color: var(--accent-color-1);
+        }
+
+        .category-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .category-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: rgba(0, 224, 255, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 1rem;
+            color: var(--accent-color-1);
+            font-size: 1.2rem;
+        }
+
+        .category-name {
+            font-size: 1.2rem;
+            font-weight: bold;
+        }
+
+        .category-description {
+            margin-bottom: 1rem;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .category-stats {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.9rem;
+        }
+
+        .category-value {
+            font-weight: bold;
+            color: var(--accent-color-1);
+        }
+
+        .tokenized-assets {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .assets-title {
+            margin-top: 0;
+            margin-bottom: 1.5rem;
+            font-size: 1.2rem;
+            color: var(--accent-color-1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .filter-dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        .filter-button {
+            padding: 0.5rem 1rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            font-size: 0.9rem;
+        }
+
+        .filter-button i {
+            margin-left: 0.5rem;
+        }
+
+        .filter-dropdown-content {
+            display: none;
+            position: absolute;
+            right: 0;
+            background: #0B0B0F;
+            min-width: 160px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+            z-index: 1;
+            border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .filter-dropdown-content a {
+            color: white;
+            padding: 0.8rem 1rem;
+            text-decoration: none;
+            display: block;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
+        }
+
+        .filter-dropdown-content a:hover {
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .filter-dropdown:hover .filter-dropdown-content {
+            display: block;
+        }
+
+        .assets-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .asset-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 8px;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .asset-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .asset-image {
+            height: 120px;
+            background: linear-gradient(45deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            color: var(--accent-color-1);
+        }
+
+        .asset-details {
+            padding: 1rem;
+        }
+
+        .asset-name {
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+
+        .asset-info {
+            font-size: 0.8rem;
+            opacity: 0.7;
+            margin-bottom: 0.5rem;
+        }
+
+        .asset-value {
+            font-size: 0.9rem;
+            font-weight: bold;
+            color: var(--accent-color-1);
+        }
+
+        /* Token Flow Tab */
+        .token-flow-visualization {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            height: 400px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .flow-title {
+            margin-top: 0;
+            margin-bottom: 1.5rem;
+            font-size: 1.2rem;
+            color: var(--accent-color-1);
+        }
+
+        .flow-diagram {
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+
+        .flow-node {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .flow-node:hover {
+            transform: scale(1.1);
+            z-index: 10;
+            border-color: var(--accent-color-1);
+        }
+
+        .flow-node .icon {
+            font-size: 1.5rem;
+            margin-bottom: 0.3rem;
+            color: var(--accent-color-1);
+        }
+
+        .flow-node .label {
+            font-size: 0.8rem;
+            font-weight: bold;
+        }
+
+        .flow-node.investors {
+            top: 50px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .flow-node.token-pool {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100px;
+            height: 100px;
+            background: rgba(0, 224, 255, 0.1);
+            border-color: var(--accent-color-1);
+        }
+
+        .flow-node.infrastructure {
+            bottom: 50px;
+            left: 20%;
+        }
+
+        .flow-node.operations {
+            bottom: 50px;
+            right: 20%;
+        }
+
+        .flow-node.community {
+            top: 50%;
+            left: 20%;
+            transform: translateY(-50%);
+        }
+
+        .flow-node.reserve {
+            top: 50%;
+            right: 20%;
+            transform: translateY(-50%);
+        }
+
+        .flow-connection {
+            position: absolute;
+            height: 2px;
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.5), rgba(53, 242, 219, 0.5));
+            transform-origin: left center;
+        }
+
+        .flow-connection.investors-pool {
+            top: 90px;
+            left: 50%;
+            width: 100px;
+            transform: translateX(-50%) rotate(90deg);
+        }
+
+        .flow-connection.pool-infrastructure {
+            bottom: 150px;
+            left: 35%;
+            width: 150px;
+            transform: rotate(45deg);
+        }
+
+        .flow-connection.pool-operations {
+            bottom: 150px;
+            right: 35%;
+            width: 150px;
+            transform: rotate(-45deg);
+        }
+
+        .flow-connection.pool-community {
+            top: 50%;
+            left: 30%;
+            width: 150px;
+        }
+
+        .flow-connection.pool-reserve {
+            top: 50%;
+            right: 30%;
+            width: 150px;
+            transform: rotate(180deg);
+        }
+
+        .flow-particle {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: white;
+            animation: flowMove 3s linear infinite;
+        }
+
+        @keyframes flowMove {
+            0% {
+                left: 0;
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                left: calc(100% - 6px);
+                opacity: 0;
+            }
+        }
+
+        .token-transactions {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .transactions-title {
+            margin-top: 0;
+            margin-bottom: 1.5rem;
+            font-size: 1.2rem;
+            color: var(--accent-color-1);
+        }
+
+        .transaction-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .transaction-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .transaction-item:last-child {
+            border-bottom: none;
+        }
+
+        .transaction-details {
+            display: flex;
+            align-items: center;
+        }
+
+        .transaction-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(0, 224, 255, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 1rem;
+            color: var(--accent-color-1);
+        }
+
+        .transaction-info h4 {
+            margin: 0;
+            margin-bottom: 0.3rem;
+        }
+
+        .transaction-info p {
+            margin: 0;
+            font-size: 0.8rem;
+            opacity: 0.7;
+        }
+
+        .transaction-amount {
+            font-weight: bold;
+            color: var(--accent-color-1);
+        }
+
+        .transaction-hash {
+            font-size: 0.8rem;
+            opacity: 0.7;
+            text-align: right;
+            margin-top: 0.3rem;
+        }
+
+        .tokenization-footer {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .tokenization-actions {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .tokenization-actions button {
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .tokenization-actions button:hover {
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .tokenization-actions button.primary {
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            color: #000;
+            border: none;
+        }
+
+        .tokenization-actions button.primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .tokenization-info {
+            font-size: 0.9rem;
+            opacity: 0.7;
+        }
+    </style>
+</head>
+<body>
+    <div class="noise-overlay"></div>
+    
+    <header>
+        <nav>
+            <div class="logo">UNITY FLEET</div>
+            <div class="nav-links">
+                <a href="../index.html#what-is-the-link">What is The Link</a>
+                <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                <a href="../index.html#impact-equity">Impact & Equity</a>
+                <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                <a href="../index.html#rural-plan">Rural Revitalization</a>
+                <a href="../index.html#mvp-showcase">MVP Showcase</a>
+            </div>
+            <div class="mobile-nav-toggle">
+                <i class="fas fa-bars"></i>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="component-container">
+        <div class="component-header">
+            <h1>CHAINLINK TOKENIZATION</h1>
+            <p>Explore our innovative tokenization model that enables community ownership, transparent asset management, and sustainable funding for The Link charging infrastructure.</p>
+        </div>
+        
+        <div class="component-content">
+            <div class="chainlink-demo-container">
+                <div class="tokenization-interface">
+                    <div class="tokenization-header">
+                        <h2>Unity Fleet Token Dashboard</h2>
+                        <div class="network-status">
+                            <div class="status-indicator"></div>
+                            <span>Connected to ChainLink Network</span>
+                        </div>
+                    </div>
+                    
+                    <div class="tokenization-nav">
+                        <div class="nav-tab active" data-tab="overview">Token Overview</div>
+                        <div class="nav-tab" data-tab="assets">Asset Tokenization</div>
+                        <div class="nav-tab" data-tab="flow">Token Flow</div>
+                    </div>
+                    
+                    <div class="tokenization-body">
+                        <!-- Token Overview Tab -->
+                        <div class="tab-content active" id="overview-tab">
+                            <div class="token-stats">
+                                <div class="token-stat">
+                                    <div class="stat-value">10,000,000</div>
+                                    <div class="stat-label">Total Token Supply</div>
+                                </div>
+                                <div class="token-stat">
+                                    <div class="stat-value">4,250,000</div>
+                                    <div class="stat-label">Tokens in Circulation</div>
+                                </div>
+                                <div class="token-stat">
+                                    <div class="stat-value">$2.45</div>
+                                    <div class="stat-label">Current Token Value</div>
+                                </div>
+                                <div class="token-stat">
+                                    <div class="stat-value">1,250</div>
+                                    <div class="stat-label">Token Holders</div>
+                                </div>
+                            </div>
+                            
+                            <div class="token-distribution">
+                                <h3 class="distribution-title">Token Distribution</h3>
+                                <div class="distribution-chart">
+                                    <div class="donut-chart">
+                                        <div class="donut-hole">
+                                            <div class="total-tokens">10M</div>
+                                            <div class="total-label">Total Tokens</div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="distribution-legend">
+                                    <div class="legend-item">
+                                        <div class="legend-color infrastructure"></div>
+                                        <div class="legend-text">Infrastructure <span class="legend-value">30%</span></div>
+                                    </div>
+                                    <div class="legend-item">
+                                        <div class="legend-color investors"></div>
+                                        <div class="legend-text">Investors <span class="legend-value">25%</span></div>
+                                    </div>
+                                    <div class="legend-item">
+                                        <div class="legend-color community"></div>
+                                        <div class="legend-text">Community <span class="legend-value">15%</span></div>
+                                    </div>
+                                    <div class="legend-item">
+                                        <div class="legend-color operations"></div>
+                                        <div class="legend-text">Operations <span class="legend-value">15%</span></div>
+                                    </div>
+                                    <div class="legend-item">
+                                        <div class="legend-color reserve"></div>
+                                        <div class="legend-text">Reserve <span class="legend-value">15%</span></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Asset Tokenization Tab -->
+                        <div class="tab-content" id="assets-tab">
+                            <div class="asset-categories">
+                                <div class="asset-category">
+                                    <div class="category-header">
+                                        <div class="category-icon">
+                                            <i class="fas fa-charging-station"></i>
+                                        </div>
+                                        <div class="category-name">Charging Stations</div>
+                                    </div>
+                                    <div class="category-description">
+                                        Tokenized ownership of The Link charging infrastructure across Illinois.
+                                    </div>
+                                    <div class="category-stats">
+                                        <div>Total Assets: <span class="category-value">15</span></div>
+                                        <div>Total Value: <span class="category-value">$12.5M</span></div>
+                                    </div>
+                                </div>
+                                
+                                <div class="asset-category">
+                                    <div class="category-header">
+                                        <div class="category-icon">
+                                            <i class="fas fa-car"></i>
+                                        </div>
+                                        <div class="category-name">Vehicle Fleet</div>
+                                    </div>
+                                    <div class="category-description">
+                                        Tokenized ownership of the Unity Fleet electric vehicle inventory.
+                                    </div>
+                                    <div class="category-stats">
+                                        <div>Total Assets: <span class="category-value">42</span></div>
+                                        <div>Total Value: <span class="category-value">$3.8M</span></div>
+                                    </div>
+                                </div>
+                                
+                                <div class="asset-category">
+                                    <div class="category-header">
+                                        <div class="category-icon">
+                                            <i class="fas fa-solar-panel"></i>
+                                        </div>
+                                        <div class="category-name">Energy Infrastructure</div>
+                                    </div>
+                                    <div class="category-description">
+                                        Tokenized ownership of solar arrays and battery storage systems.
+                                    </div>
+                                    <div class="category-stats">
+                                        <div>Total Assets: <span class="category-value">8</span></div>
+                                        <div>Total Value: <span class="category-value">$5.2M</span></div>
+                                    </div>
+                                </div>
+                                
+                                <div class="asset-category">
+                                    <div class="category-header">
+                                        <div class="category-icon">
+                                            <i class="fas fa-building"></i>
+                                        </div>
+                                        <div class="category-name">Real Estate</div>
+                                    </div>
+                                    <div class="category-description">
+                                        Tokenized ownership of The Link hub properties and land.
+                                    </div>
+                                    <div class="category-stats">
+                                        <div>Total Assets: <span class="category-value">12</span></div>
+                                        <div>Total Value: <span class="category-value">$8.4M</span></div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="tokenized-assets">
+                                <div class="assets-title">
+                                    Tokenized Assets
+                                    <div class="filter-dropdown">
+                                        <button class="filter-button">
+                                            Filter by Category <i class="fas fa-chevron-down"></i>
+                                        </button>
+                                        <div class="filter-dropdown-content">
+                                            <a href="#">All Categories</a>
+                                            <a href="#">Charging Stations</a>
+                                            <a href="#">Vehicle Fleet</a>
+                                            <a href="#">Energy Infrastructure</a>
+                                            <a href="#">Real Estate</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div class="assets-grid">
+                                    <div class="asset-card">
+                                        <div class="asset-image">
+                                            <i class="fas fa-charging-station"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <div class="asset-name">Chicago Downtown Hub</div>
+                                            <div class="asset-info">Charging Station • 8 Ports</div>
+                                            <div class="asset-value">1,200,000 Tokens</div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="asset-card">
+                                        <div class="asset-image">
+                                            <i class="fas fa-charging-station"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <div class="asset-name">Springfield Central Hub</div>
+                                            <div class="asset-info">Charging Station • 6 Ports</div>
+                                            <div class="asset-value">850,000 Tokens</div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="asset-card">
+                                        <div class="asset-image">
+                                            <i class="fas fa-car"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <div class="asset-name">Tesla Model 3 Fleet</div>
+                                            <div class="asset-info">Vehicle Fleet • 12 Vehicles</div>
+                                            <div class="asset-value">720,000 Tokens</div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="asset-card">
+                                        <div class="asset-image">
+                                            <i class="fas fa-solar-panel"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <div class="asset-name">Champaign Solar Array</div>
+                                            <div class="asset-info">Energy • 500 kW Capacity</div>
+                                            <div class="asset-value">950,000 Tokens</div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="asset-card">
+                                        <div class="asset-image">
+                                            <i class="fas fa-car"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <div class="asset-name">Rivian R1S Fleet</div>
+                                            <div class="asset-info">Vehicle Fleet • 8 Vehicles</div>
+                                            <div class="asset-value">680,000 Tokens</div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="asset-card">
+                                        <div class="asset-image">
+                                            <i class="fas fa-building"></i>
+                                        </div>
+                                        <div class="asset-details">
+                                            <div class="asset-name">Bloomington Property</div>
+                                            <div class="asset-info">Real Estate • 2.5 Acres</div>
+                                            <div class="asset-value">1,050,000 Tokens</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Token Flow Tab -->
+                        <div class="tab-content" id="flow-tab">
+                            <div class="token-flow-visualization">
+                                <h3 class="flow-title">Token Flow Visualization</h3>
+                                <div class="flow-diagram">
+                                    <div class="flow-node investors">
+                                        <div class="icon"><i class="fas fa-users"></i></div>
+                                        <div class="label">Investors</div>
+                                    </div>
+                                    
+                                    <div class="flow-node token-pool">
+                                        <div class="icon"><i class="fas fa-coins"></i></div>
+                                        <div class="label">Token Pool</div>
+                                    </div>
+                                    
+                                    <div class="flow-node infrastructure">
+                                        <div class="icon"><i class="fas fa-charging-station"></i></div>
+                                        <div class="label">Infrastructure</div>
+                                    </div>
+                                    
+                                    <div class="flow-node operations">
+                                        <div class="icon"><i class="fas fa-cogs"></i></div>
+                                        <div class="label">Operations</div>
+                                    </div>
+                                    
+                                    <div class="flow-node community">
+                                        <div class="icon"><i class="fas fa-hands-helping"></i></div>
+                                        <div class="label">Community</div>
+                                    </div>
+                                    
+                                    <div class="flow-node reserve">
+                                        <div class="icon"><i class="fas fa-vault"></i></div>
+                                        <div class="label">Reserve</div>
+                                    </div>
+                                    
+                                    <div class="flow-connection investors-pool">
+                                        <div class="flow-particle" style="animation-delay: 0s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 1s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 2s;"></div>
+                                    </div>
+                                    
+                                    <div class="flow-connection pool-infrastructure">
+                                        <div class="flow-particle" style="animation-delay: 0.2s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 1.2s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 2.2s;"></div>
+                                    </div>
+                                    
+                                    <div class="flow-connection pool-operations">
+                                        <div class="flow-particle" style="animation-delay: 0.4s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 1.4s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 2.4s;"></div>
+                                    </div>
+                                    
+                                    <div class="flow-connection pool-community">
+                                        <div class="flow-particle" style="animation-delay: 0.6s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 1.6s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 2.6s;"></div>
+                                    </div>
+                                    
+                                    <div class="flow-connection pool-reserve">
+                                        <div class="flow-particle" style="animation-delay: 0.8s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 1.8s;"></div>
+                                        <div class="flow-particle" style="animation-delay: 2.8s;"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="token-transactions">
+                                <h3 class="transactions-title">Recent Transactions</h3>
+                                <ul class="transaction-list">
+                                    <li class="transaction-item">
+                                        <div class="transaction-details">
+                                            <div class="transaction-icon">
+                                                <i class="fas fa-exchange-alt"></i>
+                                            </div>
+                                            <div class="transaction-info">
+                                                <h4>Token Allocation</h4>
+                                                <p>Infrastructure Fund</p>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div class="transaction-amount">250,000 Tokens</div>
+                                            <div class="transaction-hash">0x7a2d...f83e</div>
+                                        </div>
+                                    </li>
+                                    
+                                    <li class="transaction-item">
+                                        <div class="transaction-details">
+                                            <div class="transaction-icon">
+                                                <i class="fas fa-user-plus"></i>
+                                            </div>
+                                            <div class="transaction-info">
+                                                <h4>New Investor</h4>
+                                                <p>Community Investment Group</p>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div class="transaction-amount">125,000 Tokens</div>
+                                            <div class="transaction-hash">0x3b8c...a21d</div>
+                                        </div>
+                                    </li>
+                                    
+                                    <li class="transaction-item">
+                                        <div class="transaction-details">
+                                            <div class="transaction-icon">
+                                                <i class="fas fa-plus-circle"></i>
+                                            </div>
+                                            <div class="transaction-info">
+                                                <h4>Asset Addition</h4>
+                                                <p>Peoria Charging Hub</p>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div class="transaction-amount">750,000 Tokens</div>
+                                            <div class="transaction-hash">0x9e4f...c72b</div>
+                                        </div>
+                                    </li>
+                                    
+                                    <li class="transaction-item">
+                                        <div class="transaction-details">
+                                            <div class="transaction-icon">
+                                                <i class="fas fa-hand-holding-usd"></i>
+                                            </div>
+                                            <div class="transaction-info">
+                                                <h4>Dividend Distribution</h4>
+                                                <p>Q2 2025 Earnings</p>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div class="transaction-amount">180,000 Tokens</div>
+                                            <div class="transaction-hash">0x5d1a...b94c</div>
+                                        </div>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="tokenization-footer">
+                        <div class="tokenization-actions">
+                            <button>View on ChainLink Explorer</button>
+                            <button class="primary">Connect Wallet</button>
+                        </div>
+                        <div class="tokenization-info">
+                            Last Block: #14,532,891 | Gas Price: 25 Gwei
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="component-features">
+            <h2>Key Features</h2>
+            <ul class="features-list">
+                <li>Transparent token distribution with real-time visualization of allocation across stakeholders</li>
+                <li>Asset tokenization system for fractional ownership of charging infrastructure, vehicles, and energy systems</li>
+                <li>Interactive token flow diagram showing movement between investors, infrastructure, operations, and community</li>
+                <li>ChainLink integration for secure, transparent, and auditable token transactions</li>
+                <li>Community ownership model enabling local investment in charging infrastructure</li>
+                <li>Dividend distribution system for sharing revenue with token holders</li>
+                <li>Asset management dashboard for tracking tokenized infrastructure components</li>
+            </ul>
+        </div>
+        
+        <a href="../index.html#mvp-showcase" class="back-to-home">
+            <i class="fas fa-arrow-left"></i> Back to MVP Showcase
+        </a>
+    </main>
+    
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <div class="logo">UNITY FLEET</div>
+                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="link-column">
+                        <h4>Navigation</h4>
+                        <a href="../index.html#what-is-the-link">What is The Link</a>
+                        <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                        <a href="../index.html#impact-equity">Impact & Equity</a>
+                        <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                        <a href="../index.html#rural-plan">Rural Revitalization</a>
+                        <a href="../index.html#mvp-showcase">MVP Showcase</a>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Contact</h4>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="tel:+12175551234">+1 (217) 555-1234</a>
+                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Legal</h4>
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Accessibility</a>
+                    </div>
+                </div>
+                
+                <div class="footer-social">
+                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Mobile navigation toggle
+        document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
+            document.querySelector('.nav-links').classList.toggle('active');
+            this.innerHTML = document.querySelector('.nav-links').classList.contains('active') 
+                ? '<i class="fas fa-times"></i>' 
+                : '<i class="fas fa-bars"></i>';
+        });
+        
+        // Tokenization dashboard tab navigation
+        document.addEventListener('DOMContentLoaded', function() {
+            const navTabs = document.querySelectorAll('.nav-tab');
+            const tabContents = document.querySelectorAll('.tab-content');
+            
+            navTabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    // Remove active class from all tabs
+                    navTabs.forEach(t => t.classList.remove('active'));
+                    
+                    // Add active class to clicked tab
+                    this.classList.add('active');
+                    
+                    // Hide all tab contents
+                    tabContents.forEach(content => content.classList.remove('active'));
+                    
+                    // Show selected tab content
+                    const tabId = this.getAttribute('data-tab') + '-tab';
+                    document.getElementById(tabId).classList.add('active');
+                });
+            });
+            
+            // Flow node hover effects
+            const flowNodes = document.querySelectorAll('.flow-node');
+            flowNodes.forEach(node => {
+                node.addEventListener('mouseenter', function() {
+                    this.style.transform = 'scale(1.1)';
+                    this.style.zIndex = '10';
+                    this.style.borderColor = 'var(--accent-color-1)';
+                });
+                
+                node.addEventListener('mouseleave', function() {
+                    if (!this.classList.contains('token-pool')) {
+                        this.style.transform = '';
+                        this.style.zIndex = '';
+                        this.style.borderColor = '';
+                    } else {
+                        this.style.transform = 'translate(-50%, -50%)';
+                    }
+                });
+            });
+            
+            // Asset card hover effects
+            const assetCards = document.querySelectorAll('.asset-card');
+            assetCards.forEach(card => {
+                card.addEventListener('click', function() {
+                    alert('Asset details would open in the production version.');
+                });
+            });
+            
+            // Button actions
+            document.querySelector('.tokenization-actions .primary').addEventListener('click', function() {
+                alert('Wallet connection would be implemented in the production version.');
+            });
+            
+            document.querySelector('.tokenization-actions button:not(.primary)').addEventListener('click', function() {
+                alert('ChainLink Explorer would open in the production version.');
+            });
+            
+            // Category hover effects
+            const assetCategories = document.querySelectorAll('.asset-category');
+            assetCategories.forEach(category => {
+                category.addEventListener('click', function() {
+                    alert('Category details would open in the production version.');
+                });
+            });
+        });
+    </script>
+</body>
+</html>

charging-hub.html

@@ -0,0 +1,616 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity Fleet - Charging Hub Interface</title>
+    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
+    <style>
+        /* MVP Component specific styles */
+        .component-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        .component-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .component-header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .component-header p {
+            font-size: 1.2rem;
+            max-width: 800px;
+            margin: 0 auto;
+            opacity: 0.8;
+        }
+        
+        .component-content {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            padding: 2rem;
+            margin-bottom: 3rem;
+            backdrop-filter: blur(10px);
+        }
+        
+        .back-to-home {
+            display: inline-block;
+            margin-top: 2rem;
+            padding: 0.8rem 1.5rem;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            border-radius: 4px;
+            font-family: var(--font-primary);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all var(--transition-medium);
+        }
+        
+        .back-to-home:hover {
+            background: rgba(0, 224, 255, 0.1);
+            transform: translateY(-3px);
+        }
+        
+        /* Charging Hub specific styles */
+        .charging-hub-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 1rem;
+        }
+
+        .hub-interface {
+            width: 100%;
+            max-width: 800px;
+            background-color: #0B0B0F;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(0, 224, 255, 0.3);
+            margin-bottom: 2rem;
+        }
+
+        .hub-header {
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
+            padding: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .hub-header h2 {
+            margin: 0;
+            font-size: 1.5rem;
+        }
+
+        .hub-status {
+            display: flex;
+            align-items: center;
+        }
+
+        .status-indicator {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: #4CAF50;
+            margin-right: 8px;
+        }
+
+        .hub-body {
+            padding: 2rem;
+        }
+
+        .hub-section {
+            margin-bottom: 2rem;
+        }
+
+        .hub-section h3 {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-size: 1.2rem;
+            color: var(--accent-color-1);
+        }
+
+        .charging-stations {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 1rem;
+        }
+
+        .station-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .station-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+            border-color: var(--accent-color-1);
+        }
+
+        .station-card.available {
+            border-left: 4px solid #4CAF50;
+        }
+
+        .station-card.in-use {
+            border-left: 4px solid #FFC107;
+        }
+
+        .station-card.unavailable {
+            border-left: 4px solid #F44336;
+            opacity: 0.7;
+        }
+
+        .station-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.5rem;
+        }
+
+        .station-header h4 {
+            margin: 0;
+            font-size: 1rem;
+        }
+
+        .station-type {
+            font-size: 0.8rem;
+            opacity: 0.7;
+            margin-bottom: 0.5rem;
+        }
+
+        .station-details {
+            font-size: 0.9rem;
+        }
+
+        .station-details p {
+            margin: 0.3rem 0;
+        }
+
+        .station-actions {
+            margin-top: 1rem;
+            display: flex;
+            justify-content: center;
+        }
+
+        .station-actions button {
+            padding: 0.5rem 1rem;
+            font-size: 0.8rem;
+            border-radius: 4px;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            color: #000;
+            border: none;
+            cursor: pointer;
+            width: 100%;
+        }
+
+        .station-actions button:disabled {
+            background: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.5);
+            cursor: not-allowed;
+        }
+
+        .hub-amenities {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+
+        .amenity-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .amenity-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .amenity-icon {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            color: var(--accent-color-1);
+        }
+
+        .amenity-name {
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+
+        .amenity-description {
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .hub-footer {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .hub-footer-links {
+            display: flex;
+        }
+
+        .hub-footer-links a {
+            margin-right: 1rem;
+            color: var(--accent-color-1);
+            font-size: 0.9rem;
+        }
+
+        .hub-footer-info {
+            font-size: 0.9rem;
+            opacity: 0.7;
+        }
+
+        /* Energy usage meter */
+        .energy-meter {
+            width: 100%;
+            height: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            overflow: hidden;
+            margin-top: 0.5rem;
+        }
+
+        .energy-meter-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #4CAF50, #FFC107, #F44336);
+            width: 0%;
+            transition: width 1s ease;
+        }
+    </style>
+</head>
+<body>
+    <div class="noise-overlay"></div>
+    
+    <header>
+        <nav>
+            <div class="logo">UNITY FLEET</div>
+            <div class="nav-links">
+                <a href="../index.html#what-is-the-link">What is The Link</a>
+                <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                <a href="../index.html#impact-equity">Impact & Equity</a>
+                <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                <a href="../index.html#rural-plan">Rural Revitalization</a>
+                <a href="../index.html#mvp-showcase">MVP Showcase</a>
+            </div>
+            <div class="mobile-nav-toggle">
+                <i class="fas fa-bars"></i>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="component-container">
+        <div class="component-header">
+            <h1>CHARGING HUB INTERFACE</h1>
+            <p>Experience The Link charging stations with our interactive hub interface, featuring real-time availability, energy monitoring, and premium amenities.</p>
+        </div>
+        
+        <div class="component-content">
+            <div class="charging-hub-container">
+                <div class="hub-interface">
+                    <div class="hub-header">
+                        <h2>The Link - Downtown Springfield</h2>
+                        <div class="hub-status">
+                            <div class="status-indicator"></div>
+                            <span>Online | 6/8 Stations Available</span>
+                        </div>
+                    </div>
+                    
+                    <div class="hub-body">
+                        <div class="hub-section">
+                            <h3>Charging Stations</h3>
+                            <div class="charging-stations">
+                                <div class="station-card available">
+                                    <div class="station-header">
+                                        <h4>Station 1</h4>
+                                        <span>Available</span>
+                                    </div>
+                                    <div class="station-type">DC Fast Charger | 350kW</div>
+                                    <div class="station-details">
+                                        <p>Power Output: 350kW</p>
+                                        <p>Connector: CCS</p>
+                                    </div>
+                                    <div class="station-actions">
+                                        <button>Reserve</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="station-card available">
+                                    <div class="station-header">
+                                        <h4>Station 2</h4>
+                                        <span>Available</span>
+                                    </div>
+                                    <div class="station-type">DC Fast Charger | 350kW</div>
+                                    <div class="station-details">
+                                        <p>Power Output: 350kW</p>
+                                        <p>Connector: CCS</p>
+                                    </div>
+                                    <div class="station-actions">
+                                        <button>Reserve</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="station-card in-use">
+                                    <div class="station-header">
+                                        <h4>Station 3</h4>
+                                        <span>In Use</span>
+                                    </div>
+                                    <div class="station-type">DC Fast Charger | 350kW</div>
+                                    <div class="station-details">
+                                        <p>Current User: Tesla Model Y</p>
+                                        <p>Est. Completion: 15 min</p>
+                                        <div class="energy-meter">
+                                            <div class="energy-meter-fill" style="width: 75%;"></div>
+                                        </div>
+                                    </div>
+                                    <div class="station-actions">
+                                        <button disabled>In Use</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="station-card available">
+                                    <div class="station-header">
+                                        <h4>Station 4</h4>
+                                        <span>Available</span>
+                                    </div>
+                                    <div class="station-type">DC Fast Charger | 350kW</div>
+                                    <div class="station-details">
+                                        <p>Power Output: 350kW</p>
+                                        <p>Connector: CCS</p>
+                                    </div>
+                                    <div class="station-actions">
+                                        <button>Reserve</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="station-card available">
+                                    <div class="station-header">
+                                        <h4>Station 5</h4>
+                                        <span>Available</span>
+                                    </div>
+                                    <div class="station-type">Level 2 | 19.2kW</div>
+                                    <div class="station-details">
+                                        <p>Power Output: 19.2kW</p>
+                                        <p>Connector: J1772</p>
+                                    </div>
+                                    <div class="station-actions">
+                                        <button>Reserve</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="station-card available">
+                                    <div class="station-header">
+                                        <h4>Station 6</h4>
+                                        <span>Available</span>
+                                    </div>
+                                    <div class="station-type">Level 2 | 19.2kW</div>
+                                    <div class="station-details">
+                                        <p>Power Output: 19.2kW</p>
+                                        <p>Connector: J1772</p>
+                                    </div>
+                                    <div class="station-actions">
+                                        <button>Reserve</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="station-card in-use">
+                                    <div class="station-header">
+                                        <h4>Station 7</h4>
+                                        <span>In Use</span>
+                                    </div>
+                                    <div class="station-type">Level 2 | 19.2kW</div>
+                                    <div class="station-details">
+                                        <p>Current User: Rivian R1T</p>
+                                        <p>Est. Completion: 45 min</p>
+                                        <div class="energy-meter">
+                                            <div class="energy-meter-fill" style="width: 40%;"></div>
+                                        </div>
+                                    </div>
+                                    <div class="station-actions">
+                                        <button disabled>In Use</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="station-card unavailable">
+                                    <div class="station-header">
+                                        <h4>Station 8</h4>
+                                        <span>Maintenance</span>
+                                    </div>
+                                    <div class="station-type">Level 2 | 19.2kW</div>
+                                    <div class="station-details">
+                                        <p>Status: Under Maintenance</p>
+                                        <p>Est. Return: 2 hours</p>
+                                    </div>
+                                    <div class="station-actions">
+                                        <button disabled>Unavailable</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="hub-section">
+                            <h3>Hub Amenities</h3>
+                            <div class="hub-amenities">
+                                <div class="amenity-card">
+                                    <div class="amenity-icon">
+                                        <i class="fas fa-coffee"></i>
+                                    </div>
+                                    <div class="amenity-name">Café Lounge</div>
+                                    <div class="amenity-description">Enjoy premium coffee and snacks while you wait</div>
+                                </div>
+                                
+                                <div class="amenity-card">
+                                    <div class="amenity-icon">
+                                        <i class="fas fa-wifi"></i>
+                                    </div>
+                                    <div class="amenity-name">High-Speed WiFi</div>
+                                    <div class="amenity-description">Free gigabit internet access for all users</div>
+                                </div>
+                                
+                                <div class="amenity-card">
+                                    <div class="amenity-icon">
+                                        <i class="fas fa-laptop"></i>
+                                    </div>
+                                    <div class="amenity-name">Work Pods</div>
+                                    <div class="amenity-description">Private workspaces with power and connectivity</div>
+                                </div>
+                                
+                                <div class="amenity-card">
+                                    <div class="amenity-icon">
+                                        <i class="fas fa-shopping-bag"></i>
+                                    </div>
+                                    <div class="amenity-name">Mini Market</div>
+                                    <div class="amenity-description">Convenience store with essentials and local products</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="hub-footer">
+                        <div class="hub-footer-links">
+                            <a href="#">Hub Map</a>
+                            <a href="#">Report Issue</a>
+                            <a href="#">Contact Staff</a>
+                        </div>
+                        <div class="hub-footer-info">
+                            Current Energy Source: 85% Solar | 15% Grid
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="component-features">
+            <h2>Key Features</h2>
+            <ul class="features-list">
+                <li>Real-time charging station status and availability monitoring</li>
+                <li>Reservation system for securing charging spots in advance</li>
+                <li>Energy usage tracking with visual indicators of charging progress</li>
+                <li>Integrated payment processing with subscription recognition</li>
+                <li>Interactive map of hub layout and amenities</li>
+                <li>Live energy source tracking showing renewable vs. grid power</li>
+                <li>Digital access to premium lounge services and work spaces</li>
+            </ul>
+        </div>
+        
+        <a href="../index.html#mvp-showcase" class="back-to-home">
+            <i class="fas fa-arrow-left"></i> Back to MVP Showcase
+        </a>
+    </main>
+    
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <div class="logo">UNITY FLEET</div>
+                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="link-column">
+                        <h4>Navigation</h4>
+                        <a href="../index.html#what-is-the-link">What is The Link</a>
+                        <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                        <a href="../index.html#impact-equity">Impact & Equity</a>
+                        <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                        <a href="../index.html#rural-plan">Rural Revitalization</a>
+                        <a href="../index.html#mvp-showcase">MVP Showcase</a>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Contact</h4>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="tel:+12175551234">+1 (217) 555-1234</a>
+                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Legal</h4>
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Accessibility</a>
+                    </div>
+                </div>
+                
+                <div class="footer-social">
+                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Mobile navigation toggle
+        document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
+            document.querySelector('.nav-links').classList.toggle('active');
+            this.innerHTML = document.querySelector('.nav-links').classList.contains('active') 
+                ? '<i class="fas fa-times"></i>' 
+                : '<i class="fas fa-bars"></i>';
+        });
+        
+        // Charging station animation
+        document.addEventListener('DOMContentLoaded', function() {
+            // Animate energy meters
+            const energyMeters = document.querySelectorAll('.energy-meter-fill');
+            energyMeters.forEach(meter => {
+                const currentWidth = meter.style.width;
+                meter.style.width = '0%';
+                setTimeout(() => {
+                    meter.style.width = currentWidth;
+                }, 500);
+            });
+            
+            // Add hover effects to station cards
+            const stationCards = document.querySelectorAll('.station-card');
+            stationCards.forEach(card => {
+                card.addEventListener('mouseenter', function() {
+                    if (!this.classList.contains('unavailable')) {
+                        this.style.transform = 'translateY(-10px)';
+                        this.style.boxShadow = '0 15px 30px rgba(0, 224, 255, 0.2)';
+                    }
+                });
+                
+                card.addEventListener('mouseleave', function() {
+                    this.style.transform = '';
+                    this.style.boxShadow = '';
+                });
+            });
+        });
+    </script>
+</body>
+</html>

deployment-map.html

@@ -0,0 +1,833 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity Fleet - Deployment Map</title>
+    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
+    <style>
+        /* MVP Component specific styles */
+        .component-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        .component-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .component-header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .component-header p {
+            font-size: 1.2rem;
+            max-width: 800px;
+            margin: 0 auto;
+            opacity: 0.8;
+        }
+        
+        .component-content {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            padding: 2rem;
+            margin-bottom: 3rem;
+            backdrop-filter: blur(10px);
+        }
+        
+        .back-to-home {
+            display: inline-block;
+            margin-top: 2rem;
+            padding: 0.8rem 1.5rem;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            border-radius: 4px;
+            font-family: var(--font-primary);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all var(--transition-medium);
+        }
+        
+        .back-to-home:hover {
+            background: rgba(0, 224, 255, 0.1);
+            transform: translateY(-3px);
+        }
+        
+        /* Deployment Map specific styles */
+        .deployment-map-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 1rem;
+        }
+
+        .map-interface {
+            width: 100%;
+            max-width: 900px;
+            background-color: #0B0B0F;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(0, 224, 255, 0.3);
+            margin-bottom: 2rem;
+        }
+
+        .map-header {
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
+            padding: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .map-header h2 {
+            margin: 0;
+            font-size: 1.5rem;
+        }
+
+        .map-controls {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .map-control-btn {
+            padding: 0.5rem 1rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .map-control-btn:hover {
+            background: rgba(0, 224, 255, 0.2);
+            border-color: var(--accent-color-1);
+        }
+
+        .map-control-btn.active {
+            background: rgba(0, 224, 255, 0.3);
+            border-color: var(--accent-color-1);
+            color: var(--accent-color-1);
+        }
+
+        .map-body {
+            padding: 2rem;
+        }
+
+        .map-filters {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .filter-group {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            min-width: 200px;
+            flex: 1;
+        }
+
+        .filter-group h3 {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+            color: var(--accent-color-1);
+        }
+
+        .filter-options {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        .filter-option {
+            padding: 0.5rem 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .filter-option:hover {
+            background: rgba(0, 224, 255, 0.1);
+            border-color: var(--accent-color-1);
+        }
+
+        .filter-option.active {
+            background: rgba(0, 224, 255, 0.2);
+            border-color: var(--accent-color-1);
+            color: var(--accent-color-1);
+        }
+
+        .map-visualization {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            padding: 1rem;
+            position: relative;
+            height: 500px;
+            overflow: hidden;
+        }
+
+        .illinois-map {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
+            background-size: contain;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+
+        .map-location {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--accent-color-1);
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 0 10px rgba(0, 224, 255, 0.5);
+        }
+
+        .map-location:hover {
+            transform: translate(-50%, -50%) scale(1.3);
+            z-index: 10;
+        }
+
+        .map-location::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            background: rgba(0, 224, 255, 0.3);
+            transform: translate(-50%, -50%);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: translate(-50%, -50%) scale(0.5);
+                opacity: 1;
+            }
+            100% {
+                transform: translate(-50%, -50%) scale(2);
+                opacity: 0;
+            }
+        }
+
+        .map-location.phase-1 {
+            background: #4CAF50;
+        }
+
+        .map-location.phase-1::after {
+            background: rgba(76, 175, 80, 0.3);
+        }
+
+        .map-location.phase-2 {
+            background: #FFC107;
+        }
+
+        .map-location.phase-2::after {
+            background: rgba(255, 193, 7, 0.3);
+        }
+
+        .map-location.phase-3 {
+            background: #9C27B0;
+        }
+
+        .map-location.phase-3::after {
+            background: rgba(156, 39, 176, 0.3);
+        }
+
+        .location-tooltip {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.8);
+            border: 1px solid var(--accent-color-1);
+            border-radius: 8px;
+            padding: 1rem;
+            width: 200px;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: 20;
+        }
+
+        .location-tooltip h4 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+            font-size: 1rem;
+            color: var(--accent-color-1);
+        }
+
+        .location-tooltip p {
+            margin: 0.3rem 0;
+            font-size: 0.8rem;
+        }
+
+        .map-legend {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            margin-top: 1rem;
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            font-size: 0.9rem;
+        }
+
+        .legend-color {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            margin-right: 0.5rem;
+        }
+
+        .legend-color.phase-1 {
+            background: #4CAF50;
+        }
+
+        .legend-color.phase-2 {
+            background: #FFC107;
+        }
+
+        .legend-color.phase-3 {
+            background: #9C27B0;
+        }
+
+        .map-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-size: contain;
+            background-position: center;
+            background-repeat: no-repeat;
+            opacity: 0;
+            transition: opacity 0.5s ease;
+            pointer-events: none;
+        }
+
+        .map-overlay.demographics {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjMwIiBmaWxsPSJyZ2JhKDc2LCAxNzUsIDgwLCAwLjMpIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTUwIiByPSI1MCIgZmlsbD0icmdiYSg3NiwgMTc1LCA4MCwgMC41KSIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjI1MCIgcj0iNzAiIGZpbGw9InJnYmEoNzYsIDE3NSwgODAsIDAuNykiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIzNTAiIHI9IjQwIiBmaWxsPSJyZ2JhKDc2LCAxNzUsIDgwLCAwLjQpIi8+PC9zdmc+');
+        }
+
+        .map-overlay.ev-adoption {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTAwLDEwMCBMMjAwLDE1MCBMMTUwLDI1MCBMMTAwLDM1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwgMTkzLCA3LCAwLjcpIiBzdHJva2Utd2lkdGg9IjIwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjUsMTAiLz48L3N2Zz4=');
+        }
+
+        .map-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+
+        .stat-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .stat-card h4 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+            font-size: 1rem;
+            color: var(--accent-color-1);
+        }
+
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+
+        .stat-description {
+            font-size: 0.8rem;
+            opacity: 0.8;
+        }
+
+        .map-footer {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .map-actions {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .map-actions button {
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .map-actions button:hover {
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .map-actions button.primary {
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            color: #000;
+            border: none;
+        }
+
+        .map-actions button.primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .map-info {
+            font-size: 0.9rem;
+            opacity: 0.7;
+        }
+    </style>
+</head>
+<body>
+    <div class="noise-overlay"></div>
+    
+    <header>
+        <nav>
+            <div class="logo">UNITY FLEET</div>
+            <div class="nav-links">
+                <a href="../index.html#what-is-the-link">What is The Link</a>
+                <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                <a href="../index.html#impact-equity">Impact & Equity</a>
+                <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                <a href="../index.html#rural-plan">Rural Revitalization</a>
+                <a href="../index.html#mvp-showcase">MVP Showcase</a>
+            </div>
+            <div class="mobile-nav-toggle">
+                <i class="fas fa-bars"></i>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="component-container">
+        <div class="component-header">
+            <h1>DEPLOYMENT MAP</h1>
+            <p>Explore our phased deployment plan across Illinois with demographic data overlays and EV adoption projections.</p>
+        </div>
+        
+        <div class="component-content">
+            <div class="deployment-map-container">
+                <div class="map-interface">
+                    <div class="map-header">
+                        <h2>The Link Deployment Plan</h2>
+                        <div class="map-controls">
+                            <button class="map-control-btn active" data-overlay="none">Base Map</button>
+                            <button class="map-control-btn" data-overlay="demographics">Demographics</button>
+                            <button class="map-control-btn" data-overlay="ev-adoption">EV Adoption</button>
+                        </div>
+                    </div>
+                    
+                    <div class="map-body">
+                        <div class="map-filters">
+                            <div class="filter-group">
+                                <h3>Deployment Phase</h3>
+                                <div class="filter-options">
+                                    <div class="filter-option active" data-phase="all">All Phases</div>
+                                    <div class="filter-option" data-phase="1">Phase 1 (2025-2026)</div>
+                                    <div class="filter-option" data-phase="2">Phase 2 (2026-2027)</div>
+                                    <div class="filter-option" data-phase="3">Phase 3 (2027-2028)</div>
+                                </div>
+                            </div>
+                            
+                            <div class="filter-group">
+                                <h3>Hub Type</h3>
+                                <div class="filter-options">
+                                    <div class="filter-option active" data-type="all">All Types</div>
+                                    <div class="filter-option" data-type="urban">Urban Hubs</div>
+                                    <div class="filter-option" data-type="suburban">Suburban Hubs</div>
+                                    <div class="filter-option" data-type="rural">Rural Hubs</div>
+                                    <div class="filter-option" data-type="highway">Highway Corridors</div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="map-visualization">
+                            <div class="illinois-map">
+                                <!-- Chicago -->
+                                <div class="map-location phase-1" style="top: 15%; left: 75%;" data-name="Chicago Downtown" data-phase="1" data-type="urban">
+                                </div>
+                                
+                                <!-- Springfield -->
+                                <div class="map-location phase-1" style="top: 50%; left: 45%;" data-name="Springfield Central" data-phase="1" data-type="urban">
+                                </div>
+                                
+                                <!-- Champaign-Urbana -->
+                                <div class="map-location phase-1" style="top: 40%; left: 70%;" data-name="Champaign-Urbana" data-phase="1" data-type="urban">
+                                </div>
+                                
+                                <!-- Bloomington-Normal -->
+                                <div class="map-location phase-1" style="top: 35%; left: 55%;" data-name="Bloomington-Normal" data-phase="1" data-type="urban">
+                                </div>
+                                
+                                <!-- Peoria -->
+                                <div class="map-location phase-1" style="top: 30%; left: 40%;" data-name="Peoria" data-phase="1" data-type="urban">
+                                </div>
+                                
+                                <!-- Rockford -->
+                                <div class="map-location phase-2" style="top: 10%; left: 35%;" data-name="Rockford" data-phase="2" data-type="urban">
+                                </div>
+                                
+                                <!-- Naperville -->
+                                <div class="map-location phase-2" style="top: 20%; left: 65%;" data-name="Naperville" data-phase="2" data-type="suburban">
+                                </div>
+                                
+                                <!-- Joliet -->
+                                <div class="map-location phase-2" style="top: 25%; left: 60%;" data-name="Joliet" data-phase="2" data-type="suburban">
+                                </div>
+                                
+                                <!-- Decatur -->
+                                <div class="map-location phase-2" style="top: 55%; left: 55%;" data-name="Decatur" data-phase="2" data-type="urban">
+                                </div>
+                                
+                                <!-- Quincy -->
+                                <div class="map-location phase-2" style="top: 45%; left: 15%;" data-name="Quincy" data-phase="2" data-type="rural">
+                                </div>
+                                
+                                <!-- Carbondale -->
+                                <div class="map-location phase-3" style="top: 80%; left: 40%;" data-name="Carbondale" data-phase="3" data-type="rural">
+                                </div>
+                                
+                                <!-- Effingham -->
+                                <div class="map-location phase-3" style="top: 65%; left: 60%;" data-name="Effingham" data-phase="3" data-type="highway">
+                                </div>
+                                
+                                <!-- Galesburg -->
+                                <div class="map-location phase-3" style="top: 25%; left: 25%;" data-name="Galesburg" data-phase="3" data-type="rural">
+                                </div>
+                                
+                                <!-- Mt. Vernon -->
+                                <div class="map-location phase-3" style="top: 70%; left: 50%;" data-name="Mt. Vernon" data-phase="3" data-type="highway">
+                                </div>
+                                
+                                <!-- I-55 Corridor -->
+                                <div class="map-location phase-2" style="top: 40%; left: 50%;" data-name="I-55 Corridor Hub" data-phase="2" data-type="highway">
+                                </div>
+                                
+                                <div class="location-tooltip"></div>
+                                
+                                <div class="map-overlay demographics"></div>
+                                <div class="map-overlay ev-adoption"></div>
+                            </div>
+                            
+                            <div class="map-legend">
+                                <div class="legend-item">
+                                    <div class="legend-color phase-1"></div>
+                                    <span>Phase 1 (2025-2026)</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color phase-2"></div>
+                                    <span>Phase 2 (2026-2027)</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color phase-3"></div>
+                                    <span>Phase 3 (2027-2028)</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="map-stats">
+                            <div class="stat-card">
+                                <h4>Total Planned Hubs</h4>
+                                <div class="stat-value">15</div>
+                                <div class="stat-description">Across urban, suburban, and rural areas</div>
+                            </div>
+                            
+                            <div class="stat-card">
+                                <h4>Population Coverage</h4>
+                                <div class="stat-value">85%</div>
+                                <div class="stat-description">Of Illinois residents within 30 miles of a hub</div>
+                            </div>
+                            
+                            <div class="stat-card">
+                                <h4>Total Charging Ports</h4>
+                                <div class="stat-value">120</div>
+                                <div class="stat-description">Including 80 DC fast chargers and 40 Level 2</div>
+                            </div>
+                            
+                            <div class="stat-card">
+                                <h4>Projected Annual Usage</h4>
+                                <div class="stat-value">1.2M</div>
+                                <div class="stat-description">Charging sessions per year at full deployment</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="map-footer">
+                        <div class="map-actions">
+                            <button id="reset-btn">Reset Filters</button>
+                            <button id="download-btn" class="primary">Download Deployment Plan</button>
+                        </div>
+                        <div class="map-info">
+                            Last Updated: June 1, 2025 | Data Source: Unity Fleet Planning Division
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="component-features">
+            <h2>Key Features</h2>
+            <ul class="features-list">
+                <li>Interactive map of Illinois showing all planned charging hub locations</li>
+                <li>Color-coded visualization of the three-phase deployment timeline</li>
+                <li>Demographic data overlay showing population density and income distribution</li>
+                <li>EV adoption projection layer highlighting areas of expected growth</li>
+                <li>Filtering options by deployment phase and hub type</li>
+                <li>Detailed information for each location including specifications and timeline</li>
+                <li>Coverage statistics showing population access and charging capacity</li>
+            </ul>
+        </div>
+        
+        <a href="../index.html#mvp-showcase" class="back-to-home">
+            <i class="fas fa-arrow-left"></i> Back to MVP Showcase
+        </a>
+    </main>
+    
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <div class="logo">UNITY FLEET</div>
+                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="link-column">
+                        <h4>Navigation</h4>
+                        <a href="../index.html#what-is-the-link">What is The Link</a>
+                        <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                        <a href="../index.html#impact-equity">Impact & Equity</a>
+                        <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                        <a href="../index.html#rural-plan">Rural Revitalization</a>
+                        <a href="../index.html#mvp-showcase">MVP Showcase</a>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Contact</h4>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="tel:+12175551234">+1 (217) 555-1234</a>
+                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Legal</h4>
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Accessibility</a>
+                    </div>
+                </div>
+                
+                <div class="footer-social">
+                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Mobile navigation toggle
+        document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
+            document.querySelector('.nav-links').classList.toggle('active');
+            this.innerHTML = document.querySelector('.nav-links').classList.contains('active') 
+                ? '<i class="fas fa-times"></i>' 
+                : '<i class="fas fa-bars"></i>';
+        });
+        
+        // Deployment map interactivity
+        document.addEventListener('DOMContentLoaded', function() {
+            const mapLocations = document.querySelectorAll('.map-location');
+            const tooltip = document.querySelector('.location-tooltip');
+            const overlayButtons = document.querySelectorAll('.map-control-btn');
+            const overlays = document.querySelectorAll('.map-overlay');
+            const phaseFilters = document.querySelectorAll('.filter-option[data-phase]');
+            const typeFilters = document.querySelectorAll('.filter-option[data-type]');
+            const resetButton = document.getElementById('reset-btn');
+            
+            // Location hover effects
+            mapLocations.forEach(location => {
+                location.addEventListener('mouseenter', function(e) {
+                    const name = this.getAttribute('data-name');
+                    const phase = this.getAttribute('data-phase');
+                    const type = this.getAttribute('data-type');
+                    
+                    let phaseText = '';
+                    if (phase === '1') phaseText = 'Phase 1 (2025-2026)';
+                    else if (phase === '2') phaseText = 'Phase 2 (2026-2027)';
+                    else if (phase === '3') phaseText = 'Phase 3 (2027-2028)';
+                    
+                    let typeText = '';
+                    if (type === 'urban') typeText = 'Urban Hub';
+                    else if (type === 'suburban') typeText = 'Suburban Hub';
+                    else if (type === 'rural') typeText = 'Rural Hub';
+                    else if (type === 'highway') typeText = 'Highway Corridor Hub';
+                    
+                    tooltip.innerHTML = `
+                        <h4>${name}</h4>
+                        <p>${phaseText}</p>
+                        <p>${typeText}</p>
+                        <p>8 Charging Stations</p>
+                    `;
+                    
+                    const rect = this.getBoundingClientRect();
+                    const mapRect = document.querySelector('.map-visualization').getBoundingClientRect();
+                    
+                    tooltip.style.left = (e.clientX - mapRect.left + 20) + 'px';
+                    tooltip.style.top = (e.clientY - mapRect.top - 20) + 'px';
+                    tooltip.style.opacity = '1';
+                });
+                
+                location.addEventListener('mousemove', function(e) {
+                    const mapRect = document.querySelector('.map-visualization').getBoundingClientRect();
+                    tooltip.style.left = (e.clientX - mapRect.left + 20) + 'px';
+                    tooltip.style.top = (e.clientY - mapRect.top - 20) + 'px';
+                });
+                
+                location.addEventListener('mouseleave', function() {
+                    tooltip.style.opacity = '0';
+                });
+            });
+            
+            // Map overlay controls
+            overlayButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // Remove active class from all buttons
+                    overlayButtons.forEach(btn => btn.classList.remove('active'));
+                    
+                    // Add active class to clicked button
+                    this.classList.add('active');
+                    
+                    // Hide all overlays
+                    overlays.forEach(overlay => overlay.style.opacity = '0');
+                    
+                    // Show selected overlay
+                    const overlayType = this.getAttribute('data-overlay');
+                    if (overlayType !== 'none') {
+                        document.querySelector(`.map-overlay.${overlayType}`).style.opacity = '0.7';
+                    }
+                });
+            });
+            
+            // Phase filters
+            phaseFilters.forEach(filter => {
+                filter.addEventListener('click', function() {
+                    // Remove active class from all phase filters
+                    phaseFilters.forEach(f => f.classList.remove('active'));
+                    
+                    // Add active class to clicked filter
+                    this.classList.add('active');
+                    
+                    // Filter locations
+                    filterLocations();
+                });
+            });
+            
+            // Type filters
+            typeFilters.forEach(filter => {
+                filter.addEventListener('click', function() {
+                    // Remove active class from all type filters
+                    typeFilters.forEach(f => f.classList.remove('active'));
+                    
+                    // Add active class to clicked filter
+                    this.classList.add('active');
+                    
+                    // Filter locations
+                    filterLocations();
+                });
+            });
+            
+            // Reset filters
+            resetButton.addEventListener('click', function() {
+                // Reset phase filters
+                phaseFilters.forEach(f => f.classList.remove('active'));
+                document.querySelector('.filter-option[data-phase="all"]').classList.add('active');
+                
+                // Reset type filters
+                typeFilters.forEach(f => f.classList.remove('active'));
+                document.querySelector('.filter-option[data-type="all"]').classList.add('active');
+                
+                // Show all locations
+                mapLocations.forEach(location => {
+                    location.style.display = 'block';
+                });
+                
+                // Reset overlays
+                overlayButtons.forEach(btn => btn.classList.remove('active'));
+                document.querySelector('.map-control-btn[data-overlay="none"]').classList.add('active');
+                overlays.forEach(overlay => overlay.style.opacity = '0');
+            });
+            
+            // Filter locations based on selected filters
+            function filterLocations() {
+                const selectedPhase = document.querySelector('.filter-option[data-phase].active').getAttribute('data-phase');
+                const selectedType = document.querySelector('.filter-option[data-type].active').getAttribute('data-type');
+                
+                mapLocations.forEach(location => {
+                    const locationPhase = location.getAttribute('data-phase');
+                    const locationType = location.getAttribute('data-type');
+                    
+                    const phaseMatch = selectedPhase === 'all' || locationPhase === selectedPhase;
+                    const typeMatch = selectedType === 'all' || locationType === selectedType;
+                    
+                    if (phaseMatch && typeMatch) {
+                        location.style.display = 'block';
+                    } else {
+                        location.style.display = 'none';
+                    }
+                });
+            }
+            
+            // Download button action
+            document.getElementById('download-btn').addEventListener('click', function() {
+                alert('Deployment plan PDF would download here in the production version.');
+            });
+        });
+    </script>
+</body>
+</html>

energy-simulation.html

@@ -0,0 +1,915 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity Fleet - Energy Simulation</title>
+    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
+    <style>
+        /* MVP Component specific styles */
+        .component-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        .component-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .component-header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .component-header p {
+            font-size: 1.2rem;
+            max-width: 800px;
+            margin: 0 auto;
+            opacity: 0.8;
+        }
+        
+        .component-content {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            padding: 2rem;
+            margin-bottom: 3rem;
+            backdrop-filter: blur(10px);
+        }
+        
+        .back-to-home {
+            display: inline-block;
+            margin-top: 2rem;
+            padding: 0.8rem 1.5rem;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            border-radius: 4px;
+            font-family: var(--font-primary);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all var(--transition-medium);
+        }
+        
+        .back-to-home:hover {
+            background: rgba(0, 224, 255, 0.1);
+            transform: translateY(-3px);
+        }
+        
+        /* Energy Simulation specific styles */
+        .energy-simulation-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 1rem;
+        }
+
+        .simulation-interface {
+            width: 100%;
+            max-width: 900px;
+            background-color: #0B0B0F;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(0, 224, 255, 0.3);
+            margin-bottom: 2rem;
+        }
+
+        .simulation-header {
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
+            padding: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .simulation-header h2 {
+            margin: 0;
+            font-size: 1.5rem;
+        }
+
+        .simulation-time {
+            font-size: 1rem;
+            opacity: 0.8;
+        }
+
+        .simulation-body {
+            padding: 2rem;
+        }
+
+        .simulation-controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            justify-content: center;
+        }
+
+        .control-group {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            min-width: 200px;
+        }
+
+        .control-group h3 {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+            color: var(--accent-color-1);
+        }
+
+        .control-item {
+            margin-bottom: 1rem;
+        }
+
+        .control-item label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .control-item input[type="range"] {
+            width: 100%;
+            background: rgba(255, 255, 255, 0.1);
+            height: 6px;
+            border-radius: 3px;
+            -webkit-appearance: none;
+        }
+
+        .control-item input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: var(--accent-color-1);
+            cursor: pointer;
+        }
+
+        .control-item .value-display {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.8rem;
+            margin-top: 0.5rem;
+        }
+
+        .control-item select {
+            width: 100%;
+            padding: 0.5rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            color: white;
+        }
+
+        .simulation-visualization {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            padding: 2rem;
+            position: relative;
+            height: 400px;
+            overflow: hidden;
+        }
+
+        .energy-flow-diagram {
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+
+        .energy-node {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            font-size: 0.8rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        .energy-node:hover {
+            transform: scale(1.1);
+            z-index: 10;
+        }
+
+        .energy-node .icon {
+            font-size: 1.5rem;
+            margin-bottom: 0.3rem;
+        }
+
+        .energy-node .label {
+            font-weight: bold;
+        }
+
+        .energy-node .value {
+            font-size: 0.7rem;
+            opacity: 0.8;
+        }
+
+        .solar-node {
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 193, 7, 0.2);
+            border-color: #FFC107;
+        }
+
+        .solar-node .icon {
+            color: #FFC107;
+        }
+
+        .battery-node {
+            top: 50%;
+            left: 20%;
+            transform: translateY(-50%);
+            background: rgba(0, 224, 255, 0.2);
+            border-color: var(--accent-color-1);
+        }
+
+        .battery-node .icon {
+            color: var(--accent-color-1);
+        }
+
+        .grid-node {
+            top: 50%;
+            right: 20%;
+            transform: translateY(-50%);
+            background: rgba(156, 39, 176, 0.2);
+            border-color: #9C27B0;
+        }
+
+        .grid-node .icon {
+            color: #9C27B0;
+        }
+
+        .charging-node {
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(76, 175, 80, 0.2);
+            border-color: #4CAF50;
+        }
+
+        .charging-node .icon {
+            color: #4CAF50;
+        }
+
+        .energy-flow {
+            position: absolute;
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
+            height: 3px;
+            transform-origin: left center;
+            animation: flowPulse 2s infinite;
+        }
+
+        @keyframes flowPulse {
+            0% {
+                opacity: 0.3;
+            }
+            50% {
+                opacity: 1;
+            }
+            100% {
+                opacity: 0.3;
+            }
+        }
+
+        .solar-to-battery {
+            top: 70px;
+            left: 50%;
+            width: 150px;
+            transform: rotate(135deg);
+            background: linear-gradient(90deg, rgba(255, 193, 7, 0.5), rgba(0, 224, 255, 0.5));
+        }
+
+        .solar-to-charging {
+            top: 100px;
+            left: 50%;
+            height: 200px;
+            width: 3px;
+            transform: none;
+            background: linear-gradient(180deg, rgba(255, 193, 7, 0.5), rgba(76, 175, 80, 0.5));
+        }
+
+        .battery-to-charging {
+            bottom: 150px;
+            left: 25%;
+            width: 150px;
+            transform: rotate(45deg);
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.5), rgba(76, 175, 80, 0.5));
+        }
+
+        .grid-to-charging {
+            bottom: 150px;
+            right: 25%;
+            width: 150px;
+            transform: rotate(-45deg);
+            background: linear-gradient(90deg, rgba(156, 39, 176, 0.5), rgba(76, 175, 80, 0.5));
+        }
+
+        .grid-to-battery {
+            top: 50%;
+            left: 30%;
+            width: 40%;
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.5), rgba(156, 39, 176, 0.5));
+        }
+
+        .flow-particle {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: white;
+            animation: flowMove 3s linear infinite;
+        }
+
+        @keyframes flowMove {
+            0% {
+                left: 0;
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                left: calc(100% - 8px);
+                opacity: 0;
+            }
+        }
+
+        .simulation-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+
+        .stat-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .stat-card h4 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+            font-size: 1rem;
+            color: var(--accent-color-1);
+        }
+
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+
+        .stat-change {
+            font-size: 0.8rem;
+            display: flex;
+            align-items: center;
+        }
+
+        .stat-change.positive {
+            color: #4CAF50;
+        }
+
+        .stat-change.negative {
+            color: #F44336;
+        }
+
+        .stat-change i {
+            margin-right: 0.3rem;
+        }
+
+        .simulation-footer {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .simulation-actions {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .simulation-actions button {
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .simulation-actions button:hover {
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .simulation-actions button.primary {
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            color: #000;
+            border: none;
+        }
+
+        .simulation-actions button.primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .simulation-status {
+            font-size: 0.9rem;
+            opacity: 0.7;
+        }
+    </style>
+</head>
+<body>
+    <div class="noise-overlay"></div>
+    
+    <header>
+        <nav>
+            <div class="logo">UNITY FLEET</div>
+            <div class="nav-links">
+                <a href="../index.html#what-is-the-link">What is The Link</a>
+                <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                <a href="../index.html#impact-equity">Impact & Equity</a>
+                <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                <a href="../index.html#rural-plan">Rural Revitalization</a>
+                <a href="../index.html#mvp-showcase">MVP Showcase</a>
+            </div>
+            <div class="mobile-nav-toggle">
+                <i class="fas fa-bars"></i>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="component-container">
+        <div class="component-header">
+            <h1>ENERGY SIMULATION</h1>
+            <p>Visualize how our integrated solar and battery systems optimize energy flow, reduce emissions, and create a sustainable charging ecosystem.</p>
+        </div>
+        
+        <div class="component-content">
+            <div class="energy-simulation-container">
+                <div class="simulation-interface">
+                    <div class="simulation-header">
+                        <h2>The Link Energy Simulation</h2>
+                        <div class="simulation-time">
+                            <span id="sim-time">12:30 PM</span> | <span id="sim-date">June 15, 2025</span>
+                        </div>
+                    </div>
+                    
+                    <div class="simulation-body">
+                        <div class="simulation-controls">
+                            <div class="control-group">
+                                <h3>Environmental Factors</h3>
+                                <div class="control-item">
+                                    <label for="solar-intensity">Solar Intensity</label>
+                                    <input type="range" id="solar-intensity" min="0" max="100" value="75">
+                                    <div class="value-display">
+                                        <span>Low</span>
+                                        <span id="solar-value">75%</span>
+                                        <span>High</span>
+                                    </div>
+                                </div>
+                                <div class="control-item">
+                                    <label for="time-of-day">Time of Day</label>
+                                    <select id="time-of-day">
+                                        <option value="morning">Morning (8 AM)</option>
+                                        <option value="noon" selected>Noon (12 PM)</option>
+                                        <option value="afternoon">Afternoon (4 PM)</option>
+                                        <option value="evening">Evening (8 PM)</option>
+                                        <option value="night">Night (12 AM)</option>
+                                    </select>
+                                </div>
+                            </div>
+                            
+                            <div class="control-group">
+                                <h3>Charging Demand</h3>
+                                <div class="control-item">
+                                    <label for="station-usage">Station Usage</label>
+                                    <input type="range" id="station-usage" min="0" max="100" value="60">
+                                    <div class="value-display">
+                                        <span>Low</span>
+                                        <span id="usage-value">60%</span>
+                                        <span>High</span>
+                                    </div>
+                                </div>
+                                <div class="control-item">
+                                    <label for="charging-speed">Charging Speed</label>
+                                    <select id="charging-speed">
+                                        <option value="slow">Level 2 (19.2 kW)</option>
+                                        <option value="medium" selected>DC Fast (150 kW)</option>
+                                        <option value="fast">Ultra Fast (350 kW)</option>
+                                    </select>
+                                </div>
+                            </div>
+                            
+                            <div class="control-group">
+                                <h3>Storage Settings</h3>
+                                <div class="control-item">
+                                    <label for="battery-capacity">Battery Capacity</label>
+                                    <input type="range" id="battery-capacity" min="0" max="100" value="80">
+                                    <div class="value-display">
+                                        <span>0%</span>
+                                        <span id="battery-value">80%</span>
+                                        <span>100%</span>
+                                    </div>
+                                </div>
+                                <div class="control-item">
+                                    <label for="grid-reliance">Grid Reliance</label>
+                                    <input type="range" id="grid-reliance" min="0" max="100" value="25">
+                                    <div class="value-display">
+                                        <span>Low</span>
+                                        <span id="grid-value">25%</span>
+                                        <span>High</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="simulation-visualization">
+                            <div class="energy-flow-diagram">
+                                <div class="energy-node solar-node">
+                                    <div class="icon"><i class="fas fa-solar-panel"></i></div>
+                                    <div class="label">Solar Array</div>
+                                    <div class="value">75 kW</div>
+                                </div>
+                                
+                                <div class="energy-node battery-node">
+                                    <div class="icon"><i class="fas fa-battery-three-quarters"></i></div>
+                                    <div class="label">Battery</div>
+                                    <div class="value">80% | 240 kWh</div>
+                                </div>
+                                
+                                <div class="energy-node grid-node">
+                                    <div class="icon"><i class="fas fa-plug"></i></div>
+                                    <div class="label">Grid</div>
+                                    <div class="value">25 kW</div>
+                                </div>
+                                
+                                <div class="energy-node charging-node">
+                                    <div class="icon"><i class="fas fa-charging-station"></i></div>
+                                    <div class="label">Charging</div>
+                                    <div class="value">90 kW</div>
+                                </div>
+                                
+                                <div class="energy-flow solar-to-battery">
+                                    <div class="flow-particle" style="animation-delay: 0s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 1s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 2s;"></div>
+                                </div>
+                                
+                                <div class="energy-flow solar-to-charging">
+                                    <div class="flow-particle" style="animation-delay: 0.5s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 1.5s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 2.5s;"></div>
+                                </div>
+                                
+                                <div class="energy-flow battery-to-charging">
+                                    <div class="flow-particle" style="animation-delay: 0.2s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 1.2s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 2.2s;"></div>
+                                </div>
+                                
+                                <div class="energy-flow grid-to-charging">
+                                    <div class="flow-particle" style="animation-delay: 0.7s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 1.7s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 2.7s;"></div>
+                                </div>
+                                
+                                <div class="energy-flow grid-to-battery">
+                                    <div class="flow-particle" style="animation-delay: 0.3s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 1.3s;"></div>
+                                    <div class="flow-particle" style="animation-delay: 2.3s;"></div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="simulation-stats">
+                            <div class="stat-card">
+                                <h4>Renewable Usage</h4>
+                                <div class="stat-value">75%</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-arrow-up"></i> 12% from grid-only
+                                </div>
+                            </div>
+                            
+                            <div class="stat-card">
+                                <h4>CO₂ Reduction</h4>
+                                <div class="stat-value">68 kg</div>
+                                <div class="stat-change positive">
+                                    <i class="fas fa-arrow-up"></i> 85% from ICE vehicles
+                                </div>
+                            </div>
+                            
+                            <div class="stat-card">
+                                <h4>Operating Cost</h4>
+                                <div class="stat-value">$0.12/kWh</div>
+                                <div class="stat-change negative">
+                                    <i class="fas fa-arrow-down"></i> 40% from grid-only
+                                </div>
+                            </div>
+                            
+                            <div class="stat-card">
+                                <h4>Grid Demand</h4>
+                                <div class="stat-value">25 kW</div>
+                                <div class="stat-change negative">
+                                    <i class="fas fa-arrow-down"></i> 75% from no solar
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="simulation-footer">
+                        <div class="simulation-actions">
+                            <button id="reset-btn">Reset Simulation</button>
+                            <button id="optimize-btn" class="primary">Optimize Energy Flow</button>
+                        </div>
+                        <div class="simulation-status">
+                            System Status: Optimal | Last Updated: <span id="update-time">Just now</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="component-features">
+            <h2>Key Features</h2>
+            <ul class="features-list">
+                <li>Real-time visualization of energy flows between solar, battery, grid, and charging stations</li>
+                <li>Interactive controls to simulate different environmental conditions and usage scenarios</li>
+                <li>Automatic optimization algorithms to maximize renewable energy usage</li>
+                <li>Detailed statistics on CO₂ reduction, cost savings, and grid impact</li>
+                <li>Time-of-day simulation to model energy management across 24-hour cycles</li>
+                <li>Battery storage management with intelligent charge/discharge algorithms</li>
+                <li>Grid interaction modeling with peak shaving and demand response capabilities</li>
+            </ul>
+        </div>
+        
+        <a href="../index.html#mvp-showcase" class="back-to-home">
+            <i class="fas fa-arrow-left"></i> Back to MVP Showcase
+        </a>
+    </main>
+    
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <div class="logo">UNITY FLEET</div>
+                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="link-column">
+                        <h4>Navigation</h4>
+                        <a href="../index.html#what-is-the-link">What is The Link</a>
+                        <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                        <a href="../index.html#impact-equity">Impact & Equity</a>
+                        <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                        <a href="../index.html#rural-plan">Rural Revitalization</a>
+                        <a href="../index.html#mvp-showcase">MVP Showcase</a>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Contact</h4>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="tel:+12175551234">+1 (217) 555-1234</a>
+                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Legal</h4>
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Accessibility</a>
+                    </div>
+                </div>
+                
+                <div class="footer-social">
+                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Mobile navigation toggle
+        document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
+            document.querySelector('.nav-links').classList.toggle('active');
+            this.innerHTML = document.querySelector('.nav-links').classList.contains('active') 
+                ? '<i class="fas fa-times"></i>' 
+                : '<i class="fas fa-bars"></i>';
+        });
+        
+        // Energy simulation interactivity
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize sliders
+            const solarSlider = document.getElementById('solar-intensity');
+            const usageSlider = document.getElementById('station-usage');
+            const batterySlider = document.getElementById('battery-capacity');
+            const gridSlider = document.getElementById('grid-reliance');
+            
+            const solarValue = document.getElementById('solar-value');
+            const usageValue = document.getElementById('usage-value');
+            const batteryValue = document.getElementById('battery-value');
+            const gridValue = document.getElementById('grid-value');
+            
+            // Update values on slider change
+            solarSlider.addEventListener('input', function() {
+                solarValue.textContent = this.value + '%';
+                updateSimulation();
+            });
+            
+            usageSlider.addEventListener('input', function() {
+                usageValue.textContent = this.value + '%';
+                updateSimulation();
+            });
+            
+            batterySlider.addEventListener('input', function() {
+                batteryValue.textContent = this.value + '%';
+                updateSimulation();
+            });
+            
+            gridSlider.addEventListener('input', function() {
+                gridValue.textContent = this.value + '%';
+                updateSimulation();
+            });
+            
+            // Time of day and charging speed selectors
+            document.getElementById('time-of-day').addEventListener('change', updateSimulation);
+            document.getElementById('charging-speed').addEventListener('change', updateSimulation);
+            
+            // Button actions
+            document.getElementById('reset-btn').addEventListener('click', resetSimulation);
+            document.getElementById('optimize-btn').addEventListener('click', optimizeSimulation);
+            
+            // Update simulation based on current settings
+            function updateSimulation() {
+                const solarIntensity = parseInt(solarSlider.value);
+                const stationUsage = parseInt(usageSlider.value);
+                const batteryCapacity = parseInt(batterySlider.value);
+                const gridReliance = parseInt(gridSlider.value);
+                const timeOfDay = document.getElementById('time-of-day').value;
+                const chargingSpeed = document.getElementById('charging-speed').value;
+                
+                // Update node values
+                document.querySelector('.solar-node .value').textContent = Math.round(solarIntensity * 1.2) + ' kW';
+                document.querySelector('.battery-node .value').textContent = batteryCapacity + '% | ' + Math.round(batteryCapacity * 3) + ' kWh';
+                document.querySelector('.grid-node .value').textContent = Math.round(gridReliance * 1.2) + ' kW';
+                
+                let chargingDemand = 0;
+                if (chargingSpeed === 'slow') chargingDemand = stationUsage * 0.2;
+                else if (chargingSpeed === 'medium') chargingDemand = stationUsage * 0.6;
+                else chargingDemand = stationUsage * 1.5;
+                
+                document.querySelector('.charging-node .value').textContent = Math.round(chargingDemand) + ' kW';
+                
+                // Update stats
+                const renewablePercentage = Math.round(solarIntensity * (100 - gridReliance) / 100);
+                document.querySelector('.stat-card:nth-child(1) .stat-value').textContent = renewablePercentage + '%';
+                
+                const co2Reduction = Math.round(renewablePercentage * 0.9);
+                document.querySelector('.stat-card:nth-child(2) .stat-value').textContent = co2Reduction + ' kg';
+                
+                const operatingCost = (0.2 - (renewablePercentage * 0.001)).toFixed(2);
+                document.querySelector('.stat-card:nth-child(3) .stat-value').textContent = '$' + operatingCost + '/kWh';
+                
+                document.querySelector('.stat-card:nth-child(4) .stat-value').textContent = Math.round(gridReliance * 1.2) + ' kW';
+                
+                // Update time display based on selection
+                let timeDisplay = '';
+                switch(timeOfDay) {
+                    case 'morning': timeDisplay = '8:00 AM'; break;
+                    case 'noon': timeDisplay = '12:00 PM'; break;
+                    case 'afternoon': timeDisplay = '4:00 PM'; break;
+                    case 'evening': timeDisplay = '8:00 PM'; break;
+                    case 'night': timeDisplay = '12:00 AM'; break;
+                }
+                document.getElementById('sim-time').textContent = timeDisplay;
+                
+                // Update flow animation speeds based on energy levels
+                const flows = document.querySelectorAll('.energy-flow');
+                flows.forEach(flow => {
+                    const particles = flow.querySelectorAll('.flow-particle');
+                    particles.forEach(particle => {
+                        let speed = '3s';
+                        if (flow.classList.contains('solar-to-battery')) {
+                            speed = (4 - (solarIntensity / 33)) + 's';
+                        } else if (flow.classList.contains('solar-to-charging')) {
+                            speed = (4 - (solarIntensity / 33)) + 's';
+                        } else if (flow.classList.contains('battery-to-charging')) {
+                            speed = (4 - (batteryCapacity / 33)) + 's';
+                        } else if (flow.classList.contains('grid-to-charging')) {
+                            speed = (4 - (gridReliance / 33)) + 's';
+                        } else if (flow.classList.contains('grid-to-battery')) {
+                            speed = (4 - (gridReliance / 33)) + 's';
+                        }
+                        particle.style.animationDuration = speed;
+                    });
+                });
+                
+                // Update last updated time
+                document.getElementById('update-time').textContent = 'Just now';
+            }
+            
+            // Reset simulation to default values
+            function resetSimulation() {
+                solarSlider.value = 75;
+                usageSlider.value = 60;
+                batterySlider.value = 80;
+                gridSlider.value = 25;
+                
+                solarValue.textContent = '75%';
+                usageValue.textContent = '60%';
+                batteryValue.textContent = '80%';
+                gridValue.textContent = '25%';
+                
+                document.getElementById('time-of-day').value = 'noon';
+                document.getElementById('charging-speed').value = 'medium';
+                
+                updateSimulation();
+            }
+            
+            // Optimize energy flow based on current conditions
+            function optimizeSimulation() {
+                const timeOfDay = document.getElementById('time-of-day').value;
+                const stationUsage = parseInt(usageSlider.value);
+                
+                // Optimization logic based on time of day
+                if (timeOfDay === 'morning' || timeOfDay === 'noon') {
+                    // Maximize solar usage during daylight hours
+                    solarSlider.value = 90;
+                    solarValue.textContent = '90%';
+                    gridSlider.value = 10;
+                    gridValue.textContent = '10%';
+                } else if (timeOfDay === 'afternoon') {
+                    // Balance solar and battery in afternoon
+                    solarSlider.value = 70;
+                    solarValue.textContent = '70%';
+                    batterySlider.value = 90;
+                    batteryValue.textContent = '90%';
+                    gridSlider.value = 15;
+                    gridValue.textContent = '15%';
+                } else {
+                    // Rely on battery at night with minimal grid
+                    batterySlider.value = 95;
+                    batteryValue.textContent = '95%';
+                    solarSlider.value = 0;
+                    solarValue.textContent = '0%';
+                    gridSlider.value = 30;
+                    gridValue.textContent = '30%';
+                }
+                
+                // Adjust based on station usage
+                if (stationUsage > 80) {
+                    // High demand needs more grid support
+                    gridSlider.value = parseInt(gridSlider.value) + 15;
+                    gridValue.textContent = gridSlider.value + '%';
+                }
+                
+                updateSimulation();
+                
+                // Show optimization message
+                document.querySelector('.simulation-status').textContent = 'System Status: Optimized | Last Updated: Just now';
+            }
+            
+            // Initialize simulation
+            updateSimulation();
+        });
+    </script>
+</body>
+</html>

index.html

@@ -1,29 +1,544 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity Fleet - The Link EV Charging Network</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
 </head>
-
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-
-    <script src="index.js" type="module"></script>
-</body>
+    <div class="noise-overlay"></div>
+    
+    <header>
+        <nav>
+            <div class="logo">UNITY FLEET</div>
+            <div class="nav-links">
+                <a href="#what-is-the-link">What is The Link</a>
+                <a href="#subscription-tiers">Subscription Tiers</a>
+                <a href="#impact-equity">Impact & Equity</a>
+                <a href="#tokenization">ChainLink Tokenization</a>
+                <a href="#rural-plan">Rural Revitalization</a>
+                <a href="#mvp-showcase">MVP Showcase</a>
+            </div>
+        </nav>
+        
+        <div class="hero">
+            <div class="hero-content">
+                <h1 class="glitch-text">UNITY FLEET</h1>
+                <h2>The Link EV Charging Network</h2>
+                <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                <div class="cta-buttons">
+                    <a href="#project-overview" class="btn primary-btn">Explore The Project</a>
+                    <a href="#grant-proposal" class="btn secondary-btn">View Grant Proposal</a>
+                </div>
+            </div>
+            <div class="hero-image-container">
+                <div class="hero-image" style="background-image: url('DA9BA4EE-1541-40D5-BD7B-F3D9227808D1.png');"></div>
+            </div>
+        </div>
+    </header>
+
+    <section id="what-is-the-link" class="section-dark">
+        <div class="container">
+            <div class="section-header">
+                <h2>What is The Link?</h2>
+                <div class="section-line"></div>
+            </div>
+            <div class="content-grid">
+                <div class="text-content">
+                    <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>
+                    
+                    <div class="feature-list">
+                        <div class="feature-item">
+                            <div class="feature-icon"><i class="fas fa-bolt"></i></div>
+                            <div class="feature-text">
+                                <h3>Advanced Charging</h3>
+                                <p>Multiple DC Fast Charging ports with 150kW capability and future-ready design for heavy-duty vehicles</p>
+                            </div>
+                        </div>
+                        
+                        <div class="feature-item">
+                            <div class="feature-icon"><i class="fas fa-solar-panel"></i></div>
+                            <div class="feature-text">
+                                <h3>Solar Integration</h3>
+                                <p>On-site solar generation with battery storage for truly emissions-free charging</p>
+                            </div>
+                        </div>
+                        
+                        <div class="feature-item">
+                            <div class="feature-icon"><i class="fas fa-coffee"></i></div>
+                            <div class="feature-text">
+                                <h3>Premium Amenities</h3>
+                                <p>Elevated lounge areas with refreshments, Wi-Fi, and productivity spaces</p>
+                            </div>
+                        </div>
+                        
+                        <div class="feature-item">
+                            <div class="feature-icon"><i class="fas fa-mobile-alt"></i></div>
+                            <div class="feature-text">
+                                <h3>Smart Technology</h3>
+                                <p>AI-powered management systems and seamless mobile app integration</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="image-content">
+                    <div class="image-card">
+                        <img src="4A717E73-3287-4051-AE08-44EB1DD21F7F.png" alt="The Link Charging Hub">
+                        <div class="image-overlay">
+                            <span>The Link Charging Hub</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="subscription-tiers" class="section-gradient">
+        <div class="container">
+            <div class="section-header">
+                <h2>Unity Fleet Subscription Tiers</h2>
+                <div class="section-line"></div>
+            </div>
+            
+            <div class="subscription-cards">
+                <div class="subscription-card">
+                    <div class="card-header">
+                        <h3>FlexRide</h3>
+                        <div class="price">Starting at $299/mo</div>
+                    </div>
+                    <div class="card-content">
+                        <ul>
+                            <li>Access to shared EVs on a regular basis</li>
+                            <li>Balances affordability and convenience</li>
+                            <li>Includes insurance and maintenance</li>
+                            <li>Priority charging at The Link hubs</li>
+                            <li>Flexible booking through mobile app</li>
+                        </ul>
+                        <div class="card-cta">
+                            <a href="#" class="btn card-btn">Learn More</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="subscription-card featured">
+                    <div class="card-header">
+                        <h3>Take-Home</h3>
+                        <div class="price">Starting at $699/mo</div>
+                    </div>
+                    <div class="card-content">
+                        <ul>
+                            <li>Exclusive access to a dedicated EV</li>
+                            <li>Multiple tiers with different mileage allowances</li>
+                            <li>Comprehensive insurance coverage</li>
+                            <li>All maintenance and charging included</li>
+                            <li>Vehicle upgrades available</li>
+                        </ul>
+                        <div class="card-cta">
+                            <a href="#" class="btn card-btn">Learn More</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="subscription-card">
+                    <div class="card-header">
+                        <h3>All-Access</h3>
+                        <div class="price">Starting at $499/mo</div>
+                    </div>
+                    <div class="card-content">
+                        <ul>
+                            <li>Unlimited rides within designated areas</li>
+                            <li>Flat daily or monthly fee</li>
+                            <li>Eliminates personal vehicle reliance</li>
+                            <li>Includes all charging and maintenance</li>
+                            <li>24/7 vehicle availability</li>
+                        </ul>
+                        <div class="card-cta">
+                            <a href="#" class="btn card-btn">Learn More</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="impact-equity" class="section-dark">
+        <div class="container">
+            <div class="section-header">
+                <h2>Impact & Equity</h2>
+                <div class="section-line"></div>
+            </div>
+            
+            <div class="content-columns">
+                <div class="column">
+                    <h3>Environmental Impact</h3>
+                    <div class="impact-metric">
+                        <div class="metric-number">3-4</div>
+                        <div class="metric-text">Metric tons of CO2 reduced annually per EV</div>
+                    </div>
+                    <div class="impact-metric">
+                        <div class="metric-number">30%</div>
+                        <div class="metric-text">Energy from on-site solar generation</div>
+                    </div>
+                    <div class="impact-metric">
+                        <div class="metric-number">1,500+</div>
+                        <div class="metric-text">Metric tons of emissions avoided in Year 1</div>
+                    </div>
+                </div>
+                
+                <div class="column">
+                    <h3>Community Access Program</h3>
+                    <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>
+                    <ul class="equity-list">
+                        <li>Discounted transportation options for low-income individuals</li>
+                        <li>Partnerships with social service organizations</li>
+                        <li>Targeted outreach to underserved communities</li>
+                        <li>Simplified payment options that don't require credit cards or smartphones</li>
+                        <li>ADA-compliant physical infrastructure exceeding minimum requirements</li>
+                    </ul>
+                </div>
+                
+                <div class="column">
+                    <h3>Economic Development</h3>
+                    <div class="impact-metric">
+                        <div class="metric-number">25+</div>
+                        <div class="metric-text">Direct jobs created in Year 1</div>
+                    </div>
+                    <div class="impact-metric">
+                        <div class="metric-number">70%</div>
+                        <div class="metric-text">Procurement from Illinois-based suppliers</div>
+                    </div>
+                    <div class="impact-metric">
+                        <div class="metric-number">$7.5M</div>
+                        <div class="metric-text">Projected revenue by Year 5</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
 
-</html>
+    <section id="tokenization" class="section-gradient">
+        <div class="container">
+            <div class="section-header">
+                <h2>ChainLink Tokenization</h2>
+                <div class="section-line"></div>
+            </div>
+            
+            <div class="tokenization-content">
+                <div class="token-diagram">
+                    <div class="token-circle">
+                        <div class="token-inner">
+                            <i class="fas fa-link"></i>
+                        </div>
+                        <div class="token-orbit">
+                            <div class="orbit-item"><i class="fas fa-charging-station"></i></div>
+                            <div class="orbit-item"><i class="fas fa-car"></i></div>
+                            <div class="orbit-item"><i class="fas fa-solar-panel"></i></div>
+                            <div class="orbit-item"><i class="fas fa-users"></i></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="token-info">
+                    <h3>Asset Ownership Structure</h3>
+                    <p>The ChainLink tokenization model creates a revolutionary approach to infrastructure ownership and community investment.</p>
+                    
+                    <div class="token-benefits">
+                        <div class="benefit-item">
+                            <div class="benefit-icon"><i class="fas fa-coins"></i></div>
+                            <div class="benefit-text">Fractional ownership of charging infrastructure</div>
+                        </div>
+                        <div class="benefit-item">
+                            <div class="benefit-icon"><i class="fas fa-chart-line"></i></div>
+                            <div class="benefit-text">Community investment opportunities</div>
+                        </div>
+                        <div class="benefit-item">
+                            <div class="benefit-icon"><i class="fas fa-handshake"></i></div>
+                            <div class="benefit-text">Transparent revenue sharing</div>
+                        </div>
+                        <div class="benefit-item">
+                            <div class="benefit-icon"><i class="fas fa-shield-alt"></i></div>
+                            <div class="benefit-text">Secure blockchain verification</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="rural-plan" class="section-dark">
+        <div class="container">
+            <div class="section-header">
+                <h2>Rural Revitalization Plan</h2>
+                <div class="section-line"></div>
+            </div>
+            
+            <div class="rural-content">
+                <div class="rural-image">
+                    <img src="6120F952-C801-4C53-AFE0-BB9363A1F539.png" alt="Charging Station">
+                </div>
+                
+                <div class="rural-text">
+                    <h3>Trillion-Dollar Vision for Illinois</h3>
+                    <p>Unity Fleet's rural revitalization strategy extends beyond urban centers to transform transportation access across all of Illinois.</p>
+                    
+                    <div class="timeline">
+                        <div class="timeline-item">
+                            <div class="timeline-marker">1</div>
+                            <div class="timeline-content">
+                                <h4>Strategic Hub Placement</h4>
+                                <p>Establishing The Link charging hubs along key rural corridors</p>
+                            </div>
+                        </div>
+                        
+                        <div class="timeline-item">
+                            <div class="timeline-marker">2</div>
+                            <div class="timeline-content">
+                                <h4>Community Partnerships</h4>
+                                <p>Collaborating with local businesses and municipalities</p>
+                            </div>
+                        </div>
+                        
+                        <div class="timeline-item">
+                            <div class="timeline-marker">3</div>
+                            <div class="timeline-content">
+                                <h4>Economic Stimulus</h4>
+                                <p>Creating jobs and attracting visitors to rural communities</p>
+                            </div>
+                        </div>
+                        
+                        <div class="timeline-item">
+                            <div class="timeline-marker">4</div>
+                            <div class="timeline-content">
+                                <h4>Infrastructure Integration</h4>
+                                <p>Connecting rural areas to the statewide clean transportation network</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="grant-proposal" class="section-gradient">
+        <div class="container">
+            <div class="section-header">
+                <h2>Grant Proposal</h2>
+                <div class="section-line"></div>
+            </div>
+            
+            <div class="proposal-content">
+                <div class="proposal-overview">
+                    <h3>Illinois Department of Transportation Statewide Planning and Research Funds</h3>
+                    <div class="proposal-details">
+                        <div class="detail-item">
+                            <div class="detail-label">Funding Request</div>
+                            <div class="detail-value">$3,200,000</div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="detail-label">Matching Funds</div>
+                            <div class="detail-value">$3,800,000</div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="detail-label">Total Project Budget</div>
+                            <div class="detail-value">$7,000,000</div>
+                        </div>
+                        <div class="detail-item">
+                            <div class="detail-label">Implementation Timeline</div>
+                            <div class="detail-value">15 months</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="proposal-sections">
+                    <div class="accordion">
+                        <div class="accordion-item">
+                            <div class="accordion-header">Executive Summary</div>
+                            <div class="accordion-content">
+                                <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>
+                                <a href="#" class="read-more">Read Full Section</a>
+                            </div>
+                        </div>
+                        
+                        <div class="accordion-item">
+                            <div class="accordion-header">Project Description</div>
+                            <div class="accordion-content">
+                                <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>
+                                <a href="#" class="read-more">Read Full Section</a>
+                            </div>
+                        </div>
+                        
+                        <div class="accordion-item">
+                            <div class="accordion-header">Alignment with Illinois Initiatives</div>
+                            <div class="accordion-content">
+                                <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>
+                                <a href="#" class="read-more">Read Full Section</a>
+                            </div>
+                        </div>
+                        
+                        <div class="accordion-item">
+                            <div class="accordion-header">Implementation Plan</div>
+                            <div class="accordion-content">
+                                <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>
+                                <a href="#" class="read-more">Read Full Section</a>
+                            </div>
+                        </div>
+                        
+                        <div class="accordion-item">
+                            <div class="accordion-header">Budget and Financial Plan</div>
+                            <div class="accordion-content">
+                                <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>
+                                <a href="#" class="read-more">Read Full Section</a>
+                            </div>
+                        </div>
+                        
+                        <div class="accordion-item">
+                            <div class="accordion-header">Performance Metrics</div>
+                            <div class="accordion-content">
+                                <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>
+                                <a href="#" class="read-more">Read Full Section</a>
+                            </div>
+                        </div>
+                        
+                        <div class="accordion-item">
+                            <div class="accordion-header">Partnerships and Stakeholder Engagement</div>
+                            <div class="accordion-content">
+                                <p>Unity Fleet has established strategic partnerships with key organizations to enhance the implementation and impact of "The Link" charging network.</p>
+                                <a href="#" class="read-more">Read Full Section</a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="proposal-download">
+                        <a href="unity_fleet_complete_proposal.md" download class="btn download-btn">
+                            <i class="fas fa-download"></i> Download Full Proposal
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- MVP Showcase Section -->
+    <section id="mvp-showcase" class="section-dark">
+        <div class="container">
+            <div class="section-header">
+                <h2>MVP Showcase</h2>
+                <div class="section-line"></div>
+            </div>
+            
+            <div class="showcase-intro">
+                <p class="highlight-text">Experience the future of electric vehicle infrastructure through our interactive demonstrations of The Link ecosystem components.</p>
+            </div>
+            
+            <div class="showcase-grid">
+                <div class="showcase-card">
+                    <div class="card-icon"><i class="fas fa-mobile-alt"></i></div>
+                    <h3>Mobile Application</h3>
+                    <p>Reserve vehicles, manage your subscription, and find charging stations with our intuitive mobile interface.</p>
+                    <div class="card-actions">
+                        <a href="mvp/mobile-app.html" class="btn secondary-btn">Explore Demo</a>
+                    </div>
+                </div>
+                
+                <div class="showcase-card">
+                    <div class="card-icon"><i class="fas fa-charging-station"></i></div>
+                    <h3>Charging Hub Interface</h3>
+                    <p>Interact with The Link charging stations, monitor availability, and experience our premium amenities.</p>
+                    <div class="card-actions">
+                        <a href="mvp/charging-hub.html" class="btn secondary-btn">Explore Demo</a>
+                    </div>
+                </div>
+                
+                <div class="showcase-card">
+                    <div class="card-icon"><i class="fas fa-solar-panel"></i></div>
+                    <h3>Energy Simulation</h3>
+                    <p>Visualize how our integrated solar and battery systems optimize energy flow and reduce emissions.</p>
+                    <div class="card-actions">
+                        <a href="mvp/energy-simulation.html" class="btn secondary-btn">Explore Demo</a>
+                    </div>
+                </div>
+                
+                <div class="showcase-card">
+                    <div class="card-icon"><i class="fas fa-map-marked-alt"></i></div>
+                    <h3>Deployment Map</h3>
+                    <p>Explore our phased deployment plan across Illinois with demographic and EV adoption overlays.</p>
+                    <div class="card-actions">
+                        <a href="mvp/deployment-map.html" class="btn secondary-btn">Explore Demo</a>
+                    </div>
+                </div>
+                
+                <div class="showcase-card">
+                    <div class="card-icon"><i class="fas fa-id-card"></i></div>
+                    <h3>Subscription Portal</h3>
+                    <p>Compare subscription tiers, manage your account, and track usage through our customer portal.</p>
+                    <div class="card-actions">
+                        <a href="mvp/subscription-portal.html" class="btn secondary-btn">Explore Demo</a>
+                    </div>
+                </div>
+                
+                <div class="showcase-card">
+                    <div class="card-icon"><i class="fas fa-link"></i></div>
+                    <h3>ChainLink Tokenization</h3>
+                    <p>Discover how our tokenization model creates community ownership and sustainable funding.</p>
+                    <div class="card-actions">
+                        <a href="mvp/chainlink-demo.html" class="btn secondary-btn">Explore Demo</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <div class="logo">UNITY FLEET</div>
+                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="link-column">
+                        <h4>Navigation</h4>
+                        <a href="#what-is-the-link">What is The Link</a>
+                        <a href="#subscription-tiers">Subscription Tiers</a>
+                        <a href="#impact-equity">Impact & Equity</a>
+                        <a href="#tokenization">ChainLink Tokenization</a>
+                        <a href="#rural-plan">Rural Revitalization</a>
+                        <a href="#mvp-showcase">MVP Showcase</a>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Contact</h4>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="tel:+12175551234">+1 (217) 555-1234</a>
+                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Legal</h4>
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Accessibility</a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
+                <div class="social-links">
+                    <a href="#"><i class="fab fa-twitter"></i></a>
+                    <a href="#"><i class="fab fa-linkedin"></i></a>
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="scripts.js"></script>
+</body>
+</html>

key_components_for_demonstration.md

@@ -0,0 +1,161 @@
+# Unity Fleet MVP Key Components for Demonstration
+
+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.
+
+## 1. Mobile Application Prototype
+
+**Component Description**: A responsive web application that simulates the user experience for vehicle reservations and management.
+
+**Key Features to Implement**:
+- Vehicle browsing interface with filtering options
+- Reservation calendar and booking flow
+- User account dashboard
+- Vehicle status tracking
+- Payment simulation
+
+**Technical Approach**:
+- Develop as a responsive web application using React
+- Use mock data to simulate vehicle availability and reservations
+- Implement UI components that match Unity Fleet's visual identity
+- Create a seamless user journey from account creation to reservation completion
+
+**Demonstration Value**:
+- Shows the user-facing aspect of the business model
+- Demonstrates ease of access for potential customers
+- Illustrates the subscription model in action
+- Provides tangible example of service for grant reviewers
+
+## 2. Charging Hub Management Dashboard
+
+**Component Description**: An administrative interface that demonstrates how charging infrastructure is monitored and managed.
+
+**Key Features to Implement**:
+- Real-time status monitoring of charging stations
+- Energy usage analytics and visualizations
+- Maintenance scheduling and alerts
+- User access management
+- Revenue tracking
+
+**Technical Approach**:
+- Develop as a web-based dashboard using React and data visualization libraries
+- Create simulated data streams for charging activity
+- Implement interactive maps showing charging hub locations
+- Design responsive layouts for different device sizes
+
+**Demonstration Value**:
+- Illustrates the operational efficiency of the charging network
+- Shows how data is leveraged for system optimization
+- Demonstrates the integration of business and technical operations
+- Highlights the scalability of the infrastructure model
+
+## 3. Energy Management Simulation
+
+**Component Description**: A visual simulation showing how solar generation, battery storage, and grid interaction work together in the charging ecosystem.
+
+**Key Features to Implement**:
+- Solar energy generation visualization based on time of day and weather
+- Battery charge/discharge cycles
+- Grid interaction during peak/off-peak times
+- Energy flow animations
+- Cost and carbon savings calculations
+
+**Technical Approach**:
+- Develop using JavaScript with animation libraries
+- Create data models that accurately represent energy flows
+- Design intuitive visualizations that explain complex energy concepts
+- Implement time controls to demonstrate system behavior under different conditions
+
+**Demonstration Value**:
+- Demonstrates the renewable energy integration central to the proposal
+- Illustrates how the system reduces carbon emissions
+- Shows the economic benefits of the energy approach
+- Explains technical concepts in an accessible way
+
+## 4. Subscription Management Portal
+
+**Component Description**: A demonstration of the subscription business model showing different tiers, pricing, and customer management.
+
+**Key Features to Implement**:
+- Subscription tier comparison interface
+- Customer management dashboard
+- Usage tracking and analytics
+- Billing simulation
+- Upgrade/downgrade pathways
+
+**Technical Approach**:
+- Develop as a web application with both customer and admin views
+- Create sample customer profiles and subscription data
+- Implement interactive elements to explore different subscription scenarios
+- Design clear visualizations of subscription economics
+
+**Demonstration Value**:
+- Illustrates the financial sustainability of the business model
+- Shows the customer value proposition at different price points
+- Demonstrates how the system scales with customer growth
+- Highlights the recurring revenue aspects of the model
+
+## 5. Interactive Deployment Map
+
+**Component Description**: A geographic visualization showing the planned deployment of charging hubs across Illinois with associated data and timelines.
+
+**Key Features to Implement**:
+- Interactive map of Illinois with planned hub locations
+- Phased deployment timeline visualization
+- Population coverage analytics
+- Infrastructure impact metrics
+- EV adoption projections by region
+
+**Technical Approach**:
+- Develop using mapping libraries (Leaflet or Google Maps API)
+- Implement data overlays for different metrics
+- Create timeline controls to show deployment phases
+- Design pop-up information panels for each location
+
+**Demonstration Value**:
+- Demonstrates the strategic geographic approach
+- Shows how the network will grow over time
+- Illustrates the statewide impact of the project
+- Connects abstract concepts to specific locations
+
+## 6. ChainLink Tokenization Demonstration
+
+**Component Description**: A simplified demonstration of how the tokenization concept works for asset ownership and value distribution.
+
+**Key Features to Implement**:
+- Token allocation visualization
+- Asset ownership representation
+- Value flow diagrams
+- Simulated token transactions
+- Stakeholder dashboard
+
+**Technical Approach**:
+- Develop as an interactive web application
+- Create simplified blockchain visualization
+- Implement animations showing token distribution and value flows
+- Design intuitive explanations of complex tokenization concepts
+
+**Demonstration Value**:
+- Explains the innovative financial model
+- Demonstrates how community ownership works
+- Shows the long-term value creation mechanism
+- Illustrates the unique aspects of Unity Fleet's approach
+
+## Development Priorities and Timeline
+
+### Phase 1 (Weeks 1-2)
+- Mobile Application Prototype
+- Interactive Deployment Map
+
+### Phase 2 (Weeks 3-4)
+- Charging Hub Management Dashboard
+- Subscription Management Portal
+
+### Phase 3 (Weeks 5-6)
+- Energy Management Simulation
+- ChainLink Tokenization Demonstration
+
+## Integration Strategy
+
+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.
+
+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

@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity Fleet - Mobile Application</title>
+    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
+    <style>
+        /* MVP Component specific styles */
+        .component-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        .component-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .component-header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .component-header p {
+            font-size: 1.2rem;
+            max-width: 800px;
+            margin: 0 auto;
+            opacity: 0.8;
+        }
+        
+        .component-content {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            padding: 2rem;
+            margin-bottom: 3rem;
+            backdrop-filter: blur(10px);
+        }
+        
+        .back-to-home {
+            display: inline-block;
+            margin-top: 2rem;
+            padding: 0.8rem 1.5rem;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            border-radius: 4px;
+            font-family: var(--font-primary);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all var(--transition-medium);
+        }
+        
+        .back-to-home:hover {
+            background: rgba(0, 224, 255, 0.1);
+            transform: translateY(-3px);
+        }
+        
+        /* Responsive iframe container */
+        .iframe-container {
+            position: relative;
+            width: 100%;
+            height: 0;
+            padding-bottom: 56.25%; /* 16:9 aspect ratio */
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        
+        .iframe-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        /* Mobile App specific styles */
+        .mobile-app-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 2rem;
+        }
+
+        .mobile-app-frame {
+            width: 375px;
+            height: 667px;
+            background-color: #000;
+            border-radius: 30px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            border: 10px solid #222;
+            margin-bottom: 2rem;
+        }
+
+        .mobile-app-content {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .mobile-app-content div {
+            width: 100%;
+            height: 100%;
+            background-color: #0B0B0F;
+            color: white;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .app-header {
+            padding: 1rem;
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .app-header h2 {
+            margin: 0;
+            font-size: 1.2rem;
+        }
+
+        .app-body {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+        }
+
+        .app-nav {
+            display: flex;
+            justify-content: space-around;
+            padding: 0.8rem 0;
+            background-color: rgba(0, 0, 0, 0.8);
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .nav-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 0.7rem;
+        }
+
+        .nav-item i {
+            font-size: 1.2rem;
+            margin-bottom: 0.3rem;
+            color: var(--accent-color-1);
+        }
+
+        /* App content styles */
+        .vehicle-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .vehicle-card h3 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+            font-size: 1.1rem;
+        }
+
+        .vehicle-card p {
+            margin: 0.3rem 0;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .vehicle-card .card-footer {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 1rem;
+        }
+
+        .vehicle-card .btn {
+            padding: 0.5rem 1rem;
+            font-size: 0.8rem;
+            border-radius: 4px;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            color: #000;
+            border: none;
+            cursor: pointer;
+        }
+
+        .vehicle-card .price {
+            font-weight: bold;
+            color: var(--accent-color-1);
+        }
+
+        .search-bar {
+            display: flex;
+            margin-bottom: 1rem;
+        }
+
+        .search-bar input {
+            flex: 1;
+            padding: 0.8rem;
+            border-radius: 8px 0 0 8px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.05);
+            color: white;
+        }
+
+        .search-bar button {
+            padding: 0.8rem;
+            border-radius: 0 8px 8px 0;
+            border: none;
+            background: var(--accent-color-1);
+            color: #000;
+        }
+
+        .filter-options {
+            display: flex;
+            overflow-x: auto;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+        }
+
+        .filter-option {
+            padding: 0.5rem 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            margin-right: 0.5rem;
+            white-space: nowrap;
+            font-size: 0.8rem;
+        }
+
+        .filter-option.active {
+            background: rgba(0, 224, 255, 0.2);
+            border-color: var(--accent-color-1);
+            color: var(--accent-color-1);
+        }
+    </style>
+</head>
+<body>
+    <div class="noise-overlay"></div>
+    
+    <header>
+        <nav>
+            <div class="logo">UNITY FLEET</div>
+            <div class="nav-links">
+                <a href="../index.html#what-is-the-link">What is The Link</a>
+                <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                <a href="../index.html#impact-equity">Impact & Equity</a>
+                <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                <a href="../index.html#rural-plan">Rural Revitalization</a>
+                <a href="../index.html#mvp-showcase">MVP Showcase</a>
+            </div>
+            <div class="mobile-nav-toggle">
+                <i class="fas fa-bars"></i>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="component-container">
+        <div class="component-header">
+            <h1>MOBILE APPLICATION</h1>
+            <p>Experience our intuitive mobile interface for reserving vehicles, managing your subscription, and finding charging stations across Illinois.</p>
+        </div>
+        
+        <div class="component-content">
+            <div class="mobile-app-container">
+                <div class="mobile-app-frame">
+                    <div class="mobile-app-content">
+                        <div>
+                            <div class="app-header">
+                                <h2>Unity Fleet</h2>
+                                <i class="fas fa-user-circle"></i>
+                            </div>
+                            <div class="app-body">
+                                <div class="search-bar">
+                                    <input type="text" placeholder="Search vehicles...">
+                                    <button><i class="fas fa-search"></i></button>
+                                </div>
+                                
+                                <div class="filter-options">
+                                    <div class="filter-option active">All Vehicles</div>
+                                    <div class="filter-option">Sedans</div>
+                                    <div class="filter-option">SUVs</div>
+                                    <div class="filter-option">Luxury</div>
+                                    <div class="filter-option">Near Me</div>
+                                </div>
+                                
+                                <div class="vehicle-card">
+                                    <h3>Tesla Model 3</h3>
+                                    <p>Electric Sedan • 358 mi range</p>
+                                    <p>Available at: Downtown Springfield Hub</p>
+                                    <div class="card-footer">
+                                        <span class="price">$75/day</span>
+                                        <button class="btn">Reserve</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="vehicle-card">
+                                    <h3>Rivian R1S</h3>
+                                    <p>Electric SUV • 316 mi range</p>
+                                    <p>Available at: Champaign-Urbana Hub</p>
+                                    <div class="card-footer">
+                                        <span class="price">$95/day</span>
+                                        <button class="btn">Reserve</button>
+                                    </div>
+                                </div>
+                                
+                                <div class="vehicle-card">
+                                    <h3>Lucid Air</h3>
+                                    <p>Electric Luxury • 520 mi range</p>
+                                    <p>Available at: Bloomington-Normal Hub</p>
+                                    <div class="card-footer">
+                                        <span class="price">$120/day</span>
+                                        <button class="btn">Reserve</button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="app-nav">
+                                <div class="nav-item">
+                                    <i class="fas fa-home"></i>
+                                    <span>Home</span>
+                                </div>
+                                <div class="nav-item">
+                                    <i class="fas fa-car"></i>
+                                    <span>Vehicles</span>
+                                </div>
+                                <div class="nav-item">
+                                    <i class="fas fa-map-marker-alt"></i>
+                                    <span>Map</span>
+                                </div>
+                                <div class="nav-item">
+                                    <i class="fas fa-calendar-alt"></i>
+                                    <span>Bookings</span>
+                                </div>
+                                <div class="nav-item">
+                                    <i class="fas fa-cog"></i>
+                                    <span>Settings</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="component-features">
+            <h2>Key Features</h2>
+            <ul class="features-list">
+                <li>Intuitive vehicle browsing and filtering by type, range, and location</li>
+                <li>Seamless reservation system with calendar integration</li>
+                <li>Real-time vehicle availability and charging status</li>
+                <li>Subscription management and billing dashboard</li>
+                <li>Interactive map showing charging stations and vehicle locations</li>
+                <li>Trip planning with charging stops automatically calculated</li>
+                <li>Push notifications for reservation reminders and charging updates</li>
+            </ul>
+        </div>
+        
+        <a href="../index.html#mvp-showcase" class="back-to-home">
+            <i class="fas fa-arrow-left"></i> Back to MVP Showcase
+        </a>
+    </main>
+    
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <div class="logo">UNITY FLEET</div>
+                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="link-column">
+                        <h4>Navigation</h4>
+                        <a href="../index.html#what-is-the-link">What is The Link</a>
+                        <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                        <a href="../index.html#impact-equity">Impact & Equity</a>
+                        <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                        <a href="../index.html#rural-plan">Rural Revitalization</a>
+                        <a href="../index.html#mvp-showcase">MVP Showcase</a>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Contact</h4>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="tel:+12175551234">+1 (217) 555-1234</a>
+                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Legal</h4>
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Accessibility</a>
+                    </div>
+                </div>
+                
+                <div class="footer-social">
+                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Mobile navigation toggle
+        document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
+            document.querySelector('.nav-links').classList.toggle('active');
+            this.innerHTML = document.querySelector('.nav-links').classList.contains('active') 
+                ? '<i class="fas fa-times"></i>' 
+                : '<i class="fas fa-bars"></i>';
+        });
+        
+        // Component loading logic
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('Mobile App component loaded');
+        });
+    </script>
+</body>
+</html>

mvp-showcase-section.html

@@ -0,0 +1,69 @@
+<!-- MVP Showcase Section -->
+<section id="mvp-showcase" class="section-dark">
+    <div class="container">
+        <div class="section-header">
+            <h2>MVP Showcase</h2>
+            <div class="section-line"></div>
+        </div>
+        
+        <div class="showcase-intro">
+            <p class="highlight-text">Experience the future of electric vehicle infrastructure through our interactive demonstrations of The Link ecosystem components.</p>
+        </div>
+        
+        <div class="showcase-grid">
+            <div class="showcase-card">
+                <div class="card-icon"><i class="fas fa-mobile-alt"></i></div>
+                <h3>Mobile Application</h3>
+                <p>Reserve vehicles, manage your subscription, and find charging stations with our intuitive mobile interface.</p>
+                <div class="card-actions">
+                    <a href="mvp/mobile-app.html" class="btn secondary-btn">Explore Demo</a>
+                </div>
+            </div>
+            
+            <div class="showcase-card">
+                <div class="card-icon"><i class="fas fa-charging-station"></i></div>
+                <h3>Charging Hub Interface</h3>
+                <p>Interact with The Link charging stations, monitor availability, and experience our premium amenities.</p>
+                <div class="card-actions">
+                    <a href="mvp/charging-hub.html" class="btn secondary-btn">Explore Demo</a>
+                </div>
+            </div>
+            
+            <div class="showcase-card">
+                <div class="card-icon"><i class="fas fa-solar-panel"></i></div>
+                <h3>Energy Simulation</h3>
+                <p>Visualize how our integrated solar and battery systems optimize energy flow and reduce emissions.</p>
+                <div class="card-actions">
+                    <a href="mvp/energy-simulation.html" class="btn secondary-btn">Explore Demo</a>
+                </div>
+            </div>
+            
+            <div class="showcase-card">
+                <div class="card-icon"><i class="fas fa-map-marked-alt"></i></div>
+                <h3>Deployment Map</h3>
+                <p>Explore our phased deployment plan across Illinois with demographic and EV adoption overlays.</p>
+                <div class="card-actions">
+                    <a href="mvp/deployment-map.html" class="btn secondary-btn">Explore Demo</a>
+                </div>
+            </div>
+            
+            <div class="showcase-card">
+                <div class="card-icon"><i class="fas fa-id-card"></i></div>
+                <h3>Subscription Portal</h3>
+                <p>Compare subscription tiers, manage your account, and track usage through our customer portal.</p>
+                <div class="card-actions">
+                    <a href="mvp/subscription-portal.html" class="btn secondary-btn">Explore Demo</a>
+                </div>
+            </div>
+            
+            <div class="showcase-card">
+                <div class="card-icon"><i class="fas fa-link"></i></div>
+                <h3>ChainLink Tokenization</h3>
+                <p>Discover how our tokenization model creates community ownership and sustainable funding.</p>
+                <div class="card-actions">
+                    <a href="mvp/chainlink-demo.html" class="btn secondary-btn">Explore Demo</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

mvp_requirements_analysis.md

@@ -0,0 +1,152 @@
+# Unity Fleet MVP Requirements Analysis
+
+## Overview
+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.
+
+## Key MVP Components Needed
+
+### 1. User-Facing Applications
+
+#### Mobile Application for Vehicle Reservations
+- **Purpose**: Allow users to browse, reserve, and manage EV rentals
+- **Core Features**:
+  - User registration and authentication
+  - Vehicle browsing and filtering
+  - Reservation system with calendar integration
+  - Payment simulation
+  - Vehicle status tracking
+  - Trip planning with charging stops
+
+#### Charging Hub Interface
+- **Purpose**: Demonstrate the user experience at charging hubs
+- **Core Features**:
+  - Charging station status and availability
+  - User authentication for charging access
+  - Payment processing simulation
+  - Energy usage tracking
+  - Lounge services information
+
+### 2. Backend Management Systems
+
+#### Fleet Management Dashboard
+- **Purpose**: Showcase how Unity Fleet manages vehicle operations
+- **Core Features**:
+  - Vehicle tracking and status monitoring
+  - Maintenance scheduling
+  - Utilization analytics
+  - Battery health monitoring
+  - Route optimization
+
+#### Charging Infrastructure Management
+- **Purpose**: Demonstrate management of charging network
+- **Core Features**:
+  - Charging station status monitoring
+  - Energy usage analytics
+  - Grid integration simulation
+  - Maintenance tracking
+  - Demand forecasting
+
+### 3. Technology Integration Demonstrations
+
+#### Solar and Battery Integration
+- **Purpose**: Show how renewable energy powers the charging infrastructure
+- **Core Features**:
+  - Solar generation simulation
+  - Battery storage management
+  - Grid interaction modeling
+  - Energy flow visualization
+  - Optimization algorithms
+
+#### Autonomous Vehicle Features
+- **Purpose**: Demonstrate autonomous capabilities for fleet management
+- **Core Features**:
+  - Vehicle repositioning simulation
+  - Autonomous charging demonstration
+  - Safety protocol visualization
+  - Remote monitoring interface
+
+### 4. Financial and Business Models
+
+#### Subscription Management System
+- **Purpose**: Showcase the subscription business model
+- **Core Features**:
+  - Subscription tier management
+  - Billing simulation
+  - Usage tracking
+  - Customer analytics
+  - Upgrade/downgrade pathways
+
+#### Tokenization Demonstration
+- **Purpose**: Illustrate the ChainLink tokenization concept
+- **Core Features**:
+  - Token allocation visualization
+  - Asset ownership representation
+  - Value tracking simulation
+  - Transaction demonstration
+  - Stakeholder dashboard
+
+## Technical Requirements
+
+### Development Platforms
+- Web applications for dashboards and management interfaces
+- Mobile application prototypes (responsive web or native)
+- Data visualization tools for analytics and monitoring
+- Simulation environments for energy and autonomous systems
+
+### Integration Points
+- Authentication systems across all platforms
+- Data sharing between fleet and charging management
+- Energy management integration with fleet operations
+- Financial systems connection to operational platforms
+
+### User Experience Considerations
+- Consistent branding across all interfaces
+- Intuitive navigation and information architecture
+- Clear visualization of complex data
+- Accessibility for diverse users
+- Mobile-first design for user-facing applications
+
+## Demonstration Requirements
+
+### Interactive Demos
+- Live demonstrations of reservation process
+- Real-time monitoring of simulated fleet operations
+- Interactive energy flow visualizations
+- Walkthrough of subscription management
+
+### Visual Materials
+- System architecture diagrams
+- User journey maps
+- Financial model visualizations
+- Geographic deployment maps
+- Technology integration schematics
+
+## Priority Assessment
+
+### Highest Priority MVPs (Essential for Grant Demonstration)
+1. Mobile Application for Vehicle Reservations
+2. Charging Hub Interface
+3. Fleet Management Dashboard
+4. Subscription Management System
+
+### Secondary Priority (Valuable for Comprehensive Understanding)
+1. Charging Infrastructure Management
+2. Solar and Battery Integration
+3. Tokenization Demonstration
+
+### Future Development (Post-Grant Approval)
+1. Autonomous Vehicle Features
+2. Advanced Analytics Platforms
+3. Full Integration Testing Environment
+
+## Development Approach
+
+The development of these MVPs should follow these principles:
+- Focus on visual impact and user experience
+- Use simulated data where real-time data isn't available
+- Prioritize demonstrating concepts over full functionality
+- Create modular components that can be expanded later
+- Ensure all demonstrations align with grant proposal claims
+- Balance technical accuracy with accessibility for non-technical reviewers
+
+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

@@ -0,0 +1,335 @@
+// Main JavaScript functionality for Unity Fleet website
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize animations and interactions
+    initScrollAnimations();
+    initAccordion();
+    initParallaxEffect();
+    initHeroAnimation();
+    
+    // Mobile navigation toggle
+    const navLinks = document.querySelector('.nav-links');
+    const mobileNavToggle = document.createElement('div');
+    mobileNavToggle.className = 'mobile-nav-toggle';
+    mobileNavToggle.innerHTML = '<i class="fas fa-bars"></i>';
+    document.querySelector('nav').appendChild(mobileNavToggle);
+    
+    mobileNavToggle.addEventListener('click', function() {
+        navLinks.classList.toggle('active');
+        this.innerHTML = navLinks.classList.contains('active') 
+            ? '<i class="fas fa-times"></i>' 
+            : '<i class="fas fa-bars"></i>';
+    });
+});
+
+// Scroll animations for elements
+function initScrollAnimations() {
+    const animatedElements = document.querySelectorAll('.section-header, .feature-item, .subscription-card, .impact-metric, .token-diagram, .rural-content, .timeline-item');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, {
+        threshold: 0.1
+    });
+    
+    animatedElements.forEach(element => {
+        element.classList.add('pre-animation');
+        observer.observe(element);
+    });
+    
+    // Add CSS for animations
+    const style = document.createElement('style');
+    style.textContent = `
+        .pre-animation {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: opacity 0.6s ease, transform 0.6s ease;
+        }
+        
+        .animate {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        .subscription-card.pre-animation {
+            transform: translateY(50px);
+            transition-delay: calc(var(--animation-order, 0) * 0.1s);
+        }
+        
+        .feature-item.pre-animation {
+            transform: translateX(-30px);
+            transition-delay: calc(var(--animation-order, 0) * 0.1s);
+        }
+        
+        .timeline-item.pre-animation {
+            transform: translateX(-30px);
+            transition-delay: calc(var(--animation-order, 0) * 0.15s);
+        }
+    `;
+    document.head.appendChild(style);
+    
+    // Set animation order for staggered animations
+    document.querySelectorAll('.subscription-card').forEach((card, index) => {
+        card.style.setProperty('--animation-order', index);
+    });
+    
+    document.querySelectorAll('.feature-item').forEach((item, index) => {
+        item.style.setProperty('--animation-order', index);
+    });
+    
+    document.querySelectorAll('.timeline-item').forEach((item, index) => {
+        item.style.setProperty('--animation-order', index);
+    });
+}
+
+// Accordion functionality for grant proposal section
+function initAccordion() {
+    const accordionItems = document.querySelectorAll('.accordion-item');
+    
+    accordionItems.forEach(item => {
+        const header = item.querySelector('.accordion-header');
+        const content = item.querySelector('.accordion-content');
+        
+        header.addEventListener('click', () => {
+            // Close all other accordion items
+            accordionItems.forEach(otherItem => {
+                if (otherItem !== item && otherItem.classList.contains('active')) {
+                    otherItem.classList.remove('active');
+                    otherItem.querySelector('.accordion-content').style.maxHeight = '0px';
+                }
+            });
+            
+            // Toggle current item
+            item.classList.toggle('active');
+            
+            if (item.classList.contains('active')) {
+                content.style.display = 'block';
+                content.style.maxHeight = content.scrollHeight + 'px';
+            } else {
+                content.style.maxHeight = '0px';
+                setTimeout(() => {
+                    content.style.display = 'none';
+                }, 300);
+            }
+        });
+    });
+    
+    // Open first accordion item by default
+    if (accordionItems.length > 0) {
+        accordionItems[0].classList.add('active');
+        const firstContent = accordionItems[0].querySelector('.accordion-content');
+        firstContent.style.display = 'block';
+        firstContent.style.maxHeight = firstContent.scrollHeight + 'px';
+    }
+    
+    // Add CSS for accordion animations
+    const style = document.createElement('style');
+    style.textContent = `
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+// Parallax effect for sections
+function initParallaxEffect() {
+    window.addEventListener('scroll', () => {
+        const scrollPosition = window.pageYOffset;
+        
+        // Parallax for hero section
+        const heroImage = document.querySelector('.hero-image');
+        if (heroImage) {
+            heroImage.style.transform = `translateY(${scrollPosition * 0.4}px)`;
+        }
+        
+        // Subtle parallax for section backgrounds
+        document.querySelectorAll('.section-gradient').forEach(section => {
+            const sectionTop = section.offsetTop;
+            const sectionHeight = section.offsetHeight;
+            const sectionMiddle = sectionTop + sectionHeight / 2;
+            const distanceFromMiddle = scrollPosition - sectionMiddle;
+            const parallaxValue = distanceFromMiddle * 0.05;
+            
+            section.style.backgroundPosition = `center ${50 + parallaxValue}%`;
+        });
+    });
+}
+
+// Hero section animations
+function initHeroAnimation() {
+    const heroContent = document.querySelector('.hero-content');
+    const heroElements = heroContent.querySelectorAll('h1, h2, p, .cta-buttons');
+    
+    // Add CSS for hero animations
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .hero-animate {
+            animation: fadeInUp 0.8s forwards;
+            opacity: 0;
+        }
+    `;
+    document.head.appendChild(style);
+    
+    // Apply staggered animations to hero elements
+    heroElements.forEach((element, index) => {
+        element.classList.add('hero-animate');
+        element.style.animationDelay = `${0.3 + (index * 0.2)}s`;
+    });
+    
+    // Add hover effect to CTA buttons
+    document.querySelectorAll('.cta-buttons .btn').forEach(button => {
+        button.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-5px)';
+            this.style.boxShadow = '0 15px 30px rgba(0, 224, 255, 0.3)';
+        });
+        
+        button.addEventListener('mouseleave', function() {
+            this.style.transform = '';
+            this.style.boxShadow = '';
+        });
+    });
+}
+
+// Add smooth scrolling for navigation links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        
+        const targetId = this.getAttribute('href');
+        const targetElement = document.querySelector(targetId);
+        
+        if (targetElement) {
+            // Close mobile navigation if open
+            document.querySelector('.nav-links').classList.remove('active');
+            document.querySelector('.mobile-nav-toggle').innerHTML = '<i class="fas fa-bars"></i>';
+            
+            // Scroll to target
+            window.scrollTo({
+                top: targetElement.offsetTop - 80, // Offset for fixed header
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+
+// Add fixed navigation on scroll
+window.addEventListener('scroll', function() {
+    const nav = document.querySelector('nav');
+    if (window.scrollY > 100) {
+        nav.classList.add('nav-scrolled');
+    } else {
+        nav.classList.remove('nav-scrolled');
+    }
+});
+
+// Add CSS for fixed navigation
+const navStyle = document.createElement('style');
+navStyle.textContent = `
+    .nav-scrolled {
+        position: fixed;
+        background: rgba(11, 11, 15, 0.9);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
+        animation: slideDown 0.3s forwards;
+    }
+    
+    @keyframes slideDown {
+        from {
+            transform: translateY(-100%);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+    
+    @media (max-width: 768px) {
+        .mobile-nav-toggle {
+            display: block;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: var(--accent-color-1);
+        }
+        
+        .nav-links {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            background: rgba(11, 11, 15, 0.95);
+            flex-direction: column;
+            padding: 1rem 0;
+            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+            transition: clip-path 0.4s ease;
+        }
+        
+        .nav-links.active {
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+        }
+        
+        .nav-links a {
+            padding: 1rem 2rem;
+        }
+    }
+`;
+document.head.appendChild(navStyle);
+
+// Add token orbit animation
+const orbitStyle = document.createElement('style');
+orbitStyle.textContent = `
+    .orbit-item {
+        transition: transform 0.3s ease, background 0.3s ease;
+    }
+    
+    .orbit-item:hover {
+        transform: scale(1.2) !important;
+        background: var(--accent-color-1);
+        color: var(--bg-color);
+    }
+`;
+document.head.appendChild(orbitStyle);
+
+// Add hover effects to image cards
+document.querySelectorAll('.image-card').forEach(card => {
+    card.addEventListener('mouseenter', function() {
+        this.querySelector('img').style.transform = 'scale(1.05)';
+        this.querySelector('.image-overlay').style.opacity = '1';
+    });
+    
+    card.addEventListener('mouseleave', function() {
+        this.querySelector('img').style.transform = 'scale(1)';
+        this.querySelector('.image-overlay').style.opacity = '0.8';
+    });
+});
+
+// Add CSS for image card hover effects
+const imageCardStyle = document.createElement('style');
+imageCardStyle.textContent = `
+    .image-card img {
+        transition: transform 0.5s ease;
+    }
+    
+    .image-overlay {
+        opacity: 0.8;
+        transition: opacity 0.3s ease;
+    }
+`;
+document.head.appendChild(imageCardStyle);

showcase-styles.css

@@ -0,0 +1,91 @@
+/* Showcase Section Styles */
+.showcase-intro {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.showcase-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-bottom: 2rem;
+}
+
+.showcase-card {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 30px;
+    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+.showcase-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(0, 224, 255, 0.05) 0%, rgba(53, 242, 219, 0.05) 100%);
+    z-index: -1;
+}
+
+.showcase-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.showcase-card:hover::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background: var(--gradient-2);
+}
+
+.card-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-color-1);
+    text-align: center;
+}
+
+.showcase-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.showcase-card p {
+    margin-bottom: 1.5rem;
+    opacity: 0.8;
+    flex-grow: 1;
+}
+
+.card-actions {
+    margin-top: auto;
+    text-align: center;
+}
+
+.card-actions .btn {
+    width: 100%;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .showcase-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .showcase-card {
+        padding: 20px;
+    }
+}

styles.css

@@ -0,0 +1,1119 @@
+/* Base Styles and Variables */
+@import url('showcase-styles.css');
+:root {
+    --bg-color: #0B0B0F;
+    --text-color: #ffffff;
+    --accent-color-1: #00E0FF;
+    --accent-color-2: #35F2DB;
+    --card-bg: rgba(255, 255, 255, 0.05);
+    --gradient-1: linear-gradient(135deg, rgba(0, 224, 255, 0.1) 0%, rgba(53, 242, 219, 0.1) 100%);
+    --gradient-2: linear-gradient(135deg, rgba(0, 224, 255, 0.8) 0%, rgba(53, 242, 219, 0.8) 100%);
+    --metallic-gradient: linear-gradient(135deg, #c0c0c0 0%, #f5f5f5 50%, #c0c0c0 100%);
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
+    --font-primary: 'Space Grotesk', sans-serif;
+    --font-secondary: 'Inter', sans-serif;
+    --transition-slow: 0.5s ease;
+    --transition-medium: 0.3s ease;
+    --transition-fast: 0.15s ease;
+}
+
+/* Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-secondary);
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    line-height: 1.6;
+    overflow-x: hidden;
+    position: relative;
+}
+
+.noise-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    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==');
+    opacity: 0.03;
+    z-index: 1000;
+    pointer-events: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-primary);
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+p {
+    margin-bottom: 1rem;
+}
+
+a {
+    color: var(--accent-color-1);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+a:hover {
+    color: var(--accent-color-2);
+}
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+.btn {
+    display: inline-block;
+    padding: 0.8rem 1.5rem;
+    border-radius: 4px;
+    font-family: var(--font-primary);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all var(--transition-medium);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+.primary-btn {
+    background: var(--gradient-2);
+    color: var(--bg-color);
+    border: none;
+}
+
+.primary-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 224, 255, 0.2);
+    color: var(--bg-color);
+}
+
+.secondary-btn {
+    background: transparent;
+    color: var(--accent-color-1);
+    border: 1px solid var(--accent-color-1);
+}
+
+.secondary-btn:hover {
+    background: rgba(0, 224, 255, 0.1);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 224, 255, 0.1);
+    color: var(--accent-color-1);
+}
+
+.section-dark {
+    background-color: var(--bg-color);
+    padding: 6rem 0;
+    position: relative;
+}
+
+.section-gradient {
+    background: var(--gradient-1);
+    padding: 6rem 0;
+    position: relative;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.section-header h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    position: relative;
+    display: inline-block;
+}
+
+.section-line {
+    width: 80px;
+    height: 3px;
+    background: var(--accent-color-1);
+    margin: 0 auto;
+}
+
+/* Navigation */
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 2rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 100;
+    background: rgba(11, 11, 15, 0.8);
+    backdrop-filter: blur(10px);
+}
+
+.logo {
+    font-family: var(--font-primary);
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: 2px;
+    color: var(--accent-color-1);
+}
+
+.nav-links {
+    display: flex;
+    gap: 1.5rem;
+}
+
+.nav-links a {
+    color: var(--text-color);
+    font-family: var(--font-primary);
+    font-size: 0.9rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: color var(--transition-fast);
+}
+
+.nav-links a:hover {
+    color: var(--accent-color-1);
+}
+
+/* Hero Section */
+.hero {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    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%);
+    z-index: 1;
+}
+
+.hero-content {
+    width: 50%;
+    padding-left: 2rem;
+    position: relative;
+    z-index: 2;
+}
+
+.hero h1 {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    line-height: 1.1;
+    background: var(--metallic-gradient);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 0 10px rgba(0, 224, 255, 0.3);
+}
+
+.hero h2 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-color-1);
+}
+
+.hero p {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+    max-width: 600px;
+}
+
+.cta-buttons {
+    display: flex;
+    gap: 1rem;
+}
+
+.hero-image-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60%;
+    height: 100%;
+    z-index: 0;
+}
+
+.hero-image {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    filter: brightness(0.8);
+}
+
+/* Glitch Text Effect */
+.glitch-text {
+    position: relative;
+}
+
+.glitch-text::before,
+.glitch-text::after {
+    content: 'UNITY FLEET';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--metallic-gradient);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.glitch-text::before {
+    left: 2px;
+    text-shadow: -2px 0 var(--accent-color-1);
+    animation: glitch-anim-1 2s infinite linear alternate-reverse;
+}
+
+.glitch-text::after {
+    left: -2px;
+    text-shadow: 2px 0 var(--accent-color-2);
+    animation: glitch-anim-2 3s infinite linear alternate-reverse;
+}
+
+@keyframes glitch-anim-1 {
+    0% {
+        clip-path: inset(80% 0 0 0);
+    }
+    20% {
+        clip-path: inset(20% 0 80% 0);
+    }
+    40% {
+        clip-path: inset(40% 0 40% 0);
+    }
+    60% {
+        clip-path: inset(60% 0 20% 0);
+    }
+    80% {
+        clip-path: inset(10% 0 70% 0);
+    }
+    100% {
+        clip-path: inset(30% 0 50% 0);
+    }
+}
+
+@keyframes glitch-anim-2 {
+    0% {
+        clip-path: inset(10% 0 60% 0);
+    }
+    20% {
+        clip-path: inset(30% 0 0% 0);
+    }
+    40% {
+        clip-path: inset(50% 0 30% 0);
+    }
+    60% {
+        clip-path: inset(70% 0 10% 0);
+    }
+    80% {
+        clip-path: inset(20% 0 50% 0);
+    }
+    100% {
+        clip-path: inset(40% 0 20% 0);
+    }
+}
+
+/* What is The Link Section */
+.content-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.highlight-text {
+    font-size: 1.3rem;
+    color: var(--accent-color-1);
+    margin-bottom: 2rem;
+    font-family: var(--font-primary);
+    line-height: 1.5;
+}
+
+.feature-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.feature-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.feature-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: var(--glass-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: var(--accent-color-1);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+}
+
+.feature-text h3 {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.image-card {
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: var(--glass-shadow);
+    transition: transform var(--transition-medium);
+}
+
+.image-card:hover {
+    transform: translateY(-10px);
+}
+
+.image-card img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.image-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 1rem;
+    background: linear-gradient(to top, rgba(11, 11, 15, 0.9), transparent);
+    color: var(--text-color);
+    font-family: var(--font-primary);
+    font-weight: 500;
+}
+
+/* Subscription Tiers Section */
+.subscription-cards {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.subscription-card {
+    background: var(--card-bg);
+    border-radius: 10px;
+    padding: 2rem;
+    width: 100%;
+    max-width: 350px;
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+    transition: transform var(--transition-medium);
+    position: relative;
+    overflow: hidden;
+}
+
+.subscription-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background: var(--accent-color-1);
+}
+
+.subscription-card.featured {
+    transform: scale(1.05);
+}
+
+.subscription-card.featured::before {
+    background: var(--gradient-2);
+}
+
+.subscription-card:hover {
+    transform: translateY(-10px);
+}
+
+.subscription-card.featured:hover {
+    transform: translateY(-10px) scale(1.05);
+}
+
+.card-header {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.card-header h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.price {
+    font-size: 1.2rem;
+    color: var(--accent-color-1);
+    font-family: var(--font-primary);
+}
+
+.card-content ul {
+    list-style: none;
+    margin-bottom: 2rem;
+}
+
+.card-content ul li {
+    margin-bottom: 0.8rem;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+.card-content ul li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--accent-color-1);
+}
+
+.card-cta {
+    text-align: center;
+}
+
+.card-btn {
+    width: 100%;
+    background: transparent;
+    border: 1px solid var(--accent-color-1);
+    color: var(--accent-color-1);
+}
+
+.card-btn:hover {
+    background: rgba(0, 224, 255, 0.1);
+}
+
+/* Impact & Equity Section */
+.content-columns {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+}
+
+.column h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-color-1);
+}
+
+.impact-metric {
+    margin-bottom: 1.5rem;
+}
+
+.metric-number {
+    font-size: 2.5rem;
+    font-family: var(--font-primary);
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.3rem;
+}
+
+.metric-text {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.equity-list {
+    list-style: none;
+}
+
+.equity-list li {
+    margin-bottom: 0.8rem;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+.equity-list li::before {
+    content: '→';
+    position: absolute;
+    left: 0;
+    color: var(--accent-color-1);
+}
+
+/* Tokenization Section */
+.tokenization-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.token-diagram {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 400px;
+}
+
+.token-circle {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.token-inner {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: var(--accent-color-1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2.5rem;
+    color: var(--bg-color);
+    animation: pulse 3s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(0, 224, 255, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 20px rgba(0, 224, 255, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(0, 224, 255, 0);
+    }
+}
+
+.token-orbit {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    animation: rotate 20s linear infinite;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.orbit-item {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5rem;
+    color: var(--accent-color-1);
+}
+
+.orbit-item:nth-child(1) {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.orbit-item:nth-child(2) {
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+}
+
+.orbit-item:nth-child(3) {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.orbit-item:nth-child(4) {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+}
+
+.token-info h3 {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-color-1);
+}
+
+.token-benefits {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.benefit-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.benefit-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--glass-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    color: var(--accent-color-1);
+    border: 1px solid var(--glass-border);
+}
+
+/* Rural Revitalization Section */
+.rural-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.rural-image img {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: var(--glass-shadow);
+}
+
+.rural-text h3 {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-color-1);
+}
+
+.timeline {
+    margin-top: 2rem;
+}
+
+.timeline-item {
+    display: flex;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+    position: relative;
+}
+
+.timeline-item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    top: 40px;
+    left: 20px;
+    width: 1px;
+    height: calc(100% - 20px);
+    background: var(--accent-color-1);
+}
+
+.timeline-marker {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--accent-color-1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-primary);
+    font-weight: 700;
+    color: var(--bg-color);
+    z-index: 1;
+}
+
+.timeline-content h4 {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+/* Grant Proposal Section */
+.proposal-content {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 3rem;
+}
+
+.proposal-overview h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-color-1);
+}
+
+.proposal-details {
+    background: var(--glass-bg);
+    border-radius: 10px;
+    padding: 2rem;
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+}
+
+.detail-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.detail-item:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.detail-label {
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.detail-value {
+    font-family: var(--font-primary);
+    font-weight: 600;
+    color: var(--accent-color-1);
+}
+
+.accordion {
+    background: var(--glass-bg);
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+}
+
+.accordion-item {
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.accordion-item:last-child {
+    border-bottom: none;
+}
+
+.accordion-header {
+    padding: 1.5rem;
+    font-family: var(--font-primary);
+    font-weight: 600;
+    font-size: 1.1rem;
+    cursor: pointer;
+    position: relative;
+    transition: background var(--transition-fast);
+}
+
+.accordion-header:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.accordion-header::after {
+    content: '+';
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.5rem;
+    color: var(--accent-color-1);
+}
+
+.accordion-content {
+    padding: 0 1.5rem 1.5rem;
+    display: none;
+}
+
+.accordion-item.active .accordion-header::after {
+    content: '-';
+}
+
+.accordion-item.active .accordion-content {
+    display: block;
+}
+
+.read-more {
+    display: inline-block;
+    margin-top: 1rem;
+    font-family: var(--font-primary);
+    font-weight: 500;
+    color: var(--accent-color-1);
+}
+
+.proposal-download {
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.download-btn {
+    background: var(--gradient-2);
+    color: var(--bg-color);
+    padding: 1rem 2rem;
+    font-size: 1.1rem;
+}
+
+.download-btn i {
+    margin-right: 0.5rem;
+}
+
+/* Footer */
+footer {
+    background: var(--bg-color);
+    padding: 4rem 0 2rem;
+    border-top: 1px solid var(--glass-border);
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 3rem;
+    margin-bottom: 3rem;
+}
+
+.footer-logo {
+    margin-bottom: 1rem;
+}
+
+.footer-logo .logo {
+    margin-bottom: 1rem;
+    display: inline-block;
+}
+
+.footer-links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+}
+
+.link-column h4 {
+    font-size: 1.1rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-color-1);
+}
+
+.link-column a {
+    display: block;
+    margin-bottom: 0.8rem;
+    color: rgba(255, 255, 255, 0.7);
+    transition: color var(--transition-fast);
+}
+
+.link-column a:hover {
+    color: var(--accent-color-1);
+}
+
+.footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 2rem;
+    border-top: 1px solid var(--glass-border);
+}
+
+.social-links {
+    display: flex;
+    gap: 1rem;
+}
+
+.social-links a {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--glass-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    color: var(--accent-color-1);
+    border: 1px solid var(--glass-border);
+    transition: all var(--transition-fast);
+}
+
+.social-links a:hover {
+    background: var(--accent-color-1);
+    color: var(--bg-color);
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .container {
+        padding: 0 1.5rem;
+    }
+    
+    .hero h1 {
+        font-size: 3.5rem;
+    }
+    
+    .hero h2 {
+        font-size: 1.8rem;
+    }
+}
+
+@media (max-width: 992px) {
+    .hero {
+        flex-direction: column;
+        height: auto;
+        padding: 8rem 0 4rem;
+    }
+    
+    .hero-content {
+        width: 100%;
+        padding: 0;
+        text-align: center;
+        margin-bottom: 3rem;
+    }
+    
+    .hero h1 {
+        font-size: 3rem;
+    }
+    
+    .cta-buttons {
+        justify-content: center;
+    }
+    
+    .hero-image-container {
+        position: relative;
+        width: 100%;
+        height: 50vh;
+    }
+    
+    .content-grid,
+    .content-columns,
+    .tokenization-content,
+    .rural-content,
+    .proposal-content {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+    
+    .feature-list,
+    .token-benefits {
+        grid-template-columns: 1fr;
+    }
+    
+    .footer-content {
+        grid-template-columns: 1fr;
+    }
+    
+    .footer-links {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    nav {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .nav-links {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+    
+    .hero h2 {
+        font-size: 1.5rem;
+    }
+    
+    .section-header h2 {
+        font-size: 2rem;
+    }
+    
+    .subscription-cards {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .subscription-card.featured {
+        transform: scale(1);
+    }
+    
+    .subscription-card.featured:hover {
+        transform: translateY(-10px);
+    }
+    
+    .footer-bottom {
+        flex-direction: column;
+        gap: 1rem;
+        text-align: center;
+    }
+    
+    .social-links {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 576px) {
+    .hero h1 {
+        font-size: 2rem;
+    }
+    
+    .hero h2 {
+        font-size: 1.2rem;
+    }
+    
+    .hero p {
+        font-size: 1rem;
+    }
+    
+    .cta-buttons {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .section-header h2 {
+        font-size: 1.8rem;
+    }
+    
+    .highlight-text {
+        font-size: 1.1rem;
+    }
+    
+    .footer-links {
+        grid-template-columns: 1fr;
+    }
+}

subscription-portal.html

@@ -0,0 +1,1269 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity Fleet - Subscription Portal</title>
+    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
+    <style>
+        /* MVP Component specific styles */
+        .component-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        .component-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .component-header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .component-header p {
+            font-size: 1.2rem;
+            max-width: 800px;
+            margin: 0 auto;
+            opacity: 0.8;
+        }
+        
+        .component-content {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            padding: 2rem;
+            margin-bottom: 3rem;
+            backdrop-filter: blur(10px);
+        }
+        
+        .back-to-home {
+            display: inline-block;
+            margin-top: 2rem;
+            padding: 0.8rem 1.5rem;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            border-radius: 4px;
+            font-family: var(--font-primary);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all var(--transition-medium);
+        }
+        
+        .back-to-home:hover {
+            background: rgba(0, 224, 255, 0.1);
+            transform: translateY(-3px);
+        }
+        
+        /* Subscription Portal specific styles */
+        .subscription-portal-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 1rem;
+        }
+
+        .portal-interface {
+            width: 100%;
+            max-width: 900px;
+            background-color: #0B0B0F;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(0, 224, 255, 0.3);
+            margin-bottom: 2rem;
+        }
+
+        .portal-header {
+            background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));
+            padding: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .portal-header h2 {
+            margin: 0;
+            font-size: 1.5rem;
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+        }
+
+        .user-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: var(--accent-color-1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 1rem;
+            font-size: 1.2rem;
+        }
+
+        .user-name {
+            font-weight: bold;
+        }
+
+        .user-plan {
+            font-size: 0.8rem;
+            opacity: 0.8;
+        }
+
+        .portal-nav {
+            display: flex;
+            background: rgba(0, 0, 0, 0.3);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .nav-tab {
+            padding: 1rem 1.5rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+
+        .nav-tab:hover {
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .nav-tab.active {
+            color: var(--accent-color-1);
+        }
+
+        .nav-tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: var(--accent-color-1);
+        }
+
+        .portal-body {
+            padding: 2rem;
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        /* Subscription Plans Tab */
+        .subscription-plans {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .plan-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .plan-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        .plan-card.current {
+            border: 2px solid var(--accent-color-1);
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .plan-header {
+            margin-bottom: 1.5rem;
+            text-align: center;
+        }
+
+        .plan-name {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            color: var(--accent-color-1);
+        }
+
+        .plan-price {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+
+        .plan-billing {
+            font-size: 0.8rem;
+            opacity: 0.7;
+        }
+
+        .plan-features {
+            margin-bottom: 1.5rem;
+            flex-grow: 1;
+        }
+
+        .plan-feature {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.8rem;
+        }
+
+        .plan-feature i {
+            color: var(--accent-color-1);
+            margin-right: 0.5rem;
+        }
+
+        .plan-actions {
+            margin-top: auto;
+        }
+
+        .plan-button {
+            width: 100%;
+            padding: 0.8rem;
+            border-radius: 8px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .select-plan {
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            color: #000;
+            border: none;
+        }
+
+        .select-plan:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .current-plan {
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+        }
+
+        /* Usage Tab */
+        .usage-overview {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .usage-stat {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 2.5rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .stat-label {
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .usage-chart {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            height: 300px;
+            position: relative;
+        }
+
+        .chart-title {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-size: 1.2rem;
+            color: var(--accent-color-1);
+        }
+
+        .chart-container {
+            height: 250px;
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-between;
+            padding-top: 20px;
+        }
+
+        .chart-bar {
+            width: 8%;
+            background: linear-gradient(to top, rgba(0, 224, 255, 0.3), rgba(53, 242, 219, 0.7));
+            border-radius: 4px 4px 0 0;
+            position: relative;
+            transition: height 1s ease;
+        }
+
+        .chart-bar::before {
+            content: attr(data-value);
+            position: absolute;
+            top: -25px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 0.8rem;
+        }
+
+        .chart-bar::after {
+            content: attr(data-label);
+            position: absolute;
+            bottom: -25px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 0.8rem;
+            opacity: 0.7;
+        }
+
+        .recent-activity {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .activity-title {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-size: 1.2rem;
+            color: var(--accent-color-1);
+        }
+
+        .activity-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .activity-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .activity-item:last-child {
+            border-bottom: none;
+        }
+
+        .activity-details {
+            display: flex;
+            align-items: center;
+        }
+
+        .activity-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(0, 224, 255, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 1rem;
+            color: var(--accent-color-1);
+        }
+
+        .activity-info h4 {
+            margin: 0;
+            margin-bottom: 0.3rem;
+        }
+
+        .activity-info p {
+            margin: 0;
+            font-size: 0.8rem;
+            opacity: 0.7;
+        }
+
+        .activity-date {
+            font-size: 0.8rem;
+            opacity: 0.7;
+            align-self: center;
+        }
+
+        /* Account Tab */
+        .account-section {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            margin-bottom: 2rem;
+        }
+
+        .section-title {
+            margin-top: 0;
+            margin-bottom: 1.5rem;
+            font-size: 1.2rem;
+            color: var(--accent-color-1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .edit-button {
+            font-size: 0.9rem;
+            padding: 0.5rem 1rem;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .edit-button:hover {
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.8rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            color: white;
+        }
+
+        .form-row {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .form-row .form-group {
+            flex: 1;
+        }
+
+        .payment-method {
+            display: flex;
+            align-items: center;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+
+        .payment-icon {
+            font-size: 1.5rem;
+            margin-right: 1rem;
+            color: var(--accent-color-1);
+        }
+
+        .payment-details {
+            flex: 1;
+        }
+
+        .payment-details h4 {
+            margin: 0;
+            margin-bottom: 0.3rem;
+        }
+
+        .payment-details p {
+            margin: 0;
+            font-size: 0.8rem;
+            opacity: 0.7;
+        }
+
+        .payment-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .payment-actions button {
+            padding: 0.5rem;
+            background: transparent;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .payment-actions button:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .add-payment {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px dashed rgba(255, 255, 255, 0.2);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .add-payment:hover {
+            background: rgba(0, 224, 255, 0.1);
+            border-color: var(--accent-color-1);
+        }
+
+        .add-payment i {
+            margin-right: 0.5rem;
+            color: var(--accent-color-1);
+        }
+
+        /* Billing Tab */
+        .billing-summary {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .billing-stat {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            text-align: center;
+        }
+
+        .invoices {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .invoice-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .invoice-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .invoice-item:last-child {
+            border-bottom: none;
+        }
+
+        .invoice-details {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .invoice-id {
+            font-size: 0.8rem;
+            opacity: 0.7;
+            margin-bottom: 0.3rem;
+        }
+
+        .invoice-date {
+            font-size: 0.9rem;
+        }
+
+        .invoice-amount {
+            font-weight: bold;
+        }
+
+        .invoice-status {
+            padding: 0.3rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+        }
+
+        .status-paid {
+            background: rgba(76, 175, 80, 0.2);
+            color: #4CAF50;
+        }
+
+        .status-pending {
+            background: rgba(255, 193, 7, 0.2);
+            color: #FFC107;
+        }
+
+        .invoice-actions {
+            display: flex;
+            align-items: center;
+        }
+
+        .invoice-actions a {
+            margin-left: 1rem;
+            color: var(--accent-color-1);
+            font-size: 0.9rem;
+        }
+
+        .portal-footer {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .portal-actions {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .portal-actions button {
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .portal-actions button:hover {
+            background: rgba(0, 224, 255, 0.1);
+        }
+
+        .portal-actions button.primary {
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            color: #000;
+            border: none;
+        }
+
+        .portal-actions button.primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .portal-info {
+            font-size: 0.9rem;
+            opacity: 0.7;
+        }
+    </style>
+</head>
+<body>
+    <div class="noise-overlay"></div>
+    
+    <header>
+        <nav>
+            <div class="logo">UNITY FLEET</div>
+            <div class="nav-links">
+                <a href="../index.html#what-is-the-link">What is The Link</a>
+                <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                <a href="../index.html#impact-equity">Impact & Equity</a>
+                <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                <a href="../index.html#rural-plan">Rural Revitalization</a>
+                <a href="../index.html#mvp-showcase">MVP Showcase</a>
+            </div>
+            <div class="mobile-nav-toggle">
+                <i class="fas fa-bars"></i>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="component-container">
+        <div class="component-header">
+            <h1>SUBSCRIPTION PORTAL</h1>
+            <p>Manage your Unity Fleet subscription, track usage, and access billing information through our intuitive customer portal.</p>
+        </div>
+        
+        <div class="component-content">
+            <div class="subscription-portal-container">
+                <div class="portal-interface">
+                    <div class="portal-header">
+                        <h2>Unity Fleet Customer Portal</h2>
+                        <div class="user-info">
+                            <div class="user-avatar">
+                                <i class="fas fa-user"></i>
+                            </div>
+                            <div>
+                                <div class="user-name">John Doe</div>
+                                <div class="user-plan">Premium Plan</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="portal-nav">
+                        <div class="nav-tab active" data-tab="plans">Subscription Plans</div>
+                        <div class="nav-tab" data-tab="usage">Usage & Activity</div>
+                        <div class="nav-tab" data-tab="account">Account Settings</div>
+                        <div class="nav-tab" data-tab="billing">Billing & Invoices</div>
+                    </div>
+                    
+                    <div class="portal-body">
+                        <!-- Subscription Plans Tab -->
+                        <div class="tab-content active" id="plans-tab">
+                            <div class="subscription-plans">
+                                <div class="plan-card">
+                                    <div class="plan-header">
+                                        <div class="plan-name">Basic</div>
+                                        <div class="plan-price">$99</div>
+                                        <div class="plan-billing">per month</div>
+                                    </div>
+                                    <div class="plan-features">
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>4 vehicle reservations per month</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Standard charging access</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Basic lounge access</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Standard vehicle selection</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-times"></i>
+                                            <span>Priority booking</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-times"></i>
+                                            <span>Premium vehicle access</span>
+                                        </div>
+                                    </div>
+                                    <div class="plan-actions">
+                                        <div class="plan-button select-plan">Select Plan</div>
+                                    </div>
+                                </div>
+                                
+                                <div class="plan-card current">
+                                    <div class="plan-header">
+                                        <div class="plan-name">Premium</div>
+                                        <div class="plan-price">$199</div>
+                                        <div class="plan-billing">per month</div>
+                                    </div>
+                                    <div class="plan-features">
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>8 vehicle reservations per month</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Priority charging access</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Premium lounge access</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Extended vehicle selection</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Priority booking</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-times"></i>
+                                            <span>Luxury vehicle access</span>
+                                        </div>
+                                    </div>
+                                    <div class="plan-actions">
+                                        <div class="plan-button current-plan">Current Plan</div>
+                                    </div>
+                                </div>
+                                
+                                <div class="plan-card">
+                                    <div class="plan-header">
+                                        <div class="plan-name">Elite</div>
+                                        <div class="plan-price">$349</div>
+                                        <div class="plan-billing">per month</div>
+                                    </div>
+                                    <div class="plan-features">
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Unlimited vehicle reservations</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>VIP charging access</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Elite lounge access</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Full vehicle selection</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Priority booking</span>
+                                        </div>
+                                        <div class="plan-feature">
+                                            <i class="fas fa-check"></i>
+                                            <span>Luxury vehicle access</span>
+                                        </div>
+                                    </div>
+                                    <div class="plan-actions">
+                                        <div class="plan-button select-plan">Select Plan</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Usage & Activity Tab -->
+                        <div class="tab-content" id="usage-tab">
+                            <div class="usage-overview">
+                                <div class="usage-stat">
+                                    <div class="stat-value">6</div>
+                                    <div class="stat-label">Reservations Used</div>
+                                </div>
+                                <div class="usage-stat">
+                                    <div class="stat-value">2</div>
+                                    <div class="stat-label">Reservations Remaining</div>
+                                </div>
+                                <div class="usage-stat">
+                                    <div class="stat-value">14</div>
+                                    <div class="stat-label">Charging Sessions</div>
+                                </div>
+                                <div class="usage-stat">
+                                    <div class="stat-value">342</div>
+                                    <div class="stat-label">kWh Consumed</div>
+                                </div>
+                            </div>
+                            
+                            <div class="usage-chart">
+                                <h3 class="chart-title">Monthly Usage History</h3>
+                                <div class="chart-container">
+                                    <div class="chart-bar" style="height: 30%;" data-value="2" data-label="Jan"></div>
+                                    <div class="chart-bar" style="height: 45%;" data-value="3" data-label="Feb"></div>
+                                    <div class="chart-bar" style="height: 60%;" data-value="4" data-label="Mar"></div>
+                                    <div class="chart-bar" style="height: 75%;" data-value="5" data-label="Apr"></div>
+                                    <div class="chart-bar" style="height: 90%;" data-value="6" data-label="May"></div>
+                                    <div class="chart-bar" style="height: 60%;" data-value="4" data-label="Jun"></div>
+                                    <div class="chart-bar" style="height: 45%;" data-value="3" data-label="Jul"></div>
+                                    <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Aug"></div>
+                                    <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Sep"></div>
+                                    <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Oct"></div>
+                                    <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Nov"></div>
+                                    <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Dec"></div>
+                                </div>
+                            </div>
+                            
+                            <div class="recent-activity">
+                                <h3 class="activity-title">Recent Activity</h3>
+                                <ul class="activity-list">
+                                    <li class="activity-item">
+                                        <div class="activity-details">
+                                            <div class="activity-icon">
+                                                <i class="fas fa-car"></i>
+                                            </div>
+                                            <div class="activity-info">
+                                                <h4>Tesla Model 3 Reservation</h4>
+                                                <p>Downtown Springfield Hub</p>
+                                            </div>
+                                        </div>
+                                        <div class="activity-date">July 15, 2025</div>
+                                    </li>
+                                    <li class="activity-item">
+                                        <div class="activity-details">
+                                            <div class="activity-icon">
+                                                <i class="fas fa-charging-station"></i>
+                                            </div>
+                                            <div class="activity-info">
+                                                <h4>Charging Session</h4>
+                                                <p>Champaign-Urbana Hub • 42 kWh</p>
+                                            </div>
+                                        </div>
+                                        <div class="activity-date">July 10, 2025</div>
+                                    </li>
+                                    <li class="activity-item">
+                                        <div class="activity-details">
+                                            <div class="activity-icon">
+                                                <i class="fas fa-car"></i>
+                                            </div>
+                                            <div class="activity-info">
+                                                <h4>Rivian R1S Reservation</h4>
+                                                <p>Bloomington-Normal Hub</p>
+                                            </div>
+                                        </div>
+                                        <div class="activity-date">July 5, 2025</div>
+                                    </li>
+                                    <li class="activity-item">
+                                        <div class="activity-details">
+                                            <div class="activity-icon">
+                                                <i class="fas fa-credit-card"></i>
+                                            </div>
+                                            <div class="activity-info">
+                                                <h4>Monthly Subscription Payment</h4>
+                                                <p>Premium Plan • $199.00</p>
+                                            </div>
+                                        </div>
+                                        <div class="activity-date">July 1, 2025</div>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        
+                        <!-- Account Settings Tab -->
+                        <div class="tab-content" id="account-tab">
+                            <div class="account-section">
+                                <h3 class="section-title">
+                                    Personal Information
+                                    <button class="edit-button">Edit</button>
+                                </h3>
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="first-name">First Name</label>
+                                        <input type="text" id="first-name" value="John" disabled>
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="last-name">Last Name</label>
+                                        <input type="text" id="last-name" value="Doe" disabled>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="email">Email Address</label>
+                                    <input type="email" id="email" value="[email protected]" disabled>
+                                </div>
+                                <div class="form-group">
+                                    <label for="phone">Phone Number</label>
+                                    <input type="tel" id="phone" value="(217) 555-1234" disabled>
+                                </div>
+                            </div>
+                            
+                            <div class="account-section">
+                                <h3 class="section-title">
+                                    Payment Methods
+                                    <button class="edit-button">Manage</button>
+                                </h3>
+                                <div class="payment-method">
+                                    <div class="payment-icon">
+                                        <i class="fab fa-cc-visa"></i>
+                                    </div>
+                                    <div class="payment-details">
+                                        <h4>Visa ending in 4242</h4>
+                                        <p>Expires 05/2027</p>
+                                    </div>
+                                    <div class="payment-actions">
+                                        <button>Edit</button>
+                                        <button>Remove</button>
+                                    </div>
+                                </div>
+                                <div class="payment-method">
+                                    <div class="payment-icon">
+                                        <i class="fab fa-cc-mastercard"></i>
+                                    </div>
+                                    <div class="payment-details">
+                                        <h4>Mastercard ending in 8888</h4>
+                                        <p>Expires 12/2026</p>
+                                    </div>
+                                    <div class="payment-actions">
+                                        <button>Edit</button>
+                                        <button>Remove</button>
+                                    </div>
+                                </div>
+                                <div class="add-payment">
+                                    <i class="fas fa-plus"></i>
+                                    <span>Add Payment Method</span>
+                                </div>
+                            </div>
+                            
+                            <div class="account-section">
+                                <h3 class="section-title">
+                                    Notification Preferences
+                                    <button class="edit-button">Edit</button>
+                                </h3>
+                                <div class="form-group">
+                                    <label>
+                                        <input type="checkbox" checked disabled>
+                                        Reservation Confirmations
+                                    </label>
+                                </div>
+                                <div class="form-group">
+                                    <label>
+                                        <input type="checkbox" checked disabled>
+                                        Charging Completion Alerts
+                                    </label>
+                                </div>
+                                <div class="form-group">
+                                    <label>
+                                        <input type="checkbox" checked disabled>
+                                        Billing Notifications
+                                    </label>
+                                </div>
+                                <div class="form-group">
+                                    <label>
+                                        <input type="checkbox" disabled>
+                                        Marketing Communications
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Billing & Invoices Tab -->
+                        <div class="tab-content" id="billing-tab">
+                            <div class="billing-summary">
+                                <div class="billing-stat">
+                                    <div class="stat-value">$199</div>
+                                    <div class="stat-label">Current Monthly Plan</div>
+                                </div>
+                                <div class="billing-stat">
+                                    <div class="stat-value">Aug 1</div>
+                                    <div class="stat-label">Next Billing Date</div>
+                                </div>
+                                <div class="billing-stat">
+                                    <div class="stat-value">$0</div>
+                                    <div class="stat-label">Additional Charges</div>
+                                </div>
+                                <div class="billing-stat">
+                                    <div class="stat-value">$199</div>
+                                    <div class="stat-label">Next Payment</div>
+                                </div>
+                            </div>
+                            
+                            <div class="invoices">
+                                <h3 class="section-title">
+                                    Recent Invoices
+                                    <button class="edit-button">View All</button>
+                                </h3>
+                                <ul class="invoice-list">
+                                    <li class="invoice-item">
+                                        <div class="invoice-details">
+                                            <div class="invoice-id">INV-2025-07-01</div>
+                                            <div class="invoice-date">July 1, 2025</div>
+                                        </div>
+                                        <div class="invoice-amount">$199.00</div>
+                                        <div class="invoice-status status-paid">Paid</div>
+                                        <div class="invoice-actions">
+                                            <a href="#"><i class="fas fa-download"></i> PDF</a>
+                                        </div>
+                                    </li>
+                                    <li class="invoice-item">
+                                        <div class="invoice-details">
+                                            <div class="invoice-id">INV-2025-06-01</div>
+                                            <div class="invoice-date">June 1, 2025</div>
+                                        </div>
+                                        <div class="invoice-amount">$199.00</div>
+                                        <div class="invoice-status status-paid">Paid</div>
+                                        <div class="invoice-actions">
+                                            <a href="#"><i class="fas fa-download"></i> PDF</a>
+                                        </div>
+                                    </li>
+                                    <li class="invoice-item">
+                                        <div class="invoice-details">
+                                            <div class="invoice-id">INV-2025-05-01</div>
+                                            <div class="invoice-date">May 1, 2025</div>
+                                        </div>
+                                        <div class="invoice-amount">$199.00</div>
+                                        <div class="invoice-status status-paid">Paid</div>
+                                        <div class="invoice-actions">
+                                            <a href="#"><i class="fas fa-download"></i> PDF</a>
+                                        </div>
+                                    </li>
+                                    <li class="invoice-item">
+                                        <div class="invoice-details">
+                                            <div class="invoice-id">INV-2025-04-01</div>
+                                            <div class="invoice-date">April 1, 2025</div>
+                                        </div>
+                                        <div class="invoice-amount">$199.00</div>
+                                        <div class="invoice-status status-paid">Paid</div>
+                                        <div class="invoice-actions">
+                                            <a href="#"><i class="fas fa-download"></i> PDF</a>
+                                        </div>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="portal-footer">
+                        <div class="portal-actions">
+                            <button>Contact Support</button>
+                            <button class="primary">Make a Reservation</button>
+                        </div>
+                        <div class="portal-info">
+                            Last Login: July 20, 2025 | 10:45 AM
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="component-features">
+            <h2>Key Features</h2>
+            <ul class="features-list">
+                <li>Comprehensive subscription plan management with tier comparison and upgrade options</li>
+                <li>Detailed usage tracking with visual charts and activity history</li>
+                <li>Account settings management including personal information and notification preferences</li>
+                <li>Billing dashboard with invoice history and payment method management</li>
+                <li>Integrated reservation system with direct access to vehicle booking</li>
+                <li>Real-time subscription status monitoring with remaining allocations</li>
+                <li>Responsive design for seamless access across desktop and mobile devices</li>
+            </ul>
+        </div>
+        
+        <a href="../index.html#mvp-showcase" class="back-to-home">
+            <i class="fas fa-arrow-left"></i> Back to MVP Showcase
+        </a>
+    </main>
+    
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <div class="logo">UNITY FLEET</div>
+                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="link-column">
+                        <h4>Navigation</h4>
+                        <a href="../index.html#what-is-the-link">What is The Link</a>
+                        <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                        <a href="../index.html#impact-equity">Impact & Equity</a>
+                        <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                        <a href="../index.html#rural-plan">Rural Revitalization</a>
+                        <a href="../index.html#mvp-showcase">MVP Showcase</a>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Contact</h4>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="tel:+12175551234">+1 (217) 555-1234</a>
+                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Legal</h4>
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Accessibility</a>
+                    </div>
+                </div>
+                
+                <div class="footer-social">
+                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Mobile navigation toggle
+        document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
+            document.querySelector('.nav-links').classList.toggle('active');
+            this.innerHTML = document.querySelector('.nav-links').classList.contains('active') 
+                ? '<i class="fas fa-times"></i>' 
+                : '<i class="fas fa-bars"></i>';
+        });
+        
+        // Subscription portal tab navigation
+        document.addEventListener('DOMContentLoaded', function() {
+            const navTabs = document.querySelectorAll('.nav-tab');
+            const tabContents = document.querySelectorAll('.tab-content');
+            
+            navTabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    // Remove active class from all tabs
+                    navTabs.forEach(t => t.classList.remove('active'));
+                    
+                    // Add active class to clicked tab
+                    this.classList.add('active');
+                    
+                    // Hide all tab contents
+                    tabContents.forEach(content => content.classList.remove('active'));
+                    
+                    // Show selected tab content
+                    const tabId = this.getAttribute('data-tab') + '-tab';
+                    document.getElementById(tabId).classList.add('active');
+                });
+            });
+            
+            // Animate chart bars on load
+            const chartBars = document.querySelectorAll('.chart-bar');
+            chartBars.forEach(bar => {
+                const height = bar.style.height;
+                bar.style.height = '0%';
+                setTimeout(() => {
+                    bar.style.height = height;
+                }, 300);
+            });
+            
+            // Plan card hover effects
+            const planCards = document.querySelectorAll('.plan-card');
+            planCards.forEach(card => {
+                card.addEventListener('mouseenter', function() {
+                    if (!this.classList.contains('current')) {
+                        this.style.transform = 'translateY(-10px)';
+                        this.style.boxShadow = '0 15px 30px rgba(0, 224, 255, 0.2)';
+                    }
+                });
+                
+                card.addEventListener('mouseleave', function() {
+                    if (!this.classList.contains('current')) {
+                        this.style.transform = '';
+                        this.style.boxShadow = '';
+                    }
+                });
+            });
+            
+            // Edit buttons functionality
+            const editButtons = document.querySelectorAll('.edit-button');
+            editButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    alert('Edit functionality would be implemented in the production version.');
+                });
+            });
+            
+            // Plan selection functionality
+            const selectPlanButtons = document.querySelectorAll('.select-plan');
+            selectPlanButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    alert('Plan change functionality would be implemented in the production version.');
+                });
+            });
+        });
+    </script>
+</body>
+</html>

technical_architecture.md

@@ -0,0 +1,456 @@
+# Unity Fleet MVP Technical Architecture
+
+This document outlines the technical architecture for the Unity Fleet MVP components, defining the technology stack, data models, integration points, and deployment strategy.
+
+## Overall Architecture
+
+The Unity Fleet MVP suite will follow a modern web application architecture with these key characteristics:
+
+- **Frontend**: React-based single-page applications (SPAs) for all user interfaces
+- **Backend**: Simulated API endpoints with mock data (no actual backend server required for MVP)
+- **Data Storage**: Local browser storage (localStorage/IndexedDB) for persistence during demonstrations
+- **Deployment**: Static site hosting for all components
+- **Integration**: Common data models and shared components across all MVPs
+
+### System Architecture Diagram
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                                                             │
+│                    User Interface Layer                     │
+│                                                             │
+├───────────┬───────────┬───────────┬───────────┬───────────┬─┘
+│  Mobile   │ Charging  │  Energy   │Subscription│Interactive│
+│   App     │   Hub     │Management │   Portal  │Deployment │
+│ Prototype │ Dashboard │Simulation │           │   Map     │
+└───────────┴───────────┴───────────┴───────────┴───────────┘
+        │           │           │           │           │
+        ▼           ▼           ▼           ▼           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                                                             │
+│                  Shared Component Library                   │
+│                                                             │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│                     Mock Data Services                      │
+│                                                             │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│                  Local Storage Persistence                  │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Technology Stack
+
+### Frontend Technologies
+
+- **Framework**: React 18
+- **State Management**: Redux Toolkit
+- **Styling**: Tailwind CSS with custom theme
+- **UI Components**: Custom component library based on Material UI
+- **Routing**: React Router
+- **Data Visualization**: D3.js and React-Vis
+- **Maps**: Leaflet with OpenStreetMap
+- **Animations**: Framer Motion
+- **3D Rendering** (if needed): Three.js
+
+### Development Tools
+
+- **Package Manager**: npm
+- **Build Tool**: Vite
+- **Version Control**: Git
+- **Code Quality**: ESLint, Prettier
+- **Testing**: Jest, React Testing Library
+- **Design System**: Storybook
+
+## Component-Specific Architecture
+
+### 1. Mobile Application Prototype
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  Mobile App Prototype                       │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │  Vehicle    │ │ Reservation │ │   User      │            │
+│ │  Browser    │ │   System    │ │  Dashboard  │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+│ ┌─────────────┐ ┌───────────��─┐ ┌─────────────┐            │
+│ │  Payment    │ │    Trip     │ │ Notification │            │
+│ │ Simulation  │ │   Planner   │ │   Center    │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+├─────────────────────────────────────────────────────────────┤
+│                  Mock API Services                          │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │   Vehicle   │ │    User     │ │ Reservation │            │
+│ │    Data     │ │    Data     │ │    Data     │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Key Technical Features**:
+- Responsive design with mobile-first approach
+- Vehicle data with images, specifications, and availability
+- Interactive calendar for date/time selection
+- Simulated payment processing
+- Geolocation integration for pickup/dropoff
+- Trip planning with charging stop recommendations
+
+### 2. Charging Hub Management Dashboard
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│               Charging Hub Dashboard                        │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │  Station    │ │   Energy    │ │ Maintenance │            │
+│ │  Monitor    │ │  Analytics  │ │  Scheduler  │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │   User      │ │   Revenue   │ │    Alert    │            │
+│ │  Access     │ │  Tracking   │ │   System    │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+├─────────────────────────────────────────────────────────────┤
+│                  Mock API Services                          │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │  Station    │ │   Energy    │ │    User     │            │
+│ │    Data     │ │    Data     │ │    Data     │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Key Technical Features**:
+- Real-time data visualization with auto-updating charts
+- Interactive station status map
+- Time-series data for energy usage patterns
+- Alert system with priority levels
+- Maintenance ticket management
+- Revenue and usage reporting
+
+### 3. Energy Management Simulation
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│               Energy Management Simulation                  │
+├────────────────────────────────────────────���────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │   Solar     │ │   Battery   │ │    Grid     │            │
+│ │ Simulation  │ │ Simulation  │ │ Interaction │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │   Energy    │ │    Cost     │ │   Carbon    │            │
+│ │    Flow     │ │  Calculator │ │   Savings   │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+├─────────────────────────────────────────────────────────────┤
+│                  Simulation Engine                          │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │  Weather    │ │   Energy    │ │   Pricing   │            │
+│ │    Data     │ │   Models    │ │    Data     │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Key Technical Features**:
+- Physics-based simulation of energy generation and consumption
+- Weather data integration for solar production modeling
+- Animated visualizations of energy flows
+- Time controls (speed up/slow down/pause)
+- Scenario testing with different parameters
+- Real-time calculation of financial and environmental metrics
+
+### 4. Subscription Management Portal
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│               Subscription Management Portal                │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │    Tier     │ │  Customer   │ │   Usage     │            │
+│ │ Comparison  │ │ Management  │ │  Analytics  │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │   Billing   │ │ Subscription│ │  Revenue    │            │
+│ │ Simulation  │ │  Pathways   │ │ Projections │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+├─────────────────────────────────────────────────────────────┤
+│                  Mock API Services                          │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │ Subscription│ │  Customer   │ │   Usage     │            │
+│ │    Data     │ │    Data     │ │    Data     │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Key Technical Features**:
+- Interactive tier comparison with feature highlighting
+- Customer profile management
+- Usage tracking visualizations
+- Billing cycle simulation
+- Upgrade/downgrade pathway visualization
+- Revenue projection modeling
+
+### 5. Interactive Deployment Map
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                Interactive Deployment Map                   │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │  Location   │ │   Phase     │ │ Population  │            │
+│ │    Map      │ │  Timeline   │ │  Coverage   │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │Infrastructure│ │     EV     │ │  Location   │            │
+│ │   Impact    │ │  Adoption   │ │   Details   │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+├─────────────────────────────────────────────────────────────┤
+│                  Geospatial Services                        │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │  Location   │ │ Demographic │ │ Deployment  │            │
+│ │    Data     │ │    Data     │ │    Data     │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Key Technical Features**:
+- Interactive map with multiple data layers
+- Timeline slider for phase visualization
+- Demographic data overlays
+- Infrastructure impact heatmaps
+- Detailed location information panels
+- Distance and coverage calculations
+
+### 6. ChainLink Tokenization Demonstration
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│              ChainLink Tokenization Demonstration           │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │   Token     │ │    Asset    │ │   Value     │            │
+│ │ Allocation  │ │  Ownership  │ │    Flow     │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │ Transaction │ │ Stakeholder │ │  Token      │            │
+│ │ Simulation  │ │  Dashboard  │ │ Economics   │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+├─────────────────────────────────────────────────────────────┤
+│                  Blockchain Simulation                      │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
+│ │   Token     │ │ Transaction │ │ Stakeholder │            │
+│ │    Data     │ │    Data     │ │    Data     │            │
+│ └─────────────┘ └─────────────┘ └─────────────┘            │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Key Technical Features**:
+- Simplified blockchain visualization
+- Token allocation animations
+- Asset ownership visualization
+- Value flow diagrams with animation
+- Transaction simulation with ledger updates
+- Stakeholder dashboard with real-time updates
+
+## Data Models
+
+### Core Data Models
+
+These data models will be shared across multiple components:
+
+#### Vehicle Model
+```json
+{
+  "id": "string",
+  "make": "string",
+  "model": "string",
+  "year": "number",
+  "type": "string",
+  "range": "number",
+  "batteryCapacity": "number",
+  "chargingSpeed": "number",
+  "images": ["string"],
+  "features": ["string"],
+  "dailyRate": "number",
+  "weeklyRate": "number",
+  "monthlyRate": "number",
+  "availability": {
+    "status": "string",
+    "nextAvailable": "date",
+    "location": "string"
+  }
+}
+```
+
+#### User Model
+```json
+{
+  "id": "string",
+  "name": "string",
+  "email": "string",
+  "phone": "string",
+  "subscriptionTier": "string",
+  "joinDate": "date",
+  "paymentMethods": [{
+    "id": "string",
+    "type": "string",
+    "last4": "string",
+    "expiryDate": "string"
+  }],
+  "drivingHistory": {
+    "totalTrips": "number",
+    "totalMiles": "number",
+    "favoriteVehicles": ["string"]
+  }
+}
+```
+
+#### Charging Station Model
+```json
+{
+  "id": "string",
+  "hubId": "string",
+  "type": "string",
+  "power": "number",
+  "status": "string",
+  "currentUser": "string",
+  "sessionStart": "date",
+  "energyDelivered": "number",
+  "maintenanceStatus": {
+    "lastMaintenance": "date",
+    "nextScheduled": "date",
+    "issues": ["string"]
+  }
+}
+```
+
+#### Hub Model
+```json
+{
+  "id": "string",
+  "name": "string",
+  "location": {
+    "address": "string",
+    "city": "string",
+    "state": "string",
+    "zip": "string",
+    "coordinates": {
+      "lat": "number",
+      "lng": "number"
+    }
+  },
+  "stations": ["string"],
+  "solarCapacity": "number",
+  "batteryCapacity": "number",
+  "amenities": ["string"],
+  "operatingHours": {
+    "open": "string",
+    "close": "string",
+    "days": ["string"]
+  }
+}
+```
+
+#### Subscription Model
+```json
+{
+  "id": "string",
+  "name": "string",
+  "monthlyPrice": "number",
+  "annualPrice": "number",
+  "features": [{
+    "name": "string",
+    "description": "string",
+    "included": "boolean"
+  }],
+  "vehicleAccess": ["string"],
+  "chargingCredits": "number",
+  "additionalBenefits": ["string"]
+}
+```
+
+## Integration Strategy
+
+### Shared Components
+
+The following components will be shared across multiple MVPs:
+
+- **Navigation Bar**: Consistent navigation across all applications
+- **User Authentication**: Simulated login/logout functionality
+- **Vehicle Cards**: Standardized vehicle display components
+- **Charging Station Cards**: Unified station status display
+- **Data Visualizations**: Common chart and graph components
+- **Map Components**: Reusable mapping elements
+- **Notification System**: Consistent alert and notification UI
+
+### Data Sharing
+
+Data will be shared between components using:
+
+1. **Local Storage**: For persistent data across browser sessions
+2. **URL Parameters**: For deep linking between applications
+3. **Shared State Library**: Common Redux store for demonstration purposes
+
+## Deployment Architecture
+
+The MVPs will be deployed as static web applications:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    Static Web Hosting                       │
+├─────────────┬───────────┬───────────┬───────────┬───────────┤
+│  Mobile     │ Charging  │  Energy   │Subscription│Interactive│
+│   App       │   Hub     │Management │   Portal  │Deployment │
+│ Prototype   │ Dashboard │Simulation │           │   Map     │
+└─────────────┴───────────┴───────────┴───────────┴───────────┘
+        │           │           │           │           │
+        ▼           ▼           ▼           ▼           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                    Landing Page Portal                      │
+└─────────────────────────────────────────────────────────────┘
+```
+
+- Each MVP will be deployed as a standalone application
+- A central landing page will provide navigation to all components
+- All applications will be responsive and work on desktop and mobile devices
+- No backend server is required as all data will be simulated
+
+## Development Workflow
+
+1. **Setup**: Create project scaffolding with shared components and styles
+2. **Component Development**: Build individual MVPs in parallel
+3. **Integration**: Connect components through shared data models
+4. **Testing**: Verify functionality and user experience
+5. **Deployment**: Deploy to static hosting
+6. **Documentation**: Create user guides and demonstration scripts
+
+## Technical Considerations
+
+### Performance Optimization
+
+- Use code splitting to reduce initial load times
+- Optimize images and assets for web delivery
+- Implement lazy loading for non-critical components
+- Use efficient data structures for simulations
+
+### Browser Compatibility
+
+- Target modern browsers (Chrome, Firefox, Safari, Edge)
+- Use progressive enhancement for advanced features
+- Test on multiple devices and screen sizes
+- Ensure accessibility compliance
+
+### Simulation Fidelity
+
+- Balance realism with performance
+- Use realistic but simplified models for energy and financial simulations
+- Ensure data consistency across all components
+- Provide controls to adjust simulation parameters
+
+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

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unity Fleet - MVP Component</title>
+    <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
+    <style>
+        /* MVP Component specific styles */
+        .component-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        .component-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .component-header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .component-header p {
+            font-size: 1.2rem;
+            max-width: 800px;
+            margin: 0 auto;
+            opacity: 0.8;
+        }
+        
+        .component-content {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            padding: 2rem;
+            margin-bottom: 3rem;
+            backdrop-filter: blur(10px);
+        }
+        
+        .back-to-home {
+            display: inline-block;
+            margin-top: 2rem;
+            padding: 0.8rem 1.5rem;
+            background: transparent;
+            border: 1px solid var(--accent-color-1);
+            color: var(--accent-color-1);
+            border-radius: 4px;
+            font-family: var(--font-primary);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all var(--transition-medium);
+        }
+        
+        .back-to-home:hover {
+            background: rgba(0, 224, 255, 0.1);
+            transform: translateY(-3px);
+        }
+        
+        /* Responsive iframe container */
+        .iframe-container {
+            position: relative;
+            width: 100%;
+            height: 0;
+            padding-bottom: 56.25%; /* 16:9 aspect ratio */
+            overflow: hidden;
+            border-radius: 8px;
+        }
+        
+        .iframe-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="noise-overlay"></div>
+    
+    <header>
+        <nav>
+            <div class="logo">UNITY FLEET</div>
+            <div class="nav-links">
+                <a href="../index.html#what-is-the-link">What is The Link</a>
+                <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                <a href="../index.html#impact-equity">Impact & Equity</a>
+                <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                <a href="../index.html#rural-plan">Rural Revitalization</a>
+                <a href="../index.html#mvp-showcase">MVP Showcase</a>
+            </div>
+            <div class="mobile-nav-toggle">
+                <i class="fas fa-bars"></i>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="component-container">
+        <div class="component-header">
+            <h1>COMPONENT_TITLE</h1>
+            <p>COMPONENT_DESCRIPTION</p>
+        </div>
+        
+        <div class="component-content">
+            <div class="iframe-container">
+                <!-- Component will be embedded here -->
+                <div id="component-placeholder">
+                    Loading component...
+                </div>
+            </div>
+        </div>
+        
+        <div class="component-features">
+            <h2>Key Features</h2>
+            <ul class="features-list">
+                <li>FEATURE_1</li>
+                <li>FEATURE_2</li>
+                <li>FEATURE_3</li>
+                <li>FEATURE_4</li>
+                <li>FEATURE_5</li>
+            </ul>
+        </div>
+        
+        <a href="../index.html#mvp-showcase" class="back-to-home">
+            <i class="fas fa-arrow-left"></i> Back to MVP Showcase
+        </a>
+    </main>
+    
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <div class="logo">UNITY FLEET</div>
+                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>
+                </div>
+                
+                <div class="footer-links">
+                    <div class="link-column">
+                        <h4>Navigation</h4>
+                        <a href="../index.html#what-is-the-link">What is The Link</a>
+                        <a href="../index.html#subscription-tiers">Subscription Tiers</a>
+                        <a href="../index.html#impact-equity">Impact & Equity</a>
+                        <a href="../index.html#tokenization">ChainLink Tokenization</a>
+                        <a href="../index.html#rural-plan">Rural Revitalization</a>
+                        <a href="../index.html#mvp-showcase">MVP Showcase</a>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Contact</h4>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="tel:+12175551234">+1 (217) 555-1234</a>
+                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>
+                    </div>
+                    
+                    <div class="link-column">
+                        <h4>Legal</h4>
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Accessibility</a>
+                    </div>
+                </div>
+                
+                <div class="footer-social">
+                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+            
+            <div class="footer-bottom">
+                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Mobile navigation toggle
+        document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
+            document.querySelector('.nav-links').classList.toggle('active');
+            this.innerHTML = document.querySelector('.nav-links').classList.contains('active') 
+                ? '<i class="fas fa-times"></i>' 
+                : '<i class="fas fa-bars"></i>';
+        });
+        
+        // Component loading logic will be added here
+        document.addEventListener('DOMContentLoaded', function() {
+            // This will be customized for each component
+            console.log('Component page loaded');
+        });
+    </script>
+</body>
+</html>

todo.md

@@ -0,0 +1,126 @@
+# Unity Fleet MVP Development Todo List
+
+## Overview
+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.
+
+## MVP Components Development
+
+### 1. Mobile Application for Vehicle Reservations [PARTIALLY IMPLEMENTED]
+- [x] Create basic UI structure (MobileApp.jsx and MobileApp.css exist)
+- [ ] Implement user registration and authentication flows
+- [ ] Build vehicle browsing and filtering functionality
+- [ ] Develop reservation system with calendar integration
+- [ ] Create payment simulation interface
+- [ ] Implement vehicle status tracking
+- [ ] Add trip planning with charging stops feature
+- [ ] Enhance UI with animations and transitions
+- [ ] Test all functionality and user flows
+
+### 2. Charging Hub Interface [PARTIALLY IMPLEMENTED]
+- [x] Create basic UI structure (ChargingHub.jsx and ChargingHub.css exist)
+- [x] Fix ChargingHub.css file (replaced React component with proper CSS)
+- [ ] Implement charging station status and availability display
+- [ ] Build user authentication for charging access
+- [ ] Create payment processing simulation
+- [ ] Develop energy usage tracking visualization
+- [ ] Add lounge services information section
+- [ ] Enhance UI with animations and transitions
+- [ ] Test all functionality and user flows
+
+### 3. Energy Simulation [IMPLEMENTED]
+- [x] Create basic UI structure (EnergySimulation.jsx and EnergySimulation.css)
+- [x] Implement solar generation simulation
+- [x] Build battery storage management interface
+- [x] Develop grid interaction modeling
+- [x] Create energy flow visualization
+- [x] Implement optimization algorithms demonstration
+- [x] Add interactive controls for simulation parameters
+- [ ] Test all functionality and user flows
+
+### 4. Deployment Map [IMPLEMENTED]
+- [x] Create basic UI structure (DeploymentMap.jsx and DeploymentMap.css)
+- [x] Implement interactive map of Illinois
+- [x] Add planned charging hub locations
+- [x] Create phased deployment visualization
+- [x] Implement demographic data overlay
+- [x] Add EV adoption projection layer
+- [x] Create interactive filters and controls
+- [ ] Test all functionality and user flows
+
+### 5. Subscription Portal [IMPLEMENTED]
+- [x] Create basic UI structure (SubscriptionPortal.jsx and SubscriptionPortal.css)
+- [x] Implement subscription tier display and comparison
+- [x] Build subscription management interface
+- [x] Create billing simulation
+- [x] Develop usage tracking visualization
+- [x] Add upgrade/downgrade pathways
+- [x] Implement customer analytics dashboard
+- [ ] Test all functionality and user flows
+
+### 6. ChainLink Tokenization Demo [IMPLEMENTED]
+- [x] Create basic UI structure (ChainlinkDemo.jsx and ChainlinkDemo.css)
+- [x] Implement token allocation visualization
+- [x] Build asset ownership representation
+- [x] Create value tracking simulation
+- [x] Develop transaction demonstration
+- [x] Add stakeholder dashboard
+- [x] Implement interactive token flow visualization
+- [ ] Test all functionality and user flows
+
+## Website Enhancement
+
+### 1. Website Structure and Navigation [IN PROGRESS]
+- [x] Review existing website structure
+- [x] Enhance navigation to include all MVP components
+- [x] Create consistent header and footer across all pages
+- [ ] Implement responsive design for all screen sizes
+- [ ] Add smooth transitions between sections
+
+### 2. Visual Design Improvements
+- [ ] Update color scheme to match Atlas Universe palette
+- [ ] Implement glassmorphic panels with frosted transparency
+- [ ] Add metallic gradients for buttons and borders
+- [ ] Create animated section transitions
+- [ ] Implement hover effects for interactive elements
+
+### 3. Content Enhancement
+- [ ] Update "What is The Link?" section with latest information
+- [ ] Create detailed Unity Fleet Subscription Tiers section
+- [ ] Develop Impact & Equity section
+- [ ] Build ChainLink Tokenization explanation with animated diagrams
+- [ ] Add Rural Revitalization Plan section
+
+### 4. Integration of MVP Components
+- [x] Create dedicated showcase pages for each MVP component
+- [ ] Implement interactive demos embedded in website
+- [ ] Add screenshots and videos of MVP components in action
+- [ ] Create links between related components
+- [ ] Ensure consistent styling between website and MVP components
+
+### 5. Performance and Deployment
+- [ ] Optimize website performance
+- [ ] Minify CSS and JavaScript
+- [ ] Optimize images for web
+- [ ] Test website on multiple devices and browsers
+- [ ] Deploy updated website to production
+
+## Project Management
+
+### 1. Documentation
+- [ ] Update technical architecture documentation
+- [ ] Create user guides for MVP components
+- [ ] Document API specifications and data models
+- [ ] Create presentation materials for stakeholders
+
+### 2. Testing
+- [ ] Develop test cases for all MVP components
+- [ ] Perform usability testing
+- [ ] Conduct cross-browser compatibility testing
+- [ ] Test responsive design on various devices
+
+### 3. Final Delivery
+- [ ] Package all source code
+- [ ] Create demonstration videos
+- [ ] Prepare final presentation
+- [ ] Deploy all components to production
+- [ ] Provide access instructions to stakeholders

unity_fleet_complete_proposal.md

@@ -0,0 +1,1024 @@
+# Unity Fleet Grant Proposal
+## Illinois Department of Transportation Statewide Planning and Research Funds
+
+**Applicant:** Unity Fleet LLC  
+**EIN:** 33-2583301  
+**Contact:** Matthew T. Lamb, Sole Member  
+**Address:** 2457 E Eldorado St, Decatur, IL 62521  
+**Submission Date:** April 30, 2025  
+
+## Table of Contents
+
+1. Executive Summary
+2. Project Description
+   - 2.1 Organization Background
+   - 2.2 Project Overview: "The Link" EV Charging Network
+   - 2.3 Fleet Services Component
+3. Alignment with Illinois Initiatives
+   - 3.1 Climate Action Plan Support
+   - 3.2 Transportation Innovation
+   - 3.3 Electric Vehicle Infrastructure Expansion
+   - 3.4 Economic Development
+   - 3.5 Equity and Accessibility
+4. Implementation Plan
+   - 4.1 Project Phases
+   - 4.2 Timeline
+   - 4.3 Site Selection Criteria
+   - 4.4 Technology Implementation
+5. Budget and Financial Plan
+   - 5.1 Project Budget
+   - 5.2 Funding Sources
+   - 5.3 Financial Sustainability
+6. Performance Metrics and Evaluation
+   - 6.1 Key Performance Indicators
+   - 6.2 Evaluation Methodology
+   - 6.3 Long-term Impact Assessment
+7. Partnerships and Stakeholder Engagement
+   - 7.1 Current Partners
+   - 7.2 Stakeholder Engagement Plan
+   - 7.3 Letters of Support
+8. Conclusion
+# Executive Summary
+
+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.
+
+"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.
+
+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.
+
+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.
+
+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.
+
+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.
+
+We look forward to the opportunity to partner with the Illinois Department of Transportation on this transformative initiative.
+# Project Description
+
+## 2.1 Organization Background
+
+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.
+
+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.
+
+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.
+
+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.
+
+## 2.2 Project Overview: "The Link" EV Charging Network
+
+"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.
+
+Each hub in "The Link" network will feature:
+
+**Innovative Design and Infrastructure:**
+- Architecturally distinctive circular structure with covered charging area
+- Elevated lounge with panoramic views and natural lighting
+- Weather protection for year-round comfort in Illinois' variable climate
+- Landscaped surroundings that enhance visual appeal and environmental benefits
+
+**Advanced Charging Technology:**
+- Multiple Direct Current Fast Charging (DCFC) ports with 150kW capability
+- Combined Charging System (CCS) compatibility for most EV models
+- Megawatt Charging System (MCS) readiness for future heavy-duty vehicle support
+- Smart charging management system for load balancing and grid optimization
+
+**Solar Power Integration:**
+- Rooftop solar array generating clean energy for charging operations
+- Battery storage systems to optimize solar utilization and grid management
+- Net metering capabilities to maximize renewable energy benefits
+- Resilient design allowing continued operation during grid disruptions
+
+**User Experience Enhancements:**
+- Comfortable lounge seating with power outlets and Wi-Fi connectivity
+- Refreshment options ranging from vending services to café partnerships
+- Digital displays showing charging status, wait times, and local information
+- Mobile app integration for reservations, payments, and status monitoring
+
+**Accessibility Features:**
+- ADA-compliant design throughout all areas
+- Multiple payment options including credit card, mobile app, and subscription plans
+- Clear wayfinding and instructional elements for new EV users
+- 24/7 customer support through digital and phone channels
+
+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.
+
+## 2.3 Fleet Services Component
+
+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.
+
+**Electric Vehicle Fleet Management:**
+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.
+
+**Subscription and Access Models:**
+- **Take-Home Subscriptions:** Customers gain exclusive access to a dedicated EV with various tiers offering different mileage allowances and included services (insurance, maintenance, charging).
+- **FlexRide Subscriptions:** Users can access shared EVs on a regular basis, balancing affordability and convenience.
+- **Daily & Monthly All-Access Passes:** Unlimited rides within designated areas for a flat fee, catering to users who want to eliminate personal vehicle reliance.
+- **Enhanced Commuter Pass:** Structured rides for professionals and students with predictable daily schedules, offering a cost-effective solution for daily commutes.
+
+**Corporate Shuttle and Community Programs:**
+- **Corporate Shuttle Services:** Customized transportation solutions for businesses and municipalities, including employee shuttles and campus transportation.
+- **Community Access Program (CAP):** Discounted transportation options for low-income individuals, promoting equitable access to sustainable mobility.
+- **Paratransit Services:** Specialized transportation options for individuals with disabilities, enhancing mobility for all community members.
+
+**Technology Integration and AI Optimization:**
+Unity Fleet will leverage advanced technology to optimize fleet operations and enhance user experience:
+- AI-powered routing and dispatch systems to maximize efficiency
+- Predictive maintenance algorithms to reduce vehicle downtime
+- User behavior analysis to optimize vehicle distribution and availability
+- Energy management systems to coordinate charging with renewable generation
+- Mobile app providing seamless access to all services
+
+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.
+
+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.
+# Alignment with Illinois Initiatives
+
+## 3.1 Climate Action Plan Support
+
+"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.
+
+**Greenhouse Gas Emissions Reduction:**
+The project will contribute to emissions reduction through multiple pathways:
+
+- **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.
+
+- **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.
+
+- **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.
+
+- **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.
+
+**Clean Energy Integration:**
+The Illinois Climate Action Plan emphasizes the importance of renewable energy integration across sectors. "The Link" charging hubs exemplify this integration through:
+
+- **On-site Solar Generation:** Each hub will feature rooftop solar arrays sized to maximize renewable energy production while maintaining architectural integrity.
+
+- **Battery Storage Systems:** Integrated battery storage will capture excess solar generation for use during peak demand periods or when solar production is limited.
+
+- **Grid Optimization:** Smart charging management systems will coordinate with utility demand response programs, helping to stabilize the grid and maximize renewable energy utilization.
+
+- **Resilience Benefits:** The combination of solar generation and battery storage creates charging locations that can continue operating during grid disruptions, enhancing community resilience.
+
+**Paris Agreement Alignment:**
+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:
+
+- Accelerating the transition to zero-emission vehicles
+- Demonstrating innovative models for clean transportation infrastructure
+- Creating replicable approaches that can be scaled across the state
+- Integrating renewable energy with transportation electrification
+
+## 3.2 Transportation Innovation
+
+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:
+
+**Advancing Illinois' Leadership in Transportation Technology:**
+- Implementing cutting-edge charging technology that anticipates future needs, including Megawatt Charging System (MCS) readiness for heavy-duty vehicles
+- Integrating AI-powered fleet management systems that optimize vehicle utilization and energy consumption
+- Developing smart infrastructure that communicates with vehicles to enhance charging efficiency
+- Creating a platform for testing and demonstrating new mobility technologies in real-world applications
+
+**Complementing Research Initiatives:**
+"The Link" charging network will create synergies with existing transportation research efforts:
+
+- **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.
+
+- **Electrification Research:** The project will generate valuable data on charging behavior, energy consumption patterns, and infrastructure utilization that can inform academic and industry research.
+
+- **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.
+
+**Supporting New Mobility Models:**
+Unity Fleet's service offerings demonstrate innovative approaches to mobility that move beyond traditional vehicle ownership:
+
+- Subscription-based access models that reduce barriers to EV adoption
+- Shared mobility solutions that maximize vehicle utilization
+- Corporate shuttle services that reduce single-occupancy vehicle trips
+- Community access programs that expand transportation equity
+
+These new mobility models align with Illinois' interest in developing more efficient, sustainable transportation systems that reduce congestion, emissions, and infrastructure strain.
+
+## 3.3 Electric Vehicle Infrastructure Expansion
+
+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:
+
+**Strategic Network Development:**
+"The Link" charging hubs will be strategically located to:
+
+- Fill gaps in the existing charging network, particularly in areas underserved by current infrastructure
+- Create connections between interstate corridors and urban centers
+- Support both passenger and commercial vehicle charging needs
+- Establish visible landmarks that raise awareness of EV infrastructure
+
+**Enhanced Charging Experience:**
+While many existing and planned charging stations focus solely on the technical aspects of power delivery, "The Link" hubs elevate the charging experience through:
+
+- Comfortable, weather-protected environments that make charging convenient in all seasons
+- Amenities that transform charging time from a burden to a productive or enjoyable break
+- Architectural design that creates distinctive, recognizable landmarks
+- User-friendly interfaces and support services that welcome new EV adopters
+
+**Charging Technology Advancement:**
+"The Link" will implement advanced charging technologies that push the boundaries of current infrastructure:
+
+- High-power charging capabilities that minimize wait times
+- Multiple connector types to accommodate various vehicle models
+- Smart charging systems that optimize energy use and grid impact
+- Future-ready design that can adapt to evolving charging standards
+
+**Public-Private Partnership Model:**
+Unity Fleet's approach demonstrates an innovative public-private partnership model for infrastructure development that:
+
+- Leverages private investment alongside public funding
+- Creates economically sustainable operations through diversified revenue streams
+- Establishes replicable models that can accelerate infrastructure deployment
+- Reduces public sector implementation burden while maintaining public benefits
+
+## 3.4 Economic Development
+
+The Unity Fleet project will generate significant economic benefits for Illinois, supporting the state's goals for job creation, business development, and economic resilience.
+
+**Job Creation:**
+The project will create jobs across multiple phases and skill levels:
+
+- **Construction Phase:** Each hub will require architectural, engineering, electrical, and general construction services, creating temporary employment during development.
+
+- **Operational Phase:** Ongoing operations will create permanent positions in facility management, customer service, vehicle maintenance, and technology support.
+
+- **Corporate Functions:** As Unity Fleet expands, additional jobs will be created in administration, marketing, finance, and technology development.
+
+- **Indirect Employment:** The project will support jobs in the supply chain, including equipment manufacturers, software developers, and service providers.
+
+**Supply Chain Opportunities:**
+Unity Fleet will prioritize Illinois-based suppliers and contractors whenever possible, creating opportunities for local businesses in:
+
+- Construction and electrical services
+- Charging equipment installation and maintenance
+- Solar panel and battery system deployment
+- Facility maintenance and management
+- Vehicle acquisition and servicing
+- Software and technology development
+
+**Workforce Development:**
+The project will contribute to workforce development in emerging clean energy and transportation sectors:
+
+- Creating opportunities for training and certification in EV charging infrastructure
+- Developing skills in renewable energy integration and smart grid technologies
+- Building expertise in electric vehicle fleet management and maintenance
+- Advancing capabilities in transportation technology and data analytics
+
+**Tourism and Visitor Attraction:**
+The distinctive design of "The Link" hubs will create landmarks that enhance Illinois' image as an innovation leader:
+
+- Attracting EV travelers who might otherwise bypass the state
+- Creating Instagram-worthy destinations that generate positive visibility
+- Demonstrating Illinois' commitment to sustainable transportation
+- Supporting tourism-related businesses located near charging hubs
+
+## 3.5 Equity and Accessibility
+
+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.
+
+**Community Access Program:**
+Unity Fleet's Community Access Program (CAP) will provide discounted transportation options for low-income individuals through:
+
+- Reduced rates for subscription services
+- Partnerships with social service organizations to distribute access
+- Targeted outreach to underserved communities
+- Simplified payment options that don't require credit cards or smartphones
+
+**Equitable Location Planning:**
+The siting strategy for "The Link" charging hubs will prioritize equitable access by:
+
+- Including locations in or adjacent to Equity Investment Eligible Communities
+- Ensuring geographic distribution across diverse neighborhoods
+- Considering public transportation connections to maximize accessibility
+- Balancing commercial viability with community service objectives
+
+**Inclusive Design:**
+All aspects of "The Link" charging hubs and Unity Fleet services will be designed for inclusive access:
+
+- ADA-compliant physical infrastructure exceeding minimum requirements
+- Multiple language options in all user interfaces and support services
+- Clear, intuitive design that accommodates various literacy levels
+- Alternative access methods for those without smartphones or internet access
+
+**Community Engagement:**
+Unity Fleet will implement robust community engagement processes to ensure that implementation reflects community needs:
+
+- Advisory committees including representatives from diverse communities
+- Regular feedback mechanisms for service users and community members
+- Partnerships with community-based organizations
+- Transparent reporting on equity metrics and outcomes
+
+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.
+# Implementation Plan
+
+## 4.1 Project Phases
+
+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:
+
+### Phase 1: Planning and Site Selection (Months 1-3)
+- **Comprehensive Market Analysis:** Detailed assessment of current EV charging infrastructure, identifying gaps and high-demand areas
+- **Site Selection Process:** Evaluation of potential locations based on traffic patterns, grid capacity, land availability, and equity considerations
+- **Stakeholder Engagement:** Consultation with local governments, utilities, community organizations, and potential users
+- **Preliminary Design Development:** Refinement of architectural and engineering concepts for "The Link" charging hubs
+- **Regulatory Assessment:** Identification of permitting requirements, utility interconnection processes, and compliance considerations
+- **Partnership Development:** Establishment of relationships with technology providers, contractors, and service partners
+
+### Phase 2: Design and Permitting (Months 4-6)
+- **Detailed Site Engineering:** Complete site-specific engineering for each selected location
+- **Architectural Finalization:** Development of construction-ready architectural plans
+- **Electrical System Design:** Detailed planning for electrical infrastructure, including utility connections and solar integration
+- **Permitting Process:** Submission and management of all required permits and approvals
+- **Utility Coordination:** Establishment of interconnection agreements and service plans
+- **Procurement Planning:** Finalization of equipment specifications and vendor selection
+- **Construction Bidding:** Competitive selection of construction contractors
+
+### Phase 3: Construction and Equipment Installation (Months 7-12)
+- **Site Preparation:** Grading, foundation work, and utility connections
+- **Structural Construction:** Building of the physical hub structures
+- **Electrical Infrastructure:** Installation of power distribution systems and charging equipment
+- **Solar and Battery Systems:** Deployment of solar arrays and energy storage solutions
+- **Interior Buildout:** Completion of lounge areas and amenity spaces
+- **Landscaping and Exterior Finishes:** Implementation of sustainable landscaping and final exterior elements
+- **Quality Assurance:** Comprehensive testing and inspection of all systems
+
+### Phase 4: Technology Integration and Testing (Months 10-14)
+- **Charging System Commissioning:** Testing and optimization of all charging equipment
+- **Energy Management System Implementation:** Deployment of software for solar, battery, and grid integration
+- **Fleet Management Platform Development:** Finalization and testing of fleet operations software
+- **Mobile App Deployment:** Launch of user-facing mobile application for reservations and payments
+- **System Integration:** Ensuring seamless operation of all technological components
+- **Staff Training:** Comprehensive training for all operational personnel
+- **Soft Launch Testing:** Limited public access to identify and address operational issues
+
+### Phase 5: Launch and Operations (Months 15+)
+- **Grand Opening Events:** Public launch celebrations at each hub location
+- **Marketing Campaign:** Comprehensive outreach to build awareness and drive adoption
+- **Fleet Deployment:** Phased introduction of electric vehicles for subscription and service programs
+- **Operational Optimization:** Continuous improvement based on usage data and customer feedback
+- **Community Program Implementation:** Rollout of Community Access Program and other equity initiatives
+- **Performance Monitoring:** Tracking of key metrics against targets
+- **Expansion Planning:** Evaluation of opportunities for additional hub locations
+
+## 4.2 Timeline
+
+The implementation timeline spans approximately 15 months from funding approval to full operational status, with ongoing operations and potential expansion following the initial launch.
+
+| Milestone | Timeline | Key Activities |
+|-----------|----------|----------------|
+| Project Initiation | Month 1 | Team assembly, kickoff meetings, detailed planning |
+| Site Selection Finalized | Month 3 | Completion of site evaluations and securing of locations |
+| Design Completion | Month 6 | Finalization of all architectural and engineering plans |
+| Construction Start | Month 7 | Groundbreaking at first hub location |
+| First Hub Completion | Month 10 | Structural completion of first "The Link" charging hub |
+| Technology Integration Complete | Month 12 | All systems operational and integrated |
+| Staff Training Complete | Month 13 | Operational team fully trained and ready |
+| Soft Launch | Month 14 | Limited public access for testing and refinement |
+| Grand Opening | Month 15 | Full public launch of "The Link" network |
+| Fleet Services Launch | Month 16 | Introduction of subscription and service programs |
+| First Performance Review | Month 18 | Comprehensive assessment of operations and impact |
+| Expansion Planning | Month 24 | Evaluation for potential network growth |
+
+**Critical Path Elements:**
+- Utility coordination and interconnection agreements
+- Permitting approvals from local jurisdictions
+- Equipment procurement, particularly for specialized charging hardware
+- Weather considerations for construction scheduling
+- Software development and integration timelines
+
+**Contingency Planning:**
+Unity Fleet has incorporated several contingency measures to address potential implementation challenges:
+- 15% time buffer built into all construction timelines
+- Alternative site options identified in case primary locations face unexpected obstacles
+- Flexible equipment sourcing strategy with multiple vendor relationships
+- Modular design approach allowing for phased construction if necessary
+- Scalable technology architecture that can adapt to changing requirements
+
+## 4.3 Site Selection Criteria
+
+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:
+
+**Geographic Distribution Strategy:**
+- Initial focus on five strategic locations across Illinois
+- Balance between urban centers, suburban areas, and key transportation corridors
+- Consideration of existing charging infrastructure to avoid redundancy
+- Potential for future expansion and network development
+
+**Traffic Pattern Analysis:**
+- Proximity to major highways and thoroughfares
+- Traffic volume and composition (passenger vs. commercial)
+- Dwell time patterns at nearby amenities
+- Seasonal variations in traffic flow
+- Visibility from primary roadways
+
+**Grid Capacity Considerations:**
+- Existing electrical infrastructure capacity
+- Proximity to substations or distribution lines
+- Utility upgrade requirements and timelines
+- Potential for renewable energy integration
+- Grid reliability and redundancy options
+
+**Land Availability and Characteristics:**
+- Sufficient space for hub structure and vehicle circulation
+- Appropriate zoning and land use designations
+- Environmental considerations and site conditions
+- Ownership structure and acquisition feasibility
+- Future development plans for surrounding areas
+
+**Community Impact Assessment:**
+- Proximity to underserved communities
+- Accessibility via multiple transportation modes
+- Potential for local economic benefits
+- Community receptiveness and support
+- Alignment with local development goals
+
+**Operational Viability:**
+- Security considerations and lighting
+- Proximity to amenities and services
+- All-weather accessibility
+- Potential for 24/7 operations
+- Maintenance and servicing logistics
+
+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.
+
+## 4.4 Technology Implementation
+
+Unity Fleet will implement a comprehensive technology ecosystem that integrates charging infrastructure, renewable energy systems, fleet management, and user interfaces:
+
+**Charging Equipment Specifications:**
+- **DC Fast Chargers:** Multiple 150kW chargers with CCS connectors
+- **Future-Ready Design:** Infrastructure capable of supporting Megawatt Charging System (MCS) for heavy-duty vehicles
+- **Smart Charging Features:** Load management, user authentication, and remote monitoring
+- **Reliability Measures:** Redundant systems, robust design for Illinois weather conditions
+- **Accessibility Features:** User-friendly interfaces, multiple payment options, clear instructions
+
+**Solar Integration Methodology:**
+- **Rooftop Arrays:** High-efficiency photovoltaic panels integrated into hub architecture
+- **Production Capacity:** Sized to optimize on-site generation while maintaining aesthetic design
+- **Grid Connection:** Bidirectional capability for energy export when production exceeds demand
+- **Monitoring Systems:** Real-time production tracking and performance analytics
+- **Seasonal Optimization:** Panel positioning and system design optimized for Illinois' solar conditions
+
+**Battery Storage Systems:**
+- **Capacity Sizing:** Balanced to support charging during peak demand and store excess solar generation
+- **Chemistry Selection:** Lithium iron phosphate (LFP) or similar technology balancing safety, longevity, and performance
+- **Thermal Management:** Systems designed for Illinois' temperature range
+- **Control Systems:** Advanced battery management for optimal cycling and longevity
+- **Grid Services Capability:** Potential for participation in utility demand response programs
+
+**Software and App Development:**
+- **User-Facing Applications:** Mobile app for reservations, payments, and status monitoring
+- **Fleet Management Platform:** Comprehensive system for vehicle tracking, maintenance, and dispatch
+- **Energy Management System:** Software controlling the interaction between solar, battery, and grid power
+- **Data Analytics Platform:** Tools for performance monitoring and continuous improvement
+- **Integration Architecture:** APIs and protocols ensuring seamless communication between systems
+
+**Fleet Management Systems:**
+- **Vehicle Telematics:** Real-time monitoring of location, charge status, and diagnostics
+- **Reservation System:** User-friendly booking platform for subscription and on-demand services
+- **Maintenance Tracking:** Predictive maintenance algorithms to optimize vehicle availability
+- **Route Optimization:** AI-powered routing to maximize efficiency and range
+- **User Authentication:** Secure access controls for vehicle usage
+
+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.
+
+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.
+# Budget and Financial Plan
+
+## 5.1 Project Budget
+
+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.
+
+The budget is structured to support all phases of implementation, from planning and design through construction and operation. Major expenditure categories are detailed below:
+
+### Capital Expenditures
+
+| Category | Description | Amount |
+|----------|-------------|--------|
+| **Site Acquisition/Leasing** | Securing five strategic locations through purchase or long-term lease arrangements | $750,000 |
+| **Architectural & Engineering** | Design services, structural engineering, electrical engineering, and site planning | $425,000 |
+| **Construction Costs** | Site preparation, foundation work, structural elements, and finishing for five hub locations | $1,200,000 |
+| **Charging Equipment** | DC Fast Chargers (150kW) with CCS connectors, power distribution systems, and installation | $850,000 |
+| **Solar & Battery Systems** | Rooftop solar arrays, battery storage systems, and energy management equipment | $625,000 |
+| **Interior Buildout** | Lounge furnishings, amenity installations, and customer service facilities | $275,000 |
+| **Landscaping & Exterior** | Sustainable landscaping, signage, lighting, and site improvements | $175,000 |
+| **Grid Connections** | Utility interconnection costs, transformers, and electrical infrastructure | $350,000 |
+| **Subtotal: Capital Expenditures** | | **$4,650,000** |
+
+### Technology Development
+
+| Category | Description | Amount |
+|----------|-------------|--------|
+| **Energy Management System** | Software development for solar, battery, and grid integration | $175,000 |
+| **Fleet Management Platform** | Development of vehicle tracking, maintenance, and reservation systems | $225,000 |
+| **Mobile Application** | User-facing app for reservations, payments, and status monitoring | $150,000 |
+| **System Integration** | APIs, data architecture, and cross-platform functionality | $125,000 |
+| **Cybersecurity Implementation** | Security protocols, testing, and compliance measures | $75,000 |
+| **Subtotal: Technology Development** | | **$750,000** |
+
+### Operational Setup
+
+| Category | Description | Amount |
+|----------|-------------|--------|
+| **Initial Fleet Acquisition** | Purchase of first 10 electric vehicles for subscription and service programs | $500,000 |
+| **Staff Recruitment & Training** | Hiring and comprehensive training for operational personnel | $150,000 |
+| **Marketing & Community Outreach** | Launch campaign, community engagement, and educational materials | $200,000 |
+| **Operational Reserves** | Contingency funding for initial operational period | $150,000 |
+| **Subtotal: Operational Setup** | | **$1,000,000** |
+
+### Administrative and Overhead
+
+| Category | Description | Amount |
+|----------|-------------|--------|
+| **Project Management** | Dedicated project management team throughout implementation | $250,000 |
+| **Permitting & Compliance** | Fees and professional services for regulatory compliance | $100,000 |
+| **Legal & Insurance** | Contract development, liability coverage, and risk management | $125,000 |
+| **Administrative Support** | Office operations, accounting, and administrative personnel | $125,000 |
+| **Subtotal: Administrative and Overhead** | | **$600,000** |
+
+### Budget Summary
+
+| Category | Amount | Percentage |
+|----------|--------|------------|
+| Capital Expenditures | $4,650,000 | 66.4% |
+| Technology Development | $750,000 | 10.7% |
+| Operational Setup | $1,000,000 | 14.3% |
+| Administrative and Overhead | $600,000 | 8.6% |
+| **Total Project Budget** | **$7,000,000** | **100%** |
+
+## 5.2 Funding Sources
+
+The total project budget of $7,000,000 will be funded through a combination of the requested grant and matching funds from Unity Fleet:
+
+| Source | Amount | Percentage |
+|--------|--------|------------|
+| IDOT Statewide Planning and Research Funds | $3,200,000 | 45.7% |
+| Unity Fleet Matching Funds | $3,800,000 | 54.3% |
+| **Total Funding** | **$7,000,000** | **100%** |
+
+### Matching Funds Detail
+
+Unity Fleet will provide the required matching funds through a combination of:
+
+**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.
+
+**Corporate Capital:** Unity Fleet will allocate a portion of its existing capital resources to this project, demonstrating our organizational commitment to its success.
+
+**Equipment Financing:** For certain capital equipment, Unity Fleet will utilize specialized financing arrangements that optimize cash flow while maintaining long-term ownership of assets.
+
+**In-Kind Contributions:** Unity Fleet will leverage existing technological assets, intellectual property, and professional expertise as in-kind contributions to the project.
+
+All matching funds have been secured or firmly committed, ensuring that the project can proceed immediately upon grant approval without financial delays.
+
+## 5.3 Financial Sustainability
+
+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:
+
+### Revenue Streams
+
+The project will generate revenue through multiple channels:
+
+**Charging Services:**
+- Pay-per-use charging fees from non-subscription users
+- Bundled charging access through subscription programs
+- Premium charging options for commercial vehicles
+- Reserved charging slots for regular users
+
+**Fleet Services:**
+- Take-Home Subscription revenue
+- FlexRide Subscription fees
+- Daily and Monthly All-Access Pass sales
+- Enhanced Commuter Pass subscriptions
+- Corporate shuttle service contracts
+
+**Ancillary Revenue:**
+- Refreshment sales and vendor partnerships
+- Advertising and promotional opportunities
+- Data services (anonymized usage patterns)
+- Grid services through battery storage capabilities
+- Co-location fees from complementary businesses
+
+### Financial Projections
+
+Based on market analysis and comparable operations, Unity Fleet projects the following financial performance:
+
+| Year | Annual Revenue | Operating Expenses | Net Operating Income |
+|------|----------------|--------------------|-----------------------|
+| 1 | $1,200,000 | $1,050,000 | $150,000 |
+| 2 | $2,500,000 | $1,750,000 | $750,000 |
+| 3 | $4,000,000 | $2,500,000 | $1,500,000 |
+| 5 | $7,500,000 | $4,000,000 | $3,500,000 |
+
+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.
+
+### Maintenance and Replacement Planning
+
+Unity Fleet has developed a comprehensive asset management strategy to ensure the long-term functionality of all infrastructure:
+
+**Preventative Maintenance:** Regular scheduled maintenance for all charging equipment, solar systems, and facility components to maximize lifespan and reliability.
+
+**Equipment Replacement Fund:** Beginning in year two, Unity Fleet will allocate 5% of gross revenue to a dedicated replacement fund for future equipment upgrades.
+
+**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.
+
+**Facility Reinvestment:** Annual allocation for facility improvements and updates to maintain attractive, functional environments.
+
+### Scaling Strategy
+
+The financial model includes a reinvestment strategy for expansion:
+
+**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.
+
+**Service Expansion:** The fleet services component will scale incrementally, with vehicle acquisitions tied directly to subscription growth to maintain optimal utilization.
+
+**Technology Enhancement:** Continuous improvement of software platforms and user interfaces based on operational data and customer feedback.
+
+**Partnership Development:** Strategic partnerships with complementary businesses and services to enhance value proposition and create additional revenue opportunities.
+
+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.
+# Performance Metrics and Evaluation
+
+## 6.1 Key Performance Indicators
+
+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.
+
+### Environmental Impact Metrics
+
+| Metric | Description | Target |
+|--------|-------------|--------|
+| **Charging Sessions** | Total number of vehicle charging sessions completed | 25,000 in Year 1; 50% annual growth |
+| **kWh Delivered** | Total electrical energy provided to vehicles | 1,250,000 kWh in Year 1; 50% annual growth |
+| **Solar Generation** | Renewable energy produced by on-site solar arrays | 30% of total energy delivered in Year 1; 40% by Year 3 |
+| **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 |
+| **Vehicle Miles Electrified** | Total miles driven by EVs using "The Link" infrastructure | 5 million miles in Year 1; 15 million by Year 3 |
+| **Petroleum Displacement** | Gallons of gasoline/diesel avoided through EV adoption | 200,000 gallons in Year 1; 600,000 by Year 3 |
+
+### Operational Performance Metrics
+
+| Metric | Description | Target |
+|--------|-------------|--------|
+| **Charging Station Uptime** | Percentage of time charging ports are operational | >98% |
+| **Utilization Rate** | Percentage of available charging time that ports are in active use | 40% in Year 1; 60% by Year 3 |
+| **Peak vs. Off-Peak Usage** | Distribution of charging sessions across time periods | <60% of sessions during grid peak hours |
+| **Average Charging Duration** | Mean time spent per charging session | <45 minutes for passenger vehicles |
+| **Customer Wait Time** | Average time users wait for available charging port | <10 minutes during 90% of operating hours |
+| **Energy Efficiency** | Ratio of energy delivered to vehicles vs. total energy consumed | >92% efficiency |
+
+### User Adoption Metrics
+
+| Metric | Description | Target |
+|--------|-------------|--------|
+| **Unique Users** | Number of distinct individuals using the charging network | 5,000 in Year 1; 15,000 by Year 3 |
+| **Subscription Enrollment** | Number of active subscribers across all service tiers | 500 in Year 1; 2,000 by Year 3 |
+| **User Satisfaction** | Average rating from customer feedback surveys | >4.5/5.0 rating |
+| **Repeat Usage** | Percentage of users who return for multiple sessions | >70% |
+| **App Downloads** | Number of mobile application installations | 7,500 in Year 1; 25,000 by Year 3 |
+| **Session Frequency** | Average number of charging sessions per user per month | >2.5 sessions |
+
+### Economic Impact Metrics
+
+| Metric | Description | Target |
+|--------|-------------|--------|
+| **Job Creation** | Direct employment generated by the project | 25 FTE positions in Year 1; 50 by Year 3 |
+| **Local Spending** | Procurement from Illinois-based suppliers and contractors | >70% of eligible expenditures |
+| **Revenue Generation** | Total income from all services | $1.2M in Year 1; $4M by Year 3 |
+| **Tax Contribution** | State and local tax revenue generated | $150,000 in Year 1; $500,000 by Year 3 |
+| **Private Investment Leveraged** | Additional private capital attracted to the project | $5M by Year 3 |
+| **Cost per kWh Delivered** | Operational efficiency measure | <$0.20/kWh by Year 3 |
+
+### Equity and Accessibility Metrics
+
+| Metric | Description | Target |
+|--------|-------------|--------|
+| **LIDAC Participation** | Usage by residents of Low Income/Disadvantaged Communities | >25% of total users |
+| **Community Access Program Enrollment** | Participation in discounted access programs | 250 participants in Year 1; 1,000 by Year 3 |
+| **Geographic Distribution** | Spread of users across different communities | Representation from >75% of service area communities |
+| **Accessibility Compliance** | Adherence to ADA and accessibility standards | 100% compliance plus enhanced features |
+| **Language Accessibility** | Availability of services in multiple languages | Support for at least 3 languages besides English |
+| **Payment Method Diversity** | Range of payment options available to users | Minimum of 5 distinct payment methods |
+
+## 6.2 Evaluation Methodology
+
+Unity Fleet will implement a rigorous evaluation methodology to ensure accurate, transparent assessment of project performance:
+
+### Data Collection Approach
+
+**Automated System Monitoring:**
+- Real-time data collection from all charging equipment
+- Continuous monitoring of solar generation and energy consumption
+- Automated tracking of vehicle usage and charging patterns
+- System performance and reliability metrics
+
+**User Interaction Tracking:**
+- Mobile app usage statistics and patterns
+- Reservation and payment transaction data
+- User demographic information (voluntarily provided)
+- Session frequency and duration metrics
+
+**Direct User Feedback:**
+- Post-charging session satisfaction surveys
+- Quarterly in-depth user experience assessments
+- Focus groups with different user segments
+- Suggestion and improvement channels
+
+**Economic Impact Assessment:**
+- Employment data from operations and partners
+- Procurement and spending analysis
+- Revenue and financial performance tracking
+- Tax contribution documentation
+
+**Environmental Impact Calculation:**
+- Energy delivery measurement
+- Emissions avoidance calculations based on EPA methodologies
+- Renewable energy generation monitoring
+- Grid impact analysis in partnership with utilities
+
+### Reporting Frequency and Format
+
+Unity Fleet will maintain a transparent reporting structure with regular updates to stakeholders:
+
+**Monthly Operational Reports:**
+- Key usage statistics and trends
+- System performance and reliability metrics
+- Notable operational developments
+- Progress toward targets
+
+**Quarterly Performance Assessments:**
+- Comprehensive analysis of all KPIs
+- Comparison to targets and previous periods
+- User demographic and behavior analysis
+- Financial performance summary
+
+**Annual Impact Evaluation:**
+- Detailed analysis of environmental impact
+- Economic benefit assessment
+- Equity and accessibility performance
+- Strategic recommendations for improvement
+
+**Public Dashboard:**
+- Real-time display of key metrics on website
+- Environmental impact visualization
+- System availability information
+- Community benefit highlights
+
+### Continuous Improvement Process
+
+Unity Fleet will implement a structured approach to using evaluation data for ongoing enhancement:
+
+**Quarterly Review Meetings:**
+- Cross-functional team analysis of performance data
+- Identification of improvement opportunities
+- Prioritization of enhancement initiatives
+- Action plan development
+
+**User Experience Optimization:**
+- Regular usability testing and interface refinement
+- Feature development based on user feedback
+- Service enhancement to address identified needs
+- Accessibility improvements
+
+**Operational Efficiency Initiatives:**
+- Energy efficiency optimization
+- Maintenance procedure refinement
+- Staffing and resource allocation adjustments
+- Technology upgrades based on performance data
+
+**Strategic Adaptation:**
+- Annual strategic review incorporating evaluation findings
+- Adjustment of growth plans based on usage patterns
+- Refinement of service offerings to maximize impact
+- Partnership development informed by performance data
+
+## 6.3 Long-term Impact Assessment
+
+Beyond immediate performance metrics, Unity Fleet will conduct comprehensive assessments of the project's long-term impact on Illinois' transportation system, environment, and economy:
+
+### Environmental Benefits Quantification
+
+**Transportation Emissions Analysis:**
+Unity Fleet will partner with environmental researchers to conduct a comprehensive analysis of the project's impact on transportation emissions, including:
+- Direct emissions reduction from EV adoption
+- Secondary effects on conventional vehicle usage
+- Impact on regional air quality indicators
+- Contribution to Illinois' climate goals
+
+**Renewable Energy Integration Assessment:**
+The project will evaluate the effectiveness of integrating solar generation with EV charging, analyzing:
+- Optimization of renewable energy utilization
+- Grid impact during peak demand periods
+- Battery storage effectiveness
+- Seasonal performance variations
+
+**Life Cycle Assessment:**
+A complete life cycle analysis will examine the net environmental impact of the project, including:
+- Infrastructure construction and materials
+- Equipment manufacturing and transportation
+- Operational energy consumption
+- End-of-life considerations and circular economy opportunities
+
+### Economic Impact Measurement
+
+**Job Creation and Economic Multiplier:**
+Unity Fleet will work with economic analysts to quantify the project's contribution to Illinois' economy:
+- Direct employment impact
+- Indirect job creation through suppliers and partners
+- Induced economic activity from employee spending
+- Skills development and workforce advancement
+
+**Transportation Cost Analysis:**
+The project will assess its impact on transportation costs for individuals and businesses:
+- Comparative cost of electric vs. conventional vehicle operation
+- Subscription model value compared to vehicle ownership
+- Business transportation cost reduction through fleet services
+- Time value benefits from charging hub amenities
+
+**Property Value and Development Impact:**
+Research will examine the influence of "The Link" charging hubs on surrounding areas:
+- Commercial activity near hub locations
+- Property value trends in proximity to charging infrastructure
+- Development patterns influenced by charging availability
+- Tax base enhancement in host communities
+
+### Transportation System Improvement Metrics
+
+**EV Adoption Acceleration:**
+Unity Fleet will track the project's contribution to EV adoption rates:
+- New EV registrations in service areas
+- Conversion rates from conventional to electric vehicles
+- Range anxiety reduction through survey assessment
+- Charging as a factor in vehicle purchase decisions
+
+**Modal Integration Assessment:**
+The project will evaluate how "The Link" charging network integrates with other transportation modes:
+- Connections to public transit
+- Support for multi-modal trips
+- Reduction in single-occupancy vehicle trips
+- Enhancement of transportation system resilience
+
+**Infrastructure Utilization Optimization:**
+Analysis will examine how the project affects overall transportation infrastructure usage:
+- Peak travel demand modification
+- Parking requirement impacts
+- Road capacity utilization changes
+- Charging infrastructure adequacy for growing EV fleet
+
+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.
+# Partnerships and Stakeholder Engagement
+
+## 7.1 Current Partners
+
+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:
+
+### Technology Providers
+- **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.
+- **Solar and Battery System Integrator:** A specialized renewable energy firm will provide design and implementation services for the solar arrays and battery storage systems.
+- **Software Development Partner:** Unity Fleet is collaborating with an Illinois-based software development company to create the mobile application and management platforms.
+- **Fleet Management Technology Provider:** A partnership with a fleet telematics specialist will support the vehicle tracking and optimization systems.
+
+### Local Businesses
+- **Retail and Food Service Partners:** Unity Fleet has established relationships with several food and beverage providers interested in operating within "The Link" hub locations.
+- **Corporate Transportation Clients:** Initial agreements with three Illinois-based corporations to provide electric shuttle services for employees.
+- **Property Development Partners:** Relationships with commercial property owners and developers to identify and secure optimal locations for charging hubs.
+- **Vehicle Suppliers:** Partnerships with electric vehicle dealers to support fleet acquisition and potential promotional opportunities.
+
+### Community Organizations
+- **Environmental Advocacy Groups:** Collaborations with environmental organizations to promote the benefits of electric transportation.
+- **Workforce Development Programs:** Partnerships with job training organizations to develop skills in EV infrastructure installation and maintenance.
+- **Community Service Organizations:** Relationships with social service providers to implement the Community Access Program for low-income residents.
+- **Educational Institutions:** Collaborations with community colleges and universities for research, internships, and educational programming.
+
+## 7.2 Stakeholder Engagement Plan
+
+Unity Fleet will implement a comprehensive stakeholder engagement strategy to ensure the project addresses community needs, builds broad support, and maximizes positive impact:
+
+### Community Outreach Strategy
+
+**Informational Sessions:**
+- Public presentations in each target community
+- Virtual webinars explaining the project and benefits
+- Site-specific open houses during planning phases
+- Educational workshops on EV technology and benefits
+
+**Digital Engagement:**
+- Dedicated project website with regular updates
+- Social media presence with engaging content
+- Email newsletter for interested stakeholders
+- Online feedback forms and suggestion channels
+
+**Targeted Outreach to Underserved Communities:**
+- Presentations at community centers and faith-based organizations
+- Materials in multiple languages reflecting community demographics
+- Partnerships with trusted community organizations
+- Transportation to informational events when needed
+
+**Educational Programming:**
+- EV awareness events and test drive opportunities
+- School programs on clean transportation
+- Workforce development information sessions
+- Community college partnerships for technical training
+
+### Local Government Coordination
+
+**Municipal Engagement:**
+- Early consultation with local officials in target communities
+- Regular briefings for municipal staff and elected representatives
+- Coordination with planning and zoning departments
+- Alignment with local economic development initiatives
+
+**Permitting and Regulatory Coordination:**
+- Proactive engagement with permitting authorities
+- Clear communication about project timelines and requirements
+- Responsive addressing of questions and concerns
+- Documentation of processes to streamline future deployments
+
+**Transportation Planning Integration:**
+- Coordination with local transportation planning agencies
+- Alignment with regional mobility strategies
+- Integration with public transit planning
+- Contribution to local climate action initiatives
+
+**Utility Coordination:**
+- Early engagement with electric utilities serving target areas
+- Collaborative planning for grid connections and capacity
+- Exploration of potential demand response programs
+- Data sharing for grid impact analysis
+
+### Business Partnership Development
+
+**Local Business Engagement:**
+- Outreach to businesses near potential hub locations
+- Exploration of co-marketing opportunities
+- Development of cross-promotional programs
+- Creation of business charging incentives
+
+**Corporate Transportation Programs:**
+- Targeted outreach to major employers
+- Custom proposals for employee transportation solutions
+- Fleet electrification consulting services
+- Workplace charging integration options
+
+**Tourism and Hospitality Connections:**
+- Partnerships with hotels and tourist destinations
+- Integration with visitor information services
+- Charging packages for travelers
+- Cross-promotion with regional attractions
+
+**Supply Chain Development:**
+- Identification of Illinois-based suppliers and contractors
+- Capacity building for local businesses to participate
+- Mentorship for small and diverse businesses
+- Transparent procurement processes
+
+## 7.3 Letters of Support
+
+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:
+
+### Government and Public Agencies
+- Illinois Environmental Protection Agency
+- Regional Transportation Authority
+- City of Decatur Economic Development Department
+- Illinois Clean Energy Community Foundation
+
+### Business and Industry
+- Illinois Chamber of Commerce
+- Electric Vehicle Association of Illinois
+- Illinois Automobile Dealers Association
+- Regional business improvement districts
+
+### Community and Environmental Organizations
+- Illinois Environmental Council
+- Center for Neighborhood Technology
+- Illinois Clean Jobs Coalition
+- Community transportation advocacy groups
+
+### Educational and Research Institutions
+- University of Illinois Smart Transportation Infrastructure Initiative
+- Illinois Community College Sustainability Network
+- Illinois Institute of Technology Power Electronics Laboratory
+- Local workforce development boards
+
+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.
+
+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.
+# Conclusion
+
+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.
+
+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.
+
+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.
+
+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.
+
+"The Link" charging network will deliver significant benefits to Illinois:
+
+- **Environmental Impact:** Accelerating EV adoption to reduce transportation emissions and support climate goals
+- **Economic Development:** Creating jobs, supporting local businesses, and building workforce capacity in clean energy sectors
+- **Transportation Innovation:** Advancing Illinois' leadership in mobility technology and infrastructure
+- **Equity and Accessibility:** Ensuring that clean transportation benefits reach all communities through inclusive design and targeted programs
+- **Energy Integration:** Demonstrating the successful integration of renewable energy with transportation infrastructure
+
+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.
+
+Thank you for your consideration of this proposal.