feat: optimize event capturing and playback accuracy

components/home/Hero.tsx

@@ -3,12 +3,13 @@
 import Scribble from '@/components/Scribble';
 import { Button, Container, Heading, Section } from '@/components/ui';
 import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
+import { useTranslations, useLocale } from 'next-intl';
 import dynamic from 'next/dynamic';
 const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
 
 export default function Hero() {
   const t = useTranslations('Home.hero');
+  const locale = useLocale();
 
   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">
@@ -66,7 +67,7 @@ export default function Hero() {
             </motion.div>
             <motion.div variants={buttonVariants}>
               <Button
-                href="/products"
+                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"