Tailwind Footer with Brand, Social Links & Subscription

<footer class="bg-white border-neutral-200 border-t pt-10 pb-10">
  <div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
    <div class="sm:p-8 bg-gradient-to-r from-neutral-100 to-white border-neutral-200 border rounded-3xl pt-6 pr-6 pb-6 pl-6">
  <div class="grid md:grid-cols-2 gap-10">
    <!-- Left: Brand, copy, social -->
    <div class="">
      <div class="flex items-center gap-3">
        <span class="inline-flex h-8 w-8 rounded-full bg-neutral-900 items-center justify-center text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="triangle" class="lucide lucide-triangle h-4 w-4"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path></svg>
        </span>
        <span class="text-lg font-semibold tracking-tight">NOVA</span>
      </div>
      <p class="mt-3 text-sm text-neutral-600 font-sans">
        We empower modern businesses to transform their digital presence. From innovative web applications to strategic growth initiatives, we deliver cutting-edge solutions that align with your vision. Our expert team is committed to providing exceptional service that accelerates your success.
      </p>

      <ul class="mt-6 space-y-2">
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm">
            <span class="flex items-center gap-3 text-neutral-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="facebook" class="lucide lucide-facebook h-4 w-4 text-neutral-600"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
              Facebook
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm">
            <span class="flex items-center gap-3 text-neutral-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram h-4 w-4 text-neutral-600"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg>
              Instagram
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm">
            <span class="flex items-center gap-3 text-neutral-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin h-4 w-4 text-neutral-600"><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"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg>
              LinkedIn
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm">
            <span class="flex items-center gap-3 text-neutral-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter h-4 w-4 text-neutral-600"><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"></path></svg>
              Twitter
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm">
            <span class="flex items-center gap-3 text-neutral-800">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="youtube" class="lucide lucide-youtube h-4 w-4 text-neutral-600"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="m10 15 5-3-5-3z"></path></svg>
              YouTube
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
      </ul>
    </div>

    <!-- Right: Newsletter + links -->
    <div class="">
      <p class="text-sm font-medium text-neutral-800 font-sans">Join our innovation newsletter</p>
      <form class="mt-3">
        <label for="footer-email" class="sr-only">Email address</label>
        <div class="flex items-center gap-3 sm:max-w-sm">
          <input id="footer-email" type="email" placeholder="Your email address" class="flex-1 rounded-full border border-neutral-300 bg-white px-5 py-2.5 text-sm placeholder-neutral-500 focus:outline-none">
          <button type="button" class="inline-flex items-center rounded-full bg-neutral-900 text-white px-5 py-2.5 text-sm font-medium hover:bg-black">
            Get Updates
          </button>
        </div>
      </form>

      <ul class="mt-6 space-y-2">
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm text-neutral-800">
            Solutions
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm text-neutral-800">
            Portfolio
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm text-neutral-800">
            Our Story
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm text-neutral-800">
            Insights
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </li>
        <li class="">
          <a href="#" class="flex items-center justify-between border-b border-neutral-200 py-3 text-sm text-neutral-800">
            Plans
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-neutral-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg><p class="text-neutral-600 font-sans">© <span id="year" class="font-sans">2025</span> NEXUS. All rights reserved.</p>
    </a>
  </li></ul></div>
</div></div>
  </div>
</footer>