打磨细节

2026-01-28 17:55:01 +08:00
parent 08af95116e
commit 0a1bd07492
36 changed files with 1649 additions and 466 deletions
--- a/components/HeroTitle.tsx
+++ b/components/HeroTitle.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export default function HeroTitle() {
+  const { t } = useLanguage();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    console.log('HeroTitle mounted');
+    const timer = setTimeout(() => {
+      console.log('HeroTitle animation starting');
+      setMounted(true);
+    }, 400);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div
+      className="flex flex-col gap-8 items-start justify-start self-stretch flex-shrink-0 relative"
+      style={{
+        transform: mounted ? 'translateY(0)' : 'translateY(3rem)',
+        opacity: mounted ? 1 : 0,
+        transition: 'all 1s ease-out'
+      }}
+      suppressHydrationWarning
+    >
+      {/* .frame-22 - 标题容器 */}
+      <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
+        {/* .yield-bearing-asset */}
+        <div
+          className="text-[#fcfcfd] text-left relative self-stretch font-domine"
+          style={{
+            fontSize: '100px',
+            lineHeight: '100%',
+            letterSpacing: '-0.03em',
+            fontWeight: 400
+          }}
+        >
+          {t('hero.title1')}
+        </div>
+
+        {/* .on-chain */}
+        <div
+          className="text-[#fcfcfd] text-left relative w-[926px] h-[100px] font-domine"
+          style={{
+            fontSize: '100px',
+            lineHeight: '100%',
+            letterSpacing: '-0.03em',
+            fontWeight: 700
+          }}
+        >
+          {t('hero.title2')}
+        </div>
+      </div>
+
+      {/* Description text */}
+      <div
+        className="text-[#fcfcfd] text-left relative w-[488px] flex items-center justify-start font-domine"
+        style={{
+          fontSize: '16px',
+          lineHeight: '150%',
+          fontWeight: 400
+        }}
+      >
+        {t('hero.description')}
+      </div>
+    </div>
+  );
+}