master

my-app/src/components/PartnerLogos.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from 'react';
+
+interface Partner {
+  name: string;
+  logo?: string;
+}
+
+interface PartnerLogosProps {
+  partners: Partner[];
+}
+
+export const PartnerLogos: React.FC<PartnerLogosProps> = ({ partners }) => {
+  // Duplicate for seamless infinite scroll
+  const duplicatedPartners = [...partners, ...partners];
+
+  return (
+    <div className="relative overflow-hidden py-8">
+      {/* Gradient masks */}
+      <div className="absolute left-0 top-0 bottom-0 w-32 bg-linear-to-r from-zsl-bg to-transparent z-10" />
+      <div className="absolute right-0 top-0 bottom-0 w-32 bg-linear-to-l from-zsl-bg to-transparent z-10" />
+
+      {/* Scrolling container */}
+      <div className="flex animate-scroll">
+        {duplicatedPartners.map((partner, index) => (
+          <div
+            key={`${partner.name}-${index}`}
+            className="shrink-0 mx-8 md:mx-12"
+          >
+            <div className="w-32 h-16 md:w-40 md:h-20 flex items-center justify-center bg-zsl-card/30 border border-zsl-primary/10 rounded-lg hover:border-zsl-primary/30 transition-all duration-300 group px-4">
+              {partner.logo ? (
+                <img 
+                  src={partner.logo} 
+                  alt={partner.name}
+                  className="max-w-full max-h-full object-contain opacity-50 group-hover:opacity-100 transition-opacity duration-300 filter grayscale group-hover:grayscale-0"
+                />
+              ) : (
+                <span className="text-sm font-medium text-zsl-muted/50 group-hover:text-zsl-primary transition-colors duration-300 text-center">
+                  {partner.name}
+                </span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Add CSS animation */}
+      <style jsx>{`
+        @keyframes scroll {
+          0% {
+            transform: translateX(0);
+          }
+          100% {
+            transform: translateX(-50%);
+          }
+        }
+        .animate-scroll {
+          animation: scroll 30s linear infinite;
+        }
+        .animate-scroll:hover {
+          animation-play-state: paused;
+        }
+      `}</style>
+    </div>
+  );
+};