Merge pull request #33 from OwethuManagedServices/09-09-2025-/Please-add-a-scroller-onTrusted-By-Industry-Leaders

feat: enhance ClientLogosSection with scrolling functionality and con…

app/(website)/_components/ClientLogosSection.tsx

@@ -23,6 +23,8 @@ const ClientLogosSection = ({
   speed = 1,
   squareSize = 120,
 }: ClientLogosSectionProps) => {
+  if (clients.length === 0) return null;
+
   const extendedClients = [...clients, ...clients];
   const squareDim = `${squareSize}px`;
   const padding = Math.round(squareSize / 6);
@@ -38,16 +40,19 @@ const ClientLogosSection = ({
 
     setPaused(true);
 
+    // Scroll manually
     scrollRef.current.scrollBy({
       left: dir === "left" ? -200 : 200,
       behavior: "smooth",
     });
 
+    // Clear previous timeout and resume after 3 seconds
     clearTimeout(resumeTimeout);
     resumeTimeout = setTimeout(() => {
       setPaused(false);
     }, 3000);
 
+    // Set the direction for automatic scroll after pause
     setDirection(dir === "left" ? "right" : "left");
   };
 
@@ -61,14 +66,10 @@ const ClientLogosSection = ({
       if (!paused) {
         if (direction === "left") {
           container.scrollLeft += speed;
-          if (container.scrollLeft >= container.scrollWidth / 2) {
+          if (container.scrollLeft >= container.scrollWidth / 2) container.scrollLeft = 0;
-            container.scrollLeft = 0;
-          }
         } else {
           container.scrollLeft -= speed;
-          if (container.scrollLeft <= 0) {
+          if (container.scrollLeft <= 0) container.scrollLeft = container.scrollWidth / 2;
-            container.scrollLeft = container.scrollWidth / 2;
-          }
         }
       }
       animationFrame = requestAnimationFrame(step);
@@ -79,9 +80,6 @@ const ClientLogosSection = ({
     return () => cancelAnimationFrame(animationFrame);
   }, [direction, paused, speed]);
 
-  // ✅ Safe early return after hooks
-  if (clients.length === 0) return null;
-
   return (
     <section className="py-16 md:py-20 bg-background overflow-hidden">
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
@@ -158,8 +156,6 @@ const ClientLogosSection = ({
   );
 };
 
-export default ClientLogosSection;
-
 export const defaultClients: Client[] = [
   { name: "ABSA", logoUrl: "/images/absa.png" },
   { name: "SYBRIN", logoUrl: "/images/sybrin.svg" },
@@ -170,4 +166,4 @@ export const defaultClients: Client[] = [
   { name: "TOYOTA", logoUrl: "/images/toyota-logo.png" },
 ];
 
-
+export default ClientLogosSection;