Footers Components in Filytreck library

<section class="pt-24 bg-black">
    <div class="container mx-auto px-4">
        <img class="mb-16 h-9" src="fily-assets/logos/fily-treck-white-logo.svg" alt="">
        <div class="flex flex-wrap items-center -m-10 pb-20">
            <div class="w-full md:w-1/2 xl:w-1/3 p-10">
                <div class="h-full p-px bg-gradient-white overflow-hidden rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                        <div class="relative h-full py-12 px-10">
                            <h2 class="mb-4 font-heading text-3xl font-bold text-white">Subscribe to our newsletter</h2>
                            <p class="mb-10 text-lg text-gray-500 font-medium leading-relaxed">Duis pellentesque urna a erat sollicitudin, et molestie leo semper</p>
                            <div class="relative p-1.5 bg-transparent border border-gray-500 focus-within:ring focus-within:ring-blue-200 rounded-2xl md:rounded-full transiiton duration-200">
                                <div class="relative">
                                    <input id="footers-input-01-1" type="text" class="py-3 px-6 sm:pr-14 w-full text-gray-500 placeholder-gray-500 font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
                                    <a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center w-full md:w-12 h-12 md:h-full text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl md:rounded-full transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold">Product</h3>
                <ul>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Time Tracking</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Task Management</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Kanban Board</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Team Collaboration</a></li>
                    <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Team Scheduling</a></li>
                </ul>
            </div>
            <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold">Use Cases</h3>
                <ul>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Creative &amp; Marketing</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Software &amp; Engineering</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Architecture firms</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Consulting businesses</a></li>
                    <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Educational institutions</a></li>
                </ul>
            </div>
            <div class="w-full sm:w-1/2 xl:flex-1 p-10">
                <h3 class="mb-8 font-heading text-2xl text-white font-bold">Resources</h3>
                <ul>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Kanban Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Timesheet Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Gantt Chart Software</a></li>
                    <li class="mb-6"><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Time Tracking Apps</a></li>
                    <li><a href="#" class="text-lg text-gray-500 hover:text-gray-600 font-medium transition duration-200">Project Tracker</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bg-white bg-opacity-5">
        <div class="container mx-auto px-4">
            <div class="py-6">
                <div class="flex flex-wrap justify-between -m-2">
                    <div class="w-auto p-2">
                        <p class="text-gray-500 font-medium">© Shuffle 2023. All rights reserved.</p>
                    </div>
                    <div class="w-auto p-2">
                        <ul class="flex flex-wrap gap-4">
                            <li><a href="#" class="text-gray-500 hover:text-gray-600 font-medium transition duration-200">Terms</a></li>
                            <li><a href="#" class="text-gray-500 hover:text-gray-600 font-medium transition duration-200">Privacy Policy</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pt-12 pt-lg-24 bg-dark">
  <div class="mw-8xl mx-auto px-5 mb-12 mb-xl-20"><a class="d-inline-block mb-16" href="#"><img class="img-fluid" src="fily-assets/logos/fily-treck-white-logo.svg" alt=""></a>
    <div class="row">
      <div class="col-xl-4 mt-12 mt-xl-0 order-last order-xl-first">
        <div class="overflow-hidden mw-sm mx-auto mx-xl-0">
          <div class="position-relative bg-light rounded-3" style="padding: 1px;">
            <div class="position-absolute bottom-0 start-0 w-100 py-40 bg-shadow-bottom"></div>
            <div class="position-relative bg-dark px-6 px-sm-10 py-12 rounded-3">
              <h4 class="font-heading text-white mb-4">Subscribe to our newsletter</h4>
              <p class="fw-medium text-light-dark mb-10">Duis pellentesque urna a erat sollicitudin, et molestie leo semper</p>
              <form action="">
                <div class="position-relative">
                  <input class="form-control ps-6 py-4 bg-transparent text-white border border-light-dark" type="email">
                  <button class="position-absolute top-50 end-0 me-1 translate-middle-y btn btn-primary p-0 d-flex align-items-center justify-content-center" type="submit" style="width: 48px; height: 48px;">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.51348 1.71443C6.4457 1.78417 6.39189 1.86715 6.35518 1.95857C6.31846 2.04999 6.29956 2.14804 6.29956 2.24708C6.29956 2.34612 6.31846 2.44417 6.35518 2.53559C6.39189 2.62701 6.4457 2.70999 6.51348 2.77973L8.89286 5.24793L1.66071 5.24793C1.46891 5.24793 1.28495 5.32697 1.14932 5.46766C1.0137 5.60835 0.9375 5.79917 0.9375 5.99814C0.9375 6.19711 1.0137 6.38793 1.14932 6.52862C1.28495 6.66931 1.46891 6.74835 1.66071 6.74835L8.89286 6.74835L6.51348 9.21654C6.4457 9.28629 6.3919 9.36926 6.35518 9.46068C6.31846 9.5521 6.29956 9.65016 6.29956 9.74919C6.29956 9.84823 6.31846 9.94629 6.35518 10.0377C6.3919 10.1291 6.4457 10.2121 6.51348 10.2818C6.64899 10.4216 6.83229 10.5 7.02335 10.5C7.21441 10.5 7.39771 10.4216 7.53322 10.2818L10.6358 7.05593C10.9074 6.77584 11.0609 6.39543 11.0625 5.99814C11.059 5.60345 10.9057 5.22609 10.6358 4.94784L7.53322 1.72193C7.39867 1.5812 7.21591 1.50142 7.02484 1.50002C6.83378 1.49861 6.64994 1.5757 6.51348 1.71443Z" fill="white"></path>
                    </svg>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-8">
        <div class="mw-xl-4xl ms-xl-auto">
          <div class="row">
            <div class="col-sm-6 col-md-4 mb-10 mb-md-0 ms-lg-auto">
              <h5 class="text-white fw-bold mb-8">Product</h5>
              <ul class="list-unstyled">
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Time Tracking</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Task Management</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Kanban Board</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Team Collaboration</a></li>
                <li><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Team Scheduling</a></li>
              </ul>
            </div>
            <div class="col-sm-6 col-md-4 mb-10 mb-md-0">
              <h5 class="text-white fw-bold mb-8">Use Cases</h5>
              <ul class="list-unstyled">
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Creative &amp; Marketing</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Software &amp; Engineering</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Architecture firms</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Consulting businesses</a></li>
                <li><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Educational institutions</a></li>
              </ul>
            </div>
            <div class="col-md-4">
              <h5 class="text-white fw-bold mb-8">Resources</h5>
              <ul class="list-unstyled">
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Kanban Software</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Timesheet Software</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Gantt Chart Software</a></li>
                <li class="mb-6"><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Time Tracking Apps</a></li>
                <li><a class="d-inline-block fs-7 fw-medium text-secondary" href="#">Project Tracker</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="py-5 bg-light-dark bg-opacity-10">
    <div class="mw-8xl mx-auto px-5">
      <div class="d-flex flex-wrap gap-6 align-items-center justify-content-between"><span class="text-secondary fw-medium">© Shuffle 2023. All rights reserved.</span>
        <div class="d-flex align-items-center"><a class="d-inline-block me-4 fw-medium text-secondary" href="#">Terms</a><a class="d-inline-block fw-medium text-secondary" href="#">Privacy Policy</a></div>
      </div>
    </div>
  </div>
</section>