wip
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export default function Footer() {
|
||||
@@ -10,7 +11,15 @@ export default function Footer() {
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-text-primary mb-4">KLZ Cables</h4>
|
||||
<Link href="/" className="block mb-4">
|
||||
<Image
|
||||
src="https://klz-cables.com/wp-content/uploads/2023/11/KLZ-Logo-blau.svg"
|
||||
alt="KLZ Cables"
|
||||
width={100}
|
||||
height={48}
|
||||
className="h-12 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
<p className="mb-4">
|
||||
Raiffeisenstraße 22<br />
|
||||
73630 Remshalden<br />
|
||||
@@ -34,10 +43,10 @@ export default function Footer() {
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-text-primary mb-4">{t('products')}</h4>
|
||||
<ul className="space-y-2">
|
||||
<li><Link href="/products/low-voltage" className="hover:text-primary">{t('lowVoltage')}</Link></li>
|
||||
<li><Link href="/products/medium-voltage" className="hover:text-primary">{t('mediumVoltage')}</Link></li>
|
||||
<li><Link href="/products/high-voltage" className="hover:text-primary">{t('highVoltage')}</Link></li>
|
||||
<li><Link href="/products/solar" className="hover:text-primary">{t('solar')}</Link></li>
|
||||
<li><Link href="/products/low-voltage-cables" className="hover:text-primary">{t('lowVoltage')}</Link></li>
|
||||
<li><Link href="/products/medium-voltage-cables" className="hover:text-primary">{t('mediumVoltage')}</Link></li>
|
||||
<li><Link href="/products/high-voltage-cables" className="hover:text-primary">{t('highVoltage')}</Link></li>
|
||||
<li><Link href="/products/solar-cables" className="hover:text-primary">{t('solar')}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -45,8 +54,16 @@ export default function Footer() {
|
||||
<h4 className="text-lg font-bold text-text-primary mb-4">{t('followUs')}</h4>
|
||||
<div className="flex space-x-4">
|
||||
{/* Social Icons */}
|
||||
<a href="#" className="hover:text-primary">LinkedIn</a>
|
||||
<a href="#" className="hover:text-primary">Instagram</a>
|
||||
<a href="https://www.linkedin.com/company/klz-cables" target="_blank" rel="noopener noreferrer" className="hover:text-primary">
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fillRule="evenodd" 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" clipRule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/klz_cables/" target="_blank" rel="noopener noreferrer" className="hover:text-primary">
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.468 2.53c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
export default function Header() {
|
||||
const t = useTranslations('Navigation');
|
||||
const locale = useLocale();
|
||||
const pathname = usePathname();
|
||||
|
||||
// Extract locale from pathname
|
||||
const currentLocale = pathname.split('/')[1] || 'en';
|
||||
|
||||
// Function to get path for a different locale
|
||||
const getPathForLocale = (newLocale: string) => {
|
||||
const segments = pathname.split('/');
|
||||
segments[1] = newLocale;
|
||||
return segments.join('/');
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{ label: t('home'), href: '/' },
|
||||
{ label: t('team'), href: '/team' },
|
||||
{ label: t('products'), href: '/products' }, // This might need a dropdown
|
||||
{ label: t('products'), href: '/products' },
|
||||
{ label: t('blog'), href: '/blog' },
|
||||
{ label: t('contact'), href: '/contact' },
|
||||
];
|
||||
@@ -17,16 +30,22 @@ export default function Header() {
|
||||
return (
|
||||
<header className="bg-white shadow-sm sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4 h-20 flex items-center justify-between">
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
{/* Use local logo if available, or text for now */}
|
||||
<span className="text-2xl font-bold text-primary">KLZ Cables</span>
|
||||
<Link href={`/${currentLocale}`} className="flex-shrink-0">
|
||||
<Image
|
||||
src="https://klz-cables.com/wp-content/uploads/2023/11/KLZ-Logo-blau.svg"
|
||||
alt="KLZ Cables"
|
||||
width={100}
|
||||
height={48}
|
||||
className="h-12 w-auto"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{menuItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={`/${locale}${item.href}`}
|
||||
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
|
||||
className="text-text-primary hover:text-primary font-medium transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
@@ -36,9 +55,19 @@ export default function Header() {
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2 text-sm font-medium">
|
||||
<Link href="/en" className={`hover:text-primary ${locale === 'en' ? 'text-primary' : 'text-text-secondary'}`}>EN</Link>
|
||||
<Link
|
||||
href={getPathForLocale('en')}
|
||||
className={`hover:text-primary transition-colors ${currentLocale === 'en' ? 'text-primary font-bold' : 'text-text-secondary'}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
<span className="text-text-light">|</span>
|
||||
<Link href="/de" className={`hover:text-primary ${locale === 'de' ? 'text-primary' : 'text-text-secondary'}`}>DE</Link>
|
||||
<Link
|
||||
href={getPathForLocale('de')}
|
||||
className={`hover:text-primary transition-colors ${currentLocale === 'de' ? 'text-primary font-bold' : 'text-text-secondary'}`}
|
||||
>
|
||||
DE
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button (Placeholder) */}
|
||||
|
||||
Reference in New Issue
Block a user