blog mvp completed

app/components/blog/BlogPost.vue

@@ -7,14 +7,29 @@ const props = defineProps<{
 
 const { formatDate, calculateReadingTime } = useBlog()
 const readingTime = computed(() => calculateReadingTime(props.post))
+
+// Image loading state
+const imageLoaded = ref(!!props.post.image)
+const handleImageError = () => {
+  imageLoaded.value = false
+}
 </script>
 
 <template>
   <article>
     <header class="mb-8">
       <!-- Cover Image -->
-      <NuxtImg v-if="post.image" :src="post.image" :alt="post.title" width="1200" height="630" format="webp"
-        class="w-full rounded-lg mb-6" />
+      <div v-if="post.image"
+        class="relative w-full aspect-video rounded-lg overflow-hidden mb-6 bg-gradient-to-br from-primary-500 to-primary-700 dark:from-primary-600 dark:to-primary-900">
+        <img v-if="imageLoaded" :src="post.image" :alt="post.title" class="w-full h-full object-cover"
+          @error="handleImageError" />
+        <div v-else class="flex h-full w-full items-center justify-center">
+          <div class="text-center text-white/90 p-8">
+            <UIcon name="i-heroicons-photo" class="mx-auto h-16 w-16 mb-3 opacity-80" />
+            <p class="text-lg font-medium">{{ post.title }}</p>
+          </div>
+        </div>
+      </div>
 
       <!-- Title -->
       <h1 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900 dark:text-gray-100">