feat: Introduce Marker component and update KLZ Cables case study content, styling, and German localization.

src/components/Reveal.tsx

@@ -1,23 +1,29 @@
 'use client';
 
 import React, { useEffect, useRef } from 'react';
-import { motion, useInView, useAnimation, Variant } from 'framer-motion';
+import { motion, useInView, useAnimation, Variants } from 'framer-motion';
 
 interface RevealProps {
   children: React.ReactNode;
   width?: 'fit-content' | '100%';
   delay?: number;
   className?: string;
+  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+  scale?: number;
+  blur?: boolean;
 }
 
-export const Reveal: React.FC<RevealProps> = ({ 
-  children, 
+export const Reveal: React.FC<RevealProps> = ({
+  children,
   width = 'fit-content',
   delay = 0.25,
-  className = ""
+  className = "",
+  direction = 'up',
+  scale = 1,
+  blur = false
 }) => {
   const ref = useRef(null);
-  const isInView = useInView(ref, { once: true });
+  const isInView = useInView(ref, { once: true, margin: "-10%" });
   const mainControls = useAnimation();
 
   useEffect(() => {
@@ -26,16 +32,47 @@ export const Reveal: React.FC<RevealProps> = ({
     }
   }, [isInView, mainControls]);
 
+  const getDirectionOffset = () => {
+    switch (direction) {
+      case 'up': return { y: 15 };
+      case 'down': return { y: -15 };
+      case 'left': return { x: 15 };
+      case 'right': return { x: -15 };
+      default: return {};
+    }
+  };
+
+  const variants: Variants = {
+    hidden: {
+      opacity: 0,
+      ...getDirectionOffset(),
+      scale: scale !== 1 ? scale : 1,
+      filter: blur ? "blur(8px)" : "blur(0px)"
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      x: 0,
+      scale: 1,
+      filter: "blur(0px)"
+    },
+  };
+
   return (
     <div ref={ref} style={{ position: "relative", width }} className={className}>
       <motion.div
-        variants={{
-          hidden: { opacity: 0, y: 20 },
-          visible: { opacity: 1, y: 0 },
-        }}
+        variants={variants}
         initial="hidden"
         animate={mainControls}
-        transition={{ duration: 0.5, delay: delay, type: "spring", stiffness: 100, damping: 20 }}
+        transition={{
+          duration: 1.2,
+          delay: delay,
+          type: "spring",
+          stiffness: 40,
+          damping: 20,
+          mass: 1,
+          opacity: { duration: 1, ease: [0.22, 1, 0.36, 1] }
+        }}
       >
         {children}
       </motion.div>

src/components/ShareModal.tsx

@@ -65,7 +65,7 @@ export function ShareModal({ isOpen, onClose, url, qrCodeData }: ShareModalProps
             </button>
           </div>
 
-          {typeof navigator !== 'undefined' && navigator.share && (
+          {typeof navigator !== 'undefined' && !!navigator.share && (
             <button
               onClick={handleNativeShare}
               className="w-full p-6 bg-slate-900 text-white rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 transition-all"