App Store Dark Footer

<footer class="w-full bg-slate-900 border-t border-slate-800 p-12 md:p-20">
        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-start gap-12">
            <div class="space-y-6">
                <div class="text-3xl font-black text-white italic tracking-tighter">FLUX.</div>
                <p class="text-slate-500 text-sm max-w-xs leading-relaxed">Building the foundation for better financial
                    lives through transparent banking and instant credit.</p>
                <div class="flex gap-4">
                    <button
                        class="bg-indigo-600 text-white px-6 py-3 rounded-2xl flex items-center gap-3 hover:bg-indigo-500 transition-all shadow-lg shadow-indigo-900/20">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M17.05 20.28c-.96.95-2.04 1.43-3.08 1.43-1.42 0-2.32-.82-3.75-.82-1.42 0-2.43.82-3.74.82-1.05 0-2.15-.53-3.08-1.43C1.41 18.23 0 14.54 0 11.23c0-3.34 1.34-5.32 3.14-6.34 1.05-.6 2.15-.9 3.1-.9 1.15 0 2.12.38 3.05.38.92 0 1.95-.38 3.1-.38.94 0 2.05.3 3.1.9 1.8 1.02 3.14 3 3.14 6.34 0 3.31-1.41 7-3.44 9.05zM12 0c0 1.5-.66 2.84-1.74 3.75-1.07.9-2.58 1.5-4.08 1.5.15-3 1.6-5.25 4.35-5.25.96 0 1.87.16 2.65.48.51.21.82.72.82 1.52z" />
                        </svg>
                        <div class="text-left">
                            <p class="text-[8px] uppercase font-bold opacity-70">Download on the</p>
                            <p class="text-sm font-bold -mt-1">App Store</p>
                        </div>
                    </button>
                </div>
            </div>
            <div
                class="grid grid-cols-2 md:grid-cols-3 gap-12 text-sm font-black text-slate-400 uppercase tracking-widest">
                <div class="space-y-4">
                    <p class="text-white">Product</p>
                    <a href="#" class="block hover:text-indigo-400 transition-colors">Features</a>
                    <a href="#" class="block hover:text-indigo-400 transition-colors">Pricing</a>
                </div>
                <div class="space-y-4">
                    <p class="text-white">Company</p>
                    <a href="#" class="block hover:text-indigo-400 transition-colors">About</a>
                    <a href="#" class="block hover:text-indigo-400 transition-colors">Blog</a>
                </div>
                <div class="space-y-4">
                    <p class="text-white">Legal</p>
                    <a href="#" class="block hover:text-indigo-400 transition-colors">Privacy</a>
                    <a href="#" class="block hover:text-indigo-400 transition-colors">Terms</a>
                </div>
            </div>
        </div>
        <div
            class="max-w-7xl mx-auto mt-20 pt-10 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-bold uppercase tracking-[0.3em]">
            <p>&copy; 2024 FLUX INC.</p>
            <div class="flex gap-10">
                <a href="#">Twitter</a>
                <a href="#">Github</a>
            </div>
        </div>
    </footer>