打磨细节
This commit is contained in:
@@ -2,67 +2,31 @@
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
|
||||
export default function WhyAssetXSection() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { t } = useLanguage();
|
||||
const [animate, setAnimate] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const currentRef = sectionRef.current;
|
||||
if (!currentRef) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && !visible) {
|
||||
setVisible(true);
|
||||
}
|
||||
});
|
||||
if (entries[0].isIntersecting) {
|
||||
setAnimate(true);
|
||||
observer.disconnect(); // 触发后立即断开，不再监听
|
||||
}
|
||||
},
|
||||
{
|
||||
threshold: 0.1,
|
||||
}
|
||||
{ threshold: 0.5 } // 当50%可见时才触发
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
observer.observe(currentRef);
|
||||
|
||||
return () => {
|
||||
if (sectionRef.current) {
|
||||
observer.unobserve(sectionRef.current);
|
||||
}
|
||||
};
|
||||
}, [visible]);
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: 'sustainable',
|
||||
icon: '/system-data0.svg',
|
||||
title: 'Sustainable Real Yield',
|
||||
description: 'Access 15%-30% returns from Delta-neutral arbitrage strategies and commercial credit. No inflationary token emissions, just real profits.',
|
||||
image: '/frame-110.svg',
|
||||
imageWidth: 305,
|
||||
imageHeight: 162,
|
||||
large: true
|
||||
},
|
||||
{
|
||||
id: 'reliability',
|
||||
icon: '/warning-shield-check0.svg',
|
||||
title: 'Proven Reliability',
|
||||
description: 'Backed by partners holding HK SFC Licenses (1/2/4/5/9) and NASDAQ-listed entities. Audited, compliant, and transparent.',
|
||||
rightIcon: '/icon0.svg',
|
||||
large: false
|
||||
},
|
||||
{
|
||||
id: 'liquidity',
|
||||
icon: '/arrow-arrow-left-right0.svg',
|
||||
title: 'Flexible Liquidity',
|
||||
description: 'Solve the illiquidity of traditional finance. Enjoy instant exit via secondary markets or leverage your positions for up to 40% APY.',
|
||||
badges: ['40%+ APR', 'Instant Exit'],
|
||||
large: false
|
||||
}
|
||||
];
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
@@ -74,9 +38,9 @@ export default function WhyAssetXSection() {
|
||||
alignContent: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center w-[1200px]">
|
||||
<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-[1200px] relative mb-10">
|
||||
<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"
|
||||
@@ -87,7 +51,7 @@ export default function WhyAssetXSection() {
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
Why ASSETX?
|
||||
{t('why.title')}
|
||||
</h2>
|
||||
|
||||
{/* Subtitle */}
|
||||
@@ -99,18 +63,18 @@ export default function WhyAssetXSection() {
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Institutional-grade access to real-world yield, with DeFi-native composability.
|
||||
{t('why.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cards Container - .frame-30 */}
|
||||
<div className="flex flex-row gap-6 items-center justify-start flex-shrink-0 w-[1199px] relative">
|
||||
<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
|
||||
${
|
||||
mounted && visible
|
||||
animate
|
||||
? 'translate-y-0 opacity-100'
|
||||
: 'translate-y-12 opacity-0'
|
||||
}
|
||||
@@ -142,7 +106,7 @@ export default function WhyAssetXSection() {
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
Sustainable Real Yield
|
||||
{t('why.sustainable.title')}
|
||||
</h3>
|
||||
<p
|
||||
className="text-[#9ca1af] text-left relative self-stretch font-inter"
|
||||
@@ -152,7 +116,7 @@ export default function WhyAssetXSection() {
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Access 15%-30% returns from Delta-neutral arbitrage strategies and commercial credit. No inflationary token emissions, just real profits.
|
||||
{t('why.sustainable.desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -163,18 +127,18 @@ export default function WhyAssetXSection() {
|
||||
alt="Chart"
|
||||
width={305}
|
||||
height={162}
|
||||
className="flex-shrink-0 relative"
|
||||
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-[790px] relative">
|
||||
<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
|
||||
${
|
||||
mounted && visible
|
||||
animate
|
||||
? 'translate-y-0 opacity-100'
|
||||
: 'translate-y-12 opacity-0'
|
||||
}
|
||||
@@ -208,7 +172,7 @@ export default function WhyAssetXSection() {
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
Proven Reliability
|
||||
{t('why.reliability.title')}
|
||||
</h3>
|
||||
<p
|
||||
className="text-[#9ca1af] text-left relative font-inter"
|
||||
@@ -218,19 +182,56 @@ export default function WhyAssetXSection() {
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Backed by partners holding HK SFC Licenses (1/2/4/5/9) and NASDAQ-listed entities. Audited, compliant, and transparent.
|
||||
{t('why.reliability.desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Icon */}
|
||||
<div className="flex items-center justify-center">
|
||||
<Image
|
||||
src="/icon0.svg"
|
||||
alt="Icon"
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
<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>
|
||||
@@ -239,7 +240,7 @@ export default function WhyAssetXSection() {
|
||||
<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
|
||||
${
|
||||
mounted && visible
|
||||
animate
|
||||
? 'translate-y-0 opacity-100'
|
||||
: 'translate-y-12 opacity-0'
|
||||
}
|
||||
@@ -248,56 +249,57 @@ export default function WhyAssetXSection() {
|
||||
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-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
|
||||
{/* Top Section with Icon and Badges */}
|
||||
<div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 relative">
|
||||
{/* Icon and Badges Row */}
|
||||
<div className="flex flex-row gap-6 items-center justify-start 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>
|
||||
<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>
|
||||
|
||||
{/* Badges */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="bg-[#f9fafb] rounded-lg px-3 py-1 flex items-center justify-center">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">40%+ APR</span>
|
||||
</div>
|
||||
<div className="bg-[#f9fafb] rounded-lg px-3 py-1 flex items-center justify-center">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">Instant Exit</span>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Text Content */}
|
||||
<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
|
||||
}}
|
||||
>
|
||||
Flexible Liquidity
|
||||
</h3>
|
||||
<p
|
||||
className="text-[#9ca1af] text-left relative font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Solve the illiquidity of traditional finance. Enjoy instant exit via secondary markets or leverage your positions for up to 40% APY.
|
||||
</p>
|
||||
{/* 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>
|
||||
|
||||
Reference in New Issue
Block a user