初始化项目

2026-01-27 17:26:30 +08:00
commit 08af95116e
62 changed files with 9364 additions and 0 deletions
--- a/components/TrustedBySection.tsx
+++ b/components/TrustedBySection.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+export default function TrustedBySection() {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+
+    // 使用 IntersectionObserver 检测元素进入视口
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !visible) {
+            setVisible(true);
+          }
+        });
+      },
+      {
+        threshold: 0.2, // 当20%的元素可见时触发
+      }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, [visible]);
+
+  // 合作伙伴 logo 数据
+  const partners = [
+    {
+      name: 'BlackRock',
+      src: '/nav-ireland0.svg',
+      width: 193,
+      height: 28,
+      className: 'w-[193px] h-[28px]'
+    },
+    {
+      name: 'Coinbase',
+      src: '/coinbase-10.svg',
+      width: 179,
+      height: 32,
+      className: 'w-[179px] h-[32px]'
+    },
+    {
+      name: 'Wintermute',
+      src: '/wintermute0.svg',
+      width: 247,
+      height: 40,
+      className: 'w-[247px] h-[40px]'
+    },
+    {
+      name: 'Circle',
+      src: '/group0.svg',
+      width: 156,
+      height: 40,
+      className: 'w-[156px] h-[40px]'
+    },
+    {
+      name: 'ConsenSys',
+      src: '/logo1.svg', // 临时使用一个 logo
+      width: 176,
+      height: 40,
+      className: 'w-[176px] h-[40px]'
+    }
+  ];
+
+  return (
+    <section
+      ref={sectionRef}
+      className="bg-[#f9fafb] flex flex-col items-center justify-center flex-shrink-0 w-full relative"
+      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
+        }}
+      >
+        Trusted by Industry Leaders
+      </div>
+
+      {/* Logo容器 - .frame-26 */}
+      <div
+        className="flex flex-row items-center justify-between flex-shrink-0 w-[1200px] 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
+                ? 'translate-y-0 opacity-100'
+                : 'translate-y-12 opacity-0'
+            }`}
+            style={{
+              transitionDelay: `${index * 150}ms`, // 每个logo延迟150ms
+              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"
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}