restructure website

src/components/ScrollingText.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from "react";
+
+const ScrollingText = ({
+  speed = 0.5,
+  size = "37",
+  text,
+}: {
+  speed?: number;
+  size?: string;
+  text: string;
+}) => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    const contentElement = contentRef.current;
+
+    if (!scrollContainer || !contentElement) return;
+
+    // Create a clone of the content element
+    const clone = contentElement.cloneNode(true) as HTMLDivElement;
+    scrollContainer.appendChild(clone);
+
+    let animationId: number;
+    let scrollPosition = 0;
+
+    const animate = () => {
+      if (!scrollContainer || !contentElement) return;
+
+      // Increment scroll position based on speed
+      scrollPosition += speed;
+
+      // Reset position when first element is scrolled out of view
+      if (scrollPosition >= contentElement.offsetWidth) {
+        scrollPosition = 0;
+      }
+
+      // Apply scroll position
+      scrollContainer.scrollLeft = scrollPosition;
+
+      animationId = requestAnimationFrame(animate);
+    };
+
+    animationId = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(animationId);
+    };
+  }, [speed, text]);
+
+  if (text) {
+    return (
+      <div
+        ref={scrollContainerRef}
+        className={`w-${size} overflow-hidden rounded-lg whitespace-nowrap`}
+      >
+        <div ref={contentRef} className="inline-block">
+          &nbsp;&nbsp;
+          <span className="text-xl font-medium text-white hover:underline">
+            {text}
+          </span>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default ScrollingText;