perf: deep react code splitting, next-intl payload scoping, and SVG hardware acceleration for PageSpeed 100

components/home/Hero.tsx

@@ -2,7 +2,7 @@
 
 import Scribble from '@/components/Scribble';
 import { Button, Container, Heading, Section } from '@/components/ui';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations, useLocale } from 'next-intl';
 import dynamic from 'next/dynamic';
 import { useAnalytics } from '../analytics/useAnalytics';
@@ -16,111 +16,113 @@ export default function Hero() {
 
   return (
     <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
-      <Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none">
-        <motion.div
-          className="max-w-5xl mx-auto md:mx-0"
-          initial="hidden"
-          animate="visible"
-          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]"
-            >
-              {t.rich('title', {
-                green: (chunks) => (
-                  <span className="relative inline-block">
-                    <motion.span
-                      className="relative z-10 text-accent italic"
-                      variants={accentVariants}
-                    >
-                      {chunks}
-                    </motion.span>
-                    <motion.div
-                      variants={scribbleVariants}
-                      className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10"
-                    >
-                      <Scribble variant="circle" />
-                    </motion.div>
-                  </span>
-                ),
-              })}
-            </Heading>
-          </motion.div>
-          <motion.div variants={subtitleVariants}>
-            <p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
-              {t('subtitle')}
-            </p>
-          </motion.div>
-          <motion.div
-            className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6"
-            variants={buttonContainerVariants}
+      <LazyMotion strict features={domAnimation}>
+        <Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none">
+          <m.div
+            className="max-w-5xl mx-auto md:mx-0"
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
           >
-            <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"
-                onClick={() =>
-                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                    label: t('cta'),
-                    location: 'home_hero_primary',
-                  })
-                }
+            <m.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]"
               >
-                {t('cta')}
-                <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
-              </Button>
-            </motion.div>
-            <motion.div variants={buttonVariants}>
-              <Button
-                href={`/${locale}/${locale === 'de' ? 'produkte' : '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"
-                onClick={() =>
-                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                    label: t('exploreProducts'),
-                    location: 'home_hero_secondary',
-                  })
-                }
-              >
-                {t('exploreProducts')}
-              </Button>
-            </motion.div>
-          </motion.div>
-        </motion.div>
-      </Container>
+                {t.rich('title', {
+                  green: (chunks) => (
+                    <span className="relative inline-block">
+                      <m.span
+                        className="relative z-10 text-accent italic"
+                        variants={accentVariants}
+                      >
+                        {chunks}
+                      </m.span>
+                      <m.div
+                        variants={scribbleVariants}
+                        className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10"
+                      >
+                        <Scribble variant="circle" />
+                      </m.div>
+                    </span>
+                  ),
+                })}
+              </Heading>
+            </m.div>
+            <m.div variants={subtitleVariants}>
+              <p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
+                {t('subtitle')}
+              </p>
+            </m.div>
+            <m.div
+              className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6"
+              variants={buttonContainerVariants}
+            >
+              <m.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"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                      label: t('cta'),
+                      location: 'home_hero_primary',
+                    })
+                  }
+                >
+                  {t('cta')}
+                  <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
+                </Button>
+              </m.div>
+              <m.div variants={buttonVariants}>
+                <Button
+                  href={`/${locale}/${locale === 'de' ? 'produkte' : '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"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                      label: t('exploreProducts'),
+                      location: 'home_hero_secondary',
+                    })
+                  }
+                >
+                  {t('exploreProducts')}
+                </Button>
+              </m.div>
+            </m.div>
+          </m.div>
+        </Container>
 
-      <motion.div
-        className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none"
-        initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
-        animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
-        transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
-      >
-        <HeroIllustration />
-      </motion.div>
+        <m.div
+          className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none"
+          initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
+          animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+          transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
+        >
+          <HeroIllustration />
+        </m.div>
 
-      <motion.div
-        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 }}
-      >
-        <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
-          <motion.div
-            className="w-1 h-2 bg-white rounded-full"
-            animate={{ y: [0, -10, 0] }}
-            transition={{
-              duration: 1.5,
-              repeat: Infinity,
-              ease: 'easeInOut',
-            }}
-          />
-        </div>
-      </motion.div>
+        <m.div
+          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 }}
+        >
+          <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
+            <m.div
+              className="w-1 h-2 bg-white rounded-full"
+              animate={{ y: [0, -10, 0] }}
+              transition={{
+                duration: 1.5,
+                repeat: Infinity,
+                ease: 'easeInOut',
+              }}
+            />
+          </div>
+        </m.div>
+      </LazyMotion>
     </Section>
   );
 }

components/home/HeroIllustration.tsx

@@ -232,16 +232,12 @@ export default function HeroIllustration() {
                   stroke="url(#energy-pulse)"
                   strokeWidth="3"
                   strokeLinecap="round"
-                  strokeDasharray={`${length * 0.2} ${length * 0.8}`}
-                >
-                  <animate
-                    attributeName="stroke-dashoffset"
-                    from={length}
-                    to={0}
-                    dur={`${1.5 + (i % 3) * 0.5}s`}
-                    repeatCount="indefinite"
-                  />
-                </line>
+                  style={{
+                    strokeDasharray: `${length * 0.2} ${length * 0.8}`,
+                    strokeDashoffset: length,
+                    animation: `flow ${1.5 + (i % 3) * 0.5}s linear infinite`,
+                  }}
+                />
               );
             })}
           </g>
@@ -267,14 +263,13 @@ export default function HeroIllustration() {
                   strokeWidth="1"
                   strokeOpacity="0.3"
                 />
-                <circle r="3" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate
-                    attributeName="fillOpacity"
-                    values="0.2;0.5;0.2"
-                    dur="2s"
-                    repeatCount="indefinite"
-                  />
-                </circle>
+                <circle
+                  r="3"
+                  fill="#82ed20"
+                  fillOpacity="0.3"
+                  filter="url(#soft-glow)"
+                  style={{ animation: 'solar-pulse 2s ease-in-out infinite' }}
+                />
               </g>
             );
           })}
@@ -294,28 +289,26 @@ export default function HeroIllustration() {
                   strokeOpacity="0.3"
                 />
                 <g transform="translate(0, -60)">
-                  {[0, 120, 240].map((angle, j) => (
-                    <line
-                      key={`blade-${i}-${j}`}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="-30"
-                      stroke="white"
-                      strokeWidth="1.5"
-                      strokeOpacity="0.4"
-                      transform={`rotate(${angle})`}
-                    >
-                      <animateTransform
-                        attributeName="transform"
-                        type="rotate"
-                        from={`${angle} 0 0`}
-                        to={`${angle + 360} 0 0`}
-                        dur={`${3 + i}s`}
-                        repeatCount="indefinite"
+                  <g
+                    style={{
+                      transformOrigin: '0px 0px',
+                      animation: `spin-slow ${3 + i}s linear infinite`,
+                    }}
+                  >
+                    {[0, 120, 240].map((angle, j) => (
+                      <line
+                        key={`blade-${i}-${j}`}
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="-30"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeOpacity="0.4"
+                        transform={`rotate(${angle})`}
                       />
-                    </line>
-                  ))}
+                    ))}
+                  </g>
                 </g>
               </g>
             );