Responsive Tailwind Footer with Navigation Links

<footer class="bg-black border-white/10 border-t w-full">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid md:grid-cols-4 gap-8">
                <div class="md:col-span-2">
                    <a href="#overview" class="flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md">
                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 shadow-[inset_0_0_0_2px_rgba(255,255,255,0.06)]">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[18px] h-[18px]" aria-hidden="true">
                                <path d="M8 12h.01" class=""></path>
                                <path d="M12 12h.01" class=""></path>
                                <path d="M16 12h.01" class=""></path>
                                <path d="M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" class=""></path>
                            </svg>
                        </span>
                        <span class="text-lg tracking-tight" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif">FlowChat</span>
                    </a>
                    <p class="mt-3 text-sm text-gray-400 max-w-md">
                        Connecting teams with seamless, intelligent communication.
                    </p>
                </div>
                <div>
                    <h4 class="text-sm">Product</h4>
                    <ul class="mt-3 space-y-2 text-sm text-gray-400">
                        <li><a href="#features" class="hover:text-gray-200">Features</a></li>
                        <li><a href="#product" class="hover:text-gray-200">Product</a></li>
                        <li><a href="#analytics" class="hover:text-gray-200">Analytics</a></li>
                    </ul>
                </div>
                <div class="">
                    <h4 class="text-sm">Company</h4>
                    <ul class="mt-3 space-y-2 text-sm text-gray-400">
                        <li><a href="#pricing" class="hover:text-gray-200">Pricing</a></li>
                        <li><a href="#overview" class="hover:text-gray-200">Status</a></li>
                    </ul>
                </div>
            </div>
            <div class="mt-10 flex flex-col sm:flex-row items-center justify-between gap-4">
                <p class="text-xs text-gray-500">
                    © <span id="year">2025</span> FlowChat. All rights reserved.
                </p>
                <div class="flex items-center gap-4 text-xs text-gray-500">
                    <a href="#" class="hover:text-gray-300">Terms</a>
                    <a href="#" class="hover:text-gray-300">Privacy</a>
                    <a href="#overview" class="inline-flex items-center gap-1 hover:text-gray-300">
                        Back to top
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5">
                            <path d="m5 12 7-7 7 7" class=""></path>
                            <path d="M12 19V5" class=""></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>