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

Add multi-pointed star feature to home page layout: Implemented a hoverable star graphic in the seeds box, enhancing visual engagement. Updated localization files to include new text for user prompts in multiple languages.

Browse Source
This commit is contained in:
sebseb7
2025-07-18 14:55:50 +02:00
parent 33fadc0279
commit 93887ce397
22 changed files with 186 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/MainPageLayout.js
View File

@@ -16,6 +16,7 @@ const MainPageLayout = () => {
const location = useLocation();
const currentPath = location.pathname;
const { t } = useTranslation();
const [starHovered, setStarHovered] = React.useState(false);
// Determine which page we're on
const isHome = currentPath === "/";
@@ -336,7 +337,120 @@ const MainPageLayout = () => {
}}
>
{contentBoxes.map((box, index) => (
<Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%" }}>
<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={{
position: 'absolute',
top: '-45px',
left: '-45px',
width: '180px',
height: '180px',
zIndex: 999,
pointerEvents: 'auto',
cursor: 'pointer'
}}
onMouseEnter={() => setStarHovered(true)}
onMouseLeave={() => setStarHovered(false)}
>
{/* Background star - slightly larger and rotated */}
<svg
viewBox="0 0 60 60"
width="168"
height="168"
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"
stroke="none"
/>
</svg>
{/* Middle star - medium size with different rotation */}
<svg
viewBox="0 0 60 60"
width="159"
height="159"
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"
stroke="none"
/>
</svg>
{/* Foreground star - main star with text */}
<svg
viewBox="0 0 60 60"
width="150"
height="150"
>
<polygon
points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
fill="#FFD700"
stroke="none"
/>
</svg>
{/* Text positioned in the center of the star */}
<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
}}
>
{t('sections.showUsPhoto')}
</div>
{/* Hover text */}
<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'
}}
>
{t('sections.selectSeedRate')}
</div>
</div>
)}
<div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>
<Paper
component={Link}