留言板背景图

Author: CatCodeMe

src/assets/msgboard/board.png

@@ -1,21 +1,33 @@
 ---
+import { Image } from 'astro:assets';
 import MsgboardLayout from '@/layouts/MsgboardLayout.astro'
 import DanmakuComments from '@/components/waline/DanmakuComments.astro'
+import bannerImage from '@/assets/msgboard/board.png';
+
+const meta = {
+  title: '留言板',
+  description: '欢迎分享你的故事与想法, 请友善交流, 尊重彼此.'
+}
 ---
 
-<MsgboardLayout info={{ slug: '/msgboard' }}>
-  <div class="flex items-center justify-center gap-8 max-w-3xl mx-auto">
-    <!-- <Image
-      src={commentFlag}
-      alt="comment"
-      class="w-48 flex-shrink-0"
-      loading="eager"
-    /> -->
-    <div class="text-left">
-      <p class="text-xl font-semibold">留言板守则</p>
-      <p class="text-lg mt-2 text-muted-foreground">欢迎分享你的故事、想法和新鲜事，也欢迎留下你的足迹。</p>
-      <p class="text-lg mt-2 text-muted-foreground">请友善交流，文明发言，尊重彼此，拒绝恶意评论。</p>
-      <p class="text-lg mt-2 text-muted-foreground">让这里成为温暖、轻松、友爱的交流空间，期待你的声音！</p>
+<MsgboardLayout info={{ slug: '/msgboard' }} >
+  <div id="content-header" class="animate relative w-full overflow-hidden rounded-lg shadow-lg mb-8 aspect-[3/1] md:aspect-[4/1]">
+    <!-- Optimized Image as Background -->
+    <Image src={bannerImage} alt="留言板横幅" class="absolute inset-0 z-0 w-full h-full object-cover object-center" />
+    
+    <!-- Gradient Overlay -->
+    <div class="absolute inset-0 z-10 bg-gradient-to-r from-black/60 via-black/30 to-transparent"></div>
+    
+    <!-- Text Content -->
+    <div class="relative z-20 flex h-full flex-col justify-center p-6 md:p-8 md:w-3/4 lg:w-2/3">
+      <div class="flex items-start gap-3">
+        <div>
+          <h1 class="text-3xl font-bold text-white">{meta.title}</h1>
+          <p class="mt-2 text-white/80">
+            {meta.description}
+          </p>
+        </div>
+      </div>
     </div>
   </div>