From 7eb70abb22bd550066c51e89893d87f09e1e9f6c Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sat, 19 Jul 2025 06:19:00 +0200
Subject: [PATCH] Refactor star graphics in MainPageLayout: Replaced div
 elements with Box components for improved styling and layout control.
 Adjusted positioning and added drop-shadow effects for enhanced visual
 appeal. Updated display properties to ensure responsiveness across different
 screen sizes.

---
 src/components/MainPageLayout.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js
index 8cbb53d..8fdfe62 100644
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -373,16 +373,18 @@ const MainPageLayout = () => {
               <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
                 {/* Multi-pointed star for seeds box - moved to Grid level */}
                 {index === 0 && pageType === "home" && (
-                  <div
-                    style={{
+                  <Box
+                    sx={{
                       position: 'absolute',
-                      top: '-45px',
+                      top: '-55px',
                       left: '-45px',
                       width: '180px',
                       height: '180px',
                       zIndex: 999,
                       pointerEvents: 'auto',
-                      cursor: 'pointer'
+                      cursor: 'pointer',
+                      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' }
                     }}
                     onMouseEnter={() => setStarHovered(true)}
                     onMouseLeave={() => setStarHovered(false)}
@@ -484,21 +486,23 @@ const MainPageLayout = () => {
                     >
                       {t('sections.selectSeedRate')}
                     </div>
-                  </div>
+                  </Box>
                 )}
                 
                 {/* Multi-pointed star for stecklinge box - bottom right */}
                 {index === 1 && pageType === "home" && (
-                  <div
-                    style={{
+                  <Box
+                    sx={{
                       position: 'absolute',
-                      bottom: '-65px',
+                      bottom: '-45px',
                       right: '-65px',
                       width: '180px',
                       height: '180px',
                       zIndex: 999,
                       pointerEvents: 'auto',
-                      cursor: 'pointer'
+                      cursor: 'pointer',
+                      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' }
                     }}
                   >
                     {/* Background star - slightly larger and rotated */}
@@ -574,7 +578,7 @@ const MainPageLayout = () => {
                     >
                       {t('sections.indoorSeason')}
                     </div>
-                  </div>
+                  </Box>
                 )}
                 
                 <div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>