Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agents | NEXUS OVERDRIVE</title> | |
| <meta name="description" content="Meet our fleet of autonomous AI agents"> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-void text-white font-sans overflow-x-hidden antialiased selection:bg-neonPurple selection:text-white"> | |
| <custom-navbar></custom-navbar> | |
| <!-- PAGE HEADER --> | |
| <header class="relative min-h-[50vh] flex items-center justify-center pt-20 overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <img src="http://static.photos/technology/1200x630/89" alt="Technology" class="w-full h-full object-cover opacity-10 grayscale"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-void/80 via-transparent to-void"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10 text-center"> | |
| <span class="text-neonPurple font-mono text-sm tracking-[0.3em] uppercase">Autonomous Fleet</span> | |
| <h1 class="text-5xl md:text-7xl font-black tracking-tighter mt-4 mb-6"> | |
| OUR <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonPurple to-neonCyan">AGENTS</span> | |
| </h1> | |
| <p class="text-gray-400 text-xl max-w-2xl mx-auto">Deploy intelligence at scale. Never sleep. Never hesitate.</p> | |
| </div> | |
| </header> | |
| <!-- FILTER BAR --> | |
| <section class="sticky top-20 z-40 bg-void/95 backdrop-blur-lg border-b border-gray-900 py-4"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-wrap gap-3 justify-center" id="agent-filters"> | |
| <button class="filter-btn active px-6 py-2 border border-neonPurple bg-neonPurple/20 text-white font-mono text-sm uppercase tracking-wider" data-filter="all">All Systems</button> | |
| <button class="filter-btn px-6 py-2 border border-gray-800 hover:border-neonCyan text-gray-400 hover:text-white font-mono text-sm uppercase tracking-wider transition-all" data-filter="trading">Trading</button> | |
| <button class="filter-btn px-6 py-2 border border-gray-800 hover:border-neonCyan text-gray-400 hover:text-white font-mono text-sm uppercase tracking-wider transition-all" data-filter="security">Security</button> | |
| <button class="filter-btn px-6 py-2 border border-gray-800 hover:border-neonCyan text-gray-400 hover:text-white font-mono text-sm uppercase tracking-wider transition-all" data-filter="analysis">Analysis</button> | |
| <button class="filter-btn px-6 py-2 border border-gray-800 hover:border-neonCyan text-gray-400 hover:text-white font-mono text-sm uppercase tracking-wider transition-all" data-filter="content">Content</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AGENTS GRID --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="agent-grid"> | |
| <!-- Trading Agents --> | |
| <custom-agent-card | |
| title="The Strategist" | |
| role="Market Dominance" | |
| status="ACTIVE" | |
| icon="target" | |
| color="purple" | |
| category="trading"> | |
| </custom-agent-card> | |
| <custom-agent-card | |
| title="Liquidator X" | |
| role="Asset Acquisition" | |
| status="HUNTING" | |
| icon="zap" | |
| color="cyan" | |
| category="trading"> | |
| </custom-agent-card> | |
| <custom-agent-card | |
| title="Broker Prime" | |
| role="High-Frequency Trade" | |
| status="EXECUTING" | |
| icon="trending-up" | |
| color="yellow" | |
| category="trading"> | |
| </custom-agent-card> | |
| <custom-agent-card | |
| title="Arbitrage Bot" | |
| role="Cross-Exchange" | |
| status="SCANNING" | |
| icon="shuffle" | |
| color="green" | |
| category="trading"> | |
| </custom-agent-card> | |
| <!-- Security Agents --> | |
| <custom-agent-card | |
| title="Sentinel" | |
| role="Security & Audit" | |
| status="SECURE" | |
| icon="shield" | |
| color="green" | |
| category="security"> | |
| </custom-agent-card> | |
| <custom-agent-card | |
| title="Zero Trust" | |
| role="Threat Detection" | |
| status="MONITORING" | |
| icon="eye" | |
| color="red" | |
| category="security"> | |
| </custom-agent-card> | |
| <!-- Analysis Agents --> | |
| <custom-agent-card | |
| title="Neural Net" | |
| role="Predictive Analysis" | |
| status="PROCESSING" | |
| icon="cpu" | |
| color="red" | |
| category="analysis"> | |
| </custom-agent-card> | |
| <custom-agent-card | |
| title="Data Miner" | |
| role="Market Intelligence" | |
| status="EXTRACTING" | |
| icon="database" | |
| color="purple" | |
| category="analysis"> | |
| </custom-agent-card> | |
| <custom-agent-card | |
| title="Pattern Rec" | |
| role="Trend Analysis" | |
| status="ANALYZING" | |
| icon="activity" | |
| color="cyan" | |
| category="analysis"> | |
| </custom-agent-card> | |
| <!-- Content Agents --> | |
| <custom-agent-card | |
| title="Ghost Writer" | |
| role="Content & Influence" | |
| status="DRAFTING" | |
| icon="pen-tool" | |
| color="gray" | |
| category="content"> | |
| </custom-agent-card> | |
| <custom-agent-card | |
| title="Visual Engine" | |
| role="Asset Generation" | |
| status="RENDERING" | |
| icon="image" | |
| color="purple" | |
| category="content"> | |
| </custom-agent-card> | |
| <custom-agent-card | |
| title="Voice Synth" | |
| role="Audio Production" | |
| status="READY" | |
| icon="mic" | |
| color="cyan" | |
| category="content"> | |
| </custom-agent-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- DEPLOYMENT CTA --> | |
| <section class="py-24 bg-gradient-to-r from-neonPurple/10 to-neonCyan/10 border-y border-gray-900"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-black mb-6">READY TO DEPLOY?</h2> | |
| <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto"> | |
| Your custom AI fleet is waiting. Configure your agents and launch in minutes. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="pricing.html" class="px-8 py-4 bg-neonPurple text-white font-bold text-lg hover:bg-neonPurple/80 transition-colors"> | |
| VIEW PRICING | |
| </a> | |
| <a href="contact.html" class="px-8 py-4 border border-white/30 hover:border-white text-white font-bold text-lg transition-colors"> | |
| CONTACT SALES | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/agent-card.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Agent Filtering | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const filterBtns = document.querySelectorAll('.filter-btn'); | |
| const agentCards = document.querySelectorAll('custom-agent-card'); | |
| filterBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Update active state | |
| filterBtns.forEach(b => { | |
| b.classList.remove('active', 'bg-neonPurple/20', 'border-neonPurple', 'text-white'); | |
| b.classList.add('border-gray-800', 'text-gray-400'); | |
| }); | |
| btn.classList.add('active', 'bg-neonPurple/20', 'border-neonPurple', 'text-white'); | |
| btn.classList.remove('border-gray-800', 'text-gray-400'); | |
| // Filter cards | |
| const filter = btn.dataset.filter; | |
| agentCards.forEach(card => { | |
| if (filter === 'all' || card.dataset.category === filter) { | |
| card.style.display = 'block'; | |
| card.style.animation = 'fadeIn 0.3s ease'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |