Footers Components in Acros library

<section class="section pt-20 pb-0 has-background-grey-darker">
  <div class="container">
    <div class="columns mb-0" style="border-bottom: 1px solid rgba(255,255,255,0.15)">
      <div class="column is-4 mb-12 mb-0-tablet mb-20-tablet">
        <a class="is-block mb-4 title is-size-4 has-text-white" href="#">
          <img src="acros-assets/logo/logo-acros-white.svg" alt="" width="auto">
        </a>
        <ul class="mb-8">
          <li class="mb-2">
            <a class="title is-size-6 is-flex is-align-items-center has-text-white" href="#">
              <img class="mr-3" src="acros-assets/icons/footers/contact.svg" alt="">
              <span>+44 20 6024 2068</span>
            </a>
          </li>
          <li>
            <a class="title is-size-6 is-flex is-align-items-center has-text-white" href="#">
              <img class="mr-3" src="acros-assets/icons/footers/email.svg" alt="">
              <span>office@neonic.co</span>
            </a>
          </li>
        </ul>
        <ul class="is-flex">
          <li>
            <a href="#">
              <img src="acros-assets/logo/facebook.svg" alt="">
            </a>
          </li>
          <li class="ml-2">
            <a href="#">
              <img src="acros-assets/logo/twitter.svg" alt="">
            </a>
          </li>
          <li class="ml-2">
            <a href="#">
              <img src="acros-assets/logo/instagram.svg" alt="">
            </a>
          </li>
          <li class="ml-2">
            <a href="#">
              <img src="acros-assets/logo/github.svg" alt="">
            </a>
          </li>
          <li class="ml-2">
            <a href="#">
              <img src="acros-assets/logo/linkedin.svg" alt="">
            </a>
          </li>
        </ul>
      </div>
      <div class="column is-8">
        <div class="columns">
          <div class="column is-3 mb-4 mb-0-tablet">
            <h5 class="mb-8 title is-size-5 has-text-white">Pages</h5>
            <ul>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">About us</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Careers</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Press</a></li>
              <li><a class="title is-size-6 has-text-white" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="column is-3 mb-4 mb-0-tablet">
            <h5 class="mb-8 title is-size-5 has-text-white">Pricing</h5>
            <ul>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Login</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Register</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Add list</a></li>
              <li><a class="title is-size-6 has-text-white" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="column is-3 mb-4 mb-0-tablet">
            <h5 class="mb-8 title is-size-5 has-text-white">Resources</h5>
            <ul>
              <li class="mb-6"><a class="title is-size-6 has-text-white">Blog</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white">Service</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white">Product</a></li>
              <li><a class="title is-size-6 has-text-white" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="column is-3 mb-4 mb-0-tablet">
            <h5 class="mb-8 title is-size-5 has-text-white">Legal</h5>
            <ul>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Terms</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">About us</a></li>
              <li class="mb-6"><a class="title is-size-6 has-text-white" href="#">Team</a></li>
              <li><a class="title is-size-6 has-text-white" href="#">Privacy</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="is-flex is-justify-content-space-between py-10">
      <p class="mb-0 title is-size-6 has-text-white">2021 &copy; Shuffle</p>
      <a class="title is-size-6 has-text-white">Go to up</a>
    </div>
  </div>
</section>

