Call to Action

<section class="w-full bg-gradient-to-b from-gray-100 to-white">
  <div class="w-full px-4 py-20 mx-auto text-left md:text-center md:w-3/4 lg:w-2/4">
    <p class="mb-2 text-base font-semibold text-purple-700">Start your free trial now</p>
    <h2 class="mb-6 text-3xl font-extrabold tracking-tight md:text-4xl md:mb-6 md:leading-tight">Sign up for a free account to organize your customer feedback.</h2>
    <div class="mb-0 space-x-0 md:space-x-2">
      <a class="inline-flex items-center justify-center w-full mb-2 btn btn-primary btn-lg sm:w-auto sm:mb-0" href="#">
        Get Started
        <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </a>
      <a class="inline-flex items-center justify-center w-full mb-2 btn btn-light btn-lg sm:w-auto sm:mb-0" href="#">
        Book a Demo
        <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path
            fill-rule="evenodd"
            d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
            clip-rule="evenodd"
          />
        </svg>
      </a>
    </div>
  </div>
</section>

<section class="grid items-center justify-center grid-cols-1 px-4 py-24 text-center lg:grid-cols-3">
  <div class="col-auto lg:col-start-2">
    <p class="mb-2 text-base font-semibold text-primary">Prices now start at just $25/month*</p>
    <h2 class="mb-6 font-serif text-3xl font-normal tracking-tight md:leading-tight md:text-4xl md:mb-6">Join more than 100,000 small businesses teams.</h2>
    <a href="#" class="w-full shadow-xl btn btn-primary btn-lg sm:w-auto">Get started now</a>
  </div>
</section>

<section class="px-0 py-12 mx-auto max-w-7xl sm:px-4">
  <div class="text-white bg-green-800 border-green-800 rounded-none card card-body sm:rounded-lg">
    <div class="flex flex-col items-center justify-between px-1 py-4 lg:flex-row sm:py-3 sm:px-3">
      <p class="mb-6 text-base font-semibold lg:mb-0">Sleep peacefully knowing that your website is performing at it’s best.</p>
      <a href="#" class="w-full text-green-800 shadow btn btn-white btn-lg sm:w-auto">Start for free</a>
    </div>
  </div>
</section>

<section class="px-0 py-12 mx-auto max-w-7xl sm:px-4">
  <div class="grid items-center grid-cols-1 gap-10 px-4 py-6 overflow-hidden text-pink-900 bg-pink-100 border-pink-100 rounded-none card card-body sm:rounded-lg md:px-10 md:grid-cols-5 lg:gap-0">
    <div class="col-span-1 md:col-span-3">
      <h2 class="mb-3 font-serif text-2xl font-normal leading-tight lg:text-3xl">Sleep peacefully knowing that your website is performing at it’s best.</h2>
      <p class="mb-6 text-sm font-semibold lg:text-base">We deliver a guaranteed number of high-quality new leads every month. Combined with the sales tools to convert them into paying clients.</p>
      <a href="#" class="w-full text-pink-900 shadow btn btn-white btn-lg sm:w-auto">Start for free</a>
    </div>
    <div class="col-span-1 md:col-span-2">
      <img src="/mac.png" class="w-full ml-0 select-none lg:ml-48" alt="Mac App" />
    </div>
  </div>
</section>

<section class="text-white bg-gray-900">
  <div class="flex flex-col items-stretch justify-between px-4 py-20 mx-auto max-w-7xl lg:flex-row sm:items-center">
    <div>
      <h2 class="mb-1 text-xl font-semibold text-left sm:text-2xl sm:text-center lg:text-left">Built for companies of all sizes</h2>
      <p class="mb-6 text-lg font-normal text-left text-gray-200 sm:text-xl lg:mb-0 sm:text-center lg:text-left">Start your 14-day free trial or book a personal demo.</p>
    </div>
    <div class="flex flex-col mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
      <a href="#" class="w-full btn btn-light btn-lg sm:w-auto">Start free trial</a>
      <a href="#" class="w-full btn btn-outline-light btn-lg sm:w-auto">Book a demo</a>
    </div>
  </div>
</section>

<section class="px-4 py-20 bg-gradient-to-r from-white to-purple-100">
  <div class="grid items-center grid-cols-1 gap-4 mx-auto max-w-7xl lg:grid-cols-2 xl:grid-cols-3">
    <div>
      <p class="mb-1 text-base font-medium md:text-xl text-primary">Built for developers</p>
      <h2 class="mb-6 text-3xl font-bold md:leading-tight md:text-4xl md:mb-4">Get started building your internal tool in minutes</h2>
      <div class="flex flex-col mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
        <a href="#" class="w-full shadow btn btn-primary btn-lg sm:w-auto">Get started</a>
        <a href="#" class="w-full btn btn-link btn-lg sm:w-auto">Schedule a demo</a>
      </div>
    </div>
  </div>
</section>