hero

<section>
  <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>
        <span
          class="text-blue-600 uppercase font-mono font-medium tracking-tight text-xs"
        >
          Tagline
        </span>
        <h1
          class="text-5xl mt-8 tracking-tight font-semibold text-gray-900 lg:text-balance"
        >
          Make every visitor count
        </h1>
        <p class="mt-6 text-base font-medium text-gray-500">
          The fastest method for working together on staging and temporary
          environments.
        </p>
        <div class="flex flex-wrap items-center gap-2 mx-auto mt-12">
          <button
            class="flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-all duration-200 rounded-lg bg-gradient-to-b from-blue-500 to-indigo-600 hover:to-indigo-800 shadow focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none"
            aria-label="Action"
          >
            Get started
          </button>
          <button
            class="flex items-center justify-center gap-2 h-10 px-4 py-2 text-sm font-medium text-gray-500 transition-all bg-gray-50 border border-gray-300 rounded-lg hover:text-gray-700 focus:ring-2 shadow shadow-gray-500/5 focus:ring-gray-900 focus:ring-offset-2 ring-offset-gray-200 duration-300 hover:border-gray-200 hover:shadow-none"
            aria-label="Action"
          >
            Learn more
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              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-chevron-right"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M9 6l6 6l-6 6"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="lg:col-span-2">
        <img
          class="object-cover h-full border shadow rounded-2xl"
          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"
      /><img
        class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
        src="/brands/6.svg"
        alt="#_"
        width="158"
        height="48"
      /><img
        class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
        src="/brands/7.svg"
        alt="#_"
        width="158"
        height="48"
      /><img
        class="col-span-2 lg:col-span-1 max-h-12 w-full object-contain"
        src="/brands/9.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/8.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/10.svg"
        alt="#_"
        width="158"
        height="48"
      />
    </div>
  </div>
</section>