<!-- Start Hero -->
    <section
      class="relative table w-full lg:py-40 md:py-36 pt-36 pb-24 overflow-hidden bg-white"
    >
      <div
        class="absolute inset-0 bg-[url('https://res.cloudinary.com/djunzsydj/image/upload/v1711094683/tailwindsnippets/components/t76wwy2kqrf2cu6ttibt.png')] bg-repeat opacity-10"
      ></div>
      <div
        class="sm:px-4 lg:px-11 xl:px-20 2xl:px-52 sm:py-8 mx-auto relative z-1"
      >
        <div
          class="relative grid lg:grid-cols-12 grid-cols-1 items-center mt-10 gap-[30px]"
        >
          <div class="lg:col-span-7">
            <div class="lg:me-6 lg:text-start text-center">
              <h1
                class="font-bold lg:leading-normal leading-normal text-4xl lg:text-6xl mb-5"
              >
                Beautiful, Interactive <br />

                <span
                  class="bg-gradient-to-tl to-indigo-600 from-red-600 text-transparent bg-clip-text"
                >
                  <span class=""> Hero with Form</span>
                </span>
              </h1>
              <p class="text-lg max-w-xl lg:ms-0 mx-auto">
                Boost your website design process with this stunning hero
                section, which includes a form.
              </p>

              <div class="mt-6 mb-3">
                <form class="relative max-w-md mx-auto lg:ms-0">
                  <div class="relative">
                    <i
                      class="uil uil-envelope text-xl absolute top-3 left-5"
                    ></i>
                    <input
                      type="email"
                      id="aiemail"
                      name="email"
                      class="py-4 pe-40 ps-12 w-full h-[50px] outline-none text-black rounded-md bg-white/60 shadow"
                      placeholder="your email address"
                    />
                  </div>
                  <button
                    type="submit"
                    class="py-2 px-5 inline-block font-semibold tracking-wide align-middle duration-500 text-base text-center absolute top-[2px] end-[3px] h-[46px] bg-indigo-600 hover:bg-indigo-700 border border-indigo-600 hover:border-indigo-700 text-white rounded-md"
                  >
                    Sign Up
                  </button>
                </form>
                <!--end form-->
              </div>
            </div>
          </div>
          <!--end col-->

          <div class="lg:col-span-5">
            <div
              class="relative after:content-[''] after:absolute lg:after:-top-0 after:-top-10 after:-right-32 after:w-[36rem] after:h-[36rem] after:border-2 after:border-dashed after:border-slate-200 after:rounded-full after:animate-[spin_120s_linear_infinite] after:-z-1 before:content-[''] before:absolute lg:before:-top-24 before:-top-36 before:-right-56 before:w-[48rem] before:h-[48rem] before:border-2 before:border-dashed before:border-slate-200 before:rounded-full before:animate-[spin_240s_linear_infinite] before:-z-1"
            >
              <div
                class="relative after:content-[''] after:absolute lg:after:-top-0 after:-top-10 after:-right-40 after:w-[36rem] after:h-[36rem] after:bg-gradient-to-tl after:to-indigo-600/30 after:from-red-600/30 after: after:blur-[200px] after:rounded-full after:-z-1"
              >
                <img
                  src="https://res.cloudinary.com/djunzsydj/image/upload/v1711092749/tailwindsnippets/components/w8qms4gaszwyiuwpqeem.png"
                  class="lg:max-w-none lg:ms-14"
                  alt=""
                />
              </div>
            </div>
          </div>
          <!--end col-->
        </div>
        <!--end grid-->
      </div>
      <!--end container-->
    </section>
    <!--end section-->
    <!-- End Hero -->