xufuhan/asset-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目

Browse Source
This commit is contained in:
xufuhan
2026-01-27 17:26:30 +08:00
commit 08af95116e
62 changed files with 9364 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
components/SecuritySection.tsx Normal file
View File

@@ -0,0 +1,224 @@
'use client';
import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
export default function SecuritySection() {
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 = [
{
icon: '/interface-search-magnifying-glass0.svg',
title: 'Audited',
description: 'Smart contracts audited by top-tier firms. Underlying assets undergo strict due diligence and financial auditing.',
position: 'top-left'
},
{
icon: '/navigation-building-010.svg',
title: 'Segregated',
description: 'SPV Setup. User assets are held in segregated Special Purpose Vehicles, isolated from platform risks.',
position: 'top-right'
},
{
icon: '/interface-chart-bar-vertical-010.svg',
title: 'Transparency',
description: 'Real-Time NAV. Fund performance data and asset valuations are publicly available and updated on-chain.',
position: 'bottom-left'
},
{
icon: '/component-11.svg',
title: 'Powered By NASDAQ & HKEX Listed Partners',
description: null,
position: 'bottom-right',
special: true
}
];
return (
<section
ref={sectionRef}
className="bg-black flex flex-col items-center justify-start self-stretch flex-shrink-0 w-full relative"
style={{
padding: '1px 24px 0px 24px',
gap: '40px'
}}
>
{/* Main Container */}
<div className="flex flex-row items-start justify-start flex-shrink-0 w-[1440px] relative">
{/* Left Side - Title */}
<div
className={`flex flex-row items-center justify-center flex-shrink-0 w-[459px] h-[604px] relative transition-all duration-700 ease-out ${
mounted && visible
? 'translate-x-0 opacity-100'
: '-translate-x-12 opacity-0'
}`}
style={{
borderStyle: 'solid',
borderColor: '#222222',
borderWidth: '0px 0px 1px 0px',
padding: '180px 24px 180px 120px'
}}
>
<div className="flex flex-col gap-6 items-start justify-start flex-1 relative">
<h2
className="text-[#fcfcfd] text-left relative self-stretch font-domine"
style={{
fontSize: '48px',
lineHeight: '120%',
letterSpacing: '-0.01em',
fontWeight: 400
}}
>
Security First Architecture
</h2>
<p
className="text-[#9ca1af] text-left relative w-[290px] flex items-center justify-start font-domine"
style={{
fontSize: '16px',
lineHeight: '150%',
fontWeight: 400
}}
>
Real-time data transparency with segregated asset management.
</p>
</div>
</div>
{/* Right Side - Grid */}
<div
className="flex-shrink-0 grid gap-0 relative"
style={{
width: '981px',
gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
gridTemplateRows: 'repeat(2, fit-content(100%))'
}}
>
{features.map((feature, index) => (
<div
key={feature.title}
className={`flex flex-col items-start justify-center relative transition-all duration-700 ease-out ${
mounted && visible
? 'translate-y-0 opacity-100'
: 'translate-y-12 opacity-0'
}`}
style={{
borderStyle: 'solid',
borderColor: '#222222',
borderWidth:
feature.position === 'top-left' ? '0px 1px 1px 1px' :
feature.position === 'top-right' ? '0px 0px 1px 0px' :
feature.position === 'bottom-left' ? '0px 1px 1px 1px' :
'0px 1px 1px 0px',
padding: '72px 48px 72px 48px',
gridColumn: feature.position.includes('left') ? '1 / span 1' : '2 / span 1',
gridRow: feature.position.includes('top') ? '1 / span 1' : '2 / span 1',
height: feature.position === 'bottom-right' ? '302px' : 'auto',
transitionDelay: `${index * 150}ms`
}}
>
{feature.special ? (
// Special card (bottom-right)
<div className="flex flex-col gap-6 items-start justify-center self-stretch flex-shrink-0 h-[166px] relative">
<div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
<h3
className="text-[#fcfcfd] text-left relative self-stretch font-domine"
style={{
fontSize: '24px',
lineHeight: '140%',
fontWeight: 400
}}
>
{feature.title}
</h3>
<Image
src={feature.icon}
alt="Icon"
width={24}
height={24}
className="flex-shrink-0"
/>
</div>
</div>
) : (
// Regular cards
<div className="flex flex-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
<Image
src={feature.icon}
alt={feature.title}
width={32}
height={32}
className="flex-shrink-0"
/>
<div className="flex flex-col gap-2 items-start justify-start self-stretch flex-shrink-0 relative">
<h3
className="text-[#fcfcfd] text-left relative self-stretch font-inter"
style={{
fontSize: '24px',
lineHeight: '130%',
letterSpacing: '-0.005em',
fontWeight: 700
}}
>
{feature.title}
</h3>
<p
className="text-[#9ca1af] text-left relative self-stretch font-inter"
style={{
fontSize: '14px',
lineHeight: '150%',
fontWeight: 400
}}
>
{feature.description}
</p>
</div>
</div>
)}
</div>
))}
</div>
</div>
{/* Logo */}
<div className="flex-shrink-0 w-[1200px] h-[187px] relative">
<Image
src="/logo1.svg"
alt="Logo"
width={1200}
height={187}
className="w-full h-full object-contain"
/>
</div>
</section>
);
}