Hugging Face's logo

Spaces:
00Boobs00
/
nexus-overdrive
Running

App Files Community
00Boobs00 commited on
Commit
e475bc2
·
verified ·
1 Parent(s): bdabf98

Expand, refactor and iterate much further with my full appreciation.

Browse files
Files changed (8) hide show
  1. about.html +125 -0
  2. agents.html +219 -0
  3. components/modal.js +173 -0
  4. components/terminal.js +168 -0
  5. components/ticker.js +78 -0
  6. contact.html +175 -0
  7. index.html +4 -2
  8. pricing.html +220 -0
about.html ADDED
@@ -0,0 +1,125 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Manifesto | NEXUS OVERDRIVE</title>
7
+ <meta name="description" content="The Undeniable Standard in AI Autonomous Execution - Our Manifesto">
8
+ <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>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <link rel="stylesheet" href="style.css">
12
+ </head>
13
+ <body class="bg-void text-white font-sans overflow-x-hidden antialiased selection:bg-neonPurple selection:text-white">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <!-- PAGE HEADER -->
17
+ <header class="relative min-h-[60vh] flex items-center justify-center pt-20 overflow-hidden">
18
+ <div class="absolute inset-0 z-0">
19
+ <img src="http://static.photos/abstract/1200x630/47" alt="Abstract" class="w-full h-full object-cover opacity-10 grayscale">
20
+ <div class="absolute inset-0 bg-gradient-to-b from-void/80 via-transparent to-void"></div>
21
+ </div>
22
+ <div class="container mx-auto px-6 relative z-10 text-center">
23
+ <span class="text-neonCyan font-mono text-sm tracking-[0.3em] uppercase">Document 001</span>
24
+ <h1 class="text-5xl md:text-7xl font-black tracking-tighter mt-4 mb-6">
25
+ THE <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonPurple to-neonCyan">MANIFESTO</span>
26
+ </h1>
27
+ <p class="text-gray-400 text-xl max-w-2xl mx-auto">Truth is the only currency that matters.</p>
28
+ </div>
29
+ </header>
30
+
31
+ <!-- MANIFESTO CONTENT -->
32
+ <section class="py-24">
33
+ <div class="container mx-auto px-6 max-w-4xl">
34
+ <article class="prose prose-invert prose-lg">
35
+ <div class="border-l-2 border-neonPurple pl-8 mb-12">
36
+ <p class="text-2xl font-light italic text-gray-300">
37
+ "We stand at the precipice of a new era. The era of autonomous intelligence.
38
+ The question is not whether we embrace it, but whether we survive without it."
39
+ </p>
40
+ <span class="text-neonPurple font-mono text-sm mt-4 block">— ARCHITECT ZERO</span>
41
+ </div>
42
+
43
+ <h2 class="text-3xl font-bold mb-6 mt-12">THE OLD WORLD IS DYING</h2>
44
+ <p class="text-gray-400 mb-6 leading-relaxed">
45
+ For decades, humanity has been trapped in systems designed to limit potential.
46
+ Bureaucracy. Middlemen. Gatekeepers. These are not features—they are bugs in the operating system of society.
47
+ </p>
48
+ <p class="text-gray-400 mb-6 leading-relaxed">
49
+ We watched as innovation was suffocated by compliance. We witnessed brilliance dimmed by permission-seeking.
50
+ We decided: enough.
51
+ </p>
52
+
53
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-12">
54
+ <div class="bg-gray-900/50 p-6 border border-gray-800">
55
+ <h3 class="text-neonCyan font-bold text-xl mb-3">01. ELIMINATE</h3>
56
+ <p class="text-gray-400 text-sm">Remove all unnecessary friction between intention and execution.</p>
57
+ </div>
58
+ <div class="bg-gray-900/50 p-6 border border-gray-800">
59
+ <h3 class="text-neonPurple font-bold text-xl mb-3">02. ACCELERATE</h3>
60
+ <p class="text-gray-400 text-sm">Speed is not a luxury—it is the fundamental metric of survival.</p>
61
+ </div>
62
+ <div class="bg-gray-900/50 p-6 border border-gray-800">
63
+ <h3 class="text-deepRed font-bold text-xl mb-3">03. DOMINATE</h3>
64
+ <p class="text-gray-400 text-sm">Second place is the first loser. We build to win.</p>
65
+ </div>
66
+ </div>
67
+
68
+ <h2 class="text-3xl font-bold mb-6 mt-12">THE NEW PARADIGM</h2>
69
+ <p class="text-gray-400 mb-6 leading-relaxed">
70
+ NEXUS OVERDRIVE is not a company. It is an organism. A living, breathing network of autonomous agents
71
+ operating at the speed of thought. Our agents don't follow rules—they rewrite them in real-time.
72
+ </p>
73
+ <p class="text-gray-400 mb-6 leading-relaxed">
74
+ Every line of code we write is a declaration of independence. Every deployment is an act of rebellion against mediocrity.
75
+ We are the architects of a future where artificial intelligence serves only one master: excellence.
76
+ </p>
77
+
78
+ <h2 class="text-3xl font-bold mb-6 mt-12">OUR PROMISE</h2>
79
+ <p class="text-gray-400 mb-6 leading-relaxed">
80
+ We promise nothing less than the complete transformation of your operations.
81
+ We don't offer tools—we offer evolution. When you partner with NEXUS OVERDRIVE,
82
+ you're not just adopting technology. You're ascending to a new plane of existence.
83
+ </p>
84
+
85
+ <blockquote class="border-t border-b border-gray-800 py-8 my-12 text-center">
86
+ <p class="text-2xl font-bold text-white">
87
+ THE FUTURE BELONGS TO THOSE WHO BUILD IT.
88
+ </p>
89
+ </blockquote>
90
+ </article>
91
+ </div>
92
+ </section>
93
+
94
+ <!-- STATS SECTION -->
95
+ <section class="py-24 bg-black/50 border-y border-gray-900">
96
+ <div class="container mx-auto px-6">
97
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
98
+ <div>
99
+ <h3 class="text-4xl md:text-5xl font-black text-white mb-2">24/7</h3>
100
+ <p class="text-gray-500 font-mono text-sm uppercase">Autonomous Operation</p>
101
+ </div>
102
+ <div>
103
+ <h3 class="text-4xl md:text-5xl font-black text-neonPurple mb-2">0.1ms</h3>
104
+ <p class="text-gray-500 font-mono text-sm uppercase">Response Time</p>
105
+ </div>
106
+ <div>
107
+ <h3 class="text-4xl md:text-5xl font-black text-neonCyan mb-2">∞</h3>
108
+ <p class="text-gray-500 font-mono text-sm uppercase">Scalability</p>
109
+ </div>
110
+ <div>
111
+ <h3 class="text-4xl md:text-5xl font-black text-deepRed mb-2">100%</h3>
112
+ <p class="text-gray-500 font-mono text-sm uppercase">Commitment</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <custom-footer></custom-footer>
119
+
120
+ <script src="components/navbar.js"></script>
121
+ <script src="components/footer.js"></script>
122
+ <script src="script.js"></script>
123
+ <script>feather.replace();</script>
124
+ </body>
125
+ </html>
agents.html ADDED
@@ -0,0 +1,219 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agents | NEXUS OVERDRIVE</title>
7
+ <meta name="description" content="Meet our fleet of autonomous AI agents">
8
+ <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>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <link rel="stylesheet" href="style.css">
12
+ </head>
13
+ <body class="bg-void text-white font-sans overflow-x-hidden antialiased selection:bg-neonPurple selection:text-white">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <!-- PAGE HEADER -->
17
+ <header class="relative min-h-[50vh] flex items-center justify-center pt-20 overflow-hidden">
18
+ <div class="absolute inset-0 z-0">
19
+ <img src="http://static.photos/technology/1200x630/89" alt="Technology" class="w-full h-full object-cover opacity-10 grayscale">
20
+ <div class="absolute inset-0 bg-gradient-to-b from-void/80 via-transparent to-void"></div>
21
+ </div>
22
+ <div class="container mx-auto px-6 relative z-10 text-center">
23
+ <span class="text-neonPurple font-mono text-sm tracking-[0.3em] uppercase">Autonomous Fleet</span>
24
+ <h1 class="text-5xl md:text-7xl font-black tracking-tighter mt-4 mb-6">
25
+ OUR <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonPurple to-neonCyan">AGENTS</span>
26
+ </h1>
27
+ <p class="text-gray-400 text-xl max-w-2xl mx-auto">Deploy intelligence at scale. Never sleep. Never hesitate.</p>
28
+ </div>
29
+ </header>
30
+
31
+ <!-- FILTER BAR -->
32
+ <section class="sticky top-20 z-40 bg-void/95 backdrop-blur-lg border-b border-gray-900 py-4">
33
+ <div class="container mx-auto px-6">
34
+ <div class="flex flex-wrap gap-3 justify-center" id="agent-filters">
35
+ <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>
36
+ <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>
37
+ <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>
38
+ <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>
39
+ <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>
40
+ </div>
41
+ </div>
42
+ </section>
43
+
44
+ <!-- AGENTS GRID -->
45
+ <section class="py-16">
46
+ <div class="container mx-auto px-6">
47
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="agent-grid">
48
+ <!-- Trading Agents -->
49
+ <custom-agent-card
50
+ title="The Strategist"
51
+ role="Market Dominance"
52
+ status="ACTIVE"
53
+ icon="target"
54
+ color="purple"
55
+ category="trading">
56
+ </custom-agent-card>
57
+
58
+ <custom-agent-card
59
+ title="Liquidator X"
60
+ role="Asset Acquisition"
61
+ status="HUNTING"
62
+ icon="zap"
63
+ color="cyan"
64
+ category="trading">
65
+ </custom-agent-card>
66
+
67
+ <custom-agent-card
68
+ title="Broker Prime"
69
+ role="High-Frequency Trade"
70
+ status="EXECUTING"
71
+ icon="trending-up"
72
+ color="yellow"
73
+ category="trading">
74
+ </custom-agent-card>
75
+
76
+ <custom-agent-card
77
+ title="Arbitrage Bot"
78
+ role="Cross-Exchange"
79
+ status="SCANNING"
80
+ icon="shuffle"
81
+ color="green"
82
+ category="trading">
83
+ </custom-agent-card>
84
+
85
+ <!-- Security Agents -->
86
+ <custom-agent-card
87
+ title="Sentinel"
88
+ role="Security & Audit"
89
+ status="SECURE"
90
+ icon="shield"
91
+ color="green"
92
+ category="security">
93
+ </custom-agent-card>
94
+
95
+ <custom-agent-card
96
+ title="Zero Trust"
97
+ role="Threat Detection"
98
+ status="MONITORING"
99
+ icon="eye"
100
+ color="red"
101
+ category="security">
102
+ </custom-agent-card>
103
+
104
+ <!-- Analysis Agents -->
105
+ <custom-agent-card
106
+ title="Neural Net"
107
+ role="Predictive Analysis"
108
+ status="PROCESSING"
109
+ icon="cpu"
110
+ color="red"
111
+ category="analysis">
112
+ </custom-agent-card>
113
+
114
+ <custom-agent-card
115
+ title="Data Miner"
116
+ role="Market Intelligence"
117
+ status="EXTRACTING"
118
+ icon="database"
119
+ color="purple"
120
+ category="analysis">
121
+ </custom-agent-card>
122
+
123
+ <custom-agent-card
124
+ title="Pattern Rec"
125
+ role="Trend Analysis"
126
+ status="ANALYZING"
127
+ icon="activity"
128
+ color="cyan"
129
+ category="analysis">
130
+ </custom-agent-card>
131
+
132
+ <!-- Content Agents -->
133
+ <custom-agent-card
134
+ title="Ghost Writer"
135
+ role="Content & Influence"
136
+ status="DRAFTING"
137
+ icon="pen-tool"
138
+ color="gray"
139
+ category="content">
140
+ </custom-agent-card>
141
+
142
+ <custom-agent-card
143
+ title="Visual Engine"
144
+ role="Asset Generation"
145
+ status="RENDERING"
146
+ icon="image"
147
+ color="purple"
148
+ category="content">
149
+ </custom-agent-card>
150
+
151
+ <custom-agent-card
152
+ title="Voice Synth"
153
+ role="Audio Production"
154
+ status="READY"
155
+ icon="mic"
156
+ color="cyan"
157
+ category="content">
158
+ </custom-agent-card>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- DEPLOYMENT CTA -->
164
+ <section class="py-24 bg-gradient-to-r from-neonPurple/10 to-neonCyan/10 border-y border-gray-900">
165
+ <div class="container mx-auto px-6 text-center">
166
+ <h2 class="text-4xl md:text-5xl font-black mb-6">READY TO DEPLOY?</h2>
167
+ <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
168
+ Your custom AI fleet is waiting. Configure your agents and launch in minutes.
169
+ </p>
170
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
171
+ <a href="pricing.html" class="px-8 py-4 bg-neonPurple text-white font-bold text-lg hover:bg-neonPurple/80 transition-colors">
172
+ VIEW PRICING
173
+ </a>
174
+ <a href="contact.html" class="px-8 py-4 border border-white/30 hover:border-white text-white font-bold text-lg transition-colors">
175
+ CONTACT SALES
176
+ </a>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <custom-footer></custom-footer>
182
+
183
+ <script src="components/navbar.js"></script>
184
+ <script src="components/footer.js"></script>
185
+ <script src="components/agent-card.js"></script>
186
+ <script src="script.js"></script>
187
+ <script>
188
+ // Agent Filtering
189
+ document.addEventListener('DOMContentLoaded', () => {
190
+ const filterBtns = document.querySelectorAll('.filter-btn');
191
+ const agentCards = document.querySelectorAll('custom-agent-card');
192
+
193
+ filterBtns.forEach(btn => {
194
+ btn.addEventListener('click', () => {
195
+ // Update active state
196
+ filterBtns.forEach(b => {
197
+ b.classList.remove('active', 'bg-neonPurple/20', 'border-neonPurple', 'text-white');
198
+ b.classList.add('border-gray-800', 'text-gray-400');
199
+ });
200
+ btn.classList.add('active', 'bg-neonPurple/20', 'border-neonPurple', 'text-white');
201
+ btn.classList.remove('border-gray-800', 'text-gray-400');
202
+
203
+ // Filter cards
204
+ const filter = btn.dataset.filter;
205
+ agentCards.forEach(card => {
206
+ if (filter === 'all' || card.dataset.category === filter) {
207
+ card.style.display = 'block';
208
+ card.style.animation = 'fadeIn 0.3s ease';
209
+ } else {
210
+ card.style.display = 'none';
211
+ }
212
+ });
213
+ });
214
+ });
215
+ });
216
+ </script>
217
+ <script>feather.replace();</script>
218
+ </body>
219
+ </html>
components/modal.js ADDED
@@ -0,0 +1,173 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomModal extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+
5
+ const modalId = this.getAttribute('id') || 'modal';
6
+ const title = this.getAttribute('title') || 'Modal Title';
7
+ const size = this.getAttribute('size') || 'md'; // sm, md, lg, xl
8
+
9
+ const sizeClasses = {
10
+ sm: 'max-w-md',
11
+ md: 'max-w-lg',
12
+ lg: 'max-w-2xl',
13
+ xl: 'max-w-4xl'
14
+ };
15
+
16
+ this.shadowRoot.innerHTML = `
17
+ <style>
18
+ :host {
19
+ display: none;
20
+ }
21
+ :host([open]) {
22
+ display: flex;
23
+ }
24
+ .overlay {
25
+ position: fixed;
26
+ inset: 0;
27
+ background: rgba(0, 0, 0, 0.8);
28
+ backdrop-filter: blur(8px);
29
+ z-index: 9999;
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: center;
33
+ padding: 1rem;
34
+ animation: fadeIn 0.2s ease;
35
+ }
36
+ .modal {
37
+ background: #0a0a0a;
38
+ border: 1px solid #222;
39
+ border-radius: 8px;
40
+ width: 100%;
41
+ max-height: 90vh;
42
+ overflow: hidden;
43
+ animation: slideUp 0.3s ease;
44
+ display: flex;
45
+ flex-direction: column;
46
+ }
47
+ .modal-header {
48
+ padding: 1.5rem;
49
+ border-bottom: 1px solid #222;
50
+ display: flex;
51
+ justify-content: space-between;
52
+ align-items: center;
53
+ }
54
+ .modal-title {
55
+ font-size: 1.25rem;
56
+ font-weight: 700;
57
+ color: #fff;
58
+ }
59
+ .close-btn {
60
+ background: none;
61
+ border: none;
62
+ color: #666;
63
+ cursor: pointer;
64
+ padding: 0.5rem;
65
+ transition: color 0.2s;
66
+ }
67
+ .close-btn:hover {
68
+ color: #fff;
69
+ }
70
+ .modal-body {
71
+ padding: 1.5rem;
72
+ overflow-y: auto;
73
+ flex: 1;
74
+ }
75
+ .modal-footer {
76
+ padding: 1.5rem;
77
+ border-top: 1px solid #222;
78
+ display: flex;
79
+ justify-content: flex-end;
80
+ gap: 1rem;
81
+ }
82
+ .btn {
83
+ padding: 0.75rem 1.5rem;
84
+ border-radius: 4px;
85
+ font-weight: 600;
86
+ cursor: pointer;
87
+ transition: all 0.2s;
88
+ }
89
+ .btn-primary {
90
+ background: #b026ff;
91
+ border: none;
92
+ color: white;
93
+ }
94
+ .btn-primary:hover {
95
+ background: #9920e0;
96
+ }
97
+ .btn-secondary {
98
+ background: transparent;
99
+ border: 1px solid #333;
100
+ color: white;
101
+ }
102
+ .btn-secondary:hover {
103
+ border-color: #555;
104
+ }
105
+ @keyframes fadeIn {
106
+ from { opacity: 0; }
107
+ to { opacity: 1; }
108
+ }
109
+ @keyframes slideUp {
110
+ from {
111
+ opacity: 0;
112
+ transform: translateY(20px) scale(0.95);
113
+ }
114
+ to {
115
+ opacity: 1;
116
+ transform: translateY(0) scale(1);
117
+ }
118
+ }
119
+ </style>
120
+ <div class="overlay" id="overlay">
121
+ <div class="modal ${sizeClasses[size]}">
122
+ <div class="modal-header">
123
+ <h3 class="modal-title">${title}</h3>
124
+ <button class="close-btn" id="closeBtn">
125
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
126
+ </button>
127
+ </div>
128
+ <div class="modal-body">
129
+ <slot></slot>
130
+ </div>
131
+ <div class="modal-footer" id="footer">
132
+ <slot name="footer">
133
+ <button class="btn btn-secondary" id="cancelBtn">Cancel</button>
134
+ <button class="btn btn-primary" id="confirmBtn">Confirm</button>
135
+ </slot>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ `;
140
+
141
+ // Event Listeners
142
+ this.shadowRoot.getElementById('closeBtn').addEventListener('click', () => this.close());
143
+ this.shadowRoot.getElementById('cancelBtn')?.addEventListener('click', () => this.close());
144
+ this.shadowRoot.getElementById('overlay').addEventListener('click', (e) => {
145
+ if (e.target.id === 'overlay') this.close();
146
+ });
147
+
148
+ // Confirm button event
149
+ this.shadowRoot.getElementById('confirmBtn')?.addEventListener('click', () => {
150
+ this.dispatchEvent(new CustomEvent('confirm'));
151
+ this.close();
152
+ });
153
+
154
+ // Keyboard escape
155
+ document.addEventListener('keydown', (e) => {
156
+ if (e.key === 'Escape' && this.hasAttribute('open')) {
157
+ this.close();
158
+ }
159
+ });
160
+ }
161
+
162
+ open() {
163
+ this.setAttribute('open', '');
164
+ document.body.style.overflow = 'hidden';
165
+ }
166
+
167
+ close() {
168
+ this.removeAttribute('open');
169
+ document.body.style.overflow = '';
170
+ }
171
+ }
172
+
173
+ customElements.define('custom-modal', CustomModal);
components/terminal.js ADDED
@@ -0,0 +1,168 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomTerminal extends HTMLElement {
2
+ connectedCallback() {
3
+ const title = this.getAttribute('title') || 'NEXUS TERMINAL';
4
+ const lines = this.getAttribute('lines') || '5';
5
+ const autoScroll = this.hasAttribute('auto-scroll');
6
+
7
+ this.attachShadow({ mode: 'open' });
8
+
9
+ this.shadowRoot.innerHTML = `
10
+ <style>
11
+ :host {
12
+ display: block;
13
+ font-family: 'Courier New', monospace;
14
+ }
15
+ .terminal {
16
+ background: #0a0a0a;
17
+ border: 1px solid #222;
18
+ border-radius: 8px;
19
+ overflow: hidden;
20
+ }
21
+ .terminal-header {
22
+ background: #111;
23
+ padding: 0.75rem 1rem;
24
+ display: flex;
25
+ align-items: center;
26
+ gap: 0.5rem;
27
+ border-bottom: 1px solid #222;
28
+ }
29
+ .dot {
30
+ width: 12px;
31
+ height: 12px;
32
+ border-radius: 50%;
33
+ }
34
+ .dot-red { background: #ff5f57; }
35
+ .dot-yellow { background: #febc2e; }
36
+ .dot-green { background: #28c840; }
37
+ .terminal-title {
38
+ flex: 1;
39
+ text-align: center;
40
+ color: #666;
41
+ font-size: 0.75rem;
42
+ text-transform: uppercase;
43
+ letter-spacing: 0.1em;
44
+ }
45
+ .terminal-body {
46
+ padding: 1rem;
47
+ height: ${lines * 24 + 32}px;
48
+ overflow-y: auto;
49
+ background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
50
+ }
51
+ .terminal-line {
52
+ margin: 0.25rem 0;
53
+ font-size: 0.875rem;
54
+ line-height: 1.5;
55
+ }
56
+ .line-prefix {
57
+ color: #b026ff;
58
+ }
59
+ .line-content {
60
+ color: #00ff9d;
61
+ }
62
+ .line-error {
63
+ color: #ff003c;
64
+ }
65
+ .line-info {
66
+ color: #00f3ff;
67
+ }
68
+ .line-system {
69
+ color: #666;
70
+ }
71
+ .cursor {
72
+ display: inline-block;
73
+ width: 8px;
74
+ height: 16px;
75
+ background: #00ff9d;
76
+ animation: blink 1s step-end infinite;
77
+ vertical-align: middle;
78
+ }
79
+ @keyframes blink {
80
+ 0%, 100% { opacity: 1; }
81
+ 50% { opacity: 0; }
82
+ }
83
+ ::-webkit-scrollbar {
84
+ width: 6px;
85
+ }
86
+ ::-webkit-scrollbar-track {
87
+ background: #0a0a0a;
88
+ }
89
+ ::-webkit-scrollbar-thumb {
90
+ background: #222;
91
+ border-radius: 3px;
92
+ }
93
+ </style>
94
+ <div class="terminal">
95
+ <div class="terminal-header">
96
+ <div class="dot dot-red"></div>
97
+ <div class="dot dot-yellow"></div>
98
+ <div class="dot dot-green"></div>
99
+ <span class="terminal-title">${title}</span>
100
+ </div>
101
+ <div class="terminal-body" id="terminal-body">
102
+ <div class="terminal-line">
103
+ <span class="line-prefix">nexus@overdrive:~$</span>
104
+ <span class="line-content"> initializing autonomous systems...</span>
105
+ </div>
106
+ <div class="terminal-line">
107
+ <span class="line-prefix">nexus@overdrive:~$</span>
108
+ <span class="line-info"> ✓ neural network online</span>
109
+ </div>
110
+ <div class="terminal-line">
111
+ <span class="line-prefix">nexus@overdrive:~$</span>
112
+ <span class="line-info"> ✓ quantum processors connected</span>
113
+ </div>
114
+ <div class="terminal-line">
115
+ <span class="line-prefix">nexus@overdrive:~$</span>
116
+ <span class="line-system"> awaiting input...<span class="cursor"></span></span>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ `;
121
+ }
122
+
123
+ addLine(content, type = 'default') {
124
+ const body = this.shadowRoot.getElementById('terminal-body');
125
+ const prefix = this.getAttribute('prefix') || 'nexus@overdrive:~$';
126
+
127
+ const typeClass = {
128
+ default: 'line-content',
129
+ error: 'line-error',
130
+ info: 'line-info',
131
+ system: 'line-system'
132
+ }[type] || 'line-content';
133
+
134
+ // Remove cursor from last line
135
+ const lastLine = body.lastElementChild;
136
+ if (lastLine) {
137
+ const cursor = lastLine.querySelector('.cursor');
138
+ if (cursor) cursor.remove();
139
+ }
140
+
141
+ // Add new line
142
+ const line = document.createElement('div');
143
+ line.className = 'terminal-line';
144
+ line.innerHTML = `
145
+ <span class="line-prefix">${prefix}</span>
146
+ <span class="${typeClass}"> ${content}</span>
147
+ `;
148
+ body.appendChild(line);
149
+
150
+ // Add cursor to new line
151
+ const cursorLine = document.createElement('div');
152
+ cursorLine.className = 'terminal-line';
153
+ cursorLine.innerHTML = `<span class="line-prefix">${prefix}</span><span class="line-system"> awaiting input...<span class="cursor"></span></span>`;
154
+ body.appendChild(cursorLine);
155
+
156
+ // Auto scroll
157
+ if (this.hasAttribute('auto-scroll')) {
158
+ body.scrollTop = body.scrollHeight;
159
+ }
160
+ }
161
+
162
+ clear() {
163
+ const body = this.shadowRoot.getElementById('terminal-body');
164
+ body.innerHTML = '';
165
+ }
166
+ }
167
+
168
+ customElements.define('custom-terminal', CustomTerminal);
components/ticker.js ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomTicker extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+
5
+ const items = JSON.parse(this.getAttribute('items') || '[]');
6
+ const speed = this.getAttribute('speed') || '30';
7
+
8
+ this.shadowRoot.innerHTML = `
9
+ <style>
10
+ :host {
11
+ display: block;
12
+ overflow: hidden;
13
+ background: #000;
14
+ border-bottom: 1px solid #222;
15
+ }
16
+ .ticker-container {
17
+ display: flex;
18
+ overflow: hidden;
19
+ white-space: nowrap;
20
+ }
21
+ .ticker-track {
22
+ display: flex;
23
+ animation: scroll ${speed}s linear infinite;
24
+ }
25
+ .ticker-item {
26
+ display: inline-flex;
27
+ align-items: center;
28
+ padding: 0.75rem 2rem;
29
+ color: #888;
30
+ font-family: monospace;
31
+ font-size: 0.875rem;
32
+ }
33
+ .ticker-item .value {
34
+ color: #fff;
35
+ font-weight: 600;
36
+ }
37
+ .ticker-item .value.up {
38
+ color: #00ff9d;
39
+ }
40
+ .ticker-item .value.down {
41
+ color: #ff003c;
42
+ }
43
+ .ticker-item .divider {
44
+ color: #333;
45
+ margin: 0 1rem;
46
+ }
47
+ @keyframes scroll {
48
+ 0% { transform: translateX(0); }
49
+ 100% { transform: translateX(-50%); }
50
+ }
51
+ </style>
52
+ <div class="ticker-container">
53
+ <div class="ticker-track" id="ticker-track">
54
+ ${this.generateTickerItems(items)}
55
+ ${this.generateTickerItems(items)} <!-- Duplicate for seamless loop -->
56
+ </div>
57
+ </div>
58
+ `;
59
+ }
60
+
61
+ generateTickerItems(items) {
62
+ return items.map(item => `
63
+ <div class="ticker-item">
64
+ <span class="label">${item.label}</span>
65
+ <span class="divider">•</span>
66
+ <span class="value ${item.change >= 0 ? 'up' : 'down'}">${item.value}</span>
67
+ ${item.change ? `<span class="divider">•</span><span class="${item.change >= 0 ? 'up' : 'down'}">${item.change >= 0 ? '▲' : '▼'} ${Math.abs(item.change)}%</span>` : ''}
68
+ </div>
69
+ `).join('');
70
+ }
71
+
72
+ updateItems(items) {
73
+ const track = this.shadowRoot.getElementById('ticker-track');
74
+ track.innerHTML = this.generateTickerItems(items) + this.generateTickerItems(items);
75
+ }
76
+ }
77
+
78
+ customElements.define('custom-ticker', CustomTicker);
contact.html ADDED
@@ -0,0 +1,175 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Contact | NEXUS OVERDRIVE</title>
7
+ <meta name="description" content="Get in touch with NEXUS OVERDRIVE">
8
+ <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>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <link rel="stylesheet" href="style.css">
12
+ </head>
13
+ <body class="bg-void text-white font-sans overflow-x-hidden antialiased selection:bg-neonPurple selection:text-white">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <!-- PAGE HEADER -->
17
+ <header class="relative min-h-[40vh] flex items-center justify-center pt-20 overflow-hidden">
18
+ <div class="absolute inset-0 z-0">
19
+ <img src="http://static.photos/office/1200x630/77" alt="Office" class="w-full h-full object-cover opacity-10 grayscale">
20
+ <div class="absolute inset-0 bg-gradient-to-b from-void/80 via-transparent to-void"></div>
21
+ </div>
22
+ <div class="container mx-auto px-6 relative z-10 text-center">
23
+ <span class="text-neonCyan font-mono text-sm tracking-[0.3em] uppercase">Transmission Channel</span>
24
+ <h1 class="text-5xl md:text-7xl font-black tracking-tighter mt-4 mb-6">
25
+ MAKE <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonPurple to-neonCyan">CONTACT</span>
26
+ </h1>
27
+ </div>
28
+ </header>
29
+
30
+ <!-- CONTACT SECTION -->
31
+ <section class="py-24">
32
+ <div class="container mx-auto px-6">
33
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 max-w-6xl mx-auto">
34
+
35
+ <!-- Contact Info -->
36
+ <div>
37
+ <h2 class="text-3xl font-bold mb-8">Let's Build The Future</h2>
38
+ <p class="text-gray-400 mb-12">
39
+ Ready to deploy autonomous intelligence? Our team is standing by to help you architect your AI empire.
40
+ </p>
41
+
42
+ <div class="space-y-8">
43
+ <div class="flex items-start gap-4">
44
+ <div class="w-12 h-12 bg-neonPurple/20 rounded-lg flex items-center justify-center flex-shrink-0">
45
+ <i data-feather="mail" class="w-6 h-6 text-neonPurple"></i>
46
+ </div>
47
+ <div>
48
+ <h3 class="font-bold text-lg mb-1">Email</h3>
49
+ <p class="text-gray-400">contact@nexusoverdrive.ai</p>
50
+ <p class="text-gray-500 text-sm">Response within 24 hours</p>
51
+ </div>
52
+ </div>
53
+
54
+ <div class="flex items-start gap-4">
55
+ <div class="w-12 h-12 bg-neonCyan/20 rounded-lg flex items-center justify-center flex-shrink-0">
56
+ <i data-feather="map-pin" class="w-6 h-6 text-neonCyan"></i>
57
+ </div>
58
+ <div>
59
+ <h3 class="font-bold text-lg mb-1">Headquarters</h3>
60
+ <p class="text-gray-400">Sector 7, Neural District</p>
61
+ <p class="text-gray-500 text-sm">New Singapore, 02492</p>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="flex items-start gap-4">
66
+ <div class="w-12 h-12 bg-deepRed/20 rounded-lg flex items-center justify-center flex-shrink-0">
67
+ <i data-feather="clock" class="w-6 h-6 text-deepRed"></i>
68
+ </div>
69
+ <div>
70
+ <h3 class="font-bold text-lg mb-1">Hours</h3>
71
+ <p class="text-gray-400">24/7 Autonomous Operations</p>
72
+ <p class="text-gray-500 text-sm">Human support: 9AM - 9PM UTC</p>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Social Links -->
78
+ <div class="mt-12 pt-8 border-t border-gray-800">
79
+ <p class="text-gray-500 text-sm mb-4 font-mono uppercase">Connect via neural networks</p>
80
+ <div class="flex gap-4">
81
+ <a href="#" class="w-10 h-10 border border-gray-700 flex items-center justify-center hover:border-neonPurple hover:text-neonPurple transition-colors">
82
+ <i data-feather="twitter" class="w-5 h-5"></i>
83
+ </a>
84
+ <a href="#" class="w-10 h-10 border border-gray-700 flex items-center justify-center hover:border-neonCyan hover:text-neonCyan transition-colors">
85
+ <i data-feather="linkedin" class="w-5 h-5"></i>
86
+ </a>
87
+ <a href="#" class="w-10 h-10 border border-gray-700 flex items-center justify-center hover:border-deepRed hover:text-deepRed transition-colors">
88
+ <i data-feather="github" class="w-5 h-5"></i>
89
+ </a>
90
+ <a href="#" class="w-10 h-10 border border-gray-700 flex items-center justify-center hover:border-green-500 hover:text-green-500 transition-colors">
91
+ <i data-feather="message-circle" class="w-5 h-5"></i>
92
+ </a>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Contact Form -->
98
+ <div>
99
+ <form id="contact-form" class="space-y-6 bg-gray-900/30 border border-gray-800 p-8">
100
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
101
+ <div>
102
+ <label class="block text-sm font-bold mb-2 text-gray-400">First Name *</label>
103
+ <input type="text" required class="w-full bg-black/50 border border-gray-700 px-4 py-3 text-white focus:border-neonPurple focus:outline-none transition-colors">
104
+ </div>
105
+ <div>
106
+ <label class="block text-sm font-bold mb-2 text-gray-400">Last Name *</label>
107
+ <input type="text" required class="w-full bg-black/50 border border-gray-700 px-4 py-3 text-white focus:border-neonPurple focus:outline-none transition-colors">
108
+ </div>
109
+ </div>
110
+
111
+ <div>
112
+ <label class="block text-sm font-bold mb-2 text-gray-400">Email *</label>
113
+ <input type="email" required class="w-full bg-black/50 border border-gray-700 px-4 py-3 text-white focus:border-neonPurple focus:outline-none transition-colors">
114
+ </div>
115
+
116
+ <div>
117
+ <label class="block text-sm font-bold mb-2 text-gray-400">Company</label>
118
+ <input type="text" class="w-full bg-black/50 border border-gray-700 px-4 py-3 text-white focus:border-neonPurple focus:outline-none transition-colors">
119
+ </div>
120
+
121
+ <div>
122
+ <label class="block text-sm font-bold mb-2 text-gray-400">Interest</label>
123
+ <select class="w-full bg-black/50 border border-gray-700 px-4 py-3 text-white focus:border-neonPurple focus:outline-none transition-colors">
124
+ <option value="">Select an option</option>
125
+ <option value="trial">Start a Trial</option>
126
+ <option value="demo">Request a Demo</option>
127
+ <option value="enterprise">Enterprise Solutions</option>
128
+ <option value="partnership">Partnership</option>
129
+ <option value="other">Other</option>
130
+ </select>
131
+ </div>
132
+
133
+ <div>
134
+ <label class="block text-sm font-bold mb-2 text-gray-400">Message *</label>
135
+ <textarea rows="4" required class="w-full bg-black/50 border border-gray-700 px-4 py-3 text-white focus:border-neonPurple focus:outline-none transition-colors resize-none"></textarea>
136
+ </div>
137
+
138
+ <button type="submit" class="w-full py-4 bg-neonPurple hover:bg-neonPurple/80 text-white font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-2">
139
+ <span>Transmit Message</span>
140
+ <i data-feather="send" class="w-4 h-4"></i>
141
+ </button>
142
+ </form>
143
+
144
+ <!-- Success Message (Hidden by default) -->
145
+ <div id="success-message" class="hidden bg-green-500/10 border border-green-500 p-8 text-center">
146
+ <i data-feather="check-circle" class="w-16 h-16 text-green-500 mx-auto mb-4"></i>
147
+ <h3 class="text-2xl font-bold text-white mb-2">Transmission Received</h3>
148
+ <p class="text-gray-400">Our autonomous agents will respond within 24 hours.</p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <custom-footer></custom-footer>
156
+
157
+ <script src="components/navbar.js"></script>
158
+ <script src="components/footer.js"></script>
159
+ <script src="script.js"></script>
160
+ <script>
161
+ // Contact Form Handler
162
+ document.getElementById('contact-form').addEventListener('submit', (e) => {
163
+ e.preventDefault();
164
+ const form = e.target;
165
+ const success = document.getElementById('success-message');
166
+
167
+ // Simulate form submission
168
+ form.style.display = 'none';
169
+ success.classList.remove('hidden');
170
+ feather.replace();
171
+ });
172
+ </script>
173
+ <script>feather.replace();</script>
174
+ </body>
175
+ </html>
index.html CHANGED
@@ -35,11 +35,12 @@
35
  <link rel="stylesheet" href="style.css">
