| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Nebula-X | Advanced Space Technology</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> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --primary: #00f0ff; |
| --secondary: #7b2dff; |
| --dark: #0a0a1a; |
| } |
| |
| body { |
| font-family: 'Space Grotesk', sans-serif; |
| background-color: var(--dark); |
| color: white; |
| overflow-x: hidden; |
| } |
| |
| .orbitron { |
| font-family: 'Orbitron', sans-serif; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .hero-bg { |
| background: radial-gradient(circle at center, rgba(0, 240, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%); |
| } |
| |
| .space-shape { |
| position: relative; |
| width: 500px; |
| height: 500px; |
| background: linear-gradient(135deg, rgba(123, 45, 255, 0.2), rgba(0, 240, 255, 0.2)); |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| animation: float 8s ease-in-out infinite; |
| filter: blur(1px); |
| } |
| |
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0) rotate(0deg); |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| } |
| 50% { |
| transform: translateY(-20px) rotate(5deg); |
| border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; |
| } |
| } |
| |
| .glow { |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); |
| } |
| |
| .glow:hover { |
| box-shadow: 0 0 25px rgba(0, 240, 255, 0.8); |
| } |
| |
| .star { |
| position: absolute; |
| background: white; |
| border-radius: 50%; |
| animation: twinkle var(--duration) ease-in-out infinite; |
| } |
| |
| @keyframes twinkle { |
| 0%, 100% { opacity: 0.2; } |
| 50% { opacity: 1; } |
| } |
| |
| .feature-card { |
| background: rgba(10, 10, 26, 0.7); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(0, 240, 255, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-10px); |
| border-color: var(--primary); |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -2px; |
| left: 0; |
| background: var(--primary); |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .countdown-item { |
| background: rgba(0, 240, 255, 0.1); |
| border: 1px solid rgba(0, 240, 255, 0.3); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <div id="stars-container" class="fixed inset-0 overflow-hidden z-0"></div> |
| |
| |
| <nav class="relative z-50 py-6 px-4 sm:px-8 lg:px-16"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-secondary mr-3"></div> |
| <span class="orbitron text-2xl font-bold gradient-text">NEBULA-X</span> |
| </div> |
| |
| <div class="hidden md:flex space-x-8"> |
| <a href="#" class="nav-link">Home</a> |
| <a href="#features" class="nav-link">Features</a> |
| <a href="#technology" class="nav-link">Technology</a> |
| <a href="#mission" class="nav-link">Mission</a> |
| <a href="#contact" class="nav-link">Contact</a> |
| </div> |
| |
| <button class="md:hidden text-white"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </nav> |
| |
| |
| <section class="hero-bg relative z-10 py-20 px-4 sm:px-8 lg:px-16 flex flex-col lg:flex-row items-center justify-between min-h-screen"> |
| <div class="lg:w-1/2 mb-16 lg:mb-0"> |
| <h1 class="orbitron text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6"> |
| <span class="gradient-text">Redefining</span> Space Exploration |
| </h1> |
| <p class="text-lg sm:text-xl text-gray-300 mb-8 max-w-2xl"> |
| Nebula-X introduces revolutionary quantum propulsion technology that will take humanity beyond the solar system. Our advanced space shapes harness cosmic energy for unprecedented speed and efficiency. |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6"> |
| <button class="px-8 py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-bold glow hover:scale-105 transition-transform"> |
| Explore Technology |
| </button> |
| <button class="px-8 py-3 border border-primary text-primary rounded-full font-bold hover:bg-primary hover:bg-opacity-10 transition-colors"> |
| Watch Demo |
| </button> |
| </div> |
| |
| <div class="mt-16"> |
| <h3 class="orbitron text-xl mb-4">Next Launch In:</h3> |
| <div class="flex space-x-4"> |
| <div class="countdown-item px-6 py-3 rounded-lg text-center"> |
| <div class="orbitron text-3xl font-bold" id="days">00</div> |
| <div class="text-sm text-gray-400">Days</div> |
| </div> |
| <div class="countdown-item px-6 py-3 rounded-lg text-center"> |
| <div class="orbitron text-3xl font-bold" id="hours">00</div> |
| <div class="text-sm text-gray-400">Hours</div> |
| </div> |
| <div class="countdown-item px-6 py-3 rounded-lg text-center"> |
| <div class="orbitron text-3xl font-bold" id="minutes">00</div> |
| <div class="text-sm text-gray-400">Minutes</div> |
| </div> |
| <div class="countdown-item px-6 py-3 rounded-lg text-center"> |
| <div class="orbitron text-3xl font-bold" id="seconds">00</div> |
| <div class="text-sm text-gray-400">Seconds</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2 flex justify-center relative"> |
| <div class="space-shape"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-80 h-80 rounded-full border-2 border-primary border-opacity-30 animate-pulse"></div> |
| </div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-64 h-64 rounded-full border border-primary border-opacity-20 animate-pulse delay-100"></div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="features" class="relative z-10 py-20 px-4 sm:px-8 lg:px-16"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="orbitron text-3xl sm:text-4xl md:text-5xl font-bold mb-4"> |
| <span class="gradient-text">Advanced</span> Space Technology |
| </h2> |
| <p class="max-w-2xl mx-auto text-gray-400"> |
| Our proprietary space shapes utilize quantum field manipulation to achieve breakthroughs in propulsion, energy efficiency, and cosmic navigation. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-14 h-14 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-6"> |
| <i class="fas fa-atom text-2xl text-primary"></i> |
| </div> |
| <h3 class="orbitron text-xl font-bold mb-3">Quantum Propulsion</h3> |
| <p class="text-gray-400"> |
| Harnessing quantum vacuum fluctuations for propulsion without traditional fuel, enabling near-light speed travel. |
| </p> |
| </div> |
| |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-14 h-14 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-6"> |
| <i class="fas fa-shield-alt text-2xl text-primary"></i> |
| </div> |
| <h3 class="orbitron text-xl font-bold mb-3">Plasma Shielding</h3> |
| <p class="text-gray-400"> |
| Self-regenerating electromagnetic plasma shield protects against cosmic radiation and micro-meteoroids. |
| </p> |
| </div> |
| |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-14 h-14 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-6"> |
| <i class="fas fa-infinity text-2xl text-primary"></i> |
| </div> |
| <h3 class="orbitron text-xl font-bold mb-3">Morphic Hull</h3> |
| <p class="text-gray-400"> |
| Adaptive nano-material structure that reshapes itself for optimal aerodynamics in any atmosphere. |
| </p> |
| </div> |
| |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-14 h-14 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-6"> |
| <i class="fas fa-solar-panel text-2xl text-primary"></i> |
| </div> |
| <h3 class="orbitron text-xl font-bold mb-3">Dark Energy Harvesting</h3> |
| <p class="text-gray-400"> |
| Collects and converts dark energy particles into usable power, providing limitless energy supply. |
| </p> |
| </div> |
| |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-14 h-14 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-6"> |
| <i class="fas fa-network-wired text-2xl text-primary"></i> |
| </div> |
| <h3 class="orbitron text-xl font-bold mb-3">Neural Navigation</h3> |
| <p class="text-gray-400"> |
| AI-powered quantum navigation system that learns and adapts to cosmic phenomena in real-time. |
| </p> |
| </div> |
| |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-14 h-14 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-6"> |
| <i class="fas fa-tachometer-alt text-2xl text-primary"></i> |
| </div> |
| <h3 class="orbitron text-xl font-bold mb-3">Warp Field Generator</h3> |
| <p class="text-gray-400"> |
| Creates localized space-time warps for short-distance jumps, bypassing conventional speed limits. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="technology" class="relative z-10 py-20 px-4 sm:px-8 lg:px-16 bg-gradient-to-b from-dark to-black"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
| <h2 class="orbitron text-3xl sm:text-4xl md:text-5xl font-bold mb-6"> |
| The <span class="gradient-text">Science</span> Behind Our Design |
| </h2> |
| <p class="text-gray-400 mb-8"> |
| Our space shapes are not just aesthetically revolutionary - they're scientifically groundbreaking. The unique geometry interacts with quantum fields in ways that conventional spacecraft cannot. |
| </p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4 mt-1"> |
| <i class="fas fa-cube text-primary"></i> |
| </div> |
| <div> |
| <h4 class="orbitron font-bold mb-2">Tetrahedral Core Structure</h4> |
| <p class="text-gray-400"> |
| The internal framework uses sacred geometry principles to amplify quantum field interactions. |
| </p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4 mt-1"> |
| <i class="fas fa-wave-square text-primary"></i> |
| </div> |
| <div> |
| <h4 class="orbitron font-bold mb-2">Resonant Frequency Modulation</h4> |
| <p class="text-gray-400"> |
| Precisely tuned electromagnetic oscillations that synchronize with cosmic background radiation. |
| </p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4 mt-1"> |
| <i class="fas fa-project-diagram text-primary"></i> |
| </div> |
| <div> |
| <h4 class="orbitron font-bold mb-2">Fractal Surface Patterns</h4> |
| <p class="text-gray-400"> |
| Nano-scale fractal indentations that reduce interstellar drag by up to 92% compared to smooth surfaces. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2 relative"> |
| <div class="relative w-full aspect-square max-w-lg mx-auto"> |
| <div class="absolute inset-0 rounded-full border-2 border-primary border-opacity-20 animate-pulse"></div> |
| <div class="absolute inset-8 rounded-full border border-primary border-opacity-10 animate-pulse delay-75"></div> |
| <div class="absolute inset-16 rounded-full border border-primary border-opacity-5 animate-pulse delay-100"></div> |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-64 h-64 bg-gradient-to-br from-primary to-secondary rounded-full opacity-10 blur-xl"></div> |
| </div> |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-48 h-48 bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-3xl rotate-45"></div> |
| </div> |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-32 h-32 bg-primary bg-opacity-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-rocket text-4xl text-primary animate-bounce"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="mission" class="relative z-10 py-20 px-4 sm:px-8 lg:px-16"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="orbitron text-3xl sm:text-4xl md:text-5xl font-bold mb-4"> |
| Our <span class="gradient-text">Mission</span> |
| </h2> |
| <p class="max-w-3xl mx-auto text-gray-400"> |
| To push the boundaries of human exploration and establish sustainable pathways to the stars through revolutionary space technology. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| <div class="lg:col-span-2"> |
| <div class="bg-gradient-to-br from-dark to-black p-8 rounded-xl border border-gray-800 h-full"> |
| <h3 class="orbitron text-2xl font-bold mb-6">Upcoming Interstellar Voyage</h3> |
| |
| <div class="flex flex-col sm:flex-row mb-8"> |
| <div class="sm:w-1/2 mb-6 sm:mb-0 sm:pr-4"> |
| <div class="text-primary font-bold mb-2">Destination</div> |
| <div class="text-xl">Proxima Centauri b</div> |
| <div class="text-gray-500 text-sm">4.24 light years away</div> |
| </div> |
| <div class="sm:w-1/2 sm:pl-4"> |
| <div class="text-primary font-bold mb-2">Estimated Travel Time</div> |
| <div class="text-xl">12.7 years</div> |
| <div class="text-gray-500 text-sm">With quantum propulsion</div> |
| </div> |
| </div> |
| |
| <div class="h-px bg-gray-800 w-full my-6"></div> |
| |
| <h4 class="orbitron text-lg font-bold mb-4">Mission Objectives</h4> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> |
| <span>Test quantum propulsion at interstellar distances</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> |
| <span>Search for extraterrestrial microbial life</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> |
| <span>Deploy self-replicating exploration drones</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> |
| <span>Establish first human outpost outside solar system</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div> |
| <div class="bg-gradient-to-br from-dark to-black p-8 rounded-xl border border-gray-800 h-full"> |
| <h3 class="orbitron text-2xl font-bold mb-6">Join the Mission</h3> |
| <p class="text-gray-400 mb-6"> |
| Be part of humanity's greatest adventure. Register your interest for future crew positions or research opportunities. |
| </p> |
| |
| <form class="space-y-4"> |
| <div> |
| <label class="block text-gray-400 mb-2">Name</label> |
| <input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label class="block text-gray-400 mb-2">Email</label> |
| <input type="email" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label class="block text-gray-400 mb-2">Area of Interest</label> |
| <select class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
| <option>Astronaut Program</option> |
| <option>Research Collaboration</option> |
| <option>Investor Inquiry</option> |
| <option>Media Inquiry</option> |
| </select> |
| </div> |
| |
| <button type="submit" class="w-full bg-gradient-to-r from-primary to-secondary py-3 rounded-lg font-bold glow hover:scale-105 transition-transform"> |
| Submit Application |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="relative z-10 py-20 px-4 sm:px-8 lg:px-16 bg-gradient-to-b from-black to-dark"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="orbitron text-3xl sm:text-4xl md:text-5xl font-bold mb-4"> |
| <span class="gradient-text">Trusted</span> By Pioneers |
| </h2> |
| <p class="max-w-2xl mx-auto text-gray-400"> |
| Leading scientists, astronauts, and visionaries endorse our revolutionary approach to space exploration. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-user-astronaut text-primary"></i> |
| </div> |
| <div> |
| <div class="font-bold">Dr. Elena Rodriguez</div> |
| <div class="text-sm text-gray-500">Chief Scientist, ESA</div> |
| </div> |
| </div> |
| <p class="text-gray-400 italic"> |
| "Nebula-X's quantum propulsion technology is the most significant breakthrough I've seen in my 30-year career. It changes everything we thought we knew about interstellar travel." |
| </p> |
| </div> |
| |
| <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-atom text-primary"></i> |
| </div> |
| <div> |
| <div class="font-bold">Prof. James Chen</div> |
| <div class="text-sm text-gray-500">Quantum Physicist, MIT</div> |
| </div> |
| </div> |
| <p class="text-gray-400 italic"> |
| "The fractal surface patterns alone represent a Nobel-worthy innovation in materials science. When combined with their propulsion system, it's truly revolutionary." |
| </p> |
| </div> |
| |
| <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-800"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-space-shuttle text-primary"></i> |
| </div> |
| <div> |
| <div class="font-bold">Cmdr. Sarah Johnson</div> |
| <div class="text-sm text-gray-500">NASA Astronaut (Ret.)</div> |
| </div> |
| </div> |
| <p class="text-gray-400 italic"> |
| "I've flown every spacecraft from the Shuttle to Dragon, but nothing compares to the smoothness and power of Nebula-X's test vehicles. This is the future of spaceflight." |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="contact" class="relative z-10 py-20 px-4 sm:px-8 lg:px-16"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
| <div> |
| <h2 class="orbitron text-3xl sm:text-4xl md:text-5xl font-bold mb-6"> |
| <span class="gradient-text">Contact</span> Our Team |
| </h2> |
| <p class="text-gray-400 mb-8 max-w-lg"> |
| Have questions about our technology or interested in partnership opportunities? Our team of experts is ready to assist you. |
| </p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-map-marker-alt text-primary"></i> |
| </div> |
| <div> |
| <div class="font-bold">Headquarters</div> |
| <div class="text-gray-400">Orbital Campus, Lagrange Point 2</div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-envelope text-primary"></i> |
| </div> |
| <div> |
| <div class="font-bold">Email</div> |
| <div class="text-gray-400">contact@nebula-x.space</div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> |
| <i class="fas fa-phone-alt text-primary"></i> |
| </div> |
| <div> |
| <div class="font-bold">Quantum Link</div> |
| <div class="text-gray-400">+1 (555) QNT-UM-X</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12"> |
| <h3 class="orbitron text-xl font-bold mb-4">Follow Our Journey</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary hover:bg-opacity-20 transition-colors"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary hover:bg-opacity-20 transition-colors"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary hover:bg-opacity-20 transition-colors"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary hover:bg-opacity-20 transition-colors"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="bg-gradient-to-br from-dark to-black p-8 rounded-xl border border-gray-800"> |
| <form class="space-y-6"> |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-400 mb-2">First Name</label> |
| <input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
| </div> |
| <div> |
| <label class="block text-gray-400 mb-2">Last Name</label> |
| <input type="text" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-gray-400 mb-2">Email</label> |
| <input type="email" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label class="block text-gray-400 mb-2">Subject</label> |
| <select class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
| <option>General Inquiry</option> |
| <option>Investment Opportunity</option> |
| <option>Media Request</option> |
| <option>Technical Question</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-gray-400 mb-2">Message</label> |
| <textarea rows="4" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-gradient-to-r from-primary to-secondary py-3 rounded-lg font-bold glow hover:scale-105 transition-transform"> |
| Send Message |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="relative z-10 py-12 px-4 sm:px-8 lg:px-16 border-t border-gray-900"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-6 md:mb-0"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-secondary mr-3"></div> |
| <span class="orbitron text-xl font-bold gradient-text">NEBULA-X</span> |
| </div> |
| |
| <div class="flex flex-wrap justify-center gap-6 mb-6 md:mb-0"> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors">Press</a> |
| </div> |
| |
| <div class="text-gray-500 text-sm"> |
| © 2023 Nebula-X Space Technologies. All rights reserved. |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <div class="fixed bottom-6 right-6 z-50"> |
| <button class="w-14 h-14 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white glow hover:scale-110 transition-transform"> |
| <i class="fas fa-comment-dots text-xl"></i> |
| </button> |
| </div> |
| |
| <script> |
| |
| function createStars() { |
| const container = document.getElementById('stars-container'); |
| const starCount = 200; |
| |
| for (let i = 0; i < starCount; i++) { |
| const star = document.createElement('div'); |
| star.classList.add('star'); |
| |
| |
| const size = Math.random() * 3; |
| const posX = Math.random() * 100; |
| const posY = Math.random() * 100; |
| const duration = 2 + Math.random() * 5; |
| const delay = Math.random() * 5; |
| |
| star.style.width = `${size}px`; |
| star.style.height = `${size}px`; |
| star.style.left = `${posX}%`; |
| star.style.top = `${posY}%`; |
| star.style.setProperty('--duration', `${duration}s`); |
| star.style.animationDelay = `${delay}s`; |
| |
| container.appendChild(star); |
| } |
| } |
| |
| |
| function updateCountdown() { |
| const now = new Date(); |
| const launchDate = new Date(); |
| launchDate.setDate(now.getDate() + 30); |
| |
| const diff = launchDate - now; |
| |
| const days = Math.floor(diff / (1000 * 60 * 60 * 24)); |
| const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); |
| |
| document.getElementById('days').textContent = days.toString().padStart(2, '0'); |
| document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); |
| document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); |
| document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); |
| } |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| |
| |
| window.addEventListener('DOMContentLoaded', () => { |
| createStars(); |
| updateCountdown(); |
| setInterval(updateCountdown, 1000); |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fadeIn'); |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| document.querySelectorAll('.feature-card, .space-shape').forEach(el => { |
| observer.observe(el); |
| }); |
| }); |
| </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=Jip7e/spacex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
