打磨细节

components/SecuritySection.tsx

@@ -2,62 +2,54 @@
 
 import { useState, useEffect, useRef } from 'react';
 import Image from 'next/image';
+import { useLanguage } from '@/contexts/LanguageContext';
 
 export default function SecuritySection() {
-  const [mounted, setMounted] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const { t } = useLanguage();
+  const [animate, setAnimate] = useState(false);
   const sectionRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    setMounted(true);
+    const currentRef = sectionRef.current;
+    if (!currentRef) return;
 
     const observer = new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting && !visible) {
-            setVisible(true);
-          }
-        });
+        if (entries[0].isIntersecting) {
+          setAnimate(true);
+          observer.disconnect();
+        }
       },
-      {
-        threshold: 0.1,
-      }
+      { threshold: 0.3 }
     );
 
-    if (sectionRef.current) {
-      observer.observe(sectionRef.current);
-    }
-
-    return () => {
-      if (sectionRef.current) {
-        observer.unobserve(sectionRef.current);
-      }
-    };
-  }, [visible]);
+    observer.observe(currentRef);
+    return () => observer.disconnect();
+  }, []);
 
   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.',
+      titleKey: 'security.audited.title',
+      descKey: 'security.audited.desc',
       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.',
+      titleKey: 'security.segregated.title',
+      descKey: 'security.segregated.desc',
       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.',
+      titleKey: 'security.transparency.title',
+      descKey: 'security.transparency.desc',
       position: 'bottom-left'
     },
     {
       icon: '/component-11.svg',
-      title: 'Powered By NASDAQ & HKEX Listed Partners',
-      description: null,
+      titleKey: 'security.partners.title',
+      descKey: null,
       position: 'bottom-right',
       special: true
     }
@@ -78,7 +70,7 @@ export default function SecuritySection() {
         {/* 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
+            animate
               ? 'translate-x-0 opacity-100'
               : '-translate-x-12 opacity-0'
           }`}
@@ -99,7 +91,7 @@ export default function SecuritySection() {
                 fontWeight: 400
               }}
             >
-              Security First Architecture
+              {t('security.title')}
             </h2>
             <p
               className="text-[#9ca1af] text-left relative w-[290px] flex items-center justify-start font-domine"
@@ -109,7 +101,7 @@ export default function SecuritySection() {
                 fontWeight: 400
               }}
             >
-              Real-time data transparency with segregated asset management.
+              {t('security.subtitle')}
             </p>
           </div>
         </div>
@@ -125,9 +117,9 @@ export default function SecuritySection() {
         >
           {features.map((feature, index) => (
             <div
-              key={feature.title}
+              key={feature.titleKey}
               className={`flex flex-col items-start justify-center relative transition-all duration-700 ease-out ${
-                mounted && visible
+                animate
                   ? 'translate-y-0 opacity-100'
                   : 'translate-y-12 opacity-0'
               }`}
@@ -158,7 +150,7 @@ export default function SecuritySection() {
                         fontWeight: 400
                       }}
                     >
-                      {feature.title}
+                      {t(feature.titleKey)}
                     </h3>
                     <Image
                       src={feature.icon}
@@ -174,7 +166,7 @@ export default function SecuritySection() {
                 <div className="flex flex-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
                   <Image
                     src={feature.icon}
-                    alt={feature.title}
+                    alt={t(feature.titleKey)}
                     width={32}
                     height={32}
                     className="flex-shrink-0"
@@ -189,7 +181,7 @@ export default function SecuritySection() {
                         fontWeight: 700
                       }}
                     >
-                      {feature.title}
+                      {t(feature.titleKey)}
                     </h3>
                     <p
                       className="text-[#9ca1af] text-left relative self-stretch font-inter"
@@ -199,7 +191,7 @@ export default function SecuritySection() {
                         fontWeight: 400
                       }}
                     >
-                      {feature.description}
+                      {feature.descKey && t(feature.descKey)}
                     </p>
                   </div>
                 </div>