hugo-saasify-theme/layouts/partials/footer.html

<footer class="bg-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
        <div class="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0">
            <!-- Logo and Social Media -->
            <div class="flex-1">
                <div class="flex items-center space-x-3 mb-4">
                    <a href="{{ .Site.BaseURL }}" class="inline-block">
                        {{ with .Site.Params.logo }}
                            <img src="{{ . | relURL }}" alt="{{ $.Site.Title }}" class="h-6">
                        {{ end }}
                    </a>
                    <span class="text-xl font-bold text-gray-900">{{ .Site.Title }}</span>
                </div>
                <div class="flex space-x-3 p-2">
                    {{ with .Site.Params.social.linkedin }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">LinkedIn</span>
                        <img src="/images/social/linkedin.svg" alt="LinkedIn" class="h-5 w-5">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.twitter }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Twitter (X)</span>
                        <img src="/images/social/twitter.svg" alt="Twitter" class="h-5 w-5">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.youtube }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">YouTube</span>
                        <img src="/images/social/youtube.svg" alt="YouTube" class="h-5 w-5">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.facebook }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Facebook</span>
                        <img src="/images/social/facebook.svg" alt="Facebook" class="h-5 w-5">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.instagram }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Instagram</span>
                        <img src="/images/social/instagram.svg" alt="Instagram" class="h-5 w-5">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.github }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">GitHub</span>
                        <img src="/images/social/github.svg" alt="GitHub" class="h-5 w-5">
                    </a>
                    {{ end }}
                </div>
            </div>

            <!-- Column 1 -->
            <div class="flex-1">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">{{ .Site.Params.footer.column_1_title }}</h3>
                <ul class="space-y-2">
                    {{ range .Site.Menus.footer_column_1 }}
                        <li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li>
                    {{ end }}
                </ul>
            </div>

            <!-- Column 2 -->
            <div class="flex-1">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">{{ .Site.Params.footer.column_2_title }}</h3>
                <ul class="space-y-2">
                    {{ range .Site.Menus.footer_column_2 }}
                        <li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li>
                    {{ end }}
                </ul>
            </div>

            <!-- Newsletter -->
            <div class="flex-1">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">STAY UPDATED</h3>
                <form class="space-y-4">
                    <div>
                        <label for="email" class="sr-only">Email address</label>
                        <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Enter your email">
                    </div>
                    <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105">Subscribe</button>
                </form>
            </div>
        </div>

        <!-- Bottom -->
        <div class="mt-12 pt-8 border-t border-gray-200">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                <p class="text-gray-600 text-sm">
                    © {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved.
                </p>
                <a href="https://chaoming.li" class="text-sm text-gray-600 hover:text-primary-600" target="_blank" rel="noopener noreferrer">
                    Designed by Chaoming Li
                </a>
            </div>
        </div>
    </div>
</footer>