70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import Image from "next/image";
|
|
import * as React from "react";
|
|
|
|
import LogoBlack from "../assets/logo/Logo Black Transparent.svg";
|
|
|
|
export const Footer: React.FC = () => {
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="relative py-10 md:py-16 mt-8 md:mt-24 border-t border-slate-100 bg-white z-10">
|
|
{/* Tech border at top */}
|
|
<div className="absolute top-0 left-0 right-0 h-px overflow-hidden">
|
|
<div
|
|
className="h-full w-full"
|
|
style={{
|
|
background:
|
|
"linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.15) 25%, rgba(191, 206, 228, 0.1) 50%, rgba(148, 163, 184, 0.15) 75%, transparent 100%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="narrow-container">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-end">
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-3">
|
|
<Image
|
|
src={LogoBlack}
|
|
alt="Marc Mintel"
|
|
height={64}
|
|
className="h-12 md:h-16 w-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:items-end gap-3 md:gap-4 text-xs md:text-sm font-mono text-slate-300 uppercase tracking-widest">
|
|
<span>© {currentYear}</span>
|
|
<div className="flex gap-8">
|
|
<a
|
|
href="/about"
|
|
className="hover:text-slate-900 transition-colors duration-300 no-underline"
|
|
>
|
|
Über mich
|
|
</a>
|
|
<a
|
|
href="/contact"
|
|
className="hover:text-slate-900 transition-colors duration-300 no-underline"
|
|
>
|
|
Kontakt
|
|
</a>
|
|
<a
|
|
href="https://github.com/marcmintel"
|
|
className="hover:text-slate-900 transition-colors duration-300 no-underline"
|
|
>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
{/* Subtle binary decoration */}
|
|
<span
|
|
className="text-[8px] text-slate-200 tracking-[0.5em] select-none font-mono"
|
|
aria-hidden="true"
|
|
>
|
|
01001101 01001001 01001110
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|