seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

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.

Browse Source
This commit is contained in:
sebseb7
2025-07-19 06:19:00 +02:00
parent 65ffc1542f
commit 7eb70abb22
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/MainPageLayout.js
View File

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