125 lines
3.3 KiB
TypeScript
125 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
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);
|
|
|
|
useEffect(() => {
|
|
const currentRef = sectionRef.current;
|
|
if (!currentRef) return;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries[0].isIntersecting) {
|
|
setAnimate(true);
|
|
observer.disconnect();
|
|
}
|
|
},
|
|
{ threshold: 0.3 }
|
|
);
|
|
|
|
observer.observe(currentRef);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const isDark = theme === 'dark';
|
|
|
|
const partners = [
|
|
{
|
|
name: 'BlackRock',
|
|
src: '/nav-ireland0.svg',
|
|
width: 200,
|
|
height: 40
|
|
},
|
|
{
|
|
name: 'Coinbase',
|
|
src: '/coinbase-10.svg',
|
|
width: 180,
|
|
height: 40
|
|
},
|
|
{
|
|
name: 'Wintermute',
|
|
src: '/wintermute0.svg',
|
|
width: 247,
|
|
height: 40
|
|
},
|
|
{
|
|
name: 'Circle',
|
|
src: '/group0.svg',
|
|
width: 156,
|
|
height: 40
|
|
},
|
|
{
|
|
name: 'ConsenSys',
|
|
src: '',
|
|
width: 220,
|
|
height: 50
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
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={{
|
|
padding: '80px 0px',
|
|
gap: '32px'
|
|
}}
|
|
>
|
|
<div
|
|
className={`text-lg font-medium text-center font-domine ${
|
|
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
|
|
}`}
|
|
>
|
|
{t('trusted.title')}
|
|
</div>
|
|
|
|
<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 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`,
|
|
width: `${partner.width}px`,
|
|
height: `${partner.height}px`,
|
|
aspectRatio: `${partner.width}/${partner.height}`
|
|
}}
|
|
>
|
|
{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"
|
|
style={{
|
|
filter: isDark ? 'brightness(0) invert(1)' : 'brightness(0)'
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|