migration wip

components/layout/Header.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { Container } from '@/components/ui/Container';
 import { Button } from '@/components/ui/Button';
 import { Navigation } from './Navigation';
@@ -23,7 +24,16 @@ export function Header({ locale, siteName = 'KLZ Cables', logo }: HeaderProps) {
               className="flex items-center gap-2 hover:opacity-80 transition-opacity"
             >
               {logo ? (
-                <img src={logo} alt={siteName} className="h-8 w-auto" />
+                <div className="relative h-8 w-auto">
+                  <Image
+                    src={logo.replace(/^\//, '')}
+                    alt={siteName}
+                    fill
+                    className="object-contain"
+                    sizes="(max-width: 768px) 100vw, 120px"
+                    priority={false}
+                  />
+                </div>
               ) : (
                 <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                   <span className="text-white font-bold text-sm">KLZ</span>
@@ -51,7 +61,7 @@ export function Header({ locale, siteName = 'KLZ Cables', logo }: HeaderProps) {
 
           {/* Mobile Menu */}
           <div className="flex items-center gap-2">
-            <MobileMenu locale={locale} siteName={siteName} />
+            <MobileMenu locale={locale} siteName={siteName} logo={logo} />
           </div>
         </div>
       </Container>