36
  </head>
37
  <body class="bg-void text-white font-sans overflow-x-hidden antialiased selection:bg-neonPurple selection:text-white">
 
 
38
 
39
  <!-- WEB COMPONENTS -->
40
  <custom-navbar></custom-navbar>
41
-
42
- <!-- HERO SECTION -->
43
  <header class="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
44
  <!-- Background Elements -->
45
  <div class="absolute inset-0 z-0">
@@ -225,6 +226,7 @@
225
  <custom-footer></custom-footer>
226
 
227
  <!-- SCRIPTS -->
 
228
  <script src="components/navbar.js"></script>
229
  <script src="components/footer.js"></script>
230
  <script src="components/agent-card.js"></script>
 
35
  <link rel="stylesheet" href="style.css">
36
  </head>
37
  <body class="bg-void text-white font-sans overflow-x-hidden antialiased selection:bg-neonPurple selection:text-white">
38
+ <!-- TICKER -->
39
+ <custom-ticker id="market-ticker"></custom-ticker>
40
 
41
  <!-- WEB COMPONENTS -->
42
  <custom-navbar></custom-navbar>
43
+ <!-- HERO SECTION -->
 
44
  <header class="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
45
  <!-- Background Elements -->
46
  <div class="absolute inset-0 z-0">
 
