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

feat: Update MainPageLayout with enhanced star layer effects and improved drop-shadow filters; refine star polygon coordinates for better visual consistency during animations

Browse Source
This commit is contained in:
sebseb7
2026-03-26 16:28:17 +01:00
parent e8517372f2
commit 4b634414e5
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/MainPageLayout.js
View File

@@ -48,6 +48,7 @@ const STAR_DECORATION_CSS = `
transform-box: fill-box;
transform-origin: center;
}
.star-rotate-slow-cw {
animation: rotateClockwise 60s linear infinite;
}
@@ -58,8 +59,20 @@ const STAR_DECORATION_CSS = `
animation: rotateClockwise 30s linear infinite;
}
.star-layer-svg-home { mix-blend-mode: screen; opacity: 0.92; }
.star-layer-svg-filiale { mix-blend-mode: soft-light; opacity: 0.94; }
.star-layer-svg-home {
mix-blend-mode: screen;
opacity: 0.92;
filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
}
.star-layer-svg-filiale {
mix-blend-mode: soft-light;
opacity: 0.94;
filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(127, 205, 205, 0.6)) drop-shadow(0 0 18px rgba(95, 158, 160, 0.35));
}
.star-layer-svg {
shape-rendering: geometricPrecision;
transform: translateZ(0);
}
@keyframes starFillHome0 {
0%, 100% { fill: #B8860B; }
@@ -200,7 +213,6 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
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' }
}}
>
@@ -224,7 +236,6 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
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' }
}}
>
@@ -248,8 +259,8 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
display: "flex",
flexDirection: "column",
boxShadow: 10,
transition: "all 0.3s ease",
"&:hover": { transform: "translateY(-5px)", boxShadow: 20 },
transition: "box-shadow 0.3s ease",
"&:hover": { boxShadow: 20 },
}}
onMouseEnter={
pageType === "home" && index === 0