index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BujuRocks | Neon Electronic Soundscapes</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=Orbitron:wght@400;700;900&family=Press+Start+2P&display=swap');
        
        body {
            font-family: 'Orbitron', sans-serif;
            background-color: #0f0e17;
            color: #fffffe;
            overflow-x: hidden;
        }
        
        .hyperspace-bg {
            background: linear-gradient(-45deg, #0f0e17, #1a1a2e, #16213e, #0f3460);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .neon-text {
            text-shadow: 0 0 5px #ff2a6d, 0 0 10px #ff2a6d, 0 0 15px #ff2a6d, 0 0 20px #ff2a6d;
        }
        
        .glow-box {
            box-shadow: 0 0 15px #05d9e8;
            transition: all 0.3s ease;
        }
        
        .glow-box:hover {
            box-shadow: 0 0 25px #05d9e8, 0 0 35px #05d9e8;
            transform: translateY(-5px);
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .scanline {
            position: relative;
            overflow: hidden;
        }
        
        .scanline:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(5, 217, 232, 0.5);
            box-shadow: 0 0 10px rgba(5, 217, 232, 0.7);
            animation: scan 8s linear infinite;
        }
        
        @keyframes scan {
            0% { top: 0; }
            100% { top: 100%; }
        }
    </style>
</head>
<body class="hyperspace-bg">
    <!-- Header -->
    <header class="relative overflow-hidden">
        <div class="absolute inset-0 bg-black opacity-50"></div>
        <div class="container mx-auto px-4 py-16 relative z-10">
            <div class="flex flex-col items-center justify-center text-center">
                <h1 class="text-6xl md:text-8xl font-bold mb-6 neon-text pulse">BUJUROCKS</h1>
                <p class="text-xl md:text-2xl mb-8 text-cyan-300">Discover the neon-soaked electronic soundscape that's captivating listeners worldwide</p>
                
                <div class="flex flex-wrap justify-center gap-4 mb-12">
                    <a href="https://open.spotify.com/track/4BsRdA1AYBd17ZiBVu28Kv?si=WnoWtTHWQWOa2I_G3eoIUA" target="_blank" class="bg-[#1DB954] hover:bg-[#1ed760] text-white font-bold py-3 px-6 rounded-full flex items-center gap-2 transition-all glow-box">
                        <i class="fab fa-spotify text-2xl"></i> Stream on Spotify
                    </a>
                    <a href="https://audius.co/bujurocks" target="_blank" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 px-6 rounded-full flex items-center gap-2 transition-all glow-box">
                        <i class="fas fa-music text-xl"></i> Audius Profile
                    </a>
                    <a href="https://youtu.be/wqA3irdoPyc?si=fRGDuvuPs1XmTU8i" target="_blank" class="bg-red-600 hover:bg-red-500 text-white font-bold py-3 px-6 rounded-full flex items-center gap-2 transition-all glow-box">
                        <i class="fab fa-youtube text-2xl"></i> Watch Video
                    </a>
                </div>
                
                <div class="w-full max-w-2xl bg-black bg-opacity-50 p-6 rounded-xl border border-cyan-400 glow-box">
                    <h2 class="text-3xl font-bold mb-4 text-cyan-300">Join the Electronic Revolution</h2>
                    <p class="mb-6">BujuRocks is pioneering the fusion of electronic music with blockchain technology through exclusive Music NFTs. Own a piece of the soundscape revolution.</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg border border-purple-500">
                            <h3 class="text-xl font-bold text-purple-400 mb-2">Latest Drop</h3>
                            <p class="text-sm">"Neon Dreams" - Limited Edition 1/1 NFT</p>
                        </div>
                        <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg border border-cyan-500">
                            <h3 class="text-xl font-bold text-cyan-400 mb-2">Upcoming</h3>
                            <p class="text-sm">"Hyperspace Odyssey" - Generative Audio-Visual Collection</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Music NFT Section -->
    <section class="py-16 px-4 scanline">
        <div class="container mx-auto">
            <h2 class="text-4xl md:text-5xl font-bold mb-12 text-center text-cyan-300 neon-text">Music NFT Revolution</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- OpenSea -->
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-blue-500 glow-box hover:border-blue-400 transition-all">
                    <div class="flex items-center mb-4">
                        <img src="https://storage.googleapis.com/opensea-static/Logomark/Logomark-Blue.png" alt="OpenSea" class="w-12 h-12 mr-4">
                        <h3 class="text-2xl font-bold text-blue-400">OpenSea</h3>
                    </div>
                    <p class="mb-4">The most popular and currently biggest NFT marketplace where you can find BujuRocks' exclusive music NFTs.</p>
                    <a href="https://opensea.io" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded-full text-sm transition-all">Explore</a>
                </div>
                
                <!-- Audius -->
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-purple-500 glow-box hover:border-purple-400 transition-all">
                    <div class="flex items-center mb-4">
                        <img src="https://audius.co/static/img/favicon-32x32.png" alt="Audius" class="w-12 h-12 mr-4">
                        <h3 class="text-2xl font-bold text-purple-400">Audius</h3>
                    </div>
                    <p class="mb-4">A decentralized music streaming platform where BujuRocks shares tracks and exclusive NFTs through the $AUDIO token.</p>
                    <a href="https://audius.co/bujurocks" target="_blank" class="inline-block bg-purple-600 hover:bg-purple-500 text-white py-2 px-4 rounded-full text-sm transition-all">Visit Profile</a>
                </div>
                
                <!-- Zora -->
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-pink-500 glow-box hover:border-pink-400 transition-all">
                    <div class="flex items-center mb-4">
                        <img src="https://zora.co/favicon.ico" alt="Zora" class="w-12 h-12 mr-4">
                        <h3 class="text-2xl font-bold text-pink-400">Zora</h3>
                    </div>
                    <p class="mb-4">A universal media registry protocol where BujuRocks publishes and monetizes digital creations as NFTs.</p>
                    <a href="https://zora.co" target="_blank" class="inline-block bg-pink-600 hover:bg-pink-500 text-white py-2 px-4 rounded-full text-sm transition-all">Discover</a>
                </div>
                
                <!-- Rarible -->
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-yellow-500 glow-box hover:border-yellow-400 transition-all">
                    <div class="flex items-center mb-4">
                        <img src="https://rarible.com/favicon.png" alt="Rarible" class="w-12 h-12 mr-4">
                        <h3 class="text-2xl font-bold text-yellow-400">Rarible</h3>
                    </div>
                    <p class="mb-4">One of the earliest NFT marketplaces supporting music NFTs, featuring limited edition BujuRocks collectibles.</p>
                    <a href="https://rarible.com" target="_blank" class="inline-block bg-yellow-600 hover:bg-yellow-500 text-white py-2 px-4 rounded-full text-sm transition-all">Browse</a>
                </div>
                
                <!-- Sound.xyz -->
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-green-500 glow-box hover:border-green-400 transition-all">
                    <div class="flex items-center mb-4">
                        <img src="https://sound.xyz/favicon.ico" alt="Sound.xyz" class="w-12 h-12 mr-4">
                        <h3 class="text-2xl font-bold text-green-400">Sound.xyz</h3>
                    </div>
                    <p class="mb-4">A premium music NFT marketplace where BujuRocks releases exclusive tracks with unique visual artwork.</p>
                    <a href="https://sound.xyz" target="_blank" class="inline-block bg-green-600 hover:bg-green-500 text-white py-2 px-4 rounded-full text-sm transition-all">Listen</a>
                </div>
                
                <!-- Royal -->
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-red-500 glow-box hover:border-red-400 transition-all">
                    <div class="flex items-center mb-4">
                        <img src="https://royal.io/favicon.ico" alt="Royal" class="w-12 h-12 mr-4">
                        <h3 class="text-2xl font-bold text-red-400">Royal</h3>
                    </div>
                    <p class="mb-4">Own a piece of BujuRocks' music catalog with royalty-sharing NFTs that give you rights to future revenue.</p>
                    <a href="https://royal.io" target="_blank" class="inline-block bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-full text-sm transition-all">Invest</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Promotion Tips -->
    <section class="py-16 px-4 bg-black bg-opacity-50">
        <div class="container mx-auto">
            <h2 class="text-4xl md:text-5xl font-bold mb-12 text-center text-purple-400 neon-text">Promote Your Music NFTs</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-cyan-500 glow-box">
                    <div class="text-cyan-400 text-3xl mb-4">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-cyan-300 mb-3">Community Building</h3>
                    <p class="mb-4">Engage with fans through Discord and Telegram. Offer exclusive NFT perks to community members.</p>
                </div>
                
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-pink-500 glow-box">
                    <div class="text-pink-400 text-3xl mb-4">
                        <i class="fas fa-gem"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-pink-300 mb-3">Utility NFTs</h3>
                    <p class="mb-4">Create NFTs with real-world benefits like concert tickets, backstage passes, or exclusive content access.</p>
                </div>
                
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-yellow-500 glow-box">
                    <div class="text-yellow-400 text-3xl mb-4">
                        <i class="fas fa-video"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-yellow-300 mb-3">Visual Storytelling</h3>
                    <p class="mb-4">Pair your music with stunning visual art and animations to create immersive NFT experiences.</p>
                </div>
                
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-green-500 glow-box">
                    <div class="text-green-400 text-3xl mb-4">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-green-300 mb-3">Generative Drops</h3>
                    <p class="mb-4">Release algorithmically generated music/visual combinations that make each NFT unique.</p>
                </div>
                
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-red-500 glow-box">
                    <div class="text-red-400 text-3xl mb-4">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-red-300 mb-3">Royalty Shares</h3>
                    <p class="mb-4">Offer NFTs that include percentage ownership of streaming royalties from your tracks.</p>
                </div>
                
                <div class="bg-gray-900 bg-opacity-70 p-6 rounded-xl border border-blue-500 glow-box">
                    <div class="text-blue-400 text-3xl mb-4">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-blue-300 mb-3">AI Collaborations</h3>
                    <p class="mb-4">Use AI tools to create unique remixes or visualizers that can be minted as limited edition NFTs.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-20 px-4 text-center">
        <div class="container mx-auto max-w-4xl">
            <h2 class="text-4xl md:text-6xl font-bold mb-8 neon-text pulse">Join the Electronic NFT Movement</h2>
            <p class="text-xl md:text-2xl mb-12 text-cyan-300">Own a piece of BujuRocks' neon soundscape revolution through exclusive Music NFTs</p>
            
            <div class="flex flex-wrap justify-center gap-6">
                <a href="https://audius.co/bujurocks" target="_blank" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-4 px-8 rounded-full flex items-center gap-3 text-lg transition-all glow-box">
                    <i class="fas fa-headphones"></i> Stream on Audius
                </a>
                <a href="https://opensea.io" target="_blank" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-4 px-8 rounded-full flex items-center gap-3 text-lg transition-all glow-box">
                    <i class="fas fa-coins"></i> Collect NFTs
                </a>
                <a href="https://youtu.be/wqA3irdoPyc?si=fRGDuvuPs1XmTU8i" target="_blank" class="bg-red-600 hover:bg-red-500 text-white font-bold py-4 px-8 rounded-full flex items-center gap-3 text-lg transition-all glow-box">
                    <i class="fab fa-youtube"></i> Watch Video
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="py-12 px-4 bg-black bg-opacity-70">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h2 class="text-3xl font-bold neon-text">BUJUROCKS</h2>
                    <p class="text-cyan-300 mt-2">Neon Electronic Soundscapes</p>
                </div>
                
                <div class="flex space-x-6">
                    <a href="https://twitter.com" target="_blank" class="text-2xl text-cyan-400 hover:text-cyan-300 transition-all">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="https://instagram.com" target="_blank" class="text-2xl text-purple-400 hover:text-purple-300 transition-all">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://discord.com" target="_blank" class="text-2xl text-blue-400 hover:text-blue-300 transition-all">
                        <i class="fab fa-discord"></i>
                    </a>
                    <a href="https://tiktok.com" target="_blank" class="text-2xl text-pink-400 hover:text-pink-300 transition-all">
                        <i class="fab fa-tiktok"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>© 2023 BujuRocks. All rights reserved. The future of music is decentralized.</p>
            </div>
        </div>
    </footer>

    <script>
        // Add any interactive elements here
        document.addEventListener('DOMContentLoaded', function() {
            // Add animation class to elements when they come into view
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate__animated', 'animate__fadeInUp');
                    }
                });
            }, {threshold: 0.1});
            
            document.querySelectorAll('.glow-box').forEach(box => {
                observer.observe(box);
            });
            
            // Play button effect
            const playButtons = document.querySelectorAll('.play-button');
            playButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.add('animate__animated', 'animate__pulse');
                    setTimeout(() => {
                        this.classList.remove('animate__animated', 'animate__pulse');
                    }, 1000);
                });
            });
        });
    </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://huggingface.co/proxy/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://huggingface.co/proxy/enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://huggingface.co/proxy/enzostvs-deepsite.hf.space?remix=Bujurocks/musicnft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>