<div class="w-full">
  <div class="relative pt-16pb-3 flex content-center items-center justify-center min-h-screen-75 ">
    <div class="absolute top-0 w-full h-full bg-center bg-cover" style="
      background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1267&amp;q=80');
      ">
      <span class="w-full h-full absolute opacity-75 bg-black"></span>
    </div>
    <div class="container relative mx-auto">
      <div class="items-center flex flex-wrap">
        <div class="w-full lg:w-7/12 px-4 ml-auto mr-auto text-center">
          <div class="">
            <h1 class="text-white font-semibold text-5xl">
              Your story starts with us.
            </h1>
            <p class="mt-4 text-lg text-blueGray-300">
              This is a simple example of a Landing Page you can build using
              Notus Design System PRO. It features multiple CSS components based on the
              Tailwind CSS design system.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full absolute top-auto bottom-0">
      <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px)">
        <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
          <polygon class="text-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon>
        </svg>
      </div>
    </div>
  </div>
</div>

<div class="w-full">
  <div class="p-0 flex items-center overflow-hidden relative bg-black min-h-screen-75">
    <div class="absolute w-full bg-indigo-500 h-full z-1 opacity-30 top-0 left-0"></div>
    <video playsinline="" autoplay="" loop="" class="absolute min-w-full max-w-none min-h-full z-0 transform -translate-x-1/2 -translate-y-1/2 top-7/20 left-1/2">
      <source src="../../assets/videos/Lights - 26607.mp4" type="video/mp4">
    </video>
    <div class="container mx-auto px-4">
      <div class="relative text-center flex flex-wrap -mx-4 z-1">
        <div class="mx-auto px-4 relative w-full lg:w-8/12">
          <h1 class="text-4xl font-semibold leading-tight text-white">Welcome to our most special company</h1>
          <h4 class="mt-2 text-lg text-white opacity-75 mb-8">We’re not always in the position that we want to be at. We’re constantly growing! When you're home, is different, since your parents are helping you.</h4>
          <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-orange-500 border-orange-500 active:bg-orange-600 active:border-orange-600 text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg"><i class="fas fa-play mr-2"></i>Get in contact</button>
        </div>
      </div>
    </div>
    <div class="w-full absolute text-white bottom-0 z-1">
      <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);">
        <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
          <polygon class="text-white fill-current" points="2560 0 2560 100 0 100"></polygon>
        </svg>
      </div>
    </div>
  </div>
</div>

<div class="w-full">
  <div class="p-0 flex items-center overflow-hidden min-h-screen-75">
    <div class="container mx-auto px-4">
      <div class="items-center text-left flex flex-wrap -mx-4">
        <div class="px-4 relative w-full lg:w-6/12">
          <h1 class="text-4xl font-bold leading-tight">Design with us, speed your development...</h1>
          <p class="mt-4 mb-4 text-xl leading-relaxed text-blueGray-400">We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation.</p>
          <div class="flex flex-wrap -mx-4 mt-8">
            <div class="px-4 pr-2 relative w-full sm:w-8/12">
              <div class="mb-3 pt-0"><input placeholder="Your email here" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
            </div>
            <div class="px-4 pl-0 relative w-full sm:w-4/12"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Join us</button></div>
          </div>
        </div>
        <div class="px-4 relative w-full lg:w-6/12"><img src="https://demos.creative-tim.com/notus-pro-react/static/media/example-17.76927438.svg" class="w-full lg:ml-12" alt="..."></div>
      </div>
    </div>
  </div>
</div>