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.
364 lines
12 KiB
JavaScript
364 lines
12 KiB
JavaScript
import React, { Component } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Typography from '@mui/material/Typography';
|
|
import Stack from '@mui/material/Stack';
|
|
import Link from '@mui/material/Link';
|
|
import { Link as RouterLink } from 'react-router-dom';
|
|
import { styled } from '@mui/material/styles';
|
|
import Paper from '@mui/material/Paper';
|
|
import { withI18n } from '../i18n/withTranslation.js';
|
|
|
|
// Styled component for the router links
|
|
const StyledRouterLink = styled(RouterLink)(() => ({
|
|
color: 'inherit',
|
|
fontSize: '13px',
|
|
textDecoration: 'none',
|
|
lineHeight: '1.5',
|
|
display: 'block',
|
|
padding: '4px 8px',
|
|
'&:hover': {
|
|
textDecoration: 'underline',
|
|
},
|
|
}));
|
|
|
|
// Styled component for the domain link
|
|
const StyledDomainLink = styled(Link)(() => ({
|
|
color: 'inherit',
|
|
textDecoration: 'none',
|
|
lineHeight: '1.5',
|
|
'&:hover': {
|
|
textDecoration: 'none',
|
|
},
|
|
}));
|
|
|
|
// Styled component for the dark overlay
|
|
const DarkOverlay = styled(Box)(() => ({
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100vw',
|
|
height: '100vh',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
zIndex: 9998,
|
|
pointerEvents: 'none',
|
|
transition: 'opacity 0.9s ease',
|
|
}));
|
|
|
|
// Styled component for the info bubble
|
|
const InfoBubble = styled(Paper)(({ theme }) => ({
|
|
position: 'fixed',
|
|
top: '50%',
|
|
left: '50%',
|
|
padding: theme.spacing(3),
|
|
zIndex: 9999,
|
|
pointerEvents: 'none',
|
|
backgroundColor: '#ffffff',
|
|
borderRadius: '12px',
|
|
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
|
|
minWidth: '280px',
|
|
maxWidth: '400px',
|
|
textAlign: 'center',
|
|
transition: 'all 0.9s ease',
|
|
}));
|
|
|
|
class Footer extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
showMapsInfo: false,
|
|
showReviewsInfo: false,
|
|
};
|
|
}
|
|
|
|
handleMapsMouseEnter = () => {
|
|
this.setState({ showMapsInfo: true });
|
|
};
|
|
|
|
handleMapsMouseLeave = () => {
|
|
this.setState({ showMapsInfo: false });
|
|
};
|
|
|
|
handleReviewsMouseEnter = () => {
|
|
this.setState({ showReviewsInfo: true });
|
|
};
|
|
|
|
handleReviewsMouseLeave = () => {
|
|
this.setState({ showReviewsInfo: false });
|
|
};
|
|
|
|
render() {
|
|
const { showMapsInfo, showReviewsInfo } = this.state;
|
|
|
|
return (
|
|
<>
|
|
{/* Dark overlay for Maps */}
|
|
<DarkOverlay sx={{
|
|
opacity: showMapsInfo ? 1 : 0
|
|
}} />
|
|
|
|
{/* Dark overlay for Reviews */}
|
|
<DarkOverlay sx={{
|
|
opacity: showReviewsInfo ? 1 : 0
|
|
}} />
|
|
|
|
{/* Info bubble */}
|
|
<InfoBubble
|
|
elevation={8}
|
|
sx={{
|
|
opacity: showMapsInfo ? 1 : 0,
|
|
visibility: showMapsInfo ? 'visible' : 'hidden',
|
|
transform: showMapsInfo ? 'translate(-50%, -50%) scale(1)' : 'translate(-50%, -50%) scale(0.8)'
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
mb: 2,
|
|
color: 'primary.main',
|
|
fontSize: '1.25rem'
|
|
}}
|
|
>
|
|
Filiale
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body1"
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
mb: 1,
|
|
color: 'text.primary'
|
|
}}
|
|
>
|
|
Öffnungszeiten:
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
mb: 1,
|
|
color: 'text.secondary'
|
|
}}
|
|
>
|
|
Mo-Fr 10-20
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
mb: 2,
|
|
color: 'text.secondary'
|
|
}}
|
|
>
|
|
Sa 11-19
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body1"
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
mb: 1,
|
|
color: 'text.primary'
|
|
}}
|
|
>
|
|
Trachenberger Straße 14 - Dresden
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
fontStyle: 'italic',
|
|
color: 'text.secondary'
|
|
}}
|
|
>
|
|
Zwischen Haltepunkt Pieschen und Trachenberger Platz
|
|
</Typography>
|
|
</InfoBubble>
|
|
|
|
{/* Reviews Info bubble */}
|
|
<InfoBubble
|
|
elevation={8}
|
|
sx={{
|
|
opacity: showReviewsInfo ? 1 : 0,
|
|
visibility: showReviewsInfo ? 'visible' : 'hidden',
|
|
transform: showReviewsInfo ? 'translate(-50%, -50%) scale(1)' : 'translate(-50%, -50%) scale(0.8)',
|
|
width: 'auto',
|
|
minWidth: 'auto',
|
|
maxWidth: '95vw',
|
|
maxHeight: '90vh',
|
|
padding: 2
|
|
}}
|
|
>
|
|
<Box
|
|
component="img"
|
|
src="/assets/images/reviews.jpg"
|
|
alt="Customer Reviews"
|
|
sx={{
|
|
width: '861px',
|
|
height: '371px',
|
|
maxWidth: '90vw',
|
|
maxHeight: '80vh',
|
|
borderRadius: '8px',
|
|
objectFit: 'contain'
|
|
}}
|
|
/>
|
|
</InfoBubble>
|
|
|
|
<Box
|
|
component="footer"
|
|
sx={{
|
|
py: 2,
|
|
px: 2,
|
|
mt: 'auto',
|
|
mb: 0,
|
|
backgroundColor: 'primary.dark',
|
|
color: 'white',
|
|
}}
|
|
>
|
|
<Stack
|
|
direction={{ xs: 'column', md: 'row' }}
|
|
sx={{ filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))',maxWidth: 'md', margin: 'auto' }}
|
|
spacing={{ xs: 3, md: 2 }}
|
|
justifyContent="space-between"
|
|
alignItems={{ xs: 'center', md: 'flex-end' }}
|
|
>
|
|
{/* Legal Links Section */}
|
|
<Stack
|
|
direction={{ xs: 'row', md: 'column' }}
|
|
spacing={{ xs: 2, md: 0.5 }}
|
|
justifyContent="center"
|
|
alignItems={{ xs: 'center', md: 'left' }}
|
|
flexWrap="wrap"
|
|
>
|
|
<StyledRouterLink to="/datenschutz">{this.props.t ? this.props.t('footer.legal.datenschutz') : 'Datenschutz'}</StyledRouterLink>
|
|
<StyledRouterLink to="/agb">{this.props.t ? this.props.t('footer.legal.agb') : 'AGB'}</StyledRouterLink>
|
|
<StyledRouterLink to="/sitemap">{this.props.t ? this.props.t('footer.legal.sitemap') : 'Sitemap'}</StyledRouterLink>
|
|
</Stack>
|
|
|
|
<Stack
|
|
direction={{ xs: 'row', md: 'column' }}
|
|
spacing={{ xs: 2, md: 0.5 }}
|
|
justifyContent="center"
|
|
alignItems={{ xs: 'center', md: 'left' }}
|
|
flexWrap="wrap"
|
|
>
|
|
<StyledRouterLink to="/impressum">{this.props.t ? this.props.t('footer.legal.impressum') : 'Impressum'}</StyledRouterLink>
|
|
<StyledRouterLink to="/batteriegesetzhinweise">{this.props.t ? this.props.t('footer.legal.batteriegesetzhinweise') : 'Batteriegesetzhinweise'}</StyledRouterLink>
|
|
<StyledRouterLink to="/widerrufsrecht">{this.props.t ? this.props.t('footer.legal.widerrufsrecht') : 'Widerrufsrecht'}</StyledRouterLink>
|
|
</Stack>
|
|
|
|
{/* Payment Methods Section
|
|
<Stack
|
|
direction="column"
|
|
spacing={1}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
spacing={{ xs: 1, md: 2 }}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
flexWrap="wrap"
|
|
>
|
|
<Box component="img" src="/assets/images/cards.png" alt="Cash" sx={{ height: { xs: 80, md: 95 } }} />
|
|
</Stack>
|
|
</Stack>
|
|
*/}
|
|
{/* Google Services Badge Section */}
|
|
<Stack
|
|
direction="column"
|
|
spacing={1}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
spacing={{ xs: 1, md: 2 }}
|
|
sx={{pt: '10px', height: { xs: 50, md: 60 }, transform: 'translateY(-3px)'}}
|
|
justifyContent="center"
|
|
alignItems="flex-end"
|
|
>
|
|
<Link
|
|
href="https://reviewthis.biz/growheads"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
sx={{
|
|
textDecoration: 'none',
|
|
position: 'relative',
|
|
zIndex: 9999,
|
|
display: 'inline-block',
|
|
height: { xs: 57, md: 67 },
|
|
lineHeight: 1
|
|
}}
|
|
onMouseEnter={this.handleReviewsMouseEnter}
|
|
onMouseLeave={this.handleReviewsMouseLeave}
|
|
>
|
|
<Box
|
|
component="img"
|
|
src="/assets/images/gg.avif"
|
|
alt="Google Reviews"
|
|
sx={{
|
|
height: { xs: 50, md: 60 },
|
|
width: { xs: 105, md: 126 },
|
|
cursor: 'pointer',
|
|
transition: 'all 2s ease',
|
|
'&:hover': {
|
|
transform: 'scale(1.5) translateY(-10px)'
|
|
}
|
|
}}
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://maps.app.goo.gl/D67ewDU3dZBda1BUA"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
sx={{
|
|
textDecoration: 'none',
|
|
position: 'relative',
|
|
zIndex: 9999,
|
|
display: 'inline-block',
|
|
height: { xs: 47, md: 67 },
|
|
lineHeight: 1
|
|
}}
|
|
onMouseEnter={this.handleMapsMouseEnter}
|
|
onMouseLeave={this.handleMapsMouseLeave}
|
|
>
|
|
<Box
|
|
component="img"
|
|
src="/assets/images/maps.avif"
|
|
alt="Google Maps"
|
|
sx={{
|
|
height: { xs: 40, md: 50 },
|
|
width: { xs: 38, md: 49 },
|
|
cursor: 'pointer',
|
|
transition: 'all 2s ease',
|
|
filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))',
|
|
'&:hover': {
|
|
transform: 'scale(1.5) translateY(-10px)',
|
|
filter: 'drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))'
|
|
}
|
|
}}
|
|
/>
|
|
</Link>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Copyright Section */}
|
|
<Box sx={{ pb:'20px',textAlign: 'center', filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))', opacity: 0.7 }}>
|
|
<Typography variant="body2" sx={{ mb: 1, fontSize: { xs: '11px', md: '14px' }, lineHeight: 1.5 }}>
|
|
{this.props.t ? this.props.t('footer.allPricesIncl') : '* Alle Preise inkl. gesetzlicher USt., zzgl. Versand'}
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ fontSize: { xs: '11px', md: '14px' }, lineHeight: 1.5 }}>
|
|
© {new Date().getFullYear()} <StyledDomainLink href="https://growheads.de" target="_blank" rel="noopener noreferrer">GrowHeads.de</StyledDomainLink>
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withI18n()(Footer);
|