@section('title'){{ __('Dashboard') }}@endsection
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
    <div class="grid auto-rows-min gap-4 md:grid-cols-3">

        <article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <span class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400">
             <flux:icon.circle-dollar-sign />
            </span>
            <div>
                <p class="text-2xl font-medium text-gray-900 dark:text-white">0</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Balance</p>
            </div>
        </article>

        <article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <span class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400">
             <flux:icon.at-sign />
            </span>
            <div>
                <p class="text-2xl font-medium text-gray-900 dark:text-white">0</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Mailbox Created</p>
            </div>
        </article>

        <article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <span class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400">
             <flux:icon.mails />
            </span>
            <div>
                <p class="text-2xl font-medium text-gray-900 dark:text-white">0</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Emails Received</p>
            </div>
        </article>


    </div>
    <div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
        <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
    </div>
</div>