打磨细节

2026-01-28 17:55:01 +08:00
parent 08af95116e
commit 0a1bd07492
36 changed files with 1649 additions and 466 deletions
--- a/components/HeroButtons.tsx
+++ b/components/HeroButtons.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export default function HeroButtons() {
+  const { t } = useLanguage();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    console.log('HeroButtons mounted');
+    // 延迟一些时间后再触发按钮动画，形成渐进效果
+    const timer = setTimeout(() => {
+      console.log('HeroButtons animation starting');
+      setMounted(true);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div
+      className="flex flex-row gap-5 items-start justify-start flex-shrink-0 relative"
+      style={{
+        transform: mounted ? 'translateY(0)' : 'translateY(3rem)',
+        opacity: mounted ? 1 : 0,
+        transition: 'all 1s ease-out'
+      }}
+      suppressHydrationWarning
+    >
+      {/* .component-82 - Start Investing Button */}
+      <button
+        className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:bg-[#f3f4f6] transition-colors"
+        style={{
+          borderRadius: '4px',
+          padding: '0px 32px'
+        }}
+      >
+        {/* .text4 */}
+        <div
+          className="text-[#111827] text-center relative flex items-center justify-center font-inter"
+          style={{
+            fontSize: '18px',
+            lineHeight: '150%',
+            fontWeight: 700
+          }}
+        >
+          {t('hero.startInvesting')}
+        </div>
+
+        {/* .component-1 - Arrow icon */}
+        <Image
+          src="/component-10.svg"
+          alt="Arrow"
+          width={20}
+          height={20}
+          className="flex-shrink-0 w-5 h-5 relative overflow-visible"
+          style={{ aspectRatio: 1 }}
+        />
+      </button>
+
+      {/* .component-9 - Read the Whitepaper Button */}
+      <button
+        className="border border-white/20 flex flex-row gap-2 items-center justify-center self-stretch flex-shrink-0 relative overflow-hidden hover:bg-white/70 hover:border-white/60 transition-all"
+        style={{
+          background: 'rgba(255, 255, 255, 0.1)',
+          borderRadius: '4px',
+          padding: '12px 32px',
+          backdropFilter: 'blur(30px)'
+        }}
+      >
+        {/* .text5 */}
+        <div
+          className="text-[#fcfcfd] text-center relative flex items-center justify-center font-inter"
+          style={{
+            fontSize: '18px',
+            lineHeight: '150%',
+            fontWeight: 700
+          }}
+        >
+          {t('hero.readWhitepaper')}
+        </div>
+      </button>
+    </div>
+  );
+}