Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumVault - Next-Gen Encryption</title> | |
| <link rel="icon" type="image/x-icon" href="assets/favicon.ico"> | |
| <link rel="stylesheet" href="assets/css/quantumvault.min.css"> | |
| <script src="assets/js/quantumvault.min.js" defer></script> | |
| <style> | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(100, 215, 255, 0.8); | |
| } | |
| .gradient-border { | |
| position: relative; | |
| border: 3px solid transparent; | |
| border-radius: 1rem; | |
| background-clip: padding-box; | |
| } | |
| .gradient-border::after { | |
| content: ''; | |
| position: absolute; | |
| top: -3px; | |
| left: -3px; | |
| right: -3px; | |
| bottom: -3px; | |
| z-index: -1; | |
| background: linear-gradient(45deg, #00dbde, #fc00ff, #00dbde); | |
| border-radius: inherit; | |
| background-size: 300% 300%; | |
| animation: gradientBG 6s ease infinite; | |
| } | |
| @keyframes gradientBG { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white font-mono" id="vanta-bg"> | |
| <div class="container mx-auto px-4"> | |
| <!-- Navigation --> | |
| <nav class="flex justify-between items-center py-6 sticky top-0 z-50 bg-black/80 backdrop-blur-sm"> | |
| <div class="text-3xl font-bold glow-text"> | |
| <span class="qv-brand">QuantumVault</span> <span class="text-purple-400">⚡</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#protocol" class="qv-nav-link hover:text-purple-400 transition">Protocol</a> | |
| <a href="#vision" class="qv-nav-link hover:text-purple-400 transition">Vision</a> | |
| <a href="#research" class="qv-nav-link hover:text-purple-400 transition">Research</a> | |
| <a href="#team" class="qv-nav-link hover:text-purple-400 transition">Team</a> | |
| </div> | |
| <button class="qv-mobile-menu md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center" id="home"> | |
| <div class="text-center max-w-4xl"> | |
| <h1 class="text-5xl md:text-7xl font-extrabold mb-6 glow-text"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600"> | |
| Quantum Entangled Encryption | |
| </span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-10 text-gray-300"> | |
| Revolutionizing security with biometric-tied quantum algorithms.<br> | |
| The world's first zero-trust system immune to modern threats. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#protocol" class="gradient-border px-8 py-4 text-lg font-bold pulse hover:scale-105 transition"> | |
| Explore Protocol | |
| </a> | |
| <a href="#research" class="border-2 border-purple-600 px-8 py-4 text-lg font-bold hover:bg-purple-900/30 hover:scale-105 transition"> | |
| Join Research | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section class="py-20" id="protocol"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold glow-text">QuantumVault Protocol</h2> | |
| <p class="text-xl mt-4 text-gray-300">The world's first biometric-tied quantum encryption system</p> | |
| </div> | |
| <!-- Protocol Diagram --> | |
| <div class="bg-black/50 rounded-xl p-8 border border-gray-700 mb-16"> | |
| <div class="grid md:grid-cols-3 gap-8 items-center"> | |
| <div class="text-center"> | |
| <div class="inline-block p-6 rounded-full bg-purple-900/30 mb-4"> | |
| <i data-feather="fingerprint" class="w-12 h-12 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Biometric Input</h3> | |
| <p class="text-gray-400">User provides unique biological markers</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="relative flex justify-center"> | |
| <div class="absolute h-1 w-full bg-gradient-to-r from-purple-600 to-blue-500 top-1/2 transform -translate-y-1/2"></div> | |
| <div class="relative p-6 rounded-full bg-blue-900/30"> | |
| <i data-feather="cpu" class="w-12 h-12 text-blue-400 animate-spin"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 mt-4">Quantum Processor</h3> | |
| <p class="text-gray-400">Creates entangled particle pairs</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="inline-block p-6 rounded-full bg-green-900/30 mb-4"> | |
| <i data-feather="lock" class="w-12 h-12 text-green-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Quantum Hash</h3> | |
| <p class="text-gray-400">Unique encrypted output</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="text-4xl font-bold text-center mb-16 glow-text">Core Innovations</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="gradient-border p-6 rounded-xl hover:scale-105 transition"> | |
| <div class="text-purple-400 mb-4"> | |
| <i data-feather="lock" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Quantum Hashes</h3> | |
| <p class="text-gray-400"> | |
| Proprietary entangled hash algorithms that change state with biometric input. | |
| </p> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="gradient-border p-6 rounded-xl hover:scale-105 transition"> | |
| <div class="text-blue-400 mb-4"> | |
| <i data-feather="eye-off" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Zero Trust</h3> | |
| <p class="text-gray-400"> | |
| No persistent keys - authentication happens only during quantum state observation. | |
| </p> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="gradient-border p-6 rounded-xl hover:scale-105 transition"> | |
| <div class="text-green-400 mb-4"> | |
| <i data-feather="cpu" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Biometric Link</h3> | |
| <p class="text-gray-400"> | |
| Each encryption uniquely tied to user's biological markers - impossible to replicate. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Vision Section --> | |
| <section class="py-20" id="vision"> | |
| <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-4xl font-bold mb-6 glow-text">The Universal Trust Layer</h2> | |
| <p class="text-lg mb-6 text-gray-300"> | |
| QuantumVault provides the missing infrastructure layer that makes digital threats fundamentally impossible. | |
| </p> | |
| <div class="gradient-border p-1 rounded-lg inline-block"> | |
| <div class="bg-black p-6 rounded-lg"> | |
| <p class="text-purple-400 italic">"Security shouldn't be a feature - it should be the foundation"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/640x360/1" alt="Quantum Network" class="rounded-xl shadow-2xl"> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-purple-600 rounded-full mix-blend-screen opacity-20 blur-xl"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Research Section --> | |
| <section class="py-20" id="research"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-4xl font-bold mb-6 glow-text">Quantum Entanglement in Action</h2> | |
| <p class="text-xl mb-8 text-gray-300"> | |
| Watch as our protocol creates entangled pairs that only resolve when both the quantum state and biometric input match simultaneously. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <div class="border-l-4 border-purple-500 pl-4"> | |
| <p class="text-sm text-gray-400">Current Entanglements</p> | |
| <p class="text-3xl font-mono">1.2M+</p> | |
| </div> | |
| <div class="border-l-4 border-blue-500 pl-4"> | |
| <p class="text-sm text-gray-400">Successful Verifications</p> | |
| <p class="text-3xl font-mono">99.9999%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="aspect-w-16 aspect-h-9 bg-gradient-to-br from-purple-900/50 to-blue-900/50 rounded-xl p-1"> | |
| <div class="w-full h-full bg-black rounded-lg flex items-center justify-center"> | |
| <div class="text-center p-8"> | |
| <div class="inline-block mb-4"> | |
| <i data-feather="cpu" class="w-16 h-16 text-purple-400 animate-spin"></i> | |
| </div> | |
| <h3 class="text-xl mb-2">Quantum Processor Active</h3> | |
| <p class="text-gray-400">Observing entangled pairs...</p> | |
| <div class="mt-6 h-2 w-full bg-gray-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-blue-400 to-purple-600 rounded-full animate-pulse" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -top-4 -left-4 w-16 h-16 rounded-full bg-blue-500 filter blur-xl opacity-70"></div> | |
| <div class="absolute -bottom-4 -right-4 w-24 h-24 rounded-full bg-purple-500 filter blur-xl opacity-70"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="qv-card-grid"> | |
| <div class="qv-card"> | |
| <div class="qv-card-icon"> | |
| <i data-feather="book"></i> | |
| </div> | |
| <h3 class="qv-card-title">Published Papers</h3> | |
| <p class="qv-card-text"> | |
| Access our latest research papers on quantum entanglement and biometric security. | |
| </p> | |
| </div> | |
| <div class="qv-card"> | |
| <div class="qv-card-icon"> | |
| <i data-feather="cpu"></i> | |
| </div> | |
| <h3 class="qv-card-title">Experiments</h3> | |
| <p class="qv-card-text"> | |
| Explore our quantum computing experiments and real-world implementations. | |
| </p> | |
| </div> | |
| <div class="qv-card"> | |
| <div class="qv-card-icon"> | |
| <i data-feather="users"></i> | |
| </div> | |
| <h3 class="qv-card-title">Collaborations</h3> | |
| <p class="qv-card-text"> | |
| Join our research network and collaborate on cutting-edge quantum security projects. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section class="py-20" id="team"> | |
| <div class="qv-team-grid"> | |
| <div class="qv-team-card"> | |
| <img src="http://static.photos/people/200x200/1" alt="Dr. Alice Zhang" class="qv-team-img"> | |
| <h3 class="qv-team-name">Dr. Alice Zhang</h3> | |
| <p class="qv-team-title">Chief Quantum Scientist</p> | |
| </div> | |
| <div class="qv-team-card"> | |
| <img src="http://static.photos/people/200x200/2" alt="Dr. Marcus Chen" class="qv-team-img"> | |
| <h3 class="qv-team-name">Dr. Marcus Chen</h3> | |
| <p class="qv-team-title">Biometrics Lead</p> | |
| </div> | |
| <div class="qv-team-card"> | |
| <img src="http://static.photos/people/200x200/3" alt="Sophia Kurosawa" class="qv-team-img"> | |
| <h3 class="qv-team-name">Sophia Kurosawa</h3> | |
| <p class="qv-team-title">Security Architect</p> | |
| </div> | |
| <div class="qv-team-card"> | |
| <img src="http://static.photos/people/200x200/4" alt="Raj Patel" class="qv-team-img"> | |
| <h3 class="qv-team-name">Raj Patel</h3> | |
| <p class="qv-team-title">Quantum Engineer</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-20 text-center"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-6 glow-text">Join the Encryption Revolution</h2> | |
| <p class="text-xl mb-10 text-gray-300"> | |
| Contribute to our open-source quantum encryption protocol or implement it in your organization. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-gradient-to-r from-blue-500 to-purple-600 px-8 py-4 text-lg font-bold hover:from-blue-600 hover:to-purple-700 transition"> | |
| GitHub Repository | |
| </button> | |
| <button class="border-2 border-purple-600 px-8 py-4 text-lg font-bold hover:bg-purple-900/30 transition"> | |
| Request Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 border-t border-gray-800"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">QuantumVault</h3> | |
| <p class="text-gray-400"> | |
| The future of unbreakable encryption powered by quantum entanglement and biometrics. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-purple-400">Home</a></li> | |
| <li><a href="#protocol" class="text-gray-400 hover:text-purple-400">Protocol</a></li> | |
| <li><a href="#vision" class="text-gray-400 hover:text-purple-400">Vision</a></li> | |
| <li><a href="#research" class="text-gray-400 hover:text-purple-400">Research</a></li> | |
| <li><a href="#team" class="text-gray-400 hover:text-purple-400">Team</a></li> | |
| </ul> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">QuantumVault</h3> | |
| <p class="text-gray-400"> | |
| The future of unbreakable encryption powered by quantum entanglement and biometrics. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Protocol</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="about.html" class="text-gray-400 hover:text-purple-400">Our Vision</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400">Implementation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Research</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400">Papers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400">Collaborations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400">Experiments</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-500"> | |
| <p>© 2023 QuantumVault Protocol. All research open-sourced under MIT License.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |