3D_Music_Footer_Navigation

<footer class="bg-gradient-to-br from-stone-100 to-stone-200 text-stone-700 py-12 px-6 dark:from-stone-900 dark:to-stone-950 dark:text-stone-300 relative overflow-hidden">
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: radial-gradient(circle at center, #d6d3d1 1px, transparent 1px); background-size: 20px 20px;"></div>

    <!-- Decorative rings for 3D effect -->
    <div class="absolute w-96 h-96 rounded-full bg-stone-300 dark:bg-stone-700 opacity-20 dark:opacity-10 -bottom-24 -left-24 blur-3xl"></div>
    <div class="absolute w-72 h-72 rounded-full bg-stone-400 dark:bg-stone-600 opacity-15 dark:opacity-8 top-12 -right-12 blur-3xl"></div>

    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative z-10">
        <!-- Section 1: Logo and Copyright -->
        <div class="flex flex-col items-start">
            <a href="#" class="inline-flex items-center space-x-2 text-2xl font-bold mb-4 transform transition-transform duration-300 hover:scale-105">
                <svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm-1 16.03V7.97c0-.49.38-.87.87-.87H15a.87.87 0 0 1 .87.87v10.06a.87.87 0 0 1-.87.87H11.87a.87.87 0 0 1-.87-.87zM13 14H9v-4h4v4z"/>
                </svg>
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-600 to-stone-800 dark:from-amber-400 dark:to-stone-200">SoundWave</span>
            </a>
            <p class="text-sm text-stone-600 dark:text-stone-400 mb-4">Dive into an ocean of sounds. Your ultimate audio experience begins here.</p>
            <p class="text-xs text-stone-500 dark:text-stone-400">&copy; 2023 SoundWave. All rights reserved.</p>
            <div class="flex space-x-4 mt-6">
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.368 21.248 22 17.07 22 12z" clip-rule="evenodd" /></svg>
                </a>
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.24 3.76c-.92-.92-2.12-1.44-3.44-1.44H7.2c-1.32 0-2.52.52-3.44 1.44C2.84 4.68 2.32 5.88 2.32 7.2v9.6c0 1.32.52 2.52 1.44 3.44s2.12 1.44 3.44 1.44h9.6c1.32 0 2.52-.52 3.44-1.44s1.44-2.12 1.44-3.44V7.2c0-1.32-.52-2.52-1.44-3.44zM12 18.08c-3.35 0-6.08-2.73-6.08-6.08S8.65 5.92 12 5.92s6.08 2.73 6.08 6.08-2.73 6.08-6.08 6.08zM18.42 7.78a1.36 1.36 0 1 1 0-2.72 1.36 1.36 0 0 1 0 2.72z"/><path d="M12 8.08c-2.16 0-3.92 1.76-3.92 3.92s1.76 3.92 3.92 3.92 3.92-1.76 3.92-3.92-1.76-3.92-3.92-3.92z"/></svg>
                </a>
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6.03c-.63.28-1.31.47-2.01.56.73-.44 1.29-1.13 1.55-1.99-.68.4-1.43.68-2.22.84-.64-.68-1.55-1.12-2.59-1.12-2.02 0-3.66 1.64-3.66 3.66 0 .29.03.56.08.83-3.05-.15-5.75-1.61-7.56-3.84-.32.55-.5 1.18-.5 1.87 0 1.27.65 2.39 1.63 3.05-.6-.02-1.16-.18-1.65-.45v.05c0 1.77 1.26 3.24 2.93 3.58-.3.08-.6.12-.9.12-.22 0-.44-.02-.65-.06.47 1.45 1.81 2.51 3.41 2.54-1.25.98-2.82 1.57-4.53 1.57-.29 0-.58-.02-.86-.05 1.62 1.04 3.54 1.65 5.59 1.65 6.71 0 10.37-5.56 10.37-10.37 0-.16-.01-.32-.01-.48.71-.51 1.34-1.14 1.83-1.87z"/></svg>
                </a>
            </div>
        </div>

        <!-- Section 2: Quick Links (Explore) -->
        <div>
            <h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Explore</h3>
            <ul class="space-y-3">
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">New Releases</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Top Charts</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Genres</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Artists</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Podcasts</a></li>
            </ul>
        </div>

        <!-- Section 3: Support & Legal -->
        <div>
            <h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Support</h3>
            <ul class="space-y-3">
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Help Center</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Contact Us</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Privacy Policy</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Terms of Service</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Cookie Policy</a></li>
            </ul>
        </div>

        <!-- Section 4: Newsletter & App Download -->
        <div class="space-y-6">
            <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Stay Connected</h3>
            <div>
                <p class="mb-3 text-stone-600 dark:text-stone-400">Subscribe to our newsletter for the latest updates.</p>
                <form class="flex flex-col sm:flex-row gap-2">
                    <label for="email-address" class="sr-only">Email address</label>
                    <input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 bg-white/50 dark:bg-stone-800/50 px-3.5 py-2 text-stone-900 dark:text-stone-100 shadow-sm ring-1 ring-inset ring-stone-300 dark:ring-stone-700 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 sm:text-sm sm:leading-6 transition-all duration-300 focus:outline-none focus:shadow-lg focus:shadow-amber-500/20" placeholder="Enter your email">
                    <button type="submit" class="flex-none rounded-md bg-amber-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 transform transition-transform duration-300 hover:scale-105 active:scale-95
                    relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        Subscribe
                    </button>
                </form>
            </div>
            <div class="mt-6">
                <p class="mb-3 text-stone-600 dark:text-stone-400">Download our mobile app to listen on the go!</p>
                <div class="flex space-x-3">
                    <a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        <svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-2 20h-6v-1h6v1zm3-3H6V4h12v14z"/>
                        </svg>
                        <span class="text-stone-800 dark:text-stone-200 text-sm font-medium">App Store</span>
                    </a>
                    <a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        <svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2.05 13.9c-.29.54-.84.85-1.4.85-.92 0-1.67-.75-1.67-1.67 0-.92.75-1.67 1.67-1.67.56 0 1.11.31 1.4.85l.76-.76c-.57-.96-1.57-1.54-2.58-1.54-1.84 0-3.33 1.49-3.33 3.33s1.49 3.33 3.33 3.33c1.01 0 2.01-.58 2.58-1.54l-.76-.76zm7.2-2.3l-.76.76c.29-.54.84-.85 1.4-.85.92 0 1.67.75 1.67 1.67 0 .92-.75 1.67-1.67 1.67-.56 0-1.11-.31-1.4-.85l-.76.76c.57.96 1.57 1.54 2.58 1.54 1.84 0 3.33-1.49 3.33-3.33s-1.49-3.33-3.33-3.33c-1.01 0-2.01.58-2.58 1.54z"/>
                        </svg>
                        <span class="text-stone-800 dark:text-stone-200 text-sm font-medium">Play Store</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>