feat: add prerender scripts for single product rendering and enhance layout in PrerenderProduct and Footer components

package.json

@@ -13,6 +13,8 @@
     "lint": "eslint src/**/*.{js,jsx}",
     "prerender": "node prerender.cjs",
     "prerender:prod": "cross-env NODE_ENV=production node prerender.cjs",
+    "prerender:product": "node prerender-single-product.cjs",
+    "prerender:product:prod": "cross-env NODE_ENV=production node prerender-single-product.cjs",
     "build:prerender": "npm run build:client && npm run prerender:prod",
     "translate": "node translate-i18n.js",
     "translate:english": "node translate-i18n.js --only-english",

src/PrerenderProduct.js

@@ -73,11 +73,71 @@ class PrerenderProduct extends React.Component {
         { position: 'sticky', color: 'primary', elevation: 0, sx: { zIndex: 1100 } },
         React.createElement(
           Toolbar,
-          { sx: { minHeight: 64 } },
+          { 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(Logo)
+            { maxWidth: { xs: false, sm: 'lg' }, sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 }, width: '100%' } },
+            React.createElement(
+              Box,
+              { 
+                sx: { 
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  width: '100%',
+                  maxWidth: '100%',
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  overflow: 'hidden'
+                }
+              },
+                              React.createElement(
+                  Box,
+                  { 
+                    sx: { 
+                      display: 'flex', 
+                      alignItems: 'center', 
+                      width: '100%',
+                      maxWidth: '100%',
+                      justifyContent: { xs: 'space-between', sm: 'flex-start' },
+                      minHeight: { xs: 52, sm: 'auto' },
+                      px: { xs: 0, sm: 0 },
+                      overflow: 'hidden'
+                    }
+                  },
+                  React.createElement(Logo),
+                  // Invisible ButtonGroup placeholder for mobile layout
+                  React.createElement(
+                    Box,
+                    { 
+                      sx: { 
+                        display: { xs: 'flex', sm: 'none' },
+                        alignItems: 'flex-end',
+                        transform: 'translateY(4px) translateX(9px)',
+                        ml: 0,
+                        visibility: 'hidden',
+                        width: 120, // Approximate width of ButtonGroup
+                        height: 40
+                      }
+                    }
+                  )
+                ),
+              // Invisible SearchBar placeholder for mobile - matches SPA layout
+              React.createElement(
+                Box,
+                { 
+                  sx: { 
+                    display: { xs: 'block', sm: 'none' }, 
+                    width: '100%',
+                    maxWidth: '100%',
+                    mt: { xs: 1, sm: 0 },
+                    mb: { xs: 0.5, sm: 0 },
+                    px: { xs: 0, sm: 0 },
+                    height: 41, // Small TextField height
+                    visibility: 'hidden',
+                    overflow: 'hidden'
+                  }
+                }
+              )
+            )
           )
         )
       ),
@@ -334,6 +394,7 @@ class PrerenderProduct extends React.Component {
                 {
                   sx: {
                     mt: "auto",
+                    transform: "translateY(-1px)", // Move 1px up
                     p: 3,
                     background: "#f9f9f9",
                     borderRadius: 2,

src/components/Footer.js

@@ -275,7 +275,7 @@ class Footer extends Component {
                               <Stack 
                 direction="row" 
                 spacing={{ xs: 1, md: 2 }} 
-                sx={{pb: '10px'}}
+                sx={{pt: '10px', height: { xs: 50, md: 60 }, transform: 'translateY(-3px)'}}
                 justifyContent="center" 
                 alignItems="flex-end"
               >
@@ -288,7 +288,7 @@ class Footer extends Component {
                     position: 'relative',
                     zIndex: 9999,
                     display: 'inline-block',
-                    height: { xs: 50, md: 60 },
+                    height: { xs: 57, md: 67 },
                     lineHeight: 1
                   }}
                   onMouseEnter={this.handleReviewsMouseEnter}
@@ -317,7 +317,7 @@ class Footer extends Component {
                     position: 'relative',
                     zIndex: 9999,
                     display: 'inline-block',
-                    height: { xs: 40, md: 50 },
+                    height: { xs: 47, md: 67 },
                     lineHeight: 1
                   }}
                   onMouseEnter={this.handleMapsMouseEnter}