hero #01

<section class="relative overflow-hidden">
  <div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
      <div>
        <p class="text-sm leading-normal font-bold uppercase text-accent-600">
          Tagline
        </p>
        <h2
          class="text-3xl leading-tight tracking-tight lg:text-4xl mt-4 font-semibold text-base-900"
        >
          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 class="flex flex-wrap items-center gap-2 mx-auto mt-8">
          <button
            class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-accent-600 hover:bg-accent-700 focus:outline-accent-600 h-9 px-4 py-2 text-sm rounded-md"
          >
            Get started
          </button>
          <button
            class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-base-500 bg-white hover:text-accent-500 outline-2 outline-base-200 focus:outline-accent-500 h-9 px-4 py-2 text-sm rounded-md"
          >
            Learn more
          </button>
        </div>
      </div>
      <div class="lg:col-span-2">
        <img
          class="object-cover h-full border shadow rounded-2xl border-base-200"
          src="/images/dashboardLight.svg"
          alt="#_"
        />
      </div>
    </div>
    <div
      class="mx-auto grid mt-10 grid-cols-4 items-center gap-x-8 gap-y-10 sm:grid-cols-6 sm:gap-x-10 lg:-mx-6 lg:grid-cols-5"
    >
      <img
        class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
        src="/brands/1.svg"
        alt="#_"
        width="158"
        height="48"
      /><img
        class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
        src="/brands/2.svg"
        alt="#_"
        width="158"
        height="48"
      /><img
        class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
        src="/brands/3.svg"
        alt="#_"
        width="158"
        height="48"
      /><img
        class="col-span-2 sm:col-start-2 lg:col-span-1 max-h-12 w-full object-contain"
        src="/brands/4.svg"
        alt="#_"
        width="158"
        height="48"
      /><img
        class="col-span-2 col-start-2 sm:col-start-auto lg:col-span-1 max-h-12 w-full object-contain"
        src="/brands/5.svg"
        alt="#_"
        width="158"
        height="48"
      />
    </div>
  </div>
</section>