wip
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
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');
|
||||
@@ -8,92 +9,85 @@ export default function 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">{t('legal')}</h4>
|
||||
<ul className="space-y-2 text-sm text-text-secondary">
|
||||
<li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-primary">{t('legalNotice')}</Link></li>
|
||||
<li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-primary">{t('privacyPolicy')}</Link></li>
|
||||
<li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-primary">{t('terms')}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-bold mb-4">{t('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
|
||||
/>
|
||||
<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>
|
||||
|
||||
{/* Column 2: Archives */}
|
||||
<div>
|
||||
<h4 className="text-lg font-bold mb-4">{t('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">{t('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 */}
|
||||
{/* Links Columns */}
|
||||
<div className="lg:col-span-2">
|
||||
<h4 className="text-lg font-bold mb-4">{t('recentPosts')}</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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user