feat: migration von directus zu payloadcms

components/Footer.tsx

@@ -38,6 +38,7 @@ export default function Footer() {
                 alt="KLZ Vertriebs GmbH"
                 width={150}
                 height={40}
+                style={{ width: 'auto' }}
                 className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
               />
             </Link>
@@ -246,7 +247,6 @@ export default function Footer() {
           <div className="flex gap-8">
             <Link
               href="/en"
-              locale="en"
               className="hover:text-white transition-colors"
               onClick={() =>
                 trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
@@ -261,7 +261,6 @@ export default function Footer() {
             </Link>
             <Link
               href="/de"
-              locale="de"
               className="hover:text-white transition-colors"
               onClick={() =>
                 trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {

components/Header.tsx

@@ -84,11 +84,47 @@ export default function Header() {
     }
   }, [isMobileMenuOpen]);
 
-  // Function to get path for a different locale
+  // Function to get path for a different locale with segment translation
   const getPathForLocale = (newLocale: string) => {
     const segments = pathname.split('/');
+    const originLocale = segments[1] || 'en';
+
+    // Translation map for localized URL segments
+    const segmentMap: Record<string, Record<string, string>> = {
+      de: {
+        produkte: 'products',
+        impressum: 'legal-notice',
+        datenschutz: 'privacy-policy',
+        agbs: 'terms',
+        niederspannungskabel: 'low-voltage-cables',
+        mittelspannungskabel: 'medium-voltage-cables',
+        hochspannungskabel: 'high-voltage-cables',
+        solarkabel: 'solar-cables',
+      },
+      en: {
+        products: 'produkte',
+        'legal-notice': 'impressum',
+        'privacy-policy': 'datenschutz',
+        terms: 'agbs',
+        'low-voltage-cables': 'niederspannungskabel',
+        'medium-voltage-cables': 'mittelspannungskabel',
+        'high-voltage-cables': 'hochspannungskabel',
+        'solar-cables': 'solarkabel',
+      },
+    };
+
+    // Replace the locale segment
     segments[1] = newLocale;
-    return segments.join('/');
+
+    // Translate other segments if they exist in our map
+    const translatedSegments = segments.map((segment, index) => {
+      if (index <= 1) return segment; // Skip empty and locale segments
+
+      const mapping = segmentMap[originLocale as keyof typeof segmentMap];
+      return mapping && mapping[segment] ? mapping[segment] : segment;
+    });
+
+    return translatedSegments.join('/');
   };
 
   const menuItems = [
@@ -132,6 +168,7 @@ export default function Header() {
                 alt={t('home')}
                 width={120}
                 height={120}
+                style={{ width: 'auto' }}
                 className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
                 priority
               />

components/PayloadRichText.tsx

@@ -19,7 +19,25 @@ import ProductTechnicalData from '@/components/ProductTechnicalData';
 
 const jsxConverters: JSXConverters = {
   ...defaultJSXConverters,
+  // Let the default converters handle text nodes to preserve valid formatting
+  // If the text node contains raw HTML (from messy migrations), render it as HTML instead of escaping it
+  text: ({ node }: any) => {
+    const text = node.text;
+    if (text && (text.includes('<') || text.includes('data-start'))) {
+      return <span dangerouslySetInnerHTML={{ __html: text }} />;
+    }
+
+    if (node.format === 1) return <strong>{text}</strong>;
+    if (node.format === 2) return <em>{text}</em>;
+    return <span>{text}</span>;
+  },
+  // Scale headings to prevent multiple H1s (H1 -> H2, etc)
+  h1: ({ children }: any) => <h2 className="text-3xl md:text-4xl font-bold my-6">{children}</h2>,
+  h2: ({ children }: any) => <h3 className="text-2xl md:text-3xl font-bold my-5">{children}</h3>,
+  h3: ({ children }: any) => <h4 className="text-xl md:text-2xl font-bold my-4">{children}</h4>,
+
   blocks: {
+    // ... preserved existing blocks ...
     // Map the custom Payload Blocks created in src/payload/blocks to their React components
     // Payload Lexical exposes blocks using the 'block-[slug]' pattern
     stickyNarrative: ({ node }: any) => (

components/blog/AnimatedImage.tsx

@@ -34,7 +34,7 @@ export default function AnimatedImage({
           }
         });
       },
-      { threshold: 0.1 }
+      { threshold: 0.1 },
     );
 
     if (containerRef.current) {
@@ -45,15 +45,17 @@ export default function AnimatedImage({
   }, []);
 
   return (
-    <div 
+    <div
       ref={containerRef}
       className={`relative overflow-hidden rounded-2xl shadow-2xl my-16 group ${className}`}
     >
-      <div className={`
+      <div
+        className={`
         absolute inset-0 bg-primary/10 z-10 pointer-events-none transition-opacity duration-1000
         ${isLoaded && isInView ? 'opacity-0' : 'opacity-100'}
-      `} />
-      
+      `}
+      />
+
       <Image
         src={src}
         alt={alt}
@@ -67,17 +69,9 @@ export default function AnimatedImage({
         onLoad={() => setIsLoaded(true)}
         priority={priority}
       />
-      
+
       {/* Subtle reflection overlay */}
       <div className="absolute inset-0 bg-gradient-to-tr from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
-      
-      {alt && (
-        <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/60 to-transparent translate-y-full group-hover:translate-y-0 transition-transform duration-500">
-          <p className="text-sm text-white font-medium italic">
-            {alt}
-          </p>
-        </div>
-      )}
     </div>
   );
 }