perf(images): remove AVIF format to prevent massive CPU spikes and TTFB delays during on-the-fly Next.js image optimization

.gitea/workflows/deploy.yml

@@ -47,7 +47,14 @@ jobs:
         run: |
           echo "=== System Disk Usage ==="
           df -h || true
+          echo "=== Tool Cache Usage ==="
+          du -sh /opt/hostedtoolcache/* || true
+          du -sh /opt/hostedtoolcache/.[!.]* || true
           echo "Purging old tool caches skipped to prevent runner corruption."
+          echo "=== Host Disk Usage ==="
+          docker run --rm -v /:/host-root alpine df -h || true
+          echo "=== Host Inode Usage ==="
+          docker run --rm -v /:/host-root alpine df -i || true
           echo "=== Running Host Containers ==="
           docker ps --format "table {{.Names}}\t{{.Status}}\t{{.Image}}" || true
           echo "=== Host Docker Info ==="

app/globals.css

@@ -88,30 +88,34 @@
 }
 /* trigger rebuild */
 
-@keyframes hero-fade-in-up {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
+@layer utilities {
+  @keyframes hero-fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  
+  .animate-hero-fade-in-up {
+    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 }
 
-@utility animate-hero-fade-in-up {
-  animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-@keyframes hero-zoom-out {
-  from {
-    transform: scale(1.05);
+@layer utilities {
+  @keyframes hero-zoom-out {
+    from {
+      transform: scale(1.05);
+    }
+    to {
+      transform: scale(1);
+    }
   }
-  to {
-    transform: scale(1);
+  
+  .animate-hero-zoom-out {
+    animation: hero-zoom-out 1.5s ease-out forwards;
   }
 }
-
-@utility animate-hero-zoom-out {
-  animation: hero-zoom-out 1.5s ease-out forwards;
-}

components/blocks/HeroSection.tsx

@@ -60,26 +60,26 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
           className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
         >
           {badge && (
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: '0.1s', animationFillMode: 'both' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: '0.1s', opacity: 0, animationFillMode: 'forwards' }}>
               <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                 {badge}
               </Badge>
             </div>
           )}
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.25s' : '0.1s', animationFillMode: 'both' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.25s' : '0.1s', opacity: 0, animationFillMode: 'forwards' }}>
               <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
                 {title}
               </Heading>
             </div>
           {subtitle && (
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.4s' : '0.25s', animationFillMode: 'both' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.4s' : '0.25s', opacity: 0, animationFillMode: 'forwards' }}>
               <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                 {subtitle}
               </p>
             </div>
           )}
           {ctaLabel && ctaHref && (
-            <div className={`mt-8 animate-hero-fade-in-up ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`} style={{ animationDelay: badge ? '0.55s' : '0.4s', animationFillMode: 'both' }}>
+            <div className={`mt-8 animate-hero-fade-in-up ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`} style={{ animationDelay: badge ? '0.55s' : '0.4s', opacity: 0, animationFillMode: 'forwards' }}>
               <Button
                 href={ctaHref}
                 variant="accent"

components/blocks/HeroVideo.tsx

@@ -34,7 +34,7 @@ export function HeroVideo(props: HeroVideoProps) {
 
   let defaultPoster = "/assets/photos/DJI_0048.JPG";
   if (videoUrl && videoUrl.endsWith('.mp4')) {
-    defaultPoster = videoUrl.replace('.mp4', '-poster.jpg');
+    defaultPoster = videoUrl.replace('.mp4', '-poster.webp');
   }
 
   const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
@@ -88,7 +88,7 @@ export function HeroVideo(props: HeroVideoProps) {
         fill
         className="object-cover z-[1] pointer-events-none"
         sizes="100vw"
-        quality={25}
+        unoptimized={true}
         priority
         fetchPriority="high"
       />

next.config.mjs

@@ -449,7 +449,7 @@ const nextConfig = {
   },
   images: {
     qualities: [25, 50, 75, 100],
-    formats: ['image/avif', 'image/webp'],
+    formats: ['image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     remotePatterns: [
       {

package.json

@@ -139,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.4.24",
+  "version": "2.2.94",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",