Tailwind CSS Team Components

<section class="relative py-20 md:py-32 overflow-hidden bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="max-w-2xl mx-auto mb-18 text-center">
        <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-8">
          <span>Amazing</span>
          <span class="font-serif italic">Team</span>
        </h1>
        <p class="text-lg text-gray-500">We provide experienced advisors to help your company become more successful in the future.</p>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-8">
          <div class="max-w-xs md:max-w-none mx-auto h-full pt-3 px-3 pb-5 bg-white">
            <img class="block w-full mb-4 h-64 object-cover" src="saturn-assets/images/team/photo-team-2.png" alt="">
            <div class="text-center">
              <h5 class="text-xl font-bold">Cameron Williamson</h5>
              <span class="text-sm font-bold text-gray-400">Founder</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-8">
          <div class="max-w-xs md:max-w-none mx-auto h-full pt-3 px-3 pb-5 bg-white">
            <img class="block w-full mb-4 h-64 object-cover" src="saturn-assets/images/team/photo-team-3.png" alt="">
            <div class="text-center">
              <h5 class="text-xl font-bold">Annette Black</h5>
              <span class="text-sm font-bold text-gray-400">Co-Founder</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-8">
          <div class="max-w-xs md:max-w-none mx-auto h-full pt-3 px-3 pb-5 bg-white">
            <img class="block w-full mb-4 h-64 object-cover" src="saturn-assets/images/team/photo-team-4.png" alt="">
            <div class="text-center">
              <h5 class="text-xl font-bold">Robert Fox</h5>
              <span class="text-sm font-bold text-gray-400">Art Director</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-8">
          <div class="max-w-xs md:max-w-none mx-auto h-full pt-3 px-3 pb-5 bg-white">
            <img class="block w-full mb-4 h-64 object-cover" src="saturn-assets/images/team/photo-team-5.png" alt="">
            <div class="text-center">
              <h5 class="text-xl font-bold">Eleanor Pena</h5>
              <span class="text-sm font-bold text-gray-400">Project Manager</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-8">
          <div class="max-w-xs md:max-w-none mx-auto h-full pt-3 px-3 pb-5 bg-white">
            <img class="block w-full mb-4 h-64 object-cover" src="saturn-assets/images/team/photo-team-6.png" alt="">
            <div class="text-center">
              <h5 class="text-xl font-bold">Darlene Robertson</h5>
              <span class="text-sm font-bold text-gray-400">UI Designer</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-8">
          <div class="max-w-xs md:max-w-none mx-auto h-full pt-3 px-3 pb-5 bg-white">
            <img class="block w-full mb-4 h-64 object-cover" src="saturn-assets/images/team/photo-team-7.png" alt="">
            <div class="text-center">
              <h5 class="text-xl font-bold">Courtney Henry</h5>
              <span class="text-sm font-bold text-gray-400">Co-Founder</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-8">
          <div class="max-w-xs md:max-w-none mx-auto h-full pt-3 px-3 pb-5 bg-white">
            <img class="block w-full mb-4 h-64 object-cover" src="saturn-assets/images/team/photo-team-8.png" alt="">
            <div class="text-center">
              <h5 class="text-xl font-bold">Floyd Miles</h5>
              <span class="text-sm font-bold text-gray-400">Graphic Designer</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-8">
          <div class="max-w-xs md:max-w-none mx-auto h-full pt-3 px-3 pb-5 bg-white">
            <img class="block w-full mb-4 h-64 object-cover" src="saturn-assets/images/team/photo-team-1.png" alt="">
            <div class="text-center">
              <h5 class="text-xl font-bold">Kristin Watson</h5>
              <span class="text-sm font-bold text-gray-400">Illustrator</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
      <span class="text-sm text-neutral-300 font-medium">Lorem ipsum</span>
      <h2 class="mb-4 mt-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-lg leading-relaxed text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 p-6 rounded-xl">
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
                <div class="relative">
                  <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
                  <div class="p-1 border border-white border-opacity-20 rounded-xl">
                    <img class="relative w-full h-64 lg:h-52 object-cover rounded-lg border border-neutral-800" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
                  </div>
                </div>
              </div>
              <div class="w-full md:w-3/5 px-4">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-1">Danny Bailey</h3>
                <p class="mb-2 text-neutral-400">CEO &amp; Founder</p>
                <p class="text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 p-6 rounded-xl">
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
                <div class="relative">
                  <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
                  <div class="p-1 border border-white border-opacity-20 rounded-xl">
                    <img class="relative w-full h-64 lg:h-52 object-cover rounded-lg border border-neutral-800" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxNHx8bWFuJTIwcG9ydHJhaXR8ZW58MHwyfHx8MTc0ODg5MTU1OHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=400" alt="">
                  </div>
                </div>
              </div>
              <div class="w-full md:w-3/5 px-4">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-1">Danny Bailey</h3>
                <p class="mb-2 text-neutral-400">CEO &amp; Founder</p>
                <p class="text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 p-6 rounded-xl">
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
                <div class="relative">
                  <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
                  <div class="p-1 border border-white border-opacity-20 rounded-xl">
                    <img class="relative w-full h-64 lg:h-52 object-cover rounded-lg border border-neutral-800" src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzR8MHwxfHNlYXJjaHwxNnx8d29tYW4lMjBwb3J0cmFpdHxlbnwwfDJ8fHwxNzQ4ODkxNTc4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=400" alt="">
                  </div>
                </div>
              </div>
              <div class="w-full md:w-3/5 px-4">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-1">Danny Bailey</h3>
                <p class="mb-2 text-neutral-400">CEO &amp; Founder</p>
                <p class="text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
          <div class="bg-gradient-to-t from-neutral-900 to-purple-950 border border-white border-opacity-20 p-6 rounded-xl">
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
                <div class="relative">
                  <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
                  <div class="p-1 border border-white border-opacity-20 rounded-xl">
                    <img class="relative w-full h-64 lg:h-52 object-cover rounded-lg border border-neutral-800" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHxtYW4lMjBwb3J0cmFpdHxlbnwwfDJ8fHwxNzQ4ODkxNTU4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=400" alt="">
                  </div>
                </div>
              </div>
              <div class="w-full md:w-3/5 px-4">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 mb-1">Danny Bailey</h3>
                <p class="mb-2 text-neutral-400">CEO &amp; Founder</p>
                <p class="text-lg text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap max-w-6xl mx-auto -m-3">
      <div class="w-full md:w-1/3 p-3">
        <div class="flex flex-col justify-end px-10 pb-10 pt-64 h-full bg-indigo-600 rounded-3xl">
          <div>
            <h3 class="mb-4 text-4xl text-white font-bold leading-snug">Who We Are</h3>
            <p class="mb-8 text-white text-opacity-70 font-medium leading-relaxed">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat enim.</p>
            <div class="md:max-w-max">
              <button class="py-4 px-7 w-full font-semibold rounded-xl shadow-6xl focus:ring focus:ring-gray-300 bg-white hover:bg-gray-100 transition ease-in-out duration-200" type="button">Learn about us</button>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="relative max-w-max mx-auto h-full overflow-hidden rounded-3xl">
          <img class="h-full w-full object-cover transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/team/bg.png" alt="">
          <div class="bg-gradient-white absolute bottom-0 left-0 w-full p-8 pt-20" style="backdrop-filter: blur(3px);">
            <h3 class="mb-1 text-2xl font-semibold leading-snug">Leslie Alexander</h3>
            <p class="text-gray-600 font-medium">Co-Founder, CEO</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="relative max-w-max mx-auto h-full overflow-hidden rounded-3xl">
          <img class="h-full w-full object-cover transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/team/bg2.png" alt="">
          <div class="bg-gradient-white absolute bottom-0 left-0 w-full p-8 pt-20" style="backdrop-filter: blur(3px);">
            <h3 class="mb-1 text-2xl font-semibold leading-snug">Jenny Wilson</h3>
            <p class="text-gray-600 font-medium">Co-Founder, CEO</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-24 pb-36 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-5 max-w-2xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Our happy team</h2>
    <p class="mb-24 text-base max-w-md mx-auto text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    <div class="flex flex-wrap -m-7 mb-12">
      <div class="w-full md:w-1/2 p-7">
        <div class="flex flex-wrap -m-3.5">
          <div class="w-auto p-3.5"><img src="gradia-assets/images/teams/avatar1.png" alt=""></div>
          <div class="flex-1 p-3.5">
            <p class="mb-6 text-lg text-gray-700" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
            <h3 class="font-heading font-bold text-lg text-gray-900" >Darrell Steward, CEO</h3>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-7">
        <div class="flex flex-wrap -m-3.5">
          <div class="w-auto p-3.5"><img src="gradia-assets/images/teams/avatar2.png" alt=""></div>
          <div class="flex-1 p-3.5">
            <p class="mb-6 text-lg text-gray-700" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
            <h3 class="font-heading font-bold text-lg text-gray-900" >Cody Fisher, CTO</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-7">
      <div class="w-full md:w-1/2 p-7">
        <div class="flex flex-wrap -m-3.5">
          <div class="flex-1 p-3.5 order-1">
            <p class="mb-6 text-lg text-gray-700" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
            <h3 class="font-heading font-bold text-lg text-gray-900" >Guy Hawkins, CMO</h3>
          </div>
          <div class="w-auto p-3.5 md:order-1"><img src="gradia-assets/images/teams/avatar3.png" alt=""></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-7">
        <div class="flex flex-wrap -m-3.5">
          <div class="flex-1 p-3.5 order-1">
            <p class="mb-6 text-lg text-gray-700" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
            <h3 class="font-heading font-bold text-lg text-gray-900" >Annette White, COO</h3>
          </div>
          <div class="w-auto p-3.5 md:order-1"><img src="gradia-assets/images/teams/avatar4.png" alt=""></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.png" alt="">
      </div>
      <div class="relative">
        <div class="mb-16 max-w-xl mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Our team</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-100 font-black tracking-tight">The brain behind Zanrly</h2>
        </div>
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/3 p-4">
            <div class="flex flex-col justify-between px-8 pt-10 pb-12 h-full text-center bg-gray-900 rounded-3xl">
              <div class="flex-initial mb-8">
                <img class="mb-8 mx-auto rounded-3xl" src="zanrly-assets/images/teams/avatar.png" alt="">
                <h3 class="font-heading mb-2 text-2xl text-gray-100 font-black tracking-tight">John Doe</h3>
                <p class="text-sm text-gray-700 font-bold">Design, Founder</p>
              </div>
              <div class="flex-initial">
                <div class="flex flex-wrap justify-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/insta-dark.svg" alt="">
                    </a>
                  </div>
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/twitter-dark.svg" alt="">
                    </a>
                  </div>
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/fb-dark.svg" alt="">
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="flex flex-col justify-between px-8 pt-10 pb-12 h-full text-center bg-gray-900 rounded-3xl">
              <div class="flex-initial mb-8">
                <img class="mb-8 mx-auto rounded-3xl" src="zanrly-assets/images/teams/avatar.png" alt="">
                <h3 class="font-heading mb-2 text-2xl text-gray-100 font-black tracking-tight">John Doe</h3>
                <p class="text-sm text-gray-700 font-bold">Design, Founder</p>
              </div>
              <div class="flex-initial">
                <div class="flex flex-wrap justify-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/insta-dark.svg" alt="">
                    </a>
                  </div>
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/twitter-dark.svg" alt="">
                    </a>
                  </div>
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/fb-dark.svg" alt="">
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="flex flex-col justify-between px-8 pt-10 pb-12 h-full text-center bg-gray-900 rounded-3xl">
              <div class="flex-initial mb-8">
                <img class="mb-8 mx-auto rounded-3xl" src="zanrly-assets/images/teams/avatar.png" alt="">
                <h3 class="font-heading mb-2 text-2xl text-gray-100 font-black tracking-tight">John Doe</h3>
                <p class="text-sm text-gray-700 font-bold">Design, Founder</p>
              </div>
              <div class="flex-initial">
                <div class="flex flex-wrap justify-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/insta-dark.svg" alt="">
                    </a>
                  </div>
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/twitter-dark.svg" alt="">
                    </a>
                  </div>
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                      <img src="zanrly-assets/images/fb-dark.svg" alt="">
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Our Team</h2>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar1.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Guy Hawkins</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar2.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Brooklyn Simmons</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar3.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Floyd Miles</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar4.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Jenny Wilson</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar5.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Esther Howard</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="text-center">
          <img class="mb-9 mx-auto" src="nightsable-assets/images/team/avatar6.png" alt="">
          <span class="inline-block mb-2 text-gray-300">CEO at Nightsable Studio</span>
          <h3 class="text-3xl text-white">Leslie Alexander</h3>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-20">
  <img class="hidden lg:block absolute top-0 left-0 mt-20" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute top-0 right-0 mt-52" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container px-5 mx-auto">
    <div class="max-w-3xl mx-auto mb-12 lg:mb-20 text-center">
      <span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
      <h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full lg:w-1/2 p-3">
        <div class="p-6 border rounded-xl">
          <div class="flex flex-wrap items-center -mx-5">
            <div class="w-full md:w-1/3 px-5 mb-4 lg:mb-0">
              <img class="w-full md:w-40 h-52 object-cover rounded-xl" src="https://images.unsplash.com/photo-1544717305-f9c88f2897bc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            </div>
            <div class="w-full md:w-2/3 px-5">
              <h3 class="text-2xl font-semibold font-heading mb-1">Esther Howard</h3>
              <p class="mb-6 text-gray-500">CEO &amp; Founder</p>
              <p class="text-gray-500">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-3">
        <div class="p-6 border rounded-xl">
          <div class="flex flex-wrap items-center -mx-5">
            <div class="w-full md:w-1/3 px-5 mb-4 lg:mb-0">
              <img class="w-full md:w-40 h-52 object-cover rounded-xl" src="https://images.unsplash.com/photo-1525129498994-580709352e20?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            </div>
            <div class="w-full md:w-2/3 px-5">
              <h3 class="text-2xl font-semibold font-heading mb-1">Cameron Williamson</h3>
              <p class="mb-6 text-gray-500">CEO &amp; Founder</p>
              <p class="text-gray-500">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-3">
        <div class="p-6 border rounded-xl">
          <div class="flex flex-wrap items-center -mx-5">
            <div class="w-full md:w-1/3 px-5 mb-4 lg:mb-0">
              <img class="w-full md:w-40 h-52 object-cover rounded-xl" src="https://images.unsplash.com/photo-1544717305-996b815c338c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
            </div>
            <div class="w-full md:w-2/3 px-5">
              <h3 class="text-2xl font-semibold font-heading mb-1">Ralph Edwards</h3>
              <p class="mb-6 text-gray-500">CEO &amp; Founder</p>
              <p class="text-gray-500">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-3">
        <div class="p-6 border rounded-xl">
          <div class="flex flex-wrap items-center -mx-5">
            <div class="w-full md:w-1/3 px-5 mb-4 lg:mb-0">
              <img class="w-full md:w-40 h-52 object-cover rounded-xl" src="https://images.unsplash.com/photo-1544717301-9cdcb1f5940f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            </div>
            <div class="w-full md:w-2/3 px-5">
              <h3 class="text-2xl font-semibold font-heading mb-1">Ralph Howard</h3>
              <p class="mb-6 text-gray-500">CEO &amp; Founder</p>
              <p class="text-gray-500">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <img class="hidden lg:block absolute inset-x-0 bottom-0 mb-96" src="zospace-assets/lines/line-two-montain.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl mx-auto">
      <h2 class="mb-24 text-center text-5xl font-bold font-heading text-white">Our Team</h2>
      <div class="flex flex-wrap justify-center -mx-10 mb-20">
        <div class="w-full lg:w-1/3 px-10 mb-20 lg:mb-0">
          <div>
            <img class="mb-8 w-full h-112 lg:h-80 object-cover object-top" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
            <a class="inline-block w-full p-10 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
              <h3 class="mb-2 text-3xl text-white font-bold font-heading">Léa Herrera</h3>
              <p class="mb-4 text-lg text-white font-bold">UX Designer</p>
              <div class="flex justify-end">
                <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-10 mb-20 lg:mb-0">
          <div class="lg:mt-24">
            <img class="mb-8 w-full h-112 lg:h-80 object-cover object-top" src="https://images.pexels.com/photos/5325885/pexels-photo-5325885.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
            <a class="inline-block w-full p-10 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
              <h3 class="mb-2 text-3xl text-white font-bold font-heading">Maxi Svennson</h3>
              <p class="mb-4 text-lg text-white font-bold">Social Media Manager</p>
              <div class="flex justify-end">
                <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-10">
          <div>
            <img class="mb-8 w-full h-112 lg:h-80 object-cover object-top" src="https://images.unsplash.com/photo-1615803795804-06a0c2a0030e?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
            <a class="inline-block w-full p-10 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
              <h3 class="mb-2 text-3xl text-white font-bold font-heading">Oliver Haller</h3>
              <p class="mb-4 text-lg text-white font-bold">Co-Founder</p>
              <div class="flex justify-end">
                <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="text-center"><a class="inline-block py-4 px-12 border border-gray-200 hover:border-gray-50 rounded-full font-bold text-white" href="#">More</a></div>
    </div>
  </div>
