Footer Section

<div class="relative overflow-hidden bg-[#2e3141] bg-[url('/dist/images/bg.jpg')] bg-center bg-cover">

    <div class="absolute inset-0 bg-gray-900 bg-opacity-80"></div>

    <div class="relative max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-extrabold text-gray-100 sm:text-4xl">
            <span class="block">Work with us</span>
        </h2>
        <div class="mt-4 text-lg leading-6 text-gray-300">
            <p>Do you want a beautiful and easy to manage website that is built to your specific needs?<br><br></p>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row justify-center items-center gap-3">

            <button x-on:click="openModal = true" class="block sm:inline-flex w-full sm:w-auto items-center justify-center px-5 py-3 text-base font-medium rounded-md text-white bg-gradient-to-r from-red-500 to-orange-500 hover:bg-gradient-to-l hover:from-blue-500 hover:to-green-600 transition" onclick="plausible('Schedule a call', {props: {page: 'Homepage', location: 'footer', lang: 'en-CA'}})">
                Schedule a call
            </button>

            <a href="http://webmarks.test/contact" class="block sm:inline-flex w-full sm:w-auto items-center justify-center px-5 py-3 text-base font-medium rounded-md text-gray-700 bg-gray-100 hover:text-white hover:bg-gradient-to-r hover:from-gray-600 hover:to-gray-500 transition">
                Send us a message
            </a>

        </div>

    </div>

    <div class="relative pt-8 pb-12 px-6 text-center">

        <div class="relative mt-2 max-w-2xl mx-auto text-center text-gray-300 flex flex-col justify-between">

            <div>
                <img class="mx-auto" src="/dist/images/webmarks_logo.png" srcset="/dist/images/webmarks_logo.png 1x, /dist/images/[email protected] 2x" width="300" height="160" alt="Webmarks logo">
            </div>

            <div class="flex justify-center gap-x-2 mx-auto text-lg font-semibold text-gray-300">
                Lethbridge, Alberta
                <svg class="h-6 w-6 text-red-500 fill-current" viewBox="0 0 465.9 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M360.8 351.7c2.5-2.5 105.2-92.4 105.2-92.4l-17.5-7.5c-10-4.9-7.4-11.5-5-17.4 2.4-7.6 20.1-67.3 20.1-67.3s-47.7 10-57.7 12.5c-7.5 2.4-10-2.5-12.5-7.5s-15-32.4-15-32.4 -52.6 59.9-55.1 62.3c-10 7.5-20.1 0-17.6-10 0-10 27.6-129.6 27.6-129.6s-30.1 17.4-40.1 22.4c-7.5 5-12.6 5-17.6-5 -5.1-7.5-42.7-79.8-42.7-79.8s-37.5 72.3-42.5 79.8c-5 10-10 10-17.6 5 -10-5-40.1-22.4-40.1-22.4s27.6 119.6 27.6 129.6c2.5 10-7.5 17.5-17.6 10 -2.5-2.5-55.1-62.3-55.1-62.3s-12.5 27.3-15 32.3c-2.5 5-5 9.9-12.5 7.5C50 177 2.4 167 2.4 167s17.6 59.7 20.1 67.3c2.4 6 5 12.5-5 17.4l-17.5 7.6s102.6 89.9 105.2 92.4c5.1 5 10 7.5 5.1 22.5 -5.1 15-10.1 35.1-10.1 35.1s95.2-20.1 105.3-22.6c8.7-.9 18.3 2.5 18.3 12.5 0 10.1-5.8 112.8-5.8 112.8h30s-5.8-102.7-5.8-112.8c0-10 9.5-13.4 18.4-12.5 10 2.5 105.2 22.6 105.2 22.6s-5-20.1-10-35.1 0-17.5 5-22.5Z"></path>
                </svg>
            </div>

            <p class="mt-8 leading-relaxed mx-auto text-lg text-gray-400">
                Established in 2010, we specialize in website strategy, content planning and custom website design &amp;
                development for small businesses and non-profits in Western Canada.
            </p>

        </div>

        <ul class="mt-12 mb-0 flex flex-col gap-4 text-gray-500">
            <li>
                © 2022 Webmarks Design &amp; Marketing
                Ltd. All rights reserved.
            </li>

            <li>
                <a href="http://webmarks.test/privacy" class="text-gray-400 hover:text-white transition font-semibold border-b border-dashed border-gray-500 hover:border-solid hover:border-white">
                    Privacy Policy
                </a>
            </li>
        </ul>

    </div>

    <div class="h-2 bg-gradient-to-r from-red-600 via-amber-400 to-green-600"></div>

</div>