<x-layouts::app :title="__('Grant Page')">
    <a href="{{ route('user.grants.history') }}"
        class="flex items-center gap-1 px-3 py-1.5 rounded-md text-black dark:text-white bg-sky-600 w-fit hover:shadow hover:bg-gray-100 dark:hover:bg-gray-700 transition">
        <x-flux::icon.receipt-percent variant="solid" class="w-4 h-4" />
        <span class="text-sm font-medium">Track Request</span>
    </a>
    <div class="bg-white dark:bg-zinc-800 p-6 md:p-8 rounded-xl shadow-lg space-y-6 ">

        <!-- Header -->
        <div class="text-center space-y-1">
            <h1 class="text-lg md:text-2xl font-semibold text-gray-900 dark:text-gray-50">
                Select Application Type
            </h1>
            <p class="text-sm md:text-base text-gray-600 dark:text-gray-300">
                Choose the type of application you’d like to submit. Documentation requirements differ for individuals
                and companies.
            </p>
        </div>

        <!-- Cards -->
        <livewire:grant-selector />
    </div>

</x-layouts::app>
