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