91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import Link from "next/link";
|
|
import { contact } from "@/lib/portfolio";
|
|
|
|
const sectionLinks = [
|
|
{ label: "Work", href: "#work" },
|
|
{ label: "Capabilities", href: "#capabilities" },
|
|
{ label: "Operator", href: "#operator" },
|
|
{ label: "Contact", href: "#contact" },
|
|
];
|
|
|
|
const elsewhereLinks = [
|
|
{ label: "Git", href: contact.git },
|
|
{ label: "LinkedIn", href: contact.linkedIn },
|
|
];
|
|
|
|
export function ClosingCta() {
|
|
const year = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="border-t border-blacksite-line bg-blacksite-bg px-4 py-16 text-blacksite-text sm:px-6 lg:px-8">
|
|
<div className="mx-auto max-w-7xl">
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<a
|
|
href="#work"
|
|
className="group min-h-52 border border-blacksite-line bg-blacksite-surface p-6 transition-colors hover:border-signal-orange/70 focus-visible:outline-signal-orange sm:p-8"
|
|
>
|
|
<p className="section-label mb-12">CTA /.01</p>
|
|
<span className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text transition-colors group-hover:text-signal-orange sm:text-6xl">
|
|
View Selected Work →
|
|
</span>
|
|
</a>
|
|
|
|
<a
|
|
href={`mailto:${contact.email}`}
|
|
className="group min-h-52 border border-blacksite-line bg-blacksite-surface p-6 transition-colors hover:border-signal-orange/70 focus-visible:outline-signal-orange sm:p-8"
|
|
>
|
|
<p className="section-label mb-12">CTA /.02</p>
|
|
<span className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text transition-colors group-hover:text-signal-orange sm:text-6xl">
|
|
Start a Conversation →
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div className="mt-8 grid gap-8 border border-blacksite-line bg-blacksite-surface2/35 p-6 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1fr_1.2fr] lg:p-8">
|
|
<nav aria-label="Footer sections">
|
|
<p className="section-label mb-4">Sections</p>
|
|
<ul className="grid gap-3 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">
|
|
{sectionLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<a href={link.href} className="transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
<nav aria-label="Footer field notes">
|
|
<p className="section-label mb-4">Field Notes</p>
|
|
<Link href="/blog/" className="font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
|
|
/blog/
|
|
</Link>
|
|
</nav>
|
|
|
|
<nav aria-label="Footer elsewhere">
|
|
<p className="section-label mb-4">Elsewhere</p>
|
|
<ul className="grid gap-3 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">
|
|
{elsewhereLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<a href={link.href} target="_blank" rel="noreferrer" className="transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
|
|
{link.label} ↗
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
<div>
|
|
<p className="section-label mb-4">Build</p>
|
|
<p className="font-mono text-xs uppercase leading-6 tracking-[0.14em] text-blacksite-muted">
|
|
Next.js · Tailwind · deployed from out/
|
|
</p>
|
|
<p className="mt-4 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-faint">© {year}</p>
|
|
<p className="mt-6 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">⌘K opens command index</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|