Animated Brand Footer with Navigation Links

<footer class="overflow-hidden text-white bg-[#050505] border-neutral-800 border-t pt-24">

  <!-- Giant Brand Text -->
  <div class="text-center w-full mb-20 pr-4 pl-4"
    style="mask-image: linear-gradient(180deg, transparent, black 0%, black 55%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 55%, transparent);">
    <h1
      class="text-[22vw] leading-[0.7] select-none font-bold text-[#141414] tracking-tighter mix-blend-screen scale-y-110 reveal-on-scroll">
      AETHER
    </h1>
  </div>

  <!-- Links Grid -->
  <div class="border-t border-neutral-900 grid grid-cols-1 lg:grid-cols-2 reveal-on-scroll reveal-delay-100">

    <!-- Left Side: Navigation Links -->
    <div class="p-8 md:p-16 grid grid-cols-2 gap-12 border-r border-neutral-900">
      <div class="flex flex-col gap-6">
        <a href="#"
          class="text-xs font-medium text-neutral-500 uppercase tracking-widest hover:text-white transition-colors">About
          Us</a>
        <a href="#"
          class="text-xs font-medium text-neutral-500 uppercase tracking-widest hover:text-white transition-colors">Shop</a>
        <a href="#"
          class="text-xs font-medium text-neutral-500 uppercase tracking-widest hover:text-white transition-colors">Technology</a>
      </div>
      <div class="flex flex-col gap-6">
        <a href="#"
          class="text-xs font-medium text-neutral-500 uppercase tracking-widest hover:text-white transition-colors">Contact
          Us</a>
        <a href="#"
          class="text-xs font-medium text-neutral-500 uppercase tracking-widest hover:text-white transition-colors">Instagram</a>
        <a href="#"
          class="text-xs font-medium text-neutral-500 uppercase tracking-widest hover:text-white transition-colors">Twitter/X</a>
        <a href="#"
          class="text-xs font-medium text-neutral-500 uppercase tracking-widest hover:text-white transition-colors">Facebook</a>
      </div>
    </div>

    <!-- Right Side: Wireframe Illustration -->
    <div
      class="lg:h-auto lg:border-t-0 flex overflow-hidden aether-bottles w-full h-48 border-neutral-900 border-t relative items-center justify-center">
      <svg viewBox="0 0 400 120" class="opacity-20 max-h-[160px] w-[756px] h-[160px]"
        preserveAspectRatio="xMidYMid meet" stroke-width="2"
        style="width: 756px; height: 160px; color: rgb(255, 255, 255);">
        <!-- Tube 1 (Outline) -->
        <path d="M40 100 L50 30 L90 30 L100 100" stroke="white" stroke-width="1" fill="none"></path>
        <rect x="50" y="20" width="40" height="10" stroke="white" stroke-width="1" fill="none"></rect>

        <!-- Tube 2 (Outline) -->
        <path d="M120 100 L130 10 L170 10 L180 100" stroke="white" stroke-width="1" fill="none"></path>
        <rect x="130" y="5" width="40" height="5" stroke="white" stroke-width="1" fill="none"></rect>

        <!-- Dropper Bottle (wave liquid) -->
        <g transform="translate(200, 10)" class="dropper-bottle">
          <!-- ClipPath in the SAME coordinates as the bottle -->
          <defs>
            <clipPath id="dropper-clip">
              <!-- inside shape of the bottle -->
              <path d="M15 25
                   Q15 20 20 20
                   L40 20
                   Q45 20 45 25
                   L45 80
                   Q45 90 30 90
                   Q15 90 15 80
                   Z" />
            </clipPath>
          </defs>

          <!-- Cap -->
          <path d="M25 0 L25 10 L20 10 L20 20 L40 20 L40 10 L35 10 L35 0 Z" stroke="white" stroke-width="1" fill="none">
          </path>

          <!-- Body Outline -->
          <path d="M15 25 Q15 20 20 20 L40 20 Q45 20 45 25 L45 80 Q45 90 30 90 Q15 90 15 80 Z" stroke="white"
            stroke-width="1" fill="none"></path>

          <!-- Liquid (clipped perfectly inside bottle) -->
          <g clip-path="url(#dropper-clip)">
            <!-- Base fill -->
            <rect class="liquid-fill" x="15" y="60" width="30" height="30" fill="#7c4a30" opacity="0.6"></rect>

            <!-- Wave on top -->
            <path class="liquid-wave" d="M15 60
                 Q22 55 30 57
                 Q38 59 45 56
                 L45 90
                 L15 90 Z" fill="#7c4a30" opacity="0.9"></path>
          </g>
        </g>

        <!-- Tube 3 (Outline) -->
        <path d="M270 100 L280 20 L320 20 L330 100" stroke="white" stroke-width="1" fill="none"></path>
        <rect x="280" y="10" width="40" height="10" stroke="white" stroke-width="1" fill="none"></rect>

        <!-- Dropper 2 (Outline) -->
        <g transform="translate(350, 20)">
          <rect x="25" y="0" width="10" height="20" stroke="white" stroke-width="1" fill="none"></rect>
          <path d="M15 25 Q15 20 20 20 L40 20 Q45 20 45 25 L45 70 Q45 80 30 80 Q15 80 15 70 Z" stroke="white"
            stroke-width="1" fill="none"></path>
        </g>
      </svg>
    </div>

    <style>
      /* make transforms work nicely inside SVG */
      .aether-bottles .liquid-fill,
      .aether-bottles .liquid-wave {
        transform-box: fill-box;
        transform-origin: center bottom;
      }

      /* hover over the SVG area */
      .aether-bottles svg:hover .liquid-wave {
        animation: aether-wave 1.8s ease-in-out infinite;
      }

      .aether-bottles svg:hover .liquid-fill {
        animation: aether-fill 1.8s ease-in-out infinite;
      }

      @keyframes aether-wave {
        0% {
          transform: translateX(0) translateY(0);
        }

        25% {
          transform: translateX(-3px) translateY(-2px);
        }

        50% {
          transform: translateX(3px) translateY(-1px);
        }

        75% {
          transform: translateX(-2px) translateY(-3px);
        }

        100% {
          transform: translateX(0) translateY(0);
        }
      }

      @keyframes aether-fill {
        0% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-4px);
        }

        100% {
          transform: translateY(-2px);
        }
      }
    </style>



    <!-- Copyright Row -->
    <div
      class="border-t border-neutral-900 px-8 md:px-16 py-8 flex flex-col md:flex-row justify-between items-center gap-6 text-[10px] text-neutral-600 font-medium tracking-wide">
      <div>
        2024 All rights reserved
      </div>
      <div class="flex gap-8">
        <a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
        <a href="#" class="hover:text-white transition-colors">Terms of use</a>
        <a href="#" class="hover:text-white transition-colors">Cookies</a>
      </div>
    </div>
  </div>
</footer>