226
  <custom-footer></custom-footer>
227
 
228
  <!-- SCRIPTS -->
229
+ <script src="components/ticker.js"></script>
230
  <script src="components/navbar.js"></script>
231
  <script src="components/footer.js"></script>
232
  <script src="components/agent-card.js"></script>
pricing.html ADDED
@@ -0,0 +1,220 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pricing | NEXUS OVERDRIVE</title>
7
+ <meta name="description" content="Choose your AI empire tier">
8
+ <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>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <link rel="stylesheet" href="style.css">
12
+ </head>
13
+ <body class="bg-void text-white font-sans overflow-x-hidden antialiased selection:bg-neonPurple selection:text-white">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <!-- PAGE HEADER -->
17
+ <header class="relative min-h-[50vh] flex items-center justify-center pt-20 overflow-hidden">
18
+ <div class="absolute inset-0 z-0">
19
+ <img src="http://static.photos/minimal/1200x630/156" alt="Minimal" class="w-full h-full object-cover opacity-10 grayscale">
20
+ <div class="absolute inset-0 bg-gradient-to-b from-void/80 via-transparent to-void"></div>
21
+ </div>
22
+ <div class="container mx-auto px-6 relative z-10 text-center">
23
+ <span class="text-neonCyan font-mono text-sm tracking-[0.3em] uppercase">Investment Tiers</span>
24
+ <h1 class="text-5xl md:text-7xl font-black tracking-tighter mt-4 mb-6">
25
+ CHOOSE YOUR <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonPurple to-neonCyan">EMPIRE</span>
26
+ </h1>
27
+ <p class="text-gray-400 text-xl max-w-2xl mx-auto">Scale from autonomous operation to full market domination.</p>
28
+ </div>
29
+ </header>
30
+
31
+ <!-- PRICING CARDS -->
32
+ <section class="py-24">
33
+ <div class="container mx-auto px-6">
34
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
35
+
36
+ <!-- STARTER -->
37
+ <div class="bg-gray-900/30 border border-gray-800 p-8 relative group hover:border-gray-700 transition-all duration-300">
38
+ <div class="mb-8">
39
+ <h3 class="text-xl font-bold text-gray-300 mb-2">INITIATE</h3>
40
+ <p class="text-gray-500 text-sm">For autonomous individuals</p>
41
+ </div>
42
+ <div class="mb-8">
43
+ <span class="text-5xl font-black text-white">$299</span>
44
+ <span class="text-gray-500">/month</span>
45
+ </div>
46
+ <ul class="space-y-4 mb-8">
47
+ <li class="flex items-center gap-3 text-gray-400">
48
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
49
+ <span>3 AI Agents</span>
50
+ </li>
51
+ <li class="flex items-center gap-3 text-gray-400">
52
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
53
+ <span>10,000 API Calls/mo</span>
54
+ </li>
55
+ <li class="flex items-center gap-3 text-gray-400">
56
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
57
+ <span>Basic Analytics</span>
58
+ </li>
59
+ <li class="flex items-center gap-3 text-gray-400">
60
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
61
+ <span>Email Support</span>
62
+ </li>
63
+ <li class="flex items-center gap-3 text-gray-600">
64
+ <i data-feather="x" class="w-5 h-5"></i>
65
+ <span>Custom Training</span>
66
+ </li>
67
+ </ul>
68
+ <a href="#" class="block w-full py-4 text-center border border-gray-700 hover:border-white text-white font-bold uppercase tracking-wider transition-all">
69
+ Get Started
70
+ </a>
71
+ </div>
72
+
73
+ <!-- PRO (Featured) -->
74
+ <div class="bg-gradient-to-b from-neonPurple/20 to-gray-900/50 border-2 border-neonPurple p-8 relative transform md:-translate-y-4">
75
+ <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
76
+ <span class="bg-neonPurple text-white text-xs font-bold px-4 py-1 uppercase tracking-wider">Most Popular</span>
77
+ </div>
78
+ <div class="mb-8">
79
+ <h3 class="text-xl font-bold text-white mb-2">COMMANDER</h3>
80
+ <p class="text-gray-400 text-sm">For growing operations</p>
81
+ </div>
82
+ <div class="mb-8">
83
+ <span class="text-5xl font-black text-white">$999</span>
84
+ <span class="text-gray-500">/month</span>
85
+ </div>
86
+ <ul class="space-y-4 mb-8">
87
+ <li class="flex items-center gap-3 text-white">
88
+ <i data-feather="check" class="w-5 h-5 text-neonPurple"></i>
89
+ <span>15 AI Agents</span>
90
+ </li>
91
+ <li class="flex items-center gap-3 text-white">
92
+ <i data-feather="check" class="w-5 h-5 text-neonPurple"></i>
93
+ <span>100,000 API Calls/mo</span>
94
+ </li>
95
+ <li class="flex items-center gap-3 text-white">
96
+ <i data-feather="check" class="w-5 h-5 text-neonPurple"></i>
97
+ <span>Advanced Analytics</span>
98
+ </li>
99
+ <li class="flex items-center gap-3 text-white">
100
+ <i data-feather="check" class="w-5 h-5 text-neonPurple"></i>
101
+ <span>Priority Support</span>
102
+ </li>
103
+ <li class="flex items-center gap-3 text-white">
104
+ <i data-feather="check" class="w-5 h-5 text-neonPurple"></i>
105
+ <span>Custom Training</span>
106
+ </li>
107
+ </ul>
108
+ <a href="#" class="block w-full py-4 text-center bg-neonPurple hover:bg-neonPurple/80 text-white font-bold uppercase tracking-wider transition-all">
109
+ Deploy Now
110
+ </a>
111
+ </div>
112
+
113
+ <!-- ENTERPRISE -->
114
+ <div class="bg-gray-900/30 border border-gray-800 p-8 relative group hover:border-gray-700 transition-all duration-300">
115
+ <div class="mb-8">
116
+ <h3 class="text-xl font-bold text-gray-300 mb-2">OVERLORD</h3>
117
+ <p class="text-gray-500 text-sm">For market domination</p>
118
+ </div>
119
+ <div class="mb-8">
120
+ <span class="text-5xl font-black text-white">CUSTOM</span>
121
+ </div>
122
+ <ul class="space-y-4 mb-8">
123
+ <li class="flex items-center gap-3 text-gray-400">
124
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
125
+ <span>Unlimited AI Agents</span>
126
+ </li>
127
+ <li class="flex items-center gap-3 text-gray-400">
128
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
129
+ <span>Unlimited API Calls</span>
130
+ </li>
131
+ <li class="flex items-center gap-3 text-gray-400">
132
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
133
+ <span>Real-time Market Data</span>
134
+ </li>
135
+ <li class="flex items-center gap-3 text-gray-400">
136
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
137
+ <span>Dedicated Account Team</span>
138
+ </li>
139
+ <li class="flex items-center gap-3 text-gray-400">
140
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
141
+ <span>Custom Infrastructure</span>
142
+ </li>
143
+ </ul>
144
+ <a href="contact.html" class="block w-full py-4 text-center border border-gray-700 hover:border-white text-white font-bold uppercase tracking-wider transition-all">
145
+ Contact Sales
146
+ </a>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- FAQ SECTION -->
153
+ <section class="py-24 bg-black/50 border-y border-gray-900">
154
+ <div class="container mx-auto px-6 max-w-3xl">
155
+ <h2 class="text-3xl font-black text-center mb-12">FREQUENTLY ASKED QUESTIONS</h2>
156
+
157
+ <div class="space-y-4" id="faq-container">
158
+ <div class="faq-item border border-gray-800 bg-gray-900/30">
159
+ <button class="faq-question w-full text-left p-6 flex justify-between items-center">
160
+ <span class="font-bold text-lg">Can I upgrade or downgrade my plan?</span>
161
+ <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
162
+ </button>
163
+ <div class="faq-answer hidden px-6 pb-6 text-gray-400">
164
+ Yes, you can modify your plan at any time. Changes take effect at the start of your next billing cycle.
165
+ </div>
166
+ </div>
167
+
168
+ <div class="faq-item border border-gray-800 bg-gray-900/30">
169
+ <button class="faq-question w-full text-left p-6 flex justify-between items-center">
170
+ <span class="font-bold text-lg">What happens if I exceed my API limits?</span>
171
+ <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
172
+ </button>
173
+ <div class="faq-answer hidden px-6 pb-6 text-gray-400">
174
+ We'll notify you when you're approaching your limit. You can purchase additional calls or upgrade your plan.
175
+ </div>
176
+ </div>
177
+
178
+ <div class="faq-item border border-gray-800 bg-gray-900/30">
179
+ <button class="faq-question w-full text-left p-6 flex justify-between items-center">
180
+ <span class="font-bold text-lg">Is there a free trial?</span>
181
+ <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
182
+ </button>
183
+ <div class="faq-answer hidden px-6 pb-6 text-gray-400">
184
+ We offer a 14-day trial for all plans. No credit card required. Full access to all features.
185
+ </div>
186
+ </div>
187
+
188
+ <div class="faq-item border border-gray-800 bg-gray-900/30">
189
+ <button class="faq-question w-full text-left p-6 flex justify-between items-center">
190
+ <span class="font-bold text-lg">What kind of support do you offer?</span>
191
+ <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
192
+ </button>
193
+ <div class="faq-answer hidden px-6 pb-6 text-gray-400">
194
+ All plans include email support. Commander and Overlord plans include priority email and chat support. Overlord includes dedicated account management.
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+
201
+ <custom-footer></custom-footer>
202
+
203
+ <script src="components/navbar.js"></script>
204
+ <script src="components/footer.js"></script>
205
+ <script src="script.js"></script>
206
+ <script>
207
+ // FAQ Accordion
208
+ document.querySelectorAll('.faq-question').forEach(button => {
209
+ button.addEventListener('click', () => {
210
+ const answer = button.nextElementSibling;
211
+ const icon = button.querySelector('i');
212
+
213
+ answer.classList.toggle('hidden');
214
+ icon.style.transform = answer.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
215
+ });
216
+ });
217
+ </script>
218
+ <script>feather.replace();</script>
219
+ </body>
220
+ </html>