311 lines
12 KiB
TypeScript
311 lines
12 KiB
TypeScript
|
'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>
|
||
|
|
);
|
||
|
|
}
|