ttvfx/components/Footer.tsx

import Link from "next/link";
import Fox from "./Fox";
import { nav, site } from "@/content/site";

export default function Footer() {
  return (
    <footer className="border-t border-line">
      <div className="mx-auto grid max-w-7xl gap-10 px-5 py-14 md:grid-cols-3 md:px-8">
        <div className="flex items-start gap-4">
          <Fox className="h-10 w-10 shrink-0" />
          <div>
            <p className="font-display text-lg font-light tracking-[0.3em] uppercase">Two Tales VFX</p>
            <p className="mt-1 font-mono text-xs tracking-widest text-muted uppercase">Est. {site.founded}</p>
          </div>
        </div>
        <nav className="flex flex-col gap-2" aria-label="Footer">
          {nav.map((item) => (
            <Link key={item.href} href={item.href} className="text-sm text-muted hover:text-fg">
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="flex flex-col gap-2 text-sm md:items-end">
          <a href={`mailto:${site.email}`} className="hover:text-accent">
            {site.email}
          </a>
          <span className="text-muted">{site.location}</span>
          {site.socials.map((s) => (
            <a key={s.href} href={s.href} target="_blank" rel="noreferrer" className="text-muted hover:text-fg">
              {s.label}
            </a>
          ))}
        </div>
      </div>
      <div className="mx-auto flex max-w-7xl justify-between border-t border-line px-5 py-6 font-mono text-[11px] tracking-widest text-muted uppercase md:px-8">
        <span>
          © {new Date().getFullYear()} {site.name}
        </span>
        <span>ttvfx.com</span>
      </div>
    </footer>
  );
}