chore: release v1.2.6 with Next.js LCP, Hydration and Prod-Visibility fixes

components/Header.tsx

@@ -2,7 +2,6 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 import { usePathname } from 'next/navigation';
 import { Button } from './ui';
@@ -18,7 +17,6 @@ export default function Header() {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const mobileMenuRef = useRef<HTMLDivElement>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
 
   // Extract locale from pathname
   const currentLocale = pathname.split('/')[1] || 'en';
@@ -35,7 +33,6 @@ export default function Header() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // Prevent scroll when mobile menu is open
   // Prevent scroll when mobile menu is open and handle focus trap
   useEffect(() => {
     if (isMobileMenuOpen) {
@@ -102,7 +99,7 @@ export default function Header() {
   ];
 
   const headerClass = cn(
-    'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu',
+    'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu animate-in fade-in slide-in-from-top-12 fill-mode-both',
     {
       'bg-transparent py-4 md:py-8': isHomePage && !isScrolled && !isMobileMenuOpen,
       'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen,
@@ -114,263 +111,41 @@ export default function Header() {
 
   return (
     <>
-      <LazyMotion strict features={domAnimation}>
-        <m.header
-          className={headerClass}
-          initial={{ y: -100, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.8, ease: 'easeOut' }}
-        >
-          <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
-            <m.div
-              className="flex-shrink-0 group touch-target"
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              transition={{ duration: 0.6, ease: 'easeOut', delay: 0.1 }}
+      <header className={headerClass} style={{ animationDuration: '800ms' }}>
+        <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
+          <div
+            className="flex-shrink-0 group touch-target animate-in fade-in zoom-in-90 fill-mode-both"
+            style={{ animationDuration: '600ms', animationDelay: '100ms' }}
+          >
+            <Link
+              href={`/${currentLocale}`}
+              onClick={() =>
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  target: 'home_logo',
+                  location: 'header',
+                })
+              }
             >
-              <Link
-                href={`/${currentLocale}`}
-                onClick={() =>
-                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                    target: 'home_logo',
-                    location: 'header',
-                  })
-                }
-              >
-                <Image
-                  src={logoSrc}
-                  alt={t('home')}
-                  width={120}
-                  height={120}
-                  className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
-                  priority
-                />
-              </Link>
-            </m.div>
-
-            <m.div
-              className="flex items-center gap-4 md:gap-12"
-              initial="hidden"
-              animate="visible"
-              variants={{
-                visible: {
-                  transition: {
-                    staggerChildren: 0.08,
-                    delayChildren: 0.3,
-                  },
-                },
-              }}
-            >
-              <m.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
-                {menuItems.map((item, _idx) => (
-                  <m.div key={item.href} variants={navLinkVariants}>
-                    <Link
-                      href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                      onClick={() => {
-                        setIsMobileMenuOpen(false);
-                        trackEvent(AnalyticsEvents.LINK_CLICK, {
-                          label: item.label,
-                          href: item.href,
-                          location: 'header_nav',
-                        });
-                      }}
-                      className={cn(
-                        textColorClass,
-                        'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
-                      )}
-                    >
-                      {item.label}
-                      <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
-                    </Link>
-                  </m.div>
-                ))}
-              </m.nav>
-
-              <m.div
-                className={cn('hidden lg:flex items-center space-x-8', textColorClass)}
-                variants={headerRightVariants}
-              >
-                <m.div
-                  className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase"
-                  initial={{ opacity: 0, x: 20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ duration: 0.5, delay: 0.6 }}
-                >
-                  <m.div
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ duration: 0.4, delay: 0.65 }}
-                  >
-                    <Link
-                      href={getPathForLocale('en')}
-                      onClick={() =>
-                        trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
-                          type: 'language',
-                          from: currentLocale,
-                          to: 'en',
-                          location: 'header',
-                        })
-                      }
-                      className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
-                    >
-                      EN
-                    </Link>
-                  </m.div>
-                  <m.div
-                    className="w-px h-4 bg-current opacity-20"
-                    initial={{ scaleY: 0 }}
-                    animate={{ scaleY: 1 }}
-                    transition={{ duration: 0.4, delay: 0.7 }}
-                  />
-                  <m.div
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ duration: 0.4, delay: 0.75 }}
-                  >
-                    <Link
-                      href={getPathForLocale('de')}
-                      onClick={() =>
-                        trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
-                          type: 'language',
-                          from: currentLocale,
-                          to: 'de',
-                          location: 'header',
-                        })
-                      }
-                      className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
-                    >
-                      DE
-                    </Link>
-                  </m.div>
-                </m.div>
-
-                <m.div
-                  initial={{ scale: 0.9, opacity: 0 }}
-                  animate={{ scale: 1, opacity: 1 }}
-                  transition={{ duration: 0.6, type: 'spring', stiffness: 400, delay: 0.7 }}
-                >
-                  <Button
-                    href={`/${currentLocale}/contact`}
-                    variant="white"
-                    size="md"
-                    className="px-8 shadow-xl"
-                    onClick={() =>
-                      trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                        label: t('contact'),
-                        location: 'header_cta',
-                      })
-                    }
-                  >
-                    {t('contact')}
-                  </Button>
-                </m.div>
-              </m.div>
-
-              {/* Mobile Menu Button */}
-              <m.button
-                className={cn(
-                  'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50',
-                  textColorClass,
-                )}
-                aria-label={t('toggleMenu')}
-                aria-expanded={isMobileMenuOpen}
-                aria-controls="mobile-menu"
-                initial={{ scale: 0.8, opacity: 0, rotate: -180 }}
-                animate={{ scale: 1, opacity: 1, rotate: 0 }}
-                transition={{
-                  duration: 0.6,
-                  type: 'spring',
-                  stiffness: 300,
-                  damping: 20,
-                  delay: 0.5,
-                }}
-                onClick={() => {
-                  const newState = !isMobileMenuOpen;
-                  setIsMobileMenuOpen(newState);
-                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                    type: 'mobile_menu',
-                    action: newState ? 'open' : 'close',
-                  });
-                }}
-              >
-                <m.svg
-                  className="w-7 h-7"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  initial={{ scale: 0 }}
-                  animate={{ scale: 1 }}
-                  transition={{ duration: 0.3, delay: 0.6 }}
-                >
-                  {isMobileMenuOpen ? (
-                    <m.path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M6 18L18 6M6 6l12 12"
-                      initial={{ pathLength: 0 }}
-                      animate={{ pathLength: 1 }}
-                      transition={{ duration: 0.4, delay: 0.7 }}
-                    />
-                  ) : (
-                    <m.path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4 6h16M4 12h16M4 18h16"
-                      initial={{ pathLength: 0 }}
-                      animate={{ pathLength: 1 }}
-                      transition={{ duration: 0.4, delay: 0.7 }}
-                    />
-                  )}
-                </m.svg>
-              </m.button>
-            </m.div>
+              <Image
+                src={logoSrc}
+                alt={t('home')}
+                width={120}
+                height={120}
+                className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
+                priority
+              />
+            </Link>
           </div>
 
