521 lines
18 KiB
JavaScript
521 lines
18 KiB
JavaScript
import React from "react";
|
|
import { useLocation } from "react-router-dom";
|
|
import Container from "@mui/material/Container";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import Paper from "@mui/material/Paper";
|
|
import Grid from "@mui/material/Grid";
|
|
import ChevronLeft from "@mui/icons-material/ChevronLeft";
|
|
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 { useTranslation } from 'react-i18next';
|
|
|
|
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 === "/";
|
|
const isAktionen = currentPath === "/aktionen";
|
|
const isFiliale = currentPath === "/filiale";
|
|
|
|
// Get navigation config based on current page
|
|
const getNavigationConfig = () => {
|
|
if (isHome) {
|
|
return {
|
|
leftNav: { text: t('navigation.aktionen'), link: "/aktionen" },
|
|
rightNav: { text: t('navigation.filiale'), link: "/filiale" }
|
|
};
|
|
} else if (isAktionen) {
|
|
return {
|
|
leftNav: { text: t('navigation.filiale'), link: "/filiale" },
|
|
rightNav: { text: t('navigation.home'), link: "/" }
|
|
};
|
|
} else if (isFiliale) {
|
|
return {
|
|
leftNav: { text: t('navigation.home'), link: "/" },
|
|
rightNav: { text: t('navigation.aktionen'), link: "/aktionen" }
|
|
};
|
|
}
|
|
return { leftNav: null, rightNav: null };
|
|
};
|
|
|
|
const allTitles = {
|
|
home: t('titles.home'),
|
|
aktionen: t('titles.aktionen'),
|
|
filiale: t('titles.filiale')
|
|
};
|
|
|
|
// Define all content boxes for layered rendering
|
|
const allContentBoxes = {
|
|
home: [
|
|
{
|
|
title: t('sections.seeds'),
|
|
image: "/assets/images/seeds.jpg",
|
|
bgcolor: "#e1f0d3",
|
|
link: "/Kategorie/Seeds"
|
|
},
|
|
{
|
|
title: t('sections.stecklinge'),
|
|
image: "/assets/images/cutlings.jpg",
|
|
bgcolor: "#e8f5d6",
|
|
link: "/Kategorie/Stecklinge"
|
|
}
|
|
],
|
|
aktionen: [
|
|
{
|
|
title: t('sections.oilPress'),
|
|
image: "/assets/images/presse.jpg",
|
|
bgcolor: "#e1f0d3",
|
|
link: "/presseverleih"
|
|
},
|
|
{
|
|
title: t('sections.thcTest'),
|
|
image: "/assets/images/purpl.jpg",
|
|
bgcolor: "#e8f5d6",
|
|
link: "/thc-test"
|
|
}
|
|
],
|
|
filiale: [
|
|
{
|
|
title: t('sections.address1'),
|
|
image: "/assets/images/filiale1.jpg",
|
|
bgcolor: "#e1f0d3",
|
|
link: "/filiale"
|
|
},
|
|
{
|
|
title: t('sections.address2'),
|
|
image: "/assets/images/filiale2.jpg",
|
|
bgcolor: "#e8f5d6",
|
|
link: "/filiale"
|
|
}
|
|
]
|
|
};
|
|
|
|
// Get opacity for each page layer
|
|
const getOpacity = (pageType) => {
|
|
if (pageType === "home" && isHome) return 1;
|
|
if (pageType === "aktionen" && isAktionen) return 1;
|
|
if (pageType === "filiale" && isFiliale) return 1;
|
|
return 0;
|
|
};
|
|
|
|
const navConfig = getNavigationConfig();
|
|
|
|
// Navigation text mapping for translation
|
|
const navTexts = [
|
|
{ key: 'aktionen', text: t('navigation.aktionen'), link: '/aktionen' },
|
|
{ key: 'filiale', text: t('navigation.filiale'), link: '/filiale' },
|
|
{ key: 'home', text: t('navigation.home'), link: '/' }
|
|
];
|
|
|
|
return (
|
|
<Container maxWidth="lg" sx={{ py: 2 }}>
|
|
<style>{getCombinedAnimatedBorderStyles(['seeds', 'cutlings'])}</style>
|
|
|
|
{/* Main Navigation Header */}
|
|
<Box sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
mb: 4,
|
|
mt: 2,
|
|
px: 0,
|
|
transition: "all 0.3s ease-in-out",
|
|
// Portrait phone: stack title above navigation
|
|
flexDirection: {
|
|
xs: "column",
|
|
sm: "row"
|
|
}
|
|
}}>
|
|
{/* Title for portrait phones - shown first */}
|
|
<Box sx={{
|
|
display: { xs: "block", sm: "none" },
|
|
mb: { xs: 2, sm: 0 },
|
|
width: "100%",
|
|
textAlign: "center",
|
|
position: "relative"
|
|
}}>
|
|
{Object.entries(allTitles).map(([pageType, title]) => (
|
|
<Typography
|
|
key={pageType}
|
|
variant="h3"
|
|
component="h1"
|
|
sx={{
|
|
fontFamily: "SwashingtonCP",
|
|
fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
|
|
textAlign: "center",
|
|
color: "primary.main",
|
|
textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
|
|
transition: "opacity 0.5s ease-in-out",
|
|
opacity: getOpacity(pageType),
|
|
position: pageType === "home" ? "relative" : "absolute",
|
|
top: pageType !== "home" ? 0 : "auto",
|
|
left: pageType !== "home" ? 0 : "auto",
|
|
transform: "none",
|
|
width: "100%",
|
|
pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
|
|
lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
|
|
wordWrap: "break-word",
|
|
hyphens: "auto"
|
|
}}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
))}
|
|
</Box>
|
|
|
|
{/* Navigation container for portrait phones */}
|
|
<Box sx={{
|
|
display: { xs: "flex", sm: "contents" },
|
|
width: { xs: "100%", sm: "auto" },
|
|
justifyContent: { xs: "space-between", sm: "initial" },
|
|
alignItems: "center"
|
|
}}>
|
|
{/* Left Navigation - Layered rendering */}
|
|
<Box sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexShrink: 0,
|
|
justifyContent: "flex-start",
|
|
position: "relative",
|
|
mr: { xs: 0, sm: 2 }
|
|
}}>
|
|
{navTexts.map((navItem, index) => {
|
|
const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
|
|
const link = navItem.link;
|
|
|
|
return (
|
|
<Box
|
|
key={navItem.key}
|
|
component={Link}
|
|
to={link}
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
textDecoration: "none",
|
|
color: "inherit",
|
|
transition: "all 0.3s ease",
|
|
opacity: isActive ? 1 : 0,
|
|
position: index === 0 ? "relative" : "absolute",
|
|
left: index !== 0 ? 0 : "auto",
|
|
pointerEvents: isActive ? "auto" : "none",
|
|
"&:hover": {
|
|
transform: "translateX(-5px)",
|
|
color: "primary.main"
|
|
}
|
|
}}
|
|
>
|
|
<ChevronLeft sx={{ fontSize: "2rem", mr: 1 }} />
|
|
<Typography
|
|
sx={{
|
|
fontFamily: "SwashingtonCP",
|
|
fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
|
|
textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
|
|
lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
{navItem.text}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
|
|
{/* Center Title - Layered rendering - Hidden on portrait phones, shown on larger screens */}
|
|
<Box sx={{
|
|
flex: 1,
|
|
display: { xs: "none", sm: "flex" },
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
px: 0,
|
|
position: "relative",
|
|
minWidth: 0
|
|
}}>
|
|
{Object.entries(allTitles).map(([pageType, title]) => (
|
|
<Typography
|
|
key={pageType}
|
|
variant="h3"
|
|
component="h1"
|
|
sx={{
|
|
fontFamily: "SwashingtonCP",
|
|
fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
|
|
textAlign: "center",
|
|
color: "primary.main",
|
|
textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
|
|
transition: "opacity 0.5s ease-in-out",
|
|
opacity: getOpacity(pageType),
|
|
position: pageType === "home" ? "relative" : "absolute",
|
|
top: pageType !== "home" ? "50%" : "auto",
|
|
left: pageType !== "home" ? "50%" : "auto",
|
|
transform: pageType !== "home" ? "translate(-50%, -50%)" : "none",
|
|
width: "100%",
|
|
pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
|
|
lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
|
|
wordWrap: "break-word",
|
|
hyphens: "auto"
|
|
}}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
))}
|
|
</Box>
|
|
|
|
{/* Right Navigation - Layered rendering */}
|
|
<Box sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexShrink: 0,
|
|
justifyContent: "flex-end",
|
|
position: "relative",
|
|
ml: { xs: 0, sm: 2 }
|
|
}}>
|
|
{navTexts.map((navItem, index) => {
|
|
const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
|
|
const link = navItem.link;
|
|
|
|
return (
|
|
<Box
|
|
key={navItem.key}
|
|
component={Link}
|
|
to={link}
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
textDecoration: "none",
|
|
color: "inherit",
|
|
transition: "all 0.3s ease",
|
|
opacity: isActive ? 1 : 0,
|
|
position: index === 0 ? "relative" : "absolute",
|
|
right: index !== 0 ? 0 : "auto",
|
|
pointerEvents: isActive ? "auto" : "none",
|
|
"&:hover": {
|
|
transform: "translateX(5px)",
|
|
color: "primary.main"
|
|
}
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
fontFamily: "SwashingtonCP",
|
|
fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
|
|
textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
|
|
lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
{navItem.text}
|
|
</Typography>
|
|
<ChevronRight sx={{ fontSize: "2rem", ml: 1 }} />
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Content Boxes - Layered rendering */}
|
|
<Box sx={{ position: "relative", mb: 4 }}>
|
|
{Object.entries(allContentBoxes).map(([pageType, contentBoxes]) => (
|
|
<Grid
|
|
key={pageType}
|
|
container
|
|
spacing={0}
|
|
sx={{
|
|
transition: "opacity 0.5s ease-in-out",
|
|
opacity: getOpacity(pageType),
|
|
position: pageType === "home" ? "relative" : "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none"
|
|
}}
|
|
>
|
|
{contentBoxes.map((box, index) => (
|
|
<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}
|
|
to={box.link}
|
|
sx={{
|
|
p: 0,
|
|
textDecoration: "none",
|
|
color: "text.primary",
|
|
borderRadius: 2,
|
|
overflow: "hidden",
|
|
height: { xs: 150, sm: 200, md: 300 },
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
boxShadow: 10,
|
|
transition: "all 0.3s ease",
|
|
"&:hover": {
|
|
transform: "translateY(-5px)",
|
|
boxShadow: 20,
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
height: "100%",
|
|
bgcolor: box.bgcolor,
|
|
backgroundImage: `url("${box.image}")`,
|
|
backgroundSize: "contain",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bgcolor: "rgba(27, 94, 32, 0.8)",
|
|
p: 1,
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
fontSize: "1.6rem",
|
|
color: "white",
|
|
fontFamily: "SwashingtonCP",
|
|
}}
|
|
>
|
|
{box.title}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
</div>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
))}
|
|
</Box>
|
|
|
|
{/* Shared Carousel */}
|
|
<SharedCarousel />
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default MainPageLayout;
|