1st

app/[locale]/blog/page.js

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getLandingContent, isSupportedLocale, locales } from "@/lib/site-data";
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export default async function BlogPage({ params }) {
+  const { locale } = await params;
+
+  if (!isSupportedLocale(locale)) {
+    notFound();
+  }
+
+  const { blogPosts, navigation, shared } = getLandingContent(locale);
+
+  return (
+    <main className="min-h-screen bg-brand-light text-gray-800">
+      <section className="mx-auto max-w-6xl px-6 py-16">
+        <Link href={`/${locale}`} className="text-sm font-semibold text-brand-purple">
+          {navigation.homeLabel}
+        </Link>
+        <h1 className="mt-4 text-4xl font-bold text-brand-dark">{navigation.blog}</h1>
+        <p className="mt-3 max-w-2xl text-gray-600">{shared.blogIntro}</p>
+        <div className="mt-12 grid gap-8 md:grid-cols-3">
+          {blogPosts.map((post) => (
+            <article key={post.slug} className="overflow-hidden rounded-2xl bg-white shadow-sm">
+              <div className="h-48 overflow-hidden">
+                <Image src={post.image} alt={post.title} width={800} height={600} className="h-full w-full object-cover transition duration-500 hover:scale-110" />
+              </div>
+              <div className="p-6">
+                <span className={`${post.tagClass} rounded px-2 py-1 text-xs font-bold`}>{post.tag}</span>
+                <h2 className="mt-4 text-xl font-bold">
+                  <Link href={`/${locale}/blog/${post.slug}`} className="transition hover:text-brand-purple">
+                    {post.title}
+                  </Link>
+                </h2>
+                <p className="mt-3 text-sm text-gray-600">{post.excerpt}</p>
+                <div className="mt-4 text-sm text-gray-500">{post.date}</div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}