Footers Components in Nightsable library

<section class="bg-gray-50 overflow-hidden">
  <div class="py-14 bg-black rounded-b-7xl"></div>
  <div class="py-24">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap justify-center -m-8 mb-28">
        <div class="w-full md:w-1/2 lg:w-4/12 p-8">
          <div class="md:max-w-xs">
            <img class="mb-7" src="nightsable-assets/logos/logo-dark.svg" alt="">
            <p class="text-gray-400 font-medium">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 text-lg text-black font-medium">About</h3>
          <ul>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Contact</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Blog</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Our Story</a></li>
            <li><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Careers</a></li>
          </ul>
        </div>
        <div class="w-full md:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 text-lg text-black font-medium">Company</h3>
          <ul>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Contact</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Blog</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Our Story</a></li>
            <li><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Careers</a></li>
          </ul>
        </div>
        <div class="w-full md:w-1/2 lg:flex-1 p-8">
          <div class="flex flex-wrap -m-2">
            <div class="w-full p-2">
              <a class="block py-5 px-8 bg-white rounded-full" href="#">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <img src="nightsable-assets/images/footers/twitter.svg" alt="">
                  </div>
                  <div class="flex-1 p-2">
                    <p class="text-black">Follow us on Twitter for updates</p>
                  </div>
                </div>
              </a>
            </div>
            <div class="w-full p-2">
              <a class="block py-5 px-8 bg-white rounded-full" href="#">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <img src="nightsable-assets/images/footers/instagram.svg" alt="">
                  </div>
                  <div class="flex-1 p-2">
                    <p class="text-black">Follow us on Instagram for updates</p>
                  </div>
                </div>
              </a>
            </div>
            <div class="w-full p-2">
              <a class="block py-5 px-8 bg-white rounded-full" href="#">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <img src="nightsable-assets/images/footers/tiktok.svg" alt="">
                  </div>
                  <div class="flex-1 p-2">
                    <p class="text-black">Follow us on TikTok for updates</p>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-auto p-2">
          <p class="inline-block text-sm font-medium text-black text-opacity-60">© 2023 Nightsablestudio.co</p>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-2 sm:-m-7">
            <div class="w-auto p-2 sm:p-7"><a class="inline-block text-sm text-black text-opacity-60 hover:text-opacity-100 font-medium transition duration-300" href="#">Terms of Use</a></div>
            <div class="w-auto p-2 sm:p-7"><a class="inline-block text-sm text-black text-opacity-60 hover:text-opacity-100 font-medium transition duration-300" href="#">Privacy Policy</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-white position-relative overflow-hidden">
  <div class="pb-24 bg-light-light">
    <div class="d-flex justify-content-center mb-12 mb-md-24">
      <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="111" viewBox="0 0 1440 111" fill="none">
        <path d="M0 -571H1440V31C1440 75.1828 1404.18 111 1360 111H80C35.8173 111 0 75.1828 0 31V-571Z" fill="#0E0F11"></path>
      </svg>
    </div>
    <div class="container">
      <div class="mw-md mw-md-3xl mx-auto mw-xl-none">
        <div class="row mb-24">
          <div class="col-xl-3 mb-12 mb-xl-0">
            <div class="mw-xs"><img class="img-fluid mb-7" src="nightsable-assets/logos/logo-dark.svg" alt="">
              <p class="pe-10 text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
            </div>
          </div>
          <div class="col-md-6 col-xl-5 mb-12 mb-md-0">
            <div class="d-flex gap-24 gap-xl-10 justify-content-xl-around">
              <div>
                <h6 class="mb-6 fs-7 fw-medium text-black">About</h6>
                <ul class="list-unstyled mb-0">
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Contact</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Blog</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Our Storry</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Careers</a></li>
                </ul>
              </div>
              <div>
                <h6 class="mb-6 fs-7 fw-medium text-black">Company</h6>
                <ul class="list-unstyled mb-0">
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Press</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Brand Assets</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Changelog</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Help centre</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-xl-4">
            <div class="mw-sm ms-lg-auto"><a class="btn d-flex w-100 mb-4 bg-white" href="#"><img class="img-fluid" src="nightsable-assets/images/footers/twitter.svg" alt=""><span class="ms-4 text-secondary">Follow us on Twitter for updates</span></a><a class="btn d-flex w-100 mb-4 bg-white" href="#"><img class="img-fluid" src="nightsable-assets/images/footers/instagram.svg" alt=""><span class="ms-4 text-secondary">Follow us on Instagram for updates</span></a><a class="btn d-flex w-100 mb-4 bg-white" href="#"><img class="img-fluid" src="nightsable-assets/images/footers/tiktok.svg" alt=""><span class="ms-4 text-secondary">Follow us on TikTok for updates</span></a></div>
          </div>
        </div>
        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between"><span class="d-inline-block mb-6 mb-sm-0 fs-9 fw-medium text-secondary-light">© 2023 Nightsablestudio.co</span>
          <div><a class="btn btn-link me-14 p-0 fs-9 fw-medium text-secondary-light" href="#">Terms of Use</a><a class="btn btn-link p-0 fs-9 fw-medium text-secondary-light" href="#">Privacy Policy</a></div>
        </div>
      </div>
    </div>
  </div>
</section>