Responsive Footer with Contact CTA and Link Columns

<section class="sm:py-16 fade-in-up animate border-black/10 border-t pt-12 pb-0 max-w-6xl">
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10">
    <div class="lg:col-span-6">
      <h3 class="uppercase leading-[1.05] tracking-tight font-semibold text-[28px] sm:text-[36px] lg:text-[48px]">Have
        any project idea? Contact Sakura</h3>
      <div class="mt-6">
        <button class="text-lg" style="border: 1px solid black; padding: 12px 30px; border-radius: 30px; background-color: rgb(250, 112, 250); font-weight: bolder; font-size: 15px; box-shadow: 0px 0px 1px; cursor: pointer; display: flex; align-items: center; justify-content: center; transform: translateY(0px);" onmouseover="this.style.transform='translateY(-10px)'; this.style.boxShadow='0px 7px 1px rgb(0, 0, 0)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0px 0px 1px'" onmousedown="this.style.transform='translateY(10px)'; this.style.boxShadow='0px 0px 1px'" onmouseup="this.style.transform='translateY(-10px)'; this.style.boxShadow='0px 7px 1px rgb(0, 0, 0)'">Contact Now</button>
      </div>
    </div>
    <div class="lg:col-span-6 grid grid-cols-2 sm:grid-cols-4 gap-4">
      <div class="fade-in-up stagger-delay-1 animate">
        <div class="text-sm font-semibold tracking-tight mb-3">Main Pages</div>
        <ul class="space-y-2 text-black/70 text-sm">
          <li class=""><a href="#" class="hover:text-black">Home</a></li>
          <li><a href="#" class="hover:text-black">About</a></li>
          <li><a href="#" class="hover:text-black">Projects</a></li>
        </ul>
      </div>
      <div class="fade-in-up stagger-delay-2 animate">
        <div class="text-sm font-semibold tracking-tight mb-3">Utility Pages</div>
        <ul class="space-y-2 text-black/70 text-sm">
          <li class=""><a href="#" class="hover:text-black">Licenses</a></li>
          <li class=""><a href="#" class="hover:text-black">404 Page</a></li>
        </ul>
      </div>
      <div class="fade-in-up stagger-delay-3 animate">
        <div class="text-sm font-semibold tracking-tight mb-3">More Pages</div>
        <ul class="space-y-2 text-black/70 text-sm">
          <li class=""><a href="#" class="hover:text-black">Services</a></li>
          <li><a href="#" class="hover:text-black">Blog</a></li>
          <li class=""><a href="#" class="hover:text-black">Contact</a></li>
        </ul>
      </div>
      <div class="fade-in-up stagger-delay-4 animate">
        <div class="text-sm font-semibold tracking-tight mb-3">Socials</div>
        <ul class="space-y-2 text-black/70 text-sm">
          <li class=""><a href="#" class="hover:text-black">Instagram</a></li>
          <li class=""><a href="#" class="hover:text-black">Twitter</a></li>
          <li><a href="#" class="hover:text-black">LinkedIn</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="border-t border-black/10 mt-10 pt-6">
    <p class="text-center text-black/70 text-sm">© 2025 SAKURA. All rights reserved.</p>
  </div>
</section>