使用heroui完成对页面的重构

components/HeroButtons.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import Image from 'next/image';
+import { Button } from '@heroui/react';
 import { useLanguage } from '@/contexts/LanguageContext';
 
 export default function HeroButtons() {
@@ -9,10 +10,7 @@ export default function HeroButtons() {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    console.log('HeroButtons mounted');
-    // 延迟一些时间后再触发按钮动画，形成渐进效果
     const timer = setTimeout(() => {
-      console.log('HeroButtons animation starting');
       setMounted(true);
     }, 500);
     return () => clearTimeout(timer);
@@ -24,63 +22,34 @@ export default function HeroButtons() {
       style={{
         transform: mounted ? 'translateY(0)' : 'translateY(3rem)',
         opacity: mounted ? 1 : 0,
-        transition: 'all 1s ease-out'
+        transition: 'transform 1s ease-out, opacity 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 select-none"
-        style={{
-          borderRadius: '4px',
-          padding: '0px 32px'
-        }}
+      {/* Start Investing Button */}
+      <Button
+        size="lg"
+        className="bg-white text-[#111827] font-bold text-lg h-[60px] px-8"
+        endContent={
+          <Image
+            src="/component-10.svg"
+            alt="Arrow"
+            width={20}
+            height={20}
+            className="flex-shrink-0"
+          />
+        }
       >
-        {/* .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>
+        {t('hero.startInvesting')}
+      </Button>
 
-        {/* .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 select-none"
-        style={{
-          background: 'rgba(255, 255, 255, 0.1)',
-          borderRadius: '4px',
-          padding: '12px 32px',
-          backdropFilter: 'blur(30px)'
-        }}
+      {/* Read the Whitepaper Button */}
+      <Button
+        size="lg"
+        variant="bordered"
+        className="border-white/20 bg-white/10 text-white font-bold text-lg h-[60px] px-8 backdrop-blur-[30px] hover:bg-white/20 hover:border-white/40"
       >
-        {/* .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>
+        {t('hero.readWhitepaper')}
+      </Button>
     </div>
   );
 }