clone init

app/[locale]/blog/page.tsx

@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import { getAllPosts } from '@/lib/blog';
+import { useTranslations } from 'next-intl';
+
+interface BlogIndexProps {
+  params: {
+    locale: string;
+  };
+}
+
+export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
+  const posts = await getAllPosts(locale);
+
+  return (
+    <div className="container mx-auto px-4 py-12">
+      <h1 className="text-4xl font-bold text-primary mb-8">Blog</h1>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {posts.map((post) => (
+          <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group">
+            <article className="bg-white rounded-lg shadow-sm overflow-hidden border border-neutral-dark h-full flex flex-col transition-transform hover:-translate-y-1">
+              {post.frontmatter.featuredImage && (
+                <div className="aspect-video relative overflow-hidden">
+                  <img 
+                    src={post.frontmatter.featuredImage} 
+                    alt={post.frontmatter.title}
+                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
+                  />
+                </div>
+              )}
+              <div className="p-6 flex flex-col flex-grow">
+                <div className="text-sm text-text-secondary mb-2">
+                  {new Date(post.frontmatter.date).toLocaleDateString(locale)}
+                </div>
+                <h2 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors">
+                  {post.frontmatter.title}
+                </h2>
+                <p className="text-text-secondary line-clamp-3 mb-4 flex-grow">
+                  {post.frontmatter.excerpt}
+                </p>
+                <span className="text-primary font-medium group-hover:underline">
+                  Read more &rarr;
+                </span>
+              </div>
+            </article>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}