{{!< default}}

<div class="absolute inset-0 pt-32 opacity-10 h-5/6">
  {{> extras/super }}
</div>

<article class="relative">

  {{> aboutHeader }}

  <div class="w-default mt-20 text-gray-700 dark:text-gray-300 text-center">
    <h2 class="text-4xl mb-5 font-bold">Team</h2>
    <p class="max-w-prose mx-auto">Meet the full time
      Specklers!</p>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-20 md:gap-10 my-20 text-left">

      {{#get 'authors' limit='all' include='count.posts' order='date desc' filter="slug:-speckle"}}
        {{#foreach authors}}

          <div class="flex items-center space-x-4 lg:space-x-6">
            <img class="w-20 h-20 rounded-full lg:w-20 lg:h-20 shadow-2xl"
              src="{{profile_image}}" alt="">
            <div class="font-medium text-2xl leading-6 space-y-1 dark:text-gray-300">
              <h3>{{name}}</h3>
              <h3 class="text-blue-600 text-lg">{{location}}</h3>
              <p class="font-normal text-gray-500 text-sm max-w-sm">
                {{bio}}
              </p>
            </div>
          </div>

        {{/foreach}}
      {{/get}}

    </div>
  </div>

  <div class="w-default grid grid-cols-1 sm:grid-cols-2 gap-5 mb-10">

    <div class="relative h-96 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
      <a href="/careers" class="flex w-full h-full">
        <div class="block self-center w-full">
          <div class="text-3xl font-semibold text-blue-600">
            Careers →
          </div>
          <p class="dark:text-gray-300">Want to join the
            team? Check out our open positions.</p>
        </div>
      </a>
    </div>

    <div class="relative h-96 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
      <a href="/contact" class="flex w-full h-full">
        <div class="block self-center w-full">
          <div class="text-3xl font-semibold text-blue-600">
            Contact →
          </div>
          <p class="dark:text-gray-300">Have a question? Bug reports or praise? Get in touch!</p>
        </div>
      </a>
    </div>

    {{!-- TODO --}}

    {{!--     <div class="relative h-screen/4 rounded-2xl overflow-hidden transition hover:shadow-2xl p-5 flex justify-center text-center">
      <a href="/careers" class="flex w-full h-full">
        <div class="block self-center w-full">
          <div class="text-3xl font-semibold text-blue-600">
            Press →
          </div>
          <p class="dark:text-gray-300">Want to showcase Speckle? Start here.</p>
        </div>
      </a>
    </div> --}}

  </div>

</article>


{{!-- {{> extras/patterns}} --}}