94 lines
4.6 KiB
TypeScript
94 lines
4.6 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { useTranslations, useLocale } from 'next-intl';
|
|
import { Container, Heading } from './ui';
|
|
|
|
export default function Footer() {
|
|
const t = useTranslations('Footer');
|
|
const locale = useLocale();
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="bg-primary-dark text-white py-24 relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
|
|
|
<Container>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
|
|
{/* Brand Column */}
|
|
<div className="lg:col-span-4 space-y-8">
|
|
<Link href={`/${locale}`} className="inline-block group">
|
|
<Image
|
|
src="/logo-white.svg"
|
|
alt="KLZ Cables"
|
|
width={150}
|
|
height={40}
|
|
className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
|
|
unoptimized
|
|
/>
|
|
</Link>
|
|
<p className="text-white/60 text-lg leading-relaxed max-w-sm">
|
|
Leading the way in cable infrastructure and sustainable energy solutions. Quality, innovation, and reliability since 1998.
|
|
</p>
|
|
<div className="flex gap-4">
|
|
{['linkedin', 'twitter', 'facebook'].map((social) => (
|
|
<a key={social} href="#" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
|
|
<span className="sr-only">{social}</span>
|
|
<div className="w-5 h-5 bg-current rounded-sm opacity-80" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Links Columns */}
|
|
<div className="lg:col-span-2">
|
|
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('legal')}</h4>
|
|
<ul className="space-y-4 text-white/70">
|
|
<li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-white transition-colors">{t('legalNotice')}</Link></li>
|
|
<li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-white transition-colors">{t('privacyPolicy')}</Link></li>
|
|
<li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-white transition-colors">{t('terms')}</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="lg:col-span-2">
|
|
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">Company</h4>
|
|
<ul className="space-y-4 text-white/70">
|
|
<li><Link href={`/${locale}/team`} className="hover:text-white transition-colors">Our Team</Link></li>
|
|
<li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">Products</Link></li>
|
|
<li><Link href={`/${locale}/blog`} className="hover:text-white transition-colors">Blog</Link></li>
|
|
<li><Link href={`/${locale}/contact`} className="hover:text-white transition-colors">Contact</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Recent Posts Column */}
|
|
<div className="lg:col-span-4">
|
|
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('recentPosts')}</h4>
|
|
<ul className="space-y-6">
|
|
{[
|
|
"Focus on wind farm construction: three typical cable challenges",
|
|
"Why the N2XS(F)2Y is the ideal cable for your energy project"
|
|
].map((post, i) => (
|
|
<li key={i}>
|
|
<Link href="#" className="group block">
|
|
<p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2">
|
|
{post}
|
|
</p>
|
|
<span className="text-xs text-white/40 uppercase tracking-widest">Read Article →</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-sm font-medium">
|
|
<p>Copyright © {currentYear} KLZ Vertriebs GmbH. All rights reserved.</p>
|
|
<div className="flex gap-8">
|
|
<Link href="/en" className="hover:text-white transition-colors">English</Link>
|
|
<Link href="/de" className="hover:text-white transition-colors">Deutsch</Link>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</footer>
|
|
);
|
|
}
|