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

@@ -1,42 +1,85 @@
-// components/ClientLogosSection.tsx
-import React from "react";
+"use client";
+
+import { useRef, useEffect, useState } from "react";
 import Image from "next/image";
 
-// Define structure for client data - focusing on logos now
 type Client = {
   name: string;
-  logoUrl: string; // Expecting actual logo URLs now
+  logoUrl: string;
 };
 
 type ClientLogosSectionProps = {
   title: string;
   description?: string;
   clients: Client[];
-  /** Control animation speed (lower number = faster). Default: 40s */
-  speed?: number;
-  /** Size of the square background container in pixels. Default: 120 */
+  speed?: number; // pixels per frame
   squareSize?: number;
 };
 
-const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
+const ClientLogosSection = ({
   title,
   description,
-  clients = [], // Default to empty array
-  speed = 40, //Default speed in seconds for one full cycle
-  squareSize = 120, // Default size for the square container (e.g., 120px)
-}) => {
-  // Need at least one client to render the marquee
-  if (clients.length === 0) {
-    return null; // Or render a placeholder message if preferred
-  }
+  clients = [],
+  speed = 1,
+  squareSize = 120,
+}: ClientLogosSectionProps) => {
+  if (clients.length === 0) return null;
 
-  // Duplicate the clients for a seamless loop effect
   const extendedClients = [...clients, ...clients];
-
-  const squareDim = `${squareSize}px`; // Convert size to string for inline style
-  const padding = Math.round(squareSize / 6); // Calculate padding based on size (adjust divisor as needed)
+  const squareDim = `${squareSize}px`;
+  const padding = Math.round(squareSize / 6);
   const paddingDim = `${padding}px`;
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [direction, setDirection] = useState<"left" | "right">("left");
+  const [paused, setPaused] = useState(false);
+  let resumeTimeout: NodeJS.Timeout;
+
+  const pauseAndScroll = (dir: "left" | "right") => {
+    if (!scrollRef.current) return;
+
+    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");
+  };
+
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    let animationFrame: number;
+
+    const step = () => {
+      if (!paused) {
+        if (direction === "left") {
+          container.scrollLeft += speed;
+          if (container.scrollLeft >= container.scrollWidth / 2) container.scrollLeft = 0;
+        } else {
+          container.scrollLeft -= speed;
+          if (container.scrollLeft <= 0) container.scrollLeft = container.scrollWidth / 2;
+        }
+      }
+      animationFrame = requestAnimationFrame(step);
+    };
+
+    animationFrame = requestAnimationFrame(step);
+
+    return () => cancelAnimationFrame(animationFrame);
+  }, [direction, paused, speed]);
+
   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">
@@ -45,19 +88,17 @@ const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
         </h2>
       </div>
 
-      {/* Marquee container - group allows pausing animation on hover */}
-      <div className="relative w-full overflow-hidden group">
-        {/* Inner container that will animate */}
+      {/* Logos Container */}
+      <div className="relative w-full overflow-hidden">
         <div
-          className="flex flex-nowrap animate-marquee-continuous"
-          style={{ animationDuration: `${speed}s` }}
+          ref={scrollRef}
+          className="flex flex-nowrap overflow-x-hidden scrollbar-hide"
         >
           {extendedClients.map((client, index) => (
             <div
               key={`${client.name}-${index}`}
               className="flex-shrink-0 mx-12 md:mx-16 py-4"
             >
-              {/* Square Background Container */}
               <div
                 title={client.name}
                 className="
@@ -73,23 +114,35 @@ const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
                 style={{
                   width: squareDim,
                   height: squareDim,
-                  padding: paddingDim, // Add padding inside the square
+                  padding: paddingDim,
                 }}
               >
                 <Image
                   src={client.logoUrl}
                   alt={`${client.name} Logo`}
-                  layout="fill" // Let image fill the relative container
-                  objectFit="contain" // Maintain aspect ratio within the container
+                  fill
+                  style={{ objectFit: "contain" }}
                 />
               </div>
             </div>
           ))}
         </div>
+      </div>
 
-        {/* Optional: Add fade effect at the edges */}
-        <div className="absolute inset-y-0 left-0 w-16 md:w-24 bg-gradient-to-r from-background to-transparent pointer-events-none z-10"></div>
-        <div className="absolute inset-y-0 right-0 w-16 md:w-24 bg-gradient-to-l from-background to-transparent pointer-events-none z-10"></div>
+      {/* Arrow Controls */}
+      <div className="flex justify-center mt-8 space-x-6">
+        <button
+          onClick={() => pauseAndScroll("right")}
+          className="px-4 py-2 rounded-full bg-muted hover:bg-muted/70 transition"
+        >
+          ←
+        </button>
+        <button
+          onClick={() => pauseAndScroll("left")}
+          className="px-4 py-2 rounded-full bg-muted hover:bg-muted/70 transition"
+        >
+          →
+        </button>
       </div>
 
       {description && (

app/globals.css

@@ -208,18 +208,16 @@
   } /* Added longer delay */
 }
 
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+
+@keyframes marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
 }
 
-.animate-fade-in-up {
-  animation: fadeInUp 0.8s ease-out forwards;
-  opacity: 0; /* Start hidden */
+.animate-marquee-continuous {
+  animation: marquee linear infinite;
+}
+
+.paused {
+  animation-play-state: paused !important;
 }