313 lines
12 KiB
TypeScript
313 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import Image from 'next/image';
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
|
|
|
export default function WhyAssetXSection() {
|
|
const { t } = useLanguage();
|
|
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.5 } // 当50%可见时才触发
|
|
);
|
|
|
|
observer.observe(currentRef);
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
className="flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative"
|
|
style={{
|
|
padding: '80px 0px',
|
|
gap: '40px',
|
|
alignContent: 'center'
|
|
}}
|
|
>
|
|
<div className="flex flex-col items-center justify-center w-[1440px]">
|
|
{/* Header - .frame-27 */}
|
|
<div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-[1440px] relative mb-10">
|
|
{/* Title - .why-assetx */}
|
|
<h2
|
|
className="text-[#111827] text-left relative font-inter"
|
|
style={{
|
|
fontSize: '48px',
|
|
lineHeight: '120%',
|
|
letterSpacing: '-0.01em',
|
|
fontWeight: 700
|
|
}}
|
|
>
|
|
{t('why.title')}
|
|
</h2>
|
|
|
|
{/* Subtitle */}
|
|
<p
|
|
className="text-[#9ca1af] text-left relative font-inter"
|
|
style={{
|
|
fontSize: '20px',
|
|
lineHeight: '140%',
|
|
fontWeight: 400
|
|
}}
|
|
>
|
|
{t('why.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Cards Container - .frame-30 */}
|
|
<div className="flex flex-row gap-6 items-center justify-start flex-shrink-0 w-[1440px] relative">
|
|
|
|
{/* Left Large Card - Sustainable Real Yield */}
|
|
<div
|
|
className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-between self-stretch flex-1 relative overflow-hidden
|
|
${
|
|
animate
|
|
? 'translate-y-0 opacity-100'
|
|
: 'translate-y-12 opacity-0'
|
|
}
|
|
hover:-translate-y-2 hover:shadow-xl`}
|
|
style={{
|
|
transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out, translate 0.7s ease-out'
|
|
}}
|
|
>
|
|
{/* .frame-33 */}
|
|
<div className="flex flex-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
|
|
{/* Icon Container - .container12 */}
|
|
<div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
|
|
<Image
|
|
src="/system-data0.svg"
|
|
alt="System Data"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
</div>
|
|
|
|
{/* Text Content - .frame-31 */}
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
|
|
<h3
|
|
className="text-[#111827] text-left relative font-inter"
|
|
style={{
|
|
fontSize: '24px',
|
|
lineHeight: '130%',
|
|
letterSpacing: '-0.005em',
|
|
fontWeight: 700
|
|
}}
|
|
>
|
|
{t('why.sustainable.title')}
|
|
</h3>
|
|
<p
|
|
className="text-[#9ca1af] text-left relative self-stretch font-inter"
|
|
style={{
|
|
fontSize: '16px',
|
|
lineHeight: '150%',
|
|
fontWeight: 400
|
|
}}
|
|
>
|
|
{t('why.sustainable.desc')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chart Image - .frame-11 */}
|
|
<Image
|
|
src="/frame-110.svg"
|
|
alt="Chart"
|
|
width={305}
|
|
height={162}
|
|
className="w-full h-auto flex-shrink-0 relative"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Column - .frame-29 */}
|
|
<div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[850px] relative">
|
|
|
|
{/* Proven Reliability Card */}
|
|
<div
|
|
className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-start self-stretch flex-shrink-0 relative overflow-hidden
|
|
${
|
|
animate
|
|
? 'translate-y-0 opacity-100'
|
|
: 'translate-y-12 opacity-0'
|
|
}
|
|
hover:-translate-y-2 hover:shadow-xl`}
|
|
style={{
|
|
transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out 0.15s, translate 0.7s ease-out 0.15s'
|
|
}}
|
|
>
|
|
{/* .features2 */}
|
|
<div className="flex flex-row items-center justify-between self-stretch flex-shrink-0 relative">
|
|
{/* Left Content - .container13 */}
|
|
<div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[414px] relative">
|
|
{/* Icon */}
|
|
<div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
|
|
<Image
|
|
src="/warning-shield-check0.svg"
|
|
alt="Shield Check"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
</div>
|
|
|
|
{/* Text - .frame-28 */}
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
|
|
<h3
|
|
className="text-[#111827] text-left relative self-stretch font-inter"
|
|
style={{
|
|
fontSize: '24px',
|
|
lineHeight: '130%',
|
|
letterSpacing: '-0.005em',
|
|
fontWeight: 700
|
|
}}
|
|
>
|
|
{t('why.reliability.title')}
|
|
</h3>
|
|
<p
|
|
className="text-[#9ca1af] text-left relative font-inter"
|
|
style={{
|
|
fontSize: '16px',
|
|
lineHeight: '150%',
|
|
fontWeight: 400
|
|
}}
|
|
>
|
|
{t('why.reliability.desc')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Icon */}
|
|
<div
|
|
className="bg-[#f9fafb] rounded-[16px] border border-[#e5e7eb] flex items-center justify-center flex-shrink-0 relative"
|
|
style={{
|
|
padding: '32px',
|
|
height: '180px',
|
|
width: '196px',
|
|
isolation: 'isolate',
|
|
willChange: 'auto',
|
|
contain: 'layout style paint'
|
|
}}
|
|
>
|
|
<div
|
|
className="rounded-full border-2 border-[#e5e7eb] flex items-center justify-center flex-shrink-0 relative"
|
|
style={{
|
|
width: '132px',
|
|
height: '132px',
|
|
minWidth: '132px',
|
|
minHeight: '132px',
|
|
maxWidth: '132px',
|
|
maxHeight: '132px'
|
|
}}
|
|
>
|
|
<div
|
|
className="bg-[#e5e7eb] rounded-full flex items-center justify-center flex-shrink-0 relative"
|
|
style={{
|
|
width: '88.59px',
|
|
height: '88.59px',
|
|
minWidth: '88.59px',
|
|
minHeight: '88.59px',
|
|
maxWidth: '88.59px',
|
|
maxHeight: '88.59px'
|
|
}}
|
|
>
|
|
<img
|
|
src="/icon0.svg"
|
|
alt="Lock Icon"
|
|
style={{
|
|
width: '44.29px',
|
|
height: '44.29px',
|
|
display: 'block'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Flexible Liquidity Card */}
|
|
<div
|
|
className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-start self-stretch flex-shrink-0 relative overflow-hidden
|
|
${
|
|
animate
|
|
? 'translate-y-0 opacity-100'
|
|
: 'translate-y-12 opacity-0'
|
|
}
|
|
hover:-translate-y-2 hover:shadow-xl`}
|
|
style={{
|
|
transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out 0.3s, translate 0.7s ease-out 0.3s'
|
|
}}
|
|
>
|
|
<div className="flex flex-row items-start justify-between self-stretch flex-shrink-0 relative">
|
|
{/* Left Content */}
|
|
<div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[550px] relative">
|
|
{/* Icon */}
|
|
<div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
|
|
<Image
|
|
src="/arrow-arrow-left-right0.svg"
|
|
alt="Arrow"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
</div>
|
|
|
|
{/* Text Content */}
|
|
<div className="flex flex-col gap-4 items-start justify-start flex-shrink-0 relative">
|
|
<h3
|
|
className="text-[#111827] text-left relative font-inter"
|
|
style={{
|
|
fontSize: '24px',
|
|
lineHeight: '130%',
|
|
letterSpacing: '-0.005em',
|
|
fontWeight: 700
|
|
}}
|
|
>
|
|
{t('why.liquidity.title')}
|
|
</h3>
|
|
<p
|
|
className="text-[#9ca1af] text-left relative font-inter"
|
|
style={{
|
|
fontSize: '16px',
|
|
lineHeight: '150%',
|
|
fontWeight: 400
|
|
}}
|
|
>
|
|
{t('why.liquidity.desc')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Badges */}
|
|
<div className="flex flex-row gap-3 items-center justify-end flex-shrink-0">
|
|
<div className="bg-[#e1f8ec] rounded-lg px-4 py-2 flex items-center justify-center">
|
|
<span className="text-[#10b981] font-inter font-bold" style={{ fontSize: '12px' }}>
|
|
{t('why.liquidity.badge1')}
|
|
</span>
|
|
</div>
|
|
<div className="bg-[#ebf2ff] rounded-lg px-4 py-2 flex items-center justify-center">
|
|
<span className="text-[#1447e6] font-inter font-bold" style={{ fontSize: '12px' }}>
|
|
{t('why.liquidity.badge2')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|