xufuhan/asset-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

使用heroui完成对页面的重构

Browse Source
This commit is contained in:
xufuhan
2026-01-29 16:23:10 +08:00
parent 2377e2dda2
commit d265126035
24 changed files with 5360 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

503
components/HowItWorksSection.tsx
View File

@@ -2,7 +2,9 @@
import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import { Card, CardBody, Chip } from '@heroui/react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';
// 数字增长动画Hook
function useCountUp(end: number, duration: number = 1500, startRangePercent: number = 0.75) {
@@ -10,7 +12,7 @@ function useCountUp(end: number, duration: number = 1500, startRangePercent: num
const [count, setCount] = useState(end);
const elementRef = useRef<HTMLDivElement>(null);
const startValueRef = useRef<number>(end);
const animationRef = useRef<number | null>(null);
const timerRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
setMounted(true);
@@ -24,6 +26,11 @@ function useCountUp(end: number, duration: number = 1500, startRangePercent: num
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
// 清除之前可能存在的 timer
if (timerRef.current) {
clearInterval(timerRef.current);
}
const start = startValueRef.current;
const startTime = Date.now();
@@ -39,14 +46,15 @@ function useCountUp(end: number, duration: number = 1500, startRangePercent: num
if (progress === 1) {
setCount(end);
clearInterval(timer);
timerRef.current = null;
}
}, 16);
animationRef.current = timer as unknown as number;
return () => clearInterval(timer);
timerRef.current = timer;
} else {
if (animationRef.current) {
clearInterval(animationRef.current);
if (timerRef.current) {
clearInterval(timerRef.current);
timerRef.current = null;
}
setCount(startValueRef.current);
}
@@ -58,7 +66,12 @@ function useCountUp(end: number, duration: number = 1500, startRangePercent: num
observer.observe(elementRef.current);
}
return () => observer.disconnect();
return () => {
if (timerRef.current) {
clearInterval(timerRef.current);
}
observer.disconnect();
};
}, [end, duration, mounted]);
return { count, elementRef };
@@ -66,11 +79,11 @@ function useCountUp(end: number, duration: number = 1500, startRangePercent: num
export default function HowItWorksSection() {
const { t } = useLanguage();
const { theme } = useTheme();
const [animate, setAnimate] = useState(false);
const [activeStep, setActiveStep] = useState(1); // 默认第1步激活
const [activeStep, setActiveStep] = useState(1);
const sectionRef = useRef<HTMLElement>(null);
// 数字动画
const investAmount = useCountUp(100000, 1500, 0.85);
const earnAmount = useCountUp(5150, 1500, 0.85);
@@ -92,6 +105,8 @@ export default function HowItWorksSection() {
return () => observer.disconnect();
}, []);
const isDark = theme === 'dark';
const steps = [
{
number: 1,
@@ -116,36 +131,31 @@ export default function HowItWorksSection() {
return (
<section
ref={sectionRef}
className="bg-[#f9fafb] flex flex-col items-center justify-center flex-shrink-0 w-full relative"
className={`flex flex-col items-center justify-center flex-shrink-0 w-full relative border-y ${
isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-[#f9fafb] border-[#e5e7eb]'
}`}
style={{
borderStyle: 'solid',
borderColor: '#e5e7eb',
borderWidth: '1px 0px',
padding: '80px 0px'
}}
>
{/* .container20 - Main container */}
<div className="flex flex-row items-start justify-between flex-shrink-0 relative w-[1440px]">
{/* 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"
className={`text-left relative font-domine text-5xl font-bold ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
style={{
fontSize: '48px',
lineHeight: '120%',
letterSpacing: '-0.01em',
fontWeight: 700
letterSpacing: '-0.01em'
}}
>
{t('how.title')}
</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) => {
@@ -156,64 +166,54 @@ export default function HowItWorksSection() {
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 ${
animate
? 'translate-x-0 opacity-100'
: '-translate-x-12 opacity-0'
animate ? '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"
className={`rounded-full flex items-center justify-center flex-shrink-0 w-8 h-[21.63px] transition-all duration-300 ${
isDark ? 'bg-white' : 'bg-[#111827]'
}`}
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
}}
className={`text-center text-sm font-bold font-domine transition-all duration-300 ${
isDark ? 'text-[#0a0a0a]' : 'text-[#fcfcfd]'
}`}
>
{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"
className={`rounded-full border-2 flex items-center justify-center flex-shrink-0 w-8 h-[24.5px] transition-all duration-300 ${
isDark ? 'bg-[#0a0a0a] border-[#3f3f46]' : 'bg-[#f9fafb] border-[#d1d5db]'
}`}
>
<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
}}
className={`text-center text-sm font-bold font-domine transition-all duration-300 ${
isDark ? 'text-[#71717a]' : 'text-[#9ca1af]'
}`}
>
{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 className={`flex-1 w-[2px] ${isDark ? 'bg-[#27272a]' : 'bg-[#e5e7eb]'}`} />
</div>
)}
</div>
{/* Text Content */}
<div
className="flex flex-col gap-2 items-start justify-start flex-1 relative"
style={{
@@ -221,23 +221,23 @@ export default function HowItWorksSection() {
}}
>
<h3
className="text-left relative flex items-center justify-start font-inter transition-all duration-300"
className="text-left text-3xl font-semibold font-domine transition-all duration-300"
style={{
fontSize: '28px',
lineHeight: '130%',
letterSpacing: '-0.005em',
fontWeight: 600,
color: isActive ? '#111827' : '#6b7280'
color: isActive
? (isDark ? '#fafafa' : '#111827')
: (isDark ? '#52525b' : '#6b7280')
}}
>
{step.title}
</h3>
<p
className="text-[#9ca1af] text-left relative self-stretch flex items-center justify-start font-inter"
className={`text-left text-base font-domine ${
isDark ? 'text-[#71717a]' : 'text-[#9ca1af]'
}`}
style={{
fontSize: '16px',
lineHeight: '150%',
fontWeight: 400
lineHeight: '150%'
}}
>
{step.description}
@@ -249,61 +249,61 @@ export default function HowItWorksSection() {
</div>
</div>
{/* Right Side - Dynamic Cards Container */}
<div
className="calculator-card-container flex flex-col items-start justify-start flex-shrink-0 w-[558px] relative"
style={{
height: '439px'
}}
>
{/* 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) translateX(0)'
: 'rotate(6.535deg) scale(1, 1) translateX(3rem)',
transitionDelay: activeStep === 1 ? '200ms' : '0ms',
pointerEvents: activeStep === 1 ? 'auto' : 'none'
}}
>
{/* 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" />
<Card
className={`h-[162px] absolute z-0 transition-all duration-700 ease-out ${
animate && activeStep === 1 ? 'opacity-100' : 'opacity-0'
} ${
isDark ? 'bg-white border-[#e5e7eb]' : 'bg-[#111827] border-transparent'
}`}
shadow="lg"
style={{
padding: '25px 25px 1px 25px',
left: '205.43px',
top: '15.96px',
transformOrigin: '0 0',
transform: animate && activeStep === 1
? 'rotate(6.535deg) scale(1, 1) translateX(0)'
: 'rotate(6.535deg) scale(1, 1) translateX(3rem)',
transitionDelay: activeStep === 1 ? '200ms' : '0ms',
pointerEvents: activeStep === 1 ? 'auto' : 'none'
}}
>
<Image
src="/image-220.png"
alt="WUSD"
width={66}
height={66}
className="absolute inset-0 rounded-full"
src="/usd-coin-usdc-logo-10.svg"
alt="USDC"
width={64}
height={64}
className="flex-shrink-0"
/>
</div>
</div>
{/* Calculator Card */}
<div
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 ${
<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>
</Card>
<Card
className={`absolute left-0 top-[99px] w-full z-10 transition-all duration-700 ease-out ${
animate && activeStep === 1 ? 'opacity-100' : 'opacity-0'
} ${
isDark ? 'bg-[#18181b]/85 border-[#27272a]' : 'bg-white/85 border-[#e5e7eb]'
}`}
shadow="lg"
style={{
backdropFilter: 'blur(12px)',
transform: animate && activeStep === 1
? 'rotate(-3deg) translateX(0)'
: 'rotate(-3deg) translateX(3rem)',
@@ -313,112 +313,109 @@ export default function HowItWorksSection() {
}}
>
{/* 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">
<CardBody className="p-8">
<div className="flex flex-row items-center justify-between mb-6">
<div className="flex flex-row gap-3 items-center">
<div className={`rounded-xl w-10 h-10 flex items-center justify-center ${
isDark ? 'bg-white' : 'bg-[#111827]'
}`}>
<Image
src="/icon1.svg"
alt="Portfolio"
width={24}
height={24}
style={{
filter: isDark ? 'none' : 'invert(1)'
}}
/>
</div>
<span
className={`font-domine text-base font-medium ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
>
{t('how.simulator.title')}
</span>
</div>
<Chip className="bg-green-50 text-green-600 font-bold" size="sm">
+5.2% APY
</Chip>
</div>
<div className="mb-4">
<div className="flex flex-col gap-2">
<span
className={`font-domine text-sm ${
isDark ? 'text-[#71717a]' : 'text-[#9ca1af]'
}`}
>
{t('how.simulator.invest')}
</span>
<span
ref={investAmount.elementRef}
className={`font-domine text-3xl font-bold ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
style={{
lineHeight: '120%',
letterSpacing: '-0.01em'
}}
>
${investAmount.count.toLocaleString()}
</span>
</div>
<div className={`mt-4 h-2 rounded-full relative ${
isDark ? 'bg-[#27272a]' : 'bg-[#e5e7eb]'
}`}>
<div className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full ${
isDark ? 'bg-white' : 'bg-[#111827]'
}`} />
</div>
</div>
<div className={`mt-6 pt-6 border-t ${
isDark ? 'border-[#27272a]' : 'border-[#e5e7eb]'
}`}>
<span
className={`font-domine text-sm block mb-2 ${
isDark ? 'text-[#71717a]' : 'text-[#9ca1af]'
}`}
>
{t('how.simulator.earn')}
</span>
<div className="flex flex-row gap-2 items-center">
<Image
src="/icon1.svg"
alt="Portfolio"
src="/icon2.svg"
alt="Earn"
width={24}
height={24}
/>
<span
ref={earnAmount.elementRef}
className="text-green-600 font-domine text-3xl font-bold"
style={{
lineHeight: '120%',
letterSpacing: '-0.01em'
}}
>
+${earnAmount.count.toLocaleString()}
</span>
</div>
<span
className="text-[#111827] font-inter"
style={{
fontSize: '16px',
lineHeight: '150%',
fontWeight: 500
}}
>
{t('how.simulator.title')}
</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
}}
>
{t('how.simulator.invest')}
</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
}}
>
{t('how.simulator.earn')}
</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>
</CardBody>
</Card>
</>
{/* 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'
<Card
className={`absolute left-0 top-[99px] w-full transition-all duration-700 ease-out ${
animate && activeStep === 2 ? 'opacity-100' : 'opacity-0'
} ${
isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#f3f4f6]'
}`}
shadow="lg"
style={{
boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
transform: animate && activeStep === 2
? 'rotate(3deg) translateX(0)'
: 'rotate(3deg) translateX(3rem)',
@@ -427,71 +424,90 @@ export default function HowItWorksSection() {
pointerEvents: activeStep === 2 ? 'auto' : 'none'
}}
>
{/* Header */}
<CardBody className="p-6 flex flex-col gap-6">
<div
className="border-b border-[#f3f4f6] pb-4 flex flex-row items-center justify-between w-full"
className={`border-b pb-4 flex flex-row items-center justify-between w-full ${
isDark ? 'border-[#27272a]' : 'border-[#f3f4f6]'
}`}
>
<span className="text-[#000000] font-inter text-[18px] font-bold leading-7">
<span className={`font-domine text-lg font-bold ${
isDark ? 'text-[#fafafa]' : 'text-[#000000]'
}`}>
Fund Market
</span>
<span className="text-[#059669] font-inter text-[16px] font-bold leading-6">
<span className="text-[#059669] font-domine text-base font-bold">
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 className={`rounded-xl border p-4 flex flex-row gap-4 items-center h-24 ${
isDark ? 'bg-[#27272a] border-[#3f3f46]' : 'bg-[#f9fafb] border-[#f3f4f6]'
}`}>
<div className={`rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 ${
isDark ? 'bg-white' : 'bg-[#000000]'
}`}>
<span className={`font-domine text-base font-bold ${
isDark ? 'text-[#000000]' : 'text-white'
}`}>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 className={`rounded h-4 w-24 ${
isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
}`} />
<div className={`rounded h-3 w-16 ${
isDark ? 'bg-[#52525b]' : 'bg-[#f3f4f6]'
}`} />
</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">
<div className={`rounded h-4 w-20 ${
isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
}`} />
<span className="text-[#059669] font-domine text-base font-bold">
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" />
<div className={`rounded-xl border p-4 flex flex-row gap-4 items-center h-24 opacity-60 ${
isDark ? 'bg-[#27272a] border-[#3f3f46]' : 'bg-[#f9fafb] border-[#f3f4f6]'
}`}>
<div className={`rounded-full w-12 h-12 flex-shrink-0 ${
isDark ? 'bg-[#52525b]' : 'bg-[#d1d5db]'
}`} />
{/* 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 className={`rounded h-4 w-32 ${
isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
}`} />
<div className={`rounded h-3 w-20 ${
isDark ? 'bg-[#52525b]' : 'bg-[#f3f4f6]'
}`} />
</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">
<div className={`rounded h-4 w-20 ${
isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
}`} />
<span className="text-[#059669] font-domine text-base font-bold">
APY 15.2%
</span>
</div>
</div>
</div>
</div>
</CardBody>
</Card>
{/* 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 ${
<Card
className={`absolute left-0 top-[99px] w-[520px] transition-all duration-700 ease-out ${
animate && activeStep === 3 ? 'opacity-100' : 'opacity-0'
} ${
isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#f3f4f6]'
}`}
shadow="lg"
style={{
boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
transform: animate && activeStep === 3
? 'rotate(3deg) translateX(0)'
: 'rotate(3deg) translateX(3rem)',
@@ -501,12 +517,16 @@ export default function HowItWorksSection() {
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">
<CardBody className="p-6 flex flex-col gap-6">
<div className={`border-b pb-[17px] flex flex-row items-center justify-between ${
isDark ? 'border-[#27272a]' : 'border-[#f3f4f6]'
}`} style={{ width: '470px', height: '45px' }}>
<span className={`font-domine text-lg font-bold ${
isDark ? 'text-[#fafafa]' : 'text-[#000000]'
}`}>
Defi
</span>
<span className="text-[#059669] font-inter text-[16px] font-bold leading-6">
<span className="text-[#059669] font-domine text-base font-bold">
+5.2% APY
</span>
</div>
@@ -536,10 +556,10 @@ export default function HowItWorksSection() {
>
<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>
<span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
</div>
<span
className="text-[#000000] font-inter text-[16px] font-bold text-center"
className="text-[#000000] font-domine 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
@@ -548,7 +568,7 @@ export default function HowItWorksSection() {
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
<span className="text-white font-domine text-[12px] font-bold leading-4">
Boost
</span>
</div>
@@ -569,10 +589,10 @@ export default function HowItWorksSection() {
>
<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>
<span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
</div>
<span
className="text-[#000000] font-inter text-[16px] font-bold text-center"
className="text-[#000000] font-domine 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
@@ -581,7 +601,7 @@ export default function HowItWorksSection() {
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
<span className="text-white font-domine text-[12px] font-bold leading-4">
Boost
</span>
</div>
@@ -602,10 +622,10 @@ export default function HowItWorksSection() {
>
<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>
<span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
</div>
<span
className="text-[#000000] font-inter text-[16px] font-bold text-center"
className="text-[#000000] font-domine 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
@@ -614,7 +634,7 @@ export default function HowItWorksSection() {
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
<span className="text-white font-domine text-[12px] font-bold leading-4">
Boost
</span>
</div>
@@ -635,10 +655,10 @@ export default function HowItWorksSection() {
>
<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>
<span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
</div>
<span
className="text-[#000000] font-inter text-[16px] font-bold text-center"
className="text-[#000000] font-domine 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
@@ -647,7 +667,7 @@ export default function HowItWorksSection() {
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
<span className="text-white font-domine text-[12px] font-bold leading-4">
SWAP
</span>
</div>
@@ -668,10 +688,10 @@ export default function HowItWorksSection() {
>
<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>
<span className="text-white font-domine text-[16px] font-bold leading-6">O</span>
</div>
<span
className="text-[#000000] font-inter text-[16px] font-bold text-center"
className="text-[#000000] font-domine 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
@@ -680,14 +700,15 @@ export default function HowItWorksSection() {
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
<span className="text-white font-domine text-[12px] font-bold leading-4">
LP
</span>
</div>
</div>
</div>
</div>
</div>
</CardBody>
</Card>
</div>
</div>