分离blog和docs的布局

app/components/blog/BlogHero.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="relative w-full h-64 md:h-80 lg:h-96 overflow-hidden rounded-xl">
+    <!-- 背景图片 -->
+    <NuxtImg
+      src="https://lijue-me.oss-cn-chengdu.aliyuncs.com/%E8%83%8C%E6%99%AF.jpg"
+      alt="Blog Hero"
+      class="w-full h-full object-cover"
+      placeholder
+      loading="lazy"
+      sizes="100vw sm:50vw md:33vw"
+    />
+    
+    <!-- 渐变遮罩 -->
+    <!-- <div class="absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-transparent"></div> -->
+    
+    <!-- 内容区域 -->
+    <!-- <div class="absolute inset-0 flex items-center justify-start p-8">
+      <div class="max-w-2xl">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
+          博客文章
+        </h1>
+        <p class="text-lg md:text-xl text-gray-200 mb-6">
+          分享技术见解和心得体会
+        </p>
+        <div class="flex items-center gap-4 text-white/80">
+          <div class="flex items-center gap-2">
+            <UIcon name="lucide-pen-tool" size="20" />
+            <span class="text-sm">技术分享</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <UIcon name="lucide-calendar" size="20" />
+            <span class="text-sm">持续更新</span>
+          </div>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+