twotalesanimation
ef0c2ef78e
- Project cards stack credits under title on small screens - Fluid headings on /work and project pages; next-project banner wraps - Footer, back, award and nav links padded to ~44px touch targets - theRender.Fish marked as in-house project Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
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="-my-3 flex flex-col" aria-label="Footer">
|
|
{nav.map((item) => (
|
|
<Link key={item.href} href={item.href} className="py-3 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="-my-3 py-3 break-all 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>
|
|
);
|
|
}
|