Hugging Face's logo

Spaces:
jsonet
/
ai-quantum-architects-3-0
Running

App Files Community
jsonet commited on
Commit
8293aef
·
verified ·
1 Parent(s): 5168672

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +484 -124
index.html CHANGED
@@ -19,12 +19,19 @@
19
  teal: '#14b8a6',
20
  pink: '#ec4899',
21
  blue: '#3b82f6',
22
- yellow: '#f59e0b'
 
 
23
  }
24
  },
25
  fontFamily: {
26
  sans: ['Inter', 'sans-serif'],
27
  mono: ['Fira Code', 'monospace']
 
 
 
 
 
28
  }
29
  }
30
  }
@@ -155,6 +162,96 @@
155
  border-radius: 50%;
156
  background-color: #6d28d9;
157
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  </style>
159
  </head>
160
  <body class="min-h-screen">
@@ -163,12 +260,17 @@
163
  <i class="fas fa-robot text-white text-2xl"></i>
164
  </div>
165
 
 
 
 
 
 
166
  <!-- Quantum Tools Sidebar (Hidden by default) -->
167
  <div class="fixed inset-y-0 right-0 w-80 bg-quantum-darker shadow-xl transform translate-x-full transition-transform duration-300 z-50 border-l border-slate-800" id="toolsSidebar">
168
  <div class="p-4 h-full flex flex-col">
169
  <div class="flex justify-between items-center mb-6">
170
  <h3 class="text-lg font-bold text-quantum-blue">
171
- <i class="fas fa-tools mr-2"></i> QUANTUM TOOLS
172
  </h3>
173
  <button class="text-slate-400 hover:text-white" id="closeToolsSidebar">
174
  <i class="fas fa-times"></i>
@@ -176,82 +278,199 @@
176
  </div>
177
 
178
  <div class="flex-1 overflow-y-auto scrollbar-hide">
179
- <div class="grid grid-cols-2 gap-3">
180
- <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-blue">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  <div class="w-10 h-10 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center mb-2">
182
  <i class="fas fa-brain text-quantum-purple"></i>
183
  </div>
184
  <span class="text-xs text-center">Prompt Architect</span>
185
  </div>
186
 
187
- <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-green">
188
  <div class="w-10 h-10 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center mb-2">
189
  <i class="fas fa-project-diagram text-quantum-green"></i>
190
  </div>
191
  <span class="text-xs text-center">Workflow Builder</span>
192
  </div>
193
 
194
- <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-teal">
195
  <div class="w-10 h-10 rounded-full bg-quantum-teal bg-opacity-20 flex items-center justify-center mb-2">
196
  <i class="fas fa-chart-line text-quantum-teal"></i>
197
  </div>
198
  <span class="text-xs text-center">Data Analyzer</span>
199
  </div>
200
 
201
- <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-pink">
202
  <div class="w-10 h-10 rounded-full bg-quantum-pink bg-opacity-20 flex items-center justify-center mb-2">
203
  <i class="fas fa-robot text-quantum-pink"></i>
204
  </div>
205
  <span class="text-xs text-center">AI Agent</span>
206
  </div>
207
 
208
- <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-yellow">
209
  <div class="w-10 h-10 rounded-full bg-quantum-yellow bg-opacity-20 flex items-center justify-center mb-2">
210
  <i class="fas fa-lightbulb text-quantum-yellow"></i>
211
  </div>
212
  <span class="text-xs text-center">Idea Generator</span>
213
  </div>
214
 
215
- <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-blue">
216
  <div class="w-10 h-10 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center mb-2">
217
  <i class="fas fa-code text-quantum-blue"></i>
218
  </div>
219
  <span class="text-xs text-center">Code Assistant</span>
220
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
221
  </div>
222
 
223
- <div class="mt-6">
 
224
  <h4 class="text-sm font-semibold text-slate-300 mb-3 flex items-center">
225
  <i class="fas fa-plug mr-2 text-quantum-purple"></i> CONNECTED TOOLS
226
  </h4>
227
 
228
  <div class="space-y-2">
229
- <div class="flex items-center justify-between bg-slate-800 p-2 rounded-md">
230
  <div class="flex items-center">
231
  <div class="w-6 h-6 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center mr-2">
232
  <i class="fas fa-brain text-xs text-quantum-purple"></i>
233
  </div>
234
  <span class="text-sm">Prompt Architect</span>
235
  </div>
236
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
 
 
 
237
  </div>
238
 
239
- <div class="flex items-center justify-between bg-slate-800 p-2 rounded-md opacity-50">
240
  <div class="flex items-center">
241
  <div class="w-6 h-6 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center mr-2">
242
  <i class="fas fa-project-diagram text-xs text-quantum-green"></i>
243
  </div>
244
  <span class="text-sm">Workflow Builder</span>
245
  </div>
246
- <div class="w-3 h-3 rounded-full bg-gray-500"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
247
  </div>
248
  </div>
249
  </div>
250
  </div>
251
 
252
  <div class="pt-4 border-t border-slate-800">
253
- <button class="w-full py-2 rounded-md bg-gradient-to-r from-quantum-purple to-quantum-blue text-white font-medium">
254
- <i class="fas fa-plus mr-2"></i> Add Tool
255
  </button>
256
  </div>
257
  </div>
@@ -284,12 +503,16 @@
284
  </div>
285
  <div class="flex items-center justify-between">
286
  <span class="text-sm">Tool Synchronization</span>
287
- <span class="text-xs px-2 py-1 rounded-full bg-blue-900 text-blue-300">2/6 Connected</span>
288
  </div>
289
  <div class="flex items-center justify-between">
290
  <span class="text-sm">Data Transfer</span>
291
  <span class="text-xs px-2 py-1 rounded-full bg-yellow-900 text-yellow-300">Optimized</span>
292
  </div>
 
 
 
 
293
  </div>
294
  <button class="w-full mt-3 py-1 text-xs rounded-md bg-quantum-purple hover:bg-purple-800">
295
  <i class="fas fa-sync-alt mr-1"></i> Sync All Tools
@@ -307,11 +530,29 @@
307
  <div class="flex justify-between items-start">
308
  <div>
309
  <h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-quantum-purple to-quantum-green bg-clip-text text-transparent">
