{{-- Card total users --}}
<a href="{{ route('participants.index') }}">
    <div class="max-w-3xl mx-auto sm:px-12 lg:px-8">
        <div
            class="rounded-md shadow-md bg-white border border-purple-600 dark:bg-gray-800 hover:-translate-y-1 hover:scale-110 hover:bg-gray-50 transition ease-in-out delay-50 dark:hover:bg-gray-600 overflow-hidden">
            <div class="p-6 text-center text-gray-900 dark:text-gray-100 hover:text-blue-700 dark:hover:text-blue-400">
                <div class="flex items-center space-x-3">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-8 h-8 text-purple-600">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                    </svg>
                    <div class="p-1">
                        {{ count($users) }}
                    </div>
                    <div class="p-1">
                        {{ __('Active User(s)') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</a>