-          {/* Mobile Menu Overlay */}
           <div
-            className={cn(
-              'fixed inset-0 bg-primary z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col',
-              isMobileMenuOpen
-                ? 'opacity-100 translate-y-0'
-                : 'opacity-0 -translate-y-full pointer-events-none',
-            )}
-            id="mobile-menu"
-            role="dialog"
-            aria-modal="true"
-            aria-label={t('menu')}
-            ref={mobileMenuRef}
+            className="flex items-center gap-4 md:gap-12"
           >
-            <m.nav
-              className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"
-              initial="closed"
-              animate={isMobileMenuOpen ? 'open' : 'closed'}
-              variants={{
-                open: {
-                  transition: {
-                    staggerChildren: 0.1,
-                    delayChildren: 0.2,
-                  },
-                },
-              }}
-            >
+            <nav className="hidden lg:flex items-center space-x-10">
               {menuItems.map((item, idx) => (
-                <m.div
+                <div
                   key={item.href}
-                  variants={{
-                    closed: { opacity: 0, y: 50, scale: 0.9 },
-                    open: {
-                      opacity: 1,
-                      y: 0,
-                      scale: 1,
-                      transition: {
-                        duration: 0.6,
-                        ease: 'easeOut',
-                        delay: idx * 0.08,
-                      },
-                    },
-                  }}
+                  className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
+                  style={{ animationDuration: '500ms', animationDelay: `${150 + idx * 80}ms` }}
                 >
                   <Link
                     href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
@@ -379,128 +154,214 @@ export default function Header() {
                       trackEvent(AnalyticsEvents.LINK_CLICK, {
                         label: item.label,
                         href: item.href,
-                        location: 'mobile_menu',
+                        location: 'header_nav',
                       });
                     }}
-                    className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
+                    className={cn(
+                      textColorClass,
+                      'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
+                    )}
                   >
                     {item.label}
+                    <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
                   </Link>
-                </m.div>
+                </div>
               ))}
