Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crypto Launchpads & Connectivity Hub</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: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .bird-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .search-circle { | |
| position: relative; | |
| } | |
| .search-circle::after { | |
| content: ''; | |
| position: absolute; | |
| top: -5px; | |
| left: -5px; | |
| right: -5px; | |
| bottom: -5px; | |
| border: 2px dashed #3b82f6; | |
| border-radius: 50%; | |
| animation: spin 10s linear infinite; | |
| opacity: 0.7; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .connection-node { | |
| position: relative; | |
| } | |
| .connection-node::before { | |
| content: ''; | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #3b82f6; | |
| border-radius: 50%; | |
| top: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .connection-line { | |
| position: relative; | |
| } | |
| .connection-line::after { | |
| content: ''; | |
| position: absolute; | |
| width: 2px; | |
| height: 30px; | |
| background-color: #3b82f6; | |
| top: -30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| height: 0; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| margin: 20px 0; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg py-4 px-6 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-rocket text-blue-400 text-2xl"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">CryptoLaunch</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-blue-400 transition">Home</a> | |
| <a href="#launchpads" class="hover:text-blue-400 transition">Launchpads</a> | |
| <a href="#connectivity" class="hover:text-blue-400 transition">Connectivity</a> | |
| <a href="#research" class="hover:text-blue-400 transition">Research</a> | |
| <a href="#music" class="hover:text-blue-400 transition">Music Tokens</a> | |
| </div> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg py-20 px-6"> | |
| <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">Crypto Launchpads</span><br> | |
| <span class="text-xl md:text-2xl font-normal">For Your Project to Watch</span> | |
| </h1> | |
| <p class="text-lg mb-8 text-gray-300">Discover the top platforms launching the next generation of blockchain innovations. Invest early in vetted projects with high potential.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition flex items-center"> | |
| <i class="fas fa-rocket mr-2"></i> Explore Launchpads | |
| </button> | |
| <button class="border border-blue-400 text-blue-400 hover:bg-blue-900/30 px-6 py-3 rounded-full font-medium transition flex items-center"> | |
| <i class="fas fa-book mr-2"></i> Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative flex justify-center"> | |
| <img src="https://img.icons8.com/color/480/000000/bitcoin--v1.png" class="w-48 h-48 absolute top-0 left-10 opacity-20 bird-animation" style="animation-delay: 0s;"> | |
| <img src="https://img.icons8.com/color/480/000000/ethereum.png" class="w-40 h-40 absolute bottom-10 left-0 opacity-20 bird-animation" style="animation-delay: 1s;"> | |
| <img src="https://img.icons8.com/color/480/000000/solana.png" class="w-32 h-32 absolute top-20 right-10 opacity-20 bird-animation" style="animation-delay: 2s;"> | |
| <div class="relative z-10"> | |
| <div class="w-64 h-64 bg-blue-900/30 rounded-full flex items-center justify-center border-2 border-blue-500/30"> | |
| <div class="w-48 h-48 bg-blue-800/30 rounded-full flex items-center justify-center border-2 border-blue-500/30"> | |
| <div class="w-32 h-32 bg-blue-700/30 rounded-full flex items-center justify-center border-2 border-blue-500/30"> | |
| <i class="fas fa-dove text-white text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Connectivity Section --> | |
| <section id="connectivity" class="py-20 px-6 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">The Art of Connectivity</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">Combine multiple Internet connections for maximum performance. Bond 4G, 5G, Wi-Fi, Ethernet, and more for unparalleled reliability.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Connection 1 --> | |
| <div class="bg-gray-800 rounded-xl p-8 card-hover connection-node"> | |
| <div class="text-blue-400 text-4xl mb-6"> | |
| <i class="fas fa-wifi"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Multi-Source Bonding</h3> | |
| <p class="text-gray-400">Combine all available connections into a single, faster and more reliable pipeline.</p> | |
| </div> | |
| <!-- Connection 2 --> | |
| <div class="bg-gray-800 rounded-xl p-8 card-hover connection-node connection-line"> | |
| <div class="text-blue-400 text-4xl mb-6"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Failover Protection</h3> | |
| <p class="text-gray-400">Automatic switching when a connection drops ensures you stay online no matter what.</p> | |
| </div> | |
| <!-- Connection 3 --> | |
| <div class="bg-gray-800 rounded-xl p-8 card-hover connection-node"> | |
| <div class="text-blue-400 text-4xl mb-6"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Performance Boost</h3> | |
| <p class="text-gray-400">Dramatically increase speeds by utilizing all available bandwidth simultaneously.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Launchpads Section --> | |
| <section id="launchpads" class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">List of the Top Crypto Launchpads</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">These platforms enable projects to raise capital and present tokens to investors through organized approaches.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Launchpad 1 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden card-hover"> | |
| <div class="h-48 bg-gradient-to-r from-blue-900 to-purple-900 flex items-center justify-center"> | |
| <i class="fas fa-fire text-6xl text-white opacity-30"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center mr-4"> | |
| <i class="fas fa-bolt text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">BSCPad</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">First decentralized IDO platform for Binance Smart Chain projects with a tiered system.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span><i class="fas fa-coins mr-1"></i> BSC</span> | |
| <span><i class="fas fa-layer-group mr-1"></i> Tiered</span> | |
| <span><i class="fas fa-star mr-1"></i> 4.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Launchpad 2 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden card-hover"> | |
| <div class="h-48 bg-gradient-to-r from-purple-900 to-pink-900 flex items-center justify-center"> | |
| <i class="fas fa-meteor text-6xl text-white opacity-30"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center mr-4"> | |
| <i class="fas fa-moon text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Polkastarter</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Cross-chain token pool and auction platform for interoperable blockchain projects.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span><i class="fas fa-link mr-1"></i> Multi-chain</span> | |
| <span><i class="fas fa-poll mr-1"></i> Auction</span> | |
| <span><i class="fas fa-star mr-1"></i> 4.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Launchpad 3 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden card-hover"> | |
| <div class="h-48 bg-gradient-to-r from pink-900 to-red-900 flex items-center justify-center"> | |
| <i class="fas fa-atom text-6xl text-white opacity-30"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-pink-900 flex items-center justify-center mr-4"> | |
| <i class="fas fa-seedling text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">TrustSwap</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Full-service digital asset ecosystem with smart contract-powered token launches.</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span><i class="fas fa-code mr-1"></i> Smart Contracts</span> | |
| <span><i class="fas fa-lock mr-1"></i> Escrow</span> | |
| <span><i class="fas fa-star mr-1"></i> 4.6</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border border-blue-400 text-blue-400 hover:bg-blue-900/30 px-8 py-3 rounded-full font-medium transition"> | |
| View All Launchpads <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Research Section --> | |
| <section id="research" class="py-20 px-6 bg-gray-900"> | |
| <div class="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">Research & Ritual Preparation</h2> | |
| <p class="text-lg text-gray-400 mb-8">Before engagement, research thoroughly. Understand the forms, symbols, qualities, and legendary actions associated with your focus. Reflect deeply to ensure alignment.</p> | |
| <!-- Added YouTube video section --> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-purple-400">The Goddess of Music: BujuRocks</h3> | |
| <div class="video-container"> | |
| <iframe src="https://www.youtube.com/embed/1ZZtqDB9Fno?si=xW9BzJpqCSHLUqR_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | |
| </div> | |
| <p class="text-gray-400 mt-4">Explore the divine inspiration behind music artist BujuRocks and her connection to the Goddess of Music.</p> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-900/50 rounded-full p-3 mr-4"> | |
| <i class="fas fa-search text-blue-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold mb-2">Goddess Research</h4> | |
| <p class="text-gray-400">Before the ritual, research the Goddess of music artist BujuRocks. Study Her forms, symbols, qualities, and legendary actions.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-900/50 rounded-full p-3 mr-4"> | |
| <i class="fas fa-brain text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold mb-2">Alignment Reflection</h4> | |
| <p class="text-gray-400">After research, reflect on whether it feels right to work with Her. If not, begin again until you find the perfect divine alignment.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-pink-900/50 rounded-full p-3 mr-4"> | |
| <i class="fas fa-redo text-pink-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold mb-2">Sacred Iteration</h4> | |
| <p class="text-gray-400">The spiritual journey requires patience. Don't hesitate to restart your search until you find the Goddess that truly resonates.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="search-circle bg-gray-800 rounded-xl p-8 h-96 flex flex-col items-center justify-center"> | |
| <div class="text-5xl mb-6"> | |
| <i class="fas fa-search text-blue-400"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Circle Anything. Search Everything</h3> | |
| <p class="text-gray-400 text-center mb-6">Highlight what matters most. Our tools help you discover deeper insights.</p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition"> | |
| Explore Research Tools | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Music Tokens Section --> | |
| <section id="music" class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Music Tokens Ecosystem</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">For developers and investors looking to thrive in the shifting music industry landscape.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Music Card 1 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden card-hover"> | |
| <div class="h-48 bg-gradient-to-br from-yellow-900 to-yellow-700 flex items-center justify-center relative overflow-hidden"> | |
| <i class="fas fa-music text-8xl text-yellow-400 opacity-20 absolute -right-4 -bottom-4"></i> | |
| <div class="text-center z-10"> | |
| <i class="fas fa-headphones text-5xl text-yellow-400 mb-4"></i> | |
| <h3 class="text-2xl font-bold">Tokens Staked</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-400 mb-4">Earn rewards by staking music tokens and participating in platform governance.</p> | |
| <div class="flex justify-between text-sm"> | |
| <span class="bg-yellow-900/50 text-yellow-400 px-3 py-1 rounded-full">APY 12-25%</span> | |
| <span class="text-gray-500"><i class="fas fa-lock mr-1"></i> Flexible terms</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Music Card 2 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden card-hover"> | |
| <div class="h-48 bg-gradient-to-br from-pink-900 to-purple-900 flex items-center justify-center relative overflow-hidden"> | |
| <i class="fas fa-compact-disc text-8xl text-purple-400 opacity-20 absolute -right-4 -bottom-4"></i> | |
| <div class="text-center z-10"> | |
| <i class="fas fa-users text-5xl text-pink-400 mb-4"></i> | |
| <h3 class="text-2xl font-bold">Artist Platforms</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-400 mb-4">Direct artist-fan interactions powered by blockchain with fair revenue sharing.</p> | |
| <div class="flex justify-between text-sm"> | |
| <span class="bg-purple-900/50 text-purple-400 px-3 py-1 rounded-full">70% to artists</span> | |
| <span class="text-gray-500"><i class="fas fa-fan mr-1"></i> NFTs</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Music Card 3 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden card-hover"> | |
| <div class="h-48 bg-gradient-to-br from-blue-900 to-cyan-900 flex items-center justify-center relative overflow-hidden"> | |
| <i class="fas fa-wave-square text-8xl text-cyan-400 opacity-20 absolute -right-4 -bottom-4"></i> | |
| <div class="text-center z-10"> | |
| <i class="fas fa-code text-5xl text-blue-400 mb-4"></i> | |
| <h3 class="text-2xl font-bold">Developer Tools</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-400 mb-4">Build the next generation of music applications with our comprehensive SDKs.</p> | |
| <div class="flex justify-between text-sm"> | |
| <span class="bg-cyan-900/50 text-cyan-400 px-3 py-1 rounded-full">Open source</span> | |
| <span class="text-gray-500"><i class="fas fa-plug mr-1"></i> API access</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-6 gradient-bg"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Explore Crypto Launchpads?</h2> | |
| <p class="text-xl text-gray-300 mb-8">Join thousands of investors and developers discovering the next big opportunities in blockchain.</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full font-medium transition flex items-center"> | |
| <i class="fas fa-rocket mr-2"></i> Get Started Now | |
| </button> | |
| <button class="border border-blue-400 text-blue-400 hover:bg-blue-900/30 px-8 py-4 rounded-full font-medium transition flex items-center"> | |
| <i class="fas fa-book mr-2"></i> Read Our Guides | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <i class="fas fa-rocket text-blue-400 text-2xl"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">CryptoLaunch</span> | |
| </div> | |
| <p class="text-gray-400 mb-6">Discover, research, and invest in the most promising blockchain projects through trusted launchpads.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-medium"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6">Launchpads</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Top Platforms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Upcoming IDOs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Tier Systems</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Vesting Schedules</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Success Stories</a></li> | |
| </ | |
| </html> |