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 font-bold uppercase text-accent-600">Tagline</p>
        <h2
          class="text-xl md:text-2xl lg:text-3xl mt-4 font-semibold text-base-900"
        >
          Transforming the banking experience for a digital future
        </h2>
        <p class="text-base 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 items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-accent-600/20 inset-shadow-white/20 text-shadow-accent-500 ring-accent-600 bg-linear-to-b from-accent-500 to-accent-600 to-70% focus:outline-accent-600 h-9 px-4 py-2 text-sm rounded-md"
          >
            Get started
          </button>
          <button
            class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-base-950 shadow-base-400/20 inset-shadow-base-500/20 text-shadow-base-100 ring-base-50 bg-linear-to-b from-base-50 to-base-100 to-70% focus:outline-base-200 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>