1 files changed, 48 insertions, 0 deletions
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..76b9f57
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,48 @@
+---
+import StandardLayout from '../../layouts/StandardLayout.astro';
+import { getCollection } from 'astro:content';
+
+// Get all blog posts sorted by publication date
+const posts = await getCollection('blog');
+posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+---
+
+<StandardLayout title="Blog | Astro Site" description="Read our latest blog posts">
+  <div class="space-y-8">
+    <h1 class="text-3xl font-bold text-gray-900">Blog</h1>
+    
+    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+      {posts.map((post) => (
+        <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+          <a href={`/blog/${post.slug}`} class="block">
+            {post.data.image && (
+              <img 
+                src={post.data.image} 
+                alt={post.data.title} 
+                class="w-full h-48 object-cover"
+              />
+            )}
+            <div class="p-6">
+              <h2 class="text-xl font-semibold text-gray-900 mb-2">{post.data.title}</h2>
+              <p class="text-sm text-gray-500 mb-3">
+                {new Date(post.data.pubDate).toLocaleDateString('en-US', {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric'
+                })}
+              </p>
+              <p class="text-gray-700">{post.data.description}</p>
+              <p class="mt-4 text-blue-600 font-medium">Read more →</p>
+            </div>
+          </a>
+        </article>
+      ))}
+    </div>
+    
+    {posts.length === 0 && (
+      <div class="bg-white rounded-lg shadow p-6 text-center">
+        <p class="text-gray-700">No blog posts found. Check back soon!</p>
+      </div>
+    )}
+  </div>
+</StandardLayout>