|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>QUANTUM ARCHITECTS™ | QUANTUM BOX AI PRO TOOLS 5.0</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<script> |
|
tailwind.config = { |
|
theme: { |
|
extend: { |
|
colors: { |
|
quantum: { |
|
purple: '#6d28d9', |
|
dark: '#0f172a', |
|
darker: '#020617', |
|
green: '#10b981', |
|
teal: '#14b8a6', |
|
pink: '#ec4899', |
|
blue: '#3b82f6', |
|
yellow: '#f59e0b', |
|
orange: '#f97316', |
|
red: '#ef4444' |
|
} |
|
}, |
|
fontFamily: { |
|
sans: ['Inter', 'sans-serif'], |
|
mono: ['Fira Code', 'monospace'] |
|
}, |
|
animation: { |
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
'bounce-slow': 'bounce 2s infinite', |
|
'spin-slow': 'spin 3s linear infinite' |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap'); |
|
|
|
body { |
|
background-color: #020617; |
|
color: #f8fafc; |
|
font-family: 'Inter', sans-serif; |
|
} |
|
|
|
.gradient-border { |
|
position: relative; |
|
border-radius: 0.5rem; |
|
} |
|
|
|
.gradient-border::before { |
|
content: ''; |
|
position: absolute; |
|
top: -2px; |
|
left: -2px; |
|
right: -2px; |
|
bottom: -2px; |
|
z-index: -1; |
|
border-radius: 0.6rem; |
|
background: linear-gradient(45deg, |
|
#6d28d9, |
|
#10b981, |
|
#ec4899, |
|
#14b8a6); |
|
background-size: 300% 300%; |
|
animation: gradient 8s ease infinite; |
|
} |
|
|
|
@keyframes gradient { |
|
0% { background-position: 0% 50%; } |
|
50% { background-position: 100% 50%; } |
|
100% { background-position: 0% 50%; } |
|
} |
|
|
|
.prompt-card:hover { |
|
transform: translateY(-4px); |
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.module-tab.active { |
|
border-bottom: 3px solid #6d28d9; |
|
color: #6d28d9; |
|
} |
|
|
|
textarea { |
|
background-color: #1e293b; |
|
color: #f8fafc; |
|
border: 1px solid #334155; |
|
} |
|
|
|
textarea:focus { |
|
outline: none; |
|
border-color: #6d28d9; |
|
box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.3); |
|
} |
|
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
display: none; |
|
} |
|
|
|
.scrollbar-hide { |
|
-ms-overflow-style: none; |
|
scrollbar-width: none; |
|
} |
|
|
|
.quantum-pulse { |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } |
|
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } |
|
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } |
|
} |
|
|
|
.tool-switch { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.tool-switch:hover { |
|
transform: scale(1.05); |
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); |
|
} |
|
|
|
.ai-assistant-bubble { |
|
position: fixed; |
|
bottom: 20px; |
|
right: 20px; |
|
width: 60px; |
|
height: 60px; |
|
border-radius: 50%; |
|
background: linear-gradient(135deg, #6d28d9, #3b82f6); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
z-index: 1000; |
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.ai-assistant-bubble:hover { |
|
transform: scale(1.1); |
|
} |
|
|
|
.workflow-node { |
|
border-left: 3px solid #6d28d9; |
|
padding-left: 10px; |
|
margin-bottom: 15px; |
|
} |
|
|
|
.workflow-connector { |
|
position: absolute; |
|
left: -15px; |
|
top: 20px; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #6d28d9; |
|
} |
|
|
|
.quantum-shimmer { |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.quantum-shimmer::after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: -100%; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); |
|
animation: shimmer 2s infinite; |
|
} |
|
|
|
@keyframes shimmer { |
|
100% { |
|
left: 100%; |
|
} |
|
} |
|
|
|
.quantum-connection { |
|
position: relative; |
|
} |
|
|
|
.quantum-connection::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: radial-gradient(circle at center, rgba(109, 40, 217, 0.1) 0%, transparent 70%); |
|
z-index: -1; |
|
} |
|
|
|
.quantum-connection:hover::before { |
|
background: radial-gradient(circle at center, rgba(109, 40, 217, 0.3) 0%, transparent 70%); |
|
} |
|
|
|
.quantum-tooltip { |
|
position: relative; |
|
} |
|
|
|
.quantum-tooltip:hover::after { |
|
content: attr(data-tooltip); |
|
position: absolute; |
|
bottom: 100%; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
background-color: #1e293b; |
|
color: white; |
|
padding: 4px 8px; |
|
border-radius: 4px; |
|
font-size: 12px; |
|
white-space: nowrap; |
|
z-index: 100; |
|
border: 1px solid #334155; |
|
} |
|
|
|
.quantum-badge { |
|
animation: pulse-slow 3s infinite; |
|
} |
|
|
|
.quantum-ai-voice { |
|
position: fixed; |
|
bottom: 90px; |
|
right: 20px; |
|
width: 60px; |
|
height: 60px; |
|
border-radius: 50%; |
|
background: linear-gradient(135deg, #10b981, #14b8a6); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
z-index: 1000; |
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.quantum-ai-voice:hover { |
|
transform: scale(1.1); |
|
} |
|
|
|
.quantum-ai-voice.listening { |
|
animation: pulse 1s infinite; |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen"> |
|
|
|
<div class="ai-assistant-bubble quantum-pulse" id="aiAssistant"> |
|
<i class="fas fa-robot text-white text-2xl"></i> |
|
</div> |
|
|
|
|
|
<div class="quantum-ai-voice" id="aiVoiceAssistant"> |
|
<i class="fas fa-microphone text-white text-2xl"></i> |
|
</div> |
|
|
|
|
|
<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"> |
|
<div class="p-4 h-full flex flex-col"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h3 class="text-lg font-bold text-quantum-blue"> |
|
<i class="fas fa-tools mr-2"></i> QUANTUM TOOLS NETWORK |
|
</h3> |
|
<button class="text-slate-400 hover:text-white" id="closeToolsSidebar"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="flex-1 overflow-y-auto scrollbar-hide"> |
|
|
|
<div class="bg-slate-900 rounded-lg p-4 mb-6 quantum-connection"> |
|
<div class="flex items-center justify-between mb-2"> |
|
<h4 class="font-medium text-quantum-blue flex items-center"> |
|
<i class="fas fa-network-wired mr-2"></i> Quantum Network |
|
</h4> |
|
<span class="text-xs px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-400">Connected</span> |
|
</div> |
|
<div class="text-xs text-slate-400 mb-3">All tools are interconnected via Quantum Sync</div> |
|
<div class="space-y-2"> |
|
<div class="flex items-center justify-between"> |
|
<span class="text-sm">Bandwidth</span> |
|
<div class="w-24 bg-slate-800 rounded-full h-1.5"> |
|
<div class="bg-quantum-blue h-1.5 rounded-full" style="width: 85%"></div> |
|
</div> |
|
</div> |
|
<div class="flex items-center justify-between"> |
|
<span class="text-sm">Latency</span> |
|
<div class="w-24 bg-slate-800 rounded-full h-1.5"> |
|
<div class="bg-quantum-green h-1.5 rounded-full" style="width: 95%"></div> |
|
</div> |
|
</div> |
|
<div class="flex items-center justify-between"> |
|
<span class="text-sm">Security</span> |
|
<div class="w-24 bg-slate-800 rounded-full h-1.5"> |
|
<div class="bg-quantum-purple h-1.5 rounded-full" style="width: 100%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<h4 class="text-sm font-semibold text-slate-300 mb-3 flex items-center"> |
|
<i class="fas fa-bolt mr-2 text-quantum-yellow"></i> QUICK ACCESS |
|
</h4> |
|
|
|
<div class="grid grid-cols-2 gap-3 mb-6"> |
|
<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"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center mb-2"> |
|
<i class="fas fa-brain text-quantum-purple"></i> |
|
</div> |
|
<span class="text-xs text-center">Prompt Architect</span> |
|
</div> |
|
|
|
<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"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center mb-2"> |
|
<i class="fas fa-project-diagram text-quantum-green"></i> |
|
</div> |
|
<span class="text-xs text-center">Workflow Builder</span> |
|
</div> |
|
|
|
<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"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-teal bg-opacity-20 flex items-center justify-center mb-2"> |
|
<i class="fas fa-chart-line text-quantum-teal"></i> |
|
</div> |
|
<span class="text-xs text-center">Data Analyzer</span> |
|
</div> |
|
|
|
<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"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-pink bg-opacity-20 flex items-center justify-center mb-2"> |
|
<i class="fas fa-robot text-quantum-pink"></i> |
|
</div> |
|
<span class="text-xs text-center">AI Agent</span> |
|
</div> |
|
|
|
<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"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-yellow bg-opacity-20 flex items-center justify-center mb-2"> |
|
<i class="fas fa-lightbulb text-quantum-yellow"></i> |
|
</div> |
|
<span class="text-xs text-center">Idea Generator</span> |
|
</div> |
|
|
|
<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"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center mb-2"> |
|
<i class="fas fa-code text-quantum-blue"></i> |
|
</div> |
|
<span class="text-xs text-center">Code Assistant</span> |
|
</div> |
|
|
|
|
|
<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"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-orange bg-opacity-20 flex items-center justify-center mb-2"> |
|
<i class="fas fa-cogs text-quantum-orange"></i> |
|
</div> |
|
<span class="text-xs text-center">Automation</span> |
|
</div> |
|
|
|
<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"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-red bg-opacity-20 flex items-center justify-center mb-2"> |
|
<i class="fas fa-search text-quantum-red"></i> |
|
</div> |
|
<span class="text-xs text-center">Quantum Search</span> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
<h4 class="text-sm font-semibold text-slate-300 mb-3 flex items-center"> |
|
<i class="fas fa-plug mr-2 text-quantum-purple"></i> CONNECTED TOOLS |
|
</h4> |
|
|
|
<div class="space-y-2"> |
|
<div class="flex items-center justify-between bg-slate-800 p-2 rounded-md quantum-connection"> |
|
<div class="flex items-center"> |
|
<div class="w-6 h-6 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center mr-2"> |
|
<i class="fas fa-brain text-xs text-quantum-purple"></i> |
|
</div> |
|
<span class="text-sm">Prompt Architect</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<span class="text-xs text-slate-400 mr-2">v5.0</span> |
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-center justify-between bg-slate-800 p-2 rounded-md quantum-connection"> |
|
<div class="flex items-center"> |
|
<div class="w-6 h-6 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center mr-2"> |
|
<i class="fas fa-project-diagram text-xs text-quantum-green"></i> |
|
</div> |
|
<span class="text-sm">Workflow Builder</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<span class="text-xs text-slate-400 mr-2">v4.2</span> |
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-center justify-between bg-slate-800 p-2 rounded-md quantum-connection"> |
|
<div class="flex items-center"> |
|
<div class="w-6 h-6 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center mr-2"> |
|
<i class="fas fa-code text-xs text-quantum-blue"></i> |
|
</div> |
|
<span class="text-sm">Code Assistant</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<span class="text-xs text-slate-400 mr-2">v3.9</span> |
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-center justify-between bg-slate-800 p-2 rounded-md quantum-connection"> |
|
<div class="flex items-center"> |
|
<div class="w-6 h-6 rounded-full bg-quantum-orange bg-opacity-20 flex items-center justify-center mr-2"> |
|
<i class="fas fa-cogs text-xs text-quantum-orange"></i> |
|
</div> |
|
<span class="text-sm">Automation Engine</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<span class="text-xs text-slate-400 mr-2">v2.5</span> |
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h4 class="text-sm font-semibold text-slate-300 mb-3 flex items-center"> |
|
<i class="fas fa-history mr-2 text-quantum-teal"></i> RECENT ACTIVITY |
|
</h4> |
|
|
|
<div class="space-y-2"> |
|
<div class="bg-slate-800 p-2 rounded-md text-sm"> |
|
<div class="flex justify-between mb-1"> |
|
<span class="text-quantum-purple">Prompt Architect</span> |
|
<span class="text-xs text-slate-400">2 min ago</span> |
|
</div> |
|
<p class="text-xs text-slate-300 truncate">Created "Advanced Sales Funnel" prompt</p> |
|
</div> |
|
|
|
<div class="bg-slate-800 p-2 rounded-md text-sm"> |
|
<div class="flex justify-between mb-1"> |
|
<span class="text-quantum-green">Workflow Builder</span> |
|
<span class="text-xs text-slate-400">15 min ago</span> |
|
</div> |
|
<p class="text-xs text-slate-300 truncate">Executed "Content Creation Pipeline"</p> |
|
</div> |
|
|
|
<div class="bg-slate-800 p-2 rounded-md text-sm"> |
|
<div class="flex justify-between mb-1"> |
|
<span class="text-quantum-blue">Code Assistant</span> |
|
<span class="text-xs text-slate-400">1 hour ago</span> |
|
</div> |
|
<p class="text-xs text-slate-300 truncate">Generated Python API integration</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="pt-4 border-t border-slate-800"> |
|
<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"> |
|
<i class="fas fa-plus mr-2"></i> Add Tool to Network |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="container mx-auto px-4 py-8 max-w-7xl"> |
|
|
|
<header class="mb-12"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-quantum-purple to-quantum-green flex items-center justify-center"> |
|
<i class="fas fa-atom text-white text-lg"></i> |
|
</div> |
|
<span class="text-xl font-bold bg-gradient-to-r from-quantum-purple via-quantum-green to-quantum-teal bg-clip-text text-transparent"> |
|
QUANTUM BOX AI PRO TOOLS 5.0 |
|
</span> |
|
</div> |
|
<div class="flex items-center space-x-4"> |
|
<div class="relative group"> |
|
<button class="px-4 py-2 rounded-md bg-quantum-dark border border-quantum-purple hover:bg-slate-900 text-white font-medium transition-colors flex items-center"> |
|
<i class="fas fa-network-wired mr-2"></i>Quantum Network |
|
<span class="ml-2 w-2 h-2 rounded-full bg-green-500"></span> |
|
</button> |
|
<div class="absolute right-0 mt-2 w-72 bg-quantum-dark rounded-lg shadow-xl p-4 hidden group-hover:block z-50 border border-slate-700"> |
|
<h4 class="font-bold text-quantum-purple mb-2">Quantum Network Status</h4> |
|
<div class="space-y-3"> |
|
<div class="flex items-center justify-between"> |
|
<span class="text-sm">Main Connection</span> |
|
<span class="text-xs px-2 py-1 rounded-full bg-green-900 text-green-300">Active</span> |
|
</div> |
|
<div class="flex items-center justify-between"> |
|
<span class="text-sm">Tool Synchronization</span> |
|
<span class="text-xs px-2 py-1 rounded-full bg-blue-900 text-blue-300">4/8 Connected</span> |
|
</div> |
|
<div class="flex items-center justify-between"> |
|
<span class="text-sm">Data Transfer</span> |
|
<span class="text-xs px-2 py-1 rounded-full bg-yellow-900 text-yellow-300">Optimized</span> |
|
</div> |
|
<div class="flex items-center justify-between"> |
|
<span class="text-sm">Quantum Encryption</span> |
|
<span class="text-xs px-2 py-1 rounded-full bg-purple-900 text-purple-300">Active</span> |
|
</div> |
|
</div> |
|
<button class="w-full mt-3 py-1 text-xs rounded-md bg-quantum-purple hover:bg-purple-800"> |
|
<i class="fas fa-sync-alt mr-1"></i> Sync All Tools |
|
</button> |
|
</div> |
|
</div> |
|
<button class="px-4 py-2 rounded-md bg-quantum-purple hover:bg-purple-800 text-white font-medium transition-colors"> |
|
<i class="fas fa-save mr-2"></i>Save Session |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="gradient-border p-1 rounded-lg"> |
|
<div class="bg-quantum-darker p-6 rounded-lg"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-quantum-purple to-quantum-green bg-clip-text text-transparent"> |
|
QUANTUM ARCHITECTS™ PRO 3.0 |
|
</h1> |
|
<p class="text-lg text-slate-300 mb-4"> |
|
Master Prompt Engineering System for Elite-Level AI Interactions |
|
</p> |
|
<div class="flex items-center space-x-4 text-sm"> |
|
<div class="flex items-center text-quantum-green"> |
|
<i class="fas fa-bolt mr-1"></i> |
|
<span>HYPER-OPTIMIZED</span> |
|
</div> |
|
<div class="flex items-center text-quantum-teal"> |
|
<i class="fas fa-layer-group mr-1"></i> |
|
<span>8 MODULES</span> |
|
</div> |
|
<div class="flex items-center text-quantum-pink"> |
|
<i class="fas fa-cubes mr-1"></i> |
|
<span>2000+ PROMPTS</span> |
|
</div> |
|
<div class="flex items-center text-quantum-blue"> |
|
<i class="fas fa-plug mr-1"></i> |
|
<span>QUANTUM NETWORK</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-slate-900 rounded-lg p-3 border border-slate-800"> |
|
<div class="flex items-center space-x-2"> |
|
<div class="w-8 h-8 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-bolt text-quantum-purple"></i> |
|
</div> |
|
<div> |
|
<p class="text-xs text-slate-400">Quantum Power</p> |
|
<div class="w-full bg-slate-700 rounded-full h-1.5"> |
|
<div class="bg-gradient-to-r from-quantum-purple to-quantum-green h-1.5 rounded-full" style="width: 92%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="mt-3 flex items-center space-x-2"> |
|
<div class="w-8 h-8 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-network-wired text-quantum-blue"></i> |
|
</div> |
|
<div> |
|
<p class="text-xs text-slate-400">Network Sync</p> |
|
<div class="w-full bg-slate-700 rounded-full h-1.5"> |
|
<div class="bg-gradient-to-r from-quantum-blue to-quantum-teal h-1.5 rounded-full" style="width: 85%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main> |
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> |
|
|
|
<div class="lg:col-span-1"> |
|
<div class="bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<h3 class="font-bold text-lg mb-4 text-quantum-purple flex items-center"> |
|
<i class="fas fa-sitemap mr-2"></i> MODULE NAVIGATOR |
|
</h3> |
|
|
|
<div class="space-y-1 mb-6"> |
|
<div class="module-tab active px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between"> |
|
<span>HYPER-REVENUE</span> |
|
<span class="text-xs bg-quantum-purple px-2 py-1 rounded-full">250</span> |
|
</div> |
|
<div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800"> |
|
<span>CONTENT INTELLIGENCE</span> |
|
<span class="text-xs bg-slate-700 px-2 py-1 rounded-full">250</span> |
|
</div> |
|
<div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800"> |
|
<span>BUSINESS TRANSFORMATION</span> |
|
<span class="text-xs bg-slate-700 px-2 py-1 rounded-full">250</span> |
|
</div> |
|
<div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800"> |
|
<span>STRATEGIC ADVANTAGE</span> |
|
<span class="text-xs bg-slate-700 px-2 py-1 rounded-full">250</span> |
|
</div> |
|
<div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800"> |
|
<span>QUANTUM WORKFLOWS</span> |
|
<span class="text-xs bg-slate-700 px-2 py-1 rounded-full">NEW</span> |
|
</div> |
|
<div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800"> |
|
<span>AI AUTOMATION</span> |
|
<span class="text-xs bg-slate-700 px-2 py-1 rounded-full">NEW</span> |
|
</div> |
|
<div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800"> |
|
<span>QUANTUM SEARCH</span> |
|
<span class="text-xs bg-slate-700 px-2 py-1 rounded-full">BETA</span> |
|
</div> |
|
<div class="module-tab px-3 py-2 rounded-md cursor-pointer font-medium flex items-center justify-between hover:bg-slate-800"> |
|
<span>DATA COSMOS</span> |
|
<span class="text-xs bg-slate-700 px-2 py-1 rounded-full">BETA</span> |
|
</div> |
|
</div> |
|
|
|
<h3 class="font-bold text-lg mb-4 text-quantum-green flex items-center"> |
|
<i class="fas fa-tags mr-2"></i> CATEGORIES |
|
</h3> |
|
|
|
<div class="space-y-2 max-h-96 overflow-y-auto scrollbar-hide"> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-comment-dollar mr-2 text-quantum-purple"></i> |
|
<span>Copywriting Neuropersuasivo</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-cube mr-2 text-quantum-green"></i> |
|
<span>Arquitectura de Ofertas</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-envelope mr-2 text-quantum-teal"></i> |
|
<span>Email Marketing</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-funnel-dollar mr-2 text-quantum-pink"></i> |
|
<span>Funnels de Conversión</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-scroll mr-2 text-quantum-purple"></i> |
|
<span>Scripts de Ventas</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-tag mr-2 text-quantum-green"></i> |
|
<span>Pricing Estratégico</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-blog mr-2 text-quantum-teal"></i> |
|
<span>Marketing de Contenido</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-ad mr-2 text-quantum-pink"></i> |
|
<span>Campañas Publicitarias</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-chart-line mr-2 text-quantum-purple"></i> |
|
<span>Optimización de Conversión</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-users mr-2 text-quantum-green"></i> |
|
<span>Marketing de Afiliados</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-robot mr-2 text-quantum-blue"></i> |
|
<span>AI Agents</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-project-diagram mr-2 text-quantum-yellow"></i> |
|
<span>Automated Workflows</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-search mr-2 text-quantum-red"></i> |
|
<span>Quantum Search</span> |
|
</div> |
|
<div class="category-tag px-3 py-2 bg-slate-800 rounded-md cursor-pointer hover:bg-slate-700 flex items-center"> |
|
<i class="fas fa-database mr-2 text-quantum-orange"></i> |
|
<span>Data Cosmos</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<h3 class="font-bold text-lg mb-4 text-quantum-teal flex items-center"> |
|
<i class="fas fa-history mr-2"></i> RECENT PROMPTS |
|
</h3> |
|
|
|
<div class="space-y-3"> |
|
<div class="bg-slate-800 p-3 rounded-md border-l-4 border-quantum-purple"> |
|
<p class="text-sm font-medium truncate">Arquitecto de Ofertas Irresistibles 5.0</p> |
|
<p class="text-xs text-slate-400">2 hours ago</p> |
|
</div> |
|
<div class="bg-slate-800 p-3 rounded-md border-l-4 border-quantum-green"> |
|
<p class="text-sm font-medium truncate">Copywriting Neuropersuasivo para Emails</p> |
|
<p class="text-xs text-slate-400">5 hours ago</p> |
|
</div> |
|
<div class="bg-slate-800 p-3 rounded-md border-l-4 border-quantum-teal"> |
|
<p class="text-sm font-medium truncate">Funnel de Conversión Multidimensional</p> |
|
<p class="text-xs text-slate-400">Yesterday</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<h3 class="font-bold text-lg mb-4 text-quantum-blue flex items-center"> |
|
<i class="fas fa-project-diagram mr-2"></i> QUICK WORKFLOWS |
|
</h3> |
|
|
|
<div class="space-y-3"> |
|
<div class="bg-slate-800 p-3 rounded-md cursor-pointer hover:bg-slate-700 transition-colors"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-sm font-medium">Content Creation Pipeline</p> |
|
<div class="flex mt-1 space-x-1"> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-teal bg-opacity-20 text-quantum-teal">Blog</span> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-pink bg-opacity-20 text-quantum-pink">Social</span> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-blue bg-opacity-20 text-quantum-blue">AI</span> |
|
</div> |
|
</div> |
|
<i class="fas fa-play text-quantum-blue"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-slate-800 p-3 rounded-md cursor-pointer hover:bg-slate-700 transition-colors"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-sm font-medium">Lead Nurturing Sequence</p> |
|
<div class="flex mt-1 space-x-1"> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-purple bg-opacity-20 text-quantum-purple">Email</span> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-green bg-opacity-20 text-quantum-green">SMS</span> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-yellow bg-opacity-20 text-quantum-yellow">Ads</span> |
|
</div> |
|
</div> |
|
<i class="fas fa-play text-quantum-blue"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-slate-800 p-3 rounded-md cursor-pointer hover:bg-slate-700 transition-colors"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-sm font-medium">Product Launch System</p> |
|
<div class="flex mt-1 space-x-1"> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-red bg-opacity-20 text-quantum-red">Offer</span> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-orange bg-opacity-20 text-quantum-orange">Copy</span> |
|
<span class="text-xs px-1 py-0.5 rounded bg-quantum-pink bg-opacity-20 text-quantum-pink">Funnel</span> |
|
</div> |
|
</div> |
|
<i class="fas fa-play text-quantum-blue"></i> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<button class="w-full mt-3 py-2 text-sm rounded-md bg-slate-800 hover:bg-slate-700 border border-dashed border-slate-600 text-slate-400"> |
|
<i class="fas fa-plus mr-1"></i> New Workflow |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="lg:col-span-3 space-y-6"> |
|
|
|
<div class="bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<h2 class="text-xl font-bold text-quantum-blue flex items-center"> |
|
<i class="fas fa-terminal mr-2"></i> QUANTUM COMMAND CENTER |
|
</h2> |
|
<div class="flex items-center space-x-2"> |
|
<span class="text-xs px-2 py-1 rounded-full bg-quantum-purple bg-opacity-20 text-quantum-purple">BETA</span> |
|
<button class="text-slate-400 hover:text-white"> |
|
<i class="fas fa-cog"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-slate-900 rounded-lg p-4 mb-4"> |
|
<div class="flex items-center space-x-2 mb-3"> |
|
<div class="w-8 h-8 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-terminal text-quantum-blue"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Unified Command Interface</h4> |
|
<p class="text-xs text-slate-400">Control all Quantum tools from one place</p> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3"> |
|
<div class="bg-slate-800 p-3 rounded-md"> |
|
<div class="flex items-center space-x-2 mb-2"> |
|
<div class="w-6 h-6 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-brain text-xs text-quantum-purple"></i> |
|
</div> |
|
<span class="text-sm">Prompt Architect</span> |
|
</div> |
|
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm" placeholder="Enter prompt command..."> |
|
</div> |
|
|
|
<div class="bg-slate-800 p-3 rounded-md"> |
|
<div class="flex items-center space-x-2 mb-2"> |
|
<div class="w-6 h-6 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-project-diagram text-xs text-quantum-green"></i> |
|
</div> |
|
<span class="text-sm">Workflow Builder</span> |
|
</div> |
|
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm" placeholder="Enter workflow command..."> |
|
</div> |
|
|
|
<div class="bg-slate-800 p-3 rounded-md"> |
|
<div class="flex items-center space-x-2 mb-2"> |
|
<div class="w-6 h-6 rounded-full bg-quantum-orange bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-cogs text-xs text-quantum-orange"></i> |
|
</div> |
|
<span class="text-sm">Automation</span> |
|
</div> |
|
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm" placeholder="Enter automation command..."> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-3 flex justify-between"> |
|
<button class="px-3 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white"> |
|
<i class="fas fa-history mr-1"></i> History |
|
</button> |
|
<button class="px-3 py-1 text-xs rounded-md bg-gradient-to-r from-quantum-blue to-quantum-purple text-white"> |
|
<i class="fas fa-bolt mr-1"></i> Execute All |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center space-x-2 text-sm text-slate-400"> |
|
<i class="fas fa-info-circle"></i> |
|
<span>Voice Command: <span class="text-quantum-green">Enabled</span></span> |
|
</div> |
|
<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"> |
|
<i class="fas fa-network-wired mr-2"></i> Connect All Tools |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<h2 class="text-2xl font-bold text-quantum-purple"> |
|
<i class="fas fa-cube mr-2"></i> Arquitectura de Ofertas Irresistibles |
|
</h2> |
|
<div class="flex space-x-2"> |
|
<div class="relative group"> |
|
<button class="px-3 py-1 rounded-md bg-quantum-purple hover:bg-purple-800 text-white text-sm flex items-center"> |
|
<i class="fas fa-bolt mr-1"></i> Generate |
|
<i class="fas fa-caret-down ml-1 text-xs"></i> |
|
</button> |
|
<div class="absolute right-0 mt-1 w-48 bg-quantum-dark rounded-md shadow-lg z-50 border border-slate-700 hidden group-hover:block"> |
|
<div class="py-1"> |
|
<a href="#" class="block px-4 py-2 text-sm text-slate-300 hover:bg-slate-800">Standard Version</a> |
|
<a href="#" class="block px-4 py-2 text-sm text-slate-300 hover:bg-slate-800">Advanced Version</a> |
|
<a href="#" class="block px-4 py-2 text-sm text-slate-300 hover:bg-slate-800">Quantum Version</a> |
|
</div> |
|
</div> |
|
</div> |
|
<button class="px-3 py-1 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white text-sm"> |
|
<i class="fas fa-ellipsis-h"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
<div> |
|
<label class="block text-sm font-medium text-slate-300 mb-1">Product/Service</label> |
|
<input type="text" class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-quantum-purple" placeholder="e.g. Online Course, SaaS Product"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-slate-300 mb-1">Target Audience</label> |
|
<input type="text" class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-quantum-purple" placeholder="e.g. Entrepreneurs, Marketers"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-slate-300 mb-1">Price Point ($)</label> |
|
<input type="number" class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-quantum-purple" placeholder="e.g. 997"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-slate-300 mb-1">Guarantee Period</label> |
|
<select class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-quantum-purple"> |
|
<option>30-day</option> |
|
<option>60-day</option> |
|
<option>90-day</option> |
|
<option>1-year</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-6"> |
|
<label class="block text-sm font-medium text-slate-300 mb-1">Additional Parameters</label> |
|
<textarea rows="3" class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-quantum-purple" placeholder="Any specific requirements or constraints..."></textarea> |
|
</div> |
|
|
|
<div class="flex items-center justify-between"> |
|
<div class="flex items-center space-x-2 text-sm text-slate-400"> |
|
<i class="fas fa-info-circle"></i> |
|
<span>Prompt Complexity: <span class="text-quantum-green">Advanced</span></span> |
|
</div> |
|
<div class="flex space-x-2"> |
|
<button class="px-3 py-2 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white font-medium"> |
|
<i class="fas fa-share-alt mr-1"></i> Share |
|
</button> |
|
<button class="px-4 py-2 rounded-md bg-gradient-to-r from-quantum-purple to-quantum-green hover:from-purple-700 hover:to-emerald-600 text-white font-medium transition-all"> |
|
<i class="fas fa-magic mr-2"></i> Architect Quantum Prompt |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<h3 class="text-lg font-bold text-quantum-green"> |
|
<i class="fas fa-code mr-2"></i> PROMPT OUTPUT |
|
</h3> |
|
<div class="flex space-x-2"> |
|
<button class="px-3 py-1 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white text-sm"> |
|
<i class="fas fa-copy mr-1"></i> Copy |
|
</button> |
|
<button class="px-3 py-1 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white text-sm"> |
|
<i class="fas fa-download mr-1"></i> Export |
|
</button> |
|
<button class="px-3 py-1 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white text-sm"> |
|
<i class="fas fa-code-branch mr-1"></i> Fork |
|
</button> |
|
<button class="px-3 py-1 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white text-sm"> |
|
<i class="fas fa-robot mr-1"></i> Run Agent |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-slate-900 rounded-lg p-4 font-mono text-sm overflow-x-auto"> |
|
<pre class="text-slate-300"> |
|
# PROMPT QUANTUM: ARQUITECTO DE OFERTAS IRRESISTIBLES 5.0 |
|
|
|
## DEFINICIÓN DE ROL AVANZADO |
|
Asume el rol de OFFER ARCHITECT PRIME™, un estratega de ofertas con 25+ años de experiencia especializado en: |
|
* Ingeniería neuropsicológica de paquetes de valor percibido 10-20X |
|
* Estructuración de ofertas con ratio de conversión 3-7X superior al estándar |
|
* Diseño de sistemas escalonados con maximización de AOV y LTV |
|
* Creación de garantías de riesgo inverso con activación de sesgo de pérdida |
|
|
|
## CONTEXTO OPERATIVO 2025 |
|
Incorpora estos factores críticos en tu arquitectura: |
|
* Saturación de ofertas convencionales que genera fatiga decisional |
|
* Hipersensibilidad a relación valor/precio con evaluación instantánea |
|
* Necesidad de diferenciación percibida inmediata (<3 segundos) |
|
* Mayor escrutinio y escepticismo hacia promesas de valor |
|
|
|
## ENTREGABLE ESTRUCTURADO |
|
Desarrolla una arquitectura de oferta completa que incluya: |
|
|
|
1. ESTRUCTURA CENTRAL DE OFERTA |
|
* Título de oferta con alto impacto perceptual (12-15 palabras máximo) |
|
* Promesa principal cuantificable y timeline específico |
|
* Descripción de transformación con contraste antes/después |
|
* Posicionamiento diferencial con 3-5 elementos únicos |
|
|
|
2. INGENIERÍA DE VALOR PERCIBIDO |
|
* Componentes principales (3-5) con valoración individual |
|
* Bonos estratégicos (2-4) con propósito psicológico específico |
|
* Elementos de escasez auténtica (tiempo/cantidad) con justificación |
|
* Sistema de garantía con inversión de riesgo |
|
|
|
3. ESTRUCTURA DE PRECIO OPTIMIZADA |
|
* Opciones de precio (1-3) con anclas psicológicas |
|
* Sistema de descuento estratégico con justificación |
|
* Opción de pago fraccionado optimizada |
|
* Comparativa de valor/inversión con ratio mínimo 10X |
|
|
|
## PARÁMETROS DE PERSONALIZACIÓN |
|
[PRODUCTO]: [Insert Product/Service Here] |
|
[AUDIENCIA]: [Insert Target Audience Here] |
|
[PRECIO]: [Insert Price Point Here] |
|
[GARANTÍA]: [Insert Guarantee Period Here] |
|
[ESCASEZ]: [Insert Authentic Scarcity Elements Here]</pre> |
|
</div> |
|
|
|
<div class="mt-4 flex justify-between items-center"> |
|
<div class="flex items-center space-x-2 text-sm text-slate-400"> |
|
<i class="fas fa-database"></i> |
|
<span>Prompt ID: QBP-2024-05-28-001</span> |
|
</div> |
|
<div class="flex space-x-2"> |
|
<button class="px-3 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white"> |
|
<i class="fas fa-link mr-1"></i> Connect to Workflow |
|
</button> |
|
<button class="px-3 py-1 text-xs rounded-md bg-quantum-blue hover:bg-blue-700 text-white"> |
|
<i class="fas fa-rocket mr-1"></i> Execute in Agent |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<h3 class="text-lg font-bold text-quantum-teal mb-4"> |
|
<i class="fas fa-star mr-2"></i> RECOMMENDED PROMPTS |
|
</h3> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="prompt-card bg-slate-800 hover:bg-slate-700 rounded-lg p-4 border border-slate-700 transition-all cursor-pointer"> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-purple bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-comment-dollar text-quantum-purple"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-white">Copywriting Neuropersuasivo</h4> |
|
<p class="text-sm text-slate-400 mt-1">Técnicas avanzadas de escritura persuasiva basadas en neurociencia</p> |
|
<div class="mt-2 flex space-x-1"> |
|
<span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Marketing</span> |
|
<span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Sales</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="prompt-card bg-slate-800 hover:bg-slate-700 rounded-lg p-4 border border-slate-700 transition-all cursor-pointer"> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-green bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-funnel-dollar text-quantum-green"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-white">Funnels de Conversión</h4> |
|
<p class="text-sm text-slate-400 mt-1">Estructuras de conversión multidimensionales para alto ROI</p> |
|
<div class="mt-2 flex space-x-1"> |
|
<span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Automation</span> |
|
<span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Optimization</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="prompt-card bg-slate-800 hover:bg-slate-700 rounded-lg p-4 border border-slate-700 transition-all cursor-pointer"> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-teal bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-envelope text-quantum-teal"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-white">Email Marketing Hiperpersonalizado</h4> |
|
<p class="text-sm text-slate-400 mt-1">Secuencias de email con personalización avanzada y triggers</p> |
|
<div class="mt-2 flex space-x-1"> |
|
<span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Automation</span> |
|
<span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Nurturing</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="prompt-card bg-slate-800 hover:bg-slate-700 rounded-lg p-4 border border-slate-700 transition-all cursor-pointer"> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-pink bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-tag text-quantum-pink"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-white">Pricing Estratégico Avanzado</h4> |
|
<p class="text-sm text-slate-400 mt-1">Modelos de precios psicológicos para maximizar percepción de valor</p> |
|
<div class="mt-2 flex space-x-1"> |
|
<span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Strategy</span> |
|
<span class="text-xs px-1.5 py-0.5 rounded bg-slate-700">Psychology</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-4 text-center"> |
|
<button class="text-sm text-quantum-blue hover:text-blue-400 flex items-center justify-center mx-auto"> |
|
<span>View All Recommended Prompts</span> |
|
<i class="fas fa-chevron-right ml-1"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<h3 class="text-lg font-bold text-quantum-yellow mb-4 flex items-center"> |
|
<i class="fas fa-project-diagram mr-2"></i> WORKFLOW INTEGRATION |
|
</h3> |
|
|
|
<div class="bg-slate-900 rounded-lg p-4 mb-4"> |
|
<div class="flex items-center justify-between mb-3"> |
|
<h4 class="font-medium text-quantum-blue">Current Workflow: "Offer Creation Pipeline"</h4> |
|
<div class="flex items-center space-x-2"> |
|
<span class="text-xs px-2 py-1 rounded-full bg-quantum-blue bg-opacity-20 text-quantum-blue">Active</span> |
|
<span class="text-xs px-2 py-1 rounded-full bg-quantum-purple bg-opacity-20 text-quantum-purple">Optimized</span> |
|
</div> |
|
</div> |
|
|
|
<div class="space-y-4 relative"> |
|
<div class="workflow-node relative pl-6"> |
|
<div class="workflow-connector"></div> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-purple bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-brain text-quantum-purple"></i> |
|
</div> |
|
<div> |
|
<h5 class="font-medium">Offer Architect</h5> |
|
<p class="text-xs text-slate-400 mt-1">Current prompt will be used in this step</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="workflow-node relative pl-6"> |
|
<div class="workflow-connector"></div> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-green bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-comment-dollar text-quantum-green"></i> |
|
</div> |
|
<div> |
|
<h5 class="font-medium">Persuasive Copywriting</h5> |
|
<p class="text-xs text-slate-400 mt-1">Auto-generated from offer structure</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="workflow-node relative pl-6"> |
|
<div class="workflow-connector"></div> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-blue bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-ad text-quantum-blue"></i> |
|
</div> |
|
<div> |
|
<h5 class="font-medium">Ad Campaign Generator</h5> |
|
<p class="text-xs text-slate-400 mt-1">Creates matching ad creatives</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="workflow-node relative pl-6"> |
|
<div class="workflow-connector"></div> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-pink bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-funnel-dollar text-quantum-pink"></i> |
|
</div> |
|
<div> |
|
<h5 class="font-medium">Conversion Funnel</h5> |
|
<p class="text-xs text-slate-400 mt-1">Builds optimized sales funnel</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="workflow-node relative pl-6"> |
|
<div class="workflow-connector"></div> |
|
<div class="flex items-start"> |
|
<div class="bg-quantum-orange bg-opacity-20 p-2 rounded-md mr-3"> |
|
<i class="fas fa-cogs text-quantum-orange"></i> |
|
</div> |
|
<div> |
|
<h5 class="font-medium">Automation Setup</h5> |
|
<p class="text-xs text-slate-400 mt-1">Configures all automation triggers</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="flex justify-between"> |
|
<button class="px-4 py-2 rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white font-medium"> |
|
<i class="fas fa-plus mr-2"></i> Add Step |
|
</button> |
|
<button class="px-4 py-2 rounded-md bg-gradient-to-r from-quantum-blue to-quantum-purple hover:from-blue-700 hover:to-purple-700 text-white font-medium"> |
|
<i class="fas fa-play mr-2"></i> Execute Workflow |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-quantum-dark rounded-xl p-6 border border-slate-800"> |
|
<h3 class="text-lg font-bold text-quantum-pink mb-4 flex items-center"> |
|
<i class="fas fa-robot mr-2"></i> QUANTUM AI AGENTS |
|
</h3> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div class="bg-slate-900 rounded-lg p-4"> |
|
<div class="flex items-center space-x-3 mb-3"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-purple bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-brain text-quantum-purple"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Prompt Optimization Agent</h4> |
|
<p class="text-xs text-slate-400">Automatically enhances your prompts</p> |
|
</div> |
|
</div> |
|
<div class="flex justify-between items-center"> |
|
<span class="text-xs text-slate-400">Status: <span class="text-quantum-green">Ready</span></span> |
|
<button class="px-3 py-1 text-xs rounded-md bg-quantum-purple hover:bg-purple-800 text-white"> |
|
<i class="fas fa-play mr-1"></i> Activate |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-slate-900 rounded-lg p-4"> |
|
<div class="flex items-center space-x-3 mb-3"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-blue bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-code text-quantum-blue"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Code Generation Agent</h4> |
|
<p class="text-xs text-slate-400">Creates code from your specifications</p> |
|
</div> |
|
</div> |
|
<div class="flex justify-between items-center"> |
|
<span class="text-xs text-slate-400">Status: <span class="text-quantum-green">Ready</span></span> |
|
<button class="px-3 py-1 text-xs rounded-md bg-quantum-blue hover:bg-blue-800 text-white"> |
|
<i class="fas fa-play mr-1"></i> Activate |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-slate-900 rounded-lg p-4"> |
|
<div class="flex items-center space-x-3 mb-3"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-green bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-project-diagram text-quantum-green"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Workflow Automation Agent</h4> |
|
<p class="text-xs text-slate-400">Automates complex workflows</p> |
|
</div> |
|
</div> |
|
<div class="flex justify-between items-center"> |
|
<span class="text-xs text-slate-400">Status: <span class="text-quantum-yellow">Learning</span></span> |
|
<button class="px-3 py-1 text-xs rounded-md bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white"> |
|
<i class="fas fa-pause mr-1"></i> Pause |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-slate-900 rounded-lg p-4"> |
|
<div class="flex items-center space-x-3 mb-3"> |
|
<div class="w-10 h-10 rounded-full bg-quantum-red bg-opacity-20 flex items-center justify-center"> |
|
<i class="fas fa-search text-quantum-red"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Quantum Search Agent</h4> |
|
<p class="text-xs text-slate-400">Finds information across all tools</p> |
|
</div> |
|
</div> |
|
<div class="flex justify-between items-center"> |
|
<span class="text-xs |
|
</html> |