310
- QUANTUM ARCHITECTS™ 3.0
311
  </h1>
312
  <p class="text-lg text-slate-300 mb-4">
313
  Master Prompt Engineering System for Elite-Level AI Interactions
314
  </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  </div>
316
  <div class="bg-slate-900 rounded-lg p-3 border border-slate-800">
317
  <div class="flex items-center space-x-2">
@@ -321,29 +562,21 @@
321
  <div>
322
  <p class="text-xs text-slate-400">Quantum Power</p>
323
  <div class="w-full bg-slate-700 rounded-full h-1.5">
324
- <div class="bg-gradient-to-r from-quantum-purple to-quantum-green h-1.5 rounded-full" style="width: 78%"></div>
 
 
 
 
 
 
 
 
 
 
 
325
  </div>
326
  </div>
327
  </div>
328
- </div>
329
- </div>
330
-
331
- <div class="flex items-center space-x-4 text-sm">
332
- <div class="flex items-center text-quantum-green">
333
- <i class="fas fa-bolt mr-1"></i>
334
- <span>HYPER-OPTIMIZED</span>
335
- </div>
336
- <div class="flex items-center text-quantum-teal">
337
- <i class="fas fa-layer-group mr-1"></i>
338
- <span>6 MODULES</span>
339
- </div>
340
- <div class="flex items-center text-quantum-pink">
341
- <i class="fas fa-cubes mr-1"></i>
342
- <span>1500+ PROMPTS</span>
343
- </div>
344
- <div class="flex items-center text-quantum-blue">
345
- <i class="fas fa-plug mr-1"></i>
346
- <span>QUANTUM NETWORK</span>
347
  </div>
348
  </div>
349
  </div>
@@ -385,6 +618,14 @@
385
  <span>AI AUTOMATION</span>
386
  <span class="text-xs bg-slate-700 px-2 py-1 rounded-full">NEW</span>
387
  </div>
 
 
 
 
 
 
 
 
388
  </div>
389
 
390
  <h3 class="font-bold text-lg mb-4 text-quantum-green flex items-center">
@@ -440,6 +681,14 @@
440
  <i class="fas fa-project-diagram mr-2 text-quantum-yellow"></i>
441
  <span>Automated Workflows</span>
442
  </div>
 
 
 
 
 
 
 
 
443
  </div>
444
  </div>
445
 
@@ -477,6 +726,7 @@
477
  <div class="flex mt-1 space-x-1">
478
  <span class="text-xs px-1 py-0.5 rounded bg-quantum-teal bg-opacity-20 text-quantum-teal">Blog</span>
479
  <span class="text-xs px-1 py-0.5 rounded bg-quantum-pink bg-opacity-20 text-quantum-pink">Social</span>
 
480
  </div>
481
  </div>
482
  <i class="fas fa-play text-quantum-blue"></i>
@@ -490,6 +740,21 @@
490
  <div class="flex mt-1 space-x-1">
491
  <span class="text-xs px-1 py-0.5 rounded bg-quantum-purple bg-opacity-20 text-quantum-purple">Email</span>
492
  <span class="text-xs px-1 py-0.5 rounded bg-quantum-green bg-opacity-20 text-quantum-green">SMS</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
493
  </div>
494
  </div>
495
  <i class="fas fa-play text-quantum-blue"></i>
@@ -505,6 +770,85 @@
505
 
506
  <!-- Main Content Area -->
507
  <div class="lg:col-span-3 space-y-6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
508
  <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
509
  <div class="flex items-center justify-between mb-6">
510
  <h2 class="text-2xl font-bold text-quantum-purple">
@@ -575,6 +919,7 @@
575
  </div>
576
  </div>
577
 
 
578
  <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
579
  <div class="flex items-center justify-between mb-4">
580
  <h3 class="text-lg font-bold text-quantum-green">
@@ -659,6 +1004,7 @@ Desarrolla una arquitectura de oferta completa que incluya:
659
  </div>
660
  </div>
661
 
 
662
  <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
663
  <h3 class="text-lg font-bold text-quantum-teal mb-4">
664
  <i class="fas fa-star mr-2"></i> RECOMMENDED PROMPTS
@@ -674,8 +1020,8 @@ Desarrolla una arquitectura de oferta completa que incluya:
674
  <h4 class="font-bold text-white">Copywriting Neuropersuasivo</h4>
675
  <p class="text-sm text-slate-400 mt-1">Técnicas avanzadas de escritura persuasiva basadas en neurociencia</p>
676
  <div class="mt-2 flex space-x-1">
677
- <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-700">Marketing</span>
678
- <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-700">Sales</span>
679
  </div>
680
  </div>
681
  </div>
@@ -689,8 +1035,8 @@ Desarrolla una arquitectura de oferta completa que incluya:
689
  <h4 class="font-bold text-white">Funnels de Conversión</h4>
690
  <p class="text-sm text-slate-400 mt-1">Estructuras de conversión multidimensionales para alto ROI</p>
691
  <div class="mt-2 flex space-x-1">
692
- <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-700">Automation</span>
693
- <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-700">Optimization</span>
694
  </div>
695
  </div>
696
  </div>
@@ -704,8 +1050,8 @@ Desarrolla una arquitectura de oferta completa que incluya:
704
  <h4 class="font-bold text-white">Email Marketing Hiperpersonalizado</h4>
705
  <p class="text-sm text-slate-400 mt-1">Secuencias de email con personalización avanzada y triggers</p>
706
  <div class="mt-2 flex space-x-1">
707
- <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-700">Automation</span>
708
- <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-700">Nurturing</span>
709
  </div>
710
  </div>
711
  </div>
@@ -719,8 +1065,8 @@ Desarrolla una arquitectura de oferta completa que incluya:
719
  <h4 class="font-bold text-white">Pricing Estratégico Avanzado</h4>
720
  <p class="text-sm text-slate-400 mt-1">Modelos de precios psicológicos para maximizar percepción de valor</p>
721
  <div class="mt-2 flex space-x-1">
722
- <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-700">Strategy</span>
723
- <span class="text-xs px-1.5 py-0.5 rounded-full bg-slate-700">Psychology</span>
724
  </div>
