<section class="text-white bg-stone-900">
    <div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8">
        <div class="max-w-lg mx-auto text-center">
            <h1
                class="text-3xl font-bold text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
                Welcome to Heimerdinger</h1>

            <h2 class="mt-4 text-stone-300">
                Heimerdinger.LoL is a website dedicated to providing information about League of
                Legends. We provide information about the champions, skins, game assets, and more.
            </h2>
        </div>

        <div class="grid grid-cols-1 gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3">
            <a class="block p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
                href="/champions">

                <x-iconsax-bul-personalcard class="h-10 text-orange-400" />

                <h2 class="mt-4 text-xl font-bold text-white">All Champions</h2>

                <p class="mt-1 text-sm text-stone-300">
                    Can't decide which champion to play? Check out all the champions
                    available in League of Legends along with their skins and played roles.
                </p>
            </a>

            <a class="block p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
                href="/skins">
                <x-iconsax-bul-paintbucket class="h-10 text-orange-400" />

                <h2 class="mt-4 text-xl font-bold text-white">Skin Information</h2>

                <p class="mt-1 text-sm text-stone-300">
                    All the information you need about skins in League of Legends. Check out the
                    latest skins, upcoming skins, and more.
                </p>
            </a>

            <a class="block p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
                href="/assets">
                <x-iconsax-bul-3d-cube-scan class="h-10 text-orange-400" />

                <h2 class="mt-4 text-xl font-bold text-white">Game Assets</h2>

                <p class="mt-1 text-sm text-stone-300">
                    Looking for that one specific icon or emote? Don't worry, we've got you covered.
                    Check out all the game assets you could ever need.
                </p>
            </a>

            <a class="block p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
                href="/sale-rotation">
                <x-iconsax-bul-money-change class="h-10 text-orange-400" />

                <h2 class="mt-4 text-xl font-bold text-white">Sale Rotation</h2>

                <p class="mt-1 text-sm text-stone-300">
                    Don't miss out on the latest sales in League of Legends. Check out the latest
                    sale rotation and when they will be available.
                </p>
            </a>

            <a class="block p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
                href="/posts">
                <x-iconsax-bul-receipt-edit class="h-10 text-orange-400" />

                <h2 class="mt-4 text-xl font-bold text-white">Blog Posts</h2>

                <p class="mt-1 text-sm text-stone-300">
                    Want to know more about League of Legends? Check out our blog posts for more
                    information about the game and its events.
                </p>
            </a>

            <a class="block p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
                href="/about">
                <x-iconsax-bul-message-question class="h-10 text-orange-400" />

                <h2 class="mt-4 text-xl font-bold text-white">About The Game</h2>

                <p class="mt-1 text-sm text-stone-300">
                    Wondering what League of Legends is all about? Check out our About page for more
                    information about the game.
                </p>
            </a>
        </div>
    </div>
</section>