size optimize
This commit is contained in:
sebseb7
@@ -12,342 +12,7 @@ import SharedCarousel from "./SharedCarousel.js";
|
|||||||
import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
|
import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
const MainPageLayout = () => {
|
const ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity, translatedContent }) => (
|
||||||
const location = useLocation();
|
|
||||||
const currentPath = location.pathname;
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [starHovered, setStarHovered] = React.useState(false);
|
|
||||||
|
|
||||||
const isHome = currentPath === "/";
|
|
||||||
const isAktionen = currentPath === "/aktionen";
|
|
||||||
const isFiliale = currentPath === "/filiale";
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.textContent = `
|
|
||||||
@keyframes rotateClockwise {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotateCounterClockwise {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(-360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.star-rotate-slow-cw {
|
|
||||||
animation: rotateClockwise 60s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.star-rotate-slow-ccw {
|
|
||||||
animation: rotateCounterClockwise 45s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.star-rotate-medium-cw {
|
|
||||||
animation: rotateClockwise 30s linear infinite;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
return () => {
|
|
||||||
document.head.removeChild(style);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
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.filiale'),
|
|
||||||
aktionen: t('titles.aktionen'),
|
|
||||||
filiale: t('titles.home')
|
|
||||||
};
|
|
||||||
|
|
||||||
const allContentBoxes = {
|
|
||||||
home: [
|
|
||||||
{
|
|
||||||
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"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
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.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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
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();
|
|
||||||
|
|
||||||
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>
|
|
||||||
<Box sx={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
mb: 4,
|
|
||||||
mt: 2,
|
|
||||||
px: 0,
|
|
||||||
transition: "all 0.3s ease-in-out",
|
|
||||||
flexDirection: {
|
|
||||||
xs: "column",
|
|
||||||
sm: "row"
|
|
||||||
}
|
|
||||||
}}>
|
|
||||||
<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>
|
|
||||||
<Box sx={{
|
|
||||||
display: { xs: "flex", sm: "contents" },
|
|
||||||
width: { xs: "100%", sm: "auto" },
|
|
||||||
justifyContent: { xs: "space-between", sm: "initial" },
|
|
||||||
alignItems: "center"
|
|
||||||
}}>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<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' }}>
|
<Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
|
||||||
{index === 0 && pageType === "filiale" && (
|
{index === 0 && pageType === "filiale" && (
|
||||||
<Box
|
<Box
|
||||||
@@ -364,93 +29,20 @@ const MainPageLayout = () => {
|
|||||||
display: { xs: 'none', sm: 'block' }
|
display: { xs: 'none', sm: 'block' }
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<svg
|
<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)' }}>
|
||||||
viewBox="0 0 60 60"
|
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#B8860B" />
|
||||||
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"
|
|
||||||
stroke="none"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
<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)' }}>
|
||||||
viewBox="0 0 60 60"
|
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#DAA520" />
|
||||||
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"
|
|
||||||
stroke="none"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg viewBox="0 0 60 60" width="150" height="150" className="star-rotate-medium-cw">
|
||||||
viewBox="0 0 60 60"
|
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#FFD700" />
|
||||||
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"
|
|
||||||
stroke="none"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
<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', transition: 'opacity 0.3s ease', opacity: starHovered ? 0 : 1 }}>
|
||||||
style={{
|
{translatedContent.showUsPhoto}
|
||||||
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>
|
</div>
|
||||||
<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' }}>
|
||||||
style={{
|
{translatedContent.selectSeedRate}
|
||||||
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>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
@@ -465,76 +57,21 @@ const MainPageLayout = () => {
|
|||||||
zIndex: 999,
|
zIndex: 999,
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
'& *': { pointerEvents: 'none' },
|
'& *': { pointerEvents: 'none' },
|
||||||
filter:
|
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))',
|
||||||
'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' }
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<svg
|
<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)' }}>
|
||||||
viewBox="0 0 60 60"
|
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#5F9EA0" />
|
||||||
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"
|
|
||||||
stroke="none"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
<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)' }}>
|
||||||
viewBox="0 0 60 60"
|
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#7FCDCD" />
|
||||||
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"
|
|
||||||
stroke="none"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg viewBox="0 0 60 60" width="150" height="150" className="star-rotate-slow-cw">
|
||||||
viewBox="0 0 60 60"
|
<polygon points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20" fill="#AFEEEE" />
|
||||||
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"
|
|
||||||
stroke="none"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
<div
|
<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' }}>
|
||||||
style={{
|
{translatedContent.indoorSeason}
|
||||||
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'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('sections.indoorSeason')}
|
|
||||||
</div>
|
</div>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
@@ -553,63 +90,188 @@ const MainPageLayout = () => {
|
|||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
boxShadow: 10,
|
boxShadow: 10,
|
||||||
transition: "all 0.3s ease",
|
transition: "all 0.3s ease",
|
||||||
"&:hover": {
|
"&:hover": { transform: "translateY(-5px)", boxShadow: 20 },
|
||||||
transform: "translateY(-5px)",
|
|
||||||
boxShadow: 20,
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
|
onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
|
||||||
onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
|
onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
|
||||||
>
|
>
|
||||||
<Box
|
<Box sx={{ height: "100%", bgcolor: box.bgcolor, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||||
sx={{
|
{opacity === 1 && (
|
||||||
height: "100%",
|
<img src={box.image} alt={box.title} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }} />
|
||||||
bgcolor: box.bgcolor,
|
|
||||||
position: "relative",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{getOpacity(pageType) === 1 && (
|
|
||||||
<img
|
|
||||||
src={box.image}
|
|
||||||
alt={box.title}
|
|
||||||
style={{
|
|
||||||
maxWidth: "100%",
|
|
||||||
maxHeight: "100%",
|
|
||||||
objectFit: "contain",
|
|
||||||
position: "absolute",
|
|
||||||
top: "50%",
|
|
||||||
left: "50%",
|
|
||||||
transform: "translate(-50%, -50%)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
<Box
|
<Box sx={{ position: "absolute", bottom: 0, left: 0, right: 0, bgcolor: "rgba(27, 94, 32, 0.8)", p: 1 }}>
|
||||||
sx={{
|
<Typography sx={{ fontSize: "1.6rem", color: "white", fontFamily: "SwashingtonCP" }}>{box.title}</Typography>
|
||||||
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>
|
||||||
</Box>
|
</Box>
|
||||||
</Paper>
|
</Paper>
|
||||||
</div>
|
</div>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
);
|
||||||
|
|
||||||
|
const MainPageLayout = () => {
|
||||||
|
const location = useLocation();
|
||||||
|
const currentPath = location.pathname;
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [starHovered, setStarHovered] = React.useState(false);
|
||||||
|
const translatedContent = {
|
||||||
|
showUsPhoto: t('sections.showUsPhoto'),
|
||||||
|
selectSeedRate: t('sections.selectSeedRate'),
|
||||||
|
indoorSeason: t('sections.indoorSeason')
|
||||||
|
};
|
||||||
|
|
||||||
|
const isHome = currentPath === "/";
|
||||||
|
const isAktionen = currentPath === "/aktionen";
|
||||||
|
const isFiliale = currentPath === "/filiale";
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes rotateClockwise {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
@keyframes rotateCounterClockwise {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
.star-rotate-slow-cw {
|
||||||
|
animation: rotateClockwise 60s linear infinite;
|
||||||
|
}
|
||||||
|
.star-rotate-slow-ccw {
|
||||||
|
animation: rotateCounterClockwise 45s linear infinite;
|
||||||
|
}
|
||||||
|
.star-rotate-medium-cw {
|
||||||
|
animation: rotateClockwise 30s linear infinite;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
return () => document.head.removeChild(style);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getNavigationConfig = () => {
|
||||||
|
if (isHome) return { leftNav: { text: t('navigation.aktionen'), link: "/aktionen" }, rightNav: { text: t('navigation.filiale'), link: "/filiale" } };
|
||||||
|
if (isAktionen) return { leftNav: { text: t('navigation.filiale'), link: "/filiale" }, rightNav: { text: t('navigation.home'), link: "/" } };
|
||||||
|
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.filiale'),
|
||||||
|
aktionen: t('titles.aktionen'),
|
||||||
|
filiale: t('titles.home')
|
||||||
|
};
|
||||||
|
|
||||||
|
const allContentBoxes = {
|
||||||
|
home: [
|
||||||
|
{ 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" }
|
||||||
|
],
|
||||||
|
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.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" }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
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();
|
||||||
|
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>
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 4, mt: 2, px: 0, transition: "all 0.3s ease-in-out", flexDirection: { xs: "column", sm: "row" } }}>
|
||||||
|
<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>
|
||||||
|
<Box sx={{ display: { xs: "flex", sm: "contents" }, width: { xs: "100%", sm: "auto" }, justifyContent: { xs: "space-between", sm: "initial" }, alignItems: "center" }}>
|
||||||
|
<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;
|
||||||
|
return (
|
||||||
|
<Box key={navItem.key} component={Link} to={navItem.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>
|
||||||
|
<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>
|
||||||
|
<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;
|
||||||
|
return (
|
||||||
|
<Box key={navItem.key} component={Link} to={navItem.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>
|
||||||
|
<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) => (
|
||||||
|
<ContentBox
|
||||||
|
key={`${pageType}-${index}`}
|
||||||
|
box={box}
|
||||||
|
index={index}
|
||||||
|
pageType={pageType}
|
||||||
|
starHovered={starHovered}
|
||||||
|
setStarHovered={setStarHovered}
|
||||||
|
opacity={getOpacity(pageType)}
|
||||||
|
translatedContent={translatedContent}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user