Implement multilingual support: Integrate i18next for language translation across components, update configuration for multilingual descriptions and keywords, and enhance user interface elements with dynamic language switching. Add new dependencies for i18next and related libraries in package.json and package-lock.json.

src/App.js

@@ -21,6 +21,11 @@ import SocketContext from "./contexts/SocketContext.js";
 import { CarouselProvider } from "./contexts/CarouselContext.js";
 import config from "./config.js";
 import ScrollToTop from "./components/ScrollToTop.js";
+
+// Import i18n
+import './i18n/index.js';
+import { LanguageProvider } from './i18n/withTranslation.js';
+import i18n from './i18n/index.js';
 //import TelemetryService from './services/telemetryService.js';
 
 import Header from "./components/Header.js";
@@ -361,30 +366,37 @@ const App = () => {
     setDynamicTheme(createTheme(newTheme));
   };
 
+  // Make config globally available for language switching
+  useEffect(() => {
+    window.shopConfig = config;
+  }, []);
+
   return (
-    <ThemeProvider theme={dynamicTheme}>
-      <CssBaseline />
-      <SocketProvider
-        url={config.apiBaseUrl}
-        fallback={
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100vh",
-            }}
-          >
-            <CircularProgress color="primary" />
-          </Box>
-        }
-      >
-        <AppContent
-          currentTheme={currentTheme}
-          onThemeChange={handleThemeChange}
-        />
-      </SocketProvider>
-    </ThemeProvider>
+    <LanguageProvider i18n={i18n}>
+      <ThemeProvider theme={dynamicTheme}>
+        <CssBaseline />
+        <SocketProvider
+          url={config.apiBaseUrl}
+          fallback={
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100vh",
+              }}
+            >
+              <CircularProgress color="primary" />
+            </Box>
+          }
+        >
+          <AppContent
+            currentTheme={currentTheme}
+            onThemeChange={handleThemeChange}
+          />
+        </SocketProvider>
+      </ThemeProvider>
+    </LanguageProvider>
   );
 };