From 4584da1199a5eef865afb2031d9bf6acba3131d6 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 27 Jul 2025 14:04:36 +0200
Subject: [PATCH] size optimize

---
 src/components/MainPageLayout.js | 668 ++++++++-----------------------
 1 file changed, 165 insertions(+), 503 deletions(-)

diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js
index 8ff7baa..90c537b 100644
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -12,11 +12,112 @@ import SharedCarousel from "./SharedCarousel.js";
 import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
 import { useTranslation } from 'react-i18next';
 
+const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity, translatedContent }) => (
+  <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
+    {index === 0 && pageType === "filiale" && (
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '-55px',
+          left: '-45px',
+          width: '180px',
+          height: '180px',
+          zIndex: 999,
+          pointerEvents: 'none',
+          '& *': { pointerEvents: 'none' },
+          filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.4))',
+          display: { xs: 'none', sm: 'block' }
+        }}
+      >
+        <svg viewBox="0 0 60 60" width="168" height="168" className="star-rotate-slow-cw" style={{ position: 'absolute', top: '-9px', left: '-9px', transform: 'rotate(20deg)' }}>
+          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#B8860B" />
+        </svg>
+        <svg viewBox="0 0 60 60" width="159" height="159" className="star-rotate-slow-ccw" style={{ position: 'absolute', top: '-4.5px', left: '-4.5px', transform: 'rotate(-25deg)' }}>
+          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#DAA520" />
+        </svg>
+        <svg viewBox="0 0 60 60" width="150" height="150" className="star-rotate-medium-cw">
+          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#FFD700" />
+        </svg>
+        <div style={{ position: 'absolute', top: '45%', left: '43%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', transition: 'opacity 0.3s ease', opacity: starHovered ? 0 : 1 }}>
+          {translatedContent.showUsPhoto}
+        </div>
+        <div style={{ position: 'absolute', top: '45%', left: '43%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', opacity: starHovered ? 1 : 0, transition: 'opacity 0.3s ease' }}>
+          {translatedContent.selectSeedRate}
+        </div>
+      </Box>
+    )}
+    {index === 1 && pageType === "filiale" && (
+      <Box
+        sx={{
+          position: 'absolute',
+          bottom: '-45px',
+          right: '-65px',
+          width: '180px',
+          height: '180px',
+          zIndex: 999,
+          pointerEvents: 'none',
+          '& *': { pointerEvents: 'none' },
+          filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(175, 238, 238, 0.8)) drop-shadow(0 0 40px rgba(175, 238, 238, 0.4))',
+          display: { xs: 'none', sm: 'block' }
+        }}
+      >
+        <svg viewBox="0 0 60 60" width="168" height="168" className="star-rotate-slow-ccw" style={{ position: 'absolute', top: '-9px', left: '-9px', transform: 'rotate(20deg)' }}>
+          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#5F9EA0" />
+        </svg>
+        <svg viewBox="0 0 60 60" width="159" height="159" className="star-rotate-medium-cw" style={{ position: 'absolute', top: '-4.5px', left: '-4.5px', transform: 'rotate(-25deg)' }}>
+          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#7FCDCD" />
+        </svg>
+        <svg viewBox="0 0 60 60" width="150" height="150" className="star-rotate-slow-cw">
+          <polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#AFEEEE" />
+        </svg>
+        <div style={{ position: 'absolute', top: '42%', left: '45%', transform: 'translate(-50%, -50%) rotate(10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px' }}>
+          {translatedContent.indoorSeason}
+        </div>
+      </Box>
+    )}
+    <div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>
+      <Paper
+        component={Link}
+        to={box.link}
+        sx={{
+          p: 0,
+          textDecoration: "none",
+          color: "text.primary",
+          borderRadius: 2,
+          overflow: "hidden",
+          height: { xs: 150, sm: 200, md: 300 },
+          display: "flex",
+          flexDirection: "column",
+          boxShadow: 10,
+          transition: "all 0.3s ease",
+          "&:hover": { transform: "translateY(-5px)", boxShadow: 20 },
+        }}
+        onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
+        onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
+      >
+        <Box sx={{ height: "100%", bgcolor: box.bgcolor, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
+          {opacity === 1 && (
+            <img src={box.image} alt={box.title} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }} />
+          )}
+          <Box sx={{ position: "absolute", bottom: 0, left: 0, right: 0, bgcolor: "rgba(27, 94, 32, 0.8)", p: 1 }}>
+            <Typography sx={{ fontSize: "1.6rem", color: "white", fontFamily: "SwashingtonCP" }}>{box.title}</Typography>
+          </Box>
+        </Box>
+      </Paper>
+    </div>
+  </Grid>
+);
+
 const MainPageLayout = () => {
   const location = useLocation();
   const currentPath = location.pathname;
   const { t } = useTranslation();
   const [starHovered, setStarHovered] = React.useState(false);
+  const translatedContent = {
+    showUsPhoto: t('sections.showUsPhoto'),
+    selectSeedRate: t('sections.selectSeedRate'),
+    indoorSeason: t('sections.indoorSeason')
+  };
 
   const isHome = currentPath === "/";
   const isAktionen = currentPath === "/aktionen";
@@ -29,98 +130,49 @@ const MainPageLayout = () => {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
       }
-      
       @keyframes rotateCounterClockwise {
         from { transform: rotate(0deg); }
         to { transform: rotate(-360deg); }
       }
-      
       .star-rotate-slow-cw {
         animation: rotateClockwise 60s linear infinite;
       }
-      
       .star-rotate-slow-ccw {
         animation: rotateCounterClockwise 45s linear infinite;
       }
-      
       .star-rotate-medium-cw {
         animation: rotateClockwise 30s linear infinite;
       }
     `;
     document.head.appendChild(style);
-    return () => {
-      document.head.removeChild(style);
-    };
+    return () => document.head.removeChild(style);
   }, []);
 
   const getNavigationConfig = () => {
-    if (isHome) {
-      return {
-        leftNav: { text: t('navigation.aktionen'), link: "/aktionen" },
-        rightNav: { text: t('navigation.filiale'), link: "/filiale" }
-      };
-    } else if (isAktionen) {
-      return {
-        leftNav: { text: t('navigation.filiale'), link: "/filiale" },
-        rightNav: { text: t('navigation.home'), link: "/" }
-      };
-    } else if (isFiliale) {
-      return {
-        leftNav: { text: t('navigation.home'), link: "/" },
-        rightNav: { text: t('navigation.aktionen'), link: "/aktionen" }
-      };
-    }
+    if (isHome) return { leftNav: { text: t('navigation.aktionen'), link: "/aktionen" }, rightNav: { text: t('navigation.filiale'), link: "/filiale" } };
+    if (isAktionen) return { leftNav: { text: t('navigation.filiale'), link: "/filiale" }, rightNav: { text: t('navigation.home'), link: "/" } };
+    if (isFiliale) return { leftNav: { text: t('navigation.home'), link: "/" }, rightNav: { text: t('navigation.aktionen'), link: "/aktionen" } };
     return { leftNav: null, rightNav: null };
   };
 
   const allTitles = {
     home: t('titles.filiale'),
-    aktionen: t('titles.aktionen'), 
+    aktionen: t('titles.aktionen'),
     filiale: t('titles.home')
   };
 
   const allContentBoxes = {
     home: [
-      {
-        title: t('sections.address1'),
-        image: "/assets/images/filiale1.jpg",
-        bgcolor: "#e1f0d3",
-        link: "/filiale"
-      },
-      {
-        title: t('sections.address2'),
-        image: "/assets/images/filiale2.jpg",
-        bgcolor: "#e8f5d6",
-        link: "/filiale"
-      }
+      { title: t('sections.address1'), image: "/assets/images/filiale1.jpg", bgcolor: "#e1f0d3", link: "/filiale" },
+      { title: t('sections.address2'), image: "/assets/images/filiale2.jpg", bgcolor: "#e8f5d6", link: "/filiale" }
     ],
     aktionen: [
-      {
-        title: t('sections.oilPress'),
-        image: "/assets/images/presse.jpg",
-        bgcolor: "#e1f0d3",
-        link: "/presseverleih"
-      },
-      {
-        title: t('sections.thcTest'),
-        image: "/assets/images/purpl.jpg",
-        bgcolor: "#e8f5d6",
-        link: "/thc-test"
-      }
+      { title: t('sections.oilPress'), image: "/assets/images/presse.jpg", bgcolor: "#e1f0d3", link: "/presseverleih" },
+      { title: t('sections.thcTest'), image: "/assets/images/purpl.jpg", bgcolor: "#e8f5d6", link: "/thc-test" }
     ],
     filiale: [
-      {
-        title: t('sections.seeds'),
-        image: "/assets/images/seeds.jpg",
-        bgcolor: "#e1f0d3",
-        link: "/Kategorie/Seeds"
-      },
-      {
-        title: t('sections.stecklinge'),
-        image: "/assets/images/cutlings.jpg",
-        bgcolor: "#e8f5d6",
-        link: "/Kategorie/Stecklinge"
-      }
+      { title: t('sections.seeds'), image: "/assets/images/seeds.jpg", bgcolor: "#e1f0d3", link: "/Kategorie/Seeds" },
+      { title: t('sections.stecklinge'), image: "/assets/images/cutlings.jpg", bgcolor: "#e8f5d6", link: "/Kategorie/Stecklinge" }
     ]
   };
 
@@ -132,7 +184,6 @@ const MainPageLayout = () => {
   };
 
   const navConfig = getNavigationConfig();
-
   const navTexts = [
     { key: 'aktionen', text: t('navigation.aktionen'), link: '/aktionen' },
     { key: 'filiale', text: t('navigation.filiale'), link: '/filiale' },
@@ -142,188 +193,61 @@ const MainPageLayout = () => {
   return (
     <Container maxWidth="lg" sx={{ py: 2 }}>
       <style>{getCombinedAnimatedBorderStyles(['seeds', 'cutlings'])}</style>
-      <Box sx={{ 
-        display: "flex", 
-        alignItems: "center", 
-        justifyContent: "space-between", 
-        mb: 4,
-        mt: 2,
-        px: 0,
-        transition: "all 0.3s ease-in-out",
-        flexDirection: { 
-          xs: "column", 
-          sm: "row" 
-        }
-      }}>
-        <Box sx={{ 
-          display: { xs: "block", sm: "none" },
-          mb: { xs: 2, sm: 0 },
-          width: "100%",
-          textAlign: "center",
-          position: "relative"
-        }}>
+      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 4, mt: 2, px: 0, transition: "all 0.3s ease-in-out", flexDirection: { xs: "column", sm: "row" } }}>
+        <Box sx={{ display: { xs: "block", sm: "none" }, mb: { xs: 2, sm: 0 }, width: "100%", textAlign: "center", position: "relative" }}>
           {Object.entries(allTitles).map(([pageType, title]) => (
-            <Typography
-              key={pageType}
-              variant="h3"
-              component="h1"
-              sx={{
-                fontFamily: "SwashingtonCP",
-                fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
-                textAlign: "center",
-                color: "primary.main",
-                textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
-                transition: "opacity 0.5s ease-in-out",
-                opacity: getOpacity(pageType),
-                position: pageType === "home" ? "relative" : "absolute",
-                top: pageType !== "home" ? 0 : "auto",
-                left: pageType !== "home" ? 0 : "auto",
-                transform: "none",
-                width: "100%",
-                pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
-                lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                wordWrap: "break-word",
-                hyphens: "auto"
-              }}
-            >
-              {title}
-            </Typography>
+            <Typography key={pageType} variant="h3" component="h1" sx={{
+              fontFamily: "SwashingtonCP", fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" }, textAlign: "center", color: "primary.main",
+              textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)", transition: "opacity 0.5s ease-in-out", opacity: getOpacity(pageType),
+              position: pageType === "home" ? "relative" : "absolute", top: pageType !== "home" ? 0 : "auto", left: pageType !== "home" ? 0 : "auto",
+              transform: "none", width: "100%", pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
+              lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" }, wordWrap: "break-word", hyphens: "auto"
+            }}>{title}</Typography>
           ))}
         </Box>
-        <Box sx={{ 
-          display: { xs: "flex", sm: "contents" },
-          width: { xs: "100%", sm: "auto" },
-          justifyContent: { xs: "space-between", sm: "initial" },
-          alignItems: "center"
-        }}>
-          <Box sx={{ 
-            display: "flex", 
-            alignItems: "center", 
-            flexShrink: 0,
-            justifyContent: "flex-start",
-            position: "relative",
-            mr: { xs: 0, sm: 2 }
-          }}>
+        <Box sx={{ display: { xs: "flex", sm: "contents" }, width: { xs: "100%", sm: "auto" }, justifyContent: { xs: "space-between", sm: "initial" }, alignItems: "center" }}>
+          <Box sx={{ display: "flex", alignItems: "center", flexShrink: 0, justifyContent: "flex-start", position: "relative", mr: { xs: 0, sm: 2 } }}>
             {navTexts.map((navItem, index) => {
               const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
-              const link = navItem.link;
               return (
-                <Box
-                  key={navItem.key}
-                  component={Link}
-                  to={link}
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    textDecoration: "none",
-                    color: "inherit",
-                    transition: "all 0.3s ease",
-                    opacity: isActive ? 1 : 0,
-                    position: index === 0 ? "relative" : "absolute",
-                    left: index !== 0 ? 0 : "auto",
-                    pointerEvents: isActive ? "auto" : "none",
-                    "&:hover": {
-                      transform: "translateX(-5px)",
-                      color: "primary.main"
-                    }
-                  }}
-                >
+                <Box key={navItem.key} component={Link} to={navItem.link} sx={{
+                  display: "flex", alignItems: "center", textDecoration: "none", color: "inherit", transition: "all 0.3s ease",
+                  opacity: isActive ? 1 : 0, position: index === 0 ? "relative" : "absolute", left: index !== 0 ? 0 : "auto",
+                  pointerEvents: isActive ? "auto" : "none", "&:hover": { transform: "translateX(-5px)", color: "primary.main" }
+                }}>
                   <ChevronLeft sx={{ fontSize: "2rem", mr: 1 }} />
-                  <Typography
-                    sx={{
-                      fontFamily: "SwashingtonCP",
-                      fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
-                      textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-                      lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                      whiteSpace: "nowrap"
-                    }}
-                  >
-                    {navItem.text}
-                  </Typography>
+                  <Typography sx={{
+                    fontFamily: "SwashingtonCP", fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
+                    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)", lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" }, whiteSpace: "nowrap"
+                  }}>{navItem.text}</Typography>
                 </Box>
               );
             })}
           </Box>
-          <Box sx={{ 
-            flex: 1, 
-            display: { xs: "none", sm: "flex" },
-            justifyContent: "center",
-            alignItems: "center",
-            px: 0,
-            position: "relative",
-            minWidth: 0
-          }}>
+          <Box sx={{ flex: 1, display: { xs: "none", sm: "flex" }, justifyContent: "center", alignItems: "center", px: 0, position: "relative", minWidth: 0 }}>
             {Object.entries(allTitles).map(([pageType, title]) => (
-              <Typography
-                key={pageType}
-                variant="h3"
-                component="h1"
-                sx={{
-                  fontFamily: "SwashingtonCP",
-                  fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
-                  textAlign: "center",
-                  color: "primary.main",
-                  textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
-                  transition: "opacity 0.5s ease-in-out",
-                  opacity: getOpacity(pageType),
-                  position: pageType === "home" ? "relative" : "absolute",
-                  top: pageType !== "home" ? "50%" : "auto",
-                  left: pageType !== "home" ? "50%" : "auto",
-                  transform: pageType !== "home" ? "translate(-50%, -50%)" : "none",
-                  width: "100%",
-                  pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
-                  lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                  wordWrap: "break-word",
-                  hyphens: "auto"
-                }}
-              >
-                {title}
-              </Typography>
+              <Typography key={pageType} variant="h3" component="h1" sx={{
+                fontFamily: "SwashingtonCP", fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" }, textAlign: "center", color: "primary.main",
+                textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)", transition: "opacity 0.5s ease-in-out", opacity: getOpacity(pageType),
+                position: pageType === "home" ? "relative" : "absolute", top: pageType !== "home" ? "50%" : "auto", left: pageType !== "home" ? "50%" : "auto",
+                transform: pageType !== "home" ? "translate(-50%, -50%)" : "none", width: "100%", pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
+                lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" }, wordWrap: "break-word", hyphens: "auto"
+              }}>{title}</Typography>
             ))}
           </Box>
-          <Box sx={{ 
-            display: "flex", 
-            alignItems: "center", 
-            flexShrink: 0,
-            justifyContent: "flex-end",
-            position: "relative",
-            ml: { xs: 0, sm: 2 }
-          }}>
+          <Box sx={{ display: "flex", alignItems: "center", flexShrink: 0, justifyContent: "flex-end", position: "relative", ml: { xs: 0, sm: 2 } }}>
             {navTexts.map((navItem, index) => {
               const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
-              const link = navItem.link;
               return (
-                <Box
-                  key={navItem.key}
-                  component={Link}
-                  to={link}
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    textDecoration: "none",
-                    color: "inherit",
-                    transition: "all 0.3s ease",
-                    opacity: isActive ? 1 : 0,
-                    position: index === 0 ? "relative" : "absolute",
-                    right: index !== 0 ? 0 : "auto",
-                    pointerEvents: isActive ? "auto" : "none",
-                    "&:hover": {
-                      transform: "translateX(5px)",
-                      color: "primary.main"
-                    }
-                  }}
-                >
-                  <Typography
-                    sx={{
-                      fontFamily: "SwashingtonCP",
-                      fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },  
-                      textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-                      lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                      whiteSpace: "nowrap"
-                    }}
-                  >
-                    {navItem.text}
-                  </Typography>
+                <Box key={navItem.key} component={Link} to={navItem.link} sx={{
+                  display: "flex", alignItems: "center", textDecoration: "none", color: "inherit", transition: "all 0.3s ease",
+                  opacity: isActive ? 1 : 0, position: index === 0 ? "relative" : "absolute", right: index !== 0 ? 0 : "auto",
+                  pointerEvents: isActive ? "auto" : "none", "&:hover": { transform: "translateX(5px)", color: "primary.main" }
+                }}>
+                  <Typography sx={{
+                    fontFamily: "SwashingtonCP", fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
+                    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)", lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" }, whiteSpace: "nowrap"
+                  }}>{navItem.text}</Typography>
                   <ChevronRight sx={{ fontSize: "2rem", ml: 1 }} />
                 </Box>
               );
@@ -333,283 +257,21 @@ const MainPageLayout = () => {
       </Box>
       <Box sx={{ position: "relative", mb: 4 }}>
         {Object.entries(allContentBoxes).map(([pageType, contentBoxes]) => (
-          <Grid 
-            key={pageType}
-            container 
-            spacing={0} 
-            sx={{ 
-              transition: "opacity 0.5s ease-in-out",
-              opacity: getOpacity(pageType),
-              position: pageType === "home" ? "relative" : "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none"
-            }}
-          >
+          <Grid key={pageType} container spacing={0} sx={{
+            transition: "opacity 0.5s ease-in-out", opacity: getOpacity(pageType),
+            position: pageType === "home" ? "relative" : "absolute", top: 0, left: 0, width: "100%", pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none"
+          }}>
             {contentBoxes.map((box, index) => (
-              <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
-                {index === 0 && pageType === "filiale" && (
-                  <Box
-                    sx={{
-                      position: 'absolute',
-                      top: '-55px',
-                      left: '-45px',
-                      width: '180px',
-                      height: '180px',
-                      zIndex: 999,
-                      pointerEvents: 'none',
-                      '& *': { pointerEvents: 'none' },
-                      filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.4))',
-                      display: { xs: 'none', sm: 'block' }
-                    }}
-                  >
-                    <svg 
-                      viewBox="0 0 60 60" 
-                      width="168" 
-                      height="168"
-                      className="star-rotate-slow-cw"
-                      style={{
-                        position: 'absolute',
-                        top: '-9px',
-                        left: '-9px',
-                        transform: 'rotate(20deg)'
-                      }}
-                    >
-                      <polygon 
-                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
-                        fill="#B8860B" 
-                        stroke="none"
-                      />
-                    </svg>
-                    <svg 
-                      viewBox="0 0 60 60" 
-                      width="159" 
-                      height="159"
-                      className="star-rotate-slow-ccw"
-                      style={{
-                        position: 'absolute',
-                        top: '-4.5px',
-                        left: '-4.5px',
-                        transform: 'rotate(-25deg)'
-                      }}
-                    >
-                      <polygon 
-                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
-                        fill="#DAA520" 
-                        stroke="none"
-                      />
-                    </svg>
-                    <svg 
-                      viewBox="0 0 60 60" 
-                      width="150" 
-                      height="150"
-                      className="star-rotate-medium-cw"
-                    >
-                      <polygon 
-                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
-                        fill="#FFD700" 
-                        stroke="none"
-                      />
-                    </svg>
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: '45%',
-                        left: '43%',
-                        transform: 'translate(-50%, -50%) rotate(-10deg)',
-                        color: 'white',
-                        fontWeight: '900',
-                        fontSize: '20px',
-                        textShadow: '0px 3px 6px rgba(0,0,0,0.5)',
-                        zIndex: 1000,
-                        textAlign: 'center',
-                        lineHeight: '1.1',
-                        width: '135px',
-                        transition: 'opacity 0.3s ease',
-                        opacity: starHovered ? 0 : 1
-                      }}
-                    >
-                      {t('sections.showUsPhoto')}
-                    </div>
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: '45%',
-                        left: '43%',
-                        transform: 'translate(-50%, -50%) rotate(-10deg)',
-                        color: 'white',
-                        fontWeight: '900',
-                        fontSize: '20px',
-                        textShadow: '0px 3px 6px rgba(0,0,0,0.5)',
-                        zIndex: 1000,
-                        textAlign: 'center',
-                        lineHeight: '1.1',
-                        width: '135px',
-                        opacity: starHovered ? 1 : 0,
-                        transition: 'opacity 0.3s ease'
-                      }}
-                    >
-                      {t('sections.selectSeedRate')}
-                    </div>
-                  </Box>
-                )}
-                {index === 1 && pageType === "filiale" && (
-                  <Box
-                    sx={{
-                      position: 'absolute',
-                      bottom: '-45px',
-                      right: '-65px',
-                      width: '180px',
-                      height: '180px',
-                      zIndex: 999,
-                              pointerEvents: 'none',
-                      '& *': { pointerEvents: 'none' },
-                      filter:
-                        'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(175, 238, 238, 0.8)) drop-shadow(0 0 40px rgba(175, 238, 238, 0.4))',
-                      display: { xs: 'none', sm: 'block' }
-                    }}
-                  >
-                    <svg
-                      viewBox="0 0 60 60"
-                      width="168"
-                      height="168"
-                      className="star-rotate-slow-ccw"
-                      style={{
-                        position: 'absolute',
-                        top: '-9px',
-                        left: '-9px',
-                        transform: 'rotate(20deg)'
-                      }}
-                    >
-                      <polygon 
-                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
-                        fill="#5F9EA0" 
-                        stroke="none"
-                      />
-                    </svg>
-                    <svg 
-                      viewBox="0 0 60 60" 
-                      width="159" 
-                      height="159"
-                      className="star-rotate-medium-cw"
-                      style={{
-                        position: 'absolute',
-                        top: '-4.5px',
-                        left: '-4.5px',
-                        transform: 'rotate(-25deg)'
-                      }}
-                    >
-                      <polygon 
-                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
-                        fill="#7FCDCD" 
-                        stroke="none"
-                      />
-                    </svg>
-                    <svg
-                      viewBox="0 0 60 60"
-                      width="150"
-                      height="150"
-                      className="star-rotate-slow-cw"
-                    >
-                      <polygon 
-                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
-                        fill="#AFEEEE" 
-                        stroke="none"
-                      />
-                    </svg>
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: '42%',
-                        left: '45%',
-                        transform: 'translate(-50%, -50%) rotate(10deg)',
-                        color: 'white',
-                        fontWeight: '900',
-                        fontSize: '20px',
-                        textShadow: '0px 3px 6px rgba(0,0,0,0.5)',
-                        zIndex: 1000,
-                        textAlign: 'center',
-                        lineHeight: '1.1',
-                        width: '135px'
-                      }}
-                    >
-                      {t('sections.indoorSeason')}
-                    </div>
-                  </Box>
-                )}
-                <div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>
-                  <Paper
-                    component={Link}
-                    to={box.link}
-                    sx={{
-                      p: 0,
-                      textDecoration: "none",
-                      color: "text.primary",
-                      borderRadius: 2,
-                      overflow: "hidden",
-                      height: { xs: 150, sm: 200, md: 300 },
-                      display: "flex",
-                      flexDirection: "column",
-                      boxShadow: 10,
-                      transition: "all 0.3s ease",
-                      "&:hover": {
-                        transform: "translateY(-5px)",
-                        boxShadow: 20,
-                      },
-                    }}
-                    onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
-                    onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
-                  >
-                    <Box
-                      sx={{
-                        height: "100%",
-                        bgcolor: box.bgcolor,
-                        position: "relative",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                      }}
-                    >
-                      {getOpacity(pageType) === 1 && (
-                        <img
-                          src={box.image}
-                          alt={box.title}
-                          style={{
-                            maxWidth: "100%",
-                            maxHeight: "100%",
-                            objectFit: "contain",
-                            position: "absolute",
-                            top: "50%",
-                            left: "50%",
-                            transform: "translate(-50%, -50%)",
-                          }}
-                        />
-                      )}
-                      <Box
-                        sx={{
-                          position: "absolute",
-                          bottom: 0,
-                          left: 0,
-                          right: 0,
-                          bgcolor: "rgba(27, 94, 32, 0.8)",
-                          p: 1,
-                        }}
-                      >
-                        <Typography
-                          sx={{
-                            fontSize: "1.6rem",
-                            color: "white",
-                            fontFamily: "SwashingtonCP",
-                          }}
-                        >
-                          {box.title}
-                        </Typography>
-                      </Box>
-                    </Box>
-                  </Paper>
-                </div>
-              </Grid>
+            <ContentBox
+              key={`${pageType}-${index}`}
+              box={box}
+              index={index}
+              pageType={pageType}
+              starHovered={starHovered}
+              setStarHovered={setStarHovered}
+              opacity={getOpacity(pageType)}
+              translatedContent={translatedContent}
+            />
             ))}
           </Grid>
         ))}
@@ -619,4 +281,4 @@ const MainPageLayout = () => {
   );
 };
 
-export default MainPageLayout; 
\ No newline at end of file
+export default MainPageLayout;