725
  </div>
726
  </div>
@@ -735,7 +1081,7 @@ Desarrolla una arquitectura de oferta completa que incluya:
735
  </div>
736
  </div>
737
 
738
- <!-- New Workflow Integration Section -->
739
  <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
740
  <h3 class="text-lg font-bold text-quantum-yellow mb-4 flex items-center">
741
  <i class="fas fa-project-diagram mr-2"></i> WORKFLOW INTEGRATION
@@ -744,7 +1090,10 @@ Desarrolla una arquitectura de oferta completa que incluya:
744
  <div class="bg-slate-900 rounded-lg p-4 mb-4">
745
  <div class="flex items-center justify-between mb-3">
746
  <h4 class="font-medium text-quantum-blue">Current Workflow: "Offer Creation Pipeline"</h4>
747
- <span class="text-xs px-2 py-1 rounded-full bg-quantum-blue bg-opacity-20 text-quantum-blue">Active</span>
 
 
 
748
  </div>
749
 
750
  <div class="space-y-4 relative">
@@ -799,6 +1148,19 @@ Desarrolla una arquitectura de oferta completa que incluya:
799
  </div>
800
  </div>
801
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
802
  </div>
803
  </div>
804
 
@@ -811,80 +1173,78 @@ Desarrolla una arquitectura de oferta completa que incluya:
811
  </button>
812
  </div>
813
  </div>
814
- </div>
815
- </div>
816
- </main>
817
-
818
- <!-- Footer -->
819
- <footer class="mt-12 pt-6 border-t border-slate-800">
820
- <div class="flex flex-col md:flex-row justify-between items-center">
821
- <div class="flex items-center space-x-2 mb-4 md:mb-0">
822
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-quantum-purple to-quantum-green flex items-center justify-center">
823
- <i class="fas fa-atom text-white text-sm"></i>
824
- </div>
825
- <span class="text-sm font-medium">QUANTUM BOX AI PRO TOOLS 5.0</span>
826
- </div>
827
- <div class="flex space-x-4">
828
- <a href="#" class="text-slate-400 hover:text-white transition-colors">
829
- <i class="fab fa-twitter"></i>
830
- </a>
831
- <a href="#" class="text-slate-400 hover:text-white transition-colors">
832
- <i class="fab fa-discord"></i>
833
- </a>
834
- <a href="#" class="text-slate-400 hover:text-white transition-colors">
835
- <i class="fab fa-github"></i>
836
- </a>
837
- <a href="#" class="text-slate-400 hover:text-white transition-colors">
838
- <i class="fas fa-envelope"></i>
839
- </a>
840
- </div>
841
- </div>
842
- <div class="mt-4 text-center md:text-left text-xs text-slate-500">
843
- <p>© 2023 Quantum Box AI. All rights reserved. Version 5.0.12 | Quantum Network Status: <span class="text-green-500">Optimal</span> | Last Sync: 2 minutes ago</p>
844
- </div>
845
- </footer>
846
- </div>
847
-
848
- <script>
849
- // Simple tab switching functionality
850
- document.querySelectorAll('.module-tab').forEach(tab => {
851
- tab.addEventListener('click', function() {
852
- document.querySelector('.module-tab.active').classList.remove('active');
853
- this.classList.add('active');
854
- });
855
- });
856
-
857
- // Prompt card hover effect
858
- document.querySelectorAll('.prompt-card').forEach(card => {
859
- card.addEventListener('click', function() {
860
- // In a real app, this would load the selected prompt
861
- alert('Prompt selected! This would load the prompt details in a real application.');
862
- });
863
- });
864
-
865
- // AI Assistant Bubble
866
- const aiAssistant = document.getElementById('aiAssistant');
867
- const toolsSidebar = document.getElementById('toolsSidebar');
868
- const closeToolsSidebar = document.getElementById('closeToolsSidebar');
869
-
870
- aiAssistant.addEventListener('click', function() {
871
- toolsSidebar.classList.toggle('translate-x-full');
872
- toolsSidebar.classList.toggle('translate-x-0');
873
- });
874
-
875
- closeToolsSidebar.addEventListener('click', function() {
876
- toolsSidebar.classList.add('translate-x-full');
877
- toolsSidebar.classList.remove('translate-x-0');
878
- });
879
-
880
- // Simulate network status changes
881
- setInterval(() => {
882
- const statusIndicator = document.querySelector('.w-2.h-2.rounded-full');
883
- if (statusIndicator) {
884
- statusIndicator.classList.toggle('bg-green-500');
885
- statusIndicator.classList.toggle('bg-yellow-500');
886
- }
887
- }, 5000);
888
- </script>
889
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jsonet/ai-quantum-architects-3-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
890
  </html>
 
19
  teal: '#14b8a6',
20
  pink: '#ec4899',
21
  blue: '#3b82f6',
22
+ yellow: '#f59e0b',
23
+ orange: '#f97316',
24
+ red: '#ef4444'
25
  }
26
  },
27
  fontFamily: {
28
  sans: ['Inter', 'sans-serif'],
29
  mono: ['Fira Code', 'monospace']
30
+ },
31
+ animation: {
32
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
33
+ 'bounce-slow': 'bounce 2s infinite',
34
+ 'spin-slow': 'spin 3s linear infinite'
35
  }
36
  }
37
  }
 
162
  border-radius: 50%;
163
  background-color: #6d28d9;
164
  }
