marketing heros #01

<section class="relative overflow-hidden">
  <div class="mx-auto px-8 md:px-12 lg:px-20 w-full max-w-7xl py-24">
    <div class="items-center grid grid-cols-1 lg:grid-cols-3 gap-12">
      <div>
        <p class="text-sm relative text-base-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-base-900 lg:text-balance"
        >
          Banking, but not boring
        </h1>
        <p class="text-sm mt-4 lg:text-balance text-base-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:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-accent-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:outline-offset-2 focus:z-10 select-none text-base-700 bg-white outline outline-base-200 hover:shadow-sm focus:outline-base-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="/.netlify/images?url=_astro%2FdashboardLight.DuO0a6ir.svg&#38;w=1200&#38;h=1200"
          loading="eager"
          decoding="async"
          alt="dashboard"
          width="1200"
          height="1200"
          class="object-cover h-full rounded-lg shadow outline outline-base-200"
        />
      </div>
    </div>
  </div>
</section>