Tailwind Coffee Footer with Newsletter and Social Icons

<footer class="sm:px-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-full border-amber-900/20 border-t mr-auto ml-auto pt-16 pr-6 pb-12 pl-6" data-element-locator="html &gt; body:nth-of-type(1) &gt; footer:nth-of-type(1)">
      <div class="relative">
        <div class="text-sm text-amber-400/60 font-sans">(Connect)</div>

        <div class="text-center">
          <h2 class="sm:text-6xl lg:text-7xl leading-none uppercase text-5xl font-medium text-white/95 tracking-tight">
            JOIN OUR
          </h2>
          <h2 class="text-5xl sm:text-6xl lg:text-7xl leading-none text-white/95 tracking-tight uppercase mt-1 font-sans font-medium">
            COFFEE CLUB
          </h2>

          <div class="mt-6 flex items-center gap-2 text-amber-400/40">
            <span class="text-base font-sans">+</span>
            <div class="h-px flex-1 bg-amber-900/30"></div>
            <span class="text-base font-sans">+</span>
          </div>

          <p class="sm:text-2xl text-xl font-medium text-neutral-300/90 tracking-tight max-w-3xl mt-6 mr-auto ml-auto">
            Handcrafted coffee roasted with care. Expert guidance, premium
            beans, and worldwide shipping.
          </p>
        </div>

        <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          <div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 p-6">
            <div class="inline-flex items-center gap-2 rounded-full bg-amber-500/10 ring-1 ring-amber-500/20 px-3 py-2 text-sm text-amber-500 mb-4 font-sans">
              <span class="h-2 w-2 rounded-full bg-amber-500"></span>
              Newsletter
            </div>
            <h4 class="text-xl text-white tracking-tight mb-4 font-sans">
              Stay fresh
            </h4>
            <form class="space-y-3">
              <input type="email" required="" placeholder="you@domain.com" class="w-full h-10 px-4 rounded-xl border text-sm placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500/20 backdrop-blur border-amber-900/30 bg-[#1a1614]/60 text-white">
              <button class="w-full inline-flex items-center gap-2 h-10 px-4 rounded-xl ring-1 text-sm transition ring-amber-900/30 text-white bg-amber-950/40 hover:bg-amber-900/40 justify-center font-sans">
                Subscribe
                <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="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>
              </button>
            </form>
          </div>

          <div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 p-6">
            <h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-sans">
              Coffee
            </h5>
            <ul class="space-y-3 text-base text-white/70">
              <li class="">
                <a class="transition hover:text-white font-sans" href="#single-origin">
                  Single Origin
                </a>
              </li>
              <li class="">
                <a class="transition hover:text-white font-sans" href="#blends">
                  Signature Blends
                </a>
              </li>
              <li class="">
                <a class="transition hover:text-white font-sans" href="#decaf">
                  Decaf
                </a>
              </li>
              <li class="">
                <a class="transition hover:text-white font-sans" href="#cold-brew">
                  Cold Brew
                </a>
              </li>
            </ul>
          </div>

          <div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 p-6">
            <h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-sans">
              Learn
            </h5>
            <ul class="space-y-3 text-base text-white/70">
              <li>
                <a class="transition hover:text-white font-sans" href="#brewing">
                  Brewing Guides
                </a>
              </li>
              <li class="">
                <a class="transition hover:text-white font-sans" href="#origins">
                  Coffee Origins
                </a>
              </li>
              <li>
                <a class="transition hover:text-white font-sans" href="#roasting">
                  Roasting Process
                </a>
              </li>
              <li>
                <a class="transition hover:text-white font-sans" href="#faq">
                  FAQ
                </a>
              </li>
            </ul>
          </div>

          <div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 p-6">
            <h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-sans">
              Company
            </h5>
            <ul class="space-y-3 text-base text-white/70">
              <li>
                <a class="transition hover:text-white font-sans" href="#about">
                  Our Story
                </a>
              </li>
              <li>
                <a class="transition hover:text-white font-sans" href="#sustainability">
                  Sustainability
                </a>
              </li>
              <li>
                <a class="transition hover:text-white font-sans" href="#wholesale">
                  Wholesale
                </a>
              </li>
              <li>
                <a class="transition hover:text-white font-sans" href="#contact">
                  Contact
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div class="mt-12 pt-8 border-t border-amber-900/30 flex flex-col sm:flex-row items-center justify-between gap-6">
          <div class="flex items-center gap-6">
            <span class="bg-center text-3xl italic text-white tracking-tight font-script w-[60px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a68dc15f-fb85-48af-b6c2-5c189e6f4c23_1600w.png)] bg-cover"></span>
            <div class="flex items-center gap-4 text-base text-white/60">
              <span class="font-sans">© 2025</span>
              <span class="hidden sm:inline text-amber-900/30 font-sans">
                |
              </span>
              <a href="#privacy" class="transition hover:text-white font-sans">
                Privacy
              </a>
              <span class="text-amber-900/30 font-sans">/</span>
              <a href="#terms" class="transition hover:text-white font-sans">
                Terms
              </a>
            </div>
          </div>
          <div class="flex gap-3 gap-x-3 gap-y-3 items-center">
            <a aria-label="Instagram" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-amber-950/40 text-white/70 hover:text-white hover:bg-amber-900/40" href="https://instagram.com" target="_blank" rel="noreferrer">
              <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-5 h-5">
                <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>
            <a aria-label="Facebook" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-amber-950/40 text-white/70 hover:text-white hover:bg-amber-900/40" href="https://facebook.com" target="_blank" rel="noreferrer">
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" class="">
                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" class=""></path>
              </svg>
            </a>
            <a aria-label="Twitter/X" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-amber-950/40 text-white/70 hover:text-white hover:bg-amber-900/40" href="https://twitter.com" target="_blank" rel="noreferrer">
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16" class="">
                <path d="M12.6 1.7h2.1l-4.6 5.2 5.4 7.4h-4.2L8.9 9.8l-3.9 4.5H2.9l4.9-5.6L2.6 1.7h4.3l3 4.1 2.7-3.1z" class=""></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </footer>