256 lines
10 KiB
TypeScript
256 lines
10 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useRef } from 'react';
|
||
|
|
import { motion, useInView } from 'framer-motion';
|
||
|
|
import Image from 'next/image';
|
||
|
|
import { Card, CardBody, Chip } from '@heroui/react';
|
||
|
|
import { TrendingUp, ShieldCheck, ArrowLeftRight, Lock } from 'lucide-react';
|
||
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
||
|
|
|
||
|
|
export default function WhyAssetXSection() {
|
||
|
|
const { t } = useLanguage();
|
||
|
|
const sectionRef = useRef<HTMLElement>(null);
|
||
|
|
const isInView = useInView(sectionRef, { once: true, amount: 0.2 });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
ref={sectionRef}
|
||
|
|
className="flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative bg-bg-base"
|
||
|
|
style={{
|
||
|
|
padding: 'clamp(40px, 5vw, 100px) clamp(24px, 4vw, 80px)',
|
||
|
|
gap: 'clamp(24px, 3vw, 64px)',
|
||
|
|
alignContent: 'center'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col items-center justify-center w-full max-w-[1440px] 2xl:max-w-[1760px] 3xl:max-w-[2200px]">
|
||
|
|
<div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-full relative mb-10">
|
||
|
|
<motion.h2
|
||
|
|
className="text-left relative font-domine font-bold text-text-primary"
|
||
|
|
style={{
|
||
|
|
fontSize: 'clamp(36px, 3.5vw, 80px)',
|
||
|
|
lineHeight: '120%',
|
||
|
|
letterSpacing: '-0.01em'
|
||
|
|
}}
|
||
|
|
initial={{ opacity: 0, y: 24 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
|
||
|
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||
|
|
>
|
||
|
|
{t('why.title')}
|
||
|
|
</motion.h2>
|
||
|
|
|
||
|
|
<motion.p
|
||
|
|
className="text-left relative font-domine text-text-tertiary"
|
||
|
|
style={{ fontSize: 'clamp(16px, 1.2vw, 22px)', lineHeight: '140%' }}
|
||
|
|
initial={{ opacity: 0, y: 24 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
|
||
|
|
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.15 }}
|
||
|
|
>
|
||
|
|
{t('why.subtitle')}
|
||
|
|
</motion.p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col md:flex-row gap-6 items-stretch justify-start w-full relative">
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 32 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
|
||
|
|
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.2 }}
|
||
|
|
className="flex-1"
|
||
|
|
>
|
||
|
|
<Card
|
||
|
|
className="self-stretch hover:-translate-y-2 bg-bg-surface border-border-normal h-full"
|
||
|
|
shadow="sm"
|
||
|
|
style={{
|
||
|
|
transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out',
|
||
|
|
willChange: 'transform'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<CardBody className="flex flex-col items-start justify-between p-6 md:p-10 gap-6">
|
||
|
|
<div className="flex flex-col gap-6 items-start justify-start self-stretch">
|
||
|
|
<div className="rounded-2xl flex items-center justify-center w-12 h-12 bg-bg-elevated">
|
||
|
|
<TrendingUp size={24} className="text-text-primary" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch">
|
||
|
|
<h3 className="text-2xl font-bold font-domine text-text-primary"
|
||
|
|
style={{
|
||
|
|
lineHeight: '130%',
|
||
|
|
letterSpacing: '-0.005em'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t('why.sustainable.title')}
|
||
|
|
</h3>
|
||
|
|
<p className="text-base font-domine text-text-tertiary"
|
||
|
|
style={{
|
||
|
|
lineHeight: '150%'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t('why.sustainable.desc')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Image
|
||
|
|
src="/frame-110.svg"
|
||
|
|
alt="Chart"
|
||
|
|
width={305}
|
||
|
|
height={162}
|
||
|
|
className="w-full h-auto"
|
||
|
|
/>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-6 items-start justify-start w-full md:flex-1 relative self-stretch">
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 32 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
|
||
|
|
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
|
||
|
|
className="w-full flex-1 flex flex-col"
|
||
|
|
>
|
||
|
|
<Card
|
||
|
|
className="self-stretch hover:-translate-y-2 bg-bg-surface border-border-normal flex-1"
|
||
|
|
shadow="sm"
|
||
|
|
style={{
|
||
|
|
transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out',
|
||
|
|
willChange: 'transform'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<CardBody className="flex flex-col md:flex-row items-start md:items-center justify-between p-6 md:p-10 gap-6 md:gap-0">
|
||
|
|
<div className="flex flex-col gap-6 items-start justify-start w-full md:w-[414px]">
|
||
|
|
<div className="rounded-2xl flex items-center justify-center w-12 h-12 bg-bg-elevated">
|
||
|
|
<ShieldCheck size={24} className="text-text-primary" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch">
|
||
|
|
<h3 className="text-2xl font-bold font-domine text-text-primary"
|
||
|
|
style={{
|
||
|
|
lineHeight: '130%',
|
||
|
|
letterSpacing: '-0.005em'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t('why.reliability.title')}
|
||
|
|
</h3>
|
||
|
|
<p className="text-base font-domine text-text-tertiary"
|
||
|
|
style={{
|
||
|
|
lineHeight: '150%'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t('why.reliability.desc')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="relative bg-bg-elevated border border-border-strong rounded-2xl mx-auto md:mx-0"
|
||
|
|
style={{
|
||
|
|
width: '196px',
|
||
|
|
height: '180px',
|
||
|
|
flexShrink: 0
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* 外层圆环 */}
|
||
|
|
<div
|
||
|
|
className="absolute rounded-full border-2 border-border-strong"
|
||
|
|
style={{
|
||
|
|
width: '132px',
|
||
|
|
height: '132px',
|
||
|
|
left: '50%',
|
||
|
|
top: '50%',
|
||
|
|
transform: 'translate(-50%, -50%)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* 内层圆 */}
|
||
|
|
<div
|
||
|
|
className="absolute rounded-full bg-border-strong"
|
||
|
|
style={{
|
||
|
|
width: '88.59px',
|
||
|
|
height: '88.59px',
|
||
|
|
left: '50%',
|
||
|
|
top: '50%',
|
||
|
|
transform: 'translate(-50%, -50%)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* 图标 */}
|
||
|
|
<Lock
|
||
|
|
size={44}
|
||
|
|
className="text-white"
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
left: '50%',
|
||
|
|
top: '50%',
|
||
|
|
transform: 'translate(-50%, -50%)'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 32 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
|
||
|
|
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.5 }}
|
||
|
|
className="w-full flex-1 flex flex-col"
|
||
|
|
>
|
||
|
|
<Card
|
||
|
|
className="self-stretch hover:-translate-y-2 bg-bg-surface border-border-normal flex-1"
|
||
|
|
shadow="sm"
|
||
|
|
style={{
|
||
|
|
transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out',
|
||
|
|
willChange: 'transform'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<CardBody className="flex flex-col md:flex-row items-start justify-between p-6 md:p-10 gap-6 md:gap-0">
|
||
|
|
<div className="flex flex-col gap-6 items-start justify-start w-full md:w-[550px]">
|
||
|
|
<div className="rounded-2xl flex items-center justify-center w-12 h-12 bg-bg-elevated">
|
||
|
|
<ArrowLeftRight size={24} className="text-text-primary" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-4 items-start justify-start">
|
||
|
|
<h3 className="text-2xl font-bold font-domine text-text-primary"
|
||
|
|
style={{
|
||
|
|
lineHeight: '130%',
|
||
|
|
letterSpacing: '-0.005em'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t('why.liquidity.title')}
|
||
|
|
</h3>
|
||
|
|
<p className="text-base font-domine text-text-tertiary"
|
||
|
|
style={{
|
||
|
|
lineHeight: '150%'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t('why.liquidity.desc')}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-row gap-3 items-center justify-end">
|
||
|
|
<Chip
|
||
|
|
className="bg-accent-green-bg text-accent-green font-bold"
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
{t('why.liquidity.badge1')}
|
||
|
|
</Chip>
|
||
|
|
<Chip
|
||
|
|
className="bg-accent-blue-bg text-accent-blue font-bold"
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
{t('why.liquidity.badge2')}
|
||
|
|
</Chip>
|
||
|
|
</div>
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|