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' }}>
{/* 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'}`}>