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-box: fill-box;
transform-origin: center; transform-origin: center;
} }
.star-rotate-slow-cw { .star-rotate-slow-cw {
animation: rotateClockwise 60s linear infinite; animation: rotateClockwise 60s linear infinite;
} }
@@ -58,8 +59,20 @@ const STAR_DECORATION_CSS = `
animation: rotateClockwise 30s linear infinite; animation: rotateClockwise 30s linear infinite;
} }
.star-layer-svg-home { mix-blend-mode: screen; opacity: 0.92; } .star-layer-svg-home {
.star-layer-svg-filiale { mix-blend-mode: soft-light; opacity: 0.94; } 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 { @keyframes starFillHome0 {
0%, 100% { fill: #B8860B; } 0%, 100% { fill: #B8860B; }
@@ -200,7 +213,6 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
zIndex: 999, zIndex: 999,
pointerEvents: 'none', pointerEvents: 'none',
'& *': { 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' } display: { xs: 'none', sm: 'block' }
}} }}
> >
@@ -224,7 +236,6 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
zIndex: 999, zIndex: 999,
pointerEvents: 'none', pointerEvents: 'none',
'& *': { 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' } display: { xs: 'none', sm: 'block' }
}} }}
> >
@@ -248,8 +259,8 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
boxShadow: 10, boxShadow: 10,
transition: "all 0.3s ease", transition: "box-shadow 0.3s ease",
"&:hover": { transform: "translateY(-5px)", boxShadow: 20 }, "&:hover": { boxShadow: 20 },
}} }}
onMouseEnter={ onMouseEnter={
pageType === "home" && index === 0 pageType === "home" && index === 0

5
src/utils/starPolygon.js
View File

@@ -1,3 +1,4 @@
// viewBox 0 0 60 60, R=28, inner radius 0.52·R (shallower inner corners than a regular pentagram). // Pixel-snapped to .5 coordinates to reduce alias shimmer while rotating.
// Keeps the same visual proportions in viewBox 0 0 60 60.
export const STAR_POLYGON_POINTS = export const STAR_POLYGON_POINTS =
"30,2 38.558,18.221 56.63,21.348 43.847,34.499 46.458,52.652 30,44.56 13.542,52.652 16.153,34.499 3.37,21.348 21.442,18.221"; "30,2.5 38.5,18.5 56.5,21.5 43.5,34.5 46.5,52.5 30,44.5 13.5,52.5 16.5,34.5 3.5,21.5 21.5,18.5";