|
|
<!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> |
