Portfolio Components in Casper library

<section x-data="{ showContent: false }" class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute top-0 right-0 lg:-mt-20 mr-20 lg:mr-40 animate-spinStar z-10" src="casper-assets/services/blink-star.png" alt="">
    <div class="relative max-w-lg lg:max-w-8xl mx-auto">
      <div class="absolute top-0 left-0 -mt-96 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
      <div class="absolute bottom-0 right-0 w-186 h-186 bg-gradient-to-t from-violet-700 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
      <div class="relative flex flex-wrap items-end -mx-4 mb-12">
        <div class="w-full lg:w-3/5 xl:w-auto px-4 mb-8 lg:mb-0">
          <div class="max-w-2xl">
            <span class="block font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-transparent bg-clip-text bg-gradient-to-br from-violet-500 via-blueGray-800 to-sky-900 tracking-tight">300+</span>
            <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-6">Projects Launched</h2>
            <p class="max-w-xl text-xl text-gray-500 leading-relaxed tracking-tight">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          </div>
        </div>
        <div class="w-full lg:w-2/5 xl:w-auto ml-auto px-4 lg:text-right">
          <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-black hover:text-violet-800 bg-violet-500 hover:bg-white transition duration-200 rounded-full" href="#">
            <span class="mr-2">SEE MORE PROJECTS</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 flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
          <a class="group block mb-6 rounded-3xl overflow-hidden" href="#">
            <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post1.png" alt="">
            <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
              <div class="sm:flex mb-6 items-center justify-between">
                <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">jiggle.co</span>
                <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon.svg" alt="">
              </div>
              <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </a>
          <a class="group block mb-6 rounded-3xl overflow-hidden" href="#">
            <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post3.png" alt="">
            <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
              <div class="sm:flex mb-6 items-center justify-between">
                <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">welytics.co</span>
                <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-3.svg" alt="">
              </div>
              <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </a>
          <div x-show="showContent" class="visibility-item">
            <a class="group block rounded-3xl overflow-hidden" href="#">
              <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post1.png" alt="">
              <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
                <div class="sm:flex mb-6 items-center justify-between">
                  <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">welytics.co</span>
                  <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-3.svg" alt="">
                </div>
                <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
              </div>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 lg:pt-20">
          <a class="group block mb-6 rounded-3xl overflow-hidden" href="#">
            <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post2.png" alt="">
            <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
              <div class="sm:flex mb-6 items-center justify-between">
                <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">symtric.co.id</span>
                <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-2.svg" alt="">
              </div>
              <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </a>
          <a class="group block mb-6 rounded-3xl overflow-hidden" href="#">
            <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post4.png" alt="">
            <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
              <div class="sm:flex mb-6 items-center justify-between">
                <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">casper.agency</span>
                <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-4.svg" alt="">
              </div>
              <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </a>
          <div x-show="showContent" class="visibility-item">
            <a class="group block rounded-3xl overflow-hidden" href="#">
              <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post2.png" alt="">
              <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
                <div class="sm:flex mb-6 items-center justify-between">
                  <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">casper.agency</span>
                  <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-4.svg" alt="">
                </div>
                <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-center-right-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 end-0 mt-lg-n12 me-md-10 me-lg-40 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
    <div class="mw-md mw-md-6xl mx-auto position-relative">
      <div class="row mb-14 align-items-end">
        <div class="col-lg-8 mb-8 mb-lg-0">
          <div class="mw-xl">
            <h2 class="bg-gradient-blue-text fw-medium">300+</h2>
            <h2 class="h3 font-heading fw-medium text-white mb-6">Projects Launched</h2>
            <p class="display-5 lh-lg text-light-light mb-0">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          </div>
        </div>
        <div class="col-lg-auto ms-auto"><a class="btn btn-primary text-black" href="#"><span class="me-2">SEE MORE ARTICLES</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.92 6.62C17.8185 6.37565 17.6243 6.18147 17.38 6.08C17.2598 6.02876 17.1307 6.00158 17 6H7C6.73478 6 6.48043 6.10536 6.29289 6.29289C6.10536 6.48043 6 6.73478 6 7C6 7.26522 6.10536 7.51957 6.29289 7.70711C6.48043 7.89464 6.73478 8 7 8H14.59L6.29 16.29C6.19627 16.383 6.12188 16.4936 6.07111 16.6154C6.02034 16.7373 5.9942 16.868 5.9942 17C5.9942 17.132 6.02034 17.2627 6.07111 17.3846C6.12188 17.5064 6.19627 17.617 6.29 17.71C6.38296 17.8037 6.49356 17.8781 6.61542 17.9289C6.73728 17.9797 6.86799 18.0058 7 18.0058C7.13201 18.0058 7.26272 17.9797 7.38458 17.9289C7.50644 17.8781 7.61704 17.8037 7.71 17.71L16 9.41V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V7C17.9984 6.86932 17.9712 6.74022 17.92 6.62Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
      <div class="row">
        <div class="col-md-6"><a class="btn mb-6 btn-outline-primary border-0 text-start text-black p-0 d-block rounded overflow-hidden" href="#"><img class="img-fluid d-block w-100" src="casper-assets/portfolio/portfolio-post1.png" alt=""/>
            <div class="p-8 bg-white bg-opacity-10">
              <div class="d-sm-flex mb-6 align-items-center justify-content-between"><span class="display-5 fw-medium text-white">jiggle.co</span><img class="img-fluid d-block mt-6 mt-sm-0" src="casper-assets/portfolio/logo-icon-2.svg" alt=""/></div>
              <p class="h5 fw-medium text-white mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div></a><a class="btn mb-6 btn-outline-primary border-0 text-start p-0 d-block rounded overflow-hidden" href="#"><img class="img-fluid d-block w-100" src="casper-assets/portfolio/portfolio-post2.png" alt=""/>
            <div class="p-8 bg-white bg-opacity-10">
              <div class="d-sm-flex mb-6 align-items-center justify-content-between"><span class="display-5 fw-medium text-white">welytics.co</span><img class="img-fluid d-block mt-6 mt-sm-0" src="casper-assets/portfolio/logo-icon-3.svg" alt=""/></div>
              <p class="h5 fw-medium text-white mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div></a></div>
        <div class="col-md-6 pt-md-32"><a class="btn mb-6 btn-outline-primary border-0 text-start text-black p-0 d-block rounded overflow-hidden" href="#"><img class="img-fluid d-block w-100" src="casper-assets/portfolio/portfolio-post3.png" alt=""/>
            <div class="p-8 bg-white bg-opacity-10">
              <div class="d-sm-flex mb-6 align-items-center justify-content-between"><span class="display-5 fw-medium text-white">jiggle.co</span><img class="img-fluid d-block mt-6 mt-sm-0" src="casper-assets/portfolio/logo-icon-3.svg" alt=""/></div>
              <p class="h5 fw-medium text-white mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div></a><a class="btn mb-6 btn-outline-primary border-0 text-start p-0 d-block rounded overflow-hidden" href="#"><img class="img-fluid d-block w-100" src="casper-assets/portfolio/portfolio-post4.png" alt=""/>
            <div class="p-8 bg-white bg-opacity-10">
              <div class="d-sm-flex mb-6 align-items-center justify-content-between"><span class="display-5 fw-medium text-white">welytics.co</span><img class="img-fluid d-block mt-6 mt-sm-0" src="casper-assets/portfolio/logo-icon-2.svg" alt=""/></div>
              <p class="h5 fw-medium text-white mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div></a></div>
      </div>
    </div>
  </div>
</section>