Features Components in Asitrastudio library

<section class="py-12 md:py-20 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <h1 class="font-heading text-6xl sm:text-8xl md:text-10xl tracking-tighter mb-20">Get started quickly</h1>
    <div class="pb-10 pt-20 lg:pt-10 px-8 sm:px-12 xl:px-32 bg-black rounded-4xl">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <div class="max-w-lg mx-auto">
            <h3 class="text-white text-5xl lg:text-7xl tracking-tight mb-6">Althhorpe Street Leamigton Spa</h3>
            <p class="max-w-sm text-lg text-coolGray-500 mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            <a class="group inline-flex py-5 px-8 items-center justify-center leading-none font-medium text-white hover:text-black border border-white rounded-full hover:bg-white transition duration-200" href="#">
              <span class="mr-2">Get consulation</span>
              <span class="group-hover:rotate-45 transform transition duration-100">
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 1L1 9" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9 8.33571V1H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <img class="block" src="asitrastudio-assets/features/double-photo.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Get started quickly</h1>
    <div class="px-12 px-32-widescreen pt-20 pt-10-desktop pb-10 has-background-dark" style="border-radius: 40px;">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-6">
          <div class="has-mw-md has-mw-lg-desktop mx-auto">
            <h3 class="title has-text-white mb-6 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Althhorpe Street Leamigton Spa</h3>
            <p class="has-mw-sm is-size-6 has-text-grey mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            <a class="button is-outlined is-rounded is-light" href="#">
              <span class="mr-2">Get consulation</span>
              <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="column is-6">
          <img class="is-block image is-fullwidth has-mw-lg mx-auto has-mw-none-desktop" src="asitrastudio-assets/features/double-photo.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-20 bg-light-light">
  <div class="container">
    <h1 class="mb-20" >Get started quickly</h1>
    <div class="pb-10 pt-20 pt-lg-10 px-12 px-xl-32 bg-dark rounded-5">
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0">
          <div class="mw-md mx-auto">
            <h3 class="text-white fs-1 mb-6" >Althhorpe Street Leamigton Spa</h3>
            <p class="mw-xs text-secondary-light mb-10" >
              It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
              layout.
            </p><a class="btn btn-outline-light" href="#"><span class="me-2" >Get consulation</span>
              <svg class="rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></a>
          </div>
        </div>
        <div class="col-12 col-lg-6"><img class="img-fluid d-block" src="asitrastudio-assets/features/double-photo.png" alt=""/></div>
      </div>
    </div>
  </div>
</section>