<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>
