94 lines
5.0 KiB
TypeScript
94 lines
5.0 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">
|
|
<a href="https://www.linkedin.com/company/klz-vertriebs-gmbh/" target="_blank" rel="noopener noreferrer" 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">LinkedIn</span>
|
|
<svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
|
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
|
</svg>
|
|
</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>
|
|
);
|
|
}
|