performance

components/Layout.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion';
 import { ArrowUp, Home, Info, Menu, X } from 'lucide-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -55,12 +56,15 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             className="relative z-10 flex items-center group"
             aria-label="MB Grid Solutions - Zur Startseite"
           >
-            <img
-              src="/assets/logo.png"
-              alt="MB Grid Solutions"
-              className={`transition-all duration-300 object-contain ${isScrolled ? 'h-[50px] md:h-[80px] my-[-5px]' : 'h-[80px] md:h-[140px] my-[-10px] md:my-[-20px]'}`}
-              loading="eager"
-            />
+            <div className={`relative transition-all duration-300 ${isScrolled ? 'h-[50px] md:h-[80px] w-[120px] md:w-[200px] my-[-5px]' : 'h-[80px] md:h-[140px] w-[180px] md:w-[320px] my-[-10px] md:my-[-20px]'}`}>
+              <Image
+                src="/assets/logo.png"
+                alt="MB Grid Solutions"
+                fill
+                className="object-contain"
+                priority
+              />
+            </div>
           </Link>
 
           {/* Desktop Navigation */}
@@ -100,9 +104,10 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
       </Reveal>
 
       {/* Mobile Menu Overlay */}
+      <LazyMotion features={domAnimation}>
       <AnimatePresence>
         {isMobileMenuOpen && (
-          <motion.div
+          <m.div
             initial={{ opacity: 0, y: -20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
@@ -130,9 +135,10 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                 Projekt anfragen
               </Button>
             </nav>
-          </motion.div>
+          </m.div>
         )}
       </AnimatePresence>
+      </LazyMotion>
 
       <main className="flex-grow">
         {children}
@@ -153,16 +159,18 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           <div className="absolute inset-0 grid-pattern opacity-[0.08] pointer-events-none" />
           
           {/* Animated Tech Lines */}
-          <motion.div
+          <LazyMotion features={domAnimation}>
+          <m.div
             animate={{ x: ['-100%', '100%'] }}
             transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
             className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-accent/30 to-transparent"
           />
-          <motion.div
+          <m.div
             animate={{ x: ['100%', '-100%'] }}
             transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
             className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-accent/20 to-transparent"
           />
+          </LazyMotion>
 
           {/* Corner Accents */}
           <div className="tech-corner top-8 left-8 border-t border-l border-white/10 group-hover:border-accent/30 transition-colors duration-700" />
@@ -172,12 +180,14 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 md:gap-12 mb-12 md:mb-16">
             <div className="lg:col-span-2">
               <Link href="/" className="inline-block mb-6 md:mb-8 group">
-                <img
-                  src="/assets/logo.png"
-                  alt="MB Grid Solutions"
-                  className="h-16 md:h-20 brightness-0 invert opacity-80 group-hover:opacity-100 transition-opacity"
-                  loading="lazy"
-                />
+                <div className="relative h-16 md:h-20 w-48 brightness-0 invert opacity-80 group-hover:opacity-100 transition-opacity">
+                  <Image
+                    src="/assets/logo.png"
+                    alt="MB Grid Solutions"
+                    fill
+                    className="object-contain object-left"
+                  />
+                </div>
               </Link>
               <p className="text-slate-400 max-w-md leading-relaxed mb-8">
                 Ihr spezialisierter Partner für herstellerneutrale technische Beratung und Projektbegleitung bei Energiekabelprojekten bis 110 kV.