Responsive Tailwind Footer with Contact & CTA

<footer class="relative mt-10 mb-8">
  <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
    <div class="relative">
      <div class="absolute inset-0 pointer-events-none">
        <div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
      </div>
      <div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
        <div class="grid gap-8 lg:grid-cols-4 md:grid-cols-2">
          <!-- Company Info -->
          <div class="lg:col-span-1">
            <a href="#" aria-label="Lala"
              class="inline-flex items-center justify-center h-[40px] w-[120px] bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/37623fdd-ceb4-464d-a301-ff8b1166efc4_800w.jpg)] bg-cover rounded mix-blend-multiply invert"></a>
            <p class="mt-4 text-sm text-black/70 font-geist">
              Professional cleaning services for homes and offices. Trusted by thousands of customers.
            </p>
            <div class="mt-6 flex gap-4">
              <a href="#"
                class="inline-flex h-9 w-9 items-center justify-center rounded-lg border bg-gray-100 text-black/60 hover:text-black border-white/20">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="h-4 w-4">
                  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path>
                </svg>
              </a>
              <a href="#"
                class="inline-flex h-9 w-9 items-center justify-center rounded-lg border bg-gray-100 text-black/60 hover:text-black border-white/20">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="h-4 w-4">
                  <path d="M4 4l11.733 16h4.267l-11.733 -16z" class=""></path>
                  <path d="M4 20l6.768-6.768m2.46-2.46l6.772-6.772" class=""></path>
                </svg>
              </a>
              <a href="#"
                class="inline-flex h-9 w-9 items-center justify-center rounded-lg border bg-gray-100 text-black/60 hover:text-black border-white/20">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="h-4 w-4">
                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect>
                  <path d="m16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path>
                  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line>
                </svg>
              </a>
            </div>
          </div>

          <!-- Services -->
          <div class="">
            <h3 class="text-sm font-semibold text-black tracking-tight font-geist">Services</h3>
            <ul class="mt-4 space-y-3">
              <li class=""><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Residential
                  Cleaning</a></li>
              <li><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Office Cleaning</a></li>
              <li><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Deep Cleaning</a></li>
              <li><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Move-in/Move-out</a></li>
              <li class=""><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Post-Construction</a>
              </li>
            </ul>
          </div>

          <!-- Company -->
          <div class="">
            <h3 class="text-sm font-semibold text-black tracking-tight font-geist">Company</h3>
            <ul class="mt-4 space-y-3">
              <li class=""><a href="#" class="text-sm text-black/70 hover:text-black font-geist">About Us</a></li>
              <li><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Careers</a></li>
              <li class=""><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Service Areas</a></li>
              <li class=""><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Reviews</a></li>
              <li class=""><a href="#" class="text-sm text-black/70 hover:text-black font-geist">Blog</a></li>
            </ul>
          </div>

          <!-- Contact -->
          <div class="">
            <h3 class="text-sm font-semibold text-black tracking-tight font-geist">Contact</h3>
            <ul class="mt-4 space-y-3">
              <li class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="h-4 w-4 text-black/60">
                  <path
                    d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
                    class=""></path>
                </svg>
                <span class="text-sm text-black/70 font-geist">(555) 123-4567</span>
              </li>
              <li class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="h-4 w-4 text-black/60">
                  <rect width="20" height="16" x="2" y="4" rx="2" class=""></rect>
                  <path d="m22 7-10 5L2 7" class=""></path>
                </svg>
                <span class="text-sm text-black/70 font-geist">hello@lala.com</span>
              </li>
              <li class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="h-4 w-4 text-black/60 mt-0.5">
                  <path
                    d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
                    class=""></path>
                  <circle cx="12" cy="10" r="3" class=""></circle>
                </svg>
                <span class="text-sm text-black/70 font-geist">123 Main StreetSan Francisco, CA 94102</span>
              </li>
            </ul>
            <div class="mt-6">
              <a href="#"
                class="inline-flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium bg-black text-neutral-100 hover:bg-black/90 font-geist">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="h-4 w-4">
                  <path d="M8 2v4" class=""></path>
                  <path d="M16 2v4" class=""></path>
                  <rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
                  <path d="M3 10h18" class=""></path>
                </svg>
                Book now
              </a>
            </div>
          </div>
        </div>

        <!-- Bottom Section -->
        <div class="mt-8 pt-6 border-t border-black/10">
          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <p class="text-sm text-black/60 font-geist">
              © 2024 Lala Cleaning Services. All rights reserved.
            </p>
            <div class="flex flex-wrap gap-6">
              <a href="#" class="text-sm text-black/60 hover:text-black font-geist">Privacy Policy</a>
              <a href="#" class="text-sm text-black/60 hover:text-black font-geist">Terms of Service</a>
              <a href="#" class="text-sm text-black/60 hover:text-black font-geist">Cookie Policy</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>