Marc Mintel
a2cf9791ae
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🧪 QA (push) Successful in 2m8s
Build & Deploy / 🏗️ Build (push) Successful in 4m5s
Build & Deploy / 🚀 Deploy (push) Successful in 17s
Build & Deploy / 🧪 Post-Deploy Verification (push) Failing after 4m16s
Build & Deploy / 🔔 Notify (push) Successful in 4s
- Switch to grid-cols-2 on mobile (was grid-cols-1) - Brand column: col-span-2 (full width on mobile) - Legal + Company columns: col-span-1 each (side-by-side on mobile) - Recent Posts column: col-span-2 (full width on mobile) - Reduce footer padding: py-14 md:py-24 (was py-24) - Tighten grid gap: gap-10 md:gap-16 (was gap-16) - Bottom bar: flex-row always so copyright + language on one line
283 lines
11 KiB
TypeScript
283 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
import { useTranslations, useLocale } from 'next-intl';
|
||
import { Container } from './ui';
|
||
import { useAnalytics } from './analytics/useAnalytics';
|
||
import { AnalyticsEvents } from './analytics/analytics-events';
|
||
|
||
export default function Footer() {
|
||
const t = useTranslations('Footer');
|
||
const navT = useTranslations('Navigation');
|
||
const { trackEvent } = useAnalytics();
|
||
const locale = useLocale();
|
||
const currentYear = new Date().getFullYear();
|
||
|
||
return (
|
||
<footer className="bg-primary text-white py-14 md:py-24 relative overflow-hidden content-visibility-auto">
|
||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||
|
||
<Container>
|
||
<h2 className="sr-only">Footer Navigation</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-12 gap-10 md:gap-16 mb-12 md:mb-20">
|
||
{/* Brand Column – full width on mobile */}
|
||
<div className="col-span-2 md:col-span-2 lg:col-span-4 space-y-6 md:space-y-8">
|
||
<Link
|
||
href={`/${locale}`}
|
||
className="inline-block group"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
|
||
target: 'home_logo',
|
||
location: 'footer',
|
||
})
|
||
}
|
||
>
|
||
<Image
|
||
src="/logo-white.svg"
|
||
alt="KLZ Vertriebs GmbH"
|
||
width={150}
|
||
height={40}
|
||
style={{ width: 'auto' }}
|
||
className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
|
||
/>
|
||
</Link>
|
||
<p className="text-white/60 text-base md:text-lg leading-relaxed max-w-sm">
|
||
{t('tagline')}
|
||
</p>
|
||
<div className="flex gap-4">
|
||
<a
|
||
href="https://www.linkedin.com/company/klz-vertriebs-gmbh/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
||
type: 'social',
|
||
target: 'linkedin',
|
||
location: 'footer',
|
||
})
|
||
}
|
||
className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white 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>
|
||
|
||
{/* Legal Column */}
|
||
<div className="col-span-1 lg:col-span-2">
|
||
<h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
|
||
{t('legal')}
|
||
</h3>
|
||
<ul className="space-y-4 text-white/70 list-none m-0 p-0">
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/${t('legalNoticeSlug')}`}
|
||
className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
||
label: t('legalNotice'),
|
||
href: t('legalNoticeSlug'),
|
||
location: 'footer_legal',
|
||
})
|
||
}
|
||
>
|
||
{t('legalNotice')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/${t('privacyPolicySlug')}`}
|
||
className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
||
label: t('privacyPolicy'),
|
||
href: t('privacyPolicySlug'),
|
||
location: 'footer_legal',
|
||
})
|
||
}
|
||
>
|
||
{t('privacyPolicy')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/${t('termsSlug')}`}
|
||
className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
||
label: t('terms'),
|
||
href: t('termsSlug'),
|
||
location: 'footer_legal',
|
||
})
|
||
}
|
||
>
|
||
{t('terms')}
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Company Column */}
|
||
<div className="col-span-1 lg:col-span-2">
|
||
<h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
|
||
{t('company')}
|
||
</h3>
|
||
<ul className="space-y-4 text-white/70 list-none m-0 p-0">
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/team`}
|
||
className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
||
label: navT('team'),
|
||
href: '/team',
|
||
location: 'footer_company',
|
||
})
|
||
}
|
||
>
|
||
{navT('team')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
|
||
className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
||
label: navT('products'),
|
||
href: locale === 'de' ? '/produkte' : '/products',
|
||
location: 'footer_company',
|
||
})
|
||
}
|
||
>
|
||
{navT('products')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/blog`}
|
||
className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
||
label: navT('blog'),
|
||
href: '/blog',
|
||
location: 'footer_company',
|
||
})
|
||
}
|
||
>
|
||
{navT('blog')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
|
||
className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.LINK_CLICK, {
|
||
label: navT('contact'),
|
||
href: locale === 'de' ? '/kontakt' : '/contact',
|
||
location: 'footer_company',
|
||
})
|
||
}
|
||
>
|
||
{navT('contact')}
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Recent Posts Column – full width on mobile */}
|
||
<div className="col-span-2 md:col-span-2 lg:col-span-4">
|
||
<h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
|
||
{t('recentPosts')}
|
||
</h3>
|
||
<ul className="space-y-6 list-none m-0 p-0">
|
||
{[
|
||
{
|
||
title:
|
||
locale === 'de'
|
||
? 'Windparkbau im Fokus: drei typische Kabelherausforderungen'
|
||
: 'Focus on wind farm construction: three typical cable challenges',
|
||
slug:
|
||
locale === 'de'
|
||
? 'windparkbau-im-fokus-drei-typische-kabelherausforderungen'
|
||
: 'focus-on-wind-farm-construction-three-typical-cable-challenges',
|
||
},
|
||
{
|
||
title:
|
||
locale === 'de'
|
||
? 'Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist'
|
||
: 'Why the N2XS(F)2Y is the ideal cable for your energy project',
|
||
slug:
|
||
locale === 'de'
|
||
? 'n2xsf2y-mittelspannungskabel-energieprojekt'
|
||
: 'why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project',
|
||
},
|
||
].map((post, i) => (
|
||
<li key={i}>
|
||
<Link
|
||
href={`/${locale}/blog/${post.slug}`}
|
||
className="group block text-white/80"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.BLOG_POST_VIEW, {
|
||
title: post.title,
|
||
slug: post.slug,
|
||
location: 'footer_recent',
|
||
})
|
||
}
|
||
>
|
||
<p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
|
||
{post.title}
|
||
</p>
|
||
<span className="text-xs text-white/70 uppercase tracking-widest">
|
||
{t('readArticle')} →
|
||
</span>
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium">
|
||
<p>{t('copyright', { year: currentYear })}</p>
|
||
<div className="flex gap-8">
|
||
<Link
|
||
href="/en"
|
||
className="hover:text-white transition-colors"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
|
||
type: 'language',
|
||
from: locale,
|
||
to: 'en',
|
||
location: 'footer',
|
||
})
|
||
}
|
||
>
|
||
English
|
||
</Link>
|
||
<Link
|
||
href="/de"
|
||
className="hover:text-white transition-colors"
|
||
onClick={() =>
|
||
trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
|
||
type: 'language',
|
||
from: locale,
|
||
to: 'de',
|
||
location: 'footer',
|
||
})
|
||
}
|
||
>
|
||
Deutsch
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</footer>
|
||
);
|
||
}
|