Desarrolle e implemente completamente una interfaz de usuario y experiencia UX/UI de vanguardia y futurista de máximo rendimiento, full responsive para todo tipo de dispositivos, implementando el código en diferentes paginas independientes interconectadas, para la aplicación detallada en los siguientes diagramas, cumpliendo con los siguientes requisitos técnicos y de diseño:

1. Implementación de las mejores prácticas de diseño y desarrollo (2025), garantizando compatibilidad total con:
- HTML6
- CSS4
- ECMAScript 2025

2. Diseño futurista y minimalista con alto impacto visual, manteniendo:
- Tiempos de respuesta inferiores a 100ms
- Eficiencia operativa del 99.9%

3. Optimización extrema del rendimiento que asegure:
- 60 FPS constantes en todos los dispositivos
- Tiempo de renderizado menor a 16ms
- Uso de memoria optimizado

4. Código de alta calidad que cumpla con:
- Estándares W3C y WCAG 3.0
- Arquitectura modular con patrones atómicos
- Cobertura de pruebas superior al 90%

5. Experiencia de usuario innovadora que incluya:
- Flujos intuitivos basados en diagramas de flujo UX
- Interacciones coherentes en todos los componentes
- Navegación predictiva con inteligencia contextual

6. Interfaz de última generación con:
- Animaciones fluidas a 60 FPS sincronizadas con el hardware
- Retroalimentación táctil precisa con respuesta háptica
- Transiciones perfectamente sincronizadas entre estados

7. Arquitectura robusta con componentes reutilizables que garanticen:
- Tiempo de carga inicial menor a 1 segundo
- Escalabilidad ilimitada mediante diseño atómico
- Mantenibilidad óptima con documentación completa

Prioridades clave:
- Coherencia visual en todos los breakpoints (desde 320px hasta 8K) con diseño adaptable
- Interacciones fluidas con latencia inferior a 50ms en todas las acciones
- Innovación demostrable en cada componente mediante métricas cuantificables

Métricas requeridas:
- Usabilidad: SUS >85 en pruebas con usuarios reales
- Rendimiento: Lighthouse score >95 en todas las categorías
- Experiencia: NPS >75 en encuestas post-implementación

@startuml TradingSystem_ComponentDiagram
!theme aws-orange
title Sistema de Trading - Diagrama de Componentes

!define RECTANGLE class

package "Frontend Layer" {
[Web Dashboard] as WebUI
[Mobile App] as MobileApp
[Trading Terminal] as Terminal
}

package "API Gateway" {
[FastAPI Gateway] as Gateway
[Authentication] as Auth
[Rate Limiting] as RateLimit
[Load Balancer] as LoadBalancer
}

package "Core Services" {
package "Trading Core" {
[Signal Service] as SignalSvc
[Strategy Service] as StrategySvc
[Indicator Service] as IndicatorSvc
[Market Data Service] as MarketDataSvc
}

package "ML/AI Services" {
[ML Model Service] as MLSvc
[Feature Engineering] as FeatureSvc
[Model Training] as TrainingSvc
[MLflow Tracking] as MLflowSvc
}

package "Integration Services" {
[MetaTrader5 Connector] as MT5Connector
[Data Provider Service] as DataProviderSvc
[Notification Service] as NotificationSvc
[MQTT Service] as MQTTSvc
}
}

package "Data Layer" {
[PostgreSQL] as PostgresDB
[Redis Cache] as RedisCache
[Time Series DB] as TimeSeriesDB
[File Storage] as FileStorage
}

package "External Systems" {
[MetaTrader 5] as MT5
[Alpha Vantage API] as AlphaVantage
[Yahoo Finance] as YahooFinance
[Telegram Bot API] as Telegram
[Email Service] as EmailSvc
}

package "Infrastructure" {
package "Monitoring" {
[Prometheus] as Prometheus
[Grafana] as Grafana
[AlertManager] as AlertManager
[Jaeger Tracing] as Jaeger
}

package "Message Queue" {
[MQTT Broker] as MQTTBroker
[Redis Pub/Sub] as RedisPubSub
}

package "Security" {
[JWT Service] as JWTSvc
[Encryption Service] as EncryptionSvc
[Audit Service] as AuditSvc
}
}

package "DevOps & Deployment" {
[Docker Containers] as Docker
[Kubernetes] as K8s
[CI/CD Pipeline] as CICD
[Backup Service] as BackupSvc
}

' Frontend connections
WebUI --> Gateway : HTTPS/REST
MobileApp --> Gateway : HTTPS/REST
Terminal --> Gateway : HTTPS/REST + WebSocket

' API Gateway connections
Gateway --> Auth : Authentication
Gateway --> RateLimit : Rate Control
LoadBalancer --> Gateway : Load Distribution

' Core Services connections
Gateway --> SignalSvc : REST API
Gateway --> StrategySvc : REST API
Gateway --> IndicatorSvc : REST API
Gateway --> MarketDataSvc : REST API

SignalSvc --> PostgresDB : Signal Data
SignalSvc --> RedisCache : Caching
SignalSvc --> MQTTSvc : Real-time Updates

StrategySvc --> MLSvc : ML Predictions
StrategySvc --> IndicatorSvc : Technical Analysis
StrategySvc --> PostgresDB : Strategy Data

IndicatorSvc --> MarketDataSvc : Market Data
IndicatorSvc --> RedisCache : Indicator Cache
IndicatorSvc --> TimeSeriesDB : Historical Data

MarketDataSvc --> MT5Connector : Live Data
MarketDataSvc --> DataProviderSvc : External Data
MarketDataSvc --> TimeSeriesDB : Storage

