SaaS Full Footer

<footer class="pb-10 pt-20">
        <div class="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-5 gap-12 mb-20">
            <div class="col-span-2">
                <div class="text-2xl font-bold mb-6 text-slate-900 font-bold">Hub.</div>
                <p class="text-slate-500 max-w-xs leading-relaxed mb-6 font-medium">Building the foundation for the next
                    generation of digital products and startups.</p>
                <div class="flex gap-4">
                    <div class="w-8 h-8 bg-slate-100 rounded-lg"></div>
                    <div class="w-8 h-8 bg-slate-100 rounded-lg"></div>
                    <div class="w-8 h-8 bg-slate-100 rounded-lg"></div>
                </div>
            </div>
            <div>
                <h4 class="font-bold mb-6 text-slate-900 font-bold">Product</h4>
                <ul class="space-y-4 text-slate-500 text-sm">
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">Features</a></li>
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">Integrations</a></li>
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">Templates</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold mb-6 text-slate-900 font-bold">Company</h4>
                <ul class="space-y-4 text-slate-500 text-sm">
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">About Us</a></li>
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">Careers</a></li>
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">Press</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold mb-6 text-slate-900 font-bold">Legal</h4>
                <ul class="space-y-4 text-slate-500 text-sm">
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">Privacy</a></li>
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">Terms</a></li>
                    <li><a href="#" class="hover:text-indigo-600 transition-colors">Cookies</a></li>
                </ul>
            </div>
        </div>
        <div
            class="max-w-7xl mx-auto px-6 pt-10 border-t border-slate-100 flex flex-col md:flex-row justify-between text-slate-400 text-sm">
            <p>© 2024 Web Template Hub. All rights reserved.</p>
            <div class="flex gap-6 mt-4 md:mt-0">
                <a href="#" class="hover:text-slate-600">Twitter</a>
                <a href="#" class="hover:text-slate-600">GitHub</a>
                <a href="#" class="hover:text-slate-600">Discord</a>
            </div>
        </div>
    </footer>