<section id="beranda" class="flex w-full min-h-screen px-4 sm:px-6 md:px-10 lg:px-14 mx-auto">
    <div
        class="flex flex-col-reverse md:flex-row justify-center md:justify-center items-center space-y-reverse space-y-4 md:space-y-0 md:space-x-4 lg:space-x-8 w-full">
        <div class="flex flex-col space-y-4 md:space-y-5 w-full md:w-1/2 text-center md:text-left">
            <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-wide leading-tight">
                <span class="text-orange-500">Edukasi dan Solusi</span>
                Peternakan Ayam Broiler untuk Meningkatkan Kualitas Peternakan Anda.
            </h1>
            <p class="font-medium text-sm sm:text-base">
                Bangun Peternakan Ayam Broiler yang Sukses dan Berkelanjutan dengan Ilmu, Dukungan,
                serta Solusi Praktis yang Tepat untuk Setiap Tahap Usaha Anda.
            </p>
            <div class="flex justify-center md:justify-start">
                <a href="{{ url('/#article') }}">
                    <x-primary-button
                        class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 bg-orangeCrayola">
                        Mulai Sekarang
                    </x-primary-button>
                </a>
            </div>
        </div>
        <div class="w-full md:w-1/2 flex justify-center mb-2 md:mb-0">
            <img src="{{ asset('images/hero.png') }}" alt="icon" class="w-3/4 md:w-auto max-w-full h-auto">
        </div>
    </div>
</section>