' ML Services connections
MLSvc --> FeatureSvc : Feature Preparation
MLSvc --> MLflowSvc : Model Management
MLSvc --> FileStorage : Model Storage
TrainingSvc --> MLflowSvc : Experiment Tracking

' Integration Services connections
MT5Connector --> MT5 : MT5 API
DataProviderSvc --> AlphaVantage : Market Data API
DataProviderSvc --> YahooFinance : Market Data API
NotificationSvc --> Telegram : Notifications
NotificationSvc --> EmailSvc : Email Alerts
MQTTSvc --> MQTTBroker : Message Publishing

' Data Layer connections
PostgresDB --> BackupSvc : Database Backup
RedisCache --> RedisPubSub : Pub/Sub Messaging
TimeSeriesDB --> BackupSvc : Time Series Backup

' Monitoring connections
SignalSvc --> Prometheus : Metrics
StrategySvc --> Prometheus : Metrics
MLSvc --> Prometheus : Metrics
Prometheus --> Grafana : Visualization
Prometheus --> AlertManager : Alerting
Gateway --> Jaeger : Distributed Tracing

' Security connections
Gateway --> JWTSvc : Token Validation
SignalSvc --> AuditSvc : Audit Logging
StrategySvc --> EncryptionSvc : Data Encryption

' Infrastructure connections
Docker --> K8s : Container Orchestration
CICD --> Docker : Container Building
CICD --> K8s : Deployment

' Notes
note right of MLSvc : Utiliza modelos ONNX\npara inferencia rápida
note right of MT5Connector : Conexión directa con\nMetaTrader 5 terminal
note right of MQTTBroker : Comunicación en tiempo real\ncon clientes suscritos
note right of Prometheus : Métricas de rendimiento\ny monitoreo del sistema
note right of PostgresDB : Base de datos principal\ncon replicación

@enduml

---------------------------------------------------------------------------------------------


@startuml TradingSystem_DeploymentDiagram
!theme aws-orange
title Sistema de Trading - Diagrama de Despliegue

!define RECTANGLE node

node "Load Balancer" as LB {
artifact "Nginx" as Nginx
artifact "SSL Termination" as SSL
}

node "Web Servers Cluster" as WebCluster {
node "Web Server 1" as Web1 {
artifact "FastAPI App" as App1
artifact "Gunicorn" as Gunicorn1
}

node "Web Server 2" as Web2 {
artifact "FastAPI App" as App2
artifact "Gunicorn" as Gunicorn2
}

node "Web Server 3" as Web3 {
artifact "FastAPI App" as App3
artifact "Gunicorn" as Gunicorn3
}
}

node "Application Services" as AppServices {
node "ML Service Node" as MLNode {
artifact "ML Model Service" as MLService
artifact "ONNX Runtime" as ONNXRuntime
artifact "Feature Engineering" as FeatureEng
database "Model Storage" as ModelStorage
}

node "Trading Service Node" as TradingNode {
artifact "Signal Service" as SignalService
artifact "Strategy Service" as StrategyService
artifact "Indicator Service" as IndicatorService
}

node "Integration Node" as IntegrationNode {
artifact "MT5 Connector" as MT5Conn
artifact "Data Provider Service" as DataProvider
artifact "MQTT Service" as MQTTService
}
}

node "Database Cluster" as DBCluster {
node "Primary DB" as PrimaryDB {
database "PostgreSQL Primary" as PostgresPrimary
artifact "Connection Pool" as ConnPool1
}

node "Replica DB 1" as ReplicaDB1 {
database "PostgreSQL Replica" as PostgresReplica1
artifact "Connection Pool" as ConnPool2
}

node "Replica DB 2" as ReplicaDB2 {
database "PostgreSQL Replica" as PostgresReplica2
artifact "Connection Pool" as ConnPool3
}
}

node "Cache Cluster" as CacheCluster {
node "Redis Master" as RedisMaster {
database "Redis Primary" as RedisDB1
}

node "Redis Slave 1" as RedisSlave1 {
database "Redis Replica" as RedisDB2
}

node "Redis Slave 2" as RedisSlave2 {
database "Redis Replica" as RedisDB3
}
}

node "Time Series Database" as TSDBNode {
database "InfluxDB" as InfluxDB
artifact "Retention Policies" as RetentionPolicies
}

node "Message Queue" as MQNode {
node "MQTT Broker Cluster" as MQTTCluster {
artifact "MQTT Broker 1" as MQTTBroker1
artifact "MQTT Broker 2" as MQTTBroker2
}

artifact "Redis Pub/Sub" as RedisPubSub
}

