perf: site-wide performance optimizations including image delivery and hero overhaul

components/home/Hero.tsx

@@ -4,7 +4,8 @@ import Scribble from '@/components/Scribble';
 import { Button, Container, Heading, Section } from '@/components/ui';
 import { motion } from 'framer-motion';
 import { useTranslations } from 'next-intl';
-import HeroIllustration from './HeroIllustration';
+import dynamic from 'next/dynamic';
+const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
 
 export default function Hero() {
   const t = useTranslations('Home.hero');
@@ -19,7 +20,10 @@ export default function Hero() {
           variants={containerVariants}
         >
           <motion.div variants={headingVariants}>
-            <Heading level={1} className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]">
+            <Heading
+              level={1}
+              className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
+            >
               {t.rich('title', {
                 green: (chunks) => (
                   <span className="relative inline-block">
@@ -36,7 +40,7 @@ export default function Hero() {
                       <Scribble variant="circle" />
                     </motion.div>
                   </span>
-                )
+                ),
               })}
             </Heading>
           </motion.div>
@@ -50,13 +54,23 @@ export default function Hero() {
             variants={buttonContainerVariants}
           >
             <motion.div variants={buttonVariants}>
-              <Button href="/contact" variant="accent" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg">
+              <Button
+                href="/contact"
+                variant="accent"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg"
+              >
                 {t('cta')}
                 <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
               </Button>
             </motion.div>
             <motion.div variants={buttonVariants}>
-              <Button href="/products" variant="white" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none">
+              <Button
+                href="/products"
+                variant="white"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none"
+              >
                 {t('exploreProducts')}
               </Button>
             </motion.div>
@@ -77,7 +91,7 @@ export default function Hero() {
         className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 1, ease: "easeOut", delay: 3 }}
+        transition={{ duration: 1, ease: 'easeOut', delay: 3 }}
       >
         <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
           <motion.div
@@ -86,7 +100,7 @@ export default function Hero() {
             transition={{
               duration: 1.5,
               repeat: Infinity,
-              ease: "easeInOut"
+              ease: 'easeInOut',
             }}
           />
         </div>
@@ -101,9 +115,9 @@ const containerVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.12,
-      delayChildren: 0.4
-    }
-  }
+      delayChildren: 0.4,
+    },
+  },
 } as const;
 
 const headingVariants = {
@@ -112,8 +126,8 @@ const headingVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const accentVariants = {
@@ -122,8 +136,8 @@ const accentVariants = {
     opacity: 1,
     scale: 1,
     rotate: 0,
-    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const scribbleVariants = {
@@ -132,8 +146,8 @@ const scribbleVariants = {
     opacity: 1,
     scale: 1,
     rotate: 0,
-    transition: { duration: 1, type: "spring", stiffness: 300, damping: 20 }
-  }
+    transition: { duration: 1, type: 'spring', stiffness: 300, damping: 20 },
+  },
 } as const;
 
 const subtitleVariants = {
@@ -142,8 +156,8 @@ const subtitleVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const buttonContainerVariants = {
@@ -152,9 +166,9 @@ const buttonContainerVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.15,
-      delayChildren: 0.4
-    }
-  }
+      delayChildren: 0.4,
+    },
+  },
 } as const;
 
 const buttonVariants = {
@@ -163,6 +177,6 @@ const buttonVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { type: "spring", stiffness: 400, damping: 20 }
-  }
+    transition: { type: 'spring', stiffness: 400, damping: 20 },
+  },
 } as const;