chore: bump version to 2.2.38

components/blocks/HeroVideo.tsx

@@ -22,6 +22,8 @@ interface HeroVideoProps {
   badge?: string;
 }
 
+import placeholders from '@/lib/placeholders.json';
+
 export function HeroVideo(props: HeroVideoProps) {
   const { data } = props;
   const title = props.title || data?.title || 'DIE EXPERTEN FÜR KABELNETZBAU';
@@ -37,6 +39,7 @@ export function HeroVideo(props: HeroVideoProps) {
 
   const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
   const posterAlt = props.backgroundImage?.alt || data?.posterImage?.alt || "E-TIB Gruppe Baustelle";
+  const blurDataURL = (placeholders as Record<string, string>)[posterSrc] || undefined;
 
   const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
   const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
@@ -87,13 +90,15 @@ export function HeroVideo(props: HeroVideoProps) {
         className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
         sizes="100vw"
         priority
+        placeholder={blurDataURL ? "blur" : "empty"}
+        blurDataURL={blurDataURL}
       />
 
       {/* Render video on top if available, but defer src to avoid blocking LCP */}
       {videoUrl && (
         <video
           key={`${pathname}-${videoUrl}`}
-          className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
+          className={`absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90 transition-opacity duration-1000 ${videoSrcLoaded ? 'opacity-100' : 'opacity-0'}`}
           src={videoSrcLoaded ? videoUrl : undefined}
           autoPlay
           muted

components/blocks/ReferencesSlider.tsx

@@ -46,6 +46,22 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
   const scrollLeftRef = React.useRef(0);
   const isDraggingRef = React.useRef(false);
   const [isDragging, setIsDragging] = React.useState(false);
+  const [paddingX, setPaddingX] = React.useState(24);
+  
+  React.useEffect(() => {
+    const updatePadding = () => {
+      const containerEl = document.querySelector('#referenzen .container');
+      if (containerEl) {
+        const rect = containerEl.getBoundingClientRect();
+        const computedStyle = window.getComputedStyle(containerEl);
+        const pLeft = parseFloat(computedStyle.paddingLeft || '0');
+        setPaddingX(rect.left + pLeft);
+      }
+    };
+    updatePadding();
+    window.addEventListener('resize', updatePadding);
+    return () => window.removeEventListener('resize', updatePadding);
+  }, []);
   
   const badge = props.badge || data?.badge || t('badge');
   const title = props.title || data?.title || t('title');
@@ -115,8 +131,11 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
           onMouseLeave={onMouseLeave}
           onMouseUp={onMouseUp}
           onMouseMove={onMouseMove}
-          className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 md:px-[max(2rem,calc((100vw_-_1280px)_/_2))] lg:px-[max(2.5rem,calc((100vw_-_1280px)_/_2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
+          className={`select-none flex overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
         >
+          {/* Robust Left Spacer for Pixel-Perfect Alignment */}
+          <div style={{ minWidth: paddingX }} className="flex-shrink-0 pointer-events-none" aria-hidden="true" />
+
           {references.map((ref, i) => {
             const imgSrc = ref.image 
               ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
@@ -129,7 +148,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                 whileInView={{ opacity: 1, x: 0 }}
                 viewport={{ once: true, margin: "-50px" }}
                 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-start group pointer-events-auto"
+                className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto mr-6"
               >
                 <Link
                   href={`/${locale}/referenzen#${ref.slug}`}

lib/placeholders.json

@@ -0,0 +1,7 @@
+{
+  "/assets/photos/DJI_0048.JPG": "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAADwAQCdASoKAAcABUB8JYwCdH8AGDNIbaAA92kbyv6vgOVMTIAAAA==",
+  "/assets/videos/web/hero-bahnkreuzung-poster.jpg": "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoKAAYABUB8JaQAA3AA/vDUoAA=",
+  "/assets/videos/web/hero-bohrung-poster.jpg": "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACwAQCdASoKAAYABUB8JZACdAEOO2gAAN5Rr3co8j7CDYNKNCAAAA==",
+  "/assets/videos/web/hero-kabelpflug-poster.jpg": "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoKAAYABUB8JaQAA3AA/vDUoAA=",
+  "/assets/videos/web/hero-messe-poster.jpg": "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoKAAYABUB8JaQAA3AA/vDUoAA="
+}

next.config.mjs

@@ -15,7 +15,6 @@ const nextConfig = {
     pagesBufferLength: 2,
   },
   experimental: {
-    optimizeCss: true,
     staleTimes: {
       dynamic: 0,
       static: 30,

package.json

@@ -138,7 +138,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.35",
+  "version": "2.2.38",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

scripts/generate-placeholders.ts

@@ -0,0 +1,44 @@
+import fs from 'fs';
+import path from 'path';
+import sharp from 'sharp';
+
+const PUBLIC_DIR = path.join(process.cwd(), 'public');
+const IMAGES_TO_PROCESS = [
+  '/assets/photos/DJI_0048.JPG',
+  '/assets/videos/web/hero-bahnkreuzung-poster.jpg',
+  '/assets/videos/web/hero-bohrung-poster.jpg',
+  '/assets/videos/web/hero-kabelpflug-poster.jpg',
+  '/assets/videos/web/hero-messe-poster.jpg',
+];
+
+async function generatePlaceholders() {
+  const placeholders: Record<string, string> = {};
+
+  for (const imagePath of IMAGES_TO_PROCESS) {
+    const fullPath = path.join(PUBLIC_DIR, imagePath);
+    if (!fs.existsSync(fullPath)) {
+      console.warn(`File not found: ${fullPath}`);
+      continue;
+    }
+
+    try {
+      const buffer = await sharp(fullPath)
+        .resize(10, 10, { fit: 'inside' })
+        .blur(2) // Adding slight blur
+        .webp({ quality: 20 })
+        .toBuffer();
+      
+      const base64 = `data:image/webp;base64,${buffer.toString('base64')}`;
+      placeholders[imagePath] = base64;
+      console.log(`Generated placeholder for ${imagePath}`);
+    } catch (e) {
+      console.error(`Failed to generate placeholder for ${imagePath}`, e);
+    }
+  }
+
+  const outputPath = path.join(process.cwd(), 'lib', 'placeholders.json');
+  fs.writeFileSync(outputPath, JSON.stringify(placeholders, null, 2));
+  console.log(`Saved placeholders to ${outputPath}`);
+}
+
+generatePlaceholders();

scripts/optimize-images.ts

@@ -0,0 +1,41 @@
+import fs from 'fs';
+import path from 'path';
+import sharp from 'sharp';
+
+const PHOTOS_DIR = path.join(process.cwd(), 'public', 'assets', 'photos');
+
+async function optimizeImages() {
+  const files = fs.readdirSync(PHOTOS_DIR);
+  let optimized = 0;
+
+  for (const file of files) {
+    if (!file.match(/\.(jpg|jpeg|png)$/i)) continue;
+    
+    const filePath = path.join(PHOTOS_DIR, file);
+    const metadata = await sharp(filePath).metadata();
+
+    // If image is larger than 1920px wide, or is a massive file
+    if ((metadata.width && metadata.width > 1920) || fs.statSync(filePath).size > 1024 * 1024) {
+      console.log(`Optimizing ${file} (Width: ${metadata.width}, Size: ${Math.round(fs.statSync(filePath).size / 1024)}KB)`);
+      
+      const tmpPath = `${filePath}.tmp`;
+      try {
+        await sharp(filePath)
+          .resize({ width: 1920, withoutEnlargement: true })
+          .jpeg({ quality: 80, progressive: true })
+          .toFile(tmpPath);
+        
+        fs.renameSync(tmpPath, filePath);
+        console.log(`✅ Optimized ${file} (New Size: ${Math.round(fs.statSync(filePath).size / 1024)}KB)`);
+        optimized++;
+      } catch (err) {
+        console.error(`Failed to optimize ${file}`, err);
+        if (fs.existsSync(tmpPath)) fs.unlinkSync(tmpPath);
+      }
+    }
+  }
+
+  console.log(`Finished optimizing ${optimized} images.`);
+}
+
+optimizeImages();