<div class="position-relative">
  <div class="row">
    <div class="col-md-8">
      <div class="p-4 pb-3">

        <div class="row">
          <div class="col-md-6">
            <div class="position-relative">
              <a href="@@webRoot/horizontal/app-chat.html" class="d-flex align-items-center pb-9 position-relative">
                <div class="bg-primary-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:chat-line-bold-duotone" class="fs-7 text-primary"></iconify-icon>
                </div>
                <div>
                  <h6 class="mb-0">Chat Application</h6>
                  <span class="fs-11 d-block text-body-color">New messages arrived</span>
                </div>
              </a>
              <a href="@@webRoot/horizontal/app-invoice.html" class="d-flex align-items-center pb-9 position-relative">
                <div class="bg-secondary-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:bill-list-bold-duotone" class="fs-7 text-secondary"></iconify-icon>
                </div>
                <div>
                  <h6 class="mb-0">Invoice App</h6>
                  <span class="fs-11 d-block text-body-color">Get latest invoice</span>
                </div>
              </a>
              <a href="@@webRoot/horizontal/app-contact2.html" class="d-flex align-items-center pb-9 position-relative">
                <div class="bg-warning-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:phone-calling-rounded-bold-duotone"
                    class="fs-7 text-warning"></iconify-icon>
                </div>
                <div>
                  <h6 class="mb-0">Contact Application</h6>
                  <span class="fs-11 d-block text-body-color">2 Unsaved Contacts</span>
                </div>
              </a>
              <a href="@@webRoot/horizontal/app-email.html" class="d-flex align-items-center pb-9 position-relative">
                <div class="bg-danger-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:letter-bold-duotone" class="fs-7 text-danger"></iconify-icon>
                </div>
                <div>
                  <h6 class="mb-0">Email App</h6>
                  <span class="fs-11 d-block text-body-color">Get new emails</span>
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-6">
            <div class="position-relative">
              <a href="@@webRoot/horizontal/page-user-profile.html" class="d-flex align-items-center pb-9 position-relative">
                <div class="bg-success-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:user-bold-duotone" class="fs-7 text-success"></iconify-icon>
                </div>
                <div>
                  <h6 class="mb-0">User Profile</h6>
                  <span class="fs-11 d-block text-body-color">learn more information</span>
                </div>
              </a>
              <a href="@@webRoot/horizontal/app-calendar.html" class="d-flex align-items-center pb-9 position-relative">
                <div class="bg-primary-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:calendar-minimalistic-bold-duotone"
                    class="fs-7 text-primary"></iconify-icon>
                </div>
                <div>
                  <h6 class="mb-0">Calendar App</h6>
                  <span class="fs-11 d-block text-body-color">Get dates</span>
                </div>
              </a>
              <a href="@@webRoot/horizontal/app-contact.html" class="d-flex align-items-center pb-9 position-relative">
                <div class="bg-secondary-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:smartphone-2-bold-duotone"
                    class="fs-7 text-secondary"></iconify-icon>
                </div>
                <div>
                  <h6 class="mb-0">Contact List Table</h6>
                  <span class="fs-11 d-block text-body-color">Add new contact</span>
                </div>
              </a>
              <a href="@@webRoot/horizontal/app-notes.html" class="d-flex align-items-center pb-9 position-relative">
                <div class="bg-warning-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:notes-bold-duotone" class="fs-7 text-warning"></iconify-icon>
                </div>
                <div>
                  <h6 class="mb-0">Notes Application</h6>
                  <span class="fs-11 d-block text-body-color">To-do and Daily tasks</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4 d-none d-lg-flex">
      <img src="@@webRoot/assets/images/backgrounds/mega-dd-bg.jpg" alt="mega-dd" class="img-fluid mega-dd-bg" />
    </div>
  </div>
</div>