303 lines
11 KiB
TypeScript
303 lines
11 KiB
TypeScript
'use client';
|
|
|
|
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);
|
|
|
|
useEffect(() => {
|
|
const currentRef = sectionRef.current;
|
|
if (!currentRef) return;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries[0].isIntersecting) {
|
|
setAnimate(true);
|
|
observer.disconnect();
|
|
}
|
|
},
|
|
{ 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 ${
|
|
isDark ? 'bg-[#0a0a0a]' : 'bg-white'
|
|
}`}
|
|
style={{
|
|
padding: '80px 0px',
|
|
gap: '40px',
|
|
alignContent: 'center'
|
|
}}
|
|
>
|
|
<div className="flex flex-col items-center justify-center w-[1440px]">
|
|
<div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-[1440px] relative mb-10">
|
|
<h2
|
|
className={`text-left relative font-domine text-5xl font-bold ${
|
|
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
|
|
}`}
|
|
style={{
|
|
lineHeight: '120%',
|
|
letterSpacing: '-0.01em'
|
|
}}
|
|
>
|
|
{t('why.title')}
|
|
</h2>
|
|
|
|
<p
|
|
className={`text-left relative font-domine text-xl ${
|
|
isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
|
|
}`}
|
|
style={{
|
|
lineHeight: '140%'
|
|
}}
|
|
>
|
|
{t('why.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-row gap-6 items-center justify-start flex-shrink-0 w-[1440px] relative">
|
|
|
|
<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'
|
|
}}
|
|
>
|
|
<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>
|
|
|
|
<Image
|
|
src="/frame-110.svg"
|
|
alt="Chart"
|
|
width={305}
|
|
height={162}
|
|
className="w-full h-auto"
|
|
/>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[850px] relative">
|
|
|
|
<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'
|
|
}}
|
|
>
|
|
<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>
|
|
|
|
<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.reliability.title')}
|
|
</h3>
|
|
<p className={`text-base font-domine ${
|
|
isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
|
|
}`}
|
|
style={{
|
|
lineHeight: '150%'
|
|
}}
|
|
>
|
|
{t('why.reliability.desc')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
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'
|
|
}}
|
|
>
|
|
<div
|
|
className={`rounded-full border-2 flex items-center justify-center ${
|
|
isDark ? 'border-[#3f3f46]' : 'border-[#e5e7eb]'
|
|
}`}
|
|
style={{
|
|
width: '132px',
|
|
height: '132px'
|
|
}}
|
|
>
|
|
<div
|
|
className={`rounded-full flex items-center justify-center ${
|
|
isDark ? 'bg-[#3f3f46]' : 'bg-[#e5e7eb]'
|
|
}`}
|
|
style={{
|
|
width: '88.59px',
|
|
height: '88.59px'
|
|
}}
|
|
>
|
|
<img
|
|
src="/icon0.svg"
|
|
alt="Lock Icon"
|
|
style={{
|
|
width: '44.29px',
|
|
height: '44.29px',
|
|
display: 'block'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<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'
|
|
}}
|
|
>
|
|
<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>
|
|
|
|
<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={{
|
|
lineHeight: '130%',
|
|
letterSpacing: '-0.005em'
|
|
}}
|
|
>
|
|
{t('why.liquidity.title')}
|
|
</h3>
|
|
<p className={`text-base font-domine ${
|
|
isDark ? 'text-[#a1a1aa]' : 'text-[#9ca1af]'
|
|
}`}
|
|
style={{
|
|
lineHeight: '150%'
|
|
}}
|
|
>
|
|
{t('why.liquidity.desc')}
|
|
</p>
|
|
</div>
|
|
</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>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|