</section>

<section class="pt-24 pb-24 md:pb-40 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-24 sm:mb-44">
      <span class="font-heading text-xl">02</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Creative team</span>
    </div>
    <div class="relative z-10 max-w-3xl mb-40">
      <h1 class="font-heading text-4xl sm:text-5xl md:text-6xl 3xl:text-7xl mb-10">“Alone we can do so little, together we can do so much.”</h1>
      <span class="text-xl font-medium">Helen Keller</span>
    </div>
    <div class="flex flex-wrap -mx-4 relative">
      <img class="absolute bottom-0 left-0 mb-56 w-full" src="wrexa-assets/elements/half-circles-triple.svg" alt="">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="max-w-sm mx-auto relative">
          <div class="absolute top-0 left-0 -mt-2 w-full">
            <div class="mx-5 rounded-t-xl h-4 bg-gray-200"></div>
          </div>
          <div class="py-14 px-6 3xl:px-12 bg-white rounded-xl relative">
            <div class="flex flex-wrap items-start">
              <div class="flex-shrink-0 flex items-center justify-center w-24 h-24 mb-6 md:mb-0 rounded-full border border-gray-200">
                <img class="w-18 h-18 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
              </div>
              <div class="w-full md:w-1/2 pl-7">
                <span class="text-sm text-gray-300">Co-Founder</span>
                <h4 class="text-2xl font-medium mt-1 mb-7">Hannah Redmond</h4>
                <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                  <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                  </svg>
                  <span class="ml-3">Learn More</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-1/3 px-4 mb-16 xl:mb-0 xl:mt-20">
        <div class="max-w-sm mx-auto relative">
          <div class="absolute top-0 left-0 -mt-2 w-full">
            <div class="mx-5 rounded-t-xl h-4 bg-gray-200"></div>
          </div>
          <div class="py-14 px-6 3xl:px-12 bg-white rounded-xl relative">
            <div class="flex flex-wrap items-start">
              <div class="flex-shrink-0 flex items-center justify-center w-24 h-24 mb-6 md:mb-0 rounded-full border border-gray-200">
                <img class="w-18 h-18 rounded-full object-cover" src="wrexa-assets/images/avatar-male1.png" alt="">
              </div>
              <div class="w-full md:w-1/2 pl-7">
                <span class="text-sm text-gray-300">Co-Founder</span>
                <h4 class="text-2xl font-medium mt-1 mb-7">William Havi</h4>
                <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                  <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                  </svg>
                  <span class="ml-3">Learn More</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-1/3 px-4">
        <div class="max-w-sm mx-auto relative">
          <div class="absolute top-0 left-0 -mt-2 w-full">
            <div class="mx-5 rounded-t-xl h-4 bg-gray-200"></div>
          </div>
          <div class="py-14 px-6 3xl:px-12 bg-white rounded-xl relative">
            <div class="flex flex-wrap items-start">
              <div class="flex-shrink-0 flex items-center justify-center w-24 h-24 mb-6 md:mb-0 rounded-full border border-gray-200">
                <img class="w-18 h-18 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
              </div>
              <div class="w-full md:w-1/2 pl-7">
                <span class="text-sm text-gray-300">Design Director</span>
                <h4 class="text-2xl font-medium mt-1 mb-7">Ethan Orio O. Son</h4>
                <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                  <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                  </svg>
                  <span class="ml-3">Learn More</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="relative py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="relative container px-4 mx-auto">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Team</span>
      <h3 class="mb-4 text-3xl md:text-5xl text-coolGray-900 leading-tight font-bold tracking-tighter">Our team is the best in the business.</h3>
      <p class="mb-14 sm:mb-24 text-lg md:text-xl text-coolGray-500 font-medium">Highly professional and capable of running your business across all digital channels.</p>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar1.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Macauley Herring</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">CEO &amp; Founder</span>
            <p class="mb-4 text-coolGray-500 font-medium">Dance is the hidden language of the soul.</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.6007 0.181818H14.3992C17.3874 0.181818 19.8184 2.61281 19.8182 5.60074V14.3993C19.8182 17.3872 17.3874 19.8182 14.3992 19.8182H5.6007C2.61276 19.8182 0.181885 17.3873 0.181885 14.3993V5.60074C0.181885 2.61281 2.61276 0.181818 5.6007 0.181818ZM14.3993 18.0759C16.4267 18.0759 18.0761 16.4266 18.0761 14.3993H18.076V5.60074C18.076 3.57348 16.4266 1.92405 14.3992 1.92405H5.6007C3.57343 1.92405 1.92412 3.57348 1.92412 5.60074V14.3993C1.92412 16.4266 3.57343 18.0761 5.6007 18.0759H14.3993ZM4.85721 10.0001C4.85721 7.16424 7.16425 4.85714 10.0001 4.85714C12.8359 4.85714 15.1429 7.16424 15.1429 10.0001C15.1429 12.8359 12.8359 15.1429 10.0001 15.1429C7.16425 15.1429 4.85721 12.8359 4.85721 10.0001ZM6.62805 10C6.62805 11.8593 8.14081 13.3719 10.0001 13.3719C11.8593 13.3719 13.3721 11.8593 13.3721 10C13.3721 8.14058 11.8594 6.6279 10.0001 6.6279C8.14069 6.6279 6.62805 8.14058 6.62805 10Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar2.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Ivan Mathews</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">CTO</span>
            <p class="mb-4 text-coolGray-500 font-medium">Everything you&rsquo;ve ever wanted is on the other side of fear.</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.6007 0.181818H14.3992C17.3874 0.181818 19.8184 2.61281 19.8182 5.60074V14.3993C19.8182 17.3872 17.3874 19.8182 14.3992 19.8182H5.6007C2.61276 19.8182 0.181885 17.3873 0.181885 14.3993V5.60074C0.181885 2.61281 2.61276 0.181818 5.6007 0.181818ZM14.3993 18.0759C16.4267 18.0759 18.0761 16.4266 18.0761 14.3993H18.076V5.60074C18.076 3.57348 16.4266 1.92405 14.3992 1.92405H5.6007C3.57343 1.92405 1.92412 3.57348 1.92412 5.60074V14.3993C1.92412 16.4266 3.57343 18.0761 5.6007 18.0759H14.3993ZM4.85721 10.0001C4.85721 7.16424 7.16425 4.85714 10.0001 4.85714C12.8359 4.85714 15.1429 7.16424 15.1429 10.0001C15.1429 12.8359 12.8359 15.1429 10.0001 15.1429C7.16425 15.1429 4.85721 12.8359 4.85721 10.0001ZM6.62805 10C6.62805 11.8593 8.14081 13.3719 10.0001 13.3719C11.8593 13.3719 13.3721 11.8593 13.3721 10C13.3721 8.14058 11.8594 6.6279 10.0001 6.6279C8.14069 6.6279 6.62805 8.14058 6.62805 10Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar3.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Elen Benitez</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">CPO</span>
            <p class="mb-4 text-coolGray-500 font-medium">The only way to do great work is to love what you do.</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.6007 0.181818H14.3992C17.3874 0.181818 19.8184 2.61281 19.8182 5.60074V14.3993C19.8182 17.3872 17.3874 19.8182 14.3992 19.8182H5.6007C2.61276 19.8182 0.181885 17.3873 0.181885 14.3993V5.60074C0.181885 2.61281 2.61276 0.181818 5.6007 0.181818ZM14.3993 18.0759C16.4267 18.0759 18.0761 16.4266 18.0761 14.3993H18.076V5.60074C18.076 3.57348 16.4266 1.92405 14.3992 1.92405H5.6007C3.57343 1.92405 1.92412 3.57348 1.92412 5.60074V14.3993C1.92412 16.4266 3.57343 18.0761 5.6007 18.0759H14.3993ZM4.85721 10.0001C4.85721 7.16424 7.16425 4.85714 10.0001 4.85714C12.8359 4.85714 15.1429 7.16424 15.1429 10.0001C15.1429 12.8359 12.8359 15.1429 10.0001 15.1429C7.16425 15.1429 4.85721 12.8359 4.85721 10.0001ZM6.62805 10C6.62805 11.8593 8.14081 13.3719 10.0001 13.3719C11.8593 13.3719 13.3721 11.8593 13.3721 10C13.3721 8.14058 11.8594 6.6279 10.0001 6.6279C8.14069 6.6279 6.62805 8.14058 6.62805 10Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar4.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Kacy Wade</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">Customer Success</span>
            <p class="mb-4 text-coolGray-500 font-medium">There are no traffic jams along the extra mile.</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.6007 0.181818H14.3992C17.3874 0.181818 19.8184 2.61281 19.8182 5.60074V14.3993C19.8182 17.3872 17.3874 19.8182 14.3992 19.8182H5.6007C2.61276 19.8182 0.181885 17.3873 0.181885 14.3993V5.60074C0.181885 2.61281 2.61276 0.181818 5.6007 0.181818ZM14.3993 18.0759C16.4267 18.0759 18.0761 16.4266 18.0761 14.3993H18.076V5.60074C18.076 3.57348 16.4266 1.92405 14.3992 1.92405H5.6007C3.57343 1.92405 1.92412 3.57348 1.92412 5.60074V14.3993C1.92412 16.4266 3.57343 18.0761 5.6007 18.0759H14.3993ZM4.85721 10.0001C4.85721 7.16424 7.16425 4.85714 10.0001 4.85714C12.8359 4.85714 15.1429 7.16424 15.1429 10.0001C15.1429 12.8359 12.8359 15.1429 10.0001 15.1429C7.16425 15.1429 4.85721 12.8359 4.85721 10.0001ZM6.62805 10C6.62805 11.8593 8.14081 13.3719 10.0001 13.3719C11.8593 13.3719 13.3721 11.8593 13.3721 10C13.3721 8.14058 11.8594 6.6279 10.0001 6.6279C8.14069 6.6279 6.62805 8.14058 6.62805 10Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10 xl:mb-0">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar5.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Alya Levine</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">Backend Developer</span>
            <p class="mb-4 text-coolGray-500 font-medium">The mind is everything. What you think you become.</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.6007 0.181818H14.3992C17.3874 0.181818 19.8184 2.61281 19.8182 5.60074V14.3993C19.8182 17.3872 17.3874 19.8182 14.3992 19.8182H5.6007C2.61276 19.8182 0.181885 17.3873 0.181885 14.3993V5.60074C0.181885 2.61281 2.61276 0.181818 5.6007 0.181818ZM14.3993 18.0759C16.4267 18.0759 18.0761 16.4266 18.0761 14.3993H18.076V5.60074C18.076 3.57348 16.4266 1.92405 14.3992 1.92405H5.6007C3.57343 1.92405 1.92412 3.57348 1.92412 5.60074V14.3993C1.92412 16.4266 3.57343 18.0761 5.6007 18.0759H14.3993ZM4.85721 10.0001C4.85721 7.16424 7.16425 4.85714 10.0001 4.85714C12.8359 4.85714 15.1429 7.16424 15.1429 10.0001C15.1429 12.8359 12.8359 15.1429 10.0001 15.1429C7.16425 15.1429 4.85721 12.8359 4.85721 10.0001ZM6.62805 10C6.62805 11.8593 8.14081 13.3719 10.0001 13.3719C11.8593 13.3719 13.3721 11.8593 13.3721 10C13.3721 8.14058 11.8594 6.6279 10.0001 6.6279C8.14069 6.6279 6.62805 8.14058 6.62805 10Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10 xl:mb-0">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar6.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Rosemary Hernandez</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">IOS Developer</span>
            <p class="mb-4 text-coolGray-500 font-medium">Whether you think you can or you think you can&rsquo;t, you&rsquo;re right.</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.6007 0.181818H14.3992C17.3874 0.181818 19.8184 2.61281 19.8182 5.60074V14.3993C19.8182 17.3872 17.3874 19.8182 14.3992 19.8182H5.6007C2.61276 19.8182 0.181885 17.3873 0.181885 14.3993V5.60074C0.181885 2.61281 2.61276 0.181818 5.6007 0.181818ZM14.3993 18.0759C16.4267 18.0759 18.0761 16.4266 18.0761 14.3993H18.076V5.60074C18.076 3.57348 16.4266 1.92405 14.3992 1.92405H5.6007C3.57343 1.92405 1.92412 3.57348 1.92412 5.60074V14.3993C1.92412 16.4266 3.57343 18.0761 5.6007 18.0759H14.3993ZM4.85721 10.0001C4.85721 7.16424 7.16425 4.85714 10.0001 4.85714C12.8359 4.85714 15.1429 7.16424 15.1429 10.0001C15.1429 12.8359 12.8359 15.1429 10.0001 15.1429C7.16425 15.1429 4.85721 12.8359 4.85721 10.0001ZM6.62805 10C6.62805 11.8593 8.14081 13.3719 10.0001 13.3719C11.8593 13.3719 13.3721 11.8593 13.3721 10C13.3721 8.14058 11.8594 6.6279 10.0001 6.6279C8.14069 6.6279 6.62805 8.14058 6.62805 10Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4 mb-10 md:mb-0">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar7.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Theo Morales</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">Frontend Developer</span>
            <p class="mb-4 text-coolGray-500 font-medium">I would rather die of passion than of boredom</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.6007 0.181818H14.3992C17.3874 0.181818 19.8184 2.61281 19.8182 5.60074V14.3993C19.8182 17.3872 17.3874 19.8182 14.3992 19.8182H5.6007C2.61276 19.8182 0.181885 17.3873 0.181885 14.3993V5.60074C0.181885 2.61281 2.61276 0.181818 5.6007 0.181818ZM14.3993 18.0759C16.4267 18.0759 18.0761 16.4266 18.0761 14.3993H18.076V5.60074C18.076 3.57348 16.4266 1.92405 14.3992 1.92405H5.6007C3.57343 1.92405 1.92412 3.57348 1.92412 5.60074V14.3993C1.92412 16.4266 3.57343 18.0761 5.6007 18.0759H14.3993ZM4.85721 10.0001C4.85721 7.16424 7.16425 4.85714 10.0001 4.85714C12.8359 4.85714 15.1429 7.16424 15.1429 10.0001C15.1429 12.8359 12.8359 15.1429 10.0001 15.1429C7.16425 15.1429 4.85721 12.8359 4.85721 10.0001ZM6.62805 10C6.62805 11.8593 8.14081 13.3719 10.0001 13.3719C11.8593 13.3719 13.3721 11.8593 13.3721 10C13.3721 8.14058 11.8594 6.6279 10.0001 6.6279C8.14069 6.6279 6.62805 8.14058 6.62805 10Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4">
          <div class="max-w-xs mx-auto md:ml-0">
            <img class="w-24 h-24 mb-6 rounded-full" src="flex-ui-assets/images/teams/avatar8.png" alt="">
            <h3 class="mb-1 text-lg text-coolGray-800 font-semibold">Ishmael Dunlop</h3>
            <span class="inline-block mb-4 text-lg font-medium text-green-500">Product Designer</span>
            <p class="mb-4 text-coolGray-500 font-medium">Life is what we make it, always has been, always will be.</p>
            <div class="flex items-center">
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7273V9.76602H9.3583L9.76688 6.66246H6.63494V4.68128C6.63494 3.78301 6.88821 3.17085 8.20297 3.17085L9.87712 3.17017V0.394238C9.5876 0.357335 8.59378 0.272728 7.43708 0.272728C5.0217 0.272728 3.3681 1.71881 3.3681 4.37391V6.66246H0.636475V9.76602H3.3681V17.7273H6.63494Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="19" height="16" viewbox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14597C18.1356 2.44842 17.4032 2.65355 16.6336 2.74512C17.4194 2.27461 18.0208 1.5283 18.3059 0.641757C17.5689 1.07748 16.7553 1.39388 15.8885 1.56539C15.1943 0.824879 14.2069 0.363636 13.1118 0.363636C11.0108 0.363636 9.30722 2.06718 9.30722 4.16706C9.30722 4.46488 9.34083 4.75576 9.40574 5.03391C6.24434 4.87512 3.44104 3.36048 1.56483 1.05894C1.23686 1.61985 1.05028 2.27342 1.05028 2.97109C1.05028 4.29106 1.72243 5.45573 2.74225 6.13712C2.11877 6.11627 1.53237 5.94476 1.01901 5.65967V5.70718C1.01901 7.54979 2.33086 9.08761 4.07031 9.43761C3.75161 9.52336 3.41555 9.57088 3.06789 9.57088C2.82222 9.57088 2.58464 9.54655 2.35171 9.50018C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1622 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4278 6.10416 15.4278C13.1026 15.4278 16.928 9.63115 16.928 4.60397L16.9153 4.11145C17.6627 3.57833 18.3094 2.90851 18.8181 2.14597Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block mr-5 text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.6007 0.181818H14.3992C17.3874 0.181818 19.8184 2.61281 19.8182 5.60074V14.3993C19.8182 17.3872 17.3874 19.8182 14.3992 19.8182H5.6007C2.61276 19.8182 0.181885 17.3873 0.181885 14.3993V5.60074C0.181885 2.61281 2.61276 0.181818 5.6007 0.181818ZM14.3993 18.0759C16.4267 18.0759 18.0761 16.4266 18.0761 14.3993H18.076V5.60074C18.076 3.57348 16.4266 1.92405 14.3992 1.92405H5.6007C3.57343 1.92405 1.92412 3.57348 1.92412 5.60074V14.3993C1.92412 16.4266 3.57343 18.0761 5.6007 18.0759H14.3993ZM4.85721 10.0001C4.85721 7.16424 7.16425 4.85714 10.0001 4.85714C12.8359 4.85714 15.1429 7.16424 15.1429 10.0001C15.1429 12.8359 12.8359 15.1429 10.0001 15.1429C7.16425 15.1429 4.85721 12.8359 4.85721 10.0001ZM6.62805 10C6.62805 11.8593 8.14081 13.3719 10.0001 13.3719C11.8593 13.3719 13.3721 11.8593 13.3721 10C13.3721 8.14058 11.8594 6.6279 10.0001 6.6279C8.14069 6.6279 6.62805 8.14058 6.62805 10Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wave wave-bottom w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

