first commit

components/homes/marketing-consulting/Brands.jsx

@@ -0,0 +1,50 @@
+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>
+  );
+}