feat(classiques): enforce uniform physical scroll speed across all marquees and match clock box design from img 1

src/components/MarqueeText.js

@@ -1,23 +1,42 @@
 import React, { useRef, useState, useEffect } from 'react';
 import './MarqueeText.css';
 
-const MarqueeText = ({ text, className, style, duration = '10s' }) => {
+const DEFAULT_SPEED = 50; // pixels per second for uniform, calm scrolling
+
+const MarqueeText = ({ text, className, style, speed = DEFAULT_SPEED, duration }) => {
   const containerRef = useRef(null);
   const textRef = useRef(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
-
-  const formattedDuration = typeof duration === 'number' ? `${duration}s` : duration;
+  const [computedDuration, setComputedDuration] = useState('20s');
 
   useEffect(() => {
-    const checkOverflow = () => {
+    const updateMarquee = () => {
       if (containerRef.current && textRef.current) {
-        setIsOverflowing(textRef.current.scrollWidth > containerRef.current.clientWidth);
+        const containerWidth = containerRef.current.clientWidth;
+        const textWidth = textRef.current.scrollWidth;
+        const overflowing = textWidth > containerWidth;
+        setIsOverflowing(overflowing);
+
+        if (overflowing) {
+          if (duration) {
+            setComputedDuration(typeof duration === 'number' ? `${duration}s` : duration);
+          } else {
+            const totalDistance = textWidth + containerWidth;
+            const seconds = totalDistance / speed;
+            setComputedDuration(`${seconds.toFixed(2)}s`);
+          }
+        }
       }
     };
-    checkOverflow();
-    window.addEventListener('resize', checkOverflow);
-    return () => window.removeEventListener('resize', checkOverflow);
-  }, [text]);
+
+    updateMarquee();
+    window.addEventListener('resize', updateMarquee);
+    const timer = setTimeout(updateMarquee, 100);
+    return () => {
+      window.removeEventListener('resize', updateMarquee);
+      clearTimeout(timer);
+    };
+  }, [text, speed, duration]);
 
   return (
     <div className={`marquee-container ${className || ''}`} ref={containerRef} style={{ ...style, overflow: 'hidden', whiteSpace: 'nowrap', width: '100%', flex: '1 1 0' }}>
@@ -26,7 +45,7 @@ const MarqueeText = ({ text, className, style, duration = '10s' }) => {
         ref={textRef} 
         style={{ 
           display: 'inline-block', 
-          animation: isOverflowing ? `marquee-scroll ${formattedDuration} linear infinite` : 'none',
+          animation: isOverflowing ? `marquee-scroll ${computedDuration} linear infinite` : 'none',
           paddingLeft: isOverflowing ? '100%' : '0',
           fontSize: 'inherit',
           fontWeight: 'inherit',