test (#36)

app/components/ScrollBySection.tsx

@@ -10,42 +10,22 @@ const ScrollBySection: React.FC = () => {
   const isScrolling = useRef<boolean>(false);
   const touchStart = useRef<number>(0);
   const SWIPE_THRESHOLD = 40;
-  const SCROLL_DURATION = 800; // Duration of the scroll animation in ms
-
-  const smoothScrollTo = (targetY: number) => {
-    const startY = window.scrollY;
-    const distance = targetY - startY;
-    let startTime: number | null = null;
-
-    const animateScroll = (currentTime: number) => {
-      if (startTime === null) startTime = currentTime;
-      const timeElapsed = currentTime - startTime;
-      const progress = Math.min(timeElapsed / SCROLL_DURATION, 1);
-
-      // Ease-in-out effect
-      const easeInOut =
-        progress < 0.5
-          ? 2 * progress * progress
-          : -1 + (4 - 2 * progress) * progress;
-
-      window.scrollTo(0, startY + distance * easeInOut);
-
-      if (progress < 1) {
-        requestAnimationFrame(animateScroll);
-      } else {
-        isScrolling.current = false; // Reset scrolling lock
-      }
-    };
-
-    requestAnimationFrame(animateScroll);
-  };
+  const SCROLL_DURATION = 800; // Adjust duration if needed
 
   const scrollToSection = (index: number) => {
+    if (isScrolling.current || index === activeIndex) return;
+
+    isScrolling.current = true;
+    setActiveIndex(index);
+
     const targetSection = sectionRefs.current[index];
     if (targetSection) {
-      isScrolling.current = true;
-      smoothScrollTo(targetSection.offsetTop);
-      setActiveIndex(index);
+      // Scroll to the target section with smooth behavior
+      targetSection.scrollIntoView({ behavior: "smooth" });
+
+      setTimeout(() => {
+        isScrolling.current = false;
+      }, SCROLL_DURATION);
     }
   };
 

app/globals.css

@@ -1,7 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+html,
+body {
+  scroll-behavior: smooth !important;
+}
 body {
   font-family: Arial, Helvetica, sans-serif;
 }