Portfolio Components in Zospace library

<section class="relative bg-gray-800 py-20 2xl:py-40 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" x-init="slideWidth = $refs.slide1.offsetWidth, activeSlide = 1">
  <div class="relative max-w-4xl px-4 lg:px-0 mx-auto py-10">
    <div class="max-w-xl mb-14 lg:mb-28">
      <span class="text-lg text-blue-400 font-semibold">Our Works</span>
      <h2 class="mt-8 text-5xl text-white font-bold font-heading">More than 20 years in the game</h2>
    </div>
    <div class="relative">
      <div class="relative max-w-4xl mx-auto">
        <div>
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-12">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-12">
                    <img class="w-full h-96 mb-12 object-cover" src="https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1100&amp;q=80" alt="">
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-12">
                    <img class="w-full h-96 mb-12 object-cover" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-12">
                    <img class="w-full h-96 mb-12 object-cover" src="https://images.unsplash.com/photo-1618005198920-f0cb6201c115?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -mx-5">
          <div class="w-full lg:w-4/5 px-5 mb-6 lg:mb-0">
            <div class="relative py-12 px-10 lg:px-20 bg-gray-600 rounded-xl">
              <div class="absolute top-0 -mt-6 left-0 ml-16 w-14 h-14 bg-gray-600" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
              <div :class="{'hidden': activeSlide != 0}">
                  <h3 class="mb-6 text-4xl text-white font-bold font-heading">Experience design for your products</h3>
                  <p class="text-lg text-gray-300">The brown fox jumps over the lazy dog.</p>
              </div>
              <div :class="{'hidden': activeSlide != 1}" class="hidden">
                  <h3 class="mb-6 text-4xl text-white font-bold font-heading">Crafting Memorable User Journeys</h3>
                  <p class="text-lg text-gray-300">As the clock ticks, the pendulum swings.</p>
              </div>
              <div :class="{'hidden': activeSlide != 2}" class="hidden">
                  <h3 class="mb-6 text-4xl text-white font-bold font-heading">Navigating the Path of User Engagement</h3>
                  <p class="text-lg text-gray-300">Through the mist, a beacon shines bright.</p>
              </div>
            </div>
          </div>
          <div class="w-auto mx-auto lg:w-1/5 px-5">
            <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="relative z-10 inline-flex mr-2 items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
              <svg class="w-4 h-4" width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.84708 12.1077C7.05097 12.3133 7.05097 12.6436 6.84708 12.8476C6.64319 13.0517 6.31377 13.0525 6.10988 12.8476L0.152917 6.8708C-0.0509739 6.66673 -0.0509738 6.33645 0.152917 6.13087L6.10988 0.154027C6.31377 -0.0500387 6.64319 -0.0500386 6.84708 0.154027C7.05098 0.358848 7.05098 0.689887 6.84708 0.893952L1.4143 6.50121L6.84708 12.1077Z" fill="white"></path>
              </svg>
            </button>
            <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="relative z-10 inline-flex items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
              <svg class="w-4 h-4" width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.152917 0.894235C-0.0509742 0.688658 -0.0509742 0.358375 0.152917 0.15431C0.356808 -0.0497557 0.686228 -0.0505119 0.89012 0.15431L6.84708 6.13116C7.05097 6.33522 7.05097 6.6655 6.84708 6.87108L0.890119 12.8479C0.686227 13.052 0.356807 13.052 0.152916 12.8479C-0.0509753 12.6431 -0.0509753 12.3121 0.152916 12.108L5.5857 6.50074L0.152917 0.894235Z" fill="white"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden">
  <div class="container">
    <div class="mw-6xl mx-auto mb-32">
      <div class="mw-xl"><span class="h6 text-primary" >Our Works</span>
        <h2 class="h3 text-white mt-10" >More than 20 years in the game</h2>
      </div>
    </div>
  </div>
  <div class="d-flex px-4 px-md-0 justify-content-center position-relative"><img class="d-none d-md-block img-fluid" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt=""/>
    <div class="flex-shrink-0 w-100 mw-2xl mw-lg-3xl mw-xl-5xl mw-xxl-6xl mx-8 mx-lg-16 mx-xxl-28 position-relative"><img class="d-block w-100 img-fluid mb-12" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1100&amp;q=80" alt=""/>
      <div class="row">
        <div class="col-12 col-md-9 col-xl-10 mb-6 mb-md-0">
          <div class="position-relative pt-12 pb-16 px-6 px-sm-20 rounded bg-secondary">
            <div class="position-absolute top-0 start-0 ms-20 translate-middle bg-secondary" style="width: 64px; height: 64px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
            <h4 class="text-white mb-6" >Experience design for your products</h4>
            <p class="text-secondary-light mb-0" >The brown fox jumps over the lazy dog.</p>
          </div>
        </div>
        <div class="col-12 col-md-3 col-xl-2 text-end">
          <button class="btn p-0 me-2 bg-primary d-inline-flex justify-content-center align-items-center text-white rounded-circle" style="width: 62px; height: 62px;">
            <svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.84708 12.1077C7.05097 12.3133 7.05097 12.6436 6.84708 12.8476C6.64319 13.0517 6.31377 13.0525 6.10988 12.8476L0.152917 6.8708C-0.0509739 6.66673 -0.0509738 6.33645 0.152917 6.13087L6.10988 0.154027C6.31377 -0.0500387 6.64319 -0.0500386 6.84708 0.154027C7.05098 0.358848 7.05098 0.689887 6.84708 0.893952L1.4143 6.50121L6.84708 12.1077Z" fill="white"></path>
            </svg>
          </button>
          <button class="btn p-0 bg-primary d-inline-flex justify-content-center align-items-center text-white rounded-circle" style="width: 62px; height: 62px;">
            <svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.152917 0.894235C-0.0509742 0.688658 -0.0509742 0.358375 0.152917 0.15431C0.356808 -0.0497557 0.686228 -0.0505119 0.89012 0.15431L6.84708 6.13116C7.05097 6.33522 7.05097 6.6655 6.84708 6.87108L0.890119 12.8479C0.686227 13.052 0.356807 13.052 0.152916 12.8479C-0.0509753 12.6431 -0.0509753 12.3121 0.152916 12.108L5.5857 6.50074L0.152917 0.894235Z" fill="white"></path>
            </svg>
          </button>
        </div>
      </div>
    </div><img class="d-none d-md-block img-fluid" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt=""/>
  </div>
</section>