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

Fix : Added a scroller on ClientLogoSection

app/(website)/_components/ClientLogosSection.tsx

@@ -23,8 +23,6 @@ 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);
@@ -40,19 +38,16 @@ 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");
   };
 
@@ -66,10 +61,14 @@ const ClientLogosSection = ({
       if (!paused) {
         if (direction === "left") {
           container.scrollLeft += speed;
-          if (container.scrollLeft >= container.scrollWidth / 2) container.scrollLeft = 0;
+          if (container.scrollLeft >= container.scrollWidth / 2) {
+            container.scrollLeft = 0;
+          }
         } else {
           container.scrollLeft -= speed;
-          if (container.scrollLeft <= 0) container.scrollLeft = container.scrollWidth / 2;
+          if (container.scrollLeft <= 0) {
+            container.scrollLeft = container.scrollWidth / 2;
+          }
         }
       }
       animationFrame = requestAnimationFrame(step);
@@ -80,6 +79,9 @@ 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">
@@ -156,6 +158,8 @@ const ClientLogosSection = ({
   );
 };
 
+export default ClientLogosSection;
+
 export const defaultClients: Client[] = [
   { name: "ABSA", logoUrl: "/images/absa.png" },
   { name: "SYBRIN", logoUrl: "/images/sybrin.svg" },
@@ -166,4 +170,4 @@ export const defaultClients: Client[] = [
   { name: "TOYOTA", logoUrl: "/images/toyota-logo.png" },
 ];
 
-export default ClientLogosSection;
+