marketing heros

              <div class="max-w-7xl mx-auto">
  <div class="items-center grid grid-cols-1 lg:grid-cols-3 gap-12">
    <div>
      <p class="text-sm relative text-zinc-500 text-blue-500">OxbowUI</p>
      <h1
        class="text-3xl sm:text-3xl md:text-4xl lg:text-5xl mt-12 font-semibold tracking-tight text-zinc-900 lg:text-balance"
      >
        Banking, but not boring
      </h1>
      <p class="text-sm mt-4 lg:text-balance text-zinc-500">
        Ditch the clunky legacy systems — collaborate on staging like it's 2025,
        not 2005.
      </p>
      <div class="flex flex-wrap items-center mx-auto mt-8 gap-2">
        <button
          class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
        >
          Get started
        </button>
        <button
          class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-zinc-700 bg-white outline outline-zinc-200 hover:shadow-sm focus:outline-zinc-900 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
        >
          Learn more
        </button>
      </div>
    </div>
    <div class="lg:col-span-2">
      <img
        src="/_astro/dashboardLight.DuO0a6ir.svg"
        loading="eager"
        decoding="async"
        alt="dashboard"
        width="1200"
        height="1200"
        class="object-cover size-full rounded-lg shadow outline outline-zinc-200"
      />
    </div>
  </div>
</div>