my-website-v2/frontend/components/Footer.tsx

import * as hi from "jsr:@preact-icons/hi2";

export default function Footer() {
  return (
    <footer class="bg-[#313244] text-[#cdd6f4] py-8 mt-auto">
      <div class="container mx-auto px-4">
        {/* 2x2 grid on mobile, horizontal row on desktop - all centered */}
        <div class="grid grid-cols-2 place-items-center md:flex md:flex-row items-center justify-center md:gap-8">
          <a
            class="text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
            href="/rss"
          >
            <div class="flex items-center gap-2">
              <hi.HiOutlineRss />
              RSS
            </div>
          </a>

          <a
            class="text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
            href="/sitemap"
          >
            <div class="flex items-center gap-2">
              <hi.HiOutlineMap />
              Sitemap
            </div>
          </a>

          <a
            class="text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
            href="/resume.pdf"
          >
            <div class="flex items-center gap-2">
              <hi.HiOutlineBriefcase />
              Resume
            </div>
          </a>

          <a
            class="text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
            href="mailto:wjmiller2016@gmail.com"
          >
            <div class="flex items-center gap-2">
              <hi.HiOutlineEnvelope />
              Email me
            </div>
          </a>
        </div>

        <div class="border-t border-gray-700 mt-8 pt-4 text-center">
          <p class="text-sm text-gray-400">
            © {new Date().getFullYear()} Miller Web Solutions. All Rights
            Reserved. Hosted by Akamai.
          </p>
        </div>
      </div>
    </footer>
  );
}