<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}}