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

feat: fix star decoration layers to MainPageLayout and refactor star polygon usage in Product component for improved visual consistency

Browse Source
This commit is contained in:
sebseb7
2026-03-25 17:16:12 +01:00
parent 9e77deb4f8
commit c5dce64ac9
3 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/MainPageLayout.js
View File

@@ -10,8 +10,48 @@ import ChevronRight from "@mui/icons-material/ChevronRight";
import { Link } from "react-router-dom";
import SharedCarousel from "./SharedCarousel.js";
import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
import { STAR_POLYGON_POINTS } from "../utils/starPolygon.js";
import { useTranslation } from 'react-i18next';
const HOME_STAR_LAYERS = [
{ className: "star-rotate-slow-cw", size: 168, staticDeg: 20, fill: "#B8860B" },
{ className: "star-rotate-slow-ccw", size: 159, staticDeg: -25, fill: "#DAA520" },
{ className: "star-rotate-medium-cw", size: 150, staticDeg: null, fill: "#FFD700" },
];
const FILIALE_STAR_LAYERS = [
{ className: "star-rotate-slow-ccw", size: 168, staticDeg: 20, fill: "#5F9EA0" },
{ className: "star-rotate-medium-cw", size: 159, staticDeg: -25, fill: "#7FCDCD" },
{ className: "star-rotate-slow-cw", size: 150, staticDeg: null, fill: "#AFEEEE" },
];
const StarDecorationLayers = ({ layers }) => (
<>
{layers.map(({ className, size, staticDeg, fill }, i) => {
const half = size / 2;
return (
<div
key={i}
style={{
position: "absolute",
left: "50%",
top: "50%",
width: size,
height: size,
marginLeft: -half,
marginTop: -half,
...(staticDeg != null ? { transform: `rotate(${staticDeg}deg)` } : {}),
}}
>
<svg viewBox="0 0 60 60" width="100%" height="100%" className={className} style={{ display: "block" }}>
<polygon points={STAR_POLYGON_POINTS} fill={fill} />
</svg>
</div>
);
})}
</>
);
const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity, translatedContent }) => (
<Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
{index === 0 && pageType === "home" && (
@@ -29,19 +69,11 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
display: { xs: 'none', sm: 'block' }
}}
>
<svg viewBox="0 0 60 60" width="168" height="168" className="star-rotate-slow-cw" style={{ position: 'absolute', top: '-9px', left: '-9px', transform: 'rotate(20deg)' }}>
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#B8860B" />
</svg>
<svg viewBox="0 0 60 60" width="159" height="159" className="star-rotate-slow-ccw" style={{ position: 'absolute', top: '-4.5px', left: '-4.5px', transform: 'rotate(-25deg)' }}>
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#DAA520" />
</svg>
<svg viewBox="0 0 60 60" width="150" height="150" className="star-rotate-medium-cw">
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#FFD700" />
</svg>
<div style={{ position: 'absolute', top: '45%', left: '43%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', transition: 'opacity 0.3s ease', opacity: starHovered ? 0 : 1 }}>
<StarDecorationLayers layers={HOME_STAR_LAYERS} />
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', transition: 'opacity 0.3s ease', opacity: starHovered ? 0 : 1 }}>
{translatedContent.outdoorSeason}
</div>
<div style={{ position: 'absolute', top: '45%', left: '43%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', opacity: starHovered ? 1 : 0, transition: 'opacity 0.3s ease' }}>
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(-10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px', opacity: starHovered ? 1 : 0, transition: 'opacity 0.3s ease' }}>
{translatedContent.selectSeedRate}
</div>
</Box>
@@ -61,16 +93,8 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
display: { xs: 'none', sm: 'block' }
}}
>
<svg viewBox="0 0 60 60" width="168" height="168" className="star-rotate-slow-ccw" style={{ position: 'absolute', top: '-9px', left: '-9px', transform: 'rotate(20deg)' }}>
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#5F9EA0" />
</svg>
<svg viewBox="0 0 60 60" width="159" height="159" className="star-rotate-medium-cw" style={{ position: 'absolute', top: '-4.5px', left: '-4.5px', transform: 'rotate(-25deg)' }}>
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#7FCDCD" />
</svg>
<svg viewBox="0 0 60 60" width="150" height="150" className="star-rotate-slow-cw">
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#AFEEEE" />
</svg>
<div style={{ position: 'absolute', top: '42%', left: '45%', transform: 'translate(-50%, -50%) rotate(10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px' }}>
<StarDecorationLayers layers={FILIALE_STAR_LAYERS} />
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%) rotate(10deg)', color: 'white', fontWeight: '900', fontSize: '20px', textShadow: '0px 3px 6px rgba(0,0,0,0.5)', zIndex: 1000, textAlign: 'center', lineHeight: '1.1', width: '135px' }}>
{translatedContent.showUsPhoto}
</div>
</Box>
@@ -92,8 +116,16 @@ const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity
transition: "all 0.3s ease",
"&:hover": { transform: "translateY(-5px)", boxShadow: 20 },
}}
onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
onMouseEnter={
(pageType === "home" && index === 0) || (pageType === "filiale" && index === 1)
? () => setStarHovered(true)
: undefined
}
onMouseLeave={
(pageType === "home" && index === 0) || (pageType === "filiale" && index === 1)
? () => setStarHovered(false)
: undefined
}
>
<Box sx={{ height: "100%", bgcolor: box.bgcolor, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
{opacity === 1 && (
@@ -134,6 +166,12 @@ const MainPageLayout = () => {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.star-rotate-slow-cw,
.star-rotate-slow-ccw,
.star-rotate-medium-cw {
transform-box: fill-box;
transform-origin: center;
}
.star-rotate-slow-cw {
animation: rotateClockwise 60s linear infinite;
}

7
src/components/Product.js
View File

@@ -10,6 +10,7 @@ import AddToCartButton from './AddToCartButton.js';
import { Link, useNavigate } from 'react-router-dom';
import { withI18n } from '../i18n/withTranslation.js';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import { STAR_POLYGON_POINTS } from '../utils/starPolygon.js';
// Helper function to find level 1 category ID from any category ID
const findLevel1CategoryId = (categoryId) => {
@@ -302,7 +303,7 @@ class Product extends Component {
}}
>
<polygon
points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
points={STAR_POLYGON_POINTS}
fill="#20403a"
stroke="none"
/>
@@ -321,7 +322,7 @@ class Product extends Component {
}}
>
<polygon
points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
points={STAR_POLYGON_POINTS}
fill="#40736b"
stroke="none"
/>
@@ -334,7 +335,7 @@ class Product extends Component {
height="50"
>
<polygon
points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
points={STAR_POLYGON_POINTS}
fill="#609688"
stroke="none"
/>

2
src/utils/starPolygon.js Normal file
View File

@@ -0,0 +1,2 @@
export const STAR_POLYGON_POINTS =
"30,2 36.286,21.348 56.63,21.348 40.172,33.305 46.458,52.652 30,40.695 13.542,52.652 19.828,33.305 3.37,21.348 23.714,21.348";