main

src/components/Clients.tsx

@@ -0,0 +1,50 @@
+import { useLanguage } from '../i18n/LanguageContext';
+import { useData } from '../context/DataContext';
+
+export default function Clients() {
+    const { t, language } = useLanguage();
+    const { data } = useData();
+
+    const clients = [...data.clients].sort((a, b) => a.order - b.order);
+
+    if (clients.length === 0) return null;
+
+    // Duplicate for seamless marquee
+    const duplicated = [...clients, ...clients, ...clients, ...clients];
+
+    return (
+        <section id="clients" className="py-24 relative overflow-hidden">
+            <div className="max-w-7xl mx-auto px-6 mb-16">
+                <h2 className="text-sm font-mono text-[#FF5733] tracking-widest mb-2">{t.clients.badge.toLocaleUpperCase(language)}</h2>
+                <h3 className="text-4xl md:text-5xl font-display font-bold">{t.clients.title}</h3>
+            </div>
+
+            {/* Marquee of client logos */}
+            <div className="w-full overflow-hidden relative">
+                {/* Fade masks */}
+                <div className="absolute top-0 left-0 w-16 md:w-48 h-full bg-gradient-to-r from-[#050505] to-transparent z-10 pointer-events-none" />
+                <div className="absolute top-0 right-0 w-16 md:w-48 h-full bg-gradient-to-l from-[#050505] to-transparent z-10 pointer-events-none" />
+
+                <div className="flex items-center gap-16 md:gap-24 animate-marquee-slow w-max px-8 hover:[animation-play-state:paused]">
+                    {duplicated.map((client, index) => (
+                        <a
+                            key={`${client.id}-${index}`}
+                            href={client.website || '#'}
+                            target={client.website ? '_blank' : undefined}
+                            rel="noopener noreferrer"
+                            className="flex-shrink-0 group transition-all duration-500"
+                            title={client.name}
+                        >
+                            <img
+                                src={client.logo}
+                                alt={client.name}
+                                className="h-[50px] md:h-[60px] w-auto object-contain opacity-60 group-hover:opacity-100 transition-all duration-500"
+                                style={{ maxWidth: '200px' }}
+                            />
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}