Newsletter Subscription CTA Section

<div class="bg-[#000000] relative mt-40">

    <!-- Floating Dark Feature Card -->
    <!-- Negative margin pulls it up into the white section above -->
    <div class="relative z-30 mx-4 lg:mx-auto max-w-6xl -mt-16 transform lg:-translate-y-12">
        <div
            class="bg-gradient-to-r from-[#1A1A1A] to-[#0A0A0A] rounded-[2rem] p-8 lg:p-16 overflow-hidden relative shadow-2xl border border-white/10">
            <!-- Grid/Globe Background Effect -->
            <div class="absolute top-0 right-0 w-full lg:w-1/2 h-full opacity-40">
                <div
                    class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-900/40 via-transparent to-transparent">
                </div>
                <!-- Simulate Dotted Map/Globe with CSS pattern -->
                <div class="w-full h-full"
                    style="background-image: radial-gradient(white 1px, transparent 1px); background-size: 20px 20px; mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);">
                </div>
            </div>

            <div class="relative z-10 max-w-xl">
                <h3 class="text-3xl lg:text-5xl text-white mb-4 leading-tight font-playfair font-medium tracking-tight"
                    style="">
                    Experience superior
                    architecture design
                </h3>
                <p class="text-[#A1A1AA] text-sm lg:text-base mb-8 font-geist"
                    style="transition: outline 0.1s ease-in-out;">
                    150+ international awards won for sustainable innovation.
                </p>
                <button class="bg-white text-black px-6 py-3 rounded-lg text-sm font-semibold hover:bg-gray-200 transition-colors font-geist" style="transition: outline 0.1s ease-in-out;">
                        Get started
                    </button>
            </div>
        </div>
    </div>

    <!-- Main Footer Content -->
    <footer class="pt-12 lg:pt-24 pb-12 px-6 lg:px-12 text-[#E4E4E7]">
        <div class="max-w-7xl mx-auto flex flex-col lg:flex-row justify-between gap-12 lg:gap-24 mb-20">

            <!-- Brand / Address -->
            <div class="lg:w-1/3">
                <div class="flex items-center gap-2 mb-6">
                    <iconify-icon icon="lucide:drafting-compass" class="text-xl text-white"
                        stroke-width="1.5"></iconify-icon>
                    <span class="font-serif text-lg font-medium text-white font-geist" style="transition: outline 0.1s ease-in-out;">ArchDigest</span>
                </div>

                <div class="space-y-2 text-sm">
                    <div class="flex justify-between max-w-[200px]">
                        <span class="text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">Phone number</span>
                        <span class="text-white font-geist" style="transition: outline 0.1s ease-in-out;">1-800-201-1019</span>
                    </div>
                    <div class="flex justify-between max-w-[280px]">
                        <span class="text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">Email</span>
                        <span class="text-white font-geist" style="transition: outline 0.1s ease-in-out;">support@archdigest.com</span>
                    </div>
                </div>
            </div>

            <!-- Links -->
            <div class="grid grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-16 lg:flex-1">
                <div>
                    <h4 class="text-white font-medium text-sm mb-4 font-geist"
                        style="transition: outline 0.1s ease-in-out;">Quick links</h4>
                    <ul class="space-y-3 text-sm text-[#A1A1AA]">
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Pricing</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Resources</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">About us</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">FAQ</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Contact us</a></li>
                    </ul>
                </div>
                <div class="">
                    <h4 class="text-white font-medium text-sm mb-4 font-geist"
                        style="transition: outline 0.1s ease-in-out;">Social</h4>
                    <ul class="space-y-3 text-sm text-[#A1A1AA]">
                        <li class=""><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Facebook</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Instagram</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">LinkedIn</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Twitter</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Youtube</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-white font-medium text-sm mb-4 font-geist"
                        style="transition: outline 0.1s ease-in-out;">Legal</h4>
                    <ul class="space-y-3 text-sm text-[#A1A1AA]">
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Terms of service</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Privacy policy</a></li>
                        <li><a href="#" class="hover:text-white transition-colors font-geist"
                                style="transition: outline 0.1s ease-in-out;">Cookie policy</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Copyright -->
        <div class="border-t border-white/10 pt-8 text-center lg:text-left">
            <p class="text-xs text-[#A1A1AA] font-geist" style="transition: outline 0.1s ease-in-out;">© 2024
                ArchDigest. All rights reserved.</p>
        </div>
    </footer>
</div>