chore: bump version to 2.2.41

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';
@@ -84,6 +86,7 @@ export function HeroVideo(props: HeroVideoProps) {
         src={posterSrc}
         alt={posterAlt}
         fill
+        unoptimized
         className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
         sizes="100vw"
         priority
@@ -93,7 +96,7 @@ export function HeroVideo(props: HeroVideoProps) {
       {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

@@ -107,17 +107,27 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
         </div>
       </div>
 
-      <div className="relative z-10">
+      <div className="container relative z-10">
         <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
-        <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-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'}`}
-        >
-          {references.map((ref, i) => {
+        
+        {/* Pure CSS Full-Bleed Alignment Container */}
+        <div style={{ '--offset': 'calc(50vw - 50%)' } as React.CSSProperties}>
+          <div 
+            ref={containerRef}
+            onMouseDown={onMouseDown}
+            onMouseLeave={onMouseLeave}
+            onMouseUp={onMouseUp}
+            onMouseMove={onMouseMove}
+            style={{
+              marginLeft: 'calc(-1 * var(--offset))',
+              marginRight: 'calc(-1 * var(--offset))',
+              paddingLeft: 'var(--offset)',
+              paddingRight: 'var(--offset)',
+              scrollPaddingLeft: 'var(--offset)',
+            }}
+            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'}`}
+          >
+            {references.map((ref, i) => {
             const imgSrc = ref.image 
               ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
               : fallbacks[i % fallbacks.length];
@@ -129,7 +139,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}`}
@@ -164,6 +174,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
             );
           })}
         </div>
+        </div>
       </div>
 
       <div className="container relative z-10 mt-4 flex justify-center">

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="
+}

package.json

@@ -138,7 +138,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.35",
+  "version": "2.2.41",
   "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();