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

@@ -1,7 +1,23 @@
 <template>
   <div>
-    <IndexHero />
-    <IndexNews />
+    <!-- Hero Banner -->
+    <UPageHero
+      class="bg-cover bg-center"
+      style="
+        background-image: url(&quot;/hero-image.jpg&quot;);
+        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent black */
+        background-blend-mode: lighten;
+      "
+      title="连接校友 · 传承精神"
+      description="马来西亚柔佛永平中学校友会官方网站"
+      :links="heroCta"
+    />
+
+    <!-- News Blog Posts -->
+    <UPageSection title="新闻与公告">
+      <UBlogPosts :posts="newsPost" />
+    </UPageSection>
+
     <IndexEvents />
     <IndexHallOfFame />
     <IndexDonate />
@@ -10,7 +26,41 @@
 </template>
 
 <script lang="ts" setup>
+import type { BlogPostProps, PageCardProps } from "@nuxt/ui";
 
+const heroCta = ref([
+  {
+    label: "立即加入我们",
+    to: "/join-us",
+    icon: "mdi:account-plus",
+  },
+]);
+
+// ========================================================
+// 新闻模块
+// ========================================================
+const { data: news } = await useAsyncData("news", () =>
+  queryCollection("news").order("date", "DESC").limit(3).all()
+);
+
+// 将 news 数据转换成 UBlogPosts 可用格式
+const newsPost = computed<BlogPostProps[]>(() =>
+  (news.value || []).map((n: any) => ({
+    title: n.title,
+    description: n.description,
+    image: n.cover,
+    date: n.date,
+    to: n.path, // ✅ 建议加路由跳转
+    variant: "subtle",
+  }))
+);
+
+// ========================================================
+// 活动模块
+// ========================================================
+const { data: events } = await useAsyncData("events", () =>
+  queryCollection("events").order("date", "DESC").limit(3).all()
+);
 </script>
 
-<style></style>
+<style></style>