打磨细节

components/TrustedBySection.tsx

@@ -2,55 +2,47 @@
 
 import { useState, useEffect, useRef } from 'react';
 import Image from 'next/image';
+import { useLanguage } from '@/contexts/LanguageContext';
+import ConsenSysLogo from './ConsenSysLogo';
 
 export default function TrustedBySection() {
-  const [mounted, setMounted] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const { t } = useLanguage();
+  const [animate, setAnimate] = useState(false);
   const sectionRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    setMounted(true);
+    const currentRef = sectionRef.current;
+    if (!currentRef) return;
 
-    // 使用 IntersectionObserver 检测元素进入视口
     const observer = new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting && !visible) {
-            setVisible(true);
-          }
-        });
+        if (entries[0].isIntersecting) {
+          setAnimate(true);
+          observer.disconnect(); // 触发后立即断开
+        }
       },
-      {
-        threshold: 0.2, // 当20%的元素可见时触发
-      }
+      { threshold: 0.3 }
     );
 
-    if (sectionRef.current) {
-      observer.observe(sectionRef.current);
-    }
+    observer.observe(currentRef);
+    return () => observer.disconnect();
+  }, []);
 
-    return () => {
-      if (sectionRef.current) {
-        observer.unobserve(sectionRef.current);
-      }
-    };
-  }, [visible]);
-
-  // 合作伙伴 logo 数据
+  // 合作伙伴 logo 数据 - 统一高度为40px
   const partners = [
     {
       name: 'BlackRock',
       src: '/nav-ireland0.svg',
-      width: 193,
-      height: 28,
-      className: 'w-[193px] h-[28px]'
+      width: 200,
+      height: 40,
+      className: 'w-[200px] h-[40px]'
     },
     {
       name: 'Coinbase',
       src: '/coinbase-10.svg',
-      width: 179,
-      height: 32,
-      className: 'w-[179px] h-[32px]'
+      width: 180,
+      height: 40,
+      className: 'w-[180px] h-[40px]'
     },
     {
       name: 'Wintermute',
@@ -68,10 +60,10 @@ export default function TrustedBySection() {
     },
     {
       name: 'ConsenSys',
-      src: '/logo1.svg', // 临时使用一个 logo
-      width: 176,
-      height: 40,
-      className: 'w-[176px] h-[40px]'
+      src: '', // 使用组合的vector文件
+      width: 220,
+      height: 50,
+      className: 'w-[220px] h-[50px]'
     }
   ];
 
@@ -96,33 +88,39 @@ export default function TrustedBySection() {
           fontWeight: 500
         }}
       >
-        Trusted by Industry Leaders
+        {t('trusted.title')}
       </div>
 
       {/* Logo容器 - .frame-26 */}
       <div
-        className="flex flex-row items-center justify-between flex-shrink-0 w-[1200px] relative"
+        className="flex flex-row items-center justify-between flex-shrink-0 w-[1440px] relative"
       >
         {partners.map((partner, index) => (
           <div
             key={partner.name}
-            className={`flex-shrink-0 relative overflow-hidden transition-all duration-700 ease-out ${partner.className} ${
-              mounted && visible
+            className={`flex-shrink-0 relative overflow-hidden transition-all duration-700 ease-out ${
+              animate
                 ? 'translate-y-0 opacity-100'
                 : 'translate-y-12 opacity-0'
             }`}
             style={{
-              transitionDelay: `${index * 150}ms`, // 每个logo延迟150ms
+              transitionDelay: `${index * 100}ms`,
+              width: `${partner.width}px`,
+              height: `${partner.height}px`,
               aspectRatio: `${partner.width}/${partner.height}`
             }}
           >
-            <Image
-              src={partner.src}
-              alt={partner.name}
-              width={partner.width}
-              height={partner.height}
-              className="w-full h-full object-contain"
-            />
+            {partner.name === 'ConsenSys' ? (
+              <ConsenSysLogo width={partner.width} height={partner.height} />
+            ) : (
+              <Image
+                src={partner.src}
+                alt={partner.name}
+                width={partner.width}
+                height={partner.height}
+                className="w-full h-full object-contain"
+              />
+            )}
           </div>
         ))}
       </div>