116 lines
4.6 KiB
TypeScript
Executable file
116 lines
4.6 KiB
TypeScript
Executable file
import Image from "next/image";
|
|
|
|
function LinkedinIcon({ size = 16, className = "" }: { size?: number; className?: string }) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
|
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
|
<rect width="4" height="12" x="2" y="9" />
|
|
<circle cx="4" cy="4" r="2" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const navSections = [
|
|
{
|
|
title: "Navigation",
|
|
links: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Projects", href: "#projects" },
|
|
{ label: "Gallery", href: "#gallery" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Expertise",
|
|
links: [
|
|
{ label: "Systems Design", href: "#about" },
|
|
{ label: "IP & Cloud Production", href: "#about" },
|
|
{ label: "Broadcast Integration", href: "#about" },
|
|
{ label: "XR / Virtual Production", href: "#projects" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function Footer() {
|
|
return (
|
|
<footer className="bg-surface pt-16 pb-8 border-t border-border">
|
|
<div className="max-w-6xl mx-auto px-6">
|
|
{/* Top section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8 pb-12 border-b border-border">
|
|
{/* Brand column */}
|
|
<div className="md:col-span-5">
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<Image
|
|
src="/images/dragon-mark.png"
|
|
alt="Wild Dragon"
|
|
width={24}
|
|
height={24}
|
|
className="brightness-0 invert opacity-60"
|
|
/>
|
|
<span className="font-mono text-[11px] tracking-[0.2em] uppercase text-white/40">
|
|
Wild Dragon
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-white/40 leading-relaxed max-w-sm mb-6">
|
|
Broadcast systems integration and production facility design for
|
|
sports, corporate, financial services, and defense organizations.
|
|
</p>
|
|
<div className="flex items-center gap-4">
|
|
<a
|
|
href="https://www.linkedin.com/in/zachary-gaetano-05962386/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-9 h-9 rounded-full border border-border flex items-center justify-center text-white/40 hover:text-accent hover:border-accent/30 transition-all duration-200"
|
|
aria-label="LinkedIn"
|
|
>
|
|
<LinkedinIcon size={14} />
|
|
</a>
|
|
<a
|
|
href="mailto:zgaetano@wilddragon.net"
|
|
className="w-9 h-9 rounded-full border border-border flex items-center justify-center text-white/40 hover:text-accent hover:border-accent/30 transition-all duration-200"
|
|
aria-label="Email"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect width="20" height="16" x="2" y="4" rx="2" />
|
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nav columns */}
|
|
{navSections.map((section) => (
|
|
<div key={section.title} className="md:col-span-3">
|
|
<p className="font-mono text-[10px] tracking-[0.2em] uppercase text-white/30 mb-4">
|
|
{section.title}
|
|
</p>
|
|
<ul className="space-y-2.5">
|
|
{section.links.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
className="text-[13px] text-white/40 hover:text-accent transition-colors duration-200"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom bar */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-8">
|
|
<p className="text-[11px] text-white/25">
|
|
© {new Date().getFullYear()} Zachary Gaetano. All rights reserved.
|
|
</p>
|
|
<p className="text-[11px] text-white/20">
|
|
Washington, DC Area
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|