Portfolio Footer with Navigation and Contact

<footer class="overflow-hidden bg-[#020204] w-full border-white/10 border-t pt-32 pb-16 relative gap-x-12 gap-y-12">
  <div
    class="absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 w-full text-center pointer-events-none select-none z-0">
    <span class="text-[18vw] font-cinzel font-bold text-white/[0.02] leading-none tracking-tight block">NiiCK</span>
  </div>

  <div class="z-10 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative gap-x-12 gap-y-12 edit-mode-hover">
    <div class="grid grid-cols-1 md:grid-cols-12 mb-20 gap-x-12 gap-y-12 edit-mode-hover">
      <div class="md:col-span-4 space-y-8 edit-mode-hover">
        <div class="edit-mode-hover">
          <span class="font-cinzel text-3xl text-white block mb-6 edit-mode-hover">NiiCK</span>
          <p class="text-neutral-400 text-sm font-light leading-relaxed max-w-xs">
            Finance &amp; Accountancy Student. Integrating data analytics and automation to solve structured business
            problems.
          </p>
        </div>
      </div>

      <div class="md:col-span-2 md:col-start-6">
        <h4 class="text-white font-cinzel text-sm mb-6">Menu</h4>
        <ul class="space-y-4">
          <li><a href="#skills"
              class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Skills</a>
          </li>
          <li><a href="#projects"
              class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Projects</a>
          </li>
          <li><a href="#experience"
              class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Experience</a>
          </li>
        </ul>
      </div>

      <div class="md:col-span-2">
        <h4 class="text-white font-cinzel text-sm mb-6">Tools</h4>
        <ul class="space-y-4">
          <li><a
              class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Power
              BI</a></li>
          <li><a
              class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Alteryx</a>
          </li>
          <li><a
              class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">n8n</a>
          </li>
        </ul>
      </div>

      <div class="md:col-span-3">
        <h4 class="text-white font-cinzel text-sm mb-6">Get in Touch</h4>
        <p class="text-neutral-400 text-xs mb-4 leading-relaxed">Open for opportunities in Finance, Analytics, and AI
          Automation.</p>
        <a href="mailto:hemanthkumar.connect.now@gmail.com"
          class="inline-flex items-center gap-2 text-accent-300 hover:text-white transition-colors">
          <span class="text-xs uppercase tracking-widest">Email Me</span>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
            viewBox="0 0 24 24" data-icon="lucide:arrow-right">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M5 12h14m-7-7l7 7l-7 7"></path>
          </svg>
        </a>
      </div>
    </div>

    <div
      class="flex flex-col md:flex-row gap-4 border-white/5 border-t pt-8 gap-x-12 gap-y-12 items-center justify-between">
      <p class="text-neutral-600 text-[10px] uppercase tracking-widest">© 2025 Hemanth Kumar.</p>
      <div class="flex items-center gap-2">
        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
        <span class="text-neutral-500 text-[10px] uppercase tracking-wide">niick - HT40</span>
      </div>
    </div>
  </div>
</footer>