<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">

              <!-- SERVIÇOS -->
              <div wire:click='gotoServicesPage()' class="cursor-pointer relative bg-white shadow rounded-lg p-6 overflow-hidden">
                <i class="fas fa-server absolute -top-4 -right-6 text-gray-200 text-8xl -rotate-12 pointer-events-none select-none opacity-30"></i>
                <div class="text-center relative z-10">
                  <p class="text-5xl font-semibold text-blue-600">0</p>
                  <p class="text-gray-700 font-semibold mt-1">SERVIÇOS</p>
                </div>
              </div>

              <!-- TICKETS -->
              <div wire:click='gotoSendTicketPage()' class="cursor-pointer relative bg-white shadow rounded-lg p-6 overflow-hidden">
                <i class="fas fa-comments absolute -top-4 -right-6 text-gray-200 text-8xl -rotate-12 pointer-events-none select-none opacity-30"></i>
                <div class="text-center relative z-10">
                  <p class="text-5xl font-semibold text-blue-600">0</p>
                  <p class="text-gray-700 font-semibold mt-1">TICKETS</p>
                </div>
              </div>

              <!-- FATURAS -->
              <div class="cursor-pointer relative bg-white shadow rounded-lg p-6 overflow-hidden">
                <i class="fas fa-credit-card absolute -top-4 -right-6 text-gray-200 text-8xl -rotate-12 pointer-events-none select-none opacity-30"></i>
                <div class="text-center relative z-10">
                  <div class="flex flex-col">
                  <i class="text-5xl text-blue-600 fa fa-thumbs-up"></i>
                  <p class="text-gray-700 font-semibold mt-1">FATURAS</p>                    
                  </div>

                </div>
              </div>

        </div>