+            </nav>
 
-              <m.div
-                className="pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8"
-                initial={{ opacity: 0, y: 30 }}
-                animate={isMobileMenuOpen ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-                transition={{ duration: 0.5, delay: 0.8 }}
+            <div
+              className={cn('hidden lg:flex items-center space-x-8 animate-in fade-in slide-in-from-right-8 fill-mode-both', textColorClass)}
+              style={{ animationDuration: '600ms', animationDelay: '300ms' }}
+            >
+              <div
+                className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase animate-in fade-in slide-in-from-left-4 fill-mode-both"
+                style={{ animationDuration: '500ms', animationDelay: '600ms' }}
               >
-                <m.div
-                  className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white"
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.4, delay: 0.9 }}
-                >
-                  <m.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.3, delay: 1.0 }}
+                <div>
+                  <Link
+                    href={getPathForLocale('en')}
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                        type: 'language',
+                        from: currentLocale,
+                        to: 'en',
+                        location: 'header',
+                      })
+                    }
+                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                   >
-                    <Link
-                      href={getPathForLocale('en')}
-                      className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
-                    >
-                      EN
-                    </Link>
-                  </m.div>
-                  <m.div
-                    className="w-px h-6 bg-white/20"
-                    initial={{ scaleX: 0 }}
-                    animate={{ scaleX: 1 }}
-                    transition={{ duration: 0.4, delay: 1.05 }}
+                    EN
+                  </Link>
+                </div>
+                <div className="w-px h-4 bg-current opacity-20" />
+                <div>
+                  <Link
+                    href={getPathForLocale('de')}
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                        type: 'language',
+                        from: currentLocale,
+                        to: 'de',
+                        location: 'header',
+                      })
+                    }
+                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    DE
+                  </Link>
+                </div>
+              </div>
+
+              <div
+                className="animate-in fade-in zoom-in-95 fill-mode-both"
+                style={{ animationDuration: '600ms', animationDelay: '700ms' }}
+              >
+                <Button
+                  href={`/${currentLocale}/contact`}
+                  variant="white"
+                  size="md"
+                  className="px-8 shadow-xl hover:scale-105 transition-transform"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                      label: t('contact'),
+                      location: 'header_cta',
+                    })
+                  }
+                >
+                  {t('contact')}
+                </Button>
+              </div>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <button
+              className={cn(
+                'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50 transition-all duration-300',
+                textColorClass,
+                isMobileMenuOpen ? 'rotate-90 scale-110' : 'rotate-0 scale-100'
+              )}
+              aria-label={t('toggleMenu')}
+              aria-expanded={isMobileMenuOpen}
+              aria-controls="mobile-menu"
+              onClick={() => {
+                const newState = !isMobileMenuOpen;
+                setIsMobileMenuOpen(newState);
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  type: 'mobile_menu',
+                  action: newState ? 'open' : 'close',
+                });
+              }}
+            >
+              <svg
+                className="w-7 h-7 transition-transform duration-300"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                {isMobileMenuOpen ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
                   />
-                  <m.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.3, delay: 1.1 }}
-                  >
-                    <Link
-                      href={getPathForLocale('de')}
-                      className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
-                    >
-                      DE
-                    </Link>
-                  </m.div>
-                </m.div>
-
-                <m.div
-                  initial={{ scale: 0.9, opacity: 0, y: 20 }}
-                  animate={{ scale: 1, opacity: 1, y: 0 }}
-                  transition={{ type: 'spring', stiffness: 400, damping: 20, delay: 1.2 }}
-                >
-                  <Button
-                    href={`/${currentLocale}/contact`}
-                    variant="accent"
-                    size="lg"
-                    className="w-full max-w-xs py-6 text-lg md:text-xl shadow-2xl"
-                  >
-                    {t('contact')}
-                  </Button>
-                </m.div>
-              </m.div>
-
-              {/* Bottom Branding */}
-              <m.div
-                className="p-12 flex justify-center opacity-20"
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
-                transition={{ duration: 0.5, delay: 1.4 }}
-              >
-                <m.div
-                  initial={{ scale: 0.5 }}
-                  animate={{ scale: 1 }}
-                  transition={{ type: 'spring', stiffness: 300, delay: 1.5 }}
-                >
-                  <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
-                </m.div>
-              </m.div>
-            </m.nav>
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                )}
+              </svg>
+            </button>
           </div>
