Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Box AI Pro Tools 5.0 - Ecosistema Cuántico</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"> | |
| <style> | |
| :root { | |
| --quantum-dark: #0a0a1a; | |
| --quantum-darker: #050510; | |
| --quantum-purple: #7D2AE8; | |
| --quantum-teal: #00FF9D; | |
| --quantum-blue: #2962FF; | |
| --quantum-pink: #FF4081; | |
| --quantum-particle: rgba(125, 42, 232, 0.1); | |
| } | |
| .quantum-gradient { | |
| background: linear-gradient(135deg, var(--quantum-darker), var(--quantum-purple)); | |
| } | |
| .quantum-card { | |
| background: rgba(10, 10, 26, 0.8); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(125, 42, 232, 0.3); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, var(--quantum-particle), transparent 70%); | |
| animation: quantum-particle 15s linear infinite; | |
| z-index: 0; | |
| } | |
| @keyframes quantum-particle { | |
| 0% { transform: translate(0, 0); } | |
| 25% { transform: translate(100%, 0); } | |
| 50% { transform: translate(100%, 100%); } | |
| 75% { transform: translate(0, 100%); } | |
| 100% { transform: translate(0, 0); } | |
| } | |
| .quantum-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(125, 42, 232, 0.4); | |
| border-color: var(--quantum-teal); | |
| } | |
| .quantum-glow { | |
| box-shadow: 0 0 20px rgba(125, 42, 232, 0.6); | |
| } | |
| .quantum-teal-glow { | |
| box-shadow: 0 0 20px rgba(0, 255, 157, 0.6); | |
| } | |
| .quantum-blue-glow { | |
| box-shadow: 0 0 20px rgba(41, 98, 255, 0.6); | |
| } | |
| .quantum-pink-glow { | |
| box-shadow: 0 0 20px rgba(255, 64, 129, 0.6); | |
| } | |
| .quantum-text-glow { | |
| text-shadow: 0 0 8px rgba(125, 42, 232, 0.7); | |
| } | |
| .quantum-teal-text { | |
| text-shadow: 0 0 8px rgba(0, 255, 157, 0.7); | |
| } | |
| .quantum-border { | |
| border: 1px solid rgba(125, 42, 232, 0.5); | |
| } | |
| .quantum-teal-border { | |
| border: 1px solid rgba(0, 255, 157, 0.5); | |
| } | |
| .quantum-blue-border { | |
| border: 1px solid rgba(41, 98, 255, 0.5); | |
| } | |
| .quantum-pink-border { | |
| border: 1px solid rgba(255, 64, 129, 0.5); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| @keyframes quantum-pulse { | |
| 0%, 100% { box-shadow: 0 0 15px rgba(125, 42, 232, 0.5); } | |
| 50% { box-shadow: 0 0 25px rgba(125, 42, 232, 0.8); } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .animate-quantum { | |
| animation: quantum-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| /* Quantum Grid Layout */ | |
| .quantum-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| /* Quantum Connection Lines */ | |
| .quantum-connection { | |
| position: relative; | |
| } | |
| .quantum-connection::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| width: 2px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, transparent, var(--quantum-teal), transparent); | |
| transform: translateX(-50%); | |
| z-index: -1; | |
| } | |
| /* Holographic Effect */ | |
| .quantum-holographic { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-holographic::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(0, 255, 157, 0.1), | |
| rgba(125, 42, 232, 0.1), | |
| rgba(41, 98, 255, 0.1) | |
| ); | |
| transform: rotate(30deg); | |
| animation: hologram 6s linear infinite; | |
| z-index: -1; | |
| } | |
| @keyframes hologram { | |
| 0% { transform: rotate(30deg) translateY(0); } | |
| 100% { transform: rotate(30deg) translateY(-50%); } | |
| } | |
| /* Quantum Particle Background */ | |
| .quantum-particle-bg { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-particle-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at 20% 30%, var(--quantum-particle), transparent 50%), | |
| radial-gradient(circle at 80% 70%, var(--quantum-particle), transparent 50%); | |
| z-index: -1; | |
| } | |
| /* Quantum OS Terminal Effect */ | |
| .quantum-terminal { | |
| background-color: rgba(0, 0, 0, 0.7); | |
| border: 1px solid var(--quantum-teal); | |
| font-family: 'Courier New', monospace; | |
| color: var(--quantum-teal); | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| position: relative; | |
| } | |
| .quantum-terminal::after { | |
| content: '|'; | |
| animation: blink 1s step-end infinite; | |
| position: absolute; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| /* Quantum Tool Icon */ | |
| .quantum-tool-icon { | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| font-size: 1.5rem; | |
| margin-right: 1rem; | |
| flex-shrink: 0; | |
| } | |
| /* Membership Badges */ | |
| .membership-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .membership-basic { | |
| background-color: rgba(41, 98, 255, 0.2); | |
| color: var(--quantum-blue); | |
| border: 1px solid var(--quantum-blue); | |
| } | |
| .membership-pro { | |
| background-color: rgba(125, 42, 232, 0.2); | |
| color: var(--quantum-purple); | |
| border: 1px solid var(--quantum-purple); | |
| } | |
| .membership-enterprise { | |
| background-color: rgba(0, 255, 157, 0.2); | |
| color: var(--quantum-teal); | |
| border: 1px solid var(--quantum-teal); | |
| } | |
| .membership-quantum { | |
| background: linear-gradient(135deg, rgba(125, 42, 232, 0.2), rgba(0, 255, 157, 0.2)); | |
| color: white; | |
| border: 1px solid var(--quantum-teal); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen font-sans"> | |
| <!-- Quantum Command Header --> | |
| <header class="quantum-gradient text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="quantum-glow bg-purple-600 p-2 rounded-lg animate-quantum"> | |
| <i class="fas fa-cube text-2xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold quantum-text-glow">QUANTUM BOX AI PRO TOOLS 5.0</h1> | |
| <p class="text-xs text-purple-300">Ecosistema Cuántico Integrado</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <div class="relative group"> | |
| <button class="flex items-center space-x-1 hover:text-teal-300 transition"> | |
| <span>Herramientas</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="absolute left-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 z-50 opacity-0 group-hover:opacity-100 transition-all duration-300 invisible group-hover:visible"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Prompt Master</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Code Generator</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">AI Automator</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Quantum Analyzer</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Neural Networks</a> | |
| </div> | |
| </div> | |
| <a href="#" class="hover:text-teal-300 transition">Documentación</a> | |
| <a href="#" class="hover:text-teal-300 transition">Soporte</a> | |
| <a href="#" class="hover:text-teal-300 transition">Precios</a> | |
| <div class="flex items-center space-x-2 ml-4"> | |
| <div class="relative"> | |
| <button class="p-1 rounded-full hover:bg-purple-900 transition"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="h-8 w-8 rounded-full bg-teal-600 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="md:hidden text-xl" id="menu-toggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div class="hidden bg-gray-800 shadow-md md:hidden" id="mobile-menu"> | |
| <div class="container mx-auto px-4 py-2 flex flex-col"> | |
| <a href="#" class="py-3 border-b border-gray-700 flex items-center"> | |
| <i class="fas fa-home mr-2 text-teal-400"></i> Inicio | |
| </a> | |
| <a href="#" class="py-3 border-b border-gray-700 flex items-center"> | |
| <i class="fas fa-box-open mr-2 text-purple-400"></i> Herramientas | |
| </a> | |
| <a href="#" class="py-3 border-b border-gray-700 flex items-center"> | |
| <i class="fas fa-book mr-2 text-blue-400"></i> Documentación | |
| </a> | |
| <a href="#" class="py-3 border-b border-gray-700 flex items-center"> | |
| <i class="fas fa-headset mr-2 text-green-400"></i> Soporte | |
| </a> | |
| <a href="#" class="py-3 border-b border-gray-700 flex items-center"> | |
| <i class="fas fa-tags mr-2 text-yellow-400"></i> Precios | |
| </a> | |
| <a href="#" class="py-3 flex items-center"> | |
| <i class="fas fa-cog mr-2 text-gray-400"></i> Configuración | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Quantum Dashboard --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Welcome Section --> | |
| <section class="mb-12"> | |
| <div class="quantum-card rounded-xl p-6 quantum-holographic"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <div class="relative z-10"> | |
| <h2 class="text-2xl font-bold mb-2 quantum-teal-text">Bienvenido al Ecosistema Quantum Box</h2> | |
| <p class="text-teal-200 max-w-3xl">La suite definitiva de herramientas de IA interconectadas que revolucionará tu flujo de trabajo. Controla, automatiza y optimiza todo tu ecosistema digital con inteligencia artificial cuántica.</p> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="membership-badge membership-basic">Basic</span> | |
| <span class="membership-badge membership-pro">Pro</span> | |
| <span class="membership-badge membership-enterprise">Enterprise</span> | |
| <span class="membership-badge membership-quantum">Quantum</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex items-center space-x-3 relative z-10"> | |
| <div class="relative"> | |
| <div class="h-3 w-3 rounded-full bg-green-500 animate-pulse absolute -top-1 -right-1"></div> | |
| <div class="h-3 w-3 rounded-full bg-green-500 animate-pulse absolute -top-1 -right-1"></div> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Quantum Network Active</span> | |
| </div> | |
| <button class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-lg text-sm flex items-center quantum-glow"> | |
| <i class="fas fa-rocket mr-2"></i> Quantum Boost | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Nexus OS Section --> | |
| <section class="mb-12"> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-layer-group text-purple-400 mr-2"></i> Quantum Nexus OS | |
| </h3> | |
| <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">NEW in v5.0</span> | |
| </div> | |
| <p class="text-purple-200 mb-6">El sistema operativo cuántico que unifica todas tus herramientas en un ecosistema coherente. Ejecuta procesos híbridos (clásicos + cuánticos) con total fluidez.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-border"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-random"></i> | |
| </div> | |
| <h4 class="font-medium">Quantum Connect</h4> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-3">Sistema centralizado de APIs inteligentes para comunicación en tiempo real entre herramientas.</p> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Interoperabilidad</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-teal-border"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-teal-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <h4 class="font-medium">Quantum ESG Engine</h4> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-3">Optimiza operaciones para cumplir metas de sostenibilidad con IA predictiva.</p> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">Sostenibilidad</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-blue-border"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h4 class="font-medium">Quantum Trust Mesh</h4> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-3">Red de seguridad autoaprendizaje con encriptación post-cuántica.</p> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Seguridad</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-border"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-terminal"></i> | |
| </div> | |
| <h4 class="font-medium">Quantum Terminal</h4> | |
| </div> | |
| <button class="text-xs bg-purple-900 text-purple-300 px-3 py-1 rounded-full hover:bg-purple-800"> | |
| Abrir Terminal | |
| </button> | |
| </div> | |
| <div class="quantum-terminal mt-2"> | |
| <div class="text-sm"> | |
| <span class="text-purple-400">quantum@nexus:~$</span> status --system<br> | |
| > Quantum Nexus OS v5.0.1 [ACTIVE]<br> | |
| > Connected Tools: 18/18<br> | |
| > Quantum Processing: READY<br> | |
| > Security Mesh: ENABLED<br> | |
| <span class="text-purple-400">quantum@nexus:~$</span> _ | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Tools Ecosystem --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-boxes text-purple-400 mr-2"></i> Ecosistema de Herramientas | |
| </h3> | |
| <div class="flex space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar herramienta..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-purple-600 w-64"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> | |
| </div> | |
| <button class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-sliders-h mr-2"></i> Filtros | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6 flex overflow-x-auto pb-2"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-purple-900 text-white px-4 py-2 rounded-lg text-sm whitespace-nowrap"> | |
| Todas las herramientas | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm whitespace-nowrap"> | |
| <i class="fas fa-comment-dots mr-2 text-purple-400"></i> NLP | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm whitespace-nowrap"> | |
| <i class="fas fa-code mr-2 text-blue-400"></i> Desarrollo | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm whitespace-nowrap"> | |
| <i class="fas fa-project-diagram mr-2 text-teal-400"></i> Automatización | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm whitespace-nowrap"> | |
| <i class="fas fa-database mr-2 text-green-400"></i> Datos | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm whitespace-nowrap"> | |
| <i class="fas fa-brain mr-2 text-pink-400"></i> IA Avanzada | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm whitespace-nowrap"> | |
| <i class="fas fa-cube mr-2 text-yellow-400"></i> Quantum | |
| </button> | |
| </div> | |
| </div> | |
| <div class="quantum-grid"> | |
| <!-- Quantum Prompt Master --> | |
| <div class="quantum-card rounded-xl p-5 hover:quantum-glow cursor-pointer"> | |
| <div class="flex items-start mb-4"> | |
| <div class="quantum-tool-icon bg-purple-900"> | |
| <i class="fas fa-comment-dots"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Quantum Prompt Master</h4> | |
| <p class="text-xs text-purple-300">Engineer v5.0</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Diseña prompts avanzados con redes neuronales que aprenden de tus patrones de uso.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">NLP</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Basic+</span> | |
| </div> | |
| <button class="text-purple-400 hover:text-purple-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quantum Code Forge --> | |
| <div class="quantum-card rounded-xl p-5 hover:quantum-glow cursor-pointer"> | |
| <div class="flex items-start mb-4"> | |
| <div class="quantum-tool-icon bg-blue-900"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Quantum Code Forge</h4> | |
| <p class="text-xs text-blue-300">Generator v5.0</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Generación de código asistida por IA cuántica con soporte multi-lenguaje.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Dev</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Pro+</span> | |
| </div> | |
| <button class="text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quantum AutoFlow --> | |
| <div class="quantum-card rounded-xl p-5 hover:quantum-glow cursor-pointer"> | |
| <div class="flex items-start mb-4"> | |
| <div class="quantum-tool-icon bg-teal-900"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Quantum AutoFlow</h4> | |
| <p class="text-xs text-teal-300">Automation v5.0</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Automatización de procesos con IA predictiva y aprendizaje automático cuántico.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">RPA</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Enterprise+</span> | |
| </div> | |
| <button class="text-teal-400 hover:text-teal-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quantum Data Nexus --> | |
| <div class="quantum-card rounded-xl p-5 hover:quantum-glow cursor-pointer"> | |
| <div class="flex items-start mb-4"> | |
| <div class="quantum-tool-icon bg-green-900"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Quantum Data Nexus</h4> | |
| <p class="text-xs text-green-300">Analyzer v5.0</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Análisis de datos con redes neuronales profundas y visualización predictiva cuántica.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">BI</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Pro+</span> | |
| </div> | |
| <button class="text-green-400 hover:text-green-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- NEW: Quantum Metaverse Studio --> | |
| <div class="quantum-card rounded-xl p-5 hover:quantum-teal-glow cursor-pointer border-2 border-teal-500"> | |
| <div class="flex items-start mb-4"> | |
| <div class="quantum-tool-icon bg-teal-900"> | |
| <i class="fas fa-vr-cardboard"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Quantum Metaverse Studio</h4> | |
| <p class="text-xs text-teal-300">NEW v5.0</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Crea entornos 3D/VR/AR con IA generativa y tecnología cuántica.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">3D</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Quantum</span> | |
| </div> | |
| <button class="text-teal-400 hover:text-teal-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- NEW: Quantum Learning Hub --> | |
| <div class="quantum-card rounded-xl p-5 hover:quantum-blue-glow cursor-pointer border-2 border-blue-500"> | |
| <div class="flex items-start mb-4"> | |
| <div class="quantum-tool-icon bg-blue-900"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Quantum Learning Hub</h4> | |
| <p class="text-xs text-blue-300">NEW v5.0</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Módulo de capacitación con IA adaptativa que aprende de tus patrones.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">EdTech</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Enterprise+</span> | |
| </div> | |
| <button class="text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quantum Neural Core --> | |
| <div class="quantum-card rounded-xl p-5 hover:quantum-pink-glow cursor-pointer border-2 border-pink-500"> | |
| <div class="flex items-start mb-4"> | |
| <div class="quantum-tool-icon bg-pink-900"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Quantum Neural Core</h4> | |
| <p class="text-xs text-pink-300">NEW v5.0</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Red neuronal cuántica que aprende y optimiza todas tus herramientas.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-pink-900 text-pink-300 px-2 py-1 rounded-full">AI</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Quantum</span> | |
| </div> | |
| <button class="text-pink-400 hover:text-pink-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quantum API Gateway --> | |
| <div class="quantum-card rounded-xl p-5 hover:quantum-glow cursor-pointer"> | |
| <div class="flex items-start mb-4"> | |
| <div class="quantum-tool-icon bg-purple-900"> | |
| <i class="fas fa-plug"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Quantum API Gateway</h4> | |
| <p class="text-xs text-purple-300">Connect v5.0</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Interconecta todas tus herramientas y sistemas externos con APIs inteligentes.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Integración</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Pro+</span> | |
| </div> | |
| <button class="text-purple-400 hover:text-purple-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button class="bg-purple-700 hover:bg-purple-600 px-6 py-3 rounded-lg font-medium flex items-center"> | |
| <i class="fas fa-eye mr-2"></i> Ver todas las herramientas (48) | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Quantum Membership Plans --> | |
| <section class="mb-12"> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-crown text-yellow-400 mr-2"></i> Planes de Membresía | |
| </h3> | |
| <button class="text-xs bg-purple-900 text-purple-300 px-3 py-1 rounded-full hover:bg-purple-800"> | |
| Comparar planes | |
| </button> | |
| </div> | |
| <p class="text-purple-200 mb-6">Elige el nivel de acceso que mejor se adapte a tus necesidades. Todos los planes incluyen actualizaciones automáticas y soporte prioritario.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <!-- Basic Plan --> | |
| <div class="bg-gray-800 rounded-xl p-6 quantum-border"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h4 class="text-lg font-semibold">Basic</h4> | |
| <span class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded-full">Popular</span> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="text-3xl font-bold">$19</span> | |
| <span class="text-gray-400">/mes</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Ideal para individuos que necesitan herramientas esenciales de IA.</p> | |
| <ul class="space-y-2 text-sm text-gray-300 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> 5 herramientas básicas | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Soporte por correo | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> 100 ejecuciones/mes | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-red-400 mr-2"></i> Quantum Nexus OS | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-red-400 mr-2"></i> Integraciones avanzadas | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg"> | |
| Comenzar | |
| </button> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="bg-gray-800 rounded-xl p-6 quantum-border border-2 border-purple-500 quantum-glow"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h4 class="text-lg font-semibold">Pro</h4> | |
| <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Recomendado</span> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="text-3xl font-bold">$49</span> | |
| <span class="text-gray-400">/mes</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Perfecto para profesionales que necesitan herramientas avanzadas.</p> | |
| <ul class="space-y-2 text-sm text-gray-300 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> 15 herramientas avanzadas | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Soporte prioritario | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> 1,000 ejecuciones/mes | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Quantum Nexus OS Lite | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-red-400 mr-2"></i> Herramientas cuánticas | |
| </li> | |
| </ul> | |
| <button class="w-full bg-purple-700 hover:bg-purple-600 text-white py-2 rounded-lg"> | |
| Comenzar | |
| </button> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-gray-800 rounded-xl p-6 quantum-teal-border"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h4 class="text-lg font-semibold">Enterprise</h4> | |
| <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">Equipos</span> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="text-3xl font-bold">$149</span> | |
| <span class="text-gray-400">/mes</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Para equipos que necesitan automatización y análisis avanzados.</p> | |
| <ul class="space-y-2 text-sm text-gray-300 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> 30+ herramientas premium | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Soporte 24/7 | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Ejecuciones ilimitadas | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Quantum Nexus OS | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> 3 herramientas cuánticas | |
| </li> | |
| </ul> | |
| <button class="w-full bg-teal-700 hover:bg-teal-600 text-white py-2 rounded-lg"> | |
| Comenzar | |
| </button> | |
| </div> | |
| <!-- Quantum Plan --> | |
| <div class="bg-gray-800 rounded-xl p-6 quantum-blue-border"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h4 class="text-lg font-semibold">Quantum</h4> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Elite</span> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="text-3xl font-bold">$299</span> | |
| <span class="text-gray-400">/mes</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">Acceso completo al ecosistema cuántico con todas las herramientas.</p> | |
| <ul class="space-y-2 text-sm text-gray-300 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Todas las herramientas (48+) | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Soporte VIP 24/7 | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Ejecuciones ilimitadas | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Quantum Nexus OS Pro | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> Todas las herramientas cuánticas | |
| </li> | |
| </ul> | |
| <button class="w-full bg-blue-700 hover:bg-blue-600 text-white py-2 rounded-lg"> | |
| Comenzar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Network Status --> | |
| <section class="mb-12"> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-network-wired text-teal-400 mr-2"></i> Estado de la Red Cuántica | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-teal-border"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-400">Conexión Cuántica</span> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Estable</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2 mb-1"> | |
| <div class="bg-teal-500 h-2 rounded-full" style="width: 98%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>Latencia: 8ms</span> | |
| <span>98% estabilidad</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-blue-border"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-400">Sincronización de IA</span> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activa</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2 mb-1"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>24 modelos conectados</span> | |
| <span>Ult. sync: 0.3s</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-border"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-400">Memoria Cuántica</span> | |
| <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">55% usado</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2 mb-1"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 55%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>5.5TB/10TB usado</span> | |
| <span>Optimizado</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-border"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h4 class="font-medium">Quantum Neural Optimization</h4> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div> | |
| </label> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-3">Activa para permitir que el Quantum Nexus OS optimice automáticamente la asignación de recursos entre herramientas usando IA cuántica.</p> | |
| <div class="flex space-x-3"> | |
| <button class="text-xs bg-purple-900 text-purple-300 px-3 py-1 rounded-full hover:bg-purple-800"> | |
| <i class="fas fa-bolt mr-1"></i> Quantum Boost | |
| </button> | |
| <button class="text-xs bg-teal-900 text-teal-300 px-3 py-1 rounded-full hover:bg-teal-800"> | |
| <i class="fas fa-brain mr-1"></i> Entrenar Red | |
| </button> | |
| <button class="text-xs bg-blue-900 text-blue-300 px-3 py-1 rounded-full hover:bg-blue-800"> | |
| <i class="fas fa-shield-alt mr-1"></i> Seguridad | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Performance & Resources --> | |
| <section class="mb-12"> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <h3 class="text-xl font-semibold mb-6 flex items-center"> | |
| <i class="fas fa-tachometer-alt text-red-400 mr-2"></i> Rendimiento Cuántico | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-border"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h4 class="text-sm text-gray-400">CPU Cuántica</h4> | |
| <p class="text-2xl font-bold">42%</p> | |
| </div> | |
| <div class="bg-red-900 p-2 rounded-full"> | |
| <i class="fas fa-microchip text-red-400"></i> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-blue-border"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h4 class="text-sm text-gray-400">Memory Cuántica</h4> | |
| <p class="text-2xl font-bold">6.2/16GB</p> | |
| </div> | |
| <div class="bg-blue-900 p-2 rounded-full"> | |
| <i class="fas fa-memory text-blue-400"></i> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 38.75%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-border"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h4 class="text-sm text-gray-400">GPU Cuántica</h4> | |
| <p class="text-2xl font-bold">68%</p> | |
| </div> | |
| <div class="bg-purple-900 p-2 rounded-full"> | |
| <i class="fas fa-gamepad text-purple-400"></i> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-teal-border"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h4 class="text-sm text-gray-400">Red Cuántica</h4> | |
| <p class="text-2xl font-bold">85%</p> | |
| </div> | |
| <div class="bg-teal-900 p-2 rounded-full"> | |
| <i class="fas fa-network-wired text-teal-400"></i> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-teal-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-border"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-3"> | |
| <div class="mb-3 md:mb-0"> | |
| <h4 class="font-medium mb-1">Quantum Resource Allocation</h4> | |
| <p class="text-sm text-gray-300">Distribución inteligente de recursos entre herramientas activas</p> | |
| </div> | |
| <div class="w-full md:w-auto md:min-w-[300px]"> | |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> | |
| <span>Prompt Master: 15%</span> | |
| <span>Code Forge: 25%</span> | |
| <span>Data Nexus: 30%</span> | |
| <span>AutoFlow: 20%</span> | |
| <span>Otros: 10%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-purple-500 via-blue-500 to-teal-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Recent Activity & Quick Actions --> | |
| <section class="mb-12"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Quantum Recent Activity --> | |
| <div class="quantum-card rounded-xl p-6 lg:col-span-2"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-history text-purple-400 mr-2"></i> Actividad Cuántica Reciente | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-code text-white text-sm"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Quantum Code Forge</span> | |
| <span class="text-xs text-gray-400">hace 2 min</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Generación de componente React con aprendizaje cuántico completada</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">React</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Quantum</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-teal-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-comment-dots text-white text-sm"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Quantum Prompt</span> | |
| <span class="text-xs text-gray-400">hace 15 min</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Optimización de prompt con red neuronal cuántica para GPT-5 completada</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">GPT-5</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Quantum</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-project-diagram text-white text-sm"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Quantum AutoFlow</span> | |
| <span class="text-xs text-gray-400">hace 32 min</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Nuevo flujo cuántico conectando Prompt Master con Data Nexus</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Integración</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Quantum</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-database text-white text-sm"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Quantum Data Nexus</span> | |
| <span class="text-xs text-gray-400">hace 50 min</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Análisis predictivo cuántico de dataset completado - 42 insights</p> | |
| <div class="mt-1 flex space-x-2"> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Análisis</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Quantum</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 text-purple-400 hover:text-purple-300 text-sm flex items-center"> | |
| Ver toda la actividad <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <!-- Quantum Quick Actions --> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-bolt text-yellow-400 mr-2"></i> Acciones Rápidas | |
| </h3> | |
| <div class="space-y-3"> | |
| <button class="w-full bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg text-left flex items-center border border-purple-700"> | |
| <div class="bg-purple-900 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <span>Nuevo Proyecto Cuántico</span> | |
| </button> | |
| <button class="w-full bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg text-left flex items-center border border-teal-700"> | |
| <div class="bg-teal-900 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <span>Entrenar Red Cuántica</span> | |
| </button> | |
| <button class="w-full bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg text-left flex items-center border border-blue-700"> | |
| <div class="bg-blue-900 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-share-alt"></i> | |
| </div> | |
| <span>Compartir Configuración</span> | |
| </button> | |
| <button class="w-full bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg text-left flex items-center border border-red-700"> | |
| <div class="bg-red-900 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-cogs"></i> | |
| </div> | |
| <span>Configuración Avanzada</span> | |
| </button> | |
| <button class="w-full bg-purple-900 hover:bg-purple-800 px-4 py-3 rounded-lg text-left flex items-center mt-4"> | |
| <div class="bg-purple-700 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <span>Asistente de Integración</span> | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-medium mb-3 flex items-center"> | |
| <i class="fas fa-question-circle text-blue-400 mr-2"></i> Soporte Rápido | |
| </h4> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left text-sm text-gray-400 hover:text-white px-3 py-2 rounded-lg bg-gray-800"> | |
| ¿Cómo crear un nuevo flujo cuántico? | |
| </button> | |
| <button class="w-full text-left text-sm text-gray-400 hover:text-white px-3 py-2 rounded-lg bg-gray-800"> | |
| Conectar herramientas externas | |
| </button> | |
| <button class="w-full text-left text-sm text-gray-400 hover:text-white px-3 py-2 rounded-lg bg-gray-800"> | |
| Optimizar uso de recursos | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Learning Hub --> | |
| <section class="mb-12"> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-graduation-cap text-blue-400 mr-2"></i> Quantum Learning Hub | |
| </h3> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">NEW in v5.0</span> | |
| </div> | |
| <p class="text-blue-200 mb-6">Aprende a dominar el ecosistema Quantum Box con lecciones adaptativas que evolucionan según tus necesidades y patrones de uso.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-blue-border"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h4 class="font-medium">Rutas de Aprendizaje</h4> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-3">Cursos estructurados basados en tus objetivos y nivel de experiencia.</p> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Personalizado</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-teal-border"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-teal-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-microscope"></i> | |
| </div> | |
| <h4 class="font-medium">Laboratorios Cuánticos</h4> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-3">Entornos seguros para experimentar con herramientas y flujos.</p> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">Práctica</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-border"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-certificate"></i> | |
| </div> | |
| <h4 class="font-medium">Certificaciones</h4> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-3">Valida tus conocimientos con certificados reconocidos.</p> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Profesional</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 quantum-blue-border"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-600 p-2 rounded-full mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h4 class="font-medium">AI Mentor</h4> | |
| </div> | |
| <button class="text-xs bg-blue-900 text-blue-300 px-3 py-1 rounded-full hover:bg-blue-800"> | |
| Iniciar sesión | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-3">Asistente de IA que guía tu aprendizaje y resuelve dudas en tiempo real.</p> | |
| <div class="bg-gray-900 rounded p-3 text-center text-gray-500 text-sm"> | |
| <i class="fas fa-mouse-pointer mr-1"></i> Haz una pregunta al AI Mentor para comenzar | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Quantum Footer --> | |
| <footer class="bg-gray-800 text-white py-8 border-t border-gray-700"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-cube text-teal-400 mr-2"></i> Quantum Box | |
| </h3> | |
| <p class="text-sm text-gray-400">El ecosistema definitivo de herramientas de IA interconectadas. Potencia tu productividad con tecnología cuántica y aprendizaje automático.</p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-teal-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-teal-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-teal-300"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-teal-300"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Herramientas</h3> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-teal-300 transition">Quantum Prompt</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Code Forge</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Quantum AutoFlow</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Data Nexus</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Metaverse Studio</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Recursos</h3> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-teal-300 transition">Documentación</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Tutoriales</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">API Cuántica</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Empresa</h3> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-teal-300 transition">Sobre Nosotros</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Carreras</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Contacto</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Prensa</a></li> | |
| <li><a href="#" class="hover:text-teal-300 transition">Legal</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-4 mb-4 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-cube text-teal-400"></i> | |
| <span class="font-bold">QUANTUM BOX AI PRO TOOLS</span> | |
| </div> | |
| <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">v5.0.1</span> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6"> | |
| <a href="#" class="text-sm text-gray-400 hover:text-teal-300">Términos de Servicio</a> | |
| <a href="#" class="text-sm text-gray-400 hover:text-teal-300">Política de Privacidad</a> | |
| <a href="#" class="text-sm text-gray-400 hover:text-teal-300">Seguridad</a> | |
| <a href="#" class="text-sm text-gray-400 hover:text-teal-300">Cookies</a> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-xs text-gray-500"> | |
| <p>© 2023 Quantum Technologies. Todos los derechos reservados.</p> | |
| <p class="mt-1">Desarrollado con <i class="fas fa-heart text-red-400"></i> para revolucionar el futuro de la IA y la automatización cuántica.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Toggle mobile menu | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Simulate quantum network status updates | |
| function updateQuantumStatus() { | |
| const stabilityElements = document.querySelectorAll('.quantum-stability-indicator'); | |
| stabilityElements.forEach(el => { | |
| const currentWidth = parseInt(el.style.width) || 95; | |
| const variation = Math.floor(Math.random() * 4) - 2; // -2 to +2 | |
| let newWidth = currentWidth + variation; | |
| </html> |