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

wip
Some checks failed
Build & Deploy / deploy (push) Failing after 17s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 16:06:16 +01:00
parent f64cb71170
commit e6651761f3
20 changed files with 453 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/Header.tsx
View File

@@ -43,10 +43,10 @@ export default function Header() {
];
const headerClass = cn(
"fixed top-0 left-0 right-0 z-50 transition-all duration-500",
"fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p",
{
"bg-transparent py-8": isHomePage && !isScrolled,
"bg-primary py-4 shadow-2xl": !isHomePage || isScrolled,
"bg-transparent py-4 md:py-8": isHomePage && !isScrolled,
"bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled,
}
);
@@ -56,20 +56,20 @@ export default function Header() {
return (
<>
<header className={headerClass}>
<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">
<div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
<Link href={`/${currentLocale}`} className="flex-shrink-0 group touch-target">
<Image
src={logoSrc}
alt="KLZ Cables"
width={120}
height={120}
className="h-14 w-auto transition-all duration-500 group-hover:scale-110"
className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
priority
unoptimized
/>
</Link>
<div className="flex items-center gap-12">
<div className="flex items-center gap-4 md:gap-12">
<nav className="hidden lg:flex items-center space-x-10">
{menuItems.map((item) => (
<Link
@@ -90,14 +90,14 @@ export default function Header() {
<div className="flex items-center space-x-4 text-sm font-extrabold tracking-widest uppercase">
<Link
href={getPathForLocale('en')}
className={`hover:text-accent transition-colors flex items-center gap-2 ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
>
EN
</Link>
<div className="w-px h-4 bg-current opacity-20" />
<Link
href={getPathForLocale('de')}
className={`hover:text-accent transition-colors flex items-center gap-2 ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
>
DE
</Link>
@@ -114,8 +114,8 @@ export default function Header() {
</div>
{/* Mobile Menu Button */}
<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">
<button className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20", textColorClass)}>
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>