使用heroui完成对页面的重构

components/HeroTitle.tsx

@@ -8,9 +8,7 @@ export default function HeroTitle() {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    console.log('HeroTitle mounted');
     const timer = setTimeout(() => {
-      console.log('HeroTitle animation starting');
       setMounted(true);
     }, 400);
     return () => clearTimeout(timer);
@@ -22,13 +20,10 @@ export default function HeroTitle() {
       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
     >
-      {/* .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={{
@@ -41,7 +36,6 @@ export default function HeroTitle() {
           {t('hero.title1')}
         </div>
 
-        {/* .on-chain */}
         <div
           className="text-[#fcfcfd] text-left relative w-[926px] h-[100px] font-domine"
           style={{
@@ -55,7 +49,6 @@ export default function HeroTitle() {
         </div>
       </div>
 
-      {/* Description text */}
       <div
         className="text-[#fcfcfd] text-left relative w-[488px] flex items-center justify-start font-domine"
         style={{