-        </m.header>
-      </LazyMotion>
+        </div>
+
+        {/* Mobile Menu Overlay */}
+        <div
+          className={cn(
+            'fixed inset-0 bg-primary z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col',
+            isMobileMenuOpen
+              ? 'opacity-100 translate-y-0'
+              : 'opacity-0 -translate-y-full pointer-events-none',
+          )}
+          id="mobile-menu"
+          role="dialog"
+          aria-modal="true"
+          aria-label={t('menu')}
+          ref={mobileMenuRef}
+        >
+          <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
+            {menuItems.map((item, idx) => (
+              <div
+                key={item.href}
+                className={cn('transition-all duration-500 transform', isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8')}
+                style={{ transitionDelay: `${isMobileMenuOpen ? 200 + idx * 80 : 0}ms` }}
+              >
+                <Link
+                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  onClick={() => {
+                    setIsMobileMenuOpen(false);
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: item.label,
+                      href: item.href,
+                      location: 'mobile_menu',
+                    });
+                  }}
+                  className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
+                >
+                  {item.label}
+                </Link>
+              </div>
+            ))}
+
+            <div
+              className={cn('pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500', isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8')}
+              style={{ transitionDelay: isMobileMenuOpen ? '600ms' : '0ms' }}
+            >
+              <div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
+                <div>
+                  <Link
+                    href={getPathForLocale('en')}
+                    className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    EN
+                  </Link>
+                </div>
+                <div className="w-px h-6 bg-white/20" />
+                <div>
+                  <Link
+                    href={getPathForLocale('de')}
+                    className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    DE
+                  </Link>
+                </div>
+              </div>
+
+              <div className="w-full max-w-xs">
+                <Button
+                  href={`/${currentLocale}/contact`}
+                  variant="accent"
+                  size="lg"
+                  className="w-full py-6 text-lg md:text-xl shadow-2xl hover:scale-105 transition-transform"
+                >
+                  {t('contact')}
+                </Button>
+              </div>
+            </div>
+
+            {/* Bottom Branding */}
+            <div
+              className={cn('p-12 flex justify-center transition-all duration-700', isMobileMenuOpen ? 'opacity-20 scale-100' : 'opacity-0 scale-75')}
+              style={{ transitionDelay: isMobileMenuOpen ? '800ms' : '0ms' }}
+            >
+              <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
+            </div>
+          </nav>
+        </div>
+      </header>
     </>
   );
 }
-
-const navVariants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.06,
-      delayChildren: 0.1,
-    },
-  },
-} as const;
-
-const navLinkVariants = {
-  hidden: { opacity: 0, y: 20, scale: 0.9 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: {
-      duration: 0.5,
-      ease: 'easeOut',
-    },
-  },
-} as const;
-
-const headerRightVariants = {
-  hidden: { opacity: 0, x: 30 },
-  visible: {
-    opacity: 1,
-    x: 0,
-    transition: { duration: 0.6, ease: 'easeOut' },
-  },
-} as const;