<section class="bg-white py-24 2xl:py-44">
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
        <div class="text-center">
          <span class="text-sm text-gray-300 uppercase">THE BEST PEOPLE IN THE WORLD</span>
          <h2 class="mt-8 mb-20 xl:mb-24 text-9xl md:text-10xl xl:text-11xl font-heading font-medium">Team</h2>
        </div>
        <div class="flex flex-wrap xl:flex-nowrap justify-center mb-20 lg:px-10 -mx-1">
          <div class="w-auto px-4 mb-4 xl:mb-0 text-center self-center order-first">
            <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block">
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.21015 10.4594C7.59662 10.8128 7.59662 11.3841 7.21015 11.7349C6.82369 12.0871 6.19929 12.0897 5.81282 11.7349L0.289847 6.63794C-0.096617 6.28579 -0.096617 5.71584 0.289847 5.36108L5.81282 0.264109C6.19785 -0.0880364 6.82369 -0.0880363 7.21015 0.264109C7.59662 0.617558 7.59662 1.18882 7.21015 1.53966L2.68073 6.00147L7.21015 10.4594Z" fill="black"></path>
              </svg>
            </button>
          </div>
          <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap justify-center -m-2.5">
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 h-full text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Ainsley Stones</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Founder</span>
                          </div>
                        </div>
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 h-full text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Faustina H. Fawn</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Manager</span>
                          </div>
                        </div>
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 h-full text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Jasmine Joy</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Manager</span>
                          </div>
                        </div>
                    </div>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap justify-center">
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 h-full text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Emily Johnson</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Manager</span>
                          </div>
                        </div>
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 h-full text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Marcus Rodriguez</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Founder</span>
                          </div>
                        </div>
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 h-full text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Chloe Patel</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Founder</span>
                          </div>
                        </div>
                    </div>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap justify-center">
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Brandon Thompson</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Manager</span>
                          </div>
                        </div>
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Olivia Davis</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Manager</span>
                          </div>
                        </div>
                        <div class="w-full lg:w-1/3 p-2.5">
                          <div class="pt-10 pb-12 px-6 text-center bg-gray-50 rounded-7xl">
                            <img class="mx-auto mb-5 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                            <h4 class="mb-12 text-xl font-heading font-medium">Ethan Carter</h4>
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Founder</span>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="w-auto px-4 mb-4 xl:mb-0 text-center self-center order-first xl:order-last">
            <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block">
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.289848 1.54064C-0.0966159 1.18719 -0.0966159 0.615929 0.289848 0.265087C0.676312 -0.0870581 1.30071 -0.0896664 1.68718 0.265087L7.21015 5.36206C7.59662 5.71421 7.59662 6.28416 7.21015 6.63892L1.68718 11.7359C1.30215 12.088 0.676312 12.088 0.289848 11.7359C-0.096616 11.3824 -0.096616 10.8112 0.289848 10.4603L4.81927 5.99853L0.289848 1.54064Z" fill="black"></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="hidden md:block h-1 mx-auto">
          <div class="bg-gray-100 h-1/2 w-64 mx-auto rounded-full">
            <div class="h-full bg-purple-500 rounded-full" :class="{ 'w-1/3': activeSlide == 0, 'w-2/3': activeSlide == 1, 'w-full': activeSlide == 2 }"></div>
          </div>
        </div>
      </div>
      <img class="hidden xl:block absolute top-0 left-1/2 transform translate-x-1/2" src="uinel-assets/images/team/dots.svg" alt="">
      <div class="w-full lg:w-1/2 px-4" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
        <div class="text-center lg:px-10 md:mb-16">
          <span class="text-sm text-gray-300 uppercase">What people say</span>
          <h2 class="mt-8 mb-6 text-9xl md:text-10xl xl:text-11xl font-heading font-medium">Opinion</h2>
          <img class="block mx-auto mb-12" src="uinel-assets/images/team/dots2.svg" alt="">
          <div class="mb-10">
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                    <div x-ref="slide1" class="flex-shrink-0 w-full">
                        <div class="flex items-start">
                            <img src="uinel-assets/images/team/quote.png" alt="">
                            <div class="max-w-sm mx-auto text-center">
                              <p class="text-2xl font-medium">Morbi ut nisl placerat, suscipit urna non, fringilla leo. Aenean mi libero, pretium eu convallis non, feugiat non ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia!</p>
                            </div>
                            <img src="uinel-assets/images/team/quote.png" alt="">
                        </div>
                    </div>
                    <div x-ref="slide2" class="flex-shrink-0 w-full">
                        <div class="flex items-start">
                            <img src="uinel-assets/images/team/quote.png" alt="">
                            <div class="max-w-sm mx-auto text-center">
                              <p class="text-2xl font-medium">Sed vitae risus eget justo tempus tincidunt. Fusce consequat mauris quis nunc tincidunt, nec dapibus quam tincidunt. Integer malesuada eros sed lorem laoreet, at tristique eros vehicula.</p>
                            </div>
                            <img src="uinel-assets/images/team/quote.png" alt="">
                        </div>
                    </div>
                    <div x-ref="slide3" class="flex-shrink-0 w-full">
                        <div class="flex items-start">
                            <img src="uinel-assets/images/team/quote.png" alt="">
                            <div class="max-w-sm mx-auto text-center">
                              <p class="text-2xl font-medium">Proin convallis justo id lorem lacinia, eget rutrum ligula consectetur. Phasellus vitae augue nec nisi fermentum commodo. Duis in mi vitae ipsum consectetur bibendum. Sed laoreet tortor id metus facilisis, ac aliquet mi ultricies.</p>
                            </div>
                            <img src="uinel-assets/images/team/quote.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="flex items-center justify-center -mx-4">
            <div class="w-auto px-4 text-center">
              <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block">
                <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.21015 10.4594C7.59662 10.8128 7.59662 11.3841 7.21015 11.7349C6.82369 12.0871 6.19929 12.0897 5.81282 11.7349L0.289847 6.63794C-0.096617 6.28579 -0.096617 5.71584 0.289847 5.36108L5.81282 0.264109C6.19785 -0.0880364 6.82369 -0.0880363 7.21015 0.264109C7.59662 0.617558 7.59662 1.18882 7.21015 1.53966L2.68073 6.00147L7.21015 10.4594Z" fill="black"></path>
                </svg>
              </button>
            </div>
            <div class="flex items-center mx-10 text-left">
              <img class="mr-8 w-16 h-20 rounded-full object-cover" src="uinel-assets/images/team/placeholder-photo4.png" alt="">
              <div>
                <h4 class="text-xl font-bold mb-2">Realyn Richmond</h4>
                <p class="text-gray-300">ASOS LTD</p>
              </div>
            </div>
            <div class="w-auto px-4 text-center">
              <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block">
                <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0.289848 1.54064C-0.0966159 1.18719 -0.0966159 0.615929 0.289848 0.265087C0.676312 -0.0870581 1.30071 -0.0896664 1.68718 0.265087L7.21015 5.36206C7.59662 5.71421 7.59662 6.28416 7.21015 6.63892L1.68718 11.7359C1.30215 12.088 0.676312 12.088 0.289848 11.7359C-0.096616 11.3824 -0.096616 10.8112 0.289848 10.4603L4.81927 5.99853L0.289848 1.54064Z" fill="black"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block h-1">
          <div class="bg-gray-100 h-1/2 w-64 mx-auto rounded-full">
            <div class="h-full bg-purple-500 w-1/3 rounded-full" :class="{ 'w-1/3': activeSlide == 0, 'w-2/3': activeSlide == 1, 'w-full': activeSlide == 2 }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <span class="text-lg font-extrabold text-orange-500">Section label</span>
    <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Our team is the best in the business.</h1>
    <p class="text-xl font-extrabold leading-8 mb-16">Highly professional and capable of running your business across all digital channels.</p>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Macauley
            <span class="block">Herring</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CEO &amp; Founder</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Dance is the hidden language of the soul.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar2.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Elen
            <span class="block">Benitez</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CPO</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">The only way to do great work is to love what you do.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar5.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Ivan
            <span class="block">Mathews</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CTO</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Everything you’ve ever wanted is on the other side of fear.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar1.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Kacy
            <span class="block">Wade</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">Customer Success</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">The only way to do great work is to love what you do.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar5.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Theo
            <span class="block">Morales</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">Backend Developer</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Dance is the hidden language of the soul.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar1.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Rosemary
            <span class="block">Hernandez</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">IOS Developer</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">The only way to do great work is to love what you do.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Ivan
            <span class="block">Mathews</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CTO</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Everything you’ve ever wanted is on the other side of fear.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar6.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Kacy
            <span class="block">Wade</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">Customer Success</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">The only way to do great work is to love what you do.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ current: 0 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-purple-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center -mx-3">
        <div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
          <ul class="flex flex-wrap flex-row lg:flex-col justify-center lg:justify-start space-x-6 lg:space-x-0">
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-white" :class="{'text-white': current == 0, 'text-purple-500 hover:text-white': current != 0}" x-on:click="current = 0">Danny Bailey</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-purple-500 hover:text-white" :class="{'text-white': current == 1, 'text-purple-500 hover:text-white': current != 1}" x-on:click="current = 1">Ian Brown</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-purple-500 hover:text-white" :class="{'text-white': current == 2, 'text-purple-500 hover:text-white': current != 2}" x-on:click="current = 2">Daisy Carter</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-purple-500 hover:text-white" :class="{'text-white': current == 3, 'text-purple-500 hover:text-white': current != 3}" x-on:click="current = 3">Dennis Robertson</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-purple-500 hover:text-white" :class="{'text-white': current == 4, 'text-purple-500 hover:text-white': current != 4}" x-on:click="current = 4">Alice Bradley</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-purple-500 hover:text-white" :class="{'text-white': current == 5, 'text-purple-500 hover:text-white': current != 5}" x-on:click="current = 5">Sahra Ortiz</button>
            </li>
          </ul>
        </div>
        <div class="w-full lg:w-2/3 px-3">
          <div class="flex p-6 flex-wrap bg-white rounded-lg shadow">
            <div class="w-full lg:w-1/2 lg:pr-3">
              <img class="h-80 lg:h-auto w-full lg:w-auto object-cover rounded-lg" src="https://images.unsplash.com/photo-1484588168347-9d835bb09939?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80" alt="">
            </div>
            <div class="w-full lg:w-1/2 lg:pl-3 lg:mt-6 order-first lg:order-last">
                <div :class="{'block': current == 0, 'hidden': current != 0 }">
                    <h4 class="text-2xl font-bold font-heading">Danny Bailey</h4>
                    <p class="mb-6 text-gray-500">Data Analyst</p>
                    <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</p>
                    <p class="mb-6 text-gray-500 leading-loose">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum. Integer sit amet erat sit amet lectus lacinia mattis. Donec est tortor, fermentum at urna a, accumsan suscipit sem.</p>
                </div>
                <div :class="{'block': current == 1, 'hidden': current != 1 }" class="hidden">
                    <h4 class="text-2xl font-bold font-heading">Ian Brown</h4>
                    <p class="mb-6 text-gray-500">UX Designer</p>
                    <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</p>
                    <p class="mb-6 text-gray-500 leading-loose">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum. Integer sit amet erat sit amet lectus lacinia mattis. Donec est tortor, fermentum at urna a, accumsan suscipit sem.</p>
                </div>
                <div :class="{'block': current == 2, 'hidden': current != 2 }" class="hidden">
                    <h4 class="text-2xl font-bold font-heading">Daisy Carter</h4>
                    <p class="mb-6 text-gray-500">Project Manager</p>
                    <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</p>
                    <p class="mb-6 text-gray-500 leading-loose">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum. Integer sit amet erat sit amet lectus lacinia mattis. Donec est tortor, fermentum at urna a, accumsan suscipit sem.</p>
                </div>
                <div :class="{'block': current == 3, 'hidden': current != 3 }" class="hidden">
                    <h4 class="text-2xl font-bold font-heading">Dennis Robertson</h4>
                    <p class="mb-6 text-gray-500">Frontend Developer</p>
                    <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</p>
                    <p class="mb-6 text-gray-500 leading-loose">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum. Integer sit amet erat sit amet lectus lacinia mattis. Donec est tortor, fermentum at urna a, accumsan suscipit sem.</p>
                </div>
                <div :class="{'block': current == 4, 'hidden': current != 4 }" class="hidden">
                    <h4 class="text-2xl font-bold font-heading">Alice Bradley</h4>
                    <p class="mb-6 text-gray-500">Backend Developer</p>
                    <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</p>
                    <p class="mb-6 text-gray-500 leading-loose">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum. Integer sit amet erat sit amet lectus lacinia mattis. Donec est tortor, fermentum at urna a, accumsan suscipit sem.</p>
                </div>
                <div :class="{'block': current == 5, 'hidden': current != 5 }" class="hidden">
                    <h4 class="text-2xl font-bold font-heading">Sahra Ortiz</h4>
                    <p class="mb-6 text-gray-500">DevOps Engineer</p>
                    <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</p>
                    <p class="mb-6 text-gray-500 leading-loose">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum. Integer sit amet erat sit amet lectus lacinia mattis. Donec est tortor, fermentum at urna a, accumsan suscipit sem.</p>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

