Responsive SaaS Footer with Contact & Newsletter

<footer class="sm:px-6 md:px-10 md:pt-20 md:pb-20 w-full max-w-7xl mr-auto ml-auto pt-12 pr-4 pb-10 pl-4" data-element-locator="html &gt; body:nth-of-type(1) &gt; footer:nth-of-type(1)">
      <div class="relative overflow-hidden bg-white/5 backdrop-blur-xl rounded-3xl border-gradient before:rounded-3xl">
        <div class="relative z-10 sm:p-12 md:p-16 pt-12 pr-8 pb-8 pl-8">
          <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-12 border-b border-white/10">
            <div class="lg:col-span-4">
              <div class="flex items-center gap-2 mb-4">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cfd11ad9-7276-443d-aaea-710749f28066_1600w.png" alt="Water Logo" class="w-[100px] h-8 object-cover rounded">
              </div>
              <p class="text-white/70 max-w-3xl font-geist">
                Financial intelligence for modern companies. Connect your
                accounts, automate reconciliation, and forecast with confidence.
              </p>
              <div id="contact" class="mt-6 rounded-2xl border border-white/10 bg-white/5 p-5 sm:p-6 md:p-8">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                  <div class="space-y-4">
                    <div class="inline-flex items-center gap-2 rounded-full bg-emerald-400/10 text-emerald-300 ring-1 ring-emerald-300/20 px-2.5 py-1 text-xs font-geist">
                      <span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                      Available 24/7
                    </div>
                    <h4 class="text-white font-medium tracking-tight font-geist">
                      Get in touch
                    </h4>
                    <ul class="space-y-2 text-sm text-neutral-300">
                      <li class="flex items-start gap-2">
                        <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="w-4 h-4 text-emerald-400 mt-0.5">
                          <path d="M20 6 9 17l-5-5" class=""></path>
                        </svg>
                        <span class="font-geist">
                          Enterprise-grade security and compliance
                        </span>
                      </li>
                      <li class="flex items-start gap-2">
                        <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="w-4 h-4 text-emerald-400 mt-0.5">
                          <path d="M20 6 9 17l-5-5" class=""></path>
                        </svg>
                        <span class="font-geist">
                          Dedicated implementation support
                        </span>
                      </li>
                      <li class="flex items-start gap-2">
                        <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="w-4 h-4 text-emerald-400 mt-0.5">
                          <path d="M20 6 9 17l-5-5" class=""></path>
                        </svg>
                        <span class="font-geist">
                          Flexible pricing for teams of all sizes
                        </span>
                      </li>
                    </ul>
                    <div class="flex items-center gap-3 pt-2 text-sm">
                      <a href="mailto:hello@water.io" class="inline-flex items-center gap-2 text-white hover:text-emerald-300 transition 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="w-4 h-4">
                          <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path>
                          <rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
                        </svg>
                        hello@quantivo.io
                      </a>
                    </div>
                  </div>
                  <form class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-1">
                      <label for="name" class="block text-xs font-medium text-white/80 mb-1 font-geist">
                        Your name
                      </label>
                      <input id="name" name="name" type="text" required="" placeholder="Jane Doe" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3 font-geist">
                    </div>
                    <div class="sm:col-span-1">
                      <label for="email" class="block text-xs font-medium text-white/80 mb-1 font-geist">
                        Email
                      </label>
                      <input id="email" name="email" type="email" required="" placeholder="jane@company.com" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3 font-geist">
                    </div>
                    <div class="sm:col-span-1">
                      <label for="company" class="block text-xs font-medium text-white/80 mb-1 font-geist">
                        Company
                      </label>
                      <input id="company" name="company" type="text" placeholder="Acme Inc." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3 font-geist">
                    </div>
                    <div class="sm:col-span-1">
                      <label for="interest" class="block text-xs font-medium text-white/80 mb-1 font-geist">
                        I'm interested in
                      </label>
                      <select id="interest" name="interest" class="w-full appearance-none outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3 font-geist">
                        <option class="bg-black" value="demo">
                          Scheduling a demo
                        </option>
                        <option class="bg-black" value="pricing">
                          Pricing information
                        </option>
                        <option class="bg-black" value="integration">
                          Integration support
                        </option>
                        <option class="bg-black" value="enterprise">
                          Enterprise solutions
                        </option>
                      </select>
                    </div>
                    <div class="sm:col-span-2">
                      <label for="message" class="block text-xs font-medium text-white/80 mb-1 font-geist">
                        Message
                      </label>
                      <textarea id="message" name="message" rows="4" placeholder="Tell us about your financial operations needs..." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3 font-geist"></textarea>
                    </div>
                    <div class="sm:col-span-2 flex items-center justify-end">
                      <button type="submit" class="inline-flex gap-2 ring-1 ring-emerald-300 hover:bg-emerald-300 transition text-sm font-medium text-black bg-emerald-400 rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 shadow items-center 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="w-4 h-4">
                          <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path>
                          <path d="m21.854 2.147-10.94 10.939" class=""></path>
                        </svg>
                        Send message
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8 pt-12">
            <div>
              <h4 class="text-white/80 text-xs uppercase tracking-[0.2em] font-geist">
                Product
              </h4>
              <ul class="mt-3 space-y-2 text-sm">
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Features
                  </a>
                </li>
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Integrations
                  </a>
                </li>
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Security
                  </a>
                </li>
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Pricing
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h4 class="text-white/80 text-xs uppercase tracking-[0.2em] font-geist">
                Solutions
              </h4>
              <ul class="mt-3 space-y-2 text-sm">
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Startups
                  </a>
                </li>
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Enterprise
                  </a>
                </li>
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Treasury
                  </a>
                </li>
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Accounting
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h4 class="text-white/80 text-xs uppercase tracking-[0.2em] font-geist">
                Company
              </h4>
              <ul class="mt-3 space-y-2 text-sm">
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    About
                  </a>
                </li>
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Careers
                  </a>
                </li>
                <li>
                  <a href="#contact" class="text-neutral-300 hover:text-white transition font-geist">
                    Contact
                  </a>
                </li>
                <li>
                  <a href="#" class="text-neutral-300 hover:text-white transition font-geist">
                    Press
                  </a>
                </li>
              </ul>
            </div>
            <div class="">
              <h4 class="uppercase text-xs text-white/80 tracking-[0.2em] font-geist">
                Stay updated
              </h4>
              <form class="mt-3 flex items-center gap-2">
                <div class="relative flex-1">
                  <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="w-4 h-4 text-white/40 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
                    <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path>
                    <rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
                  </svg>
                  <input type="email" name="subscribeEmail" required="" placeholder="you@example.com" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-xs text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-9 font-geist">
                </div>
                <button type="submit" class="inline-flex gap-2 ring-1 ring-white/80 hover:bg-emerald-400 hover:ring-emerald-300 transition text-xs font-medium text-black bg-white rounded-xl pt-2.5 pr-3.5 pb-2.5 pl-3.5 items-center font-geist">
                  Join
                </button>
              </form>
              <div class="mt-4 flex items-center gap-3">
                <a href="#" aria-label="GitHub" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 text-white/80 hover:text-white hover:bg-white/10 transition">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" class=""></path>
                    <path d="M9 18c-4.51 2-5-2-7-2" class=""></path>
                  </svg>
                </a>
                <a href="#" aria-label="Twitter" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 text-white/80 hover:text-white hover:bg-white/10 transition">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" class=""></path>
                  </svg>
                </a>
                <a href="#" aria-label="LinkedIn" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 text-white/80 hover:text-white hover:bg-white/10 transition">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class=""></path>
                    <rect width="4" height="12" x="2" y="9" class=""></rect>
                    <circle cx="4" cy="4" r="2" class=""></circle>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div class="mt-10 pt-6 border-t border-white/10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <p class="text-white/60 text-sm font-geist">
              © 2025 Water. All rights reserved.
            </p>
            <div class="flex items-center gap-4 text-white/60 text-sm">
              <a href="#" class="hover:text-white transition font-geist">
                Privacy
              </a>
              <span class="hidden sm:block text-white/20">•</span>
              <a href="#" class="hover:text-white transition font-geist">
                Terms
              </a>
              <span class="hidden sm:block text-white/20">•</span>
              <a href="#" class="hover:text-white transition inline-flex items-center gap-1 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="w-4 h-4">
                  <path d="m5 12 7-7 7 7" class=""></path>
                  <path d="M12 19V5" class=""></path>
                </svg>
                Back to top
              </a>
            </div>
          </div>
        </div>
        <div aria-hidden="true" class="pointer-events-none absolute -top-16 -right-10 h-72 w-72 rounded-full bg-emerald-400/10 blur-3xl"></div>
        <div aria-hidden="true" class="pointer-events-none absolute -bottom-20 -left-10 h-80 w-80 rounded-full bg-cyan-400/10 blur-3xl"></div>
      </div>
    </footer>