wip

app/[locale]/blog/page.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
-import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 
 interface BlogIndexProps {
   params: {
@@ -8,38 +8,92 @@ interface BlogIndexProps {
   };
 }
 
+export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
+  const t = await getTranslations({ locale, namespace: 'blog' });
+  
+  return {
+    title: locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions',
+    description: locale === 'de'
+      ? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
+      : 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.',
+  };
+}
+
 export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
   const posts = await getAllPosts(locale);
+  const t = await getTranslations({ locale, namespace: 'blog' });
+
+  // Get unique categories
+  const categories = Array.from(new Set(posts.map(post => post.frontmatter.category).filter(Boolean)));
 
   return (
     <div className="container mx-auto px-4 py-12">
-      <h1 className="text-4xl font-bold text-primary mb-8">Blog</h1>
+      <div className="text-center mb-12">
+        <h1 className="text-4xl md:text-5xl font-bold text-primary mb-4">
+          {locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions'}
+        </h1>
+        <p className="text-lg text-text-secondary max-w-3xl mx-auto">
+          {locale === 'de'
+            ? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
+            : 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.'}
+        </p>
+      </div>
+
+      {/* Category filter - could be made interactive with client component */}
+      {categories.length > 0 && (
+        <div className="mb-8 flex flex-wrap gap-2 justify-center">
+          {categories.map((category) => (
+            <span
+              key={category}
+              className="px-4 py-2 bg-neutral-light text-text-primary rounded-full text-sm font-medium"
+            >
+              {category}
+            </span>
+          ))}
+        </div>
+      )}
       
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {/* Masonry-style grid */}
+      <div className="columns-1 md:columns-2 gap-8 space-y-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">
+          <Link
+            key={post.slug}
+            href={`/${locale}/blog/${post.slug}`}
+            className="group block break-inside-avoid mb-8"
+          >
+            <article className="bg-white rounded-lg shadow-sm overflow-hidden border border-neutral-dark transition-all hover:shadow-md hover:-translate-y-1">
               {post.frontmatter.featuredImage && (
-                <div className="aspect-video relative overflow-hidden">
-                  <img 
-                    src={post.frontmatter.featuredImage} 
+                <div className="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"
+                    className="w-full h-auto object-cover transition-transform group-hover:scale-105"
                   />
+                  {post.frontmatter.category && (
+                    <span className="absolute top-4 left-4 px-3 py-1 bg-primary text-white text-xs font-medium rounded-full">
+                      {post.frontmatter.category}
+                    </span>
+                  )}
                 </div>
               )}
-              <div className="p-6 flex flex-col flex-grow">
+              <div className="p-6">
                 <div className="text-sm text-text-secondary mb-2">
-                  {new Date(post.frontmatter.date).toLocaleDateString(locale)}
+                  {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                  })}
                 </div>
-                <h2 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors">
+                <h2 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors line-clamp-2">
                   {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;
+                {post.frontmatter.excerpt && (
+                  <p className="text-text-secondary line-clamp-3 mb-4">
+                    {post.frontmatter.excerpt}
+                  </p>
+                )}
+                <span className="text-primary font-medium group-hover:underline inline-flex items-center">
+                  {locale === 'de' ? 'Weiterlesen' : 'Read more'} →
                 </span>
               </div>
             </article>