xufuhan/assetx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init: 初始化 AssetX 项目仓库

Browse Source 
包含 webapp（Next.js 用户端）、webapp-back（Go 后端）、
antdesign（管理后台）、landingpage（营销落地页）、
数据库 SQL 和配置文件。
This commit is contained in:
default
2026-03-27 11:26:43 +00:00
commit 2ee4553b71
634 changed files with 988255 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
landingpage/components/WhyAssetXSection.tsx Normal file
View File

@@ -0,0 +1,256 @@
'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>
);
}