@props([
    'title' => 'Lorem Ipsum',
    'description' =>
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, similique nulla.',
    'icon' => 'ph-users-three',
    'moreLabel' => 'Selengkapnya',
    'href' => '#',
])

<a
    href="{{ $href }}"
    class="min-h-full"
>
    <x-button class="h-full group hover:bg-tertiary-100 hover:text-white px-5">
        <x-stack class="w-full h-full font-poppins justify-between">
            <x-stack class="[&>*]:group-hover:text-white">
                <i class="ph-fill {{ $icon }} mb-3 text-4xl text-tertiary-100"></i>
                <span class="font-semibold text-start leading-5">
                    {{ $title }}
                </span>
                <span class="mt-3 text-sm text-start font-light text-gray-700">
                    {{ $description }}
                </span>
            </x-stack>
            <x-landing.system-list.label-more>
                {{ $moreLabel }}
            </x-landing.system-list.label-more>
        </x-stack>
    </x-button>
</a>