Team Components in Casper library

<section x-data="{ showContent: false }" class="relative pb-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="relative w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="absolute top-0 left-0 -ml-64 w-160 h-160 bg-gradient-to-t from-purple-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
        <img class="absolute top-0 right-0 md:-mt-20 mr-4 md:mr-32 w-52 md:w-auto" src="casper-assets/team/planet.png" alt="">
        <img class="absolute bottom-0 right-0 mr-40 animate-spinStar" src="casper-assets/team/blink-star.png" alt="">
        <div class="relative pt-52 pb-40 max-w-lg mx-auto lg:mx-0">
          <h2 class="max-w-md font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-8">Meet our amazing Team</h2>
          <p class="text-xl text-gray-500 tracking-tight mb-8">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
          <a x-show="!showContent" x-on:click.prevent="showContent = true" class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-white hover:text-violet-500 bg-transparent hover:bg-white border-2 border-white transition duration-200 rounded-full" href="#">
            <span class="mr-2">SHOW ALL PEOPLE</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="relative w-full lg:w-1/2 px-4">
        <div class="max-w-lg md:max-w-none lg:max-w-xl 2xl:max-w-2xl mx-auto lg:mr-0">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
              <div class="py-10 px-11 mb-10 border-2 border-white rounded-3xl">
                <div class="text-center">
                  <img class="block mx-auto mb-6" src="casper-assets/team/avatar-2-sm.png" alt="">
                  <span class="block text-2xl text-white font-medium">Marvin McKinney</span>
                  <span class="block text-base text-violet-500 font-medium">Tech Lead</span>
                </div>
              </div>
              <div class="py-10 px-11 mb-10 border-2 border-white rounded-3xl">
                <div class="text-center">
                  <img class="block mx-auto mb-6" src="casper-assets/team/avatar-1-sm.png" alt="">
                  <span class="block text-2xl text-white font-medium">Oliver Evans</span>
                  <span class="block text-base text-violet-500 font-medium">CTO</span>
                </div>
              </div>
              <div x-show="showContent" class="visibility-item">
                <div class="py-10 px-11 border-2 border-white rounded-3xl">
                  <div class="text-center">
                    <img class="block mx-auto mb-6" src="casper-assets/team/avatar-2-sm.png" alt="">
                    <span class="block text-2xl text-white font-medium">Liam Brown</span>
                    <span class="block text-base text-violet-500 font-medium">CEO</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full md:w-1/2 px-4 md:pt-18">
              <div class="py-10 px-11 mb-10 border-2 border-white rounded-3xl">
                <div class="text-center">
                  <img class="block mx-auto mb-6" src="casper-assets/team/avatar-1-sm.png" alt="">
                  <span class="block text-2xl text-white font-medium">Samuel Griffin</span>
                  <span class="block text-base text-violet-500 font-medium">Tech Lead</span>
                </div>
              </div>
              <div class="py-10 px-11 mb-10 border-2 border-white rounded-3xl">
                <div class="text-center">
                  <img class="block mx-auto mb-6" src="casper-assets/team/avatar-2-sm.png" alt="">
                  <span class="block text-2xl text-white font-medium">Kathryn Murphy</span>
                  <span class="block text-base text-violet-500 font-medium">CTO</span>
                </div>
              </div>
              <div x-show="showContent" class="visibility-item">
                <div class="py-10 px-11 border-2 border-white rounded-3xl">
                  <div class="text-center">
                    <img class="block mx-auto mb-6" src="casper-assets/team/avatar-1-sm.png" alt="">
                    <span class="block text-2xl text-white font-medium">Lucas Wilson</span>
                    <span class="block text-base text-violet-500 font-medium">PM</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pb-12 pt-40 py-lg-24 pt-lg-32 bg-dark-light position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="casper-assets/blur/blur-left-center-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 mb-14 mb-lg-0 position-relative"><img class="d-none d-md-block position-absolute top-0 end-0 mt-md-n52 mt-lg-n64 mt-xl-n52 img-fluid" src="casper-assets/team/planet.png" alt=""/><img class="d-block d-md-none position-absolute top-0 end-0 mt-n40 me-8 img-fluid" style="width: 164px;" src="casper-assets/team/planet.png" alt=""/>
        <div class="mw-sm mw-lg-lg mx-auto mx-lg-0">
          <h2 class="h3 font-heading fw-medium text-white mb-6">Meet our amazing Team</h2>
          <p class="display-5 lh-lg text-light-light mb-8">Mi turpis turpis in justo pellentesque id nibh praesent.</p><a class="btn btn-outline-light" href="#"><span class="me-2">SHOW ALL PEOPLE</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg></a>
        </div><img class="img-fluid d-block ms-auto animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
      </div>
      <div class="col-12 col-lg-7">
        <div class="mw-2xl mx-auto me-lg-0">
          <div class="row">
            <div class="col-12 col-sm-6 mb-10 mb-sm-0 mt-sm-n8">
              <div class="d-flex mb-10 flex-column align-items-center justify-content-center p-10 text-center border-2 border border-white rounded"><img class="img-fluid d-block mb-6" src="casper-assets/team/avatar-1-sm.png" alt=""/>
                <h5 class="fw-medium text-white mb-1">Marvin McKinney</h5><span class="text-primary fw-medium">Tech Lead</span>
              </div>
              <div class="d-flex flex-column align-items-center justify-content-center p-10 text-center border-2 border border-white rounded"><img class="img-fluid d-block mb-6" src="casper-assets/team/avatar-2-sm.png" alt=""/>
                <h5 class="fw-medium text-white mb-1">Marvin McKinney</h5><span class="text-primary fw-medium">Tech Lead</span>
              </div>
            </div>
            <div class="col-12 col-sm-6 mt-sm-8">
              <div class="d-flex mb-10 flex-column align-items-center justify-content-center p-10 text-center border-2 border border-white rounded"><img class="img-fluid d-block mb-6" src="casper-assets/team/avatar-2-sm.png" alt=""/>
                <h5 class="fw-medium text-white mb-1">Kathryn Murphy</h5><span class="text-primary fw-medium">CTO</span>
              </div>
              <div class="d-flex flex-column align-items-center justify-content-center p-10 text-center border-2 border border-white rounded"><img class="img-fluid d-block mb-6" src="casper-assets/team/avatar-1-sm.png" alt=""/>
                <h5 class="fw-medium text-white mb-1">Marvin McKinney</h5><span class="d-block text-primary fw-medium">Tech Lead</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>