diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js index 23c1311..34d8851 100644 --- a/src/components/MainPageLayout.js +++ b/src/components/MainPageLayout.js @@ -16,6 +16,7 @@ const MainPageLayout = () => { const location = useLocation(); const currentPath = location.pathname; const { t } = useTranslation(); + const [starHovered, setStarHovered] = React.useState(false); // Determine which page we're on const isHome = currentPath === "/"; @@ -336,7 +337,120 @@ const MainPageLayout = () => { }} > {contentBoxes.map((box, index) => ( - + + {/* Multi-pointed star for seeds box - moved to Grid level */} + {index === 0 && pageType === "home" && ( +
setStarHovered(true)} + onMouseLeave={() => setStarHovered(false)} + > + {/* Background star - slightly larger and rotated */} + + + + + {/* Middle star - medium size with different rotation */} + + + + + {/* Foreground star - main star with text */} + + + + + {/* Text positioned in the center of the star */} +
+ {t('sections.showUsPhoto')} +
+ + {/* Hover text */} +
+ {t('sections.selectSeedRate')} +
+
+ )} +