wip

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

@@ -9,6 +9,108 @@ interface BlogPostProps {
   };
 }
 
+import Link from 'next/link';
+import Image from 'next/image';
+import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
+import Callout from '@/components/blog/Callout';
+import HighlightBox from '@/components/blog/HighlightBox';
+import Stats from '@/components/blog/Stats';
+
+const components = {
+  VisualLinkPreview,
+  Callout,
+  HighlightBox,
+  Stats,
+  a: ({ href, children, ...props }: any) => {
+    if (href?.startsWith('/')) {
+      return (
+        <Link href={href} {...props} className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all">
+          {children}
+        </Link>
+      );
+    }
+    return (
+      <a
+        href={href}
+        {...props}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all inline-flex items-center gap-1"
+      >
+        {children}
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        </svg>
+      </a>
+    );
+  },
+  img: (props: any) => (
+    <div className="my-12">
+      <img {...props} className="rounded-xl shadow-lg max-w-full h-auto mx-auto" />
+      {props.alt && (
+        <p className="text-sm text-text-secondary text-center mt-3 italic">{props.alt}</p>
+      )}
+    </div>
+  ),
+  h2: ({ children, ...props }: any) => (
+    <h2 {...props} className="text-3xl font-bold text-text-primary mt-16 mb-6 pb-3 border-b-2 border-primary/20">
+      {children}
+    </h2>
+  ),
+  h3: ({ children, ...props }: any) => (
+    <h3 {...props} className="text-2xl font-bold text-text-primary mt-12 mb-4">
+      {children}
+    </h3>
+  ),
+  p: ({ children, ...props }: any) => (
+    <p {...props} className="text-lg text-text-secondary leading-relaxed mb-6">
+      {children}
+    </p>
+  ),
+  ul: ({ children, ...props }: any) => (
+    <ul {...props} className="my-8 space-y-3">
+      {children}
+    </ul>
+  ),
+  ol: ({ children, ...props }: any) => (
+    <ol {...props} className="my-8 space-y-3 list-decimal list-inside">
+      {children}
+    </ol>
+  ),
+  li: ({ children, ...props }: any) => (
+    <li {...props} className="text-lg text-text-secondary flex items-start gap-3">
+      <span className="text-primary mt-1.5 flex-shrink-0">
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+        </svg>
+      </span>
+      <span className="flex-1">{children}</span>
+    </li>
+  ),
+  blockquote: ({ children, ...props }: any) => (
+    <blockquote {...props} className="my-8 pl-6 border-l-4 border-primary bg-neutral-light/30 py-4 pr-6 rounded-r-lg">
+      <div className="text-lg text-text-primary italic">
+        {children}
+      </div>
+    </blockquote>
+  ),
+  strong: ({ children, ...props }: any) => (
+    <strong {...props} className="font-bold text-primary">
+      {children}
+    </strong>
+  ),
+  code: ({ children, ...props }: any) => (
+    <code {...props} className="px-2 py-1 bg-neutral-light text-primary rounded font-mono text-sm">
+      {children}
+    </code>
+  ),
+  pre: ({ children, ...props }: any) => (
+    <pre {...props} className="my-8 p-6 bg-neutral-dark/5 rounded-xl overflow-x-auto">
+      {children}
+    </pre>
+  ),
+};
+
 export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
   const post = await getPostBySlug(slug, locale);
 
@@ -17,31 +119,114 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
   }
 
   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'
-          })}
+    <article className="bg-gradient-to-b from-neutral-light/30 to-white min-h-screen">
+      {/* Featured Image Header */}
+      {post.frontmatter.featuredImage && (
+        <div className="relative w-full h-[300px] md:h-[500px] overflow-hidden">
+          <img
+            src={post.frontmatter.featuredImage}
+            alt={post.frontmatter.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
+          
+          {/* Title overlay on image */}
+          <div className="absolute bottom-0 left-0 right-0 p-8 md:p-12">
+            <div className="container mx-auto max-w-4xl">
+              {post.frontmatter.category && (
+                <span className="inline-block px-4 py-2 bg-primary text-white text-sm font-medium rounded-full mb-4">
+                  {post.frontmatter.category}
+                </span>
+              )}
+              <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold text-white mb-4 leading-tight drop-shadow-lg">
+                {post.frontmatter.title}
+              </h1>
+              <time dateTime={post.frontmatter.date} className="text-white/90 text-sm md:text-base">
+                {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric'
+                })}
+              </time>
+            </div>
+          </div>
         </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"
-            />
+      )}
+
+      {/* Content */}
+      <div className="container mx-auto px-4 py-12 md:py-16 max-w-4xl">
+        {/* If no featured image, show header here */}
+        {!post.frontmatter.featuredImage && (
+          <header className="mb-12">
+            {post.frontmatter.category && (
+              <div className="mb-4">
+                <span className="inline-block px-4 py-2 bg-primary text-white text-sm font-medium rounded-full">
+                  {post.frontmatter.category}
+                </span>
+              </div>
+            )}
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-text-primary mb-6 leading-tight">
+              {post.frontmatter.title}
+            </h1>
+            <time dateTime={post.frontmatter.date} className="text-text-secondary">
+              {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+              })}
+            </time>
+          </header>
+        )}
+
+        {/* Excerpt/Lead paragraph if available */}
+        {post.frontmatter.excerpt && (
+          <div className="mb-12 p-6 md:p-8 bg-white rounded-xl shadow-sm border-l-4 border-primary">
+            <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-light">
+              {post.frontmatter.excerpt}
+            </p>
           </div>
         )}
-      </header>
 
-      <div className="prose prose-lg max-w-none">
-        <MDXRemote source={post.content} />
+        {/* Main content with enhanced styling */}
+        <div className="bg-white rounded-xl shadow-sm p-6 md:p-10">
+          <div className="prose prose-lg max-w-none">
+            <MDXRemote source={post.content} components={components} />
+          </div>
+        </div>
+
+        {/* Call to action section */}
+        <div className="mt-12 p-8 bg-gradient-to-r from-primary/10 to-primary/5 rounded-xl border border-primary/20">
+          <h3 className="text-2xl font-bold text-text-primary mb-4">
+            {locale === 'de' ? 'Haben Sie Fragen?' : 'Have questions?'}
+          </h3>
+          <p className="text-text-secondary mb-6">
+            {locale === 'de'
+              ? 'Unser Team steht Ihnen gerne zur Verfügung. Kontaktieren Sie uns für weitere Informationen zu unseren Kabellösungen.'
+              : 'Our team is happy to help. Contact us for more information about our cable solutions.'}
+          </p>
+          <Link
+            href={`/${locale}/contact`}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors"
+          >
+            {locale === 'de' ? 'Kontakt aufnehmen' : 'Get in touch'}
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+            </svg>
+          </Link>
+        </div>
+
+        {/* Back to blog link */}
+        <div className="mt-12 pt-8 border-t border-neutral-dark/20">
+          <Link
+            href={`/${locale}/blog`}
+            className="inline-flex items-center gap-2 text-primary hover:underline font-medium text-lg group"
+          >
+            <svg className="w-5 h-5 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            {locale === 'de' ? 'Zurück zum Blog' : 'Back to Blog'}
+          </Link>
+        </div>
       </div>
     </article>
   );

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>