Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepSite AI | Next-Gen Code Intelligence</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> | |
| .quantum-gradient { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e40af 50%, #7e22ce 100%); | |
| } | |
| .neon-border { | |
| border: 1px solid rgba(124, 58, 237, 0.3); | |
| box-shadow: 0 0 10px rgba(124, 58, 237, 0.5); | |
| } | |
| .neon-border:hover { | |
| border: 1px solid rgba(124, 58, 237, 0.8); | |
| box-shadow: 0 0 20px rgba(124, 58, 237, 0.8); | |
| } | |
| .code-editor { | |
| min-height: 400px; | |
| font-family: 'Fira Code', monospace; | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| } | |
| .quantum-pulse { | |
| animation: quantum-pulse 4s infinite; | |
| } | |
| @keyframes quantum-pulse { | |
| 0% { box-shadow: 0 0 5px rgba(124, 58, 237, 0.5); } | |
| 50% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.9); } | |
| 100% { box-shadow: 0 0 5px rgba(124, 58, 237, 0.5); } | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px rgba(199, 210, 254, 0.8); | |
| } | |
| .holographic-card { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| } | |
| .quantum-loader { | |
| border: 3px solid rgba(124, 58, 237, 0.3); | |
| border-top: 3px solid rgba(124, 58, 237, 1); | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <!-- Quantum Navigation --> | |
| <nav class="quantum-gradient py-4 sticky top-0 z-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white text-xl"></i> | |
| </div> | |
| <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500"> | |
| DeepSite<span class="text-white">AI</span> | |
| </span> | |
| </div> | |
| <div class="hidden lg:flex space-x-8 items-center"> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Products</a> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Solutions</a> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Research</a> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Pricing</a> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Resources</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="hidden md:block text-gray-300 hover:text-white"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300"> | |
| Get Started | |
| </button> | |
| <button class="lg:hidden text-gray-300 hover:text-white text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Quantum Hero --> | |
| <section class="quantum-gradient py-20 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">Quantum</span> | |
| <span class="text-white">Code Intelligence</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8 max-w-lg"> | |
| DeepSite AI leverages quantum-inspired algorithms to analyze and optimize your code with unprecedented intelligence. | |
| Experience the power of 10,000,000,000x smarter code analysis. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-full font-bold transition-all duration-300 flex items-center justify-center quantum-pulse"> | |
| <i class="fas fa-bolt mr-3"></i> Try Quantum Analysis | |
| </button> | |
| <button class="bg-transparent border border-indigo-500 text-white px-8 py-4 rounded-full font-bold hover:bg-indigo-900/30 transition-all duration-300 flex items-center justify-center"> | |
| <i class="fas fa-play-circle mr-3"></i> Watch Demo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-6"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-indigo-900" alt="User"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-indigo-900" alt="User"> | |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-indigo-900" alt="User"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm text-gray-300">Trusted by 50,000+ developers</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="holographic-card neon-border p-1 rounded-2xl"> | |
| <div class="bg-gray-900/80 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-400">quantum_analysis.js</div> | |
| </div> | |
| <div class="code-editor rounded-lg p-4 font-mono text-sm"> | |
| <div class="text-purple-400">// Quantum Code Analysis Results</div> | |
| <div class="text-green-400 my-2">✓ 98.7% Optimization Achieved</div> | |
| <div class="text-blue-300 my-2">◉ 12 Quantum Patterns Detected</div> | |
| <div class="text-yellow-400 my-2">⚠ 3 Classical Bottlenecks</div> | |
| <div class="my-4"> | |
| <div class="text-white">Quantum Entanglement Potential:</div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5 mt-2"> | |
| <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div class="text-gray-400 text-xs mt-6">// DeepSite AI Quantum Core v12.7.3</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Features --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <div class="inline-block px-4 py-2 rounded-full bg-indigo-900/30 text-indigo-400 mb-4 border border-indigo-800"> | |
| <span class="font-medium">QUANTUM COMPUTING READY</span> | |
| </div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Beyond Classical Code Analysis</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| DeepSite AI harnesses quantum-inspired algorithms to deliver analysis capabilities that are orders of magnitude beyond traditional tools. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="holographic-card neon-border p-6 rounded-xl hover:scale-105 transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-indigo-900/50 flex items-center justify-center mb-6 text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Neural Quantum Processing</h3> | |
| <p class="text-gray-400"> | |
| Our proprietary neural-quantum hybrid architecture processes code with 10,000x the efficiency of classical analyzers. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="holographic-card neon-border p-6 rounded-xl hover:scale-105 transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-indigo-900/50 flex items-center justify-center mb-6 text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-project-diagram text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Entanglement Detection</h3> | |
| <p class="text-gray-400"> | |
| Identifies quantum entanglement opportunities in your codebase for unprecedented optimization potential. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="holographic-card neon-border p-6 rounded-xl hover:scale-105 transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-indigo-900/50 flex items-center justify-center mb-6 text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-tachometer-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Hyper-Performance</h3> | |
| <p class="text-gray-400"> | |
| Achieve runtime improvements of 100-1000x through quantum-inspired parallel execution analysis. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="holographic-card neon-border p-6 rounded-xl hover:scale-105 transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-indigo-900/50 flex items-center justify-center mb-6 text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Quantum-Secure</h3> | |
| <p class="text-gray-400"> | |
| Post-quantum cryptography analysis ensures your code remains secure in the quantum computing era. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="holographic-card neon-border p-6 rounded-xl hover:scale-105 transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-indigo-900/50 flex items-center justify-center mb-6 text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-infinity text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Infinite Scalability</h3> | |
| <p class="text-gray-400"> | |
| Our quantum cloud infrastructure scales infinitely to handle codebases of any size. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="holographic-card neon-border p-6 rounded-xl hover:scale-105 transition-all duration-300"> | |
| <div class="w-14 h-14 rounded-full bg-indigo-900/50 flex items-center justify-center mb-6 text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-eye text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Temporal Analysis</h3> | |
| <p class="text-gray-400"> | |
| Predict future technical debt and maintenance issues before they occur with temporal code analysis. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Code Analyzer --> | |
| <section class="py-20 bg-gray-900 border-t border-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <div class="inline-block px-4 py-2 rounded-full bg-indigo-900/30 text-indigo-400 mb-6 border border-indigo-800"> | |
| <span class="font-medium">QUANTUM ANALYZER</span> | |
| </div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Experience 10 Billion Times Smarter Code Analysis</h2> | |
| <p class="text-xl text-gray-400 mb-8"> | |
| Our quantum-enhanced code analyzer evaluates millions of potential execution paths simultaneously, delivering insights no classical tool can match. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-900/50 flex items-center justify-center text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white">Quantum Parallel Analysis</h4> | |
| <p class="text-gray-400">Evaluate all possible code paths simultaneously</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-900/50 flex items-center justify-center text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white">Entanglement Optimization</h4> | |
| <p class="text-gray-400">Discover quantum optimization opportunities</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-900/50 flex items-center justify-center text-indigo-400 border border-indigo-800"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white">Temporal Debugging</h4> | |
| <p class="text-gray-400">Identify and fix bugs before they occur</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="holographic-card neon-border rounded-xl overflow-hidden"> | |
| <div class="bg-gray-900/80 p-1"> | |
| <div class="flex justify-between items-center bg-gray-800 p-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="text-sm text-gray-400">DeepSite Quantum Analyzer</div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-indigo-900/30 text-indigo-400 px-3 py-1 rounded text-xs border border-indigo-800"> | |
| Quantum Mode | |
| </button> | |
| <button class="bg-gray-700 text-gray-300 px-3 py-1 rounded text-xs"> | |
| Classical Mode | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="code-editor rounded-lg p-4"> | |
| <div class="text-purple-400">// Enter your code for quantum analysis</div> | |
| <textarea id="quantum-code-input" class="w-full bg-gray-800 text-gray-100 p-4 rounded mt-2 font-mono" rows="10" placeholder="// Paste your code here for quantum analysis..."></textarea> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <span class="text-indigo-400">QUANTUM READY</span> - Analysis powered by 128 qubits | |
| </div> | |
| <button id="quantum-analyze-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 flex items-center"> | |
| <i class="fas fa-atom mr-2"></i> Run Quantum Analysis | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Results Visualization --> | |
| <section class="py-20 bg-gray-900 border-t border-gray-800 hidden" id="results-section"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Quantum Analysis Results</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Your code has been processed through our quantum analysis engine with unprecedented depth. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> | |
| <div class="holographic-card neon-border p-6 rounded-xl"> | |
| <div class="text-5xl font-bold text-indigo-400 mb-2">98.7%</div> | |
| <div class="text-gray-400">Optimization Potential</div> | |
| </div> | |
| <div class="holographic-card neon-border p-6 rounded-xl"> | |
| <div class="text-5xl font-bold text-blue-400 mb-2">12</div> | |
| <div class="text-gray-400">Quantum Patterns Detected</div> | |
| </div> | |
| <div class="holographic-card neon-border p-6 rounded-xl"> | |
| <div class="text-5xl font-bold text-green-400 mb-2">47x</div> | |
| <div class="text-gray-400">Performance Improvement</div> | |
| </div> | |
| </div> | |
| <div class="holographic-card neon-border rounded-xl overflow-hidden mb-8"> | |
| <div class="bg-gray-900/80 p-6"> | |
| <h3 class="text-xl font-bold mb-4">Quantum Execution Paths</h3> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <div class="h-64 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="quantum-loader mx-auto mb-4"></div> | |
| <div class="text-gray-400">Visualizing quantum execution paths...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="holographic-card neon-border rounded-xl overflow-hidden"> | |
| <div class="bg-gray-900/80 p-6"> | |
| <h3 class="text-xl font-bold mb-4">Quantum Optimization Recommendations</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-900/50 flex items-center justify-center text-indigo-400 border border-indigo-800 text-xs"> | |
| 1 | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-white">Implement quantum superposition for state management</h4> | |
| <p class="text-gray-400 text-sm mt-1">Lines 45-78 could leverage quantum state for 12x performance gain</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-900/50 flex items-center justify-center text-indigo-400 border border-indigo-800 text-xs"> | |
| 2 | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-white">Replace classical loop with quantum parallelism</h4> | |
| <p class="text-gray-400 text-sm mt-1">Function calculateMatrix() could see 87% reduction in runtime</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-900/50 flex items-center justify-center text-indigo-400 border border-indigo-800 text-xs"> | |
| 3 | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-white">Entangle these database queries</h4> | |
| <p class="text-gray-400 text-sm mt-1">Queries on lines 112-115 show 94% entanglement potential</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-card neon-border rounded-xl overflow-hidden"> | |
| <div class="bg-gray-900/80 p-6"> | |
| <h3 class="text-xl font-bold mb-4">Temporal Issue Predictions</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-yellow-900/50 flex items-center justify-center text-yellow-400 border border-yellow-800 text-xs"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-white">Technical debt forming in 3.2 months</h4> | |
| <p class="text-gray-400 text-sm mt-1">Component structure will become problematic as codebase grows</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-yellow-900/50 flex items-center justify-center text-yellow-400 border border-yellow-800 text-xs"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-white">Security vulnerability emerging in 8 months</h4> | |
| <p class="text-gray-400 text-sm mt-1">Quantum computing will break current encryption implementation</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-yellow-900/50 flex items-center justify-center text-yellow-400 border border-yellow-800 text-xs"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium text-white">Performance cliff in 1.5 years</h4> | |
| <p class="text-gray-400 text-sm mt-1">Current architecture won't scale with projected data growth</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum CTA --> | |
| <section class="py-20 quantum-gradient"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6">Ready for the Quantum Leap?</h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"> | |
| Join thousands of developers who are already building the future with DeepSite AI's quantum-powered code intelligence. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-600 hover:bg-gray-100 font-bold px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center mx-auto"> | |
| <i class="fas fa-rocket mr-3"></i> Start Quantum Development | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-600 font-bold px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center mx-auto"> | |
| <i class="fas fa-headset mr-3"></i> Talk to Quantum Experts | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quantum Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-8 mb-8"> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white text-xl"></i> | |
| </div> | |
| <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500"> | |
| DeepSite<span class="text-white">AI</span> | |
| </span> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Quantum-powered code intelligence for the next generation of software development. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Quantum Guides</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Webinars</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-gray-400 mb-4 md:mb-0"> | |
| © 2023 DeepSite AI. All rights reserved. | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Quantum Analyzer Button | |
| document.getElementById('quantum-analyze-btn').addEventListener('click', function() { | |
| const inputCode = document.getElementById('quantum-code-input').value; | |
| if (!inputCode.trim()) { | |
| alert('Please enter code for quantum analysis'); | |
| return; | |
| } | |
| // Show loading state | |
| const btn = this; | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<div class="quantum-loader mr-2"></div> Quantum Processing...'; | |
| btn.disabled = true; | |
| // Simulate quantum analysis | |
| setTimeout(() => { | |
| // Show results section | |
| document.getElementById('results-section').classList.remove('hidden'); | |
| // Scroll to results | |
| document.getElementById('results-section').scrollIntoView({ behavior: 'smooth' }); | |
| // Reset button | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| }, 3000); | |
| }); | |
| // Animate elements when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.holographic-card').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/deep-site-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |