Dark Footer with Navigation and Social Links

<footer class="bg-black border-white/5 border-t pt-8 pb-8">
  <div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
    <div class="flex flex-col md:flex-row mb-6 gap-x-y-8 gap-y-8 items-center justify-between">
      <!-- Logo Section -->
      <div
        class="flex select-none group-hover:opacity-90 transition-opacity shrink-0 cursor-pointer text-2xl text-white/95 tracking-tight font-serif items-center"
        onclick="window.location.href='/home'" role="button">
        <!-- H Vector -->
        <div class="relative flex flex-col items-center leading-none mr-1">
          <span class="absolute -top-3 w-full text-center text-sm font-sans opacity-80">
                →
              </span>
          <span class="italic">H</span>
        </div>

        <!-- Tensor Product Symbol -->
        <span class="text-xl opacity-100 mr-2 ml-2">⊗</span>

        <!-- AI System Term -->
        <div class="relative flex items-baseline">
          <span class="italic">AI</span>
          <span class="text-xs absolute -top-1.5 -right-2 font-sans font-medium">
                2
              </span>
          <span class="text-[10px] -bottom-1.5 -right-5 font-medium text-white/95 absolute">
                sys
              </span>
        </div>
        <!-- Spacer for the absolute positioned elements -->
        <div class="w-5"></div>
      </div>

      <!-- Navigation Links -->
      <nav class="flex flex-wrap items-center justify-center gap-6 md:gap-10">
        <a href="/home" class="hover:text-white transition-colors text-sm text-zinc-500">Home</a>
        <a href="/reviews" class="hover:text-white transition-colors text-sm text-zinc-500">Book Reviews</a>
        <a href="/newsroom" class="hover:text-white transition-colors text-sm text-zinc-500">Newsroom</a>
        <a href="/contact" class="hover:text-white transition-colors text-sm text-zinc-500">Contact</a>
        <a href="/privacy-policy" class="hover:text-white transition-colors text-sm text-zinc-500">Privacy Policy</a>
        <a href="/cookie-policy" class="hover:text-white transition-colors text-sm text-white/40">Cookie Policy</a><a
          href="/terms-conditions" class="hover:text-white transition-colors text-sm text-white/40">Terms &amp;
          Conditions</a>
      </nav>

      <!-- Social Icons -->
      <div class="flex gap-6 shrink-0 gap-x-6 gap-y-6 items-center">
        <a href="https://www.linkedin.com/in/jackwhatley/" target="_blank" rel="noopener noreferrer"
          class="text-zinc-500 hover:text-white transition-colors">
          <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="lucide lucide-linkedin w-[24px] h-[24px]" data-icon-replaced="true"
            style="color: rgb(255, 255, 255); width: 24px; height: 24px;">
            <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>
        <a href="https://x.com/jack__whatley" class="hover:text-white transition-colors text-zinc-500">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
            viewBox="0 0 24 24" data-icon="simple-icons:x" data-width="18" class="w-[18px] h-[18px]" stroke-width="2"
            data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(255, 255, 255);">
            <path fill="currentColor"
              d="M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z"
              class="">
            </path>
          </svg>
        </a>
        <a href="https://www.instagram.com/jackwhatleyai/" target="_blank" rel="noopener noreferrer"
          class="text-zinc-500 hover:text-white transition-colors">
          <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="lucide lucide-instagram">
            <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 href="https://www.facebook.com/jackewhatley" target="_blank" rel="noopener noreferrer"
          class="text-zinc-500 hover:text-white transition-colors">
          <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="lucide lucide-facebook">
            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path>
          </svg>
        </a>
      </div>
    </div>

    <div class="border-white/5 border-t pt-5">
      <p class="text-xs text-zinc-600 text-center md:text-left">© Copyright Reshaping Recruitment. All Rights Reserved
      </p>
    </div>
  </div>
</footer>