<footer class="flex flex-col bg-pewterBlue px-6 md:px-14 py-10">
    <div class="flex flex-col md:flex-row gap-y-8 md:gap-x-8 justify-between items-start mb-16">
        <div class="flex flex-col space-y-1">
            <h2 class="text-xl md:text-2xl font-medium">Edukasi dan Solusi Peternakan Ayam Broiler</h2>
            <p class="text-sm md:text-base font-medium">Langkah cerdas bagi peternak untuk meningkatkan produktivitas dan
                efisiensi usaha mereka.</p>
        </div>
        <div class="flex flex-col space-y-4">
            <h2 class="text-xl md:text-2xl font-medium">Informasi</h2>
            <ul class="flex flex-col space-y-2">
                <li>
                    <a href="{{ url('/#about-us') }}" class="font-medium text-gray-700 hover:font-semibold">Tentang
                        Kami</a>
                </li>
                <li>
                    <a href="{{ url('/#faq') }}" class="font-medium text-gray-700 hover:font-semibold">FAQ</a>
                </li>
            </ul>
        </div>
        <div class="flex flex-col space-y-4">
            <h2 class="text-xl md:text-2xl font-medium">Layanan</h2>
            <ul class="flex flex-col space-y-2">
                <li>
                    <a href="{{ url('/#article') }}" class="font-medium text-gray-700 hover:font-semibold">Artikel</a>
                </li>
                <li>
                    <a href="{{ url('/#forum') }}" class="font-medium text-gray-700 hover:font-semibold">Forum</a>
                </li>
            </ul>
        </div>
        <div class="flex flex-col space-y-4">
            <h2 class="text-xl md:text-2xl font-medium">Kontak Kami</h2>
            <ul class="flex flex-col space-y-2">
                <li>
                    <a href="tel:+6281264385621"
                        class="flex space-x-2 font-medium text-gray-700 hover:font-semibold items-center">
                        <i class="fa-solid fa-phone"></i>
                        <span>+6281268675668</span>
                    </a>
                </li>
                <li>
                    <a href="mailto:ternakq@gmail.com"
                        class="flex space-x-2 font-medium text-gray-700 hover:font-semibold items-center">
                        <i class="fa-solid fa-envelope"></i>
                        <span>ternakq@gmail.com</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="border-b-2 border-gray-700"></div>
    <div class="flex flex-col md:flex-row justify-between items-center pt-4">
        <div class="flex space-x-4 mb-4 md:mb-0">
            <a href="https://www.linkedin.com/in/mohamad-al-kahfi-b48107271/" target="_blank"
                class="bg-cosmicLatte w-8 h-8 rounded-full flex justify-center items-center">
                <i class="fa-brands fa-linkedin text-polishedPine text-lg"></i>
            </a>
            <a href="https://www.facebook.com/profile.php?id=100028652941985" target="_blank"
                class="bg-cosmicLatte w-8 h-8 rounded-full flex justify-center items-center">
                <i class="fa-brands fa-facebook text-polishedPine text-lg"></i>
            </a>
            <a href="https://www.instagram.com/alkaahfi__/" target="_blank"
                class="bg-cosmicLatte w-8 h-8 rounded-full flex justify-center items-center">
                <i class="fa-brands fa-instagram text-polishedPine text-lg"></i>
            </a>
            <a href="https://github.com/KahfiSmith" target="_blank"
                class="bg-cosmicLatte w-8 h-8 rounded-full flex justify-center items-center">
                <i class="fa-brands fa-github text-polishedPine text-lg"></i>
            </a>
        </div>
        <span x-data="{ year: new Date().getFullYear() }" class="font-medium">
            &copy;<span x-text="year"></span> TernakQ
        </span>
    </div>
</footer>
