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/components/MainPageLayout.js

@@ -10,10 +10,12 @@ import ChevronRight from "@mui/icons-material/ChevronRight";
 import { Link } from "react-router-dom";
 import SharedCarousel from "./SharedCarousel.js";
 import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
+import { useTranslation } from 'react-i18next';
 
 const MainPageLayout = () => {
   const location = useLocation();
   const currentPath = location.pathname;
+  const { t } = useTranslation();
 
   // Determine which page we're on
   const isHome = currentPath === "/";
@@ -24,18 +26,18 @@ const MainPageLayout = () => {
   const getNavigationConfig = () => {
     if (isHome) {
       return {
-        leftNav: { text: "Aktionen", link: "/aktionen" },
-        rightNav: { text: "Filiale", link: "/filiale" }
+        leftNav: { text: t('navigation.aktionen'), link: "/aktionen" },
+        rightNav: { text: t('navigation.filiale'), link: "/filiale" }
       };
     } else if (isAktionen) {
       return {
-        leftNav: { text: "Filiale", link: "/filiale" },
-        rightNav: { text: "Home", link: "/" }
+        leftNav: { text: t('navigation.filiale'), link: "/filiale" },
+        rightNav: { text: t('navigation.home'), link: "/" }
       };
     } else if (isFiliale) {
       return {
-        leftNav: { text: "Home", link: "/" },
-        rightNav: { text: "Aktionen", link: "/aktionen" }
+        leftNav: { text: t('navigation.home'), link: "/" },
+        rightNav: { text: t('navigation.aktionen'), link: "/aktionen" }
       };
     }
     return { leftNav: null, rightNav: null };
@@ -51,13 +53,13 @@ const MainPageLayout = () => {
   const allContentBoxes = {
     home: [
       {
-        title: "Seeds",
+        title: t('sections.seeds'),
         image: "/assets/images/seeds.jpg",
         bgcolor: "#e1f0d3",
         link: "/Kategorie/Seeds"
       },
       {
-        title: "Stecklinge",
+        title: t('sections.stecklinge'),
         image: "/assets/images/cutlings.jpg",
         bgcolor: "#e8f5d6",
         link: "/Kategorie/Stecklinge"
@@ -65,13 +67,13 @@ const MainPageLayout = () => {
     ],
     aktionen: [
       {
-        title: "Ölpresse ausleihen",
+        title: t('sections.oilPress'),
         image: "/assets/images/presse.jpg",
         bgcolor: "#e1f0d3",
         link: "/presseverleih"
       },
       {
-        title: "THC Test",
+        title: t('sections.thcTest'),
         image: "/assets/images/purpl.jpg",
         bgcolor: "#e8f5d6",
         link: "/thc-test"
@@ -79,13 +81,13 @@ const MainPageLayout = () => {
     ],
     filiale: [
       {
-        title: "Trachenberger Straße 14",
+        title: t('sections.address1'),
         image: "/assets/images/filiale1.jpg",
         bgcolor: "#e1f0d3",
         link: "/filiale"
       },
       {
-        title: "01129 Dresden",
+        title: t('sections.address2'),
         image: "/assets/images/filiale2.jpg",
         bgcolor: "#e8f5d6",
         link: "/filiale"
@@ -103,6 +105,13 @@ const MainPageLayout = () => {
 
   const navConfig = getNavigationConfig();
 
+  // Navigation text mapping for translation
+  const navTexts = [
+    { key: 'aktionen', text: t('navigation.aktionen'), link: '/aktionen' },
+    { key: 'filiale', text: t('navigation.filiale'), link: '/filiale' },
+    { key: 'home', text: t('navigation.home'), link: '/' }
+  ];
+
   return (
     <Container maxWidth="lg" sx={{ py: 2 }}>
       <style>{getCombinedAnimatedBorderStyles(['seeds', 'cutlings'])}</style>
@@ -126,13 +135,13 @@ const MainPageLayout = () => {
           position: "relative",
           mr: 2
         }}>
-          {["Aktionen", "Filiale", "Home"].map((text, index) => {
-            const isActive = navConfig.leftNav && navConfig.leftNav.text === text;
-            const link = text === "Aktionen" ? "/aktionen" : text === "Filiale" ? "/filiale" : "/";
+          {navTexts.map((navItem, index) => {
+            const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
+            const link = navItem.link;
             
             return (
               <Box
-                key={text}
+                key={navItem.key}
                 component={Link}
                 to={link}
                 sx={{
@@ -161,7 +170,7 @@ const MainPageLayout = () => {
                     whiteSpace: "nowrap"
                   }}
                 >
-                  {text}
+                  {navItem.text}
                 </Typography>
               </Box>
             );
@@ -216,13 +225,13 @@ const MainPageLayout = () => {
           position: "relative",
           ml: 2
         }}>
-          {["Aktionen", "Filiale", "Home"].map((text, index) => {
-            const isActive = navConfig.rightNav && navConfig.rightNav.text === text;
-            const link = text === "Aktionen" ? "/aktionen" : text === "Filiale" ? "/filiale" : "/";
+          {navTexts.map((navItem, index) => {
+            const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
+            const link = navItem.link;
             
             return (
               <Box
-                key={text}
+                key={navItem.key}
                 component={Link}
                 to={link}
                 sx={{
@@ -250,7 +259,7 @@ const MainPageLayout = () => {
                     whiteSpace: "nowrap"
                   }}
                 >
-                  {text}
+                  {navItem.text}
                 </Typography>
                 <ChevronRight sx={{ fontSize: "2rem", ml: 1 }} />
               </Box>