clone init

app/[locale]/blog/[slug]/page.tsx

@@ -0,0 +1,48 @@
+import { notFound } from 'next/navigation';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import { getPostBySlug } from '@/lib/blog';
+
+interface BlogPostProps {
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
+  const post = await getPostBySlug(slug, locale);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <article className="container mx-auto px-4 py-12 max-w-4xl">
+      <header className="mb-8 text-center">
+        <div className="text-text-secondary mb-4">
+          {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+          })}
+        </div>
+        <h1 className="text-4xl md:text-5xl font-bold text-primary mb-6">
+          {post.frontmatter.title}
+        </h1>
+        {post.frontmatter.featuredImage && (
+          <div className="aspect-video relative rounded-xl overflow-hidden shadow-lg mb-8">
+            <img 
+              src={post.frontmatter.featuredImage} 
+              alt={post.frontmatter.title}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        )}
+      </header>
+
+      <div className="prose prose-lg max-w-none">
+        <MDXRemote source={post.content} />
+      </div>
+    </article>
+  );
+}

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>
+  );
+}