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

306
components/WhyAssetXSection.tsx
View File

@@ -2,10 +2,13 @@
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';
export default function WhyAssetXSection() {
const { t } = useLanguage();
const { theme } = useTheme();
const [animate, setAnimate] = useState(false);
const sectionRef = useRef<HTMLElement>(null);
@@ -17,21 +20,24 @@ export default function WhyAssetXSection() {
(entries) => {
if (entries[0].isIntersecting) {
setAnimate(true);
observer.disconnect(); // 触发后立即断开，不再监听
observer.disconnect();
}
},
{ threshold: 0.5 } // 当50%可见时才触发
{ threshold: 0.5 }
);
observer.observe(currentRef);
return () => observer.disconnect();
}, []);
const isDark = theme === 'dark';
return (
<section
ref={sectionRef}
className="flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative"
className={`flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative ${
isDark ? 'bg-[#0a0a0a]' : 'bg-white'
}`}
style={{
padding: '80px 0px',
gap: '40px',
@@ -39,147 +45,138 @@ export default function WhyAssetXSection() {
}}
>
<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"
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('why.title')}
</h2>
{/* Subtitle */}
<p
className="text-[#9ca1af] text-left relative font-inter"
className={`text-left relative font-domine text-xl ${
isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
}`}
style={{
fontSize: '20px',
lineHeight: '140%',
fontWeight: 400
lineHeight: '140%'
}}
>
{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`}
<Card
className={`flex-1 self-stretch transition-all hover:-translate-y-2 ${
animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
} ${
isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
}`}
shadow="sm"
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}
/>
<CardBody className="flex flex-col items-start justify-between 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 ${
isDark ? 'bg-[#27272a]' : 'bg-[#f9fafb]'
}`}>
<Image
src="/system-data0.svg"
alt="System Data"
width={24}
height={24}
style={{
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
}}
/>
</div>
<div className="flex flex-col gap-4 items-start justify-start self-stretch">
<h3 className={`text-2xl font-bold font-domine ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
style={{
lineHeight: '130%',
letterSpacing: '-0.005em'
}}
>
{t('why.sustainable.title')}
</h3>
<p className={`text-base font-domine ${
isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
}`}
style={{
lineHeight: '150%'
}}
>
{t('why.sustainable.desc')}
</p>
</div>
</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>
<Image
src="/frame-110.svg"
alt="Chart"
width={305}
height={162}
className="w-full h-auto"
/>
</CardBody>
</Card>
{/* 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`}
<Card
className={`self-stretch transition-all hover:-translate-y-2 ${
animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
} ${
isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
}`}
shadow="sm"
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">
<CardBody className="flex flex-row items-center justify-between p-10">
<div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[414px]">
<div className={`rounded-2xl flex items-center justify-center w-12 h-12 ${
isDark ? 'bg-[#27272a]' : 'bg-[#f9fafb]'
}`}>
<Image
src="/warning-shield-check0.svg"
alt="Shield Check"
width={24}
height={24}
style={{
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
}}
/>
</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"
<div className="flex flex-col gap-4 items-start justify-start self-stretch">
<h3 className={`text-2xl font-bold font-domine ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
style={{
fontSize: '24px',
lineHeight: '130%',
letterSpacing: '-0.005em',
fontWeight: 700
letterSpacing: '-0.005em'
}}
>
{t('why.reliability.title')}
</h3>
<p
className="text-[#9ca1af] text-left relative font-inter"
<p className={`text-base font-domine ${
isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
}`}
style={{
fontSize: '16px',
lineHeight: '150%',
fontWeight: 400
lineHeight: '150%'
}}
>
{t('why.reliability.desc')}
@@ -187,38 +184,32 @@ export default function WhyAssetXSection() {
</div>
</div>
{/* Right Icon */}
<div
className="bg-[#f9fafb] rounded-[16px] border border-[#e5e7eb] flex items-center justify-center flex-shrink-0 relative"
className={`rounded-2xl border flex items-center justify-center ${
isDark ? 'bg-[#27272a] border-[#3f3f46]' : 'bg-[#f9fafb] border-[#e5e7eb]'
}`}
style={{
padding: '32px',
height: '180px',
width: '196px',
isolation: 'isolate',
willChange: 'auto',
contain: 'layout style paint'
width: '196px'
}}
>
<div
className="rounded-full border-2 border-[#e5e7eb] flex items-center justify-center flex-shrink-0 relative"
className={`rounded-full border-2 flex items-center justify-center ${
isDark ? 'border-[#3f3f46]' : 'border-[#e5e7eb]'
}`}
style={{
width: '132px',
height: '132px',
minWidth: '132px',
minHeight: '132px',
maxWidth: '132px',
maxHeight: '132px'
height: '132px'
}}
>
<div
className="bg-[#e5e7eb] rounded-full flex items-center justify-center flex-shrink-0 relative"
className={`rounded-full flex items-center justify-center ${
isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
}`}
style={{
width: '88.59px',
height: '88.59px',
minWidth: '88.59px',
minHeight: '88.59px',
maxWidth: '88.59px',
maxHeight: '88.59px'
height: '88.59px'
}}
>
<img
@@ -233,54 +224,52 @@ export default function WhyAssetXSection() {
</div>
</div>
</div>
</div>
</div>
</CardBody>
</Card>
{/* 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`}
<Card
className={`self-stretch transition-all hover:-translate-y-2 ${
animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
} ${
isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
}`}
shadow="sm"
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">
<CardBody className="flex flex-row items-start justify-between p-10">
<div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[550px]">
<div className={`rounded-2xl flex items-center justify-center w-12 h-12 ${
isDark ? 'bg-[#27272a]' : 'bg-[#f9fafb]'
}`}>
<Image
src="/arrow-arrow-left-right0.svg"
alt="Arrow"
width={24}
height={24}
style={{
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
}}
/>
</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"
<div className="flex flex-col gap-4 items-start justify-start">
<h3 className={`text-2xl font-bold font-domine ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
style={{
fontSize: '24px',
lineHeight: '130%',
letterSpacing: '-0.005em',
fontWeight: 700
letterSpacing: '-0.005em'
}}
>
{t('why.liquidity.title')}
</h3>
<p
className="text-[#9ca1af] text-left relative font-inter"
<p className={`text-base font-domine ${
isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
}`}
style={{
fontSize: '16px',
lineHeight: '150%',
fontWeight: 400
lineHeight: '150%'
}}
>
{t('why.liquidity.desc')}
@@ -288,21 +277,22 @@ export default function WhyAssetXSection() {
</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 className="flex flex-row gap-3 items-center justify-end">
<Chip
className="bg-[#e1f8ec] text-[#10b981] font-bold"
size="sm"
>
{t('why.liquidity.badge1')}
</Chip>
<Chip
className="bg-[#ebf2ff] text-[#1447e6] font-bold"
size="sm"
>
{t('why.liquidity.badge2')}
</Chip>
</div>
</div>
</div>
</CardBody>
</Card>
</div>
</div>