team1

<section>
  <div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
    <div class="max-w-xl mx-auto text-center lg:text-balance">
      <p class="text-sm leading-normal font-bold uppercase text-accent-600">
        Tagline
      </p>
      <h2
        class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
      >
        Introducing our team
      </h2>
      <p class="text-base leading-normal mt-4 text-base-500 font-medium">
        Uniting talent with vision. Get to know the dedicated professionals who
        blend their skills and passion to lead us to new heights.
      </p>
    </div>
    <ul
      role="list"
      class="mt-12 grid sm:grid-cols-2 md:grid-cols-3 text-center lg:divide-x lg:grid-cols-4 lg:border-x lg:mt-24"
    >
      <li class="p-8">
        <div class="flex flex-col gap-4">
          <img
            class="object-cover rounded-full size-16 lg:size-20 mx-auto"
            src="/avatars/1.jpg"
            alt="#_"
          />
          <div>
            <h3
              class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
            >
              Fernando Monte
            </h3>
            <p class="text-base leading-normal text-base-500 font-medium">
              Creator of Oxbow UI.com
            </p>
          </div>
        </div>
      </li>
      <li class="p-8">
        <div class="flex flex-col gap-4">
          <img
            class="object-cover rounded-full size-16 lg:size-20 mx-auto"
            src="/avatars/2.jpg"
            alt="#_"
          />
          <div>
            <h3
              class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
            >
              Juan Echanove
            </h3>
            <p class="text-base leading-normal text-base-500 font-medium">
              Founder of Pay Oneeer
            </p>
          </div>
        </div>
      </li>
      <li class="p-8">
        <div class="flex flex-col gap-4">
          <img
            class="object-cover rounded-full size-16 lg:size-20 mx-auto"
            src="/avatars/3.jpg"
            alt="#_"
          />
          <div>
            <h3
              class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
            >
              Hanako Yamada
            </h3>
            <p class="text-base leading-normal text-base-500 font-medium">
              Founder of Fesla
            </p>
          </div>
        </div>
      </li>
      <li class="p-8">
        <div class="flex flex-col gap-4">
          <img
            class="object-cover rounded-full size-16 lg:size-20 mx-auto"
            src="/avatars/4.jpg"
            alt="#_"
          />
          <div>
            <h3
              class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
            >
              Heidi Herrera
            </h3>
            <p class="text-base leading-normal text-base-500 font-medium">
              COO at Pff Inc
            </p>
          </div>
        </div>
      </li>
    </ul>
    <div class="flex text-center items-center gap-2 mt-8 justify-center">
      <p class="text-base leading-normal text-base-500 font-medium">
        We are hiring
      </p>
      <a
        class="text-md leading-normal text-accent-500 font-medium flex items-center gap-2 hover:text-base-900"
        href="#_"
      >
        See all our open roles
        <svg
          xmlns="http://www.w3.org/2000/svg"
          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 size-4"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M9 6l6 6l-6 6"></path>
        </svg>
      </a>
    </div>
  </div>
</section>