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 | Crypto Valley, Switzerland</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: #0a0b0e; | |
| color: #e2e8f0; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-glass { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); | |
| } | |
| } | |
| .scroll-down { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .scroll-down::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| width: 1px; | |
| height: 30px; | |
| background: linear-gradient(to bottom, transparent, #3b82f6, transparent); | |
| animation: scrollDown 2s infinite; | |
| } | |
| @keyframes scrollDown { | |
| 0% { | |
| transform: translateY(-20px); | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(20px); | |
| opacity: 0; | |
| } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- 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 items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-indigo-500 text-2xl mr-2"></i> | |
| <span class="text-white font-bold text-xl">star foundation</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#vision" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Vision</a> | |
| <a href="#mission" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Mission</a> | |
| <a href="#roadmap" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Roadmap</a> | |
| <a href="#achievements" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Achievements</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="text-gray-300 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-black to-transparent opacity-90"></div> | |
| <video autoplay muted loop class="w-full h-full object-cover"> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-stars-in-space-1610-large.mp4" type="video/mp4"> | |
| </video> | |
| </div> | |
| <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> | |
| <div class="mb-6"> | |
| <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-indigo-900 text-indigo-300"> | |
| Launching May 1, 2025 • Crypto Valley, Switzerland | |
| </span> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text">star foundation</h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed"> | |
| Preparing to revolutionize decentralized scientific research with our 2025 launch | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="px-8 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-medium text-white hover:opacity-90 transition-all transform hover:scale-105"> | |
| Join Waitlist | |
| </button> | |
| <button class="px-8 py-3 border border-indigo-500 rounded-full font-medium text-white hover:bg-indigo-900 hover:bg-opacity-30 transition-all transform hover:scale-105"> | |
| Research Whitepaper | |
| </button> | |
| </div> | |
| </div> | |
| <div class="scroll-down"></div> | |
| </section> | |
| <!-- Vision Section --> | |
| <section id="vision" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">Our Vision</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mb-6"></div> | |
| <p class="text-lg text-gray-400 max-w-3xl mx-auto"> | |
| Building the open research infrastructure for Web3 science, launching with $25M in committed funding. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="card-glass rounded-xl p-8 hover:border-indigo-500 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="text-indigo-400 text-4xl mb-4"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Scientific Breakthroughs</h3> | |
| <p class="text-gray-400"> | |
| Targeting 10+ peer-reviewed publications annually from our funded projects in quantum computing and synthetic biology. | |
| </p> | |
| </div> | |
| <div class="card-glass rounded-xl p-8 hover:border-purple-500 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="text-purple-400 text-4xl mb-4"> | |
| <i class="fas fa-link"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Web3 Integration</h3> | |
| <p class="text-gray-400"> | |
| Launching with integration to 3 major blockchain networks and capacity for 1,000+ researchers. | |
| </p> | |
| </div> | |
| <div class="card-glass rounded-xl p-8 hover:border-pink-500 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="text-pink-400 text-4xl mb-4"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Global Impact</h3> | |
| <p class="text-gray-400"> | |
| Planned research hubs in Zurich, Singapore, and Nairobi with local governance through our DAO structure. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mission Section --> | |
| <section id="mission" class="py-20 bg-gradient-to-b from-gray-900 to-black px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">Our Mission</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mb-6"></div> | |
| <p class="text-lg text-gray-400 max-w-3xl mx-auto"> | |
| Accelerating frontier research through decentralized governance, with 100% of funding decisions made by our community DAO from launch. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl blur opacity-25"></div> | |
| <div class="relative bg-gray-900 rounded-xl p-8 h-full"> | |
| <h3 class="text-2xl font-bold mb-6 text-white">Decentralized Governance</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-900 text-indigo-300"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| Open DAO membership from day one | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-900 text-indigo-300"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| On-chain voting with quadratic funding | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-900 text-indigo-300"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| Reputation system for credentialed reviewers | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-indigo-900 text-indigo-300"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| Global research proposal acceptance | |
| </p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl blur opacity-25"></div> | |
| <div class="relative bg-gray-900 rounded-xl p-8 h-full"> | |
| <h3 class="text-2xl font-bold mb-6 text-white">Funding Impact</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-purple-900 text-purple-300"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| $25M initial funding pool | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-purple-900 text-purple-300"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| IP rights managed through smart contracts | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-purple-900 text-purple-300"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| Research NFT marketplace at launch | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-purple-900 text-purple-300"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| University partnership program | |
| </p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Roadmap Section --> | |
| <section id="roadmap" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">Our Launch Plan</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mb-6"></div> | |
| <p class="text-lg text-gray-400 max-w-3xl mx-auto"> | |
| Our strategic rollout beginning May 1, 2025 | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="hidden sm:block absolute h-full w-1 bg-gradient-to-b from-indigo-500 to-purple-500 left-1/2 transform -translate-x-1/2"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-8 sm:space-y-16"> | |
| <!-- Phase 1 --> | |
| <div class="relative flex flex-col sm:flex-row items-center"> | |
| <div class="sm:w-1/2 sm:pr-16 order-2 sm:order-1"> | |
| <div class="card-glass rounded-xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-900 text-indigo-300 mr-4"> | |
| <span class="font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Foundation Phase</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Official launch of star.org with core platform and initial funding. | |
| </p> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-calendar-check text-indigo-400 mt-1 mr-2"></i> | |
| <span>May 1, 2025: Official launch in Crypto Valley</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-calendar-check text-indigo-400 mt-1 mr-2"></i> | |
| <span>Q2 2025: $25M initial funding deployed</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-calendar-check text-indigo-400 mt-1 mr-2"></i> | |
| <span>Q2 2025: First research grants awarded</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="sm:w-1/2 sm:pl-16 order-1 sm:order-2 mb-8 sm:mb-0"> | |
| <div class="bg-gradient-to-r from-indigo-900 to-indigo-900/50 rounded-xl p-6"> | |
| <div class="text-sm font-semibound text-indigo-300 mb-2">2025 Q2</div> | |
| <h4 class="text-lg font-bold text-white mb-2">Launch Milestones</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-indigo-800 text-indigo-200">Foundation</span> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-indigo-800 text-indigo-200">Funding</span> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-indigo-800 text-indigo-200">First Grants</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 2 --> | |
| <div class="relative flex flex-col sm:flex-row items-center"> | |
| <div class="sm:w-1/2 sm:pr-16 order-2"> | |
| <div class="card-glass rounded-xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-900 text-purple-300 mr-4"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Global Expansion</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Scaling our platform and establishing international presence. | |
| </p> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-spinner text-purple-400 mt-1 mr-2 animate-spin"></i> | |
| <span>Q3 2025: Zurich research hub operational</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-spinner text-purple-400 mt-1 mr-2 animate-spin"></i> | |
| <span>Q4 2025: $50M Series A funding target</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-spinner text-purple-400 mt-1 mr-2 animate-spin"></i> | |
| <span>Q1 2026: Singapore and Nairobi hubs launch</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="sm:w-1/2 sm:pl-16 order-1 mb-8 sm:mb-0"> | |
| <div class="bg-gradient-to-r from-purple-900 to-purple-900/50 rounded-xl p-6"> | |
| <div class="text-sm font-semibold text-purple-300 mb-2">2025 Q3-Q1 2026</div> | |
| <h4 class="text-lg font-bold text-white mb-2">Growth Phase</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-purple-800 text-purple-200">Global Hubs</span> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-purple-800 text-purple-200">Series A</span> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-purple-800 text-purple-200">Expansion</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 3 --> | |
| <div class="relative flex flex-col sm:flex-row items-center"> | |
| <div class="sm:w-1/2 sm:pr-16 order-2 sm:order-1"> | |
| <div class="card-glass rounded-xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-900 text-pink-300 mr-4"> | |
| <span class="font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Future Vision</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Deepening research impact and decentralized governance. | |
| </p> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-spinner text-pink-400 mt-1 mr-2 animate-spin"></i> | |
| <span>Q2 2026: DeSci protocol v2.0 release</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-spinner text-pink-400 mt-1 mr-2 animate-spin"></i> | |
| <span>Q3 2026: Cross-chain research data marketplace</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-spinner text-pink-400 mt-1 mr-2 animate-spin"></i> | |
| <span>Q4 2026: AI-powered research collaboration</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="sm:w-1/2 sm:pl-16 order-1 sm:order-2 mb-8 sm:mb-0"> | |
| <div class="bg-gradient-to-r from-pink-900 to-pink-900/50 rounded-xl p-6"> | |
| <div class="text-sm font-semibold text-pink-300 mb-2">2026</div> | |
| <h4 class="text-lg font-bold text-white mb-2">Future Initiatives</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-pink-800 text-pink-200">Protocol v2</span> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-pink-800 text-pink-200">Data Marketplace</span> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-pink-800 text-pink-200">AI Research</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Achievements Section --> | |
| <section id="achievements" class="py-20 bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">2025 Targets</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mb-6"></div> | |
| <p class="text-lg text-gray-400 max-w-3xl mx-auto"> | |
| Our ambitious goals for the first year of operation | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="card-glass rounded-xl p-6 hover:border-indigo-500 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="text-indigo-400 text-3xl mb-4"> | |
| <i class="fas fa-flask"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Research Impact</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Support 5+ major research initiatives in quantum computing | |
| </p> | |
| <div class="flex items-center text-sm text-indigo-400"> | |
| <span>Targeting Nature publications</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="card-glass rounded-xl p-6 hover:border-purple-500 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="text-purple-400 text-3xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Community Growth</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Onboard 5,000+ DAO members with 40% female participation | |
| </p> | |
| <div class="flex items-center text-sm text-purple-400"> | |
| <span>Diversity commitment</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="card-glass rounded-xl p-6 hover:border-pink-500 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="text-pink-400 text-3xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Economic Impact</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Generate $5M+ in commercializable research IP | |
| </p> | |
| <div class="flex items-center text-sm text-pink-400"> | |
| <span>IP commercialization program</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="px-8 py-3 bg-white rounded-full font-bold text-gray-900 hover:bg-gray-200 transition-all transform hover:scale-105"> | |
| View Full Launch Plan | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">Join the Research Revolution</h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"> | |
| Be part of the next generation of decentralized scientific research launching May 2025 | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-bold text-white hover:opacity-90 transition-all transform hover:scale-105 flex items-center justify-center"> | |
| <i class="fas fa-user-plus text-xl mr-2"></i> Join Waitlist | |
| </button> | |
| <button class="px-8 py-4 border border-white rounded-full font-bold text-white hover:bg-white hover:bg-opacity-10 transition-all transform hover:scale-105 flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-xl mr-2"></i> Read Whitepaper | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">Get In Touch</h2> | |
| <p class="text-lg text-gray-400 mb-8"> | |
| Connect with our team ahead of our 2025 launch | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-900 text-indigo-300"> | |
| <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">Crypto Valley, Zug, Switzerland (Launching May 2025)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-full bg-purple-900 text-purple-300"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">Launch Inquiries</h4> | |
| <p class="text-gray-400">contact@star.org</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-full bg-pink-900 text-pink-300"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-white">DAO Information</h4> | |
| <p class="text-gray-400">Coming Q2 2025</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="card-glass rounded-xl p-8"> | |
| <h3 class="text-2xl font-bold mb-6 text-white">Launch Interest Form</h3> | |
| <form> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-sm font-medium text-gray-400 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-white placeholder-gray-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-white placeholder-gray-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="institution" class="block text-sm font-medium text-gray-400 mb-2">Institution/Organization</label> | |
| <input type="text" id="institution" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-white placeholder-gray-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="interest" class="block text-sm font-medium text-gray-400 mb-2">Area of Interest</label> | |
| <select id="interest" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-white placeholder-gray-500"> | |
| <option>Research Funding</option> | |
| <option>DAO Participation</option> | |
| <option>Technical Development</option> | |
| <option>Partnership Opportunities</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-medium text-white hover:opacity-90 transition-all"> | |
| Submit Interest | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-6 md:mb-0"> | |
| <i class="fas fa-star text-indigo-500 text-2xl mr-2"></i> | |
| <span class="text-white font-bold text-xl">star.org</span> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <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-discord 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-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-telegram text-xl"></i> | |
| </a> | |
| </div> | |
| <div class="text-gray-500 text-sm"> | |
| © 2025 star.org. Launching May 1, 2025. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Animation for cards when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fade-in'); | |
| } | |
| }); | |
| }, {threshold: 0.1}); | |
| document.querySelectorAll('.card-glass').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.md\\:hidden button'); | |
| const mobileMenu = document.querySelector('.hidden.md\\:block'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| mobileMenu.classList.toggle('block'); | |
| }); | |
| </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/star-foundation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |