Features Components in Mirga library

<section class="py-12 md:py-24 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="mb-12 md:mb-28 max-w-3xl">
      <h1 class="relative text-6xl sm:text-9xl xl:text-11xl max-w-xl xl:max-w-3xl font-semibold font-heading">
        <span class="mr-3">Join the community, and change</span>
        <span class="relative inline-block">
          <span class="relative z-10">the future.</span>
          <span class="absolute -bottom-2 left-0 h-2.5 w-full bg-green-100 rounded-full"></span>
        </span>
      </h1>
    </div>
    <div class="flex flex-wrap -m-3 mb-16">
      <div class="w-full md:w-1/2 p-3">
        <div class="relative overflow-hidden">
          <img class="rounded-4xl w-full object-cover" style="height: 666px;" src="mirga-assets/images/features/friends.jpg" alt="">
          <p class="absolute bottom-0 left-0 px-14 pb-16 text-xl text-white font-semibold tracking-tight">We want to support your endeavors. Get helpful hints.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-3">
        <div class="relative overflow-hidden">
          <img class="rounded-4xl w-full object-cover" style="height: 666px;" src="mirga-assets/images/features/woman.jpg" alt="">
          <div class="absolute top-0 left-0 px-14 py-16 flex flex-col justify-between h-full">
            <h3 class="mb-8 text-5xl text-white font-semibold tracking-tight max-w-xs font-heading">Augmented Reality Experiences.</h3>
            <p class="text-xl text-white font-semibold tracking-tight">We want to support your endeavors. Get helpful hints.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-center">
      <div class="w-auto"><a class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Get consultation</a></div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-2xl mx-auto mw-lg-8xl">
    <div class="mw-lg-3xl mb-24">
      <h2 class="font-heading h1 mb-0">
        <span class="d-block">Join the</span>
        <span class="d-block">community, and</span>
        <span class="d-inline-block">change</span>
        <span class="d-inline-block position-relative">
          <span>the future.</span>
          <div class="py-1 bg-success rounded-pill"></div>
        </span>
      </h2>
    </div>
    <div class="row mb-20">
      <div class="col-lg-6 mb-8 mb-lg-0">
        <div class="position-relative rounded-4 overflow-hidden">
          <img class="d-block img-fluid w-100 h-100" style="object-fit: cover;" src="mirga-assets/images/features/friends.jpg" alt="">
          <div class="position-absolute bottom-0 start-0 w-100 px-8 px-md-14 pb-16">
            <span class="text-white fs-6 fw-semibold">We want to support your endeavors. Get helpful hints.</span>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="position-relative rounded-4 overflow-hidden">
          <img class="d-block img-fluid w-100 h-100" style="object-fit: cover;" src="mirga-assets/images/features/woman.jpg" alt="">
          <div class="position-absolute bottom-0 start-0 w-100 h-100 px-8 px-md-14 py-16">
            <div class="d-flex flex-column h-100">
              <h5 class="fs-2 mb-8 fw-semibold text-white">Augmented Reality Experiences.</h5>
              <span class="d-block mt-auto text-white fs-6 fw-semibold">We want to support your endeavors. Get helpful hints.</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-primary" href="#">Get consultation</a></div>
  </div>
</section>