Bulma Call to action Components

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <div class="has-text-centered mx-auto">
            <h2 class="mb-5 has-text-weight-bold has-text-centered title is-size-1">Collaborate efficiently with the teams today</h2>
            <p class="mb-7 has-text-weight-medium has-text-centered has-text-dark">Amet minim mollit non deserunt ullamco.</p>
            <a href="#" class="is-link button mb-11">Join Free for 30 Days</a>
            <div class="is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-center -m-1">
                <div class="p-1">
                    <div class="is-flex is-flex-wrap-wrap">
                        <img src="flaro-assets/images/cta/avatar-circle.png" alt="">
                        <img src="flaro-assets/images/cta/avatar-circle2.png" alt="">
                        <img src="flaro-assets/images/cta/avatar-circle3.png" alt="">
                    </div>
                </div>
                <div class="p-1">
                    <p class="has-text-grey has-text-weight-semibold">
                        <span>Join</span>
                        <span class="has-text-weight-bold">250+</span>
                        <span>other startup founders</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

<section class="section py-20">
  <div class="container">
    <h2 class="mb-8 mb-16-desktop title is-1">Let&apos;s start something completely new together</h2>
    <div class="columns is-vcentered">
      <div class="column is-8 mb-3 mb-0-desktop">
        <p class="mb-1 is-size-5 has-text-grey-dark">Drop us a line, and we&apos;ll get in touch.</p>
        <p class="is-size-5 has-text-grey-dark">We&apos;ll see if we&apos;re a match and how we can help each other.</p>
      </div>
      <div class="column is-3"><a class="button is-primary is-fullwidth" href="#">Sign up</a></div>
    </div>
  </div>
</section>

<section class="section is-clipped">
  <div class="container is-relative">
    <div class="is-absolute is-top-0 is-bottom-0 is-left-0 is-right-0 my-8 -mx-8 has-background-light"></div>
    <div class="is-relative has-background-info is-clipped">
      <img class="-ml-40-widescreen is-absolute is-top-0 is-left-0" style="height: 100%; width: 100%;" src="yofte-assets/elements/cta-lines.svg" alt="">
      <div class="columns is-vcentered is-multiline is-relative">
        <div class="column is-8 p-12 pl-40-desktop mb-8 mb-0-desktop">
          <span class="subtitle has-text-white">New Products</span>
          <h2 class="title is-3 is-size-2-tablet has-text-white mt-2 mb-14">Check our new collection</h2>
          <a class="button is-primary" href="#">More</a>
        </div>
        <div class="column is-4 is-relative p-0">
          <img class="image is-fullwidth" style="height: 384px; object-fit: cover;" src="https://images.unsplash.com/photo-1554244933-d876deb6b2ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section py-24 is-relative">
  <div class="is-absolute is-top-0 is-right-0 p-20 p-40-tablet has-background-primary-light"></div>
  <div class="is-absolute is-bottom-0 is-left-0 p-20 p-40-tablet has-background-warning-light"></div>
  <div class="container is-relative">
    <div class="px-4 py-20 has-background-black">
      <div class="has-mw-2xl mx-auto has-text-centered">
        <span class="heading is-size-6">New feature</span>
        <h1 class="title mt-2 is-size-2-touch is-size-1-tablet has-text-white is-spaced">
          <span>Take</span>
          <span class="has-text-primary">quick action</span>
          <span>that increases your brand's regular profit.</span>
        </h1>
        <p class="has-text-white mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Activate Demo</a><a class="button is-primary is-outlined" href="#">Share with friends</a></div>
      </div>
    </div>
  </div>
</section>

<section class="is-relative section py-16 has-background-primary">
  <div class="container">
    <img class="is-absolute" src="acros-assets/images/call-to-action/cta-1-bg.png">
    <div class="has-mw-2xl mx-auto has-text-centered is-relative" style="z-index: 1;">
      <small class="is-block has-text-white has-text-weight-semibold is-uppercase mb-2">New feature</small>
      <h2 class="mb-6 title has-text-white">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="mb-12 subtitle has-text-white">If you have ever wondered how to develop your brand, this is the place for you. Take a&nbsp;big step forward in growing your business with this great tool.</p>
      <div class="buttons is-centered"><a class="button is-white has-text-grey-darker mr-3" href="#">Active Demo</a><a class="button is-white is-outlined" href="#">Share with friends</a></div>
    </div>
  </div>
</section>

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-8">NEW FEATURE</span>
      <h1 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="has-mw-2xl mx-auto subtitle is-size-5 has-leading-4 mt-6 mb-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="buttons is-centered"><a class="button is-warning" href="#">Activate demo</a><a class="button is-outlined is-primary" href="#">Share with friends</a></div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="is-max-w-lg mx-auto has-text-centered">
      <span class="tag is-info is-rounded">Lorem ipsum</span>
      <h2 class="mt-5 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      <div class="mt-5"><a class="button is-primary mr-2" href="#">Check now</a><a class="button is-light" href="#">Learn more</a></div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered">
      <span class="tag is-warning is-light">New feature</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Take quick action that increases your brand's regular profit.</h2>
      <p class="has-mw-2xl subtitle mx-auto mb-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="buttons is-centered"><a class="button is-primary" href="#">Activate your demo</a><a class="button is-dark" href="#">Share with friends</a></div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-8 has-text-centered">
        <span class="has-text-grey-dark">New Feature</span>
        <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Take quick action that increases your brand's regular profit.</h2>
        <p class="subtitle has-text-grey mb-5">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Active Demo</a><a class="button" href="#">Share with your friends</a></div>
      </div>
    </div>
  </div>
</section>

<section class="section pt-12 pt-0-desktop pt-20-tablet is-clipped has-background-white">
  <div class="container is-relative">
    <img class="-mr-64-tablet -mr-24-widescreen-only is-absolute is-block is-hidden-mobile is-bottom-0 is-right-0" style="z-index: 1;" src="asitrastudio-assets/cta/woman-cta-right.png" alt="">
    <div class="has-mw-md mx-auto mx-0-tablet has-mw-xl-tablet has-mw-3xl-widescreen py-36-tablet is-relative">
      <span class="is-block mb-4 is-size-7 has-text-grey has-text-weight-medium">Lorem Ipsum</span>
      <h1 class="title is-size-3-mobile is-size-1-tablet mb-14" style="letter-spacing: -0.04em;">
        <span>Share your travels with</span>
        <span class="is-inline-block has-text-grey-dark" style="line-height: 1; border-bottom: 3px solid #646464;">friends &amp; family</span>
      </h1>
      <div class="buttons is-relative" style="z-index: 10;">
        <a class="button is-primary mr-6-tablet is-rounded" 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="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9 8.83571V1.5H1.66429" stroke="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="button is-outlined is-dark is-rounded" 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>

<section class="section py-12 py-24-tablet py-32-desktop has-background-dark">
  <div class="container">
    <div class="has-mw-xl mx-auto has-text-centered">
      <h3 class="title is-size-2-mobile is-size-1 has-text-white mb-5">Grab 30% Off Today</h3>
      <p class="has-text-grey-lighter mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis. Netus sodales in volutpat.</p>
      <div class="buttons is-centered"><a class="button is-borderless has-background-gradient-primary" href="#">Shop &amp; Save Now</a><a class="button has-background-white has-text-dark" href="#">Explore All</a></div>
    </div>
  </div>
</section>