<div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6 border border-gray-100">
    <dt>
        <div class="absolute rounded-md bg-green-500 w-12 h-12 flex items-center justify-center">
            <x-heroicon-o-document-duplicate class="w-5 h-5 text-white"/>
        </div>
        <p class="ml-16 truncate text-sm font-medium text-gray-500">{{ __('daylight::store.products') }}</p>
    </dt>

    <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
        <p class="text-2xl font-semibold text-gray-900">
            {{ Number::abbreviate($products) }}
        </p>
        <div class="absolute inset-x-0 bottom-0 bg-gray-100 px-4 py-4 sm:px-6">
            <div class="text-sm">
                <a href="{{ route('daylight.store.products.index') }}" class="font-medium text-sky-600 hover:text-sky-500">{{ __('daylight::general.view_all') }}</a>
            </div>
        </div>
    </dd>
</div>