313 lines
10 KiB
TypeScript
313 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import Image from 'next/image';
|
|
import { Card, CardBody } from '@heroui/react';
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
|
|
|
export default function SecuritySection() {
|
|
const { t } = useLanguage();
|
|
const [animate, setAnimate] = useState(false);
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
const [cardHovers, setCardHovers] = useState<{[key: number]: {x: number, y: number} | null}>({});
|
|
|
|
useEffect(() => {
|
|
const currentRef = sectionRef.current;
|
|
if (!currentRef) return;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries[0].isIntersecting) {
|
|
setAnimate(true);
|
|
observer.disconnect();
|
|
}
|
|
},
|
|
{ threshold: 0.3 }
|
|
);
|
|
|
|
observer.observe(currentRef);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const handleCardMouseMove = (e: React.MouseEvent<HTMLDivElement>, index: number) => {
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
setCardHovers(prev => ({...prev, [index]: {x, y}}));
|
|
};
|
|
|
|
const handleCardMouseLeave = (index: number) => {
|
|
setCardHovers(prev => ({...prev, [index]: null}));
|
|
};
|
|
|
|
const getBorderGradients = (index: number) => {
|
|
const hover = cardHovers[index];
|
|
if (!hover) return {
|
|
showTop: false,
|
|
showRight: false,
|
|
showBottom: false,
|
|
showLeft: false,
|
|
topGradient: '',
|
|
rightGradient: '',
|
|
bottomGradient: '',
|
|
leftGradient: ''
|
|
};
|
|
|
|
const { x, y } = hover;
|
|
|
|
// 判断鼠标靠近哪两个边
|
|
const nearTop = y < 50;
|
|
const nearLeft = x < 50;
|
|
|
|
// 计算渐变：以鼠标位置为中心向两边扩散
|
|
const spreadRange = 25; // 扩散范围百分比
|
|
|
|
// 上/下边框：以鼠标 x 位置为中心
|
|
const horizontalGradient = `linear-gradient(to right,
|
|
transparent 0%,
|
|
rgba(136,136,136,0.3) ${Math.max(0, x - spreadRange)}%,
|
|
rgba(136,136,136,1) ${x}%,
|
|
rgba(136,136,136,0.3) ${Math.min(100, x + spreadRange)}%,
|
|
transparent 100%)`;
|
|
|
|
// 左/右边框：以鼠标 y 位置为中心
|
|
const verticalGradient = `linear-gradient(to bottom,
|
|
transparent 0%,
|
|
rgba(136,136,136,0.3) ${Math.max(0, y - spreadRange)}%,
|
|
rgba(136,136,136,1) ${y}%,
|
|
rgba(136,136,136,0.3) ${Math.min(100, y + spreadRange)}%,
|
|
transparent 100%)`;
|
|
|
|
return {
|
|
showTop: nearTop,
|
|
showRight: !nearLeft,
|
|
showBottom: !nearTop,
|
|
showLeft: nearLeft,
|
|
topGradient: horizontalGradient,
|
|
rightGradient: verticalGradient,
|
|
bottomGradient: horizontalGradient,
|
|
leftGradient: verticalGradient
|
|
};
|
|
};
|
|
|
|
const features = [
|
|
{
|
|
icon: '/interface-search-magnifying-glass0.svg',
|
|
titleKey: 'security.audited.title',
|
|
descKey: 'security.audited.desc',
|
|
position: 'top-left'
|
|
},
|
|
{
|
|
icon: '/navigation-building-010.svg',
|
|
titleKey: 'security.segregated.title',
|
|
descKey: 'security.segregated.desc',
|
|
position: 'top-right'
|
|
},
|
|
{
|
|
icon: '/interface-chart-bar-vertical-010.svg',
|
|
titleKey: 'security.transparency.title',
|
|
descKey: 'security.transparency.desc',
|
|
position: 'bottom-left'
|
|
},
|
|
{
|
|
icon: '/component-10.svg',
|
|
titleKey: 'security.partners.title',
|
|
descKey: 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'
|
|
}}
|
|
>
|
|
<div className="flex flex-row items-start justify-start flex-shrink-0 w-[1440px] relative">
|
|
|
|
<div
|
|
className={`flex flex-row items-center justify-center flex-shrink-0 w-[459px] h-[604px] relative transition-all duration-700 ease-out border-b border-[#222222] ${
|
|
animate ? 'translate-x-0 opacity-100' : '-translate-x-12 opacity-0'
|
|
}`}
|
|
style={{
|
|
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 text-5xl select-none"
|
|
style={{
|
|
lineHeight: '120%',
|
|
letterSpacing: '-0.01em'
|
|
}}
|
|
>
|
|
{t('security.title')}
|
|
</h2>
|
|
<p
|
|
className="text-[#9ca1af] text-left relative w-[290px] flex items-center justify-start font-domine text-base select-none"
|
|
style={{
|
|
lineHeight: '150%'
|
|
}}
|
|
>
|
|
{t('security.subtitle')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<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) => {
|
|
const borders = getBorderGradients(index);
|
|
return (
|
|
<div
|
|
key={feature.titleKey}
|
|
className="relative group"
|
|
style={{
|
|
gridColumn: feature.position.includes('left') ? '1 / span 1' : '2 / span 1',
|
|
gridRow: feature.position.includes('top') ? '1 / span 1' : '2 / span 1',
|
|
}}
|
|
onMouseMove={(e) => handleCardMouseMove(e, index)}
|
|
onMouseLeave={() => handleCardMouseLeave(index)}
|
|
>
|
|
{/* 上边框渐变 */}
|
|
{borders.showTop && (
|
|
<div
|
|
className="absolute top-0 left-0 right-0 h-[1px] z-10"
|
|
style={{
|
|
background: borders.topGradient,
|
|
pointerEvents: 'none'
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 右边框渐变 */}
|
|
{borders.showRight && (
|
|
<div
|
|
className="absolute top-0 right-0 bottom-0 w-[1px] z-10"
|
|
style={{
|
|
background: borders.rightGradient,
|
|
pointerEvents: 'none'
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 下边框渐变 */}
|
|
{borders.showBottom && (
|
|
<div
|
|
className="absolute bottom-0 left-0 right-0 h-[1px] z-10"
|
|
style={{
|
|
background: borders.bottomGradient,
|
|
pointerEvents: 'none'
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 左边框渐变 */}
|
|
{borders.showLeft && (
|
|
<div
|
|
className="absolute top-0 left-0 bottom-0 w-[1px] z-10"
|
|
style={{
|
|
background: borders.leftGradient,
|
|
pointerEvents: 'none'
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<Card
|
|
className={`rounded-none bg-black border-[#222222] transition-all duration-300 ${
|
|
animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
|
}`}
|
|
shadow="none"
|
|
style={{
|
|
borderStyle: 'solid',
|
|
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',
|
|
height: '302px',
|
|
transitionDelay: animate ? `${index * 150}ms` : '0ms'
|
|
}}
|
|
>
|
|
<CardBody className="p-[72px_48px] flex items-start justify-center overflow-hidden">
|
|
{feature.special ? (
|
|
<div className="flex flex-col gap-6 items-start justify-center self-stretch h-[166px]">
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch">
|
|
<h3
|
|
className="text-[#fcfcfd] text-left relative self-stretch font-domine text-2xl"
|
|
style={{
|
|
lineHeight: '140%'
|
|
}}
|
|
>
|
|
{t(feature.titleKey)}
|
|
</h3>
|
|
<Image
|
|
src={feature.icon}
|
|
alt="Icon"
|
|
width={24}
|
|
height={24}
|
|
className="flex-shrink-0 brightness-0 invert arrow-icon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-6 items-start justify-start self-stretch">
|
|
<Image
|
|
src={feature.icon}
|
|
alt={t(feature.titleKey)}
|
|
width={32}
|
|
height={32}
|
|
className="flex-shrink-0"
|
|
/>
|
|
<div className="flex flex-col gap-2 items-start justify-start self-stretch">
|
|
<h3
|
|
className="text-[#fcfcfd] text-left relative self-stretch font-domine text-2xl font-bold"
|
|
style={{
|
|
lineHeight: '130%',
|
|
letterSpacing: '-0.005em'
|
|
}}
|
|
>
|
|
{t(feature.titleKey)}
|
|
</h3>
|
|
<p
|
|
className="text-[#9ca1af] text-left relative self-stretch font-domine text-sm"
|
|
style={{
|
|
lineHeight: '150%'
|
|
}}
|
|
>
|
|
{feature.descKey && t(feature.descKey)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
);
|
|
}
|