132 lines
3.2 KiB
TypeScript
132 lines
3.2 KiB
TypeScript
|
'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>
|
||
|
|
);
|
||
|
|
}
|