feat(ui): implement responsive header and update content

Adds a responsive header with a mobile navigation menu to improve usability on small screens. This also includes adding a new event page, updating an existing event with a schedule, and refactoring the 'Donate' CTA by
inlining it on the homepage.

app/components/index/Donate.vue

@@ -1,14 +0,0 @@
-<template>
-  <UPageCTA
-    class="bg-secondary"
-    title="支持与捐赠"
-    description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
-    :links="donationLinks"
-  />
-</template>
-
-<script lang="ts" setup>
-const donationLinks = ref([{ label: "立即捐赠", icon: "mdi:cash" }]);
-</script>
-
-<style></style>

app/components/index/Events.vue

@@ -1,28 +1,31 @@
 <template>
   <!-- 活动模块 -->
   <UPageSection title="校友活动" class="bg-gray-100">
-    <div class="grid md:grid-cols-3 gap-6">
+    <UPageGrid>
       <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" />
+        <img
+          :src="event.cover"
+          :alt="event.title"
+          class="w-full aspect-[16/9] object-cover rounded-t-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"/>
+          <UButton
+            label="阅读详情"
+            :to="event.path"
+            trailing-icon="mdi:book-open-blank-variant-outline"
+          />
         </div>
       </div>
-    </div>
+    </UPageGrid>
   </UPageSection>
 </template>