ef91e50aa5
- Updated image references in various components and configuration files to use AVIF format instead of PNG and JPG. - Modified the build process to include a script for converting images to AVIF, enhancing loading times and reducing file sizes. - Ensured consistency across the application by updating image paths in the footer, main layout, and content components.
285 lines
15 KiB
JavaScript
285 lines
15 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 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 === "filiale" && (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
top: '-55px',
|
|
left: '-45px',
|
|
width: '180px',
|
|
height: '180px',
|
|
zIndex: 999,
|
|
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' }
|
|
}}
|
|
>
|
|
<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 }}>
|
|
{translatedContent.showUsPhoto}
|
|
</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' }}>
|
|
{translatedContent.selectSeedRate}
|
|
</div>
|
|
</Box>
|
|
)}
|
|
{index === 1 && pageType === "filiale" && (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
bottom: '-45px',
|
|
right: '-65px',
|
|
width: '180px',
|
|
height: '180px',
|
|
zIndex: 999,
|
|
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' }
|
|
}}
|
|
>
|
|
<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' }}>
|
|
{translatedContent.indoorSeason}
|
|
</div>
|
|
</Box>
|
|
)}
|
|
<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 },
|
|
}}
|
|
onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
|
|
onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
|
|
>
|
|
<Box sx={{ height: "100%", bgcolor: box.bgcolor, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
|
{opacity === 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 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>
|
|
);
|
|
|
|
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.home') ,
|
|
aktionen: t('titles.aktionen'),
|
|
filiale: t('titles.filiale')
|
|
};
|
|
|
|
const allContentBoxes = {
|
|
home: [
|
|
{ title: t('sections.seeds'), image: "/assets/images/seeds.avif", bgcolor: "#e1f0d3", link: "/Kategorie/Seeds" },
|
|
{ title: t('sections.stecklinge'), image: "/assets/images/cutlings.avif", 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" }
|
|
]
|
|
};
|
|
|
|
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>
|
|
))}
|
|
</Box>
|
|
<SharedCarousel />
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default MainPageLayout;
|