change

components/reuseables/IndustryClientele.js

-import React from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay, Navigation } from "swiper/modules";
+import React, { useRef, useEffect, useState } from "react";
 import Image from "next/image";
-import SwiperNav from "./SwiperNav";
 import { cleanImage } from "@/layout/imageHandling";
 
-const IndustryClientele = ({
+const IndustryClienteleMarquee = ({
   partners = [],
-  spaceBetween = 10,
-  autoplayDelay = 3000,
-  slidesPerViewBreakpoints = {
-    0: { slidesPerView: 2 },
-    576: { slidesPerView: 3 },
-    768: { slidesPerView: 4 },
-    992: { slidesPerView: 4 },
-  },
-  sliderClassName = "partner-slides  position-relative",
   itemClassName = "single-partner-item",
+  baseSpeed = 100, // Pixels per second
 }) => {
-  console.log("clientlogo",partners)
+  const trackRef = useRef(null);
+  const [animationDuration, setAnimationDuration] = useState(60);
+
+  useEffect(() => {
+    if (trackRef.current) {
+      const trackWidth = trackRef.current.scrollWidth;
+      const duration = trackWidth / baseSpeed;
+      setAnimationDuration(duration);
+    }
+  }, [partners, baseSpeed]);
+
   return (
-    <div className="partner-area pb-100">
+    <div className="partner-area pb-100 overflow-hidden">
       <div className="container">
-        <div className="position-relative">
-          <Swiper
-            spaceBetween={spaceBetween}
-            breakpoints={slidesPerViewBreakpoints}
-            loop={true}
-            autoplay={{
-              delay: autoplayDelay,
-              disableOnInteraction: true,
-              pauseOnMouseEnter: true,
-            }}
-            // navigation={{
-            //   nextEl: ".custom-swiper-button-next",
-            //   prevEl: ".custom-swiper-button-prev",
-            // }}
-            modules={[Autoplay]}
-            className={sliderClassName}
+        <div className="marquee-wrapper position-relative">
+          <div
+            className="marquee-track d-flex"
+            ref={trackRef}
+            style={{ animationDuration: `${animationDuration}s` }}
+          >
+            {/* Duplicate for seamless effect */}
+            {[...partners, ...partners].map((logo, index) => (
+              <div
+                className={`${itemClassName} d-flex justify-content-center align-items-center`}
+                key={`${logo.id}-${index}`}
+                style={{ flex: "0 0 auto", width: "250px", height: "80px" }}
               >
-            {partners &&
-              partners?.map((logo) => (
-                
-                <SwiperSlide className={itemClassName} key={logo.id}>
-                  <div className="justify-content-center align-items-center ">
                 <Image
-                          alt={logo?.alternativeText ? logo?.alternativeText : "image"}
+                  alt={logo?.alternativeText || "partner logo"}
                   src={cleanImage(logo?.url)}
-                          fill
-                          className="img-fluid image industry-logo"
+                  width={120}
+                  height={60}
+                  className="img-fluid industry-logo"
                 />
               </div>
-                </SwiperSlide>
             ))}
-          </Swiper>
-          {/* <div className="cust_nav text-center mt-md-4 mt-2">
-            <SwiperNav />
-          </div> */}
           </div>
         </div>
       </div>
+
+      <style jsx>{`
+        .marquee-wrapper {
+          width: 100%;
+          overflow: hidden;
+          position: relative;
+        }
+
+        .marquee-track {
+          display: flex;
+          width: max-content;
+          animation: scroll-left linear infinite;
+        }
+
+        @keyframes scroll-left {
+          0% {
+            transform: translateX(0%);
+          }
+          100% {
+            transform: translateX(-50%);
+          }
+        }
+      `}</style>
+    </div>
   );
 };
 
-export default IndustryClientele;
+export default IndustryClienteleMarquee;

pages/industry.js

@@ -10,10 +10,10 @@ import IndustryClientele from "@/components/reuseables/IndustryClientele";
 import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
 
 
-const industry = ({ IndustryPage , conversionData }) => {
+const industry = ({ IndustryPage, conversionData }) => {
   console.log("conatct", IndustryPage)
   const dynamicdata = IndustryPage?.IndustryDetails;
-  console.log(dynamicdata , "dynamicdata")
+  console.log(dynamicdata, "dynamicdata")
   const banners = [
     {
       imageSrc: cleanImage(IndustryPage?.Banner?.Image?.url),
@@ -41,7 +41,7 @@ const industry = ({ IndustryPage , conversionData }) => {
             console.log("section", section);
             switch (section.__component) {
               case "layout.industry-overview":
-                return  <IndustryOverview  title={section?.title} subtitle={section?.subtitle} description={section?.Description} image={section?.Image}/>;
+                return <IndustryOverview title={section?.title} subtitle={section?.subtitle} description={section?.Description} image={section?.Image} />;
               case "layout.cfo-service":
                 return <IndustryTab
                   serviceTitle={section?.Title}
@@ -113,7 +113,7 @@ export async function getServerSideProps() {
     const conversionData = response2.data.data;
 
     return {
-      props: { IndustryPage , conversionData },
+      props: { IndustryPage, conversionData },
     };
   } catch (error) {
     console.log("Error", error);