'use client'; import { useState, useEffect, useRef } from 'react'; import Image from 'next/image'; import { useTranslations } from 'next-intl'; import LakeTokenHeader from './components/Header'; import LakeTokenFooter from './components/Footer'; import Link from 'next/link'; import CounterAnimation from '@/components/CounterAnimation'; import AnimatedElement from '@/components/AnimatedElement'; import TypingText from './components/TypingText'; import AnimatedImage from '@/components/AnimatedImage'; import AnimatedText from '@/components/AnimatedText'; import './lake-token.css'; function AnimatedPartnersBanner() { const scrollRef = useRef(null); const [scroll, setScroll] = useState(0); const [isMobile, setIsMobile] = useState(false); useEffect(() => { const checkScreenSize = () => { setIsMobile(window.innerWidth < 640); }; checkScreenSize(); window.addEventListener('resize', checkScreenSize); return () => window.removeEventListener('resize', checkScreenSize); }, []); // Размеры изображения (можно подстроить под макет) const imgWidth = isMobile ? window.innerWidth * 1.5 : 1724; // адаптивная ширина для мобильных const imgHeight = 334; // высота Group 662.svg из Figma useEffect(() => { let frame: number; let start: number | undefined; const speed = isMobile ? 20 : 40; // px/sec - медленнее на мобильных const animate = (timestamp: number) => { if (!start) start = timestamp; const elapsed = timestamp - start; // Прокрутка по ширине одного изображения let newScroll = (elapsed * speed / 1000) % imgWidth; setScroll(newScroll); frame = requestAnimationFrame(animate); }; frame = requestAnimationFrame(animate); return () => cancelAnimationFrame(frame); }, []); const sectionHeight = isMobile ? '30vw' : imgHeight; // На мобильных нужно больше дубликатов для бесшовности const duplicateCount = isMobile ? 6 : 2; return (
{/* Левый градиент */}
{/* Правый градиент */}
{Array.from({ length: duplicateCount }, (_, index) => ( {`Партнёры ))}
); } function AutoPlayOnVisibleVideo({ src, poster, className, ...props }: { src: string; poster?: string; className?: string; [x: string]: any }) { const videoRef = useRef(null); const [isVisible, setIsVisible] = useState(false); useEffect(() => { const observer = new window.IntersectionObserver( ([entry]) => { setIsVisible(entry.isIntersecting); }, { threshold: 0.3 } ); if (videoRef.current) observer.observe(videoRef.current); return () => { if (videoRef.current) observer.unobserve(videoRef.current); }; }, []); useEffect(() => { if (videoRef.current) { if (isVisible) { videoRef.current.play(); } else { videoRef.current.pause(); } } }, [isVisible]); return (