wip

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

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import { getPostBySlug } from '@/lib/blog';
+import { getPostBySlug, getAdjacentPosts } from '@/lib/blog';
 
 interface BlogPostProps {
   params: {
@@ -15,12 +15,21 @@ import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
 import Callout from '@/components/blog/Callout';
 import HighlightBox from '@/components/blog/HighlightBox';
 import Stats from '@/components/blog/Stats';
+import AnimatedImage from '@/components/blog/AnimatedImage';
+import ChatBubble from '@/components/blog/ChatBubble';
+import SplitHeading from '@/components/blog/SplitHeading';
+import PostNavigation from '@/components/blog/PostNavigation';
+import PowerCTA from '@/components/blog/PowerCTA';
 
 const components = {
   VisualLinkPreview,
   Callout,
   HighlightBox,
   Stats,
+  AnimatedImage,
+  ChatBubble,
+  PowerCTA,
+  SplitHeading,
   a: ({ href, children, ...props }: any) => {
     if (href?.startsWith('/')) {
       return (
@@ -45,17 +54,12 @@ const components = {
     );
   },
   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>
+    <AnimatedImage src={props.src} alt={props.alt} />
   ),
   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">
+    <SplitHeading {...props} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
       {children}
-    </h2>
+    </SplitHeading>
   ),
   h3: ({ children, ...props }: any) => (
     <h3 {...props} className="text-2xl font-bold text-text-primary mt-12 mb-4">
@@ -109,10 +113,43 @@ const components = {
       {children}
     </pre>
   ),
+  table: ({ children, ...props }: any) => (
+    <div className="my-8 overflow-x-auto rounded-lg border border-neutral-200 shadow-sm">
+      <table {...props} className="w-full text-left text-sm text-text-secondary">
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children, ...props }: any) => (
+    <thead {...props} className="bg-neutral-50 text-text-primary font-semibold border-b border-neutral-200">
+      {children}
+    </thead>
+  ),
+  tbody: ({ children, ...props }: any) => (
+    <tbody {...props} className="divide-y divide-neutral-200 bg-white">
+      {children}
+    </tbody>
+  ),
+  tr: ({ children, ...props }: any) => (
+    <tr {...props} className="hover:bg-neutral-50/50 transition-colors">
+      {children}
+    </tr>
+  ),
+  th: ({ children, ...props }: any) => (
+    <th {...props} className="px-6 py-4 whitespace-nowrap">
+      {children}
+    </th>
+  ),
+  td: ({ children, ...props }: any) => (
+    <td {...props} className="px-6 py-4">
+      {children}
+    </td>
+  ),
 };
 
 export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
   const post = await getPostBySlug(slug, locale);
+  const { prev, next } = await getAdjacentPosts(slug, locale);
 
   if (!post) {
     notFound();
@@ -194,29 +231,14 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
           </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>
+        {/* Power CTA */}
+        <PowerCTA locale={locale} />
+
+        {/* Post Navigation */}
+        <PostNavigation prev={prev} next={next} locale={locale} />
 
         {/* Back to blog link */}
-        <div className="mt-12 pt-8 border-t border-neutral-dark/20">
+        <div className="mt-12 pt-8 border-t border-neutral-dark/20 text-center">
           <Link
             href={`/${locale}/blog`}
             className="inline-flex items-center gap-2 text-primary hover:underline font-medium text-lg group"
@@ -224,7 +246,7 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
             <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'}
+            {locale === 'de' ? 'Zurück zur Übersicht' : 'Back to Overview'}
           </Link>
         </div>
       </div>