<section class="py-24 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 pb-20">
      <div class="w-full lg:w-2/6 px-4 mb-16 lg:mb-0">
        <div>
          <h4 class="font-heading text-lg text-white mb-6">Company</h4>
          <div class="flex items-center mb-2">
            <div class="flex items-center justify-center w-10 h-10 mr-3 border border-gray-500 rounded-full">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.993636 2.24838C1.20452 1.89921 2.36641 0.629197 3.19556 0.667537C3.44341 0.688076 3.66251 0.838013 3.84053 1.01191C4.24928 1.41106 5.41939 2.9207 5.48581 3.23837C5.64739 4.01749 4.71897 4.46662 5.00311 5.25191C5.7275 7.02445 6.97566 8.27255 8.74898 8.99622C9.53362 9.28034 9.98277 8.35197 10.7619 8.51423C11.0789 8.58064 12.5893 9.75069 12.9885 10.1594C13.1617 10.3367 13.3124 10.5565 13.3329 10.8044C13.3637 11.6773 12.0149 12.8555 11.752 13.0062C11.1317 13.4498 10.3224 13.4423 9.33575 12.9836C6.58266 11.8382 2.18292 7.5215 1.01623 4.66448C0.56982 3.68339 0.53901 2.86866 0.993636 2.24838Z" fill="#00CBA6"></path>
              </svg>
            </div>
            <span class="font-heading text-white">+44 20 6024 2068</span>
          </div>
          <div class="flex items-center mb-8">
            <div class="flex items-center justify-center w-10 h-10 mr-3 border border-gray-500 rounded-full">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.59183 2.33337H10.8771C11.7834 2.34354 12.6459 2.72666 13.2639 3.39351C13.8819 4.06036 14.2014 4.95273 14.1479 5.86279V10.2147C14.2014 11.1248 13.8819 12.0171 13.2639 12.684C12.6459 13.3508 11.7834 13.734 10.8771 13.7441H4.59183C2.64523 13.7441 1.33325 12.1605 1.33325 10.2147V5.86279C1.33325 3.91701 2.64523 2.33337 4.59183 2.33337Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5118 6.04077L8.66819 8.33029C8.13004 8.7522 7.37566 8.7522 6.83752 8.33029L3.96948 6.04077" stroke="#1F2E3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <span class="font-heading text-white">office@neonic.co</span>
          </div>
          <div class="flex items-center">
            <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
                <mask id="mask0_37_110" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="7" height="12">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
                <mask id="mask0_37_113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="13" height="11">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                <mask id="mask0_37_116" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 2C4.685 2 2 4.75474 2 8.15226C2 10.871 3.719 13.1765 6.1025 13.9894C6.4025 14.0473 6.5125 13.8569 6.5125 13.6936C6.5125 13.5475 6.5075 13.1604 6.505 12.6475C4.836 13.0184 4.484 11.8221 4.484 11.8221C4.211 11.112 3.8165 10.9221 3.8165 10.9221C3.273 10.5407 3.8585 10.5486 3.8585 10.5486C4.461 10.5913 4.7775 11.1825 4.7775 11.1825C5.3125 12.1232 6.182 11.8513 6.525 11.6943C6.579 11.2962 6.7335 11.0254 6.905 10.8715C5.5725 10.7176 4.172 10.1886 4.172 7.83139C4.172 7.15992 4.4045 6.61106 4.7895 6.18063C4.722 6.02516 4.5195 5.3996 4.842 4.55231C4.842 4.55231 5.3445 4.38744 6.492 5.18308C6.972 5.04639 7.482 4.97856 7.992 4.97543C8.502 4.97856 9.012 5.04639 9.492 5.18308C10.632 4.38744 11.1345 4.55231 11.1345 4.55231C11.457 5.3996 11.2545 6.02516 11.1945 6.18063C11.577 6.61106 11.8095 7.15992 11.8095 7.83139C11.8095 10.1948 10.407 10.715 9.072 10.8663C9.282 11.051 9.477 11.4282 9.477 12.0047C9.477 12.828 9.4695 13.4896 9.4695 13.6894C9.4695 13.8506 9.5745 14.0431 9.882 13.9816C12.2825 13.1739 14 10.8668 14 8.15226C14 4.75474 11.3135 2 8 2V2Z" fill="white"></path>
              </svg>
            </a>
            <a class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.8 2H3.2C2.54 2 2 2.54 2 3.2V12.8C2 13.46 2.54 14 3.2 14H12.8C13.46 14 14 13.46 14 12.8V3.2C14 2.54 13.46 2 12.8 2ZM5.6 12.2H3.8V6.8H5.6V12.2ZM4.7 5.78C4.1 5.78 3.62 5.3 3.62 4.7C3.62 4.1 4.1 3.62 4.7 3.62C5.3 3.62 5.78 4.1 5.78 4.7C5.78 5.3 5.3 5.78 4.7 5.78ZM12.2 12.2H10.4V9.02C10.4 8.54002 9.98 8.12 9.5 8.12C9.02 8.12 8.6 8.54002 8.6 9.02V12.2H6.8V6.8H8.6V7.52C8.9 7.04 9.56 6.68 10.1 6.68C11.24 6.68 12.2 7.64 12.2 8.78V12.2Z" fill="white"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-8 md:mb-0">
        <h4 class="font-heading text-lg text-white mb-8">Pages</h4>
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">About us</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Careers</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Press</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Blog</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-8 md:mb-0">
        <h4 class="font-heading text-lg text-white mb-8">Products</h4>
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Login</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Register</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Add list</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-8 sm:mb-0">
        <h4 class="font-heading text-lg text-white mb-8">Resources</h4>
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Blog</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Service</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Product</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4">
        <h4 class="font-heading text-lg text-white mb-8">Legal</h4>
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Terms</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">About us</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Team</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Privacy</a></li>
        </ul>
      </div>
    </div>
    <div class="flex justify-between items-cneter pt-10 border-t border-gray-600">
      <span class="font-heading text-white">2022 © Shuffle</span>
      <a class="font-heading text-white hover:text-gray-100" href="#">Go to up</a>
    </div>
  </div>
</section>