99 lines
4.4 KiB
TypeScript
99 lines
4.4 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export default function Footer() {
|
|
const t = useTranslations('Footer');
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="bg-white text-neutral-dark py-16 border-t border-neutral-light">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
|
|
{/* Column 1: Legal & Languages */}
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h4 className="text-lg font-bold mb-4">Legal</h4>
|
|
<ul className="space-y-2 text-sm text-text-secondary">
|
|
<li><Link href="/legal-notice" className="hover:text-primary">Legal Notice</Link></li>
|
|
<li><Link href="/privacy-policy" className="hover:text-primary">Privacy Policy</Link></li>
|
|
<li><Link href="/terms" className="hover:text-primary">Terms</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-bold mb-4">Languages</h4>
|
|
<ul className="space-y-2 text-sm text-text-secondary">
|
|
<li><Link href="/en" className="hover:text-primary">English</Link></li>
|
|
<li><Link href="/de" className="hover:text-primary">Deutsch</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-text-secondary">
|
|
Copyright © {currentYear} KLZ Cables.<br />
|
|
All rights reserved.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Image
|
|
src="/logo-white.svg"
|
|
alt="KLZ Cables"
|
|
width={100}
|
|
height={25}
|
|
className="h-6 w-auto invert"
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 2: Archives */}
|
|
<div>
|
|
<h4 className="text-lg font-bold mb-4">Archives</h4>
|
|
<ul className="space-y-2 text-sm text-text-secondary">
|
|
<li><Link href="#" className="hover:text-primary">November 2025</Link></li>
|
|
<li><Link href="#" className="hover:text-primary">September 2025</Link></li>
|
|
<li><Link href="#" className="hover:text-primary">August 2025</Link></li>
|
|
<li><Link href="#" className="hover:text-primary">June 2025</Link></li>
|
|
<li><Link href="#" className="hover:text-primary">May 2025</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Column 3: Categories */}
|
|
<div>
|
|
<h4 className="text-lg font-bold mb-4">Categories</h4>
|
|
<ul className="space-y-2 text-sm text-text-secondary">
|
|
<li><Link href="#" className="hover:text-primary">Cable Logistics</Link></li>
|
|
<li><Link href="#" className="hover:text-primary">Cable Technology</Link></li>
|
|
<li><Link href="#" className="hover:text-primary">KLZ News</Link></li>
|
|
<li><Link href="#" className="hover:text-primary">Renewable Energy</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Column 4: Recent Posts */}
|
|
<div className="lg:col-span-2">
|
|
<h4 className="text-lg font-bold mb-4">Recent Posts</h4>
|
|
<ul className="space-y-4 text-sm text-text-secondary">
|
|
<li>
|
|
<Link href="#" className="hover:text-primary block font-medium">Focus on wind farm construction: three typical cable challenges</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#" className="hover:text-primary block font-medium">Why the N2XS(F)2Y is the ideal cable for your energy project</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#" className="hover:text-primary block font-medium">Shortage of NA2XSF2Y? We have the three-core medium-voltage cable</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#" className="hover:text-primary block font-medium">Which cables for wind power? Differences from low to extra-high voltage explained</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slide out widget area (hidden for now, but referenced in HTML) */}
|
|
<div className="fixed top-0 right-0 h-full w-80 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
|
|
{/* Content would go here */}
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|