Newsletter Components in Casper library

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 right-0 -mt-80 -mr-80 w-148 h-148 bg-gradient-to-t from-violet-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative max-w-8xl mx-auto py-16 px-8 md:px-16 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10">
      <img class="hidden md:block absolute top-0 right-0 mt-24 lg:mt-14 mr-6 lg:mr-40 animate-spinStar" src="casper-assets/newsletter/blink-star.png" alt="">
      <div class="max-w-lg mb-16">
        <h2 class="font-heading text-5xl sm:text-7xl font-medium text-white tracking-tight mb-6">Stay up to Date</h2>
        <p class="text-lg text-gray-400">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div class="flex items-center">
            <img class="block w-18 h-18" src="casper-assets/newsletter/avatar.png" alt="">
            <div class="ml-8">
              <span class="block text-5xl font-medium text-white leading-none">50%</span>
              <span class="block text-lg text-gray-500 leading-none">Nunc et tellus non erat aliquam eget non mi.</span>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md">
            <span class="block mb-2 text-sm font-medium text-white leading-snug">Email</span>
            <div class="sm:flex mb-5">
              <input class="block w-full mb-4 sm:mb-0 sm:mr-3 py-2 px-3 h-11 bg-gray-800 border border-gray-700 focus:border-violet-500 rounded-lg text-sm placeholder-gray-500 text-white outline-none" type="email" placeholder="casper@shuffle.dev">
              <button class="sm:flex-shrink-0 flex w-full sm:w-auto h-11 py-2 px-5 items-center justify-center text-sm font-medium uppercase text-black hover:text-white bg-violet-500 hover:bg-violet-600 transition duration-200 rounded-full" type="submit">
                <span class="mr-2">Submit</span>
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="currentColor"></path>
                </svg>
              </button>
            </div>
            <label class="custom-checkbox flex items-center relative h-8 cursor-pointer">
              <p class="inline-block ml-6 text-sm text-gray-400">
                <span>I agree with</span>
                <a class="inline-block text-sky-900 hover:text-violet-500" href="#">Privacy Policy</a>
                <span>and</span>
                <a class="inline-block text-sky-900 hover:text-violet-500" href="#">Terms of Conditions</a>
              </p>
              <input class="absolute top-0 left-0 transform translate-y-1/2 w-4 h-4 opacity-0" type="checkbox" checked="">
              <span class="custom-check absolute top-0 left-0 transform translate-y-1/2 flex h-4 w-4 items-center justify-center bg-violet-400 border border-violet-700 rounded">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4733 4.80667C12.4114 4.74418 12.3376 4.69458 12.2564 4.66074C12.1752 4.62689 12.088 4.60947 12 4.60947C11.912 4.60947 11.8249 4.62689 11.7436 4.66074C11.6624 4.69458 11.5886 4.74418 11.5267 4.80667L6.56001 9.78L4.47334 7.68667C4.40899 7.62451 4.33303 7.57563 4.2498 7.54283C4.16656 7.51003 4.07768 7.49394 3.98822 7.49549C3.89877 7.49703 3.8105 7.51619 3.72844 7.55185C3.64639 7.58751 3.57217 7.63898 3.51001 7.70333C3.44785 7.76768 3.39897 7.84364 3.36617 7.92688C3.33337 8.01011 3.31728 8.099 3.31883 8.18845C3.32038 8.2779 3.33953 8.36618 3.37519 8.44823C3.41085 8.53028 3.46233 8.60451 3.52667 8.66667L6.08667 11.2267C6.14865 11.2892 6.22238 11.3387 6.30362 11.3726C6.38486 11.4064 6.472 11.4239 6.56001 11.4239C6.64802 11.4239 6.73515 11.4064 6.81639 11.3726C6.89763 11.3387 6.97137 11.2892 7.03334 11.2267L12.4733 5.78667C12.541 5.72424 12.595 5.64847 12.632 5.56414C12.6689 5.4798 12.688 5.38873 12.688 5.29667C12.688 5.2046 12.6689 5.11353 12.632 5.02919C12.595 4.94486 12.541 4.86909 12.4733 4.80667Z" fill="currentColor"></path>
                </svg>
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n24 mt-n80" src="casper-assets/blur/blur-center-right-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-xl mx-auto mw-lg-none py-12 py-md-16 px-8 px-md-20 px-lg-16 border border-2 border-primary-dark bg-white bg-opacity-10 rounded" style="backdrop-filter: blur(10px);">
      <div class="row">
        <div class="col-lg-6 mb-10 mb-lg-0">
          <div>
            <h2 class="font-heading fw-medium text-white mb-6">Stay up to Date</h2>
            <p class="mw-lg fs-6 text-light-light mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
            <div class="d-flex flex-column flex-sm-row align-items-sm-center">
              <div class="flex-shrink-0" style="width: 72px; height: 72px;"><img class="img-fluid" src="casper-assets/newsletter/avatar.png" alt=""/></div>
              <div class="mt-6 mt-sm-0 ms-sm-9"><span class="display-2 text-white fw-medium">50%</span>
                <p class="fs-6 text-light-light mb-0">Nunc et tellus non erat aliquam eget non mi.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-md ms-lg-auto"><img class="img-fluid d-block ms-auto me-24 mb-10 mb-sm-16 animate-spinStar" src="casper-assets/newsletter/blink-star.png" alt=""/>
            <div>
              <label class="form-label text-white" for="">Email</label>
              <div class="d-flex flex-column flex-sm-row mb-5 align-items-sm-end">
                <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="pat@saturn.dev"/>
                <button class="flex-shrink-0 mt-4 mt-sm-0 ms-sm-3 btn btn-sm px-5 py-2 btn-primary text-black" type="submit"><span class="me-1">Submit</span>
                  <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="black"></path>
                  </svg>
                </button>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value=""/>
                <label class="form-check-label ms-2 text-light-light"><span>I agree with</span><a class="d-inline-block text-info" href="#">Privacy Policy</a><span>and</span><a class="d-inline-block text-info" href="#">Terms of Conditions</a></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>