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/components/index/Events.vue

@@ -1,32 +1,35 @@
 <template>
-  <div>
-    <!-- 活动模块 -->
-    <section id="events" class="bg-gray-100 py-16">
-      <div class="max-w-6xl mx-auto px-4">
-        <h3 class="text-2xl font-bold text-gray-900 mb-6">校友活动</h3>
-        <div class="grid md:grid-cols-3 gap-6">
-          <div v-for="event in events" :key="event.id" class="bg-white shadow rounded-xl">
-            <img :src="event.cover" :alt="event.title" class="rounded-xl" />
-            <div class="p-6">
-              <h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
-              <p class="text-sm text-gray-600 mb-1">日期：{{ useChineseDateFormat(event.date) }}</p>
-              <p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
-              <a :href="event.path" class="bg-primary text-white px-5 py-2 rounded-lg hover:opacity-90">阅读详情</a>
-            </div>
-          </div>
+  <!-- 活动模块 -->
+  <UPageSection title="校友活动" class="bg-gray-100">
+    <div class="grid md:grid-cols-3 gap-6">
+      <div
+        v-for="event in events"
+        :key="event.id"
+        class="bg-white shadow rounded-xl"
+      >
+        <img :src="event.cover" :alt="event.title" class="rounded-xl" />
+        <div class="p-6">
+          <h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
+          <p class="text-sm text-gray-600 mb-1">
+            日期：{{ useChineseDateFormat(event.date) }}
+          </p>
+          <p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
+          <!-- <a
+            :href="event.path"
+            class="bg-primary text-white px-5 py-2 rounded-lg hover:opacity-90"
+            >阅读详情</a
+          > -->
+          <UButton label="阅读详情" :to="event.path" trailing-icon="mdi:glasses"/>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </UPageSection>
 </template>
 
 <script lang="ts" setup>
-const { data: events } = await useAsyncData('events', () =>
-  queryCollection('events')
-    .order("date", "DESC")
-    .limit(3)
-    .all()
-)
+const { data: events } = await useAsyncData("events", () =>
+  queryCollection("events").order("date", "DESC").limit(3).all()
+);
 </script>
 
-<style></style>
+<style></style>