使用heroui完成对页面的重构

components/TrustedBySection.tsx

@@ -3,10 +3,12 @@
 import { useState, useEffect, useRef } from 'react';
 import Image from 'next/image';
 import { useLanguage } from '@/contexts/LanguageContext';
+import { useTheme } from '@/contexts/ThemeContext';
 import ConsenSysLogo from './ConsenSysLogo';
 
 export default function TrustedBySection() {
   const { t } = useLanguage();
+  const { theme } = useTheme();
   const [animate, setAnimate] = useState(false);
   const sectionRef = useRef<HTMLElement>(null);
 
@@ -18,7 +20,7 @@ export default function TrustedBySection() {
       (entries) => {
         if (entries[0].isIntersecting) {
           setAnimate(true);
-          observer.disconnect(); // 触发后立即断开
+          observer.disconnect();
         }
       },
       { threshold: 0.3 }
@@ -28,80 +30,70 @@ export default function TrustedBySection() {
     return () => observer.disconnect();
   }, []);
 
-  // 合作伙伴 logo 数据 - 统一高度为40px
+  const isDark = theme === 'dark';
+
   const partners = [
     {
       name: 'BlackRock',
       src: '/nav-ireland0.svg',
       width: 200,
-      height: 40,
-      className: 'w-[200px] h-[40px]'
+      height: 40
     },
     {
       name: 'Coinbase',
       src: '/coinbase-10.svg',
       width: 180,
-      height: 40,
-      className: 'w-[180px] h-[40px]'
+      height: 40
     },
     {
       name: 'Wintermute',
       src: '/wintermute0.svg',
       width: 247,
-      height: 40,
-      className: 'w-[247px] h-[40px]'
+      height: 40
     },
     {
       name: 'Circle',
       src: '/group0.svg',
       width: 156,
-      height: 40,
-      className: 'w-[156px] h-[40px]'
+      height: 40
     },
     {
       name: 'ConsenSys',
-      src: '', // 使用组合的vector文件
+      src: '',
       width: 220,
-      height: 50,
-      className: 'w-[220px] h-[50px]'
+      height: 50
     }
   ];
 
   return (
     <section
       ref={sectionRef}
-      className="bg-[#f9fafb] flex flex-col items-center justify-center flex-shrink-0 w-full relative"
+      className={`flex flex-col items-center justify-center flex-shrink-0 w-full relative border-b ${
+        isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-[#f9fafb] border-[#e5e7eb]'
+      }`}
       style={{
-        borderStyle: 'solid',
-        borderColor: '#e5e7eb',
-        borderWidth: '0px 0px 1px 0px',
         padding: '80px 0px',
         gap: '32px'
       }}
     >
-      {/* 标题 - .text6 */}
       <div
-        className="text-[#111827] text-center relative flex items-center justify-center font-inter"
-        style={{
-          fontSize: '18px',
-          lineHeight: '150%',
-          fontWeight: 500
-        }}
+        className={`text-lg font-medium text-center font-domine ${
+          isDark ? 'text-[#fafafa]' : 'text-[#111827]'
+        }`}
       >
         {t('trusted.title')}
       </div>
 
-      {/* Logo容器 - .frame-26 */}
-      <div
-        className="flex flex-row items-center justify-between flex-shrink-0 w-[1440px] relative"
-      >
+      <div 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 cursor-pointer hover:brightness-0 ${
-              animate
-                ? 'translate-y-0 opacity-100'
-                : 'translate-y-12 opacity-0'
+            className={`flex-shrink-0 relative overflow-hidden cursor-pointer transition-all ${
+              animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
+            } ${
+              isDark
+                ? 'hover:brightness-200 hover:invert'
+                : 'hover:brightness-0'
             }`}
             style={{
               transition: `transform 0.7s ease-out ${index * 100}ms, opacity 0.7s ease-out ${index * 100}ms, filter 0.3s ease-out`,
@@ -119,6 +111,9 @@ export default function TrustedBySection() {
                 width={partner.width}
                 height={partner.height}
                 className="w-full h-full object-contain"
+                style={{
+                  filter: isDark ? 'brightness(0) invert(1)' : 'brightness(0)'
+                }}
               />
             )}
           </div>