Hero sections

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto">
        <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:pb-28 xl:pb-32">
            <svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-68 text-white transform translate-x-1/2" fill="currentColor" viewbox="0 0 100 100" preserveaspectratio="none" aria-hidden="true">
                <polygon points="50,0 50,0 50,100 100,100"></polygon>
            </svg>
             <main>
                <div class="relative pt-6 px-4 sm:px-6 lg:px-8">
                    <div class="sm:text-center lg:text-left">
                        <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
                            <span class="block xl:inline">{{ cms_heading('hero-1') }}</span>
                            <span class="block text-green-600 xl:inline">{{ cms_heading('hero-2') }}</span>
                        </h1>
                        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
                            {{ cms_text('hero-text-1') }}
                        </p>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
        <!-- image using blutui assets -->
        <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="" alt="">
    </div>
</div>
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white">
  <div class="w-full flex flex-col">
    <div class="block max-w-screen-2xl w-full mx-auto pt-12 sm:pt-20 pb-12">
      <div class="sm:w-1/2 pl-6 pr-12">
        <div class="max-w-xl text-cyber-yellow-500">
          <h1 id="hero-heading" class="text-4xl sm:text-7xl font-black tracking-tight">
          {{ cms_heading('hero-1') }}
          </h1>
          <p id="hero-copy" class="my-6 text-lg sm:text-2xl text-black">
           {{ cms_text('hero-text-1') }}
          </p>
        </div>
      </div>
    </div>
    <div class="bg-green-600 py-8 sm:py-12">
      <div class="max-w-screen-2xl mx-auto">
        <div class="sm:w-1/2 pl-6 pr-6 sm:pr-12">
          <div class="max-w-xl">
            <h3 class="text-xl flex items-start sm:items-center font-bold tracking-tight text-white">
              <span class="ml-2">
                 {{ cms_text('hero-text-2') }}
              </span>
            </h3>
          </div>
        </div>
      </div>
    </div>
    <div class="relative block sm:hidden">
      <div class="h-full ">
      <!-- image using blutui assets -->
        <img class="object-cover w-full h-full" src="" alt="">
      </div>
    </div>
  </div>
  <div class="hidden sm:block absolute inset-y-0 right-0 w-full sm:w-1/2 bg-gray-900">
    <div class="h-full ">
    <!-- image using blutui assets -->
      <img class="object-cover w-full h-full" src="" alt="">
    </div>
  </div>
</div>
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="p-10">
    <div class="rounded-2xl grid grid-cols-5 shadow-xl">
        <div class="col-span-5 lg:col-span-2 rounded-tl-2xl rounded-tr-2xl p-5">
            <h1 class="text-3xl md:text-6xl font-bold text-gray-900">{{ cms_heading('hero-1') }}</h1>
            <p class="text-gray-500 mt-4 md:text-xl">
                {{ cms_text('hero-text-1') }}
            </p>
            <div class="flex gap-5 md:flex-row flex-col pt-4 text-xl">
                {{ cms_button('hero-button-1',{'theme': 'bg-gray-50 text-gray-600 rounded-xl md:w-auto px-5 py-3 shadow-inner'}) }}
                {{ cms_button('hero-button-2',{'theme': 'text-gray-600 rounded-xl md:w-auto px-5 py-3 shadow-inner'}) }}
            </div>
        </div>
        <div class="col-span-5 lg:col-span-3">
        <!-- image using blutui assets -->
            <img class="object-center object-cover md:rounded-bl-none md:rounded-tr-2xl  rounded-bl-2xl rounded-br-2xl" src="" alt="">
        </div>
    </div>
</div>
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="p-10">
    <div class="bg-gradient-to-r from-green-400 to-green-800 rounded-tl-3xl rounded-br-3xl py-20 px-5">
        <div class="flex justify-center items-center">
            <div class="text-white">
                <h1 class="text-5xl font-bold">{{ cms_heading('hero-1') }}</h1>
                <p class="text-xl mt-4 ">{{ cms_text('hero-text-1') }}</p>
                {{ cms_button('hero-button-1',{'theme': 'mt-4 rounded-xl md:w-auto px-5 py-3 shadow-xl bg-white text-green-500'}) }}
            </div>
        </div>
    </div>
</div>