109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
"use client"
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import Image from 'next/image';
|
|
|
|
const ClientsSection = () => {
|
|
const [translateX, setTranslateX] = useState(0);
|
|
const [isTransitioning, setIsTransitioning] = useState(true);
|
|
const containerRef = useRef(null);
|
|
|
|
const clients = [
|
|
{ name: "Ashoka University", logo: "/images/client/ashoka.png" },
|
|
{ name: "BRIC", logo: "/images/client/BRIC.png" },
|
|
{ name: "CSIR", logo: "/images/client/csir.png" },
|
|
{ name: "DRDO", logo: "/images/client/drdo.png" },
|
|
{ name: "DUAC", logo: "/images/client/duac.png" },
|
|
{ name: "ICMR-NIV", logo: "/images/client/icmr-niv.jpg" },
|
|
{ name: "IIMR", logo: "/images/client/iimr.png" },
|
|
{ name: "IISERB", logo: "/images/client/iiserb.png" },
|
|
{ name: "ILBS", logo: "/images/client/ilbs.jpg" },
|
|
{ name: "Manipal", logo: "/images/client/manipal.png" },
|
|
{ name: "Rani", logo: "/images/client/rani.png" },
|
|
{ name: "OUAT", logo: "/images/client/Ouat.png" },
|
|
{ name: "AIIMS", logo: "/images/client/aiims.png" },
|
|
{ name: "IARI", logo: "/images/client/iari.png" },
|
|
{ name: "KGMU", logo: "/images/client/kgmu.png" },
|
|
{ name: "BHU", logo: "/images/client/bhu.png" }
|
|
];
|
|
|
|
// Triple the array for seamless infinite loop
|
|
const infiniteClients = [...clients, ...clients, ...clients];
|
|
const itemWidth = 100 / 50; // Each item is 1/6 of the container
|
|
const singleSetWidth = clients.length * itemWidth; // Width of one complete set
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setTranslateX(prev => {
|
|
const newTranslateX = prev + itemWidth;
|
|
|
|
// When we reach the end of the second set, reset to the beginning of the second set
|
|
if (newTranslateX >= singleSetWidth * 1) {
|
|
// Temporarily disable transition for seamless reset
|
|
setIsTransitioning(false);
|
|
setTimeout(() => {
|
|
setTranslateX(singleSetWidth); // Reset to start of second set
|
|
setIsTransitioning(true);
|
|
}, 50);
|
|
|
|
return prev;
|
|
}
|
|
|
|
return newTranslateX;
|
|
});
|
|
}, 3000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [itemWidth, singleSetWidth]);
|
|
|
|
return (
|
|
<section className="py-16 bg-gray-100">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-teal-700 mb-6">
|
|
Trusted By Leading Institutions
|
|
</h2>
|
|
<div className="flex justify-center mb-8">
|
|
<Image
|
|
src="/images/homepage-2/Trsuted-Institutions.png"
|
|
alt="Trusted Institutions"
|
|
width={250}
|
|
height={100}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slider Container */}
|
|
<div className="overflow-hidden">
|
|
<div
|
|
ref={containerRef}
|
|
className={`flex ${isTransitioning ? 'transition-transform duration-1000 ease-linear' : ''}`}
|
|
style={{
|
|
transform: `translateX(-${translateX}%)`,
|
|
width: `${(infiniteClients.length * 100) / 6}%`
|
|
}}
|
|
>
|
|
{infiniteClients.map((client, index) => (
|
|
<div
|
|
key={`${client.name}-${index}`}
|
|
className="flex-shrink-0 px-4"
|
|
style={{ width: `${100 / infiniteClients.length}%` }}
|
|
>
|
|
<div className="flex justify-center items-center h-24">
|
|
<Image
|
|
src={client.logo}
|
|
alt={client.name}
|
|
width={300}
|
|
height={150}
|
|
className="w-[10rem] h-[6rem] object-contain hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ClientsSection; |