features #1

1
<section>
  <div class="relative px-8 pt-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="max-w-3xl">
      <p class="text-sm leading-normal font-bold uppercase text-accent-600">
        Tagline
      </p>
      <h2
        class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
      >
        Transforming the banking experience for a digital future
      </h2>
      <p class="text-base leading-normal mt-4 text-base-500 font-medium">
        The fastest method for working together on staging and temporary
        environments.
      </p>
    </div>
    <div
      class="gap-x-2 gap-y-14 mt-12 lg:gap-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
    >
      <div>
        <div>
          <h3
            class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
          >
            Innovative Design
          </h3>
          <p class="text-base leading-normal mt-4 text-base-500 font-medium">
            Our cutting-edge design offers a fresh, modern look that transforms
            your project into a standout experience.
          </p>
        </div>
        <ul
          role="list"
          class="space-y-1 mt-6 text-base font-medium text-base-900"
        >
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-5 text-accent-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base leading-normal">
                Revolutionizing communication
              </span>
            </div>
          </li>
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-5 text-accent-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base leading-normal">
                Enhancing productivity
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div>
        <div>
          <h3
            class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
          >
            Powerful Functionality
          </h3>
          <p class="text-base leading-normal mt-4 text-base-500 font-medium">
            Equipped with advanced features and tools, our solution effortlessly
            manages complex tasks and workflows.
          </p>
        </div>
        <ul
          role="list"
          class="space-y-1 mt-6 text-base font-medium text-base-900"
        >
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-5 text-accent-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base leading-normal">
                Unlocking innovative solutions
              </span>
            </div>
          </li>
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-5 text-accent-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base leading-normal">
                Enabling interoperability
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div>
        <div>
          <h3
            class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
          >
            Easy Integration
          </h3>
          <p class="text-base leading-normal mt-4 text-base-500 font-medium">
            Integrating with existing systems is smooth and hassle-free, thanks
            to our incredible flexible approach.
          </p>
        </div>
        <ul
          role="list"
          class="space-y-1 mt-6 text-base font-medium text-base-900"
        >
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-5 text-accent-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base leading-normal">
                Streamlining operations
              </span>
            </div>
          </li>
          <li>
            <div class="flex items-center gap-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check size-5 text-accent-600"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
                  stroke-width="0"
                  fill="currentColor"
                ></path>
              </svg>
              <span class="text-base leading-normal">
                Simplifying implementation
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="w-full mt-12 -mb-12">
      <img
        src="/images/dashboardLight.svg"
        alt="#_"
        class="w-full shadow rounded-t-2xl"
      />
    </div>
  </div>
</section>