mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 02:57:53 +01:00
parent de87c62312
commit 021d23ab93
21 changed files with 967 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/Header.tsx
View File

@@ -43,16 +43,14 @@ export default function Header() {
];
const headerClass = cn(
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
"fixed top-0 left-0 right-0 z-50 transition-all duration-500",
{
"bg-transparent": isHomePage && !isScrolled,
"bg-white shadow-md": !isHomePage || isScrolled,
"py-4": !isScrolled,
"py-2": isScrolled
"bg-transparent py-8": isHomePage && !isScrolled,
"bg-white/90 backdrop-blur-xl shadow-2xl py-4 border-b border-primary/5": !isHomePage || isScrolled,
}
);
const textColorClass = (isHomePage && !isScrolled) ? "text-white" : "text-text-primary";
const textColorClass = (isHomePage && !isScrolled) ? "text-white" : "text-primary";
const logoSrc = (isHomePage && !isScrolled)
? "/logo-white.svg"
: "/logo-blue.svg";
@@ -60,64 +58,65 @@ export default function Header() {
return (
<>
<header className={headerClass}>
<div className="container mx-auto px-4 flex items-center justify-between">
<Link href={`/${currentLocale}`} className="flex-shrink-0">
<div className="container mx-auto px-6 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
<Link href={`/${currentLocale}`} className="flex-shrink-0 group">
<Image
src={logoSrc}
alt="KLZ Cables"
width={100}
height={100}
className="h-12 w-auto transition-all duration-300"
width={120}
height={120}
className="h-14 w-auto transition-all duration-500 group-hover:scale-110"
priority
unoptimized
/>
</Link>
<div className="flex items-center gap-8">
<nav className="hidden lg:flex items-center space-x-8">
<div className="flex items-center gap-12">
<nav className="hidden lg:flex items-center space-x-10">
{menuItems.map((item) => (
<Link
key={item.href}
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
className={cn(textColorClass, "hover:text-primary font-medium transition-colors text-lg")}
className={cn(
textColorClass,
"hover:text-accent font-bold transition-all text-lg tracking-tight relative group"
)}
>
{item.label}
<span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-300 group-hover:w-full rounded-full" />
</Link>
))}
</nav>
<div className={cn("hidden lg:flex items-center space-x-4", textColorClass)}>
<div className="flex items-center space-x-2 text-sm font-medium">
<div className={cn("hidden lg:flex items-center space-x-8", textColorClass)}>
<div className="flex items-center space-x-4 text-sm font-extrabold tracking-widest uppercase">
<Link
href={getPathForLocale('en')}
className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'en' ? 'text-primary font-bold' : 'opacity-80'}`}
className={`hover:text-accent transition-colors flex items-center gap-2 ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAmVBMVEViZsViZMJiYrf9gnL8eWrlYkjgYkjZYkj8/PujwPybvPz4+PetraBEgfo+fvo3efkydfkqcvj8Y2T8UlL8Q0P8MzP9k4Hz8/Lu7u4DdPj9/VrKysI9fPoDc/EAZ7z7IiLHYkjp6ekCcOTk5OIASbfY/v21takAJrT5Dg6sYkjc3Nn94t2RkYD+y8KeYkjs/v7l5fz0dF22YkjWvcOLAAAAgElEQVR4AR2KNULFQBgGZ5J13KGGKvc/Cw1uPe62eb9+Jr1EUBFHSgxxjP2Eca6AfUSfVlUfBvm1Ui1bqafctqMndNkXpb01h5TLx4b6TIXgwOCHfjv+/Pz+5vPRw7txGWT2h6yO0/GaYltIp5PT1dEpLNPL/SdWjYjAAZtvRPgHJX4Xio+DSrkAAAAASUVORK5CYII=" alt="English" width="16" height="11" />
EN
</Link>
<div className="w-px h-4 bg-current opacity-20" />
<Link
href={getPathForLocale('de')}
className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'de' ? 'text-primary font-bold' : 'opacity-80'}`}
className={`hover:text-accent transition-colors flex items-center gap-2 ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABLElEQVR4AY2QgUZEQRSGz9ydmzbYkBWABBJYABHEFhJ6m0WP0DMEQNIr9AKrN8ne2Tt3Zs7MOdOZmRBEv+v34Tvub9R6fdNlAzU+snSME/wdjbjbbJ6EiEg6BA8102QbjKNpoMzw8v6qD/sOALbbT2MC1NgaAWOKOgxf5czY+4dbAX2G/THzcozLrvPV85IQyqVz0rvg2p9Pei4HjzSsiFbV4JgyhhxCjpGdZ0RhdikLB9/b8Qig7MkpSovR7Cp59q6CazaNFiTt4J82o6uvdMVwTsztKTXZod4jgOJJuqNAjFyGrBR8gM6XwKfIC4KanBSTZ0rClKh08D9DFh3egW7ebH7NcRDQWrz9rM2Ne+mDOXB2mZJ8agL19nwxR2iZXGm1gDbQKhDjd4yHb2oW/KR8xHicAAAAAElFTkSuQmCC" alt="Deutsch" width="16" height="11" />
DE
</Link>
</div>
<Button
href={`/${currentLocale}/contact`}
variant="outline"
className={cn(
"rounded-full px-6 transition-colors",
isHomePage && !isScrolled
? "border-white text-white hover:bg-white hover:text-black"
: "border-primary text-primary hover:bg-primary hover:text-white"
)}
variant={isHomePage && !isScrolled ? "white" : "primary"}
size="md"
className="px-8 shadow-xl"
>
{t('contact')}
</Button>
</div>
{/* Mobile Menu Button */}
<button className={cn("lg:hidden p-2", textColorClass)}>
<button className={cn("lg:hidden p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20", textColorClass)}>
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
@@ -125,7 +124,7 @@ export default function Header() {
</div>
</div>
</header>
{!isHomePage && <div className="h-24 md:h-32" />}
{!isHomePage && <div className="h-32 md:h-40" />}
</>
);
}