<footer class="container border-t-2 border-slate-800 text-center mx-auto px-4 py-8 xl:max-w-screen-xl dark:text-white dark:border-white">
    <div class="flex flex-col justify-center items-center">
        <p class="mb-4">
            {{ translate('powered_by') }} <a href="https://www.directorylister.com" class="underline hover:text-sky-700 dark:hover:text-violet-700">Directory Lister</a>
        </p>

        <div class="flex">
            <a href="https://github.com/DirectoryLister/DirectoryLister" title="GitHub" class="text-slate-400 mx-2 transition hover:text-github hover:scale-125 dark:hover:text-white">
                <i class="fab fa-github fa-xl"></i>
            </a>

            <a href="https://bsky.app/profile/directorylister.com" title="Bluesky" class="text-slate-400 mx-2 transition hover:text-bluesky hover:scale-125">
                <i class="fab fa-bluesky fa-xl"></i>
            </a>

            <a href="https://github.com/DirectoryLister/DirectoryLister/discussions" title="Discussions" class="text-slate-400 mx-2 transition hover:text-violet-600 hover:scale-125">
                <i class="fas fa-comments fa-xl"></i>
            </a>

            <a href="https://github.com/sponsors/PHLAK" title="Sponsor" class="text-slate-400 mx-2 transition hover:text-pink-600 hover:scale-125">
                <i class="fas fa-heart fa-xl"></i>
            </a>
        </div>
    </div>
</footer>
