2026-01-27 17:26:30 +08:00
|
|
|
'use client';
|
|
|
|
|
|
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
|
|
|
import Image from 'next/image';
|
2026-01-28 17:55:01 +08:00
|
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
2026-01-27 17:26:30 +08:00
|
|
|
|
|
|
|
|
// 数字增长动画Hook
|
|
|
|
|
function useCountUp(end: number, duration: number = 1500, startRangePercent: number = 0.75) {
|
|
|
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
|
const [count, setCount] = useState(end);
|
|
|
|
|
const elementRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
const startValueRef = useRef<number>(end);
|
2026-01-28 17:55:01 +08:00
|
|
|
const animationRef = useRef<number | null>(null);
|
2026-01-27 17:26:30 +08:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setMounted(true);
|
|
|
|
|
startValueRef.current = Math.floor(end * (startRangePercent + Math.random() * 0.15));
|
|
|
|
|
setCount(startValueRef.current);
|
|
|
|
|
}, [end, startRangePercent]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!mounted) return;
|
|
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver(
|
|
|
|
|
(entries) => {
|
2026-01-28 17:55:01 +08:00
|
|
|
if (entries[0].isIntersecting) {
|
2026-01-27 17:26:30 +08:00
|
|
|
const start = startValueRef.current;
|
|
|
|
|
const startTime = Date.now();
|
|
|
|
|
|
|
|
|
|
const timer = setInterval(() => {
|
|
|
|
|
const elapsed = Date.now() - startTime;
|
|
|
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
|
|
|
|
|
|
const easeOutCubic = 1 - Math.pow(1 - progress, 3);
|
|
|
|
|
const currentCount = Math.floor(start + (end - start) * easeOutCubic);
|
|
|
|
|
|
|
|
|
|
setCount(currentCount);
|
|
|
|
|
|
|
|
|
|
if (progress === 1) {
|
|
|
|
|
setCount(end);
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
}
|
|
|
|
|
}, 16);
|
|
|
|
|
|
2026-01-28 17:55:01 +08:00
|
|
|
animationRef.current = timer as unknown as number;
|
2026-01-27 17:26:30 +08:00
|
|
|
return () => clearInterval(timer);
|
2026-01-28 17:55:01 +08:00
|
|
|
} else {
|
|
|
|
|
if (animationRef.current) {
|
|
|
|
|
clearInterval(animationRef.current);
|
|
|
|
|
}
|
|
|
|
|
setCount(startValueRef.current);
|
2026-01-27 17:26:30 +08:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{ threshold: 0.1 }
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (elementRef.current) {
|
|
|
|
|
observer.observe(elementRef.current);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return () => observer.disconnect();
|
2026-01-28 17:55:01 +08:00
|
|
|
}, [end, duration, mounted]);
|
2026-01-27 17:26:30 +08:00
|
|
|
|
|
|
|
|
return { count, elementRef };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function HowItWorksSection() {
|
2026-01-28 17:55:01 +08:00
|
|
|
const { t } = useLanguage();
|
|
|
|
|
const [animate, setAnimate] = useState(false);
|
2026-01-27 17:26:30 +08:00
|
|
|
const [activeStep, setActiveStep] = useState(1); // 默认第1步激活
|
|
|
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
|
|
|
|
|
|
|
|
// 数字动画
|
|
|
|
|
const investAmount = useCountUp(100000, 1500, 0.85);
|
|
|
|
|
const earnAmount = useCountUp(5150, 1500, 0.85);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
2026-01-28 17:55:01 +08:00
|
|
|
const currentRef = sectionRef.current;
|
|
|
|
|
if (!currentRef) return;
|
2026-01-27 17:26:30 +08:00
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver(
|
|
|
|
|
(entries) => {
|
2026-01-28 17:55:01 +08:00
|
|
|
if (entries[0].isIntersecting) {
|
|
|
|
|
setAnimate(true);
|
|
|
|
|
observer.disconnect();
|
|
|
|
|
}
|
2026-01-27 17:26:30 +08:00
|
|
|
},
|
2026-01-28 17:55:01 +08:00
|
|
|
{ threshold: 0.3 }
|
2026-01-27 17:26:30 +08:00
|
|
|
);
|
|
|
|
|
|
2026-01-28 17:55:01 +08:00
|
|
|
observer.observe(currentRef);
|
|
|
|
|
return () => observer.disconnect();
|
|
|
|
|
}, []);
|
2026-01-27 17:26:30 +08:00
|
|
|
|
|
|
|
|
const steps = [
|
|
|
|
|
{
|
|
|
|
|
number: 1,
|
2026-01-28 17:55:01 +08:00
|
|
|
title: t('how.step1.title'),
|
|
|
|
|
description: t('how.step1.desc'),
|
2026-01-27 17:26:30 +08:00
|
|
|
hasLine: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
number: 2,
|
2026-01-28 17:55:01 +08:00
|
|
|
title: t('how.step2.title'),
|
|
|
|
|
description: t('how.step2.desc'),
|
2026-01-27 17:26:30 +08:00
|
|
|
hasLine: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
number: 3,
|
2026-01-28 17:55:01 +08:00
|
|
|
title: t('how.step3.title'),
|
|
|
|
|
description: t('how.step3.desc'),
|
2026-01-27 17:26:30 +08:00
|
|
|
hasLine: false
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section
|
|
|
|
|
ref={sectionRef}
|
|
|
|
|
className="bg-[#f9fafb] flex flex-col items-center justify-center flex-shrink-0 w-full relative"
|
|
|
|
|
style={{
|
|
|
|
|
borderStyle: 'solid',
|
|
|
|
|
borderColor: '#e5e7eb',
|
|
|
|
|
borderWidth: '1px 0px',
|
|
|
|
|
padding: '80px 0px'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{/* .container20 - Main container */}
|
2026-01-28 17:55:01 +08:00
|
|
|
<div className="flex flex-row items-start justify-between flex-shrink-0 relative w-[1440px]">
|
2026-01-27 17:26:30 +08:00
|
|
|
|
|
|
|
|
{/* Left Side - Steps (.container21) */}
|
|
|
|
|
<div className="flex flex-col gap-10 items-start justify-start flex-shrink-0 relative w-[520px]">
|
|
|
|
|
|
|
|
|
|
{/* Title (.heading-2) */}
|
|
|
|
|
<div className="flex flex-col items-start justify-start flex-shrink-0 relative">
|
|
|
|
|
<h2
|
|
|
|
|
className="text-[#111827] text-left relative font-inter"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '48px',
|
|
|
|
|
lineHeight: '120%',
|
|
|
|
|
letterSpacing: '-0.01em',
|
|
|
|
|
fontWeight: 700
|
|
|
|
|
}}
|
|
|
|
|
>
|
2026-01-28 17:55:01 +08:00
|
|
|
{t('how.title')}
|
2026-01-27 17:26:30 +08:00
|
|
|
</h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Steps Container (.frame-34) */}
|
|
|
|
|
<div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 relative">
|
|
|
|
|
|
|
|
|
|
{steps.map((step, index) => {
|
|
|
|
|
const isActive = activeStep === step.number;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
key={step.number}
|
|
|
|
|
onClick={() => setActiveStep(step.number)}
|
|
|
|
|
className={`flex flex-row gap-6 items-start justify-start flex-shrink-0 relative cursor-pointer transition-all duration-300 ease-out hover:opacity-80 ${
|
2026-01-28 17:55:01 +08:00
|
|
|
animate
|
2026-01-27 17:26:30 +08:00
|
|
|
? 'translate-x-0 opacity-100'
|
|
|
|
|
: '-translate-x-12 opacity-0'
|
|
|
|
|
}`}
|
|
|
|
|
style={{
|
|
|
|
|
transitionDelay: `${index * 150}ms`
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{/* Number and Line Container */}
|
|
|
|
|
<div className="pt-2 flex flex-col items-center justify-start self-stretch flex-shrink-0 relative">
|
|
|
|
|
|
|
|
|
|
{/* Number Badge */}
|
|
|
|
|
{isActive ? (
|
|
|
|
|
// Active step (black background)
|
|
|
|
|
<div
|
|
|
|
|
className="bg-[#111827] rounded-[999px] flex items-center justify-center flex-shrink-0 w-8 h-[21.63px] relative transition-all duration-300"
|
|
|
|
|
style={{
|
|
|
|
|
padding: '0.31px 0px 1.32px 0px'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#fcfcfd] text-center relative flex items-center justify-center font-inter transition-all duration-300"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
lineHeight: '150%',
|
|
|
|
|
fontWeight: 700
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{step.number}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
) : (
|
|
|
|
|
// Inactive step (border)
|
|
|
|
|
<div
|
|
|
|
|
className="bg-[#f9fafb] rounded-[9999px] border-2 border-[#d1d5db] flex items-center justify-center flex-shrink-0 w-8 h-[24.5px] relative transition-all duration-300"
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#9ca1af] text-center relative flex items-center justify-center font-inter transition-all duration-300"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
lineHeight: '150%',
|
|
|
|
|
fontWeight: 700
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{step.number}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{/* Connecting Line */}
|
|
|
|
|
{step.hasLine && (
|
|
|
|
|
<div className="pt-6 flex flex-col items-start justify-center flex-1 w-[2px] relative">
|
|
|
|
|
<div className="bg-[#e5e7eb] flex-1 w-[2px] relative" />
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Text Content */}
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-col gap-2 items-start justify-start flex-1 relative"
|
|
|
|
|
style={{
|
|
|
|
|
paddingBottom: step.hasLine ? '32px' : '0px'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<h3
|
2026-01-28 17:55:01 +08:00
|
|
|
className="text-left relative flex items-center justify-start font-inter transition-all duration-300"
|
2026-01-27 17:26:30 +08:00
|
|
|
style={{
|
2026-01-28 17:55:01 +08:00
|
|
|
fontSize: '28px',
|
2026-01-27 17:26:30 +08:00
|
|
|
lineHeight: '130%',
|
|
|
|
|
letterSpacing: '-0.005em',
|
2026-01-28 17:55:01 +08:00
|
|
|
fontWeight: 600,
|
|
|
|
|
color: isActive ? '#111827' : '#6b7280'
|
2026-01-27 17:26:30 +08:00
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{step.title}
|
|
|
|
|
</h3>
|
|
|
|
|
<p
|
|
|
|
|
className="text-[#9ca1af] text-left relative self-stretch flex items-center justify-start font-inter"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
lineHeight: '150%',
|
|
|
|
|
fontWeight: 400
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{step.description}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-28 17:55:01 +08:00
|
|
|
{/* Right Side - Dynamic Cards Container */}
|
2026-01-27 17:26:30 +08:00
|
|
|
<div
|
2026-01-28 17:55:01 +08:00
|
|
|
className="calculator-card-container flex flex-col items-start justify-start flex-shrink-0 w-[558px] relative"
|
2026-01-27 17:26:30 +08:00
|
|
|
style={{
|
|
|
|
|
height: '439px'
|
|
|
|
|
}}
|
|
|
|
|
>
|
2026-01-28 17:55:01 +08:00
|
|
|
{/* Step 1: Deposit & Mint WUSD Card */}
|
|
|
|
|
<>
|
|
|
|
|
{/* Coin Images Container - Rotated Card */}
|
|
|
|
|
<div
|
|
|
|
|
className={`bg-[#111827] rounded-[16px] flex flex-row gap-4 items-start justify-start h-[162px] absolute z-0 transition-all duration-700 ease-out ${
|
|
|
|
|
animate && activeStep === 1 ? 'opacity-100' : 'opacity-0'
|
|
|
|
|
}`}
|
|
|
|
|
style={{
|
|
|
|
|
padding: '25px 25px 1px 25px',
|
|
|
|
|
left: '205.43px',
|
|
|
|
|
top: '15.96px',
|
|
|
|
|
boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
|
|
|
transformOrigin: '0 0',
|
|
|
|
|
transform: animate && activeStep === 1
|
|
|
|
|
? 'rotate(6.535deg) scale(1, 1) translateY(0)'
|
|
|
|
|
: 'rotate(6.535deg) scale(1, 1) translateY(3rem)',
|
|
|
|
|
transitionDelay: activeStep === 1 ? '200ms' : '0ms',
|
|
|
|
|
pointerEvents: activeStep === 1 ? 'auto' : 'none'
|
|
|
|
|
}}
|
|
|
|
|
>
|
2026-01-27 17:26:30 +08:00
|
|
|
{/* USDC Logo */}
|
|
|
|
|
<Image
|
|
|
|
|
src="/usd-coin-usdc-logo-10.svg"
|
|
|
|
|
alt="USDC"
|
|
|
|
|
width={64}
|
|
|
|
|
height={64}
|
|
|
|
|
className="flex-shrink-0"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{/* WUSD Logo */}
|
|
|
|
|
<div className="flex-shrink-0 w-[66px] h-[66px] relative">
|
|
|
|
|
<div className="absolute inset-0 rounded-full bg-gradient-to-br from-green-400 to-emerald-500" />
|
|
|
|
|
<Image
|
|
|
|
|
src="/image-220.png"
|
|
|
|
|
alt="WUSD"
|
|
|
|
|
width={66}
|
|
|
|
|
height={66}
|
|
|
|
|
className="absolute inset-0 rounded-full"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Calculator Card */}
|
|
|
|
|
<div
|
2026-01-28 17:55:01 +08:00
|
|
|
className={`bg-white/85 backdrop-blur-md rounded-[24px] border border-[#e5e7eb] p-8 absolute left-0 top-[99px] w-full shadow-lg z-10 transition-all duration-700 ease-out ${
|
|
|
|
|
animate && activeStep === 1 ? 'opacity-100' : 'opacity-0'
|
|
|
|
|
}`}
|
2026-01-27 17:26:30 +08:00
|
|
|
style={{
|
2026-01-28 17:55:01 +08:00
|
|
|
transform: animate && activeStep === 1
|
|
|
|
|
? 'rotate(-3deg) translateY(0)'
|
|
|
|
|
: 'rotate(-3deg) translateY(3rem)',
|
|
|
|
|
transformOrigin: 'center center',
|
|
|
|
|
transitionDelay: activeStep === 1 ? '200ms' : '0ms',
|
|
|
|
|
pointerEvents: activeStep === 1 ? 'auto' : 'none'
|
2026-01-27 17:26:30 +08:00
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
{/* Header */}
|
|
|
|
|
<div className="flex flex-row items-center justify-between mb-6">
|
|
|
|
|
<div className="flex flex-row gap-3 items-center">
|
|
|
|
|
<div className="bg-[#111827] rounded-[12px] w-10 h-10 flex items-center justify-center">
|
|
|
|
|
<Image
|
|
|
|
|
src="/icon1.svg"
|
|
|
|
|
alt="Portfolio"
|
|
|
|
|
width={24}
|
|
|
|
|
height={24}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#111827] font-inter"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
lineHeight: '150%',
|
|
|
|
|
fontWeight: 500
|
|
|
|
|
}}
|
|
|
|
|
>
|
2026-01-28 17:55:01 +08:00
|
|
|
{t('how.simulator.title')}
|
2026-01-27 17:26:30 +08:00
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="bg-green-50 rounded-lg px-3 py-1">
|
|
|
|
|
<span className="text-green-600 font-inter text-sm font-bold">+5.2% APY</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Investment Amount */}
|
|
|
|
|
<div className="mb-4">
|
|
|
|
|
<div className="flex flex-col gap-2">
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#9ca1af] font-inter"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
lineHeight: '150%',
|
|
|
|
|
fontWeight: 400
|
|
|
|
|
}}
|
|
|
|
|
>
|
2026-01-28 17:55:01 +08:00
|
|
|
{t('how.simulator.invest')}
|
2026-01-27 17:26:30 +08:00
|
|
|
</span>
|
|
|
|
|
<span
|
|
|
|
|
ref={investAmount.elementRef}
|
|
|
|
|
className="text-[#111827] font-inter"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '32px',
|
|
|
|
|
lineHeight: '120%',
|
|
|
|
|
letterSpacing: '-0.01em',
|
|
|
|
|
fontWeight: 700
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
${investAmount.count.toLocaleString()}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Range Slider */}
|
|
|
|
|
<div className="mt-4 h-2 bg-[#e5e7eb] rounded-full relative">
|
|
|
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-[#111827] rounded-full" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Earnings */}
|
|
|
|
|
<div className="mt-6 pt-6 border-t border-[#e5e7eb]">
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#9ca1af] font-inter block mb-2"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
lineHeight: '150%',
|
|
|
|
|
fontWeight: 400
|
|
|
|
|
}}
|
|
|
|
|
>
|
2026-01-28 17:55:01 +08:00
|
|
|
{t('how.simulator.earn')}
|
2026-01-27 17:26:30 +08:00
|
|
|
</span>
|
|
|
|
|
<div className="flex flex-row gap-2 items-center">
|
|
|
|
|
<Image
|
|
|
|
|
src="/icon2.svg"
|
|
|
|
|
alt="Earn"
|
|
|
|
|
width={24}
|
|
|
|
|
height={24}
|
|
|
|
|
/>
|
|
|
|
|
<span
|
|
|
|
|
ref={earnAmount.elementRef}
|
|
|
|
|
className="text-green-600 font-inter"
|
|
|
|
|
style={{
|
|
|
|
|
fontSize: '32px',
|
|
|
|
|
lineHeight: '120%',
|
|
|
|
|
letterSpacing: '-0.01em',
|
|
|
|
|
fontWeight: 700
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
+${earnAmount.count.toLocaleString()}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-28 17:55:01 +08:00
|
|
|
</>
|
|
|
|
|
|
|
|
|
|
{/* Step 2: Dual Investment Options Card */}
|
|
|
|
|
<div
|
|
|
|
|
className={`bg-white rounded-[16px] border border-[#f3f4f6] p-6 flex flex-col gap-6 absolute left-0 top-[99px] w-full transition-all duration-700 ease-out ${
|
|
|
|
|
animate && activeStep === 2
|
|
|
|
|
? 'opacity-100'
|
|
|
|
|
: 'opacity-0'
|
|
|
|
|
}`}
|
|
|
|
|
style={{
|
|
|
|
|
boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
|
|
|
transform: animate && activeStep === 2
|
|
|
|
|
? 'rotate(3deg) translateY(0)'
|
|
|
|
|
: 'rotate(3deg) translateY(3rem)',
|
|
|
|
|
transformOrigin: '0 0',
|
|
|
|
|
transitionDelay: activeStep === 2 ? '200ms' : '0ms',
|
|
|
|
|
pointerEvents: activeStep === 2 ? 'auto' : 'none'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{/* Header */}
|
|
|
|
|
<div
|
|
|
|
|
className="border-b border-[#f3f4f6] pb-4 flex flex-row items-center justify-between w-full"
|
|
|
|
|
>
|
|
|
|
|
<span className="text-[#000000] font-inter text-[18px] font-bold leading-7">
|
|
|
|
|
Fund Market
|
|
|
|
|
</span>
|
|
|
|
|
<span className="text-[#059669] font-inter text-[16px] font-bold leading-6">
|
|
|
|
|
Connect Wallet
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Investment Options Container */}
|
|
|
|
|
<div className="flex flex-col gap-4 w-full">
|
|
|
|
|
{/* Option 1 - Active */}
|
|
|
|
|
<div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-row gap-4 items-center h-24">
|
|
|
|
|
{/* Icon */}
|
|
|
|
|
<div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
|
|
|
|
|
<span className="text-white font-inter text-[16px] font-bold">O</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Text Placeholders */}
|
|
|
|
|
<div className="flex flex-col gap-2 flex-1">
|
|
|
|
|
<div className="bg-[#e5e7eb] rounded h-4 w-24" />
|
|
|
|
|
<div className="bg-[#f3f4f6] rounded h-3 w-16" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* APY Info */}
|
|
|
|
|
<div className="flex flex-col gap-2 items-end flex-shrink-0">
|
|
|
|
|
<div className="bg-[#e5e7eb] rounded h-4 w-20" />
|
|
|
|
|
<span className="text-[#059669] font-inter text-[16px] font-bold leading-6">
|
|
|
|
|
APY 30.2%
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Option 2 - Inactive */}
|
|
|
|
|
<div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-row gap-4 items-center h-24 opacity-60">
|
|
|
|
|
{/* Icon */}
|
|
|
|
|
<div className="bg-[#d1d5db] rounded-full w-12 h-12 flex-shrink-0" />
|
|
|
|
|
|
|
|
|
|
{/* Text Placeholders */}
|
|
|
|
|
<div className="flex flex-col gap-2 flex-1">
|
|
|
|
|
<div className="bg-[#e5e7eb] rounded h-4 w-32" />
|
|
|
|
|
<div className="bg-[#f3f4f6] rounded h-3 w-20" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* APY Info */}
|
|
|
|
|
<div className="flex flex-col gap-2 items-end flex-shrink-0">
|
|
|
|
|
<div className="bg-[#e5e7eb] rounded h-4 w-20" />
|
|
|
|
|
<span className="text-[#059669] font-inter text-[16px] font-bold leading-6">
|
|
|
|
|
APY 15.2%
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Step 3: Earn & Boost Card */}
|
|
|
|
|
<div
|
|
|
|
|
className={`bg-white rounded-[16px] border border-[#f3f4f6] p-6 flex flex-col gap-6 absolute left-0 top-[99px] w-[520px] transition-all duration-700 ease-out ${
|
|
|
|
|
animate && activeStep === 3 ? 'opacity-100' : 'opacity-0'
|
|
|
|
|
}`}
|
|
|
|
|
style={{
|
|
|
|
|
boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
|
|
|
transform: animate && activeStep === 3
|
|
|
|
|
? 'rotate(3deg) translateY(0)'
|
|
|
|
|
: 'rotate(3deg) translateY(3rem)',
|
|
|
|
|
transformOrigin: '0 0',
|
|
|
|
|
transitionDelay: activeStep === 3 ? '200ms' : '0ms',
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
pointerEvents: activeStep === 3 ? 'auto' : 'none'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{/* Header */}
|
|
|
|
|
<div className="border-b border-[#f3f4f6] pb-[17px] flex flex-row items-center justify-between" style={{ width: '470px', height: '45px' }}>
|
|
|
|
|
<span className="text-[#000000] font-inter text-[18px] font-bold leading-7">
|
|
|
|
|
Defi
|
|
|
|
|
</span>
|
|
|
|
|
<span className="text-[#059669] font-inter text-[16px] font-bold leading-6">
|
|
|
|
|
+5.2% APY
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Cards Grid Container */}
|
|
|
|
|
<div
|
|
|
|
|
className="relative"
|
|
|
|
|
style={{
|
|
|
|
|
width: '466px',
|
|
|
|
|
height: '195px',
|
|
|
|
|
transform: 'rotate(-3deg)',
|
|
|
|
|
transformOrigin: '0 0',
|
|
|
|
|
overflow: 'hidden'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{/* Container 1 */}
|
|
|
|
|
<div
|
|
|
|
|
className="absolute"
|
|
|
|
|
style={{
|
|
|
|
|
width: '135.53px',
|
|
|
|
|
height: '165.15px',
|
|
|
|
|
left: '8.58px',
|
|
|
|
|
top: '0.46px',
|
|
|
|
|
transform: 'rotate(3deg)',
|
|
|
|
|
transformOrigin: '0 0'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
|
|
|
|
|
<div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
|
|
|
|
|
<span className="text-white font-inter text-[16px] font-bold leading-6">O</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#000000] font-inter text-[16px] font-bold text-center"
|
|
|
|
|
style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
|
|
|
>
|
|
|
|
|
+10% APY
|
|
|
|
|
</span>
|
|
|
|
|
<div
|
|
|
|
|
className="bg-[#000000] rounded-lg px-4 py-2"
|
|
|
|
|
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
|
|
|
|
|
>
|
|
|
|
|
<span className="text-white font-inter text-[12px] font-bold leading-4">
|
|
|
|
|
Boost
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Container 2 */}
|
|
|
|
|
<div
|
|
|
|
|
className="absolute"
|
|
|
|
|
style={{
|
|
|
|
|
width: '135.53px',
|
|
|
|
|
height: '165.15px',
|
|
|
|
|
left: '160.18px',
|
|
|
|
|
top: '11.66px',
|
|
|
|
|
transform: 'rotate(3deg)',
|
|
|
|
|
transformOrigin: '0 0'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
|
|
|
|
|
<div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
|
|
|
|
|
<span className="text-white font-inter text-[16px] font-bold leading-6">O</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#000000] font-inter text-[16px] font-bold text-center"
|
|
|
|
|
style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
|
|
|
>
|
|
|
|
|
+10% APY
|
|
|
|
|
</span>
|
|
|
|
|
<div
|
|
|
|
|
className="bg-[#000000] rounded-lg px-4 py-2"
|
|
|
|
|
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
|
|
|
|
|
>
|
|
|
|
|
<span className="text-white font-inter text-[12px] font-bold leading-4">
|
|
|
|
|
Boost
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Container 3 */}
|
|
|
|
|
<div
|
|
|
|
|
className="absolute"
|
|
|
|
|
style={{
|
|
|
|
|
width: '135.53px',
|
|
|
|
|
height: '165.15px',
|
|
|
|
|
left: '312.18px',
|
|
|
|
|
top: '19.66px',
|
|
|
|
|
transform: 'rotate(3deg)',
|
|
|
|
|
transformOrigin: '0 0'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
|
|
|
|
|
<div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
|
|
|
|
|
<span className="text-white font-inter text-[16px] font-bold leading-6">O</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#000000] font-inter text-[16px] font-bold text-center"
|
|
|
|
|
style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
|
|
|
>
|
|
|
|
|
+10% APY
|
|
|
|
|
</span>
|
|
|
|
|
<div
|
|
|
|
|
className="bg-[#000000] rounded-lg px-4 py-2"
|
|
|
|
|
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
|
|
|
|
|
>
|
|
|
|
|
<span className="text-white font-inter text-[12px] font-bold leading-4">
|
|
|
|
|
Boost
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Container 4 - with SWAP button */}
|
|
|
|
|
<div
|
|
|
|
|
className="absolute"
|
|
|
|
|
style={{
|
|
|
|
|
width: '135.53px',
|
|
|
|
|
height: '165.15px',
|
|
|
|
|
left: '160.18px',
|
|
|
|
|
top: '11.66px',
|
|
|
|
|
transform: 'rotate(3deg)',
|
|
|
|
|
transformOrigin: '0 0'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
|
|
|
|
|
<div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
|
|
|
|
|
<span className="text-white font-inter text-[16px] font-bold leading-6">O</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#000000] font-inter text-[16px] font-bold text-center"
|
|
|
|
|
style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
|
|
|
>
|
|
|
|
|
Get USDC
|
|
|
|
|
</span>
|
|
|
|
|
<div
|
|
|
|
|
className="bg-[#000000] rounded-lg px-4 py-2"
|
|
|
|
|
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
|
|
|
|
|
>
|
|
|
|
|
<span className="text-white font-inter text-[12px] font-bold leading-4">
|
|
|
|
|
SWAP
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Container 5 - with LP button */}
|
|
|
|
|
<div
|
|
|
|
|
className="absolute"
|
|
|
|
|
style={{
|
|
|
|
|
width: '135.53px',
|
|
|
|
|
height: '165.15px',
|
|
|
|
|
left: '312.18px',
|
|
|
|
|
top: '19.66px',
|
|
|
|
|
transform: 'rotate(3deg)',
|
|
|
|
|
transformOrigin: '0 0'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="bg-[#f9fafb] rounded-[12px] border border-[#f3f4f6] p-4 flex flex-col gap-4 items-center absolute" style={{ width: '134.91px', height: '165.18px', left: '0px', top: '0px' }}>
|
|
|
|
|
<div className="bg-[#000000] rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0">
|
|
|
|
|
<span className="text-white font-inter text-[16px] font-bold leading-6">O</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span
|
|
|
|
|
className="text-[#000000] font-inter text-[16px] font-bold text-center"
|
|
|
|
|
style={{ width: '124px', height: '17px', transform: 'rotate(-3deg)', transformOrigin: '0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
|
|
|
>
|
|
|
|
|
10% APY
|
|
|
|
|
</span>
|
|
|
|
|
<div
|
|
|
|
|
className="bg-[#000000] rounded-lg px-4 py-2"
|
|
|
|
|
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
|
|
|
|
|
>
|
|
|
|
|
<span className="text-white font-inter text-[12px] font-bold leading-4">
|
|
|
|
|
LP
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-27 17:26:30 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
}
|