<section class="relative py-24"><img class="absolute top-0 left-0" src="pstls-assets/images/teams/team-1-shadow.png" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 mb-24">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <h1 class="text-6xl font-heading" >Team</h1>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <p class="leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-14">
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-14">
        <div class="max-w-xs mx-auto px-7">
          <div class="relative mb-12"><img class="relative" src="pstls-assets/images/teams/team-1-photo.jpg" style="z-index: 1" alt="" >
            <div class="bg-indigo-100 absolute top-0 left-0 w-full h-full mt-6 -ml-6"></div>
          </div>
          <h5 class="text-2xl font-heading" >Sophie Kowalsky</h5><span class="text-sm text-gray-500" >CTO at Shuffle</span>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-14">
        <div class="max-w-xs mx-auto px-7">
          <div class="relative mb-12"><img class="relative" src="pstls-assets/images/teams/team-1-photo-2.jpg" style="z-index: 1" alt="" >
            <div class="bg-red-100 absolute top-0 left-0 w-full h-full -mt-6 ml-6"></div>
          </div>
          <h5 class="text-2xl font-heading" >Sophie Kowalsky</h5><span class="text-sm text-gray-500" >CTO at Shuffle</span>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-14">
        <div class="max-w-xs mx-auto px-7">
          <div class="relative mb-12"><img class="relative" src="pstls-assets/images/teams/team-1-photo-3.jpg" style="z-index: 1" alt="" >
            <div class="bg-lime-100 absolute top-0 left-0 w-full h-full mt-6 -ml-6"></div>
          </div>
          <h5 class="text-2xl font-heading" >Sophie Kowalsky</h5><span class="text-sm text-gray-500" >CTO at Shuffle</span>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-14">
        <div class="max-w-xs mx-auto px-7">
          <div class="relative mb-12"><img class="relative" src="pstls-assets/images/teams/team-1-photo-4.jpg" style="z-index: 1" alt="" >
            <div class="bg-indigo-100 absolute top-0 left-0 w-full h-full -mt-6 ml-6"></div>
          </div>
          <h5 class="text-2xl font-heading" >Sophie Kowalsky</h5><span class="text-sm text-gray-500" >CTO at Shuffle</span>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-14">
        <div class="max-w-xs mx-auto px-7">
          <div class="relative mb-12"><img class="relative" src="pstls-assets/images/teams/team-1-photo-5.jpg" style="z-index: 1" alt="" >
            <div class="bg-red-100 absolute top-0 left-0 w-full h-full mt-6 -ml-6"></div>
          </div>
          <h5 class="text-2xl font-heading" >Sophie Kowalsky</h5><span class="text-sm text-gray-500" >CTO at Shuffle</span>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-14">
        <div class="max-w-xs mx-auto px-7">
          <div class="relative mb-12"><img class="relative" src="pstls-assets/images/teams/team-1-photo-6.jpg" style="z-index: 1" alt="" >
            <div class="bg-lime-100 absolute top-0 left-0 w-full h-full mt-6 -ml-6"></div>
          </div>
          <h5 class="text-2xl font-heading" >Sophie Kowalsky</h5><span class="text-sm text-gray-500" >CTO at Shuffle</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-black overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="absolute top-0 left-1/2 -mt-12 md:mt-64 lg:mt-0 transform -translate-x-1/2 scale-125" src="boldui-assets/elements/shadow-team-light-blue.svg" alt="">
    <div class="relative max-w-xl mx-auto text-center mb-12">
      <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
      <h2 class="mt-6 text-2xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
    </div>
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="flex justify-center">
          <div>
            <img class="h-80" src="boldui-assets/images/team1.png" alt="">
            <div class="-mt-10">
              <h3 class="text-lg text-white font-heading mb-2">Kathy Ramsey</h3>
              <p class="text-sm text-gray-500 uppercase font-semibold tracking-widest">CEO &amp; Founder</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="flex justify-center">
          <div>
            <img class="h-80" src="boldui-assets/images/team2.png" alt="">
            <div class="-mt-10">
              <h3 class="text-lg text-white font-heading mb-2">Peter Dimebag</h3>
              <p class="text-sm text-gray-500 uppercase font-semibold tracking-widest">General director</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="flex justify-center">
          <div>
            <img class="h-80" src="boldui-assets/images/team3.png" alt="">
            <div class="-mt-10">
              <h3 class="text-lg text-white font-heading mb-2">Tom Clarks</h3>
              <p class="text-sm text-gray-500 uppercase font-semibold tracking-widest">Product Manager</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="flex justify-center">
          <div>
            <img class="h-80" src="boldui-assets/images/team4.png" alt="">
            <div class="-mt-10">
              <h3 class="text-lg text-white font-heading mb-2">Benny Hill</h3>
              <p class="text-sm text-gray-500 uppercase font-semibold tracking-widest">Web developer</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 md:mb-0">
        <div class="flex justify-center">
          <div>
            <img class="h-80" src="boldui-assets/images/team5.png" alt="">
            <div class="-mt-10">
              <h3 class="text-lg text-white font-heading mb-2">Craig Hoffmann</h3>
              <p class="text-sm text-gray-500 uppercase font-semibold tracking-widest">UI designer</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">
        <div class="flex justify-center">
          <div>
            <img class="h-80" src="boldui-assets/images/team6.png" alt="">
            <div class="-mt-10">
              <h3 class="text-lg text-white font-heading mb-2">Clara Osborne</h3>
              <p class="text-sm text-gray-500 uppercase font-semibold tracking-widest">Product Designer</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-md xl:max-w-lg">
          <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
            <span>Our</span>
            <span class="text-green-500">Team</span>
          </div>
          <h1 class="font-heading text-3xl sm:text-4xl mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h1>
          <p class="leading-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full sm:w-1/2 px-4 mb-10">
            <div>
              <img class="block w-full h-64 mb-4 rounded object-cover" src="acros-assets/images/teams/man-1-medium.jpg" alt="">
              <h4 class="font-heading leading-7 text-lg font-medium">Steven Johson</h4>
              <span class="leading-7 text-gray-300">CEO &amp; Founder</span>
              <div class="mt-2">
                <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
                  </svg>
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
                  </svg>
                </a>
                <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                    <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                    </mask>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-10">
            <div>
              <img class="block w-full h-64 mb-4 rounded object-cover" src="acros-assets/images/teams/woman-1-medium.jpg" alt="">
              <h4 class="font-heading leading-7 text-lg font-medium">Justine Loren</h4>
              <span class="leading-7 text-gray-300">Assistant</span>
              <div class="mt-2">
                <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
                  </svg>
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
                  </svg>
                </a>
                <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                    <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                    </mask>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-10">
            <div>
              <img class="block w-full h-64 mb-4 rounded object-cover" src="acros-assets/images/teams/woman-2-medium.jpg" alt="">
              <h4 class="font-heading leading-7 text-lg font-medium">Emma Witsel</h4>
              <span class="leading-7 text-gray-300">Marketing Manager</span>
              <div class="mt-2">
                <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
                  </svg>
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
                  </svg>
                </a>
                <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                    <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                    </mask>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-10">
            <div>
              <img class="block w-full h-64 mb-4 rounded object-cover" src="acros-assets/images/teams/man-2-medium.jpg" alt="">
              <h4 class="font-heading leading-7 text-lg font-medium">Carl Axel</h4>
              <span class="leading-7 text-gray-300">Team Leader</span>
              <div class="mt-2">
                <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
                  </svg>
                </a>
                <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
                  </svg>
                </a>
                <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                    <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                    </mask>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-24 pb-24 lg:pb-32 bg-blue-50 overflow-hidden">
  <div class="absolute inset-0 mt-10">
    <svg class="mx-auto" width="798" height="798" viewBox="0 0 798 798" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.15">
        <path d="M797.81 796.481L698.701 697.372C729.839 655.792 748.256 604.148 748.256 548.328C748.256 442.384 681.803 351.629 588.58 315.365L797.81 1.51892C798 1.13919 798 0.759458 797.81 0.569593C797.81 0.189864 797.43 0 797.051 0H0.949322C0.569593 0 0.189864 0.189864 0.189864 0.569593C0.189864 0.949322 0 1.13919 0.189864 1.51892L178.852 269.607L0.189864 448.08C0 448.27 0 448.46 0 448.839C0 449.219 0 449.409 0.189864 449.599C0.379729 449.789 0.569593 449.789 0.949322 449.789C1.32905 449.789 1.51892 449.789 1.70878 449.599L179.991 271.316L281.949 424.347C260.874 460.801 248.722 503.141 248.722 548.328C248.722 685.98 360.742 798 498.584 798C579.656 798 651.994 759.078 697.562 698.891L796.291 797.62C796.481 797.81 796.671 797.81 797.051 797.81C797.43 797.81 797.62 797.81 797.81 797.62C798 797.43 798 797.241 798 796.861C798 796.481 798 796.671 797.81 796.481ZM181.32 269.797L250.431 200.687C250.621 200.497 250.621 200.307 250.621 199.927C250.621 199.547 250.621 199.358 250.431 199.168C250.051 198.788 249.482 198.788 249.102 199.168L180.181 268.089L2.6581 1.89864H795.342L586.871 314.605C559.341 304.163 529.722 298.467 498.774 298.467C406.879 298.467 326.567 348.211 283.088 422.258L181.32 269.797ZM585.732 316.314L398.905 596.364L284.037 424.157C326.946 350.3 407.069 300.555 498.394 300.555C529.152 300.365 558.581 306.061 585.732 316.314ZM498.584 796.101C361.882 796.101 250.621 684.841 250.621 548.328C250.621 503.9 262.393 462.13 283.088 425.866L398.146 598.453C398.335 598.642 398.525 598.832 398.905 598.832C399.285 598.832 399.475 598.642 399.665 598.453L587.44 317.074C680.284 352.958 746.357 443.143 746.357 548.518C746.357 603.769 728.13 655.032 697.372 696.233L598.642 597.503C598.263 597.124 597.693 597.124 597.313 597.503C597.123 597.693 597.123 597.883 597.123 598.263C597.123 598.642 597.123 598.832 597.313 599.022L696.233 697.941C651.045 757.369 579.276 796.101 498.584 796.101Z" fill="#A0CDFA"></path>
        <path d="M175.055 572.251H0.949322C0.379729 572.251 0 572.631 0 573.201V747.306C0 747.876 0.379729 748.255 0.949322 748.255H175.055C175.625 748.255 176.004 747.876 176.004 747.306V573.201C176.004 572.631 175.625 572.251 175.055 572.251ZM174.106 746.357H1.89864V574.15H174.106V746.357Z" fill="#A0CDFA"></path>
        <path d="M460.612 225.749C460.801 225.939 460.991 225.939 461.181 225.939C461.371 225.939 461.561 225.939 461.751 225.749L573.771 151.132C573.961 150.942 574.15 150.752 574.15 150.373C574.15 149.993 573.961 149.803 573.771 149.613L461.751 74.9964C461.371 74.8065 460.991 74.8065 460.612 74.9964L348.592 149.613C348.402 149.803 348.212 149.993 348.212 150.373C348.212 150.752 348.402 150.942 348.592 151.132L460.612 225.749ZM461.181 76.7052L571.492 150.183L461.181 223.66L350.87 150.183L461.181 76.7052Z" fill="#A0CDFA"></path>
      </g>
    </svg>
  </div>
  <div class="container px-5 mx-auto">
    <div class="max-w-3xl mx-auto mb-14 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-blue-800">Take quick action that increases your brand's regular profit.</h2>
      <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="flex flex-wrap -mx-8 -mb-8 lg:-mb-20">
      <div class="w-full lg:w-1/2 px-8 mb-8 lg:mb-20">
        <div class="relative p-6 lg:p-12 bg-white">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/3 px-4 mb-8 md:mb-0">
              <h3 class="mb-2 text-3xl font-semibold font-heading text-blue-800">Peter Prada</h3>
              <p class="mb-2 text-sm uppercase text-blue-500">CEO &amp; Founder</p>
              <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
            <div class="w-full md:w-1/3 px-4">
              <img class="lg:absolute top-0 right-0 lg:mt-8 -mr-8 w-full md:w-64 h-64 clip-path-left object-cover" src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=801&amp;q=80" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-8 mb-8 lg:mb-20">
        <div class="relative p-6 lg:p-12 bg-white">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/3 px-4 mb-8 md:mb-0">
              <h3 class="mb-2 text-3xl font-semibold font-heading text-blue-800">Tom Clarks</h3>
              <p class="mb-2 text-sm uppercase text-blue-500">General Director</p>
              <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
            <div class="w-full md:w-1/3 px-4">
              <img class="lg:absolute top-0 right-0 lg:mt-8 -mr-8 w-full md:w-64 h-64 clip-path-left object-cover" src="https://images.unsplash.com/photo-1607952529909-f8f14aff612d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-8 mb-8 lg:mb-20">
        <div class="relative p-6 lg:p-12 bg-white">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/3 px-4 mb-8 md:mb-0">
              <h3 class="mb-2 text-3xl font-semibold font-heading text-blue-800">Kathy Ramsey</h3>
              <p class="mb-2 text-sm uppercase text-blue-500">Product Manager</p>
              <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
            <div class="w-full md:w-1/3 px-4">
              <img class="lg:absolute top-0 right-0 lg:mt-8 -mr-8 w-full md:w-64 h-64 clip-path-left object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-8 mb-8 lg:mb-20">
        <div class="relative p-6 lg:p-12 bg-white">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/3 px-4 mb-8 md:mb-0">
              <h3 class="mb-2 text-3xl font-semibold font-heading text-blue-800">Jack Bean</h3>
              <p class="mb-2 text-sm uppercase text-blue-500">Webdeveloper</p>
              <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
            <div class="w-full md:w-1/3 px-4">
              <img class="lg:absolute top-0 right-0 lg:mt-8 -mr-8 w-full md:w-64 h-64 clip-path-left object-cover" src="https://images.unsplash.com/photo-1569779213435-ba3167dde7cc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-col md:flex-row justify-around">
      <div class="max-w-md md:mr-10 mb-10 md:mb-0">
        <span class="inline-block py-1 px-3 text-xs font-semibold bg-blue-100 text-blue-600 rounded-xl">Our Team</span>
        <h2 class="text-3xl md:text-4xl mt-2 mb-4 font-bold font-heading">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis quisquam cum aliquam rem.</p>
      </div>
      <div class="flex flex-wrap">
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Anne Bailey</p>
          <p class="text-sm text-blueGray-400">CEO</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Julie Brown</p>
          <p class="text-blueGray-400">Head of Development</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Tom Jones</p>
          <p class="text-blueGray-400">Head of Operations</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1569124589354-615739ae007b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Anne Smith</p>
          <p class="text-blueGray-400">Director, Product Development</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Julie Brown</p>
          <p class="text-blueGray-400">Head of Development</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Ian Bailey</p>
          <p class="text-blueGray-400">Director, Product Development</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
      <span class="text-sm text-gray-200 uppercase">Lorem Ipsum</span>
      <h2 class="mt-2 mb-4 text-4xl lg:text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-gray-50 p-6 rounded">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
              <img class="md:w-full h-52 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
            </div>
            <div class="w-full md:w-3/5 px-4">
              <h3 class="text-2xl font-bold font-heading mb-1">Danny Bailey</h3>
              <p class="mb-2 text-lg text-gray-400">CEO &amp; Founder</p>
              <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-gray-50 p-6 rounded">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
              <img class="md:w-full h-52 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
            </div>
            <div class="w-full md:w-3/5 px-4">
              <h3 class="text-2xl font-bold font-heading mb-1">Danny Bailey</h3>
              <p class="mb-2 text-lg text-gray-400">CEO &amp; Founder</p>
              <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-gray-50 p-6 rounded">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
              <img class="md:w-full h-52 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
            </div>
            <div class="w-full md:w-3/5 px-4">
              <h3 class="text-2xl font-bold font-heading mb-1">Danny Bailey</h3>
              <p class="mb-2 text-lg text-gray-400">CEO &amp; Founder</p>
              <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-gray-50 p-6 rounded">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
              <img class="md:w-full h-52 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
            </div>
            <div class="w-full md:w-3/5 px-4">
              <h3 class="text-2xl font-bold font-heading mb-1">Danny Bailey</h3>
              <p class="mb-2 text-lg text-gray-400">CEO &amp; Founder</p>
              <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
    <div class="container mx-auto px-4">
        <div class="flex justify-center mb-6">
            <div class="bg-yellow-100 px-2 py-1 text-xs font-bold inline-block">Lorem ipsum</div>
        </div>
        <h1 class="font-heading text-center text-4xl lg:text-5xl font-bold mb-4 max-w-3xl mx-auto">Lorem ipsum dolor sit amet consectutar</h1>
        <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="bg-gray-50 p-8">
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-full lg:w-1/2 p-4">
                            <img class="w-full object-cover" style="height: 223px;" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <h3 class="text-green-500 text-xl font-bold">Sophie Baialey</h3>
                            <p class="font-bold mb-3">CEO &amp; Founder</p>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="bg-gray-50 p-8">
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-full lg:w-1/2 p-4">
                            <img class="w-full object-cover" style="height: 223px;" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <h3 class="text-green-500 text-xl font-bold">Ian Brown</h3>
                            <p class="font-bold mb-3">Head of Development</p>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="bg-gray-50 p-8">
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-full lg:w-1/2 p-4">
                            <img class="w-full object-cover" style="height: 223px;" src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <h3 class="text-green-500 text-xl font-bold">Dennis Robertson</h3>
                            <p class="font-bold mb-3">Frontend Developer</p>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="bg-gray-50 p-8">
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-full lg:w-1/2 p-4">
                            <img class="w-full object-cover" style="height: 223px;" src="https://images.unsplash.com/photo-1569124589354-615739ae007b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <h3 class="text-green-500 text-xl font-bold">Sahra Ortiz</h3>
                            <p class="font-bold mb-3">Product Designer</p>
                            <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>