wip

components/blog/AnimatedImage.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+interface AnimatedImageProps {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+  className?: string;
+  priority?: boolean;
+}
+
+export default function AnimatedImage({
+  src,
+  alt,
+  width = 800,
+  height = 600,
+  className = '',
+  priority = false,
+}: AnimatedImageProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isInView, setIsInView] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`relative overflow-hidden rounded-xl shadow-lg my-12 ${className}`}
+    >
+      <Image
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        className={`
+          duration-1000 ease-out w-full h-auto
+          ${isLoaded && isInView ? 'scale-100 blur-0 opacity-100' : 'scale-110 blur-xl opacity-0'}
+        `}
+        onLoad={() => setIsLoaded(true)}
+        priority={priority}
+      />
+      {alt && (
+        <p className="text-sm text-text-secondary text-center mt-3 italic px-4 pb-4">
+          {alt}
+        </p>
+      )}
+    </div>
+  );
+}

components/blog/ChatBubble.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface ChatBubbleProps {
+  author?: string;
+  avatar?: string;
+  role?: string;
+  children: React.ReactNode;
+  align?: 'left' | 'right';
+}
+
+export default function ChatBubble({
+  author = 'KLZ Team',
+  avatar = '/uploads/2024/11/cropped-favicon-3-192x192.png', // Default fallback
+  role = 'Assistant',
+  children,
+  align = 'left',
+}: ChatBubbleProps) {
+  const isRight = align === 'right';
+
+  return (
+    <div className={`flex w-full gap-4 my-10 ${isRight ? 'flex-row-reverse' : 'flex-row'}`}>
+      {/* Avatar */}
+      <div className="flex-shrink-0 flex flex-col items-center gap-1">
+        <div className="w-10 h-10 rounded-full overflow-hidden border border-neutral-200 shadow-sm relative">
+           {/* Use a simple div placeholder if image fails or isn't provided, but here we assume a path */}
+           <div className="w-full h-full bg-neutral-100 flex items-center justify-center text-xs font-bold text-neutral-400">
+             {author.charAt(0)}
+           </div>
+           {avatar && (
+             <Image 
+               src={avatar} 
+               alt={author} 
+               fill 
+               className="object-cover"
+             />
+           )}
+        </div>
+      </div>
+
+      {/* Message Bubble */}
+      <div className={`flex flex-col max-w-[85%] ${isRight ? 'items-end' : 'items-start'}`}>
+        <div className="flex items-baseline gap-2 mb-1">
+          <span className="text-sm font-bold text-text-primary">{author}</span>
+          {role && <span className="text-xs text-text-secondary">{role}</span>}
+        </div>
+        
+        <div className={`
+          relative px-6 py-4 rounded-2xl shadow-sm border
+          ${isRight 
+            ? 'bg-primary text-white rounded-tr-none border-primary' 
+            : 'bg-white text-text-primary rounded-tl-none border-neutral-200'
+          }
+        `}>
+          <div className={`prose prose-sm max-w-none ${isRight ? 'prose-invert' : ''}`}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/blog/PostNavigation.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import Link from 'next/link';
+import { PostMdx } from '@/lib/blog';
+
+interface PostNavigationProps {
+  prev: PostMdx | null;
+  next: PostMdx | null;
+  locale: string;
+}
+
+export default function PostNavigation({ prev, next, locale }: PostNavigationProps) {
+  if (!prev && !next) return null;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 w-full mt-16">
+      {/* Previous Post (Older) */}
+      {prev ? (
+        <Link 
+          href={`/${locale}/blog/${prev.slug}`}
+          className="group relative h-64 md:h-80 overflow-hidden block"
+        >
+          {/* Background Image */}
+          {prev.frontmatter.featuredImage ? (
+            <div 
+              className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
+              style={{ backgroundImage: `url(${prev.frontmatter.featuredImage})` }}
+            />
+          ) : (
+            <div className="absolute inset-0 bg-neutral-100" />
+          )}
+          
+          {/* Overlay */}
+          <div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />
+          
+          {/* Content */}
+          <div className="absolute inset-0 flex flex-col justify-center p-8 md:p-12 text-white z-10">
+            <span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
+              {locale === 'de' ? 'Vorheriger Beitrag' : 'Previous Post'}
+            </span>
+            <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
+              {prev.frontmatter.title}
+            </h3>
+          </div>
+          
+          {/* Arrow Icon */}
+          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+          </div>
+        </Link>
+      ) : (
+        <div className="hidden md:block bg-neutral-50" />
+      )}
+
+      {/* Next Post (Newer) */}
+      {next ? (
+        <Link 
+          href={`/${locale}/blog/${next.slug}`}
+          className="group relative h-64 md:h-80 overflow-hidden block"
+        >
+          {/* Background Image */}
+          {next.frontmatter.featuredImage ? (
+            <div 
+              className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
+              style={{ backgroundImage: `url(${next.frontmatter.featuredImage})` }}
+            />
+          ) : (
+            <div className="absolute inset-0 bg-neutral-100" />
+          )}
+          
+          {/* Overlay */}
+          <div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />
+          
+          {/* Content */}
+          <div className="absolute inset-0 flex flex-col justify-center items-end text-right p-8 md:p-12 text-white z-10">
+            <span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
+              {locale === 'de' ? 'Nächster Beitrag' : 'Next Post'}
+            </span>
+            <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
+              {next.frontmatter.title}
+            </h3>
+          </div>
+          
+          {/* Arrow Icon */}
+          <div className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:translate-x-2 transition-all duration-300">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+        </Link>
+      ) : (
+        <div className="hidden md:block bg-neutral-50" />
+      )}
+    </div>
+  );
+}

components/blog/PowerCTA.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Link from 'next/link';
+
+interface PowerCTAProps {
+  locale: string;
+}
+
+export default function PowerCTA({ locale }: PowerCTAProps) {
+  const isDe = locale === 'de';
+
+  return (
+    <div className="my-12 p-8 md:p-10 bg-white rounded-xl shadow-lg border border-neutral-100 relative overflow-hidden">
+      {/* Decorative background element */}
+      <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-full -mr-10 -mt-10" />
+      
+      <div className="relative z-10">
+        <h3 className="text-2xl font-bold text-text-primary mb-4 flex items-center gap-3">
+          <span className="text-3xl">💡</span>
+          {isDe ? 'Benötigen Sie Strom?' : 'Need power?'} 
+          <span className="text-primary">{isDe ? 'Wir sind für Sie da!' : "We've got you covered!"}</span>
+        </h3>
+        
+        <p className="text-lg text-text-secondary mb-6 leading-relaxed">
+          {isDe 
+            ? 'Von der Planung von Wind- und Solarparks bis zur Lieferung hochwertiger Energiekabel wie NA2XS(F)2Y, NAYY und NA2XY erwecken wir Energienetze zum Leben.'
+            : 'From wind and solar park planning to delivering high-quality energy cables like NA2XS(F)2Y, NAYY, and NA2XY, we bring energy networks to life.'
+          }
+        </p>
+        
+        <ul className="space-y-2 mb-8">
+          {[
+            isDe ? 'Schnelle Lieferung dank unseres strategischen Hubs.' : 'Fast delivery thanks to our strategic hub.',
+            isDe ? 'Nachhaltige Lösungen für eine grünere Zukunft.' : 'Sustainable solutions for a greener tomorrow.',
+            isDe ? 'Vertraut von Branchenführern in Deutschland, Österreich und den Niederlanden.' : 'Trusted by industry leaders in Germany, Austria and the Netherlands.'
+          ].map((item, i) => (
+            <li key={i} className="flex items-start gap-2 text-text-secondary">
+              <span className="text-green-500 mt-1">✅</span>
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+        
+        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
+          <p className="font-medium text-text-primary">
+            {isDe ? 'Lassen Sie uns gemeinsam eine grünere Zukunft gestalten.' : "Let's power a greener future together."}
+          </p>
+          <Link
+            href={`/${locale}/contact`}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-all shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
+          >
+            {isDe ? '👉 Kontakt aufnehmen' : '👉 Get in touch'}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

components/blog/SplitHeading.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+interface SplitHeadingProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function SplitHeading({ children, className = '' }: SplitHeadingProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div 
+      ref={elementRef}
+      className={`transform transition-all duration-1000 ease-out ${
+        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+      } ${className}`}
+    >
+      <h3 className="text-2xl md:text-3xl font-bold leading-tight text-text-primary">
+        {children}
+      </h3>
+    </div>
+  );
+}

components/blog/VisualLinkPreview.tsx

@@ -32,7 +32,13 @@ export default function VisualLinkPreview({ url, title, summary, image }: Visual
             {summary}
           </p>
           <span className="text-xs text-text-secondary mt-2 opacity-70">
-            {new URL(url).hostname}
+            {(() => {
+              try {
+                return new URL(url).hostname;
+              } catch (e) {
+                return url;
+              }
+            })()}
           </span>
         </div>
       </div>