feat(app): restructure to multi-page layout and add content pages

Converts the website from a single-page design with anchor links to a full multi-page application. This change improves site organization, navigation, and scalability.

- Adds new top-level pages: `/news`, `/events`, and `/about`.
- Introduces a new section for the 40th Anniversary at `/40th-anniversary`, including a proposal sub-page.
- Updates the default layout with a new navigation menu, a promotional banner, social links, and page transitions.

app/layouts/default.vue

@@ -1,12 +1,18 @@
 <template>
   <UPage>
+    <UBanner
+      title="永中校友会 40 周年庆典活动火热筹募中！"
+      icon="hugeicons:party"
+      close
+      :actions="bannerActions"
+    />
     <UHeader>
       <template #left>
         <NuxtLink to="/">
           <div class="flex gap-4 items-center">
             <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
             <h1
-              class="inline text-xl font-bold text-gray-900 hover:text-primary"
+              class="text-xl font-bold text-gray-900 hover:text-primary hidden md:inline"
             >
               永平中学校友会
             </h1>
@@ -14,17 +20,25 @@
         </NuxtLink>
       </template>
 
+      <template #default>
+        <UNavigationMenu :items="items" content-orientation="vertical" />
+      </template>
+
       <template #right>
-        <nav class="space-x-6 hidden md:flex items-center">
-          <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>
+        <UColorModeButton />
+        <UButton
+          v-for="link in socialLinks"
+          color="neutral"
+          variant="ghost"
+          v-bind="link"
+        />
+        <UButton
+          icon="line-md:account-add"
+          to="/join-us"
+          color="primary"
+          variant="solid"
+          label="加入"
+        />
       </template>
 
       <template #body>
@@ -37,7 +51,9 @@
     </UHeader>
 
     <UMain>
-      <slot />
+      <Transition name="page" mode="out-in">
+        <NuxtPage />
+      </Transition>
     </UMain>
 
     <UFooter>
@@ -61,29 +77,104 @@
       </template>
 
       <template #right>
-        <a href="#">
-          <Icon name="mdi-facebook" />
-        </a>
-        <a href="#">
-          <Icon name="mdi-instagram" />
-        </a>
-        <a href="#">
-          <Icon name="mdi-gmail" />
-        </a>
+        <UButton
+          v-for="link in socialLinks"
+          color="neutral"
+          variant="ghost"
+          v-bind="link"
+        />
       </template>
     </UFooter>
   </UPage>
 </template>
 
 <script setup lang="ts">
-import type { NavigationMenuItem } from "@nuxt/ui";
+import type { NavigationMenuItem, ButtonProps } from "@nuxt/ui";
 
 const route = useRoute();
 
+const bannerActions = ref<ButtonProps[]>([
+  {
+    label: "查看策划书",
+    variant: "outline",
+    icon: "lucide:arrow-right",
+    to: "/40th-anniversary/proposal",
+  },
+]);
+
 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") },
+  { label: "首页", to: "/" },
+  { label: "新闻", to: "/news", active: route.path.startsWith("/news") },
+  {
+    label: "活动",
+    to: "/events",
+    active: route.path.startsWith("/events"),
+    children: [
+      {
+        label: "40 周年庆",
+        to: "/40th-anniversary",
+        active: route.path.startsWith("/40th-anniversary"),
+        badge: {
+          label: "Hot",
+          color: "error",
+        },
+      },
+    ],
+  },
+  {
+    label: "关于校友会",
+    to: "/about",
+    active: route.path.startsWith("/about"),
+  },
+  {
+    label: "友情链接",
+    children: [
+      {
+        label: "永平中学官网",
+        icon: "mdi:book-education",
+        to: "https://yphs.edu.my/",
+        target: "_blank",
+      },
+      {
+        label: "桃李教育网",
+        icon: "mdi:web",
+        to: "https://efuxi.vtour.my/",
+        target: "_blank",
+      },
+      {
+        label: "董总 Dong Zong",
+        icon: "mdi:web",
+        to: "https://www.dongzong.my/",
+        target: "_blank",
+      },
+    ],
+  },
+  // { label: "捐赠", to: "#donate", active: route.path.startsWith("#donate") },
+  // { label: "关于", to: "#about", active: route.path.startsWith("#about") },
+]);
+
+const socialLinks = ref<ButtonProps[]>([
+  {
+    icon: "line-md:tiktok",
+    to: "https://www.tiktok.com/@yphs.alumni",
+    target: "_blank",
+  },
+  {
+    icon: "line-md:facebook",
+    to: "https://www.facebook.com/YPHS.Alumni/",
+    target: "_blank",
+  },
 ]);
 </script>
+
+<style lang="css" scoped>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>