<div class="content">
    <div class="row">
        <div class="col-12 col-lg-3 col-xl-3">
            <LinkTo @route="dashboard.fleet-ops.management.vendors" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.vendors.index.title"}}</p>
                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
            </LinkTo>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <LinkTo @route="dashboard.fleet-ops.management.fleets" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.fleets.index.title"}}</p>
                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
            </LinkTo>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <LinkTo @route="dashboard.fleet-ops.management.drivers" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.drivers.index.title"}}</p>
                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
            </LinkTo>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <LinkTo @route="dashboard.fleet-ops.management.vehicles" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.vehicles.index.title"}}</p>
                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
            </LinkTo>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <LinkTo @route="dashboard.fleet-ops.management.places" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.places.index.title"}}</p>
                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
            </LinkTo>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <LinkTo @route="dashboard.fleet-ops.management.contacts." class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.contacts.index.title"}}</p>
                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
            </LinkTo>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <LinkTo @route="dashboard.fleet-ops.management.issues" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.issues.index.title"}}</p>
                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
            </LinkTo>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <LinkTo @route="dashboard.fleet-ops.management.fuel-reports" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.fuel-reports.index.title"}}</p>
                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
            </LinkTo>
        </div>
    </div>
</div>
{{outlet}}