使用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;
+}