439 lines
19 KiB
JavaScript
439 lines
19 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 { STAR_POLYGON_POINTS } from "../utils/starPolygon.js";
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const HOME_STAR_LAYERS = [
|
|
{ className: "star-rotate-slow-cw", size: 168 },
|
|
{ className: "star-rotate-slow-ccw", size: 159 },
|
|
{ className: "star-rotate-medium-cw", size: 150 },
|
|
];
|
|
|
|
/** Teal/cyan stack for the right (Konfigurator) star — same motion, blue color scheme */
|
|
const TEAL_STAR_LAYERS = [
|
|
{ className: "star-rotate-slow-ccw", size: 168 },
|
|
{ className: "star-rotate-medium-cw", size: 159 },
|
|
{ className: "star-rotate-slow-cw", size: 150 },
|
|
];
|
|
|
|
/** Initial fill per variant (matches keyframe 0%) — avoids black flash before CSS animates */
|
|
const STAR_INITIAL_FILLS = {
|
|
home: ["#B8860B", "#DAA520", "#FFD700"],
|
|
filiale: ["#5F9EA0", "#7FCDCD", "#AFEEEE"],
|
|
};
|
|
|
|
/** Injected in render (not useEffect) so first paint already has keyframes — avoids angle/color snap on load */
|
|
const STAR_DECORATION_CSS = `
|
|
@keyframes rotateClockwise {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes rotateCounterClockwise {
|
|
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;
|
|
}
|
|
.star-rotate-slow-ccw {
|
|
animation: rotateCounterClockwise 45s linear infinite;
|
|
}
|
|
.star-rotate-medium-cw {
|
|
animation: rotateClockwise 30s linear infinite;
|
|
}
|
|
|
|
.star-layer-svg-home {
|
|
mix-blend-mode: screen;
|
|
opacity: 0.92;
|
|
filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
|
|
}
|
|
.star-layer-svg-filiale {
|
|
mix-blend-mode: soft-light;
|
|
opacity: 0.94;
|
|
filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(127, 205, 205, 0.6)) drop-shadow(0 0 18px rgba(95, 158, 160, 0.35));
|
|
}
|
|
.star-layer-svg {
|
|
shape-rendering: geometricPrecision;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
@keyframes starFillHome0 {
|
|
0%, 100% { fill: #B8860B; }
|
|
33% { fill: #FFD700; }
|
|
66% { fill: #DAA520; }
|
|
}
|
|
@keyframes starFillHome1 {
|
|
0%, 100% { fill: #DAA520; }
|
|
33% { fill: #B8860B; }
|
|
66% { fill: #FFD700; }
|
|
}
|
|
@keyframes starFillHome2 {
|
|
0%, 100% { fill: #FFD700; }
|
|
33% { fill: #DAA520; }
|
|
66% { fill: #B8860B; }
|
|
}
|
|
@keyframes starDriftHome0 {
|
|
0%, 100% { transform: rotate(20deg) translate(0px, 0px); }
|
|
50% { transform: rotate(20deg) translate(5px, -5px); }
|
|
}
|
|
@keyframes starDriftHome1 {
|
|
0%, 100% { transform: rotate(-25deg) translate(0px, 0px); }
|
|
50% { transform: rotate(-25deg) translate(-4px, 6px); }
|
|
}
|
|
@keyframes starDriftHome2 {
|
|
0%, 100% { transform: translate(0px, 0px); }
|
|
50% { transform: translate(3px, 4px); }
|
|
}
|
|
.star-layer-wrap.star-layer-home-0 {
|
|
animation: starDriftHome0 6.5s ease-in-out infinite;
|
|
animation-fill-mode: both;
|
|
}
|
|
.star-layer-wrap.star-layer-home-1 {
|
|
animation: starDriftHome1 7s ease-in-out 0.4s infinite;
|
|
animation-fill-mode: both;
|
|
}
|
|
.star-layer-wrap.star-layer-home-2 {
|
|
animation: starDriftHome2 5.5s ease-in-out 0.8s infinite;
|
|
animation-fill-mode: both;
|
|
}
|
|
.star-poly-home-0 { animation: starFillHome0 10s ease-in-out 0s infinite both; }
|
|
.star-poly-home-1 { animation: starFillHome1 10s ease-in-out 1.1s infinite both; }
|
|
.star-poly-home-2 { animation: starFillHome2 10s ease-in-out 2.2s infinite both; }
|
|
|
|
@keyframes starFillFil0 {
|
|
0%, 100% { fill: #5F9EA0; }
|
|
33% { fill: #AFEEEE; }
|
|
66% { fill: #7FCDCD; }
|
|
}
|
|
@keyframes starFillFil1 {
|
|
0%, 100% { fill: #7FCDCD; }
|
|
33% { fill: #5F9EA0; }
|
|
66% { fill: #AFEEEE; }
|
|
}
|
|
@keyframes starFillFil2 {
|
|
0%, 100% { fill: #AFEEEE; }
|
|
33% { fill: #7FCDCD; }
|
|
66% { fill: #5F9EA0; }
|
|
}
|
|
@keyframes starDriftFil0 {
|
|
0%, 100% { transform: rotate(20deg) translate(0px, 0px); }
|
|
50% { transform: rotate(20deg) translate(4px, -4px); }
|
|
}
|
|
@keyframes starDriftFil1 {
|
|
0%, 100% { transform: rotate(-25deg) translate(0px, 0px); }
|
|
50% { transform: rotate(-25deg) translate(-5px, 5px); }
|
|
}
|
|
@keyframes starDriftFil2 {
|
|
0%, 100% { transform: translate(0px, 0px); }
|
|
50% { transform: translate(3px, 3px); }
|
|
}
|
|
.star-layer-wrap.star-layer-filiale-0 {
|
|
animation: starDriftFil0 6.5s ease-in-out infinite;
|
|
animation-fill-mode: both;
|
|
}
|
|
.star-layer-wrap.star-layer-filiale-1 {
|
|
animation: starDriftFil1 7s ease-in-out 0.4s infinite;
|
|
animation-fill-mode: both;
|
|
}
|
|
.star-layer-wrap.star-layer-filiale-2 {
|
|
animation: starDriftFil2 5.5s ease-in-out 0.8s infinite;
|
|
animation-fill-mode: both;
|
|
}
|
|
.star-poly-filiale-0 { animation: starFillFil0 10s ease-in-out 0s infinite both; }
|
|
.star-poly-filiale-1 { animation: starFillFil1 10s ease-in-out 1.1s infinite both; }
|
|
.star-poly-filiale-2 { animation: starFillFil2 10s ease-in-out 2.2s infinite both; }
|
|
`;
|
|
|
|
const StarDecorationLayers = ({ layers, variant }) => (
|
|
<>
|
|
{layers.map(({ className, size }, i) => {
|
|
const half = size / 2;
|
|
const initialFill = STAR_INITIAL_FILLS[variant][i];
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={`star-layer-wrap star-layer-${variant}-${i}`}
|
|
style={{
|
|
position: "absolute",
|
|
left: "50%",
|
|
top: "50%",
|
|
width: size,
|
|
height: size,
|
|
marginLeft: -half,
|
|
marginTop: -half,
|
|
zIndex: 3 - i,
|
|
}}
|
|
>
|
|
<svg
|
|
viewBox="0 0 60 60"
|
|
width="100%"
|
|
height="100%"
|
|
className={`${className} star-layer-svg star-layer-svg-${variant}`}
|
|
style={{ display: "block" }}
|
|
>
|
|
<polygon
|
|
points={STAR_POLYGON_POINTS}
|
|
fill={initialFill}
|
|
className={`star-poly-fill star-poly-${variant}-${i}`}
|
|
/>
|
|
</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" && (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
top: '-55px',
|
|
left: '-45px',
|
|
width: '180px',
|
|
height: '180px',
|
|
zIndex: 999,
|
|
pointerEvents: 'none',
|
|
'& *': { pointerEvents: 'none' },
|
|
display: { xs: 'none', sm: 'block' }
|
|
}}
|
|
>
|
|
<StarDecorationLayers layers={HOME_STAR_LAYERS} variant="home" />
|
|
<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: '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>
|
|
)}
|
|
{index === 1 && pageType === "home" && (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
bottom: '-45px',
|
|
right: '-65px',
|
|
width: '180px',
|
|
height: '180px',
|
|
zIndex: 999,
|
|
pointerEvents: 'none',
|
|
'& *': { pointerEvents: 'none' },
|
|
display: { xs: 'none', sm: 'block' }
|
|
}}
|
|
>
|
|
<StarDecorationLayers layers={TEAL_STAR_LAYERS} variant="filiale" />
|
|
<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.buildYourSet}
|
|
</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: "box-shadow 0.3s ease",
|
|
"&:hover": { boxShadow: 20 },
|
|
}}
|
|
onMouseEnter={
|
|
pageType === "home" && index === 0
|
|
? () => setStarHovered(true)
|
|
: undefined
|
|
}
|
|
onMouseLeave={
|
|
pageType === "home" && index === 0
|
|
? () => 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 = {
|
|
buildYourSet: t('sections.buildYourSet'),
|
|
selectSeedRate: t('sections.selectSeedRate'),
|
|
outdoorSeason: t('sections.outdoorSeason')
|
|
};
|
|
|
|
const isHome = currentPath === "/";
|
|
const isAktionen = currentPath === "/aktionen";
|
|
const isFiliale = currentPath === "/filiale";
|
|
|
|
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.konfigurator'), image: "/assets/images/konfigurator.avif", bgcolor: "#e8f5d6", link: "/Konfigurator" }
|
|
],
|
|
aktionen: [
|
|
{ title: t('sections.oilPress'), image: "/assets/images/presse.jpg", bgcolor: "#e1f0d3", link: "/Artikel/Graveda-10t-presse-tagesmiete-inkl-prepress-vorpressform" },
|
|
{ title: t('sections.thcTest'), image: "/assets/images/purpl.jpg", bgcolor: "#e8f5d6", link: "/Artikel/1x-messung-purplpro-thc-cbd-restfeuchte-wasseraktivitaet" }
|
|
],
|
|
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>
|
|
<style>{STAR_DECORATION_CSS}</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;
|