node "Monitoring Stack" as MonitoringStack {
node "Metrics Collection" as MetricsNode {
artifact "Prometheus" as Prometheus
database "Metrics Storage" as MetricsDB
}

node "Visualization" as VizNode {
artifact "Grafana" as Grafana
database "Dashboard Config" as DashboardDB
}

node "Alerting" as AlertNode {
artifact "AlertManager" as AlertManager
artifact "Notification Handlers" as NotificationHandlers
}

node "Tracing" as TracingNode {
artifact "Jaeger" as Jaeger
database "Trace Storage" as TraceDB
}

node "Log Aggregation" as LogNode {
artifact "Loki" as Loki
artifact "Promtail" as Promtail
database "Log Storage" as LogDB

README.md

@@ -1,10 +1,13 @@
 ---
-title: Quantumtrade Nexus
-emoji: 🌖
-colorFrom: purple
-colorTo: pink
+title: QuantumTrade Nexus 🚀
+colorFrom: green
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,498 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QuantumTrade Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#3B82F6',
+                        },
+                        secondary: {
+                            500: '#10B981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            overflow-x: hidden;
+        }
+        .vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .glow {
+            text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
+            border-color: rgba(59, 130, 246, 0.3);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen relative">
+    <div id="vanta-bg" class="vanta-bg"></div>
+    
+    <!-- Navigation -->
+    <nav class="bg-gray-900/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <span class="text-2xl font-bold text-primary-500 glow">QT<span class="text-secondary-500">N</span></span>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="#" class="text-primary-500 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
+                            <a href="markets.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Markets</a>
+                            <a href="strategies.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Strategies</a>
+                            <a href="analytics.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Analytics</a>
+                            <a href="signals.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Signals</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center md:ml-6">
+                        <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
+                            <i data-feather="bell"></i>
+                        </button>
+                        <div class="ml-3 relative">
+                            <div>
+                                <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
+                                    <img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/42" alt="">
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <!-- Stats Overview -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-sm font-medium text-gray-400">Portfolio Value</p>
+                        <h3 class="text-2xl font-bold text-white mt-1">$42,850.00</h3>
+                        <p class="text-sm text-green-500 mt-1 flex items-center">
+                            <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> 12.3% this week
+                        </p>
+                    </div>
+                    <div class="bg-primary-500/10 p-3 rounded-lg">
+                        <i data-feather="dollar-sign" class="text-primary-500 w-6 h-6"></i>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-sm font-medium text-gray-400">Active Trades</p>
+                        <h3 class="text-2xl font-bold text-white mt-1">8</h3>
+                        <p class="text-sm text-green-500 mt-1 flex items-center">
+                            <i data-feather="activity" class="w-4 h-4 mr-1"></i> 4 new today
+                        </p>
+                    </div>
+                    <div class="bg-secondary-500/10 p-3 rounded-lg">
+                        <i data-feather="bar-chart-2" class="text-secondary-500 w-6 h-6"></i>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-sm font-medium text-gray-400">Today's P&L</p>
+                        <h3 class="text-2xl font-bold text-white mt-1">$1,245.50</h3>
+                        <p class="text-sm text-green-500 mt-1 flex items-center">
+                            <i data-feather="arrow-up-right" class="w-4 h-4 mr-1"></i> 3.1% today
+                        </p>
+                    </div>
+                    <div class="bg-purple-500/10 p-3 rounded-lg">
+                        <i data-feather="dollar-sign" class="text-purple-500 w-6 h-6"></i>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-sm font-medium text-gray-400">Win Rate</p>
+                        <h3 class="text-2xl font-bold text-white mt-1">78.6%</h3>
+                        <p class="text-sm text-green-500 mt-1 flex items-center">
+                            <i data-feather="check-circle" class="w-4 h-4 mr-1"></i> 2.2% better
+                        </p>
+                    </div>
+                    <div class="bg-yellow-500/10 p-3 rounded-lg">
+                        <i data-feather="target" class="text-yellow-500 w-6 h-6"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Market Overview -->
+        <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 mb-8">
+            <div class="flex items-center justify-between mb-6">
+                <h2 class="text-xl font-bold text-white">Market Overview</h2>
+                <div class="flex space-x-2">
+                    <select class="bg-gray-700 text-white text-sm rounded-lg px-3 py-1 border border-gray-600 focus:outline-none">
+                        <option>All Markets</option>
+                        <option>Forex</option>
+                        <option>Stocks</option>
+                        <option>Crypto</option>
+                    </select>
+                    <select class="bg-gray-700 text-white text-sm rounded-lg px-3 py-1 border border-gray-600 focus:outline-none">
+                        <option>Today</option>
+                        <option>This Week</option>
+                        <option>This Month</option>
+                    </select>
+                </div>
+            </div>
+            
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-700">
+                    <thead>
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Symbol</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Price</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Change</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Volume</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Signal</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-700">
+                        <tr class="hover:bg-gray-700/50">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-10 w-10">
+                                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/1" alt="">
+                                    </div>
+                                    <div class="ml-4">
+                                        <div class="text-sm font-medium text-white">EUR/USD</div>
+                                        <div class="text-sm text-gray-400">Forex</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm text-white">1.0934</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-100">
+                                    +0.42%
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
+                                2.4M
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary-900 text-primary-200">
+                                    <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> Strong Buy
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                <button class="text-primary-500 hover:text-primary-400">Trade</button>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-700/50">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-10 w-10">
+                                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/2" alt="">
+                                    </div>
+                                    <div class="ml-4">
+                                        <div class="text-sm font-medium text-white">BTC/USD</div>
+                                        <div class="text-sm text-gray-400">Crypto</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm text-white">42,850.00</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-100">
+                                    -1.87%
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
+                                18.2K BTC
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-900 text-yellow-200">
+                                    <i data-feather="minus" class="w-3 h-3 mr-1"></i> Hold
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                <button class="text-primary-500 hover:text-primary-400">Trade</button>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-700/50">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-10 w-10">
+                                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/3" alt="">
+                                    </div>
+                                    <div class="ml-4">
+                                        <div class="text-sm font-medium text-white">AAPL</div>
+                                        <div class="text-sm text-gray-400">Stock</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm text-white">185.32</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-100">
+                                    +2.15%
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
+                                12.8M
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary-900 text-primary-200">
+                                    <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> Buy
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                <button class="text-primary-500 hover:text-primary-400">Trade</button>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-700/50">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-10 w-10">
+                                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/4" alt="">
+                                    </div>
+                                    <div class="ml-4">
+                                        <div class="text-sm font-medium text-white">TSLA</div>
+                                        <div class="text-sm text-gray-400">Stock</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm text-white">210.45</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-100">
+                                    -3.22%
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
+                                8.5M
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-200">
+                                    <i data-feather="arrow-down" class="w-3 h-3 mr-1"></i> Sell
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                <button class="text-primary-500 hover:text-primary-400">Trade</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Recent Signals & Performance -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- Recent Signals -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-bold text-white">Recent Signals</h2>
+                    <button class="text-sm text-primary-500 hover:text-primary-400">View All</button>
+                </div>
+                
+                <div class="space-y-4">
+                    <div class="flex items-start p-3 rounded-lg hover:bg-gray-700/30 transition-colors">
+                        <div class="flex-shrink-0 mt-1">
+                            <span class="h-8 w-8 rounded-full bg-green-900/30 flex items-center justify-center">
+                                <i data-feather="arrow-up" class="text-green-500 w-4 h-4"></i>
+                            </span>
+                        </div>
+                        <div class="ml-3 flex-1">
+                            <div class="flex items-center justify-between">
+                                <h3 class="text-sm font-medium text-white">EUR/USD</h3>
+                                <span class="text-xs text-gray-400">2 min ago</span>
+                            </div>
+                            <p class="text-sm text-gray-300 mt-1">Strong buy signal detected with 87% confidence</p>
+                            <div class="mt-2 flex space-x-2">
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-900/30 text-green-400">Trend: Bullish</span>
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-900/30 text-blue-400">AI Model: v4.2</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-start p-3 rounded-lg hover:bg-gray-700/30 transition-colors">
+                        <div class="flex-shrink-0 mt-1">
+                            <span class="h-8 w-8 rounded-full bg-red-900/30 flex items-center justify-center">
+                                <i data-feather="arrow-down" class="text-red-500 w-4 h-4"></i>
+                            </span>
+                        </div>
+                        <div class="ml-3 flex-1">
+                            <div class="flex items-center justify-between">
+                                <h3 class="text-sm font-medium text-white">TSLA</h3>
+                                <span class="text-xs text-gray-400">15 min ago</span>
+                            </div>
+                            <p class="text-sm text-gray-300 mt-1">Sell recommendation with 76% confidence</p>
+                            <div class="mt-2 flex space-x-2">
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-900/30 text-red-400">Trend: Bearish</span>
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-900/30 text-blue-400">AI Model: v4.2</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-start p-3 rounded-lg hover:bg-gray-700/30 transition-colors">
+                        <div class="flex-shrink-0 mt-1">
+                            <span class="h-8 w-8 rounded-full bg-yellow-900/30 flex items-center justify-center">
+                                <i data-feather="minus" class="text-yellow-500 w-4 h-4"></i>
+                            </span>
+                        </div>
+                        <div class="ml-3 flex-1">
+                            <div class="flex items-center justify-between">
+                                <h3 class="text-sm font-medium text-white">BTC/USD</h3>
+                                <span class="text-xs text-gray-400">32 min ago</span>
+                            </div>
+                            <p class="text-sm text-gray-300 mt-1">Hold position - market consolidating</p>
+                            <div class="mt-2 flex space-x-2">
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-900/30 text-yellow-400">Trend: Neutral</span>
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-900/30 text-blue-400">AI Model: v4.2</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Performance -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-bold text-white">Performance Metrics</h2>
+                    <div class="flex space-x-2">
+                        <select class="bg-gray-700 text-white text-sm rounded-lg px-2 py-1 border border-gray-600 focus:outline-none">
+                            <option>This Week</option>
+                            <option>This Month</option>
+                            <option>This Year</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <div class="space-y-4">
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <span class="text-sm font-medium text-gray-300">Win Rate</span>
+                            <span class="text-sm font-medium text-white">78.6%</span>
+                        </div>
+                        <div class="w-full bg-gray-700 rounded-full h-2">
+                            <div class="bg-green-500 h-2 rounded-full" style="width: 78.6%"></div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <span class="text-sm font-medium text-gray-300">Profit Factor</span>
+                            <span class="text-sm font-medium text-white">2.4</span>
+                        </div>
+                        <div class="w-full bg-gray-700 rounded-full h-2">
+                            <div class="bg-blue-500 h-2 rounded-full" style="width: 80%"></div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <span class="text-sm font-medium text-gray-300">Sharpe Ratio</span>
+                            <span class="text-sm font-medium text-white">1.8</span>
+                        </div>
+                        <div class="w-full bg-gray-700 rounded-full h-2">
+                            <div class="bg-purple-500 h-2 rounded-full" style="width: 60%"></div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <span class="text-sm font-medium text-gray-300">Max Drawdown</span>
+                            <span class="text-sm font-medium text-white">-8.2%</span>
+                        </div>
+                        <div class="w-full bg-gray-700 rounded-full h-2">
+                            <div class="bg-yellow-500 h-2 rounded-full" style="width: 16.4%"></div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <div class="flex items-center justify-between mb-1">
+                            <span class="text-sm font-medium text-gray-300">Risk/Reward</span>
+                            <span class="text-sm font-medium text-white">1:2.7</span>
+                        </div>
+                        <div class="w-full bg-gray-700 rounded-full h-2">
+                            <div class="bg-red-500 h-2 rounded-full" style="width: 90%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Initialize Vanta.js background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x111827,
+            points: 10.00,
+            maxDistance: 20.00,
+            spacing: 18.00
+        });
+
+        // Initialize Feather Icons
+        feather.replace();
+        
+        // Smooth scroll for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+    </script>
+</body>
 </html>

