How It Works Components in Casper library

<section class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 right-0 w-186 h-186 bg-gradient-to-t from-violet-900 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative max-w-md md:max-w-8xl mx-auto">
      <div class="text-center mb-14">
        <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-6">How Does Casper Work</h2>
        <p class="text-xl text-gray-400">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
      </div>
      <div class="flex flex-wrap items-center -mx-4 mb-16">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <div class="relative flex max-w-md pt-12 lg:pt-20 pl-12 lg:pl-20 items-end justify-end rounded-3xl overflow-hidden">
            <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/how-it-works/bg-square-gradient.png" alt="">
            <img class="relative w-87 h-87 rounded-tl-3xl object-cover" src="casper-assets/how-it-works/image-square-sm-1.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="max-w-lg">
            <h3 class="font-heading text-4xl lg:text-5xl font-semibold text-white">01. Upload</h3>
            <div class="my-6 h-1 w-full bg-white bg-opacity-20"></div>
            <p class="text-xl text-white tracking-tight">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap items-center -mx-4 mb-16">
        <div class="w-full md:w-1/2 px-4 order-last md:order-first">
          <div class="max-w-lg">
            <h3 class="font-heading text-4xl lg:text-5xl font-semibold text-white">02. Auto Generation</h3>
            <div class="my-6 h-1 w-full bg-white bg-opacity-20"></div>
            <p class="text-xl text-white tracking-tight">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <div class="relative flex max-w-md pt-12 lg:pt-20 pl-12 lg:pl-20 md:ml-auto items-end justify-end rounded-3xl overflow-hidden">
            <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/how-it-works/bg-square-gradient.png" alt="">
            <img class="relative w-87 h-87 rounded-tl-3xl object-cover" src="casper-assets/how-it-works/image-square-sm-2.png" alt="">
          </div>
        </div>
      </div>
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <div class="relative flex max-w-md pt-12 lg:pt-20 pl-12 lg:pl-20 items-end justify-end rounded-3xl overflow-hidden">
            <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/how-it-works/bg-square-gradient.png" alt="">
            <img class="relative w-87 h-87 rounded-tl-3xl object-cover" src="casper-assets/how-it-works/image-square-sm-3.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="max-w-lg">
            <h3 class="font-heading text-4xl lg:text-5xl font-semibold text-white">03. Select &amp; Send</h3>
            <div class="my-6 h-1 w-full bg-white bg-opacity-20"></div>
            <p class="text-xl text-white tracking-tight">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="text-center mb-16">
      <h2 class="font-heading fw-medium text-white mb-6">How Does Casper Work</h2>
      <p class="display-5 lh-lg text-light-light mb-4">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
    </div>
    <div class="mw-lg mw-md-none mx-auto">
      <div class="row mb-14 align-items-center">
        <div class="col-md-6 order-last order-md-first">
          <div class="mw-md mw-lg-lg position-relative"><img class="img-fluid d-block w-100" src="casper-assets/how-it-works/bg-square-gradient.png" alt=""/>
            <div class="position-absolute bottom-0 end-0 w-100 ps-10 pt-10"><img class="img-fluid d-block ms-auto" src="casper-assets/how-it-works/image-square-sm-2.png" alt=""/></div>
          </div>
        </div>
        <div class="col-md-6 mb-8 mb-md-0">
          <div class="mw-lg ms-md-auto">
            <h5 class="display-2 fw-semibold text-white mb-0">01. Upload</h5>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="display-5 lh-lg text-white">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
          </div>
        </div>
      </div>
      <div class="row mb-14 align-items-center">
        <div class="col-md-6 mb-8 mb-md-0">
          <div class="mw-lg ms-md-auto">
            <h5 class="display-2 fw-semibold text-white mb-0">02. Auto Generation</h5>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="display-5 lh-lg text-white">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
          </div>
        </div>
        <div class="col-md-6">
          <div class="mw-md mw-lg-lg position-relative"><img class="img-fluid d-block w-100" src="casper-assets/how-it-works/bg-square-gradient.png" alt=""/>
            <div class="position-absolute bottom-0 end-0 w-100 ps-10 pt-10"><img class="img-fluid d-block ms-auto" src="casper-assets/how-it-works/image-square-sm-3.png" alt=""/></div>
          </div>
        </div>
      </div>
      <div class="row mb-14 align-items-center">
        <div class="col-md-6 order-last order-md-first">
          <div class="mw-md mw-lg-lg position-relative"><img class="img-fluid d-block w-100" src="casper-assets/how-it-works/bg-square-gradient.png" alt=""/>
            <div class="position-absolute bottom-0 end-0 w-100 ps-10 pt-10"><img class="img-fluid d-block ms-auto" src="casper-assets/how-it-works/image-square-sm-1.png" alt=""/></div>
          </div>
        </div>
        <div class="col-md-6 mb-8 mb-md-0">
          <div class="mw-lg ms-md-auto">
            <h5 class="display-2 fw-semibold text-white mb-0">03. Select &amp; Send</h5>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="display-5 lh-lg text-white">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>