51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
const brands = [
|
|
{ id: 1, src: "/images/brands/brand-1.png", width: 169, height: 56 },
|
|
{ id: 2, src: "/images/brands/brand-2.png", width: 169, height: 56 },
|
|
{ id: 3, src: "/images/brands/brand-3.png", width: 213, height: 56 },
|
|
{ id: 4, src: "/images/brands/brand-4.png", width: 187, height: 56 },
|
|
{ id: 5, src: "/images/brands/brand-5.png", width: 169, height: 56 },
|
|
{ id: 6, src: "/images/brands/brand-6.png", width: 169, height: 56 },
|
|
{ id: 7, src: "/images/brands/brand-7.png", width: 169, height: 56 },
|
|
{ id: 8, src: "/images/brands/brand-8.png", width: 168, height: 56 },
|
|
];
|
|
import Image from "next/image";
|
|
// Create 3 sets (original + 2 clones) for the infinite scroll effect
|
|
const allBrands = [...brands, ...brands, ...brands];
|
|
|
|
export default function Brands() {
|
|
return (
|
|
<div className="wrap-logo-carousel">
|
|
<div className="heading-section">
|
|
<h6 className="fw-5 text-center">
|
|
Trusted by over 1000+ companies around the world
|
|
</h6>
|
|
</div>
|
|
<div className="infiniteslide_wrap" style={{ overflow: "hidden" }}>
|
|
<div
|
|
className="infiniteslide tf-marquee infiniteSlide"
|
|
style={{ animationDirection: "reverse" }}
|
|
>
|
|
{allBrands.map((brand, index) => (
|
|
<div
|
|
key={`brand-${brand.id}-${index}`}
|
|
className={`marquee-item style-2${
|
|
index >= brands.length ? " infiniteslide_clone" : ""
|
|
}`}
|
|
style={{ flex: "0 0 auto", display: "block" }}
|
|
>
|
|
<div className="partner style-1">
|
|
<Image
|
|
alt={`Brand ${brand.id}`}
|
|
src={brand.src}
|
|
width={brand.width}
|
|
height={brand.height}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|