markets.html

@@ -0,0 +1,462 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Markets | QuantumTrade Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#3B82F6',
+                        },
+                        secondary: {
+                            500: '#10B981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            overflow-x: hidden;
+        }
+        .vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .glow {
+            text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
+            border-color: rgba(59, 130, 246, 0.3);
+        }
+        .market-chart {
+            height: 300px;
+            background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.8) 100%);
+            border-radius: 0.5rem;
+            position: relative;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen relative">
+    <div id="vanta-bg" class="vanta-bg"></div>
+    
+    <!-- Navigation -->
+    <nav class="bg-gray-900/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <span class="text-2xl font-bold text-primary-500 glow">QT<span class="text-secondary-500">N</span></span>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
+                            <a href="#" class="text-primary-500 px-3 py-2 rounded-md text-sm font-medium">Markets</a>
+                            <a href="strategies.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Strategies</a>
+                            <a href="analytics.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Analytics</a>
+                            <a href="signals.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Signals</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center md:ml-6">
+                        <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
+                            <i data-feather="bell"></i>
+                        </button>
+                        <div class="ml-3 relative">
+                            <div>
+                                <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
+                                    <img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/42" alt="">
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <!-- Market Header -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
+            <div>
+                <h1 class="text-3xl font-bold text-white">Market Overview</h1>
+                <p class="text-gray-400 mt-1">Real-time prices and analytics across all markets</p>
+            </div>
+            <div class="mt-4 md:mt-0 flex space-x-3">
+                <div class="relative">
+                    <input type="text" placeholder="Search markets..." class="bg-gray-700 text-white text-sm rounded-lg pl-10 pr-4 py-2 border border-gray-600 focus:outline-none focus:border-primary-500 w-64">
+                    <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400 w-5 h-5"></i>
+                </div>
+                <select class="bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none">
+                    <option>All Markets</option>
+                    <option>Forex</option>
+                    <option>Stocks</option>
+                    <option>Crypto</option>
+                    <option>Commodities</option>
+                </select>
+            </div>
+        </div>
+        
+        <!-- Market Tabs -->
+        <div class="border-b border-gray-700 mb-6">
+            <nav class="-mb-px flex space-x-8">
+                <a href="#" class="border-primary-500 text-primary-500 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">All Markets</a>
+                <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Forex</a>
+                <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Stocks</a>
+                <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Crypto</a>
+                <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Indices</a>
+                <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Commodities</a>
+            </nav>
+        </div>
+
+        <!-- Market Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Forex -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center">
+                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/1" alt="">
+                        <div class="ml-3">
+                            <h3 class="text-lg font-bold text-white">EUR/USD</h3>
+                            <p class="text-sm text-gray-400">Euro / US Dollar</p>
+                        </div>
+                    </div>
+                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/30 text-green-400">Forex</span>
+                </div>
+                
+                <div class="market-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Price</p>
+                        <p class="text-xl font-bold text-white">1.0934</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">24h Change</p>
+                        <p class="text-xl font-bold text-green-500 flex items-center">
+                            <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> +0.42%
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Volume</p>
+                        <p class="text-sm font-medium text-white">2.4M</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Signal</p>
+                        <p class="text-sm font-medium text-primary-500">Strong Buy</p>
+                    </div>
+                </div>
+                
+                <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button>
+                    <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button>
+                </div>
+            </div>
+            
+            <!-- Crypto -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center">
+                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/2" alt="">
+                        <div class="ml-3">
+                            <h3 class="text-lg font-bold text-white">BTC/USD</h3>
+                            <p class="text-sm text-gray-400">Bitcoin / US Dollar</p>
+                        </div>
+                    </div>
+                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-purple-900/30 text-purple-400">Crypto</span>
+                </div>
+                
+                <div class="market-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Price</p>
+                        <p class="text-xl font-bold text-white">42,850.00</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">24h Change</p>
+                        <p class="text-xl font-bold text-red-500 flex items-center">
+                            <i data-feather="arrow-down" class="w-4 h-4 mr-1"></i> -1.87%
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Volume</p>
+                        <p class="text-sm font-medium text-white">18.2K BTC</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Signal</p>
+                        <p class="text-sm font-medium text-yellow-500">Hold</p>
+                    </div>
+                </div>
+                
+                <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button>
+                    <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button>
+                </div>
+            </div>
+            
+            <!-- Stock -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center">
+                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/3" alt="">
+                        <div class="ml-3">
+                            <h3 class="text-lg font-bold text-white">AAPL</h3>
+                            <p class="text-sm text-gray-400">Apple Inc.</p>
+                        </div>
+                    </div>
+                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-900/30 text-blue-400">Stock</span>
+                </div>
+                
+                <div class="market-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Price</p>
+                        <p class="text-xl font-bold text-white">185.32</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">24h Change</p>
+                        <p class="text-xl font-bold text-green-500 flex items-center">
+                            <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> +2.15%
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Volume</p>
+                        <p class="text-sm font-medium text-white">12.8M</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Signal</p>
+                        <p class="text-sm font-medium text-primary-500">Buy</p>
+                    </div>
+                </div>
+                
+                <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button>
+                    <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button>
+                </div>
+            </div>
+            
+            <!-- Stock 2 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center">
+                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/4" alt="">
+                        <div class="ml-3">
+                            <h3 class="text-lg font-bold text-white">TSLA</h3>
+                            <p class="text-sm text-gray-400">Tesla Inc.</p>
+                        </div>
+                    </div>
+                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-900/30 text-blue-400">Stock</span>
+                </div>
+                
+                <div class="market-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Price</p>
+                        <p class="text-xl font-bold text-white">210.45</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">24h Change</p>
+                        <p class="text-xl font-bold text-red-500 flex items-center">
+                            <i data-feather="arrow-down" class="w-4 h-4 mr-1"></i> -3.22%
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Volume</p>
+                        <p class="text-sm font-medium text-white">8.5M</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Signal</p>
+                        <p class="text-sm font-medium text-red-500">Sell</p>
+                    </div>
+                </div>
+                
+                <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button>
+                    <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button>
+                </div>
+            </div>
+            
+            <!-- Forex 2 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center">
+                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/5" alt="">
+                        <div class="ml-3">
+                            <h3 class="text-lg font-bold text-white">GBP/USD</h3>
+                            <p class="text-sm text-gray-400">British Pound / US Dollar</p>
+                        </div>
+                    </div>
+                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-900/30 text-green-400">Forex</span>
+                </div>
+                
+                <div class="market-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Price</p>
+                        <p class="text-xl font-bold text-white">1.2745</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">24h Change</p>
+                        <p class="text-xl font-bold text-green-500 flex items-center">
+                            <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> +0.18%
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Volume</p>
+                        <p class="text-sm font-medium text-white">1.8M</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Signal</p>
+                        <p class="text-sm font-medium text-primary-500">Buy</p>
+                    </div>
+                </div>
+                
+                <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button>
+                    <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button>
+                </div>
+            </div>
+            
+            <!-- Crypto 2 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center">
+                        <img class="h-10 w-10 rounded-full" src="http://static.photos/finance/200x200/6" alt="">
+                        <div class="ml-3">
+                            <h3 class="text-lg font-bold text-white">ETH/USD</h3>
+                            <p class="text-sm text-gray-400">Ethereum / US Dollar</p>
+                        </div>
+                    </div>
+                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-purple-900/30 text-purple-400">Crypto</span>
+                </div>
+                
+                <div class="market-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Price</p>
+                        <p class="text-xl font-bold text-white">2,305.42</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">24h Change</p>
+                        <p class="text-xl font-bold text-red-500 flex items-center">
+                            <i data-feather="arrow-down" class="w-4 h-4 mr-1"></i> -0.92%
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Volume</p>
+                        <p class="text-sm font-medium text-white">245K ETH</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Signal</p>
+                        <p class="text-sm font-medium text-yellow-500">Hold</p>
+                    </div>
+                </div>
+                
+                <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">Trade</button>
+                    <button class="text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Analyze</button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Pagination -->
+        <div class="flex items-center justify-between mt-8">
+            <div class="text-sm text-gray-400">
+                Showing <span class="font-medium text-white">1</span> to <span class="font-medium text-white">6</span> of <span class="font-medium text-white">24</span> markets
+            </div>
+            <div class="flex space-x-2">
+                <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">Previous</button>
+                <button class="px-3 py-1 rounded-md bg-primary-500 text-white text-sm font-medium">1</button>
+                <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">2</button>
+                <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">3</button>
+                <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">Next</button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Initialize Vanta.js background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x111827,
+            points: 10.00,
+            maxDistance: 20.00,
+            spacing: 18.00
+        });
+
+        // Initialize Feather Icons
+        feather.replace();
+    </script>
+</body>
+</html>

