使用heroui完成对页面的重构

app/globals.css

@@ -20,6 +20,24 @@ body {
   font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
 }
 
+/* 文本选中样式 - Light Mode (毛玻璃效果) */
+::selection {
+  background-color: rgba(156, 163, 175, 0.35);
+}
+
+::-moz-selection {
+  background-color: rgba(156, 163, 175, 0.35);
+}
+
+/* 文本选中样式 - Dark Mode (毛玻璃效果) */
+[data-theme="dark"] ::selection {
+  background-color: rgba(156, 163, 175, 0.4);
+}
+
+[data-theme="dark"] ::-moz-selection {
+  background-color: rgba(156, 163, 175, 0.4);
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;
@@ -158,3 +176,21 @@ body {
 .animate-fade-out {
   animation: fadeOut 1.5s ease-out forwards;
 }
+
+/* Arrow bounce animation - left and right */
+@keyframes arrowBounce {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(8px);
+  }
+}
+
+.arrow-icon {
+  transition: transform 0.3s ease;
+}
+
+.group:hover .arrow-icon {
+  animation: arrowBounce 1.5s ease-in-out infinite;
+}

app/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Navbar from '@/components/Navbar';
 import HeroSection from '@/components/HeroSection';
 import StatsSection from '@/components/StatsSection';
@@ -6,20 +8,22 @@ import WhyAssetXSection from '@/components/WhyAssetXSection';
 import HowItWorksSection from '@/components/HowItWorksSection';
 import SecuritySection from '@/components/SecuritySection';
 import Footer from '@/components/Footer';
+import { useTheme } from '@/contexts/ThemeContext';
 
 export default function Home() {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
   return (
-    <div className="min-h-screen bg-white">
+    <div className={`min-h-screen ${isDark ? 'bg-[#0a0a0a]' : 'bg-white'}`}>
       <Navbar />
-      <div className="pt-[80px]">
-        <HeroSection />
+      <HeroSection />
       <StatsSection />
       <TrustedBySection />
       <WhyAssetXSection />
       <HowItWorksSection />
       <SecuritySection />
       <Footer />
-      </div>
     </div>
   );
 }