Enhance 404 handling in webpack configuration with async middleware for prerendering. Updated NotFound404 page to improve user experience with localized messaging and responsive image styling. Added taxonomy ID mappings in feeds.cjs for better compliance and clarity in product categorization.

src/PrerenderNotFound.js

@@ -0,0 +1,92 @@
+const React = require('react');
+const { 
+  Box, 
+  AppBar, 
+  Toolbar, 
+  Container 
+} = require('@mui/material');
+const Footer = require('./components/Footer.js').default;
+const { Logo } = require('./components/header/index.js');
+const NotFound404 = require('./pages/NotFound404.js').default;
+
+class PrerenderNotFound extends React.Component {
+  render() {
+    return React.createElement(
+      Box,
+      {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100vh',
+          mb: 0,
+          pb: 0,
+          bgcolor: 'background.default'
+        }
+      },
+      React.createElement(
+        AppBar,
+        { position: 'sticky', color: 'primary', elevation: 0, sx: { zIndex: 1100 } },
+        React.createElement(
+          Toolbar,
+          { sx: { minHeight: 64, py: { xs: 0.5, sm: 0 } } },
+          React.createElement(
+            Container,
+            { 
+              maxWidth: 'lg', 
+              sx: { 
+                display: 'flex', 
+                alignItems: 'center',
+                px: { xs: 0, sm: 3 }
+              } 
+            },
+            React.createElement(
+              Box,
+              { sx: { 
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  width: '100%',
+                  flexDirection: { xs: 'column', sm: 'row' }
+                } 
+              },
+              React.createElement(
+                Box,
+                { sx: { 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    width: '100%',
+                    justifyContent: { xs: 'space-between', sm: 'flex-start' },
+                    minHeight: { xs: 52, sm: 'auto' },
+                    px: { xs: 0, sm: 0 }
+                  } 
+                },
+                React.createElement(Logo)
+              ),
+              // Reserve space for SearchBar on mobile (invisible placeholder)
+              React.createElement(
+                Box,
+                { sx: { 
+                    display: { xs: 'block', sm: 'none' }, 
+                    width: '100%',
+                    mt: { xs: 1, sm: 0 },
+                    mb: { xs: 0.5, sm: 0 },
+                    px: { xs: 0, sm: 0 },
+                    height: 40, // Reserve space for SearchBar
+                    opacity: 0 // Invisible placeholder
+                  } 
+                }
+              )
+            )
+          )
+        )
+      ),
+      React.createElement(
+        Box,
+        { sx: { flexGrow: 1 } },
+        React.createElement(NotFound404)
+      ),
+      React.createElement(Footer)
+    );
+  }
+}
+
+module.exports = { default: PrerenderNotFound }; 

src/pages/NotFound404.js

@@ -16,19 +16,20 @@ const NotFound404 = () => {
           src="/assets/images/404.png"
           alt="404 - Page Not Found"
           style={{
+            width: '300px',
+            height: '300px',
             maxWidth: '100%',
-            height: 'auto',
-            maxHeight: '300px',
+            display: 'block',
           }}
         />
       </Box>
       <Typography variant="body1" paragraph align="center">
-        This page is no longer available.
+        Diese Seite scheint es nicht mehr zu geben.
       </Typography>
     </>
   );
 
-  return <LegalPage title="Page Not Found" content={content} />;
+  return <LegalPage content={content} />;
 };
 
 export default NotFound404;