Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Star Foundation | Mining the Future of Intelligence</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=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #0a0e17; | |
| color: #e0e0e0; | |
| overflow-x: hidden; | |
| } | |
| .hero-bg { | |
| background: radial-gradient(circle at 50% 50%, #0f172a 0%, #020617 100%); | |
| } | |
| .star-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .mining-card { | |
| transition: all 0.3s ease; | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .mining-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); | |
| border-color: rgba(59, 130, 246, 0.5); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .animated-star { | |
| position: absolute; | |
| width: 2px; | |
| height: 2px; | |
| background: white; | |
| border-radius: 50%; | |
| animation: twinkle 4s infinite; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: 0.2; } | |
| 50% { opacity: 1; } | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 2px solid #3b82f6; | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #3b82f6 } | |
| } | |
| </style> | |
| </head> | |
| <body class="star-pattern"> | |
| <!-- Stars Background Animation --> | |
| <div id="stars-container" class="fixed inset-0 overflow-hidden pointer-events-none z-0"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-xl"> | |
| SF | |
| </div> | |
| <span class="ml-3 text-xl font-bold text-white hidden md:block">Star Foundation</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#home" class="nav-link text-white px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">About</a> | |
| <a href="#vision" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Vision</a> | |
| <a href="#mining" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Space Mining</a> | |
| <a href="#grants" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Grants</a> | |
| <a href="#discoveries" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Discoveries</a> | |
| <a href="#join" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Join Us</a> | |
| </div> | |
| <div class="flex items-center md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-900"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 text-base font-medium text-white">Home</a> | |
| <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">About</a> | |
| <a href="#vision" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Vision</a> | |
| <a href="#mining" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Space Mining</a> | |
| <a href="#grants" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Grants</a> | |
| <a href="#discoveries" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Discoveries</a> | |
| <a href="#join" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Join Us</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-bg min-h-screen flex items-center justify-center relative overflow-hidden pt-16"> | |
| <div class="absolute inset-0 z-10 flex items-center justify-center"> | |
| <div class="w-64 h-64 rounded-full bg-blue-500 opacity-20 filter blur-3xl"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 z-20 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6"> | |
| <span class="gradient-text">Mining the Future</span> of Intelligence | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto"> | |
| Extracting the universe's most precious resources: human intelligence and information. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#mining" class="px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-indigo-700 transition duration-300 transform hover:scale-105"> | |
| Explore Information Mining | |
| </a> | |
| <a href="#grants" class="px-8 py-4 border border-blue-500 text-blue-400 font-medium rounded-lg hover:bg-blue-900 hover:bg-opacity-30 transition duration-300 transform hover:scale-105"> | |
| Apply for Grants | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 flex justify-center z-20"> | |
| <a href="#about" class="text-gray-400 hover:text-white animate-bounce"> | |
| <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4"> | |
| About <span class="gradient-text">Star Foundation</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-indigo-600 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl blur opacity-25"></div> | |
| <div class="relative bg-gray-900 rounded-xl p-8 h-full border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-4">Our Foundation</h3> | |
| <p class="text-gray-300 mb-6"> | |
| Star Foundation is a pioneering organization dedicated to the future of space mining. | |
| We focus on developing the infrastructure and knowledge needed to extract resources beyond Earth. | |
| </p> | |
| <p class="text-gray-300 mb-6"> | |
| Our first phase is centered on <span class="text-blue-400">Information Mining</span> - the extraction and utilization of human knowledge, | |
| scientific discoveries, and data systems that will power our journey to the stars. | |
| </p> | |
| <div class="flex items-center mt-8"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-map-marker-alt text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-white font-medium">Registered in</h4> | |
| <p class="text-gray-400">Crypto Valley, Switzerland</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Our Governance</h3> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-network-wired"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Decentralized Structure</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Utilizing blockchain technology for transparent decision-making and fund allocation. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Expert Council</h4> | |
| <p class="text-gray-400 mt-1"> | |
| A multidisciplinary team of scientists, engineers, and visionaries guiding our mission. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-lock-open"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Open Participation</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Researchers and contributors worldwide can participate through our Web3 ecosystem. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Vision Section --> | |
| <section id="vision" class="py-20 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-10"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-blue-500 filter blur-3xl"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-indigo-500 filter blur-3xl"></div> | |
| </div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4"> | |
| Our <span class="gradient-text">Vision & Mission</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-indigo-600 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 mb-16"> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-8 border border-gray-800 backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center text-blue-400 mr-4"> | |
| <i class="fas fa-eye text-xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white">Vision</h3> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| To become the first "Mining Bank" of the space civilization era, facilitating the transition from Earth-based to space-based resource extraction. | |
| </p> | |
| <p class="text-gray-300"> | |
| We envision a future where humanity's economic foundation extends beyond our planet, powered by intelligent systems that can identify, extract, and utilize extraterrestrial resources. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-xl p-8 border border-gray-800 backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center text-indigo-400 mr-4"> | |
| <i class="fas fa-bullseye text-xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white">Mission</h3> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| To bridge human intelligence with solar system resources through a phased approach to space mining. | |
| </p> | |
| <p class="text-gray-300"> | |
| Starting with Information Mining on Earth, we're developing the knowledge and technologies needed for Energy and Material Mining in space, creating a sustainable pathway to an interplanetary economy. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="text-center mb-12"> | |
| <h3 class="text-2xl md:text-3xl font-bold text-white mb-6"> | |
| The Three <span class="gradient-text">Mining Paradigms</span> | |
| </h3> | |
| <p class="text-gray-400 max-w-3xl mx-auto"> | |
| Our approach to space resource utilization is built on three foundational pillars: | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="mining-card rounded-xl p-6 hover:glow"> | |
| <div class="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center text-blue-400 mb-4 mx-auto"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white text-center mb-3">Information Mining</h4> | |
| <p class="text-gray-400 text-center"> | |
| Extraction and utilization of human knowledge, scientific discoveries, and data systems that power our spacefaring civilization. | |
| </p> | |
| </div> | |
| <div class="mining-card rounded-xl p-6 hover:glow"> | |
| <div class="w-16 h-16 rounded-full bg-purple-900 flex items-center justify-center text-purple-400 mb-4 mx-auto"> | |
| <i class="fas fa-bolt text-2xl"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white text-center mb-3">Energy Mining</h4> | |
| <p class="text-gray-400 text-center"> | |
| Harvesting and transmitting space-based energy sources including solar, nuclear, and potential new forms of cosmic energy. | |
| </p> | |
| </div> | |
| <div class="mining-card rounded-xl p-6 hover:glow"> | |
| <div class="w-16 h-16 rounded-full bg-indigo-900 flex items-center justify-center text-indigo-400 mb-4 mx-auto"> | |
| <i class="fas fa-atom text-2xl"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-white text-center mb-3">Material Mining</h4> | |
| <p class="text-gray-400 text-center"> | |
| Extraction and processing of physical resources from asteroids, moons, and other celestial bodies including metals, water, and rare elements. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Space Mining Section --> | |
| <section id="mining" class="py-20 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4"> | |
| <span class="gradient-text">Space Mining</span> Introduction | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-indigo-600 mx-auto"></div> | |
| </div> | |
| <div class="mb-16 rounded-xl overflow-hidden border border-gray-800"> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-900 flex items-center justify-center"> | |
| <div class="w-full h-full flex items-center justify-center relative"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-900 to-indigo-900 opacity-30"></div> | |
| <div class="relative z-10 text-center p-8"> | |
| <i class="fas fa-play-circle text-6xl text-blue-400 mb-4 opacity-80"></i> | |
| <h3 class="text-2xl font-bold text-white mb-2">Space Mining: The Next Frontier</h3> | |
| <p class="text-gray-300 max-w-2xl mx-auto"> | |
| Watch our introductory video to understand how we're approaching the challenge of extraterrestrial resource extraction. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> | |
| <div class="mining-card rounded-xl p-8 hover:glow"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center text-blue-400 mr-4"> | |
| <i class="fas fa-brain text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Information Mining</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| The foundation of our spacefaring future lies in the effective mining and utilization of information resources: | |
| </p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> | |
| <span>Human knowledge and cognitive systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> | |
| <span>Scientific discoveries and research data</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> | |
| <span>Computational and AI systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i> | |
| <span>Cultural and historical knowledge archives</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mining-card rounded-xl p-8 hover:glow"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center text-purple-400 mr-4"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Energy Mining</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| The next phase focuses on harvesting cosmic energy sources to power our expansion: | |
| </p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>Space-based solar power collection</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>Nuclear energy systems for space applications</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>Wireless energy transmission technologies</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> | |
| <span>Novel energy harvesting methods</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mining-card rounded-xl p-8 hover:glow"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center text-indigo-400 mr-4"> | |
| <i class="fas fa-atom text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Material Mining</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| The ultimate goal: extracting physical resources from celestial bodies: | |
| </p> | |
| <ul class="text-gray-400 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i> | |
| <span>Asteroid metal mining (iron, nickel, platinum)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i> | |
| <span>Water extraction from lunar and asteroid sources</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i> | |
| <span>Rare earth and precious element recovery</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i> | |
| <span>In-situ resource utilization (ISRU) technologies</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-6 text-center">Why Information Mining First?</h3> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <p class="text-gray-400 mb-6"> | |
| Before we can effectively mine physical resources in space, we must first mine the information that will make it possible. This includes: | |
| </p> | |
| <ul class="text-gray-400 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <span class="ml-3">Scientific breakthroughs in materials and propulsion</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <span class="ml-3">Advanced robotics and autonomous systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <span class="ml-3">Space resource identification and mapping</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 mb-6"> | |
| Our current focus areas in Information Mining: | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 rounded-full bg-blue-900 bg-opacity-50 text-blue-400 text-sm">Life Sciences</span> | |
| <span class="px-3 py-1 rounded-full bg-blue-900 bg-opacity-50 text-blue-400 text-sm">Space Technology</span> | |
| <span class="px-3 py-1 rounded-full bg-blue-900 bg-opacity-50 text-blue-400 text-sm">Energy Systems</span> | |
| <span class="px-3 py-1 rounded-full bg-blue-900 bg-opacity-50 text-blue-400 text-sm">AI & Robotics</span> | |
| <span class="px-3 py-1 rounded-full bg-blue-900 bg-opacity-50 text-blue-400 text-sm">Data Science</span> | |
| <span class="px-3 py-1 rounded-full bg-blue-900 bg-opacity-50 text-blue-400 text-sm">Materials Science</span> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#grants" class="inline-flex items-center text-blue-400 hover:text-white"> | |
| Learn about our grant programs | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Grants Section --> | |
| <section id="grants" class="py-20 bg-gradient-to-b from-black to-gray-900 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4"> | |
| <span class="gradient-text">Grants & Investments</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-indigo-600 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 mb-16"> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Supporting Information Mining</h3> | |
| <p class="text-gray-400 mb-6"> | |
| Star Foundation provides funding and resources to researchers and organizations working on projects that advance our understanding and capabilities in Information Mining. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-flask"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Research Grants</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Funding for academic and independent research in key focus areas. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Technology Development</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Support for prototyping and testing new technologies. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-network-wired"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Open Source Initiatives</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Funding for projects that create open tools and platforms. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Application Process</h3> | |
| <div class="space-y-8"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-blue-900 text-blue-400 font-bold text-lg"> | |
| 1 | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Submit Proposal</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Present your project idea through our online portal. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-blue-900 text-blue-400 font-bold text-lg"> | |
| 2 | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Technical Review</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Our expert panel evaluates the scientific merit and alignment with our goals. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-blue-900 text-blue-400 font-bold text-lg"> | |
| 3 | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Funding Decision</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Successful applicants receive funding and resources. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-blue-500 text-blue-400 font-medium rounded-lg hover:bg-blue-900 hover:bg-opacity-30 transition duration-300"> | |
| Apply for Grants | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mb-12"> | |
| <h3 class="text-2xl md:text-3xl font-bold text-white mb-6"> | |
| Featured <span class="gradient-text">Projects</span> | |
| </h3> | |
| <p class="text-gray-400 max-w-3xl mx-auto"> | |
| Some of the groundbreaking work we're supporting through our grant programs: | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="mining-card rounded-xl overflow-hidden hover:glow"> | |
| <div class="h-48 bg-gradient-to-br from-blue-900 to-indigo-900 flex items-center justify-center"> | |
| <i class="fas fa-brain text-5xl text-blue-400 opacity-70"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-bold text-white mb-2">Neural Interface Systems</h4> | |
| <p class="text-gray-400 text-sm mb-4">University of Zurich</p> | |
| <p class="text-gray-400 mb-4"> | |
| Developing advanced brain-computer interfaces for space applications. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-blue-400 text-sm">2022-2024</span> | |
| <span class="text-gray-500 text-sm">$2.4M</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mining-card rounded-xl overflow-hidden hover:glow"> | |
| <div class="h-48 bg-gradient-to-br from-purple-900 to-indigo-900 flex items-center justify-center"> | |
| <i class="fas fa-robot text-5xl text-purple-400 opacity-70"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-bold text-white mb-2">Autonomous Mining Robots</h4> | |
| <p class="text-gray-400 text-sm mb-4">ETH Zurich</p> | |
| <p class="text-gray-400 mb-4"> | |
| AI-powered robotic systems for extraterrestrial resource identification. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-purple-400 text-sm">2023-2025</span> | |
| <span class="text-gray-500 text-sm">$3.1M</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mining-card rounded-xl overflow-hidden hover:glow"> | |
| <div class="h-48 bg-gradient-to-br from-indigo-900 to-blue-900 flex items-center justify-center"> | |
| <i class="fas fa-database text-5xl text-indigo-400 opacity-70"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-bold text-white mb-2">Space Data Commons</h4> | |
| <p class="text-gray-400 text-sm mb-4">Open Source Initiative</p> | |
| <p class="text-gray-400 mb-4"> | |
| Decentralized platform for sharing space research data. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-400 text-sm">2021-2023</span> | |
| <span class="text-gray-500 text-sm">$1.8M</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Discoveries Section --> | |
| <section id="discoveries" class="py-20 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4"> | |
| Scientific <span class="gradient-text">Discoveries</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-indigo-600 mx-auto"></div> | |
| </div> | |
| <div class="mb-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <h3 class="text-2xl font-bold text-white mb-4 md:mb-0"> | |
| From <span class="text-blue-400">Information Mining</span> | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-900 bg-opacity-50 text-blue-400 rounded-lg text-sm">All</button> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm">Life Sciences</button> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm">Space Tech</button> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm">Energy</button> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm">Software</button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 hover:border-blue-500 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400 mr-3"> | |
| <i class="fas fa-dna"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Life Sciences</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-3">Genetic Adaptations for Space</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Discovered genetic markers that may help humans adapt to long-duration spaceflight. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Published: June 2023</span> | |
| <a href="#" class="text-blue-400 hover:text-white text-sm flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 hover:border-blue-500 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center text-purple-400 mr-3"> | |
| <i class="fas fa-satellite"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Space Tech</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-3">Asteroid Composition AI</h4> | |
| <p class="text-gray-400 mb-4"> | |
| New AI model can predict asteroid composition with 92% accuracy from spectral data. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Published: April 2023</span> | |
| <a href="#" class="text-blue-400 hover:text-white text-sm flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 hover:border-blue-500 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-900 flex items-center justify-center text-indigo-400 mr-3"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Energy</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-3">Wireless Power Breakthrough</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Achieved 85% efficiency in kilometer-scale wireless energy transmission. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Published: February 2023</span> | |
| <a href="#" class="text-blue-400 hover:text-white text-sm flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 hover:border-blue-500 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400 mr-3"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Software</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-3">Decentralized Research Network</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Launched open platform for collaborative space research with 5,000+ active users. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Published: January 2023</span> | |
| <a href="#" class="text-blue-400 hover:text-white text-sm flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 hover:border-blue-500 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center text-purple-400 mr-3"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Materials</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-3">Lunar Concrete Formula</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Developed construction material using simulated lunar regolith with 3x Earth concrete strength. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Published: December 2022</span> | |
| <a href="#" class="text-blue-400 hover:text-white text-sm flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 hover:border-blue-500 transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-900 flex items-center justify-center text-indigo-400 mr-3"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Neuroscience</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-3">Cognitive Load in Microgravity</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Identified neural patterns that explain decreased cognitive performance in microgravity. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Published: October 2022</span> | |
| <a href="#" class="text-blue-400 hover:text-white text-sm flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-6 text-center">Research Impact</h3> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-blue-400 mb-2">47</div> | |
| <div class="text-gray-400">Peer-reviewed publications</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-purple-400 mb-2">12</div> | |
| <div class="text-gray-400">Patent applications</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-indigo-400 mb-2">5</div> | |
| <div class="text-gray-400">Technologies in space trials</div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h4 class="text-xl font-bold text-white mb-2">Research Hotspots</h4> | |
| <p class="text-gray-400 max-w-md"> | |
| The most active areas of research in our Information Mining initiative: | |
| </p> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-4 py-2 rounded-full bg-blue-900 bg-opacity-50 text-blue-400">AI & Machine Learning</span> | |
| <span class="px-4 py-2 rounded-full bg-purple-900 bg-opacity-50 text-purple-400">Space Neuroscience</span> | |
| <span class="px-4 py-2 rounded-full bg-indigo-900 bg-opacity-50 text-indigo-400">Autonomous Systems</span> | |
| <span class="px-4 py-2 rounded-full bg-blue-900 bg-opacity-50 text-blue-400">Materials Informatics</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Join Us Section --> | |
| <section id="join" class="py-20 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden"> | |
| <div class="absolute inset-0 z-0 opacity-20"> | |
| <div class="absolute top-0 left-0 w-full h-full"> | |
| <div class="absolute top-1/3 left-1/4 w-64 h-64 rounded-full bg-blue-500 filter blur-3xl"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-indigo-500 filter blur-3xl"></div> | |
| </div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4"> | |
| <span class="gradient-text">Join Us</span> in Shaping the Future | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-indigo-600 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 mb-16"> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Become Part of Our Mission</h3> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Researchers & Scientists</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Contribute your expertise to our Information Mining initiatives. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-hand-holding-usd"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Investors & Partners</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Support our mission through strategic partnerships and funding. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Advisors & Visionaries</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Help guide our long-term strategy and technological direction. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Developers & Engineers</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Build the systems and infrastructure that will power our spacefaring future. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Headquarters</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Crypto Valley, Zug, Switzerland | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Email</h4> | |
| <p class="text-gray-400 mt-1"> | |
| contact@star.org | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Web3 Integration</h4> | |
| <p class="text-gray-400 mt-1"> | |
| Connect with your Ethereum wallet to access decentralized features | |
| </p> | |
| <button class="mt-3 px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm flex items-center"> | |
| <i class="fab fa-ethereum mr-2"></i> Connect Wallet | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold text-white mb-6 text-center">Stay Updated</h3> | |
| <div class="max-w-2xl mx-auto"> | |
| <p class="text-gray-400 text-center mb-8"> | |
| Subscribe to our newsletter for the latest updates on our projects, research, and opportunities to get involved. | |
| </p> | |
| <form class="flex flex-col sm:flex-row gap-4"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-indigo-700 transition duration-300"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <div class="flex justify-center space-x-6 mt-8"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-telegram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white font-bold mb-4">Star Foundation</h3> | |
| <p class="text-gray-400 text-sm"> | |
| Mining the future of intelligence through space resource utilization. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-4">Navigation</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white text-sm">Home</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white text-sm">About</a></li> | |
| <li><a href="#vision" class="text-gray-400 hover:text-white text-sm">Vision</a></li> | |
| <li><a href="#mining" class="text-gray-400 hover:text-white text-sm">Space Mining</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#grants" class="text-gray-400 hover:text-white text-sm">Grants</a></li> | |
| <li><a href="#discoveries" class="text-gray-400 hover:text-white text-sm">Discoveries</a></li> | |
| <li><a href="#join" class="text-gray-400 hover:text-white text-sm">Join Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">News</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</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-500 text-sm mb-4 md:mb-0"> | |
| © 2023 Star Foundation. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white"> | |
| <i class="fab fa-ethereum"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-white"> | |
| <i class="fab fa-bitcoin"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-white"> | |
| <i class="fas fa-globe"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Create stars background | |
| function createStars() { | |
| const container = document.getElementById('stars-container'); | |
| const starCount = 200; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'animated-star'; | |
| // Random position | |
| const x = Math.random() * 100; | |
| const y = Math.random() * 100; | |
| star.style.left = `${x}%`; | |
| star.style.top = `${y}%`; | |
| // Random size | |
| const size = Math.random() * 2; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| // Random animation delay | |
| const delay = Math.random() * 5; | |
| star.style.animationDelay = `${delay}s`; | |
| container.appendChild(star); | |
| } | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Initialize when page loads | |
| window.addEventListener('DOMContentLoaded', () => { | |
| createStars(); | |
| // Typewriter effect for hero text | |
| const heroText = document.querySelector('.hero-bg h1'); | |
| if (heroText) { | |
| heroText.classList.add('typewriter'); | |
| setTimeout(() => { | |
| heroText.style.borderRight = 'none'; | |
| }, 3500); | |
| } | |
| }); | |
| </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=tongxiaojun/the-star-foundation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |