初始化项目
This commit is contained in:
310
components/WhyAssetXSection.tsx
Normal file
310
components/WhyAssetXSection.tsx
Normal file
@@ -0,0 +1,310 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function WhyAssetXSection() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && !visible) {
|
||||
setVisible(true);
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.1,
|
||||
}
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
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 (
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className="flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative"
|
||||
style={{
|
||||
padding: '80px 0px',
|
||||
gap: '40px',
|
||||
alignContent: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center w-[1200px]">
|
||||
{/* Header - .frame-27 */}
|
||||
<div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-[1200px] relative mb-10">
|
||||
{/* Title - .why-assetx */}
|
||||
<h2
|
||||
className="text-[#111827] text-left relative font-inter"
|
||||
style={{
|
||||
fontSize: '48px',
|
||||
lineHeight: '120%',
|
||||
letterSpacing: '-0.01em',
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
Why ASSETX?
|
||||
</h2>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p
|
||||
className="text-[#9ca1af] text-left relative font-inter"
|
||||
style={{
|
||||
fontSize: '20px',
|
||||
lineHeight: '140%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Institutional-grade access to real-world yield, with DeFi-native composability.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cards Container - .frame-30 */}
|
||||
<div className="flex flex-row gap-6 items-center justify-start flex-shrink-0 w-[1199px] 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
|
||||
? 'translate-y-0 opacity-100'
|
||||
: 'translate-y-12 opacity-0'
|
||||
}
|
||||
hover:-translate-y-2 hover:shadow-xl`}
|
||||
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}
|
||||
/>
|
||||
</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
|
||||
}}
|
||||
>
|
||||
Sustainable Real Yield
|
||||
</h3>
|
||||
<p
|
||||
className="text-[#9ca1af] text-left relative self-stretch font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Access 15%-30% returns from Delta-neutral arbitrage strategies and commercial credit. No inflationary token emissions, just real profits.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart Image - .frame-11 */}
|
||||
<Image
|
||||
src="/frame-110.svg"
|
||||
alt="Chart"
|
||||
width={305}
|
||||
height={162}
|
||||
className="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">
|
||||
|
||||
{/* 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
|
||||
? 'translate-y-0 opacity-100'
|
||||
: 'translate-y-12 opacity-0'
|
||||
}
|
||||
hover:-translate-y-2 hover:shadow-xl`}
|
||||
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">
|
||||
<Image
|
||||
src="/warning-shield-check0.svg"
|
||||
alt="Shield Check"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</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"
|
||||
style={{
|
||||
fontSize: '24px',
|
||||
lineHeight: '130%',
|
||||
letterSpacing: '-0.005em',
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
Proven Reliability
|
||||
</h3>
|
||||
<p
|
||||
className="text-[#9ca1af] text-left relative font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Backed by partners holding HK SFC Licenses (1/2/4/5/9) and NASDAQ-listed entities. Audited, compliant, and transparent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Icon */}
|
||||
<div className="flex items-center justify-center">
|
||||
<Image
|
||||
src="/icon0.svg"
|
||||
alt="Icon"
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
${
|
||||
mounted && visible
|
||||
? 'translate-y-0 opacity-100'
|
||||
: 'translate-y-12 opacity-0'
|
||||
}
|
||||
hover:-translate-y-2 hover:shadow-xl`}
|
||||
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-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>
|
||||
|
||||
{/* 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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user