|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NexusMine | Futuristic Cloud Mining</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
neon: { |
|
|
100: '#e0f9ff', |
|
|
200: '#b0f0ff', |
|
|
300: '#80e6ff', |
|
|
400: '#50ddff', |
|
|
500: '#20d4ff', |
|
|
600: '#00aacc', |
|
|
700: '#007f99', |
|
|
800: '#005566', |
|
|
900: '#002a33', |
|
|
}, |
|
|
dark: { |
|
|
900: '#0a0a0a', |
|
|
800: '#1a1a1a', |
|
|
700: '#2a2a2a', |
|
|
} |
|
|
}, |
|
|
fontFamily: { |
|
|
'sans': ['"Exo 2"', 'sans-serif'], |
|
|
'mono': ['"Space Mono"', 'monospace'], |
|
|
}, |
|
|
animation: { |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'glow': 'glow 2s ease-in-out infinite alternate', |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-10px)' }, |
|
|
}, |
|
|
glow: { |
|
|
'0%': { 'box-shadow': '0 0 5px #20d4ff' }, |
|
|
'100%': { 'box-shadow': '0 0 20px #20d4ff' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap'); |
|
|
|
|
|
body { |
|
|
background-color: #0a0a0a; |
|
|
color: white; |
|
|
font-family: 'Exo 2', sans-serif; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #20d4ff, #a162e8); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.cyber-border { |
|
|
position: relative; |
|
|
border: 2px solid transparent; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
|
|
|
.cyber-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
border-radius: 0.5rem; |
|
|
padding: 2px; |
|
|
background: linear-gradient(45deg, #20d4ff, #a162e8); |
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
|
|
-webkit-mask-composite: xor; |
|
|
mask-composite: exclude; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.grid-pattern { |
|
|
background-image: |
|
|
linear-gradient(rgba(32, 212, 255, 0.1) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(32, 212, 255, 0.1) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background-color: rgba(32, 212, 255, 0.5); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@keyframes particle-move { |
|
|
0% { |
|
|
transform: translateY(0) translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-100vh) translateX(100px); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen grid-pattern"> |
|
|
|
|
|
<div id="particles-container"></div> |
|
|
|
|
|
|
|
|
<nav class="py-6 px-4 md:px-12 backdrop-blur-md bg-dark-900/80 sticky top-0 z-50 border-b border-neon-900"> |
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 bg-neon-500 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-bolt text-dark-900 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-2xl font-bold gradient-text">NexusMine</span> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Home</a> |
|
|
<a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Mining</a> |
|
|
<a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Music</a> |
|
|
<a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">AI Tools</a> |
|
|
<a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">About</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="px-4 py-2 bg-neon-500 text-dark-900 font-bold rounded-full hover:bg-neon-400 transition-colors"> |
|
|
Start Mining |
|
|
</button> |
|
|
<button class="md:hidden text-neon-300 text-2xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative py-20 px-4 md:px-12"> |
|
|
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div class="space-y-8 z-10"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold leading-tight"> |
|
|
<span class="gradient-text">Mine Crypto</span><br> |
|
|
<span class="text-white">While Listening to</span><br> |
|
|
<span class="gradient-text">Generational Talent</span> |
|
|
</h1> |
|
|
|
|
|
<p class="text-neon-300 text-lg"> |
|
|
The ultimate fusion of cryptocurrency mining and music. Our AI-powered platform dynamically allocates hash rates while you enjoy the meteoric rise of today's musical talents. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<button class="px-8 py-4 bg-neon-500 text-dark-900 font-bold rounded-full hover:bg-neon-400 transition-colors flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-play"></i> |
|
|
<span>Watch Demo</span> |
|
|
</button> |
|
|
<button class="px-8 py-4 border-2 border-neon-500 text-neon-300 font-bold rounded-full hover:bg-neon-900/30 transition-colors flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
<span>View Stats</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4 pt-4"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-dark-900"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-dark-900"> |
|
|
<img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-dark-900"> |
|
|
</div> |
|
|
<p class="text-neon-300"> |
|
|
<span class="font-bold text-white">2.4M+</span> users mining now |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="cyber-border p-1 bg-dark-800 rounded-lg"> |
|
|
<div class="bg-dark-900 rounded-lg overflow-hidden"> |
|
|
<div class="h-64 md:h-96 bg-gradient-to-br from-dark-700 to-dark-800 flex items-center justify-center"> |
|
|
<div class="text-center p-8"> |
|
|
<div class="w-24 h-24 md:w-32 md:h-32 bg-neon-500/20 rounded-full flex items-center justify-center mx-auto mb-6 border-2 border-neon-500 animate-pulse-slow"> |
|
|
<i class="fas fa-music text-neon-300 text-3xl md:text-5xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl md:text-2xl font-bold text-white mb-2">Now Playing</h3> |
|
|
<p class="text-neon-300 text-lg md:text-xl">BujuRocks - Generational Talent</p> |
|
|
<div class="mt-6"> |
|
|
<a href="https://youtu.be/ZtvvvBnjOZI?si=FqP5lmVdOrCjHwNU" target="_blank" class="inline-flex items-center text-neon-400 hover:text-neon-300"> |
|
|
<i class="fab fa-youtube mr-2"></i> |
|
|
Watch on YouTube |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute -bottom-6 -left-6 w-32 h-32 bg-neon-500/10 rounded-full blur-xl"></div> |
|
|
<div class="absolute -top-6 -right-6 w-40 h-40 bg-purple-500/10 rounded-full blur-xl"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-4 md:px-12 bg-gradient-to-b from-dark-900 to-dark-800"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div class="cyber-border p-6 bg-dark-800 rounded-lg text-center"> |
|
|
<div class="text-neon-500 text-4xl mb-2"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold gradient-text">$4.2B</h3> |
|
|
<p class="text-neon-300">Total Mined</p> |
|
|
</div> |
|
|
|
|
|
<div class="cyber-border p-6 bg-dark-800 rounded-lg text-center"> |
|
|
<div class="text-neon-500 text-4xl mb-2"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold gradient-text">2.4M+</h3> |
|
|
<p class="text-neon-300">Active Miners</p> |
|
|
</div> |
|
|
|
|
|
<div class="cyber-border p-6 bg-dark-800 rounded-lg text-center"> |
|
|
<div class="text-neon-500 text-4xl mb-2"> |
|
|
<i class="fas fa-microchip"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold gradient-text">42.7K</h3> |
|
|
<p class="text-neon-300">TH/s Power</p> |
|
|
</div> |
|
|
|
|
|
<div class="cyber-border p-6 bg-dark-800 rounded-lg text-center"> |
|
|
<div class="text-neon-500 text-4xl mb-2"> |
|
|
<i class="fas fa-music"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold gradient-text">1.8M</h3> |
|
|
<p class="text-neon-300">Music Streams</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 md:px-12"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4"> |
|
|
<span class="gradient-text">The Future of Cloud Mining</span> |
|
|
</h2> |
|
|
<p class="text-neon-300 max-w-2xl mx-auto"> |
|
|
Combining blockchain technology with AI optimization and musical escapism to create a revolutionary mining experience. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="cyber-border p-8 bg-dark-800 rounded-lg hover:bg-dark-700 transition-colors group"> |
|
|
<div class="w-16 h-16 bg-neon-500/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-neon-500/20 transition-colors"> |
|
|
<i class="fas fa-brain text-neon-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">AI-Powered Allocation</h3> |
|
|
<p class="text-neon-300"> |
|
|
Our machine learning algorithms dynamically reallocate hash rates across mining pools for maximum efficiency. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="cyber-border p-8 bg-dark-800 rounded-lg hover:bg-dark-700 transition-colors group"> |
|
|
<div class="w-16 h-16 bg-neon-500/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-neon-500/20 transition-colors"> |
|
|
<i class="fas fa-exchange-alt text-neon-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Instant Liquidity</h3> |
|
|
<p class="text-neon-300"> |
|
|
Exchange-linked models enable seamless conversion of mined crypto into liquid assets. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="cyber-border p-8 bg-dark-800 rounded-lg hover:bg-dark-700 transition-colors group"> |
|
|
<div class="w-16 h-16 bg-neon-500/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-neon-500/20 transition-colors"> |
|
|
<i class="fas fa-headphones text-neon-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-3">Musical Escapism</h3> |
|
|
<p class="text-neon-300"> |
|
|
Enjoy generational musical talent while mining, creating the perfect blend of productivity and entertainment. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 md:px-12 bg-dark-800"> |
|
|
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div class="relative"> |
|
|
<div class="cyber-border p-1 bg-dark-800 rounded-lg"> |
|
|
<div class="bg-dark-900 rounded-lg overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-xl font-bold text-white">Your Mining Dashboard</h3> |
|
|
<span class="px-3 py-1 bg-neon-900/50 text-neon-400 rounded-full text-sm">Active</span> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-neon-300">Hash Rate</span> |
|
|
<span class="font-mono text-neon-400">142.7 TH/s</span> |
|
|
</div> |
|
|
<div class="w-full bg-dark-700 rounded-full h-2"> |
|
|
<div class="bg-neon-500 h-2 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-neon-300">Estimated Daily</span> |
|
|
<span class="font-mono text-neon-400">0.0042 BTC</span> |
|
|
</div> |
|
|
<div class="w-full bg-dark-700 rounded-full h-2"> |
|
|
<div class="bg-purple-500 h-2 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<div class="cyber-border p-3 bg-dark-800 rounded-lg text-center"> |
|
|
<div class="text-neon-300 text-sm mb-1">Temperature</div> |
|
|
<div class="font-mono text-white">62°C</div> |
|
|
</div> |
|
|
<div class="cyber-border p-3 bg-dark-800 rounded-lg text-center"> |
|
|
<div class="text-neon-300 text-sm mb-1">Efficiency</div> |
|
|
<div class="font-mono text-white">94%</div> |
|
|
</div> |
|
|
<div class="cyber-border p-3 bg-dark-800 rounded-lg text-center"> |
|
|
<div class="text-neon-300 text-sm mb-1">Uptime</div> |
|
|
<div class="font-mono text-white">99.8%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<button class="w-full py-3 bg-neon-500 text-dark-900 font-bold rounded-lg hover:bg-neon-400 transition-colors"> |
|
|
Boost Performance |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute -top-6 -left-6 w-32 h-32 bg-neon-500/10 rounded-full blur-xl"></div> |
|
|
<div class="absolute -bottom-6 -right-6 w-40 h-40 bg-purple-500/10 rounded-full blur-xl"></div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold"> |
|
|
<span class="gradient-text">Dynamic Mining</span> Experience |
|
|
</h2> |
|
|
|
|
|
<p class="text-neon-300"> |
|
|
Cloud cryptocurrency mining remains globally popular, driven by a mix of factors beyond just financial profit. Our platform enhances the experience with elements of skill, control, and musical escapism. |
|
|
</p> |
|
|
|
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start space-x-3"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-6 h-6 rounded-full bg-neon-500/20 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-neon-500 text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-neon-300"> |
|
|
<span class="font-bold text-white">AI Optimization:</span> Machine learning algorithms dynamically reallocate hash rates |
|
|
</span> |
|
|
</li> |
|
|
<li class="flex items-start space-x-3"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-6 h-6 rounded-full bg-neon-500/20 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-neon-500 text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-neon-300"> |
|
|
<span class="font-bold text-white">Liquid Assets:</span> Exchange-linked models enable instant conversion to cash |
|
|
</span> |
|
|
</li> |
|
|
<li class="flex items-start space-x-3"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="w-6 h-6 rounded-full bg-neon-500/20 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-neon-500 text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-neon-300"> |
|
|
<span class="font-bold text-white">Musical Integration:</span> Enjoy generational talent while you mine |
|
|
</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<button class="px-8 py-3 bg-neon-500 text-dark-900 font-bold rounded-full hover:bg-neon-400 transition-colors"> |
|
|
Start Mining Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 md:px-12"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4"> |
|
|
<span class="gradient-text">Mining Meets Music</span> |
|
|
</h2> |
|
|
<p class="text-neon-300 max-w-2xl mx-auto"> |
|
|
The perfect blend of cryptocurrency mining and musical escapism. Discover today's generational talents while earning crypto. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div class="space-y-6"> |
|
|
<h3 class="text-2xl font-bold text-white"> |
|
|
BujuRocks - Generational Talent |
|
|
</h3> |
|
|
|
|
|
<p class="text-neon-300"> |
|
|
The phenomenon of "generational talent" in the music industry draws in millions of new viewers, offering a unique form of escapism. Now you can enjoy this while mining cryptocurrency. |
|
|
</p> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<a href="https://youtu.be/ZtvvvBnjOZI?si=FqP5lmVdOrCjHwNU" target="_blank" class="inline-flex items-center px-6 py-3 bg-dark-800 border border-neon-500/50 text-neon-300 font-bold rounded-full hover:bg-neon-900/30 transition-colors"> |
|
|
<i class="fab fa-youtube mr-2"></i> |
|
|
Watch on YouTube |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="cyber-border overflow-hidden rounded-lg aspect-video"> |
|
|
<div class="relative h-0 pb-[56.25%]"> |
|
|
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/ZtvvvBnjOZI?autoplay=0&mute=1&controls=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-500/10 rounded-full blur-xl -z-10"></div> |
|
|
<div class="absolute -bottom-6 -right-6 w-40 h-40 bg-neon-500/10 rounded-full blur-xl -z-10"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 md:px-12 bg-gradient-to-b from-dark-800 to-dark-900"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6"> |
|
|
<span class="gradient-text">Join the Digital Financial Order</span> |
|
|
</h2> |
|
|
|
|
|
<p class="text-neon-300 mb-10"> |
|
|
The current state of blockchain technology, particularly its "talent boom" and the "meteoric rise" of AI, mirrors the early evolution of the internet. Be part of this revolution. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<button class="px-8 py-4 bg-neon-500 text-dark-900 font-bold rounded-full hover:bg-neon-400 transition-colors"> |
|
|
Start Mining Now |
|
|
</button> |
|
|
<button class="px-8 py-4 border-2 border-neon-500 text-neon-300 font-bold rounded-full hover:bg-neon-900/30 transition-colors"> |
|
|
Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 px-4 md:px-12 bg-dark-900 border-t border-neon-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"> |
|
|
<div class="w-10 h-10 bg-neon-500 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-bolt text-dark-900 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-2xl font-bold gradient-text">NexusMine</span> |
|
|
</div> |
|
|
|
|
|
<p class="text-neon-300 mb-6"> |
|
|
The future of cloud cryptocurrency mining combined with musical escapism and AI optimization. |
|
|
</p> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-dark-800 flex items-center justify-center text-neon-300 hover:text-neon-500 transition-colors"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-dark-800 flex items-center justify-center text-neon-300 hover:text-neon-500 transition-colors"> |
|
|
<i class="fab fa-discord"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-dark-800 flex items-center justify-center text-neon-300 hover:text-neon-500 transition-colors"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-dark-800 flex items-center justify-center text-neon-300 hover:text-neon-500 transition-colors"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white font-bold text-lg mb-6">Navigation</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Home</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Mining Dashboard</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Music Integration</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">AI Tools</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">About Us</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white font-bold text-lg mb-6">Resources</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Documentation</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">API Reference</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Community</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Blog</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Status</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white font-bold text-lg mb-6">Legal</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Cookie Policy</a></li> |
|
|
<li><a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Disclaimer</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-neon-900 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-neon-300 mb-4 md:mb-0"> |
|
|
© 2023 NexusMine. All rights reserved. |
|
|
</p> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Privacy</a> |
|
|
<a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Terms</a> |
|
|
<a href="#" class="text-neon-300 hover:text-neon-500 transition-colors">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createParticles() { |
|
|
const container = document.getElementById('particles-container'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 3 + 2; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
const posX = Math.random() * window.innerWidth; |
|
|
const posY = Math.random() * window.innerHeight; |
|
|
particle.style.left = `${posX}px`; |
|
|
particle.style.top = `${posY}px`; |
|
|
|
|
|
|
|
|
const duration = Math.random() * 20 + 10; |
|
|
const delay = Math.random() * 5; |
|
|
particle.style.animation = `particle-move ${duration}s linear ${delay}s infinite`; |
|
|
|
|
|
container.appendChild(particle); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', createParticles); |
|
|
|
|
|
|
|
|
document.querySelector('.md\\:hidden').addEventListener('click', function() { |
|
|
alert('Mobile menu would open here in a full implementation'); |
|
|
}); |
|
|
</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=Bujurocks/nexusmine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
