使用heroui完成对页面的重构
This commit is contained in:
@@ -2,12 +2,14 @@
|
||||
|
||||
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;
|
||||
@@ -27,6 +29,67 @@ export default function SecuritySection() {
|
||||
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',
|
||||
@@ -47,7 +110,7 @@ export default function SecuritySection() {
|
||||
position: 'bottom-left'
|
||||
},
|
||||
{
|
||||
icon: '/component-11.svg',
|
||||
icon: '/component-10.svg',
|
||||
titleKey: 'security.partners.title',
|
||||
descKey: null,
|
||||
position: 'bottom-right',
|
||||
@@ -64,41 +127,30 @@ export default function SecuritySection() {
|
||||
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 ${
|
||||
animate
|
||||
? 'translate-x-0 opacity-100'
|
||||
: '-translate-x-12 opacity-0'
|
||||
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={{
|
||||
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"
|
||||
className="text-[#fcfcfd] text-left relative self-stretch font-domine text-5xl select-none"
|
||||
style={{
|
||||
fontSize: '48px',
|
||||
lineHeight: '120%',
|
||||
letterSpacing: '-0.01em',
|
||||
fontWeight: 400
|
||||
letterSpacing: '-0.01em'
|
||||
}}
|
||||
>
|
||||
{t('security.title')}
|
||||
</h2>
|
||||
<p
|
||||
className="text-[#9ca1af] text-left relative w-[290px] flex items-center justify-start font-domine"
|
||||
className="text-[#9ca1af] text-left relative w-[290px] flex items-center justify-start font-domine text-base select-none"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
lineHeight: '150%'
|
||||
}}
|
||||
>
|
||||
{t('security.subtitle')}
|
||||
@@ -106,7 +158,6 @@ export default function SecuritySection() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Grid */}
|
||||
<div
|
||||
className="flex-shrink-0 grid gap-0 relative"
|
||||
style={{
|
||||
@@ -115,93 +166,138 @@ export default function SecuritySection() {
|
||||
gridTemplateRows: 'repeat(2, fit-content(100%))'
|
||||
}}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
{features.map((feature, index) => {
|
||||
const borders = getBorderGradients(index);
|
||||
return (
|
||||
<div
|
||||
key={feature.titleKey}
|
||||
className={`flex flex-col items-start justify-center relative transition-all duration-700 ease-out ${
|
||||
animate
|
||||
? 'translate-y-0 opacity-100'
|
||||
: 'translate-y-12 opacity-0'
|
||||
}`}
|
||||
className="relative group"
|
||||
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`
|
||||
}}
|
||||
onMouseMove={(e) => handleCardMouseMove(e, index)}
|
||||
onMouseLeave={() => handleCardMouseLeave(index)}
|
||||
>
|
||||
{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
|
||||
}}
|
||||
>
|
||||
{t(feature.titleKey)}
|
||||
</h3>
|
||||
{/* 上边框渐变 */}
|
||||
{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="Icon"
|
||||
width={24}
|
||||
height={24}
|
||||
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>
|
||||
</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={t(feature.titleKey)}
|
||||
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
|
||||
}}
|
||||
>
|
||||
{t(feature.titleKey)}
|
||||
</h3>
|
||||
<p
|
||||
className="text-[#9ca1af] text-left relative self-stretch font-inter"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
{feature.descKey && t(feature.descKey)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 w-[1200px] h-[187px] relative">
|
||||
<Image
|
||||
src="/logo1.svg"
|
||||
|
||||
Reference in New Issue
Block a user