<script setup lang="ts"></script>

<template>
  <div class="info-card border-box h-[217px] w-full rounded-lg p-5">
    <div class="items-flex-start flex justify-between">
      <div>
        <h2 class="text-lg font-bold">Application Management</h2>
        <div class="text-xs text-[#9A9BA3]">Application Management</div>
      </div>
      <img
        alt="more"
        class="h-[29px] w-[29px] cursor-pointer"
        src="@/assets/image/home-more.png"
      />
    </div>
    <p class="mt-4 w-[714px] text-sm text-xs leading-relaxed text-[#9A9BA3]">
      Mauris hendrerit sagittis ligula, in cursus augue. Aliquam a tempor lacus.
      Maecenas rutrum magna vitae lacus dignissim hendrerit lacinia ac neque.
      Proin eros Leo, fermentum in justo non, semper interdum nisl. Cras metus
      erat, lobortis at dignissim quis, finibus non neque. Mauris mattis, ex ac
      placerat accumsan, lorem sem suscipit arcu, eget hendrerit est metus nec
      nulla. Nulla erat ligula, aliquet eu ullamcorper non, auctor eget risus.
      Curabitur mollis nisl vitae laoreet cursus. Sed a ipsum eget erat ornare
      dapibus. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos.
    </p>
  </div>
</template>

<style scoped>
.info-card {
  background: url('@/assets/image/ApplicationManagement.png') no-repeat center
    center;
  background-size: cover;
}
</style>
