Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digital Quantum Clone - Your Future, Reimagined</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js" type="module"></script> | |
| <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #111827 0%, #374151 100%); | |
| color: #f3f4f6; | |
| min-height: 100vh; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #49C6E5 0%, #21C7AC 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-border { | |
| position: relative; | |
| border-radius: 0.5rem; | |
| } | |
| .gradient-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 0.5rem; | |
| padding: 2px; | |
| background: linear-gradient(45deg, #49C6E5, #21C7AC); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .underline-animation { | |
| position: relative; | |
| } | |
| .underline-animation::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background: linear-gradient(90deg, #49C6E5 0%, #21C7AC 100%); | |
| transition: width 0.3s ease; | |
| } | |
| .underline-animation:hover::after { | |
| width: 100%; | |
| } | |
| .card-hover-effect { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover-effect:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: rgba(73, 198, 229, 0.5); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .rotate-on-hover { | |
| transition: transform 0.5s ease; | |
| } | |
| .rotate-on-hover:hover { | |
| transform: rotate(10deg); | |
| } | |
| .carousel-item { | |
| transition: opacity 0.5s ease; | |
| } | |
| .carousel-item:not(.active) { | |
| opacity: 0; | |
| display: none; | |
| } | |
| .carousel-item.active { | |
| opacity: 1; | |
| display: block; | |
| } | |
| .feature-icon { | |
| font-size: 2.5rem; | |
| background: linear-gradient(135deg, #49C6E5 0%, #21C7AC 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navbar --> | |
| <nav class="py-6 px-4 sm:px-8 lg:px-16 xl:px-32 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-400 to-teal-400 flex items-center justify-center"> | |
| <span class="text-xl font-bold text-gray-900">DQC</span> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">Quantum Clone</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-300 hover:text-white underline-animation">Home</a> | |
| <a href="#features" class="text-gray-300 hover:text-white underline-animation">Features</a> | |
| <a href="#agents" class="text-gray-300 hover:text-white underline-animation">Agents</a> | |
| <a href="#customization" class="text-gray-300 hover:text-white underline-animation">Customization</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white underline-animation">Contact</a> | |
| </div> | |
| <button class="md:hidden text-gray-300 hover:text-white"> | |
| <ion-icon name="menu-outline" class="text-2xl"></ion-icon> | |
| </button> | |
| </nav> | |
| <!-- Hero Section with Carousel --> | |
| <section class="py-16 px-4 sm:px-8 lg:px-16 xl:px-32 relative overflow-hidden"> | |
| <div id="particles-js" class="absolute inset-0"></div> | |
| <div class="relative z-10 max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| <span class="gradient-text">Your Future,</span> Reimagined | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto"> | |
| Meet your personalized AI-powered digital avatar with quantum-grade security and unparalleled customization. | |
| </p> | |
| </div> | |
| <!-- Carousel --> | |
| <div class="gradient-border p-1 rounded-lg max-w-4xl mx-auto"> | |
| <div class="bg-gray-800 rounded-lg p-8"> | |
| <div class="carousel"> | |
| <div class="carousel-item active"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-4 gradient-text">Step 1: Face & Torso Scan</h3> | |
| <p class="text-gray-300 mb-6">Use your smartphone camera to create a perfect 3D model of yourself in minutes.</p> | |
| <div class="flex space-x-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <ion-icon name="scan-outline" class="text-2xl text-cyan-400"></ion-icon> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">High Precision</h4> | |
| <p class="text-sm text-gray-400">Sub-millimeter accuracy</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="w-48 h-48 md:w-64 md:h-64 rounded-full bg-gradient-to-br from-cyan-500 to-teal-500 flex items-center justify-center"> | |
| <ion-icon name="person-outline" class="text-6xl md:text-8xl text-white"></ion-icon> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-4 gradient-text">Step 2: Personality Training</h3> | |
| <p class="text-gray-300 mb-6">Teach your clone your speech patterns, knowledge base, and behavioral traits.</p> | |
| <div class="flex space-x-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <ion-icon name="brain-outline" class="text-2xl text-cyan-400"></ion-icon> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Deep Learning</h4> | |
| <p class="text-sm text-gray-400">Neural network adaptation</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="w-48 h-48 md:w-64 md:h-64 rounded-full bg-gradient-to-br from-cyan-500 to-teal-500 flex items-center justify-center"> | |
| <ion-icon name="analytics-outline" class="text-6xl md:text-8xl text-white"></ion-icon> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-4 gradient-text">Step 3: Quantum Encryption</h3> | |
| <p class="text-gray-300 mb-6">Your data is secured with unbreakable quantum encryption protocols.</p> | |
| <div class="flex space-x-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <ion-icon name="lock-closed-outline" class="text-2xl text-cyan-400"></ion-icon> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Absolute Security</h4> | |
| <p class="text-sm text-gray-400">Hack-proof protection</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="w-48 h-48 md:w-64 md:h-64 rounded-full bg-gradient-to-br from-cyan-500 to-teal-500 flex items-center justify-center"> | |
| <ion-icon name="shield-checkmark-outline" class="text-6xl md:text-8xl text-white"></ion-icon> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-8 space-x-2"> | |
| <button onclick="showCarouselItem(0)" class="w-3 h-3 rounded-full bg-cyan-400"></button> | |
| <button onclick="showCarouselItem(1)" class="w-3 h-3 rounded-full bg-gray-600"></button> | |
| <button onclick="showCarouselItem(2)" class="w-3 h-3 rounded-full bg-gray-600"></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-teal-500 text-white font-semibold rounded-full hover:shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| Get Early Access | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 px-4 sm:px-8 lg:px-16 xl:px-32 bg-gray-900 bg-opacity-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">Why Quantum Clone?</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| A revolutionary leap beyond primitive voice assistants - your digital twin with quantum security. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="gradient-border p-1 rounded-lg card-hover-effect"> | |
| <div class="bg-gray-800 rounded-lg p-6 h-full"> | |
| <div class="feature-icon mb-4"> | |
| <ion-icon name="lock-closed-outline"></ion-icon> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Quantum Encryption</h3> | |
| <p class="text-gray-300">Unbreakable security protocols that make your data completely hack-proof, using principles of quantum mechanics.</p> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-lg card-hover-effect"> | |
| <div class="bg-gray-800 rounded-lg p-6 h-full"> | |
| <div class="feature-icon mb-4"> | |
| <ion-icon name="person-circle-outline"></ion-icon> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">True Personalization</h3> | |
| <p class="text-gray-300">Your clone evolves with you, learning your speech patterns, knowledge, and behavioral traits over time.</p> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-lg card-hover-effect"> | |
| <div class="bg-gray-800 rounded-lg p-6 h-full"> | |
| <div class="feature-icon mb-4"> | |
| <ion-icon name="shirt-outline"></ion-icon> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Visual Customization</h3> | |
| <p class="text-gray-300">Dress your clone in digital clothing and accessories to match your style or professional needs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Agents Section --> | |
| <section id="agents" class="py-16 px-4 sm:px-8 lg:px-16 xl:px-32"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">Specialized AI Agents</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Your clone can integrate with specialized agents to enhance its capabilities in specific domains. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Medical Agent --> | |
| <div class="gradient-border p-1 rounded-lg card-hover-effect group"> | |
| <div class="bg-gray-800 rounded-lg p-6 h-full transition-all duration-300 group-hover:bg-gray-700"> | |
| <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mb-4 group-hover:bg-cyan-500 transition-all duration-300"> | |
| <ion-icon name="medkit-outline" class="text-3xl text-cyan-400 group-hover:text-white"></ion-icon> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Medical & Psychological</h3> | |
| <p class="text-gray-300 mb-4">Analyzes symptoms, suggests diagnoses, and provides psychological support with AI-powered insights.</p> | |
| <div class="mt-4 pt-4 border-t border-gray-700"> | |
| <h4 class="text-sm font-semibold text-cyan-400 mb-2">Capabilities:</h4> | |
| <ul class="text-sm text-gray-400 space-y-1"> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Medical diagnosis assistance | |
| </li> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Emotional state analysis | |
| </li> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Treatment recommendations | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Legal Agent --> | |
| <div class="gradient-border p-1 rounded-lg card-hover-effect group"> | |
| <div class="bg-gray-800 rounded-lg p-6 h-full transition-all duration-300 group-hover:bg-gray-700"> | |
| <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mb-4 group-hover:bg-cyan-500 transition-all duration-300"> | |
| <ion-icon name="scale-outline" class="text-3xl text-cyan-400 group-hover:text-white"></ion-icon> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Legal Consultant</h3> | |
| <p class="text-gray-300 mb-4">Processes legal texts, explains laws in simple terms, and helps draft legal documents with precision.</p> | |
| <div class="mt-4 pt-4 border-t border-gray-700"> | |
| <h4 class="text-sm font-semibold text-cyan-400 mb-2">Capabilities:</h4> | |
| <ul class="text-sm text-gray-400 space-y-1"> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Document analysis | |
| </li> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Contract drafting | |
| </li> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Risk assessment | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fitness Agent --> | |
| <div class="gradient-border p-1 rounded-lg card-hover-effect group"> | |
| <div class="bg-gray-800 rounded-lg p-6 h-full transition-all duration-300 group-hover:bg-gray-700"> | |
| <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mb-4 group-hover:bg-cyan-500 transition-all duration-300"> | |
| <ion-icon name="barbell-outline" class="text-3xl text-cyan-400 group-hover:text-white"></ion-icon> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Fitness & Nutrition</h3> | |
| <p class="text-gray-300 mb-4">Creates personalized workout plans and dietary recommendations based on your goals and health status.</p> | |
| <div class="mt-4 pt-4 border-t border-gray-700"> | |
| <h4 class="text-sm font-semibold text-cyan-400 mb-2">Capabilities:</h4> | |
| <ul class="text-sm text-gray-400 space-y-1"> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Training programs | |
| </li> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Movement analysis | |
| </li> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Personalized nutrition | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Financial Agent --> | |
| <div class="gradient-border p-1 rounded-lg card-hover-effect group"> | |
| <div class="bg-gray-800 rounded-lg p-6 h-full transition-all duration-300 group-hover:bg-gray-700"> | |
| <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mb-4 group-hover:bg-cyan-500 transition-all duration-300"> | |
| <ion-icon name="cash-outline" class="text-3xl text-cyan-400 group-hover:text-white"></ion-icon> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Financial Assistant</h3> | |
| <p class="text-gray-300 mb-4">Manages your budget, analyzes investments, and protects against fraud with real-time monitoring.</p> | |
| <div class="mt-4 pt-4 border-t border-gray-700"> | |
| <h4 class="text-sm font-semibold text-cyan-400 mb-2">Capabilities:</h4> | |
| <ul class="text-sm text-gray-400 space-y-1"> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Expense tracking | |
| </li> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Investment analysis | |
| </li> | |
| <li class="flex items-center"> | |
| <ion-icon name="checkmark-circle-outline" class="text-teal-400 mr-2"></ion-icon> | |
| Fraud detection | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Customization Section --> | |
| <section id="customization" class="py-16 px-4 sm:px-8 lg:px-16 xl:px-32 bg-gray-900 bg-opacity-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">Digital Wardrobe</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Dress your clone in style with our ever-expanding collection of digital clothing and accessories. | |
| </p> | |
| </div> | |
| <div class="gradient-border p-1 rounded-lg"> | |
| <div class="bg-gray-800 rounded-lg p-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="rotate-on-hover"> | |
| <div class="bg-gradient-to-br from-cyan-500 to-teal-500 p-4 rounded-lg aspect-square flex flex-col items-center justify-center"> | |
| <ion-icon name="shirt-outline" class="text-6xl text-white mb-4"></ion-icon> | |
| <span class="text-white font-semibold">Professional</span> | |
| </div> | |
| </div> | |
| <div class="rotate-on-hover"> | |
| <div class="bg-gradient-to-br from-purple-500 to-pink-500 p-4 rounded-lg aspect-square flex flex-col items-center justify-center"> | |
| <ion-icon name="shirt-outline" class="text-6xl text-white mb-4"></ion-icon> | |
| <span class="text-white font-semibold">Casual</span> | |
| </div> | |
| </div> | |
| <div class="rotate-on-hover"> | |
| <div class="bg-gradient-to-br from-yellow-500 to-red-500 p-4 rounded-lg aspect-square flex flex-col items-center justify-center"> | |
| <ion-icon name="shirt-outline" class="text-6xl text-white mb-4"></ion-icon> | |
| <span class="text-white font-semibold">Athletic</span> | |
| </div> | |
| </div> | |
| <div class="rotate-on-hover"> | |
| <div class="bg-gradient-to-br from-green-500 to-blue-500 p-4 rounded-lg aspect-square flex flex-col items-center justify-center"> | |
| <ion-icon name="shirt-outline" class="text-6xl text-white mb-4"></ion-icon> | |
| <span class="text-white font-semibold">Formal</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <p class="text-gray-300 mb-6">Mix and match from hundreds of clothing items, accessories, and styles to create the perfect look for your digital clone.</p> | |
| <button class="px-6 py-2 border border-cyan-400 text-cyan-400 font-semibold rounded-full hover:bg-cyan-400 hover:text-gray-900 transition-all duration-300"> | |
| Explore Wardrobe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 px-4 sm:px-8 lg:px-16 xl:px-32"> | |
| <div class="max-w-4xl mx-auto gradient-border p-1 rounded-lg"> | |
| <div class="bg-gray-800 rounded-lg p-8 md:p-12 text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-6 gradient-text">Ready to Meet Your Digital Twin?</h2> | |
| <p class="text-xl text-gray-300 mb-8">Join the waitlist today and be among the first to experience the quantum leap in AI technology.</p> | |
| <div class="max-w-md mx-auto flex flex-col sm:flex-row gap-4"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400"> | |
| <button class="px-6 py-3 bg-gradient-to-r from-cyan-500 to-teal-500 text-white font-semibold rounded-lg hover:shadow-lg transition-all duration-300"> | |
| Get Early Access | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact" class="py-12 px-4 sm:px-8 lg:px-16 xl:px-32 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-teal-400 flex items-center justify-center"> | |
| <span class="text-sm font-bold text-gray-900">DQC</span> | |
| </div> | |
| <span class="text-lg font-bold gradient-text">Quantum Clone</span> | |
| </div> | |
| <p class="text-gray-400">Your future, reimagined with quantum-secure AI technology.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">Agents</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">Customization</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-cyan-500 transition-colors"> | |
| <ion-icon name="logo-twitter" class="text-xl text-gray-300 hover:text-white"></ion-icon> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-cyan-500 transition-colors"> | |
| <ion-icon name="logo-linkedin" class="text-xl text-gray-300 hover:text-white"></ion-icon> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-cyan-500 transition-colors"> | |
| <ion-icon name="logo-github" class="text-xl text-gray-300 hover:text-white"></ion-icon> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-cyan-500 transition-colors"> | |
| <ion-icon name="logo-discord" class="text-xl text-gray-300 hover:text-white"></ion-icon> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Digital Quantum Clone. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-cyan-400 text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-cyan-400 text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-cyan-400 text-sm">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple carousel functionality | |
| function showCarouselItem(index) { | |
| const items = document.querySelectorAll('.carousel-item'); | |
| const dots = document.querySelectorAll('.carousel-dot'); | |
| items.forEach(item => item.classList.remove('active')); | |
| dots.forEach(dot => dot.classList.remove('bg-cyan-400')); | |
| items[index].classList.add('active'); | |
| dots[index].classList.add('bg-cyan-400'); | |
| dots[index].classList.remove('bg-gray-600'); | |
| // Update other dots | |
| dots.forEach((dot, i) => { | |
| if(i !== index) { | |
| dot.classList.add('bg-gray-600'); | |
| dot.classList.remove('bg-cyan-400'); | |
| } | |
| }); | |
| } | |
| // Auto-advance carousel | |
| let currentIndex = 0; | |
| setInterval(() => { | |
| currentIndex = (currentIndex + 1) % 3; | |
| showCarouselItem(currentIndex); | |
| }, 5000); | |
| // Simple particle effect | |
| function createParticles() { | |
| const container = document.querySelector('body'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| // Random size between 2px and 5px | |
| const size = Math.random() * 3 + 2; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Random opacity | |
| particle.style.opacity = Math.random() * 0.5 + 0.1; | |
| // Random animation | |
| const duration = Math.random() * 20 + 10; | |
| particle.style.animation = `float ${duration}s linear infinite`; | |
| container.appendChild(particle); | |
| } | |
| } | |
| // Create particles when page loads | |
| window.addEventListener('load', createParticles); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=Onekee/dqc-template-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |