Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus Frontiers | Robotics, AI & Cosmology</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cosmic: { | |
| 100: '#e0e7ff', | |
| 200: '#c7d2fe', | |
| 300: '#a5b4fc', | |
| 400: '#818cf8', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| 800: '#3730a3', | |
| 900: '#312e81', | |
| }, | |
| nebula: { | |
| 100: '#f0f9ff', | |
| 200: '#e0f2fe', | |
| 300: '#bae6fd', | |
| 400: '#7dd3fc', | |
| 500: '#38bdf8', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| quantum: { | |
| 100: '#f5f3ff', | |
| 200: '#ede9fe', | |
| 300: '#ddd6fe', | |
| 400: '#c4b5fd', | |
| 500: '#a78bfa', | |
| 600: '#8b5cf6', | |
| 700: '#7c3aed', | |
| 800: '#6d28d9', | |
| 900: '#5b21b6', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| orbitron: ['Orbitron', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 5s infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .hero-gradient { | |
| background: radial-gradient(circle at 10% 20%, rgba(67, 56, 202, 0.15) 0%, rgba(15, 23, 42, 1) 60%); | |
| } | |
| .float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4); | |
| } | |
| .cosmic-border { | |
| position: relative; | |
| } | |
| .cosmic-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(135deg, #6366f1, #8b5cf6, #38bdf8); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900/80 backdrop-blur-md fixed w-full z-50 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cosmic-500 to-quantum-500 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white text-xs"></i> | |
| </div> | |
| <span class="ml-2 text-white font-bold text-xl font-orbitron">NEXUS</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#home" class="text-cosmic-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a> | |
| <a href="#solutions" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Solutions</a> | |
| <a href="#research" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Research</a> | |
| <a href="#team" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Team</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity"> | |
| Join Our Mission | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="text-cosmic-300 block px-3 py-2 rounded-md text-base font-medium">Home</a> | |
| <a href="#solutions" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Solutions</a> | |
| <a href="#research" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Research</a> | |
| <a href="#team" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a> | |
| <button class="bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white block w-full text-left px-3 py-2 rounded-md text-base font-medium mt-2"> | |
| Join Our Mission | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold font-orbitron tracking-tight text-white mb-6"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-cosmic-400 to-nebula-400">Pioneering the Future</span> | |
| </h1> | |
| <p class="mt-6 text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Where robotics, artificial intelligence, and cosmology converge to solve humanity's greatest challenges and explore the universe's deepest mysteries. | |
| </p> | |
| <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#solutions" class="px-8 py-3 bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white font-medium rounded-md hover:opacity-90 transition-opacity"> | |
| Explore Our Work | |
| </a> | |
| <a href="#contact" class="px-8 py-3 border border-cosmic-500 text-cosmic-300 font-medium rounded-md hover:bg-cosmic-900/30 transition-colors"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="w-12 h-12 rounded-full bg-cosmic-900 flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-cosmic-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Advanced Robotics</h3> | |
| <p class="text-gray-400">Developing autonomous systems that operate in extreme environments from deep oceans to outer space.</p> | |
| </div> | |
| <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="w-12 h-12 rounded-full bg-cosmic-900 flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-quantum-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Artificial Intelligence</h3> | |
| <p class="text-gray-400">Creating self-learning algorithms that accelerate scientific discovery and technological innovation.</p> | |
| </div> | |
| <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="w-12 h-12 rounded-full bg-cosmic-900 flex items-center justify-center mb-4"> | |
| <i class="fas fa-meteor text-nebula-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-white mb-2">Cosmology Research</h3> | |
| <p class="text-gray-400">Unraveling the mysteries of dark matter, cosmic inflation, and the fundamental nature of reality.</p> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-cosmic-500/10 blur-3xl"></div> | |
| <div class="absolute top-1/3 right-1/4 w-72 h-72 rounded-full bg-quantum-500/10 blur-3xl"></div> | |
| <div class="absolute bottom-1/4 right-1/3 w-80 h-80 rounded-full bg-nebula-500/10 blur-3xl"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-sm font-semibold tracking-wider text-cosmic-400 uppercase">Our Solutions</span> | |
| <h2 class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-orbitron"> | |
| Bridging <span class="text-cosmic-400">Technology</span> and <span class="text-nebula-400">Cosmos</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-400 mx-auto"> | |
| We develop integrated solutions that push the boundaries of what's possible. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="relative cosmic-border rounded-2xl overflow-hidden bg-gray-800 p-8"> | |
| <div class="absolute -right-10 -top-10 w-32 h-32 rounded-full bg-cosmic-500/20 blur-xl"></div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-cosmic-900/50 p-3 rounded-lg"> | |
| <i class="fas fa-satellite-dish text-cosmic-400 text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold text-white">Autonomous Space Probes</h3> | |
| <p class="mt-2 text-gray-400"> | |
| Our AI-driven robotic probes can autonomously navigate and conduct scientific experiments in deep space environments. | |
| </p> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-cosmic-400 mr-2"></i> | |
| <span class="text-gray-300">Self-learning navigation systems</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-cosmic-400 mr-2"></i> | |
| <span class="text-gray-300">Quantum communication enabled</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-cosmic-400 mr-2"></i> | |
| <span class="text-gray-300">Adaptive scientific instrumentation</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative cosmic-border rounded-2xl overflow-hidden bg-gray-800 p-8"> | |
| <div class="absolute -left-10 -bottom-10 w-32 h-32 rounded-full bg-quantum-500/20 blur-xl"></div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-quantum-900/50 p-3 rounded-lg"> | |
| <i class="fas fa-network-wired text-quantum-400 text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold text-white">Cosmic Data Network</h3> | |
| <p class="mt-2 text-gray-400"> | |
| A distributed AI system that processes astronomical data from telescopes worldwide to detect cosmic patterns. | |
| </p> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-quantum-400 mr-2"></i> | |
| <span class="text-gray-300">Real-time galaxy mapping</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-quantum-400 mr-2"></i> | |
| <span class="text-gray-300">Anomaly detection algorithms</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-quantum-400 mr-2"></i> | |
| <span class="text-gray-300">Predictive cosmology models</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative cosmic-border rounded-2xl overflow-hidden bg-gray-800 p-8"> | |
| <div class="absolute -right-10 -bottom-10 w-32 h-32 rounded-full bg-nebula-500/20 blur-xl"></div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-nebula-900/50 p-3 rounded-lg"> | |
| <i class="fas fa-user-astronaut text-nebula-400 text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold text-white">Exo-Humanoid Robotics</h3> | |
| <p class="mt-2 text-gray-400"> | |
| Humanoid robots designed for extraterrestrial environments with advanced AI for autonomous operation. | |
| </p> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-400 mr-2"></i> | |
| <span class="text-gray-300">Multi-environment adaptability</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-400 mr-2"></i> | |
| <span class="text-gray-300">Human-AI collaboration systems</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-nebula-400 mr-2"></i> | |
| <span class="text-gray-300">Self-repair capabilities</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative cosmic-border rounded-2xl overflow-hidden bg-gray-800 p-8"> | |
| <div class="absolute -left-10 -top-10 w-32 h-32 rounded-full bg-cosmic-500/20 blur-xl"></div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-cosmic-900/50 p-3 rounded-lg"> | |
| <i class="fas fa-atom text-cosmic-400 text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold text-white">Quantum AI Laboratory</h3> | |
| <p class="mt-2 text-gray-400"> | |
| Merging quantum computing with artificial intelligence to solve complex cosmological problems. | |
| </p> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-cosmic-400 mr-2"></i> | |
| <span class="text-gray-300">Quantum neural networks</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-cosmic-400 mr-2"></i> | |
| <span class="text-gray-300">Dark matter simulations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-cosmic-400 mr-2"></i> | |
| <span class="text-gray-300">Multiverse theory testing</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Research Section --> | |
| <section id="research" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900/50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-sm font-semibold tracking-wider text-nebula-400 uppercase">Cutting Edge Research</span> | |
| <h2 class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-orbitron"> | |
| Exploring the <span class="text-quantum-400">Frontiers</span> of Science | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-400 mx-auto"> | |
| Our interdisciplinary approach leads to breakthroughs at the intersection of technology and cosmology. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> | |
| <div class="relative"> | |
| <div class="relative rounded-2xl overflow-hidden bg-gradient-to-br from-gray-800 to-gray-900 p-1"> | |
| <div class="bg-gray-900 rounded-xl p-6"> | |
| <div class="flex flex-col space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-cosmic-900/50 p-2 rounded-md"> | |
| <i class="fas fa-stars text-cosmic-400 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-semibold text-white">Dark Matter Mapping</h3> | |
| <p class="mt-1 text-gray-400"> | |
| Using AI to analyze gravitational lensing patterns and create the most detailed dark matter maps ever produced. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-quantum-900/50 p-2 rounded-md"> | |
| <i class="fas fa-infinity text-quantum-400 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-semibold text-white">Quantum Gravity Models</h3> | |
| <p class="mt-1 text-gray-400"> | |
| Developing new theoretical frameworks that reconcile quantum mechanics with general relativity. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-nebula-900/50 p-2 rounded-md"> | |
| <i class="fas fa-rocket text-nebula-400 text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-semibold text-white">Exoplanet Exploration</h3> | |
| <p class="mt-1 text-gray-400"> | |
| Autonomous robotic systems designed to identify and analyze potentially habitable exoplanets. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -z-10 -top-6 -left-6 w-64 h-64 rounded-full bg-cosmic-500/10 blur-3xl"></div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-6 font-orbitron">Our Research Methodology</h3> | |
| <p class="text-gray-400 mb-6"> | |
| At Nexus Frontiers, we combine computational power with human creativity to tackle the universe's greatest mysteries. Our unique approach integrates: | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-cosmic-900/50 text-cosmic-400"> | |
| <span class="text-xl font-bold">1</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Robotic Data Collection</h4> | |
| <p class="mt-2 text-gray-400"> | |
| Autonomous systems gather data from extreme environments across Earth and space. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-quantum-900/50 text-quantum-400"> | |
| <span class="text-xl font-bold">2</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">AI Analysis</h4> | |
| <p class="mt-2 text-gray-400"> | |
| Machine learning algorithms process vast datasets to identify patterns invisible to human researchers. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-nebula-900/50 text-nebula-400"> | |
| <span class="text-xl font-bold">3</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Theoretical Innovation</h4> | |
| <p class="mt-2 text-gray-400"> | |
| Our cosmologists develop new models based on computational findings, creating a virtuous cycle of discovery. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gray-800/50 rounded-2xl p-8 border border-gray-700"> | |
| <div class="text-center"> | |
| <h3 class="text-2xl font-bold text-white mb-4 font-orbitron">Recent Breakthrough</h3> | |
| <p class="text-xl text-nebula-300 max-w-3xl mx-auto"> | |
| "Our AI system discovered a previously unknown correlation between quantum fluctuations and galaxy formation patterns." | |
| </p> | |
| <div class="mt-8 flex justify-center"> | |
| <button class="px-6 py-3 bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white font-medium rounded-md hover:opacity-90 transition-opacity"> | |
| Read the White Paper | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section id="team" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-sm font-semibold tracking-wider text-cosmic-400 uppercase">Our Visionaries</span> | |
| <h2 class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-orbitron"> | |
| The <span class="text-nebula-400">Minds</span> Behind the Mission | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-400 mx-auto"> | |
| A multidisciplinary team of scientists, engineers, and thinkers pushing boundaries. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="relative mb-6"> | |
| <img class="w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Dr. Elena Rodriguez"> | |
| <div class="absolute -bottom-2 -right-2 bg-cosmic-600 rounded-full p-1"> | |
| <div class="bg-cosmic-900 rounded-full p-1"> | |
| <i class="fas fa-robot text-white text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Dr. Elena Rodriguez</h3> | |
| <p class="text-cosmic-400">Chief Robotics Engineer</p> | |
| <p class="mt-3 text-gray-400"> | |
| Former NASA roboticist specializing in autonomous systems for space exploration. | |
| </p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-cosmic-400 transition-colors"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cosmic-400 transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cosmic-400 transition-colors"> | |
| <i class="fas fa-paperclip"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="relative mb-6"> | |
| <img class="w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Dr. Raj Patel"> | |
| <div class="absolute -bottom-2 -right-2 bg-quantum-600 rounded-full p-1"> | |
| <div class="bg-quantum-900 rounded-full p-1"> | |
| <i class="fas fa-brain text-white text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Dr. Raj Patel</h3> | |
| <p class="text-quantum-400">AI Research Director</p> | |
| <p class="mt-3 text-gray-400"> | |
| Pioneer in neural networks for scientific discovery, with 50+ published papers. | |
| </p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-quantum-400 transition-colors"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-quantum-400 transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-quantum-400 transition-colors"> | |
| <i class="fas fa-paperclip"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 card-hover"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="relative mb-6"> | |
| <img class="w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Dr. Sophia Chen"> | |
| <div class="absolute -bottom-2 -right-2 bg-nebula-600 rounded-full p-1"> | |
| <div class="bg-nebula-900 rounded-full p-1"> | |
| <i class="fas fa-meteor text-white text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Dr. Sophia Chen</h3> | |
| <p class="text-nebula-400">Chief Cosmologist</p> | |
| <p class="mt-3 text-gray-400"> | |
| Theoretical physicist specializing in dark energy and multiverse theories. | |
| </p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-nebula-400 transition-colors"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-nebula-400 transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-nebula-400 transition-colors"> | |
| <i class="fas fa-paperclip"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <h3 class="text-2xl font-bold text-white mb-6 font-orbitron">Join Our Team</h3> | |
| <p class="text-gray-400 max-w-2xl mx-auto mb-8"> | |
| We're always looking for brilliant minds passionate about pushing the boundaries of science and technology. | |
| </p> | |
| <button class="px-8 py-3 bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white font-medium rounded-md hover:opacity-90 transition-opacity"> | |
| View Open Positions | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-gray-900/80"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <span class="text-sm font-semibold tracking-wider text-nebula-400 uppercase">Get In Touch</span> | |
| <h2 class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl font-orbitron"> | |
| Let's <span class="text-cosmic-400">Explore</span> Together | |
| </h2> | |
| <p class="mt-4 text-xl text-gray-400"> | |
| Whether you're interested in collaboration, investment opportunities, or just want to discuss the future of technology and cosmology, we'd love to hear from you. | |
| </p> | |
| <div class="mt-8 space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-cosmic-900/50 p-2 rounded-md"> | |
| <i class="fas fa-envelope text-cosmic-400"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Email Us</h3> | |
| <p class="mt-1 text-gray-400">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-quantum-900/50 p-2 rounded-md"> | |
| <i class="fas fa-map-marker-alt text-quantum-400"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Visit Us</h3> | |
| <p class="mt-1 text-gray-400">42 Stellar Drive, Quantum Valley, CA 94025</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-nebula-900/50 p-2 rounded-md"> | |
| <i class="fas fa-phone-alt text-nebula-400"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Call Us</h3> | |
| <p class="mt-1 text-gray-400">+1 (555) 314-1592</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium text-white mb-4">Follow Our Journey</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cosmic-600 transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cosmic-600 transition-colors"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cosmic-600 transition-colors"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cosmic-600 transition-colors"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300">Full Name</label> | |
| <div class="mt-1"> | |
| <input type="text" id="name" name="name" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-cosmic-500 focus:border-cosmic-500 block w-full p-2.5" placeholder="Your name" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300">Email Address</label> | |
| <div class="mt-1"> | |
| <input type="email" id="email" name="email" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-cosmic-500 focus:border-cosmic-500 block w-full p-2.5" placeholder="[email protected]" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-300">Subject</label> | |
| <div class="mt-1"> | |
| <select id="subject" name="subject" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-cosmic-500 focus:border-cosmic-500 block w-full p-2.5"> | |
| <option value="" disabled selected>Select a topic</option> | |
| <option value="collaboration">Research Collaboration</option> | |
| <option value="investment">Investment Opportunities</option> | |
| <option value="partnership">Technology Partnership</option> | |
| <option value="media">Media Inquiry</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300">Your Message</label> | |
| <div class="mt-1"> | |
| <textarea id="message" name="message" rows="4" class="bg-gray-900 border border-gray-700 text-white text-sm rounded-lg focus:ring-cosmic-500 focus:border-cosmic-500 block w-full p-2.5" placeholder="How can we help you explore the frontiers of science?" required></textarea> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="privacy-policy" name="privacy-policy" type="checkbox" class="h-4 w-4 text-cosmic-600 focus:ring-cosmic-500 border-gray-600 rounded"> | |
| <label for="privacy-policy" class="ml-2 block text-sm text-gray-300"> | |
| I agree to the <a href="#" class="text-cosmic-400 hover:underline">Privacy Policy</a> | |
| </label> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-cosmic-600 to-quantum-600 text-white font-medium rounded-lg text-sm px-5 py-2.5 text-center hover:opacity-90 transition-opacity"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cosmic-500 to-quantum-500 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white text-xs"></i> | |
| </div> | |
| <span class="ml-2 text-white font-bold text-xl font-orbitron">NEXUS</span> | |
| </div> | |
| <p class="mt-4 text-gray-400"> | |
| Pioneering the convergence of robotics, artificial intelligence, and cosmology to expand human knowledge and capabilities. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Solutions</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Autonomous Space Probes</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Cosmic Data Network</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Exo-Humanoid Robotics</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Quantum AI Laboratory</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Research</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Dark Matter Mapping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Quantum Gravity</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Exoplanet Exploration</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Publications</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">News</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 Nexus Frontiers. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true'; | |
| mobileMenuButton.setAttribute('aria-expanded', !expanded); | |
| mobileMenu.classList.toggle('hidden'); | |
| // Change icon | |
| const icon = mobileMenuButton.querySelector('i'); | |
| if (expanded) { | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| } else { | |
| icon.classList.remove('fa-bars'); | |
| icon.classList.add('fa-times'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| mobileMenuButton.setAttribute('aria-expanded', 'false'); | |
| const icon = mobileMenuButton.querySelector('i'); | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| } | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // In a real implementation, you would send the form data to your server | |
| alert('Thank you for your message! We will get back to you soon.'); | |
| contactForm.reset(); | |
| }); | |
| } | |
| // Scroll animation | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.card-hover, [class*="animate-"]'); | |
| elements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementTop < windowHeight - 100) { | |
| element.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', animateOnScroll); | |
| window.addEventListener('load', animateOnScroll); | |
| </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=sprakhar778/nexus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |