Vertical Brand Footer

<footer class="w-full bg-black text-white p-12 md:p-32">
        <div class="max-w-7xl mx-auto text-center">
            <h2
                class="text-7xl md:text-[12rem] font-black italic tracking-tighter leading-none mb-20 pointer-events-none opacity-20">
                VANTAGE.</h2>
            <div
                class="grid grid-cols-2 md:grid-cols-4 gap-12 text-xs font-black uppercase tracking-widest text-slate-500 mb-32">
                <div class="space-y-4">
                    <p class="text-white mb-8">Navigation</p>
                    <a href="#" class="block hover:text-white transition-colors">Projects</a>
                    <a href="#" class="block hover:text-white transition-colors">Insights</a>
                    <a href="#" class="block hover:text-white transition-colors">Services</a>
                </div>
                <div class="space-y-4">
                    <p class="text-white mb-8">Studio</p>
                    <a href="#" class="block hover:text-white transition-colors">About Us</a>
                    <a href="#" class="block hover:text-white transition-colors">Careers</a>
                    <a href="#" class="block hover:text-white transition-colors">Contact</a>
                </div>
                <div class="col-span-2 text-right md:text-left">
                    <p class="text-white mb-8">Newsletter</p>
                    <p class="text-slate-400 mb-8 max-w-xs md:ml-0 ml-auto">Receive a monthly curation of our favorite
                        design resources.</p>
                    <div class="flex border-b border-slate-800 pb-2">
                        <input type="email" placeholder="Your Email"
                            class="bg-transparent flex-1 outline-none text-white placeholder-slate-800">
                        <button class="text-white hover:translate-x-2 transition-transform">&rarr;</button>
                    </div>
                </div>
            </div>
            <div
                class="flex flex-col md:flex-row justify-between items-center text-[10px] text-slate-600 font-bold uppercase tracking-[0.4em] gap-8">
                <p>Designed by Vantage Studio.</p>
                <div class="flex gap-12">
                    <a href="#" class="hover:text-white transition-colors">Behance</a>
                    <a href="#" class="hover:text-white transition-colors">Dribbble</a>
                    <a href="#" class="hover:text-white transition-colors">Instagram</a>
                </div>
            </div>
        </div>
    </footer>