165
+
166
+ .quantum-shimmer {
167
+ position: relative;
168
+ overflow: hidden;
169
+ }
170
+
171
+ .quantum-shimmer::after {
172
+ content: '';
173
+ position: absolute;
174
+ top: 0;
175
+ left: -100%;
176
+ width: 100%;
177
+ height: 100%;
178
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
179
+ animation: shimmer 2s infinite;
180
+ }
181
+
182
+ @keyframes shimmer {
183
+ 100% {
184
+ left: 100%;
185
+ }
186
+ }
187
+
188
+ .quantum-connection {
189
+ position: relative;
190
+ }
191
+
192
+ .quantum-connection::before {
193
+ content: '';
194
+ position: absolute;
195
+ top: 0;
196
+ left: 0;
197
+ right: 0;
198
+ bottom: 0;
199
+ background: radial-gradient(circle at center, rgba(109, 40, 217, 0.1) 0%, transparent 70%);
200
+ z-index: -1;
201
+ }
202
+
203
+ .quantum-connection:hover::before {
204
+ background: radial-gradient(circle at center, rgba(109, 40, 217, 0.3) 0%, transparent 70%);
205
+ }
206
+
207
+ .quantum-tooltip {
208
+ position: relative;
209
+ }
210
+
211
+ .quantum-tooltip:hover::after {
212
+ content: attr(data-tooltip);
213
+ position: absolute;
214
+ bottom: 100%;
215
+ left: 50%;
216
+ transform: translateX(-50%);
217
+ background-color: #1e293b;
218
+ color: white;
219
+ padding: 4px 8px;
220
+ border-radius: 4px;
221
+ font-size: 12px;
222
+ white-space: nowrap;
223
+ z-index: 100;
224
+ border: 1px solid #334155;
225
+ }
226
+
227
+ .quantum-badge {
228
+ animation: pulse-slow 3s infinite;
229
+ }
230
+
231
+ .quantum-ai-voice {
232
+ position: fixed;
233
+ bottom: 90px;
234
+ right: 20px;
235
+ width: 60px;
236
+ height: 60px;
237
+ border-radius: 50%;
238
+ background: linear-gradient(135deg, #10b981, #14b8a6);
239
+ display: flex;
240
+ align-items: center;
241
+ justify-content: center;
242
+ cursor: pointer;
243
+ z-index: 1000;
244
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
245
+ transition: all 0.3s ease;
246
+ }
247
+
248
+ .quantum-ai-voice:hover {
249
+ transform: scale(1.1);
250
+ }
251
+
252
+ .quantum-ai-voice.listening {
253
+ animation: pulse 1s infinite;
254
+ }
255
  </style>
256
  </head>
257
  <body class="min-h-screen">
 
260
  <i class="fas fa-robot text-white text-2xl"></i>
261
  </div>
262
 
263
+ <!-- Quantum AI Voice Assistant -->
264
+ <div class="quantum-ai-voice" id="aiVoiceAssistant">
265
+ <i class="fas fa-microphone text-white text-2xl"></i>
266
+ </div>
267
+
268
  <!-- Quantum Tools Sidebar (Hidden by default) -->
269
  <div class="fixed inset-y-0 right-0 w-80 bg-quantum-darker shadow-xl transform translate-x-full transition-transform duration-300 z-50 border-l border-slate-800" id="toolsSidebar">
270
  <div class="p-4 h-full flex flex-col">
271
  <div class="flex justify-between items-center mb-6">
272
  <h3 class="text-lg font-bold text-quantum-blue">
273
+ <i class="fas fa-tools mr-2"></i> QUANTUM TOOLS NETWORK
274
  </h3>
275
  <button class="text-slate-400 hover:text-white" id="closeToolsSidebar">
276
  <i class="fas fa-times"></i>
 
278
  </div>
279
 
280
  <div class="flex-1 overflow-y-auto scrollbar-hide">
281
+ <!-- Quantum Network Status -->
282
+ <div class="bg-slate-900 rounded-lg p-4 mb-6 quantum-connection">
283
+ <div class="flex items-center justify-between mb-2">
284
+ <h4 class="font-medium text-quantum-blue flex items-center">
285
+ <i class="fas fa-network-wired mr-2"></i> Quantum Network
286
+ </h4>
287
+ <span class="text-xs px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-400">Connected</span>
288
+ </div>
289
+ <div class="text-xs text-slate-400 mb-3">All tools are interconnected via Quantum Sync</div>
290
+ <div class="space-y-2">
291
+ <div class="flex items-center justify-between">
292
+ <span class="text-sm">Bandwidth</span>
293
+ <div class="w-24 bg-slate-800 rounded-full h-1.5">
294
+ <div class="bg-quantum-blue h-1.5 rounded-full" style="width: 85%"></div>
295
+ </div>
296
+ </div>
297
+ <div class="flex items-center justify-between">
298
+ <span class="text-sm">Latency</span>
299
+ <div class="w-24 bg-slate-800 rounded-full h-1.5">
300
+ <div class="bg-quantum-green h-1.5 rounded-full" style="width: 95%"></div>
301
+ </div>
302
+ </div>
303
+ <div class="flex items-center justify-between">
304
+ <span class="text-sm">Security</span>
305
+ <div class="w-24 bg-slate-800 rounded-full h-1.5">
306
+ <div class="bg-quantum-purple h-1.5 rounded-full" style="width: 100%"></div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Quick Access Tools -->
313
+ <h4 class="text-sm font-semibold text-slate-300 mb-3 flex items-center">
314
+ <i class="fas fa-bolt mr-2 text-quantum-yellow"></i> QUICK ACCESS
315
+ </h4>
316
+
317
+ <div class="grid grid-cols-2 gap-3 mb-6">
318
+ <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-purple quantum-tooltip" data-tooltip="Prompt Architect">
319
  <div class="w-10 h-10 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center mb-2">
320
  <i class="fas fa-brain text-quantum-purple"></i>
321
  </div>
322
  <span class="text-xs text-center">Prompt Architect</span>
323
  </div>
324
 
325
+ <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-green quantum-tooltip" data-tooltip="Workflow Builder">
326
  <div class="w-10 h-10 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center mb-2">
327
  <i class="fas fa-project-diagram text-quantum-green"></i>
328
  </div>
329
  <span class="text-xs text-center">Workflow Builder</span>
330
  </div>
331
 
332
+ <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-teal quantum-tooltip" data-tooltip="Data Analyzer">
333
  <div class="w-10 h-10 rounded-full bg-quantum-teal bg-opacity-20 flex items-center justify-center mb-2">
334
  <i class="fas fa-chart-line text-quantum-teal"></i>
335
  </div>
336
  <span class="text-xs text-center">Data Analyzer</span>
337
  </div>
338
 
339
+ <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-pink quantum-tooltip" data-tooltip="AI Agent">
340
  <div class="w-10 h-10 rounded-full bg-quantum-pink bg-opacity-20 flex items-center justify-center mb-2">
341
  <i class="fas fa-robot text-quantum-pink"></i>
342
  </div>
343
  <span class="text-xs text-center">AI Agent</span>
344
  </div>
345
 
346
+ <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-yellow quantum-tooltip" data-tooltip="Idea Generator">
347
  <div class="w-10 h-10 rounded-full bg-quantum-yellow bg-opacity-20 flex items-center justify-center mb-2">
348
  <i class="fas fa-lightbulb text-quantum-yellow"></i>
349
  </div>
350
  <span class="text-xs text-center">Idea Generator</span>
351
  </div>
352
 
353
+ <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-blue quantum-tooltip" data-tooltip="Code Assistant">
354
  <div class="w-10 h-10 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center mb-2">
355
  <i class="fas fa-code text-quantum-blue"></i>
356
  </div>
357
  <span class="text-xs text-center">Code Assistant</span>
358
  </div>
359
+
360
+ <!-- New Tools -->
361
+ <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-orange quantum-tooltip" data-tooltip="Automation Engine">
362
+ <div class="w-10 h-10 rounded-full bg-quantum-orange bg-opacity-20 flex items-center justify-center mb-2">
363
+ <i class="fas fa-cogs text-quantum-orange"></i>
364
+ </div>
365
+ <span class="text-xs text-center">Automation</span>
366
+ </div>
367
+
368
+ <div class="tool-switch bg-slate-800 p-3 rounded-lg flex flex-col items-center justify-center cursor-pointer border border-slate-700 hover:border-quantum-red quantum-tooltip" data-tooltip="Quantum Search">
369
+ <div class="w-10 h-10 rounded-full bg-quantum-red bg-opacity-20 flex items-center justify-center mb-2">
370
+ <i class="fas fa-search text-quantum-red"></i>
371
+ </div>
372
+ <span class="text-xs text-center">Quantum Search</span>
373
+ </div>
374
  </div>
375
 
376
+ <!-- Connected Tools -->
377
+ <div class="mb-6">
378
  <h4 class="text-sm font-semibold text-slate-300 mb-3 flex items-center">
379
  <i class="fas fa-plug mr-2 text-quantum-purple"></i> CONNECTED TOOLS
380
  </h4>
381
 
382
  <div class="space-y-2">
383
+ <div class="flex items-center justify-between bg-slate-800 p-2 rounded-md quantum-connection">
384
  <div class="flex items-center">
385
  <div class="w-6 h-6 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center mr-2">
386
  <i class="fas fa-brain text-xs text-quantum-purple"></i>
387
  </div>
388
  <span class="text-sm">Prompt Architect</span>
389
  </div>
390
+ <div class="flex items-center">
391
+ <span class="text-xs text-slate-400 mr-2">v5.0</span>
392
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
393
+ </div>
394
  </div>
395
 
396
+ <div class="flex items-center justify-between bg-slate-800 p-2 rounded-md quantum-connection">
397
  <div class="flex items-center">
398
  <div class="w-6 h-6 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center mr-2">
399
  <i class="fas fa-project-diagram text-xs text-quantum-green"></i>
400
  </div>
401
  <span class="text-sm">Workflow Builder</span>
402
  </div>
403
+ <div class="flex items-center">
404
+ <span class="text-xs text-slate-400 mr-2">v4.2</span>
405
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="flex items-center justify-between bg-slate-800 p-2 rounded-md quantum-connection">
410
+ <div class="flex items-center">
411
+ <div class="w-6 h-6 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center mr-2">
412
+ <i class="fas fa-code text-xs text-quantum-blue"></i>
413
+ </div>
414
+ <span class="text-sm">Code Assistant</span>
415
+ </div>
416
+ <div class="flex items-center">
417
+ <span class="text-xs text-slate-400 mr-2">v3.9</span>
418
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="flex items-center justify-between bg-slate-800 p-2 rounded-md quantum-connection">
423
+ <div class="flex items-center">
424
+ <div class="w-6 h-6 rounded-full bg-quantum-orange bg-opacity-20 flex items-center justify-center mr-2">
425
+ <i class="fas fa-cogs text-xs text-quantum-orange"></i>
426
+ </div>
427
+ <span class="text-sm">Automation Engine</span>
428
+ </div>
429
+ <div class="flex items-center">
430
+ <span class="text-xs text-slate-400 mr-2">v2.5</span>
431
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <!-- Recent Activity -->
438
+ <div>
439
+ <h4 class="text-sm font-semibold text-slate-300 mb-3 flex items-center">
440
+ <i class="fas fa-history mr-2 text-quantum-teal"></i> RECENT ACTIVITY
441
+ </h4>
442
+
443
+ <div class="space-y-2">
444
+ <div class="bg-slate-800 p-2 rounded-md text-sm">
445
+ <div class="flex justify-between mb-1">
446
+ <span class="text-quantum-purple">Prompt Architect</span>
447
+ <span class="text-xs text-slate-400">2 min ago</span>
448
+ </div>
449
+ <p class="text-xs text-slate-300 truncate">Created "Advanced Sales Funnel" prompt</p>
450
+ </div>
451
+
452
+ <div class="bg-slate-800 p-2 rounded-md text-sm">
453
+ <div class="flex justify-between mb-1">
454
+ <span class="text-quantum-green">Workflow Builder</span>
455
+ <span class="text-xs text-slate-400">15 min ago</span>
456
+ </div>
457
+ <p class="text-xs text-slate-300 truncate">Executed "Content Creation Pipeline"</p>
458
+ </div>
459
+
460
+ <div class="bg-slate-800 p-2 rounded-md text-sm">
461
+ <div class="flex justify-between mb-1">
462
+ <span class="text-quantum-blue">Code Assistant</span>
463
+ <span class="text-xs text-slate-400">1 hour ago</span>
464
+ </div>
465
+ <p class="text-xs text-slate-300 truncate">Generated Python API integration</p>
466
  </div>
467
  </div>
468
  </div>
469
  </div>
470
 
471
  <div class="pt-4 border-t border-slate-800">
472
+ <button class="w-full py-2 rounded-md bg-gradient-to-r from-quantum-purple to-quantum-blue text-white font-medium flex items-center justify-center">
473
+ <i class="fas fa-plus mr-2"></i> Add Tool to Network
474
  </button>
475
  </div>
476
  </div>
 
503
  </div>
504
  <div class="flex items-center justify-between">
505
  <span class="text-sm">Tool Synchronization</span>
506
+ <span class="text-xs px-2 py-1 rounded-full bg-blue-900 text-blue-300">4/8 Connected</span>
507
  </div>
508
  <div class="flex items-center justify-between">
509
  <span class="text-sm">Data Transfer</span>
510
  <span class="text-xs px-2 py-1 rounded-full bg-yellow-900 text-yellow-300">Optimized</span>
511
  </div>
512
+ <div class="flex items-center justify-between">
513
+ <span class="text-sm">Quantum Encryption</span>
514
+ <span class="text-xs px-2 py-1 rounded-full bg-purple-900 text-purple-300">Active</span>
515
+ </div>
516
  </div>
517
  <button class="w-full mt-3 py-1 text-xs rounded-md bg-quantum-purple hover:bg-purple-800">
518
  <i class="fas fa-sync-alt mr-1"></i> Sync All Tools
 
530
  <div class="flex justify-between items-start">
531
  <div>
532
  <h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-quantum-purple to-quantum-green bg-clip-text text-transparent">
533
+ QUANTUM ARCHITECTS™ PRO 3.0
534
  </h1>
535
  <p class="text-lg text-slate-300 mb-4">
536
  Master Prompt Engineering System for Elite-Level AI Interactions
537
  </p>
538
+ <div class="flex items-center space-x-4 text-sm">
539
+ <div class="flex items-center text-quantum-green">
540
+ <i class="fas fa-bolt mr-1"></i>
541
+ <span>HYPER-OPTIMIZED</span>
542
+ </div>
543
+ <div class="flex items-center text-quantum-teal">
544
+ <i class="fas fa-layer-group mr-1"></i>
545
+ <span>8 MODULES</span>
546
+ </div>
547
+ <div class="flex items-center text-quantum-pink">
548
+ <i class="fas fa-cubes mr-1"></i>
549
+ <span>2000+ PROMPTS</span>
550
+ </div>
551
+ <div class="flex items-center text-quantum-blue">
552
+ <i class="fas fa-plug mr-1"></i>
553
+ <span>QUANTUM NETWORK</span>
554
+ </div>
555
+ </div>
556
  </div>
557
  <div class="bg-slate-900 rounded-lg p-3 border border-slate-800">
558
  <div class="flex items-center space-x-2">
 
562
  <div>
563
  <p class="text-xs text-slate-400">Quantum Power</p>
564
  <div class="w-full bg-slate-700 rounded-full h-1.5">
565
+ <div class="bg-gradient-to-r from-quantum-purple to-quantum-green h-1.5 rounded-full" style="width: 92%"></div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ <div class="mt-3 flex items-center space-x-2">
570
+ <div class="w-8 h-8 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center">
571
+ <i class="fas fa-network-wired text-quantum-blue"></i>
572
+ </div>
573
+ <div>
574
+ <p class="text-xs text-slate-400">Network Sync</p>
575
+ <div class="w-full bg-slate-700 rounded-full h-1.5">
576
+ <div class="bg-gradient-to-r from-quantum-blue to-quantum-teal h-1.5 rounded-full" style="width: 85%"></div>
577
  </div>
578
  </div>
579
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
580
  </div>
581
  </div>
582
  </div>
 
618
  <span>AI AUTOMATION</span>
619
  <span class="text-xs bg-slate-700 px-2 py-1 rounded-full">NEW</span>
620
  </div>
621
+ <div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800">
622
+ <span>QUANTUM SEARCH</span>
623
+ <span class="text-xs bg-slate-700 px-2 py-1 rounded-full">BETA</span>
624
+ </div>
625
+ <div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800">
626
+ <span>DATA COSMOS</span>
627
+ <span class="text-xs bg-slate-700 px-2 py-1 rounded-full">BETA</span>
628
+ </div>
629
  </div>
630
 
631
  <h3 class="font-bold text-lg mb-4 text-quantum-green flex items-center">
 
681
  <i class="fas fa-project-diagram mr-2 text-quantum-yellow"></i>
682
  <span>Automated Workflows</span>
683
  </div>
684
+ <div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center">
685
+ <i class="fas fa-search mr-2 text-quantum-red"></i>
686
+ <span>Quantum Search</span>
687
+ </div>
688
+ <div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center">
689
+ <i class="fas fa-database mr-2 text-quantum-orange"></i>
690
+ <span>Data Cosmos</span>
691
+ </div>
692
  </div>
693
  </div>
694
 
 
726
  <div class="flex mt-1 space-x-1">
727
  <span class="text-xs px-1 py-0.5 rounded bg-quantum-teal bg-opacity-20 text-quantum-teal">Blog</span>
728
  <span class="text-xs px-1 py-0.5 rounded bg-quantum-pink bg-opacity-20 text-quantum-pink">Social</span>
729
+ <span class="text-xs px-1 py-0.5 rounded bg-quantum-blue bg-opacity-20 text-quantum-blue">AI</span>
730
  </div>
731
  </div>
732
  <i class="fas fa-play text-quantum-blue"></i>
 
740
  <div class="flex mt-1 space-x-1">
741
  <span class="text-xs px-1 py-0.5 rounded bg-quantum-purple bg-opacity-20 text-quantum-purple">Email</span>
742
  <span class="text-xs px-1 py-0.5 rounded bg-quantum-green bg-opacity-20 text-quantum-green">SMS</span>
743
+ <span class="text-xs px-1 py-0.5 rounded bg-quantum-yellow bg-opacity-20 text-quantum-yellow">Ads</span>
744
+ </div>
745
+ </div>
746
+ <i class="fas fa-play text-quantum-blue"></i>
747
+ </div>
748
+ </div>
749
+
750
+ <div class="bg-slate-800 p-3 rounded-md cursor-pointer hover:bg-slate-700 transition-colors">
751
+ <div class="flex items-center justify-between">
752
+ <div>
753
+ <p class="text-sm font-medium">Product Launch System</p>
754
+ <div class="flex mt-1 space-x-1">
755
+ <span class="text-xs px-1 py-0.5 rounded bg-quantum-red bg-opacity-20 text-quantum-red">Offer</span>
756
+ <span class="text-xs px-1 py-0.5 rounded bg-quantum-orange bg-opacity-20 text-quantum-orange">Copy</span>
757
+ <span class="text-xs px-1 py-0.5 rounded bg-quantum-pink bg-opacity-20 text-quantum-pink">Funnel</span>
758
  </div>
759
  </div>
760
  <i class="fas fa-play text-quantum-blue"></i>
 
770
 
771
  <!-- Main Content Area -->
772
  <div class="lg:col-span-3 space-y-6">
773
+ <!-- Quantum Command Center -->
774
+ <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
775
+ <div class="flex items-center justify-between mb-4">
776
+ <h2 class="text-xl font-bold text-quantum-blue flex items-center">
777
+ <i class="fas fa-terminal mr-2"></i> QUANTUM COMMAND CENTER
778
+ </h2>
779
+ <div class="flex items-center space-x-2">
780
+ <span class="text-xs px-2 py-1 rounded-full bg-quantum-purple bg-opacity-20 text-quantum-purple">BETA</span>
781
+ <button class="text-slate-400 hover:text-white">
782
+ <i class="fas fa-cog"></i>
783
+ </button>
784
+ </div>
785
+ </div>
786
+
787
+ <div class="bg-slate-900 rounded-lg p-4 mb-4">
788
+ <div class="flex items-center space-x-2 mb-3">
789
+ <div class="w-8 h-8 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center">
790
+ <i class="fas fa-terminal text-quantum-blue"></i>
791
+ </div>
792
+ <div>
793
+ <h4 class="font-medium">Unified Command Interface</h4>
794
+ <p class="text-xs text-slate-400">Control all Quantum tools from one place</p>
795
+ </div>
796
+ </div>
797
+
798
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
799
+ <div class="bg-slate-800 p-3 rounded-md">
800
+ <div class="flex items-center space-x-2 mb-2">
801
+ <div class="w-6 h-6 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center">
802
+ <i class="fas fa-brain text-xs text-quantum-purple"></i>
803
+ </div>
804
+ <span class="text-sm">Prompt Architect</span>
805
+ </div>
806
+ <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm" placeholder="Enter prompt command...">
807
+ </div>
808
+
809
+ <div class="bg-slate-800 p-3 rounded-md">
810
+ <div class="flex items-center space-x-2 mb-2">
811
+ <div class="w-6 h-6 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center">
812
+ <i class="fas fa-project-diagram text-xs text-quantum-green"></i>
813
+ </div>
814
+ <span class="text-sm">Workflow Builder</span>
815
+ </div>
816
+ <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm" placeholder="Enter workflow command...">
817
+ </div>
818
+
819
+ <div class="bg-slate-800 p-3 rounded-md">
820
+ <div class="flex items-center space-x-2 mb-2">
821
+ <div class="w-6 h-6 rounded-full bg-quantum-orange bg-opacity-20 flex items-center justify-center">
822
+ <i class="fas fa-cogs text-xs text-quantum-orange"></i>
823
+ </div>
824
+ <span class="text-sm">Automation</span>
825
+ </div>
826
+ <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm" placeholder="Enter automation command...">
827
+ </div>
828
+ </div>
829
+
830
+ <div class="mt-3 flex justify-between">
831
+ <button class="px-3 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white">
832
+ <i class="fas fa-history mr-1"></i> History
833
+ </button>
834
+ <button class="px-3 py-1 text-xs rounded-md bg-gradient-to-r from-quantum-blue to-quantum-purple text-white">
835
+ <i class="fas fa-bolt mr-1"></i> Execute All
836
+ </button>
837
+ </div>
838
+ </div>
839
+
840
+ <div class="flex items-center justify-between">
841
+ <div class="flex items-center space-x-2 text-sm text-slate-400">
842
+ <i class="fas fa-info-circle"></i>
843
+ <span>Voice Command: <span class="text-quantum-green">Enabled</span></span>
844
+ </div>
845
+ <button class="px-4 py-2 rounded-md bg-gradient-to-r from-quantum-purple to-quantum-blue hover:from-purple-700 hover:to-blue-700 text-white font-medium">
846
+ <i class="fas fa-network-wired mr-2"></i> Connect All Tools
847
+ </button>
848
+ </div>
849
+ </div>
850
+
851
+ <!-- Prompt Architect Section -->
852
  <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
853
  <div class="flex items-center justify-between mb-6">
854
  <h2 class="text-2xl font-bold text-quantum-purple">
 
919
  </div>
920
  </div>
921
 
922
+ <!-- Prompt Output Section -->
923
  <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
924
  <div class="flex items-center justify-between mb-4">
925
  <h3 class="text-lg font-bold text-quantum-green">
 
1004
  </div>
1005
  </div>
1006
 
1007
+ <!-- Recommended Prompts -->
1008
  <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
1009
  <h3 class="text-lg font-bold text-quantum-teal mb-4">
1010
  <i class="fas fa-star mr-2"></i> RECOMMENDED PROMPTS
 
1020
  <h4 class="font-bold text-white">Copywriting Neuropersuasivo</h4>
1021
  <p class="text-sm text-slate-400 mt-1">Técnicas avanzadas de escritura persuasiva basadas en neurociencia</p>
1022
  <div class="mt-2 flex space-x-1">
1023
+ <span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Marketing</span>
1024
+ <span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Sales</span>
1025
  </div>
1026
  </div>
1027
  </div>
 
1035
  <h4 class="font-bold text-white">Funnels de Conversión</h4>
1036
  <p class="text-sm text-slate-400 mt-1">Estructuras de conversión multidimensionales para alto ROI</p>
1037
  <div class="mt-2 flex space-x-1">
1038
+ <span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Automation</span>
1039
+ <span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Optimization</span>
1040
  </div>
1041
  </div>
1042
  </div>
 
1050
  <h4 class="font-bold text-white">Email Marketing Hiperpersonalizado</h4>
1051
  <p class="text-sm text-slate-400 mt-1">Secuencias de email con personalización avanzada y triggers</p>
1052
  <div class="mt-2 flex space-x-1">
1053
+ <span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Automation</span>
1054
+ <span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Nurturing</span>
1055
  </div>
1056
  </div>
1057
  </div>
 
1065
  <h4 class="font-bold text-white">Pricing Estratégico Avanzado</h4>
1066
  <p class="text-sm text-slate-400 mt-1">Modelos de precios psicológicos para maximizar percepción de valor</p>
1067
  <div class="mt-2 flex space-x-1">
1068
+ <span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Strategy</span>
1069
+ <span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Psychology</span>
1070
  </div>
1071
  </div>
1072
  </div>
 
1081
  </div>
1082
  </div>
1083
 
1084
+ <!-- Workflow Integration Section -->
1085
  <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
1086
  <h3 class="text-lg font-bold text-quantum-yellow mb-4 flex items-center">
1087
  <i class="fas fa-project-diagram mr-2"></i> WORKFLOW INTEGRATION
 
1090
  <div class="bg-slate-900 rounded-lg p-4 mb-4">
1091
  <div class="flex items-center justify-between mb-3">
1092
  <h4 class="font-medium text-quantum-blue">Current Workflow: "Offer Creation Pipeline"</h4>
1093
+ <div class="flex items-center space-x-2">
1094
+ <span class="text-xs px-2 py-1 rounded-full bg-quantum-blue bg-opacity-20 text-quantum-blue">Active</span>
1095
+ <span class="text-xs px-2 py-1 rounded-full bg-quantum-purple bg-opacity-20 text-quantum-purple">Optimized</span>
1096
+ </div>
1097
  </div>
1098
 
1099
  <div class="space-y-4 relative">
 
1148
  </div>
1149
  </div>
1150
  </div>
1151
+
1152
+ <div class="workflow-node relative pl-6">
1153
+ <div class="workflow-connector"></div>
1154
+ <div class="flex items-start">
1155
+ <div class="bg-quantum-orange bg-opacity-20 p-2 rounded-md mr-3">
1156
+ <i class="fas fa-cogs text-quantum-orange"></i>
1157
+ </div>
1158
+ <div>
1159
+ <h5 class="font-medium">Automation Setup</h5>
1160
+ <p class="text-xs text-slate-400 mt-1">Configures all automation triggers</p>
1161
+ </div>
1162
+ </div>
1163
+ </div>
1164
  </div>
1165
  </div>
1166
 
 
1173
  </button>
1174
  </div>
1175
  </div>
1176
+
1177
+ <!-- Quantum AI Agents Section -->
1178
+ <div class="bg-quantum-dark rounded-xl p-6 border border-slate-800">
1179
+ <h3 class="text-lg font-bold text-quantum-pink mb-4 flex items-center">
1180
+ <i class="fas fa-robot mr-2"></i> QUANTUM AI AGENTS
1181
+ </h3>
1182
+
1183
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
1184
+ <div class="bg-slate-900 rounded-lg p-4">
1185
+ <div class="flex items-center space-x-3 mb-3">
1186
+ <div class="w-10 h-10 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center">
1187
+ <i class="fas fa-brain text-quantum-purple"></i>
1188
+ </div>
1189
+ <div>
1190
+ <h4 class="font-medium">Prompt Optimization Agent</h4>
1191
+ <p class="text-xs text-slate-400">Automatically enhances your prompts</p>
1192
+ </div>
1193
+ </div>
1194
+ <div class="flex justify-between items-center">
1195
+ <span class="text-xs text-slate-400">Status: <span class="text-quantum-green">Ready</span></span>
1196
+ <button class="px-3 py-1 text-xs rounded-md bg-quantum-purple hover:bg-purple-800 text-white">
1197
+ <i class="fas fa-play mr-1"></i> Activate
1198
+ </button>
1199
+ </div>
1200
+ </div>
1201
+
1202
+ <div class="bg-slate-900 rounded-lg p-4">
1203
+ <div class="flex items-center space-x-3 mb-3">
1204
+ <div class="w-10 h-10 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center">
1205
+ <i class="fas fa-code text-quantum-blue"></i>
1206
+ </div>
1207
+ <div>
1208
+ <h4 class="font-medium">Code Generation Agent</h4>
1209
+ <p class="text-xs text-slate-400">Creates code from your specifications</p>
1210
+ </div>
1211
+ </div>
1212
+ <div class="flex justify-between items-center">
1213
+ <span class="text-xs text-slate-400">Status: <span class="text-quantum-green">Ready</span></span>
1214
+ <button class="px-3 py-1 text-xs rounded-md bg-quantum-blue hover:bg-blue-800 text-white">
1215
+ <i class="fas fa-play mr-1"></i> Activate
1216
+ </button>
1217
+ </div>
1218
+ </div>
1219
+
1220
+ <div class="bg-slate-900 rounded-lg p-4">
1221
+ <div class="flex items-center space-x-3 mb-3">
1222
+ <div class="w-10 h-10 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center">
1223
+ <i class="fas fa-project-diagram text-quantum-green"></i>
1224
+ </div>
1225
+ <div>
1226
+ <h4 class="font-medium">Workflow Automation Agent</h4>
1227
+ <p class="text-xs text-slate-400">Automates complex workflows</p>
1228
+ </div>
1229
+ </div>
1230
+ <div class="flex justify-between items-center">
1231
+ <span class="text-xs text-slate-400">Status: <span class="text-quantum-yellow">Learning</span></span>
1232
+ <button class="px-3 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white">
1233
+ <i class="fas fa-pause mr-1"></i> Pause
1234
+ </button>
1235
+ </div>
1236
+ </div>
1237
+
1238
+ <div class="bg-slate-900 rounded-lg p-4">
1239
+ <div class="flex items-center space-x-3 mb-3">
1240
+ <div class="w-10 h-10 rounded-full bg-quantum-red bg-opacity-20 flex items-center justify-center">
1241
+ <i class="fas fa-search text-quantum-red"></i>
1242
+ </div>
1243
+ <div>
1244
+ <h4 class="font-medium">Quantum Search Agent</h4>
1245
+ <p class="text-xs text-slate-400">Finds information across all tools</p>
1246
+ </div>
1247
+ </div>
1248
+ <div class="flex justify-between items-center">
1249
+ <span class="text-xs
 
 
1250
  </html>