refactor(ui): adopt Nuxt UI components for homepage and layout

This commit refactors the main layout and homepage to utilize components from the Nuxt UI library, simplifying the
codebase and reducing custom boilerplate.

- The default layout is now built with `UPage`, `UHeader`, `UMain`, and `UFooter`.
- The homepage (`pages/index.vue`) has been updated to use `UPageHero` and `UBlogPosts`.
- The `IndexHero` and `IndexNews` components have been removed as their functionality is now integrated directly into
the index page.
- `Donate`, `Events`, and `HallOfFame` components are now wrapped with `UPageCTA` or `UPageSection`.

app/layouts/default.vue

@@ -1,62 +1,74 @@
 <template>
-  <div class="min-h-screen flex flex-col">
-    <!-- 导航栏 -->
-    <header class="bg-white shadow-md sticky top-0 z-50">
-      <div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
-        <div>
-          <img class="inline w-16" src="/Logo.svg" alt="YPHS Alumni" />
-          <h1 class="inline text-xl font-bold text-gray-900">
-            <a href="/" class="ml-4 hover:text-primary">永平中学校友会</a>
-          </h1>
-        </div>
+  <UPage>
+    <UHeader>
+      <template #left>
+        <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
+        <h1 class="inline text-xl font-bold text-gray-900">
+          <a href="/" class="ml-4 hover:text-primary">永平中学校友会</a>
+        </h1>
+      </template>
+      <template #right>
         <nav class="space-x-6 hidden md:flex items-center">
-          <a href="#news" class="hover:text-primary">新闻</a>
-          <a href="#events" class="hover:text-primary">活动</a>
-          <a href="#donate" class="hover:text-primary">捐赠（未开放）</a>
-          <a href="#about" class="hover:text-primary">关于</a>
-          <a href="/join-us"
-            class="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-xl shadow hover:opacity-90">
+          <UNavigationMenu :items="items" />
+          <a
+            href="/join-us"
+            class="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-xl shadow hover:opacity-90"
+          >
             加入
             <Icon name="mdi:account-plus" class="w-5 h-5" />
           </a>
         </nav>
-      </div>
-    </header>
-
-    <!-- 主体部分 -->
-    <main class="flex-1">
+      </template>
+    </UHeader>
+    <UMain>
       <slot />
-    </main>
+    </UMain>
+    <UFooter>
+      <template #left>
+        <p>© 2025 永平中学校友会. 保留所有权利.</p>
+      </template>
 
-    <!-- 页脚 -->
-    <footer class="bg-gray-900 text-gray-300 py-6">
-      <div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
-        <div class="text-center md:text-left">
-          <p>© 2025 永平中学校友会. 保留所有权利.</p>
-        </div>
+      <template #default>
+        <p class="mt-1">
+          Powered by:
+          <a
+            href="https://tootaio.com"
+            target="_blank"
+            class="font-semibold hover:underline"
+            style="color: #e24545"
+          >
+            Tootaio Studio
+          </a>
+          <span class="mt-1 text-sm"
+            >2018 级毕业学长（麦祖奕）</span
+          >
+        </p>
+      </template>
 
-        <div>
-          <p class="mt-1">
-            Powered by:
-            <a href="https://tootaio.com" target="_blank" class="font-semibold hover:underline" style="color: #e24545;">
-              Tootaio Studio
-            </a>
-            <span class="mt-1 text-sm text-gray-400">2018 级毕业学长（麦祖奕）</span>
-          </p>
-        </div>
-
-        <div class="flex space-x-4 mt-3 md:mt-0">
-          <a href="#">
-            <Icon name="mdi-facebook" />
-          </a>
-          <a href="#">
-            <Icon name="mdi-instagram" />
-          </a>
-          <a href="#">
-            <Icon name="mdi-gmail" />
-          </a>
-        </div>
-      </div>
-    </footer>
-  </div>
+      <template #right>
+        <a href="#">
+          <Icon name="mdi-facebook" />
+        </a>
+        <a href="#">
+          <Icon name="mdi-instagram" />
+        </a>
+        <a href="#">
+          <Icon name="mdi-gmail" />
+        </a>
+      </template>
+    </UFooter>
+  </UPage>
 </template>
+
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const route = useRoute();
+
+const items = computed<NavigationMenuItem[]>(() => [
+  { label: "新闻", to: "#news", active: route.path.startsWith("#news") },
+  { label: "活动", to: "#events", active: route.path.startsWith("#events") },
+  { label: "捐赠", to: "#donate", active: route.path.startsWith("#donate") },
+  { label: "关于", to: "#about", active: route.path.startsWith("#about") },
+]);
+</script>