src/components/ui/LogoCarousel.tsx

@@ -0,0 +1,30 @@
+import { cls } from "@/lib/utils";
+
+interface Logo {
+  src: string;
+  alt: string;
+}
+
+interface LogoCarouselProps {
+  logos: Logo[];
+  className?: string;
+}
+
+const LogoCarousel = ({ logos, className = "" }: LogoCarouselProps) => {
+  if (!logos || logos.length === 0) return null;
+
+  return (
+    <div className={cls("w-full overflow-hidden flex flex-col gap-3", className)}>
+      <p className="text-sm text-foreground/60 font-medium max-md:text-center">Trusted by</p>
+      <div className="flex w-max animate-marquee">
+        {[...logos, ...logos].map((logo, idx) => (
+          <div key={idx} className="flex items-center justify-center px-6">
+            <img src={logo.src} alt={logo.alt} className="h-8 w-auto object-contain opacity-60 grayscale" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LogoCarousel;