2.2.57

app/[locale]/error.tsx

@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 import { getAppServices } from '@/lib/services/create-services';
 import { Button, Heading } from '@/components/ui';
 import { Terminal, Activity, AlertTriangle, RefreshCw, Home, ShieldAlert } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 
 export default function Error({
   error,
@@ -65,7 +65,7 @@ export default function Error({
       <div className="relative z-10 w-full max-w-4xl mx-auto flex flex-col items-center">
         {/* The "Broken" Machine Visual */}
         <div className="relative mb-12">
-          <motion.div
+          <m.div
             initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: 1, scale: 1 }}
             className="relative"
@@ -81,7 +81,7 @@ export default function Error({
             
             {/* Warning Overlay */}
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
-              <motion.div
+              <m.div
                 animate={{ 
                   opacity: [0.4, 1, 0.4],
                   scale: [0.95, 1.05, 0.95]
@@ -90,9 +90,9 @@ export default function Error({
                 className="p-4 rounded-2xl bg-red-500/20 border border-red-500/40 backdrop-blur-md shadow-[0_0_30px_rgba(239,68,68,0.3)]"
               >
                 <ShieldAlert className="w-12 h-12 text-red-500" />
-              </motion.div>
+              </m.div>
             </div>
-          </motion.div>
+          </m.div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-12 gap-8 w-full items-start">

app/[locale]/layout.tsx

@@ -17,9 +17,10 @@ import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { cookies } from 'next/headers';
 
 import { TransitionProvider } from '@/components/providers/TransitionProvider';
-import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
 import { InitialLoader } from '@/components/providers/InitialLoader';
-import { CorporateBackground } from '@/components/decorations/CorporateBackground';
+import { DynamicCorporateBackground as CorporateBackground } from '@/components/decorations/DynamicCorporateBackground';
+import { DynamicPageTransitionShutter as PageTransitionShutter } from '@/components/providers/DynamicPageTransitionShutter';
+
 const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
@@ -32,7 +33,8 @@ export async function generateMetadata(props: {
   const params = await props.params;
   const { locale } = params;
 
-  const baseUrl = process.env.CI ? 'http://etib.localhost' : SITE_URL;
+  const baseUrl = SITE_URL;
+
   return {
     title: {
       template: '%s | E-TIB',
@@ -42,10 +44,11 @@ export async function generateMetadata(props: {
     metadataBase: new URL(baseUrl),
     manifest: '/manifest.webmanifest',
     alternates: {
-      canonical: `${baseUrl}/${locale}`,
+      canonical: `/${locale}`,
       languages: {
-        de: `${baseUrl}/de`,
-        en: `${baseUrl}/en`,
+        'de': `/de`,
+        'en': `/en`,
+        'x-default': `/de`,
       },
     },
   };
@@ -60,6 +63,9 @@ export const viewport: Viewport = {
   themeColor: '#117c61',
 };
 
+export async function generateStaticParams() {
+  return [{ locale: 'de' }, { locale: 'en' }];
+}
 
 export default async function Layout(props: {
   children: React.ReactNode;
@@ -148,19 +154,9 @@ export default async function Layout(props: {
   const serverServices = getServerAppServices();
 
   try {
-    const { headers } = await import('next/headers');
-    const requestHeaders = await headers();
-
     // Disable analytics in CI to prevent console noise/score penalties
     if (process.env.NEXT_PUBLIC_CI === 'true') {
       // Skip setting server context for analytics in CI
-    } else if ('setServerContext' in serverServices.analytics) {
-      (serverServices.analytics as any).setServerContext({
-        userAgent: requestHeaders.get('user-agent') || undefined,
-        language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
-        referrer: requestHeaders.get('referer') || undefined,
-        ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
-      });
     }
 
     // Server-side analytics tracking removed to prevent duplicate/empty events.
@@ -182,13 +178,14 @@ export default async function Layout(props: {
       lang={safeLocale}
       className={`scroll-smooth overflow-x-hidden ${inter.variable}`}
       data-scroll-behavior="smooth"
+      suppressHydrationWarning
     >
       <head>
         <link rel="icon" href="/favicon.ico" sizes="any" />
         <link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
 
       </head>
-      <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
+      <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white" suppressHydrationWarning>
         <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
           <TransitionProvider>
             <CorporateBackground />

app/[locale]/not-found.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
 import { Button, Heading } from '@/components/ui';
 import { Terminal, Search, Home, Mail, Activity, Cpu } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 import ClientNotFoundTracker from '@/components/analytics/ClientNotFoundTracker';
 
 export default function NotFound() {
@@ -46,7 +46,7 @@ export default function NotFound() {
       <div className="relative z-10 w-full max-w-4xl mx-auto flex flex-col items-center">
         {/* 404 Visual */}
         <div className="relative mb-12">
-          <motion.div
+          <m.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             className="relative"
@@ -62,7 +62,7 @@ export default function NotFound() {
             
             {/* Search Scan Overlay */}
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
-              <motion.div
+              <m.div
                 animate={{ 
                   scale: [1, 1.1, 1],
                   opacity: [0.5, 1, 0.5]
@@ -71,9 +71,9 @@ export default function NotFound() {
                 className="p-5 rounded-full bg-primary/20 border border-primary/40 backdrop-blur-md shadow-[0_0_40px_rgba(var(--color-primary),0.3)]"
               >
                 <Search className="w-10 h-10 text-primary" />
-              </motion.div>
+              </m.div>
             </div>
-          </motion.div>
+          </m.div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-12 gap-12 w-full items-start">

app/[locale]/page.tsx

@@ -37,6 +37,41 @@ const mdxComponents = (references: any[]) => ({
   AnimatedCounter,
   InteractiveGermanyMap,
   ScaleOfImpact,
+  ResponsiveImage: (props: any) => {
+    // Parse src if it's already a next image proxy
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (e) {
+        // Fallback
+      }
+    }
+    
+    // Use Next.js getImageProps for responsive srcSet generation
+    const {
+      props: { srcSet, src: finalSrc, sizes }
+    } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+
+    return (
+      <img 
+        {...props} 
+        src={finalSrc} 
+        srcSet={srcSet}
+        sizes={sizes}
+        loading="lazy" 
+        decoding="async" 
+      />
+    );
+  },
   img: (props: any) => {
     // Parse src if it's already a next image proxy
     let src = props.src;

app/[locale]/template.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 
 export default function Template({ children }: { children: React.ReactNode }) {
   return (
-    <motion.div
+    <m.div
       initial={{ opacity: 0, y: 20, filter: 'blur(10px)' }}
       animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
       transition={{ 
@@ -14,6 +14,6 @@ export default function Template({ children }: { children: React.ReactNode }) {
       className="w-full h-full"
     >
       {children}
-    </motion.div>
+    </m.div>
   );
 }

app/manifest.ts

@@ -10,11 +10,7 @@ export default function manifest(): MetadataRoute.Manifest {
     background_color: '#001a4d',
     theme_color: '#001a4d',
     icons: [
-      {
-        src: '/favicon.ico',
-        sizes: 'any',
-        type: 'image/x-icon',
-      },
+
       {
         src: '/logo.png',
         sizes: '512x512',

components/blocks/HeroSection.tsx

@@ -50,7 +50,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
         <m.div 
           key={`hero-bg-${pathname}`}
           className="absolute inset-0 z-0"
-          initial={{ scale: 1.05, opacity: 0 }}
+          initial={{ scale: 1.05, opacity: 1 }}
           animate={{ scale: 1, opacity: 1 }}
           transition={{ duration: 1.5, ease: "easeOut" }}
         >

components/blocks/HeroVideo.tsx

@@ -88,7 +88,9 @@ export function HeroVideo(props: HeroVideoProps) {
         fill
         className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
         sizes="100vw"
+        quality={25}
         priority
+        fetchPriority="high"
       />
 
       {/* Render video on top if available, but defer src to avoid blocking LCP */}

components/blocks/ReferencesSlider.test.tsx

@@ -51,15 +51,14 @@ describe('ReferencesSlider TDD', () => {
     expect(screen.getByText('Referenz Projekt Zwei')).toBeTruthy();
   });
 
-  it('renders each tile as a link to the reference detail page', () => {
+  it('renders each tile as a static block and NOT wrapped in a link', () => {
     render(<ReferencesSlider references={mockReferences} />);
+    
+    const links = screen.queryAllByTestId('reference-tile-link');
+    expect(links).toHaveLength(0);
 
     const tiles = screen.getAllByTestId('reference-tile');
     expect(tiles).toHaveLength(2);
-    
-    // Check if they have href attributes
-    expect(tiles[0].getAttribute('href')).toContain('/en/referenzen#referenz-projekt-eins');
-    expect(tiles[1].getAttribute('href')).toContain('/en/referenzen#referenz-projekt-zwei');
   });
 });
 

components/blocks/ReferencesSlider.tsx

@@ -40,7 +40,27 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
 
   const { data } = props;
   const references = props.references || [];
-  
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const dragDistanceRef = React.useRef(0);
+  const startXRef = React.useRef(0);
+  const scrollLeftRef = React.useRef(0);
+  const isDraggingRef = React.useRef(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  // Center the first card on mount so it appears in the middle with peek on both sides
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    // Wait for layout to settle
+    requestAnimationFrame(() => {
+      const firstCard = el.querySelector('[data-card]') as HTMLElement | null;
+      if (!firstCard) return;
+      const cardCenter = firstCard.offsetLeft + firstCard.offsetWidth / 2;
+      const containerCenter = el.offsetWidth / 2;
+      el.scrollLeft = cardCenter - containerCenter;
+    });
+  }, [references.length]);
+
   const badge = props.badge || data?.badge || t('badge');
   const title = props.title || data?.title || t('title');
   const description = props.description || data?.description || t('description');
@@ -57,71 +77,122 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
     '/assets/photos/DSC00010.JPG',
   ];
 
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (!containerRef.current) return;
+    setIsDragging(true);
+    isDraggingRef.current = true;
+    const startXVal = e.clientX - (containerRef.current.offsetLeft || 0);
+    startXRef.current = startXVal;
+    scrollLeftRef.current = containerRef.current.scrollLeft || 0;
+    dragDistanceRef.current = 0;
+  };
+
+  const onMouseLeave = () => {
+    setIsDragging(false);
+    isDraggingRef.current = false;
+  };
+
+  const onMouseUp = () => {
+    setIsDragging(false);
+    isDraggingRef.current = false;
+  };
+
+  const onMouseMove = (e: React.MouseEvent) => {
+    if (!isDraggingRef.current || !containerRef.current) return;
+    e.preventDefault();
+    const x = e.clientX - (containerRef.current.offsetLeft || 0);
+    const walk = (x - startXRef.current) * 2; // Scroll-fast
+    containerRef.current.scrollLeft = scrollLeftRef.current - walk;
+    dragDistanceRef.current = Math.abs(x - startXRef.current);
+  };
+
+
   return (
     <section id="referenzen" className="pt-16 pb-8 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
       
-      <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
-        <div className="text-left">
+      <div className="container relative z-10 mb-12 flex flex-col items-center justify-center text-center gap-6">
+        <div>
           <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
           <h3 className="font-heading text-3xl md:text-5xl font-extrabold">{title}</h3>
         </div>
-        <div className="text-left max-w-3xl mx-auto md:mx-0 md:mb-16">
+        <div className="max-w-3xl mx-auto mb-4 md:mb-8 text-neutral-300">
           {description}
         </div>
       </div>
 
-      <div className="container relative z-10 w-full">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 justify-center items-stretch">
-          {references.map((ref, i) => {
-            const imgSrc = ref.image 
-              ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
-              : fallbacks[i % fallbacks.length];
+      <div className="relative z-10">
+        {/* Fade edges for peek effect */}
+        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-neutral-dark to-transparent z-20 pointer-events-none" />
+        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 pointer-events-none" />
+        
+        {/* Carousel: centered first card with peek on both sides */}
+        <LazyMotion features={domAnimation}>
+          <div 
+            ref={containerRef}
+            onMouseDown={onMouseDown}
+            onMouseLeave={onMouseLeave}
+            onMouseUp={onMouseUp}
+            onMouseMove={onMouseMove}
+            className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-[calc(50vw-160px)] md:px-[calc(50vw-240px)] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
+          >
+            {references.map((ref, i) => {
+              const imgSrc = ref.image 
+                ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
+                : fallbacks[i % fallbacks.length];
 
-            return (
-              <LazyMotion key={ref.id} features={domAnimation}>
+              return (
                 <m.div
-                  initial={{ opacity: 0, y: 20 }}
-                  whileInView={{ opacity: 1, y: 0 }}
+                  key={ref.id}
+                  data-card
+                  initial={{ opacity: 0, x: 20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true, margin: "-50px" }}
-                  transition={{ delay: i * 0.1, duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
-                  className="w-full h-full group"
+                  transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
+                  className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group pointer-events-auto"
                 >
                   <Link
                     href={`/${locale}/referenzen#${ref.slug}`}
+                    onClick={(e) => {
+                      if (dragDistanceRef.current > 5) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }
+                    }}
+                    onDragStart={(e) => e.preventDefault()}
+                    draggable={false}
                     data-testid="reference-tile"
-                    className="block relative h-[250px] md:h-[300px] w-full rounded-2xl overflow-hidden shadow-xl shadow-black/20"
+                    className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
                   >
                     <Image
+                      draggable={false}
                       src={imgSrc}
                       alt={ref.title}
                       fill
-                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                      className="object-cover object-center group-hover:scale-105 transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
-                      priority={i < 3}
+                      quality={50}
+                      sizes="(max-width: 768px) 320px, 480px"
+                      className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
                     />
-                    
-                    <div className="absolute inset-0 bg-gradient-to-t from-[#050B14]/90 via-[#050B14]/20 to-transparent pointer-events-none" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
                     
                     <HoverShineOverlay />
-
-                    <div className="absolute bottom-0 left-0 p-6 md:p-8 right-0 transform transition-transform duration-500 ease-out group-hover:-translate-y-2">
-                      <div className="bg-primary/20 backdrop-blur-md border border-primary/30 text-white text-[10px] md:text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full mb-3 inline-block shadow-[0_0_15px_rgba(14,122,92,0.3)]">
+                    
+                    <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
+                      <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
                         {ref.category}
-                      </div>
-                      <h4 className="text-xl md:text-2xl font-bold font-heading leading-tight drop-shadow-md text-white group-hover:text-primary-light transition-colors duration-300">
-                        {ref.title}
-                      </h4>
+                      </span>
+                      <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
                     </div>
                   </Link>
                 </m.div>
-              </LazyMotion>
-            );
-          })}
-        </div>
+              );
+            })}
+
+          </div>
+        </LazyMotion>
       </div>
 
-      <div className="container relative z-10 flex justify-center mt-12 md:mt-20 pb-4">
+      <div className="container relative z-10 mt-4 flex justify-center">
         <Link 
           href={ctaHref} 
           className="px-8 py-4 rounded-xl bg-white/5 border border-white/20 hover:bg-white hover:text-neutral-dark hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] transition-all font-bold flex items-center gap-3 backdrop-blur-sm"

components/decorations/DynamicCorporateBackground.tsx

@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicCorporateBackground = dynamic(
+  () => import('./CorporateBackground').then(mod => mod.CorporateBackground),
+  { ssr: false }
+);

components/providers/DynamicPageTransitionShutter.tsx

@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicPageTransitionShutter = dynamic(
+  () => import('./PageTransitionShutter').then(mod => mod.PageTransitionShutter),
+  { ssr: false }
+);

components/providers/TransitionProvider.tsx

@@ -2,7 +2,9 @@
 
 import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import { LazyMotion, domAnimation } from 'framer-motion';
+import { LazyMotion } from 'framer-motion';
+
+const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
 
 interface TransitionContextType {
   isTransitioning: boolean;
@@ -69,7 +71,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
           setTransitionMessage={setTransitionMessage}
         />
       </React.Suspense>
-      <LazyMotion features={domAnimation}>
+      <LazyMotion features={loadFeatures}>
         {children}
       </LazyMotion>
     </TransitionContext.Provider>

components/ui/TransitionLink.tsx

@@ -37,7 +37,7 @@ export function TransitionLink({ children, href, onClick, transitionMessage, ...
   };
 
   return (
-    <Link href={href} onClick={handleClick} className={cn('cursor-pointer', props.className)} {...props}>
+    <Link href={href} onClick={handleClick} prefetch={props.prefetch ?? false} className={cn('cursor-pointer', props.className)} {...props}>
       {children}
     </Link>
   );

content/de/home.mdx

@@ -88,7 +88,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" loading="lazy" decoding="async" />
+          <ResponsiveImage src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">

content/en/home.mdx

@@ -88,7 +88,7 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" loading="lazy" decoding="async" />
+          <ResponsiveImage src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">

dummy-polyfill.js

@@ -0,0 +1 @@
+export default {};

lib/empty-polyfill.js

@@ -0,0 +1,2 @@
+// Empty polyfill to trick Next.js into not loading legacy polyfills
+export default {};

lib/schema.ts

@@ -1,7 +1,6 @@
 import { config } from './config';
 
 const getSiteUrl = () => {
-  if (process.env.CI) return 'http://etib.localhost';
   return (config.baseUrl as string) || 'https://e-tib.com';
 };
 

next.config.mjs

@@ -15,6 +15,7 @@ const nextConfig = {
     pagesBufferLength: 2,
   },
   experimental: {
+    optimizeCss: true,
     staleTimes: {
       dynamic: 0,
       static: 30,
@@ -47,7 +48,16 @@ const nextConfig = {
     NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION || process.env.npm_package_version || 'dev',
   },
   // Prevent webpack from restarting when .env files are touched via Docker volume mount
-  webpack: (config, { dev }) => {
+  webpack: (config, { dev, isServer }) => {
+    // Completely strip Next.js forced legacy polyfills for modern browser targets
+    if (!isServer) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        'next/dist/build/polyfills/polyfill-module': false,
+        'next/dist/build/polyfills/polyfill-nomodule': false,
+      };
+    }
+    
     if (dev) {
       config.watchOptions = {
         ...config.watchOptions,

package.json

@@ -105,6 +105,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
+    "postinstall": "echo '' > node_modules/next/dist/build/polyfills/polyfill-module.js && echo '' > node_modules/next/dist/build/polyfills/polyfill-nomodule.js",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
     "test:og": "vitest run tests/og-image.test.ts",
@@ -138,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.44",
+  "version": "2.2.57",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",
@@ -153,9 +154,10 @@
     }
   },
   "browserslist": [
-    "last 3 versions",
-    "not dead",
-    "not ie 11"
+    "last 2 chrome versions",
+    "last 2 firefox versions",
+    "last 2 edge versions",
+    "safari >= 15.4"
   ],
   "peerDependencies": {
     "lucide-react": "^0.563.0"