strategies.html

@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Strategies | QuantumTrade Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#3B82F6',
+                        },
+                        secondary: {
+                            500: '#10B981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            overflow-x: hidden;
+        }
+        .vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .glow {
+            text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
+            border-color: rgba(59, 130, 246, 0.3);
+        }
+        .strategy-perf-chart {
+            height: 80px;
+            background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.8) 100%);
+            border-radius: 0.5rem;
+            position: relative;
+        }
+        .tag {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen relative">
+    <div id="vanta-bg" class="vanta-bg"></div>
+    
+    <!-- Navigation -->
+    <nav class="bg-gray-900/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <span class="text-2xl font-bold text-primary-500 glow">QT<span class="text-secondary-500">N</span></span>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
+                            <a href="markets.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Markets</a>
+                            <a href="#" class="text-primary-500 px-3 py-2 rounded-md text-sm font-medium">Strategies</a>
+                            <a href="analytics.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Analytics</a>
+                            <a href="signals.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Signals</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center md:ml-6">
+                        <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
+                            <i data-feather="bell"></i>
+                        </button>
+                        <div class="ml-3 relative">
+                            <div>
+                                <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
+                                    <img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/42" alt="">
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <!-- Strategy Header -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
+            <div>
+                <h1 class="text-3xl font-bold text-white">Trading Strategies</h1>
+                <p class="text-gray-400 mt-1">AI-powered trading strategies with real-time performance metrics</p>
+            </div>
+            <div class="mt-4 md:mt-0">
+                <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center">
+                    <i data-feather="plus" class="w-4 h-4 mr-2"></i> New Strategy
+                </button>
+            </div>
+        </div>
+        
+        <!-- Strategy Tabs -->
+        <div class="border-b border-gray-700 mb-6">
+            <nav class="-mb-px flex space-x-8">
+                <a href="#" class="border-primary-500 text-primary-500 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">All Strategies</a>
+                <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Active</a>
+                <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Backtesting</a>
+                <a href="#" class="border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Archived</a>
+            </nav>
+        </div>
+
+        <!-- Strategy Filters -->
+        <div class="bg-gray-800/50 rounded-xl p-4 border border-gray-700 mb-6">
+            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-1">Strategy Type</label>
+                    <select class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none">
+                        <option>All Types</option>
+                        <option>Trend Following</option>
+                        <option>Mean Reversion</option>
+                        <option>Breakout</option>
+                        <option>ML-Based</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-1">Timeframe</label>
+                    <select class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none">
+                        <option>All Timeframes</option>
+                        <option>1 Minute</option>
+                        <option>5 Minutes</option>
+                        <option>15 Minutes</option>
+                        <option>1 Hour</option>
+                        <option>4 Hours</option>
+                        <option>Daily</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-1">Market</label>
+                    <select class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none">
+                        <option>All Markets</option>
+                        <option>Forex</option>
+                        <option>Stocks</option>
+                        <option>Crypto</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-1">Sort By</label>
+                    <select class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-2 border border-gray-600 focus:outline-none">
+                        <option>Recently Active</option>
+                        <option>Highest Win Rate</option>
+                        <option>Most Profitable</option>
+                        <option>Newest First</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <!-- Strategy Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- Strategy Card 1 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-start justify-between mb-4">
+                    <div>
+                        <h3 class="text-xl font-bold text-white">QuantumTrend AI v4.2</h3>
+                        <div class="flex items-center mt-1 space-x-2">
+                            <span class="tag bg-green-900/30 text-green-400">
+                                <i data-feather="activity" class="w-3 h-3 mr-1"></i> Active
+                            </span>
+                            <span class="tag bg-blue-900/30 text-blue-400">
+                                <i data-feather="cpu" class="w-3 h-3 mr-1"></i> ML-Based
+                            </span>
+                            <span class="tag bg-purple-900/30 text-purple-400">
+                                <i data-feather="clock" class="w-3 h-3 mr-1"></i> 1H
+                            </span>
+                        </div>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="edit" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="more-vertical" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <p class="text-gray-400 mb-4">Advanced trend-following strategy using ensemble ML models to identify high-probability entries with dynamic risk management.</p>
+                
+                <div class="strategy-perf-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Performance chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-3 gap-4 text-center mb-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Win Rate</p>
+                        <p class="text-lg font-bold text-white">78.6%</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Profit Factor</p>
+                        <p class="text-lg font-bold text-white">2.4</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Trades</p>
+                        <p class="text-lg font-bold text-white">42</p>
+                    </div>
+                </div>
+                
+                <div class="flex justify-between items-center pt-4 border-t border-gray-700">
+                    <div>
+                        <p class="text-sm text-gray-400">Last Signal</p>
+                        <p class="text-sm font-medium text-white">EUR/USD - Buy @ 1.0934</p>
+                    </div>
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">
+                        View Details
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Strategy Card 2 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-start justify-between mb-4">
+                    <div>
+                        <h3 class="text-xl font-bold text-white">MeanReversion Pro</h3>
+                        <div class="flex items-center mt-1 space-x-2">
+                            <span class="tag bg-green-900/30 text-green-400">
+                                <i data-feather="activity" class="w-3 h-3 mr-1"></i> Active
+                            </span>
+                            <span class="tag bg-yellow-900/30 text-yellow-400">
+                                <i data-feather="repeat" class="w-3 h-3 mr-1"></i> Reversion
+                            </span>
+                            <span class="tag bg-purple-900/30 text-purple-400">
+                                <i data-feather="clock" class="w-3 h-3 mr-1"></i> 15M
+                            </span>
+                        </div>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="edit" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="more-vertical" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <p class="text-gray-400 mb-4">Statistical mean reversion strategy that identifies overextended price movements using Bollinger Bands and RSI thresholds.</p>
+                
+                <div class="strategy-perf-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Performance chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-3 gap-4 text-center mb-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Win Rate</p>
+                        <p class="text-lg font-bold text-white">65.2%</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Profit Factor</p>
+                        <p class="text-lg font-bold text-white">1.8</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Trades</p>
+                        <p class="text-lg font-bold text-white">23</p>
+                    </div>
+                </div>
+                
+                <div class="flex justify-between items-center pt-4 border-t border-gray-700">
+                    <div>
+                        <p class="text-sm text-gray-400">Last Signal</p>
+                        <p class="text-sm font-medium text-white">BTC/USD - Hold</p>
+                    </div>
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">
+                        View Details
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Strategy Card 3 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-start justify-between mb-4">
+                    <div>
+                        <h3 class="text-xl font-bold text-white">Breakout Sentinel</h3>
+                        <div class="flex items-center mt-1 space-x-2">
+                            <span class="tag bg-blue-900/30 text-blue-400">
+                                <i data-feather="pause" class="w-3 h-3 mr-1"></i> Paused
+                            </span>
+                            <span class="tag bg-red-900/30 text-red-400">
+                                <i data-feather="zap" class="w-3 h-3 mr-1"></i> Breakout
+                            </span>
+                            <span class="tag bg-purple-900/30 text-purple-400">
+                                <i data-feather="clock" class="w-3 h-3 mr-1"></i> 4H
+                            </span>
+                        </div>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="edit" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="more-vertical" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <p class="text-gray-400 mb-4">Identifies and trades key support/resistance breakouts with volume confirmation and Fibonacci extensions for targets.</p>
+                
+                <div class="strategy-perf-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Performance chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-3 gap-4 text-center mb-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Win Rate</p>
+                        <p class="text-lg font-bold text-white">71.4%</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Profit Factor</p>
+                        <p class="text-lg font-bold text-white">2.1</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Trades</p>
+                        <p class="text-lg font-bold text-white">14</p>
+                    </div>
+                </div>
+                
+                <div class="flex justify-between items-center pt-4 border-t border-gray-700">
+                    <div>
+                        <p class="text-sm text-gray-400">Last Signal</p>
+                        <p class="text-sm font-medium text-white">AAPL - Sell @ 185.32</p>
+                    </div>
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">
+                        View Details
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Strategy Card 4 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-start justify-between mb-4">
+                    <div>
+                        <h3 class="text-xl font-bold text-white">Volatility Edge</h3>
+                        <div class="flex items-center mt-1 space-x-2">
+                            <span class="tag bg-green-900/30 text-green-400">
+                                <i data-feather="activity" class="w-3 h-3 mr-1"></i> Active
+                            </span>
+                            <span class="tag bg-blue-900/30 text-blue-400">
+                                <i data-feather="cpu" class="w-3 h-3 mr-1"></i> ML-Based
+                            </span>
+                            <span class="tag bg-purple-900/30 text-purple-400">
+                                <i data-feather="clock" class="w-3 h-3 mr-1"></i> 1D
+                            </span>
+                        </div>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="edit" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="more-vertical" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <p class="text-gray-400 mb-4">Machine learning model that predicts volatility expansion opportunities and trades them with dynamic position sizing.</p>
+                
+                <div class="strategy-perf-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Performance chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-3 gap-4 text-center mb-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Win Rate</p>
+                        <p class="text-lg font-bold text-white">82.4%</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Profit Factor</p>
+                        <p class="text-lg font-bold text-white">2.9</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Trades</p>
+                        <p class="text-lg font-bold text-white">17</p>
+                    </div>
+                </div>
+                
+                <div class="flex justify-between items-center pt-4 border-t border-gray-700">
+                    <div>
+                        <p class="text-sm text-gray-400">Last Signal</p>
+                        <p class="text-sm font-medium text-white">TSLA - Sell @ 210.45</p>
+                    </div>
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">
+                        View Details
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Strategy Card 5 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-start justify-between mb-4">
+                    <div>
+                        <h3 class="text-xl font-bold text-white">News Sentiment AI</h3>
+                        <div class="flex items-center mt-1 space-x-2">
+                            <span class="tag bg-yellow-900/30 text-yellow-400">
+                                <i data-feather="tool" class="w-3 h-3 mr-1"></i> Testing
+                            </span>
+                            <span class="tag bg-blue-900/30 text-blue-400">
+                                <i data-feather="cpu" class="w-3 h-3 mr-1"></i> ML-Based
+                            </span>
+                            <span class="tag bg-purple-900/30 text-purple-400">
+                                <i data-feather="clock" class="w-3 h-3 mr-1"></i> 1D
+                            </span>
+                        </div>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="edit" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="more-vertical" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <p class="text-gray-400 mb-4">Natural language processing model that analyzes news sentiment and social media to predict short-term price movements.</p>
+                
+                <div class="strategy-perf-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Performance chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-3 gap-4 text-center mb-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Win Rate</p>
+                        <p class="text-lg font-bold text-white">68.9%</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Profit Factor</p>
+                        <p class="text-lg font-bold text-white">1.7</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Trades</p>
+                        <p class="text-lg font-bold text-white">9</p>
+                    </div>
+                </div>
+                
+                <div class="flex justify-between items-center pt-4 border-t border-gray-700">
+                    <div>
+                        <p class="text-sm text-gray-400">Last Signal</p>
+                        <p class="text-sm font-medium text-white">GBP/USD - Buy @ 1.2745</p>
+                    </div>
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">
+                        View Details
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Strategy Card 6 -->
+            <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover">
+                <div class="flex items-start justify-between mb-4">
+                    <div>
+                        <h3 class="text-xl font-bold text-white">Pair Trader</h3>
+                        <div class="flex items-center mt-1 space-x-2">
+                            <span class="tag bg-gray-900/30 text-gray-400">
+                                <i data-feather="archive" class="w-3 h-3 mr-1"></i> Archived
+                            </span>
+                            <span class="tag bg-yellow-900/30 text-yellow-400">
+                                <i data-feather="repeat" class="w-3 h-3 mr-1"></i> Reversion
+                            </span>
+                            <span class="tag bg-purple-900/30 text-purple-400">
+                                <i data-feather="clock" class="w-3 h-3 mr-1"></i> 1H
+                            </span>
+                        </div>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="edit" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-gray-300">
+                            <i data-feather="more-vertical" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <p class="text-gray-400 mb-4">Statistical arbitrage strategy that identifies correlated pairs and trades deviations from their historical relationship.</p>
+                
+                <div class="strategy-perf-chart mb-4">
+                    <!-- Placeholder for chart -->
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <p class="text-gray-500 text-sm">Performance chart loading...</p>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-3 gap-4 text-center mb-4">
+                    <div>
+                        <p class="text-sm text-gray-400">Win Rate</p>
+                        <p class="text-lg font-bold text-white">62.3%</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Profit Factor</p>
+                        <p class="text-lg font-bold text-white">1.5</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Trades</p>
+                        <p class="text-lg font-bold text-white">53</p>
+                    </div>
+                </div>
+                
+                <div class="flex justify-between items-center pt-4 border-t border-gray-700">
+                    <div>
+                        <p class="text-sm text-gray-400">Last Signal</p>
+                        <p class="text-sm font-medium text-white">ETH/USD - Hold</p>
+                    </div>
+                    <button class="text-sm bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">
+                        View Details
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Pagination -->
+        <div class="flex items-center justify-between mt-8">
+            <div class="text-sm text-gray-400">
+                Showing <span class="font-medium text-white">1</span> to <span class="font-medium text-white">6</span> of <span class="font-medium text-white">12</span> strategies
+            </div>
+            <div class="flex space-x-2">
+                <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">Previous</button>
+                <button class="px-3 py-1 rounded-md bg-primary-500 text-white text-sm font-medium">1</button>
+                <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">2</button>
+                <button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 text-sm font-medium">Next</button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Initialize Vanta.js background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x111827,
+            points: 10.00,
+            maxDistance: 20.00,
+            spacing: 18.00
+        });
+
+        // Initialize Feather Icons
+        feather.replace();
+    </script>
+</body>
+</html>