|
@@ -0,0 +1,157 @@
|
|
|
+import {Container, Typography, Link, Grid, Box, useMediaQuery} from "@mui/material";
|
|
|
+import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
|
|
|
+import LocationOnIcon from '@mui/icons-material/LocationOn';
|
|
|
+import EmailIcon from '@mui/icons-material/Email';
|
|
|
+import WatchLaterIcon from '@mui/icons-material/WatchLater';
|
|
|
+import FacebookIcon from '@mui/icons-material/Facebook';
|
|
|
+import InstagramIcon from '@mui/icons-material/Instagram';
|
|
|
+import TwitterIcon from '@mui/icons-material/Twitter';
|
|
|
+import YouTubeIcon from '@mui/icons-material/YouTube';
|
|
|
+import LinkRouter from "react-router-dom/es/Link";
|
|
|
+import background from "../img/footer/bg-footer.png"
|
|
|
+import "../scss/Footer.scss"
|
|
|
+
|
|
|
+
|
|
|
+const contactDefault = [
|
|
|
+ {'icon': LocalPhoneIcon, 'text': '+123 488 9652', 'url': '#'},
|
|
|
+ {'icon': LocationOnIcon, 'text': '25 West 21th Street, Miami FL, USA', 'url': '#'},
|
|
|
+ {'icon': EmailIcon, 'text': 'info@abraxas.com', 'url': '#'},
|
|
|
+ {'icon': WatchLaterIcon, 'text': 'Mon-Fri: 10:00 - 18:00', 'url': '#'}
|
|
|
+]
|
|
|
+const linksSocialDefault = [
|
|
|
+ {'icon': FacebookIcon, 'url': 'https://www.facebook.com/'},
|
|
|
+ {'icon': InstagramIcon, 'url': 'https://www.instagram.com/'},
|
|
|
+ {'icon': TwitterIcon, 'url': 'https://twitter.com/home'},
|
|
|
+ {'icon': YouTubeIcon, 'url': 'https://www.youtube.com/'},
|
|
|
+]
|
|
|
+
|
|
|
+const Contact = ({Icon, text, link}) => {
|
|
|
+ return (
|
|
|
+ <Typography
|
|
|
+ color="inherit"
|
|
|
+ variant="h6"
|
|
|
+ noWrap
|
|
|
+ component="div"
|
|
|
+ >
|
|
|
+ <Link
|
|
|
+ className='Footer__Contact'
|
|
|
+ display="flex"
|
|
|
+ flexDirection="row"
|
|
|
+ alignItems="center"
|
|
|
+ textAlign="left"
|
|
|
+ padding="10px 0"
|
|
|
+ component="a"
|
|
|
+ variant="body2"
|
|
|
+ color="#fff"
|
|
|
+ underline="none"
|
|
|
+ href={link}
|
|
|
+ >
|
|
|
+ <Icon />
|
|
|
+ {text}
|
|
|
+ </Link>
|
|
|
+ </Typography>
|
|
|
+ )
|
|
|
+}
|
|
|
+const Social = ({Icon, link}) => {
|
|
|
+ return (
|
|
|
+ <Link
|
|
|
+ className='Footer__Social'
|
|
|
+ marginRight="30px"
|
|
|
+ component="a"
|
|
|
+ variant="body2"
|
|
|
+ href={link}
|
|
|
+ color="#969696"
|
|
|
+ underline="none"
|
|
|
+ >
|
|
|
+ <Icon />
|
|
|
+ </Link>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const Footer = ({contact=contactDefault, linksSocial=linksSocialDefault}) => {
|
|
|
+ const matches = useMediaQuery('(max-width:899px)');
|
|
|
+ const matches2 = useMediaQuery('(max-width:450px)');
|
|
|
+ return (
|
|
|
+ <footer
|
|
|
+ className="Footer"
|
|
|
+ style={{background: `url(${background}) center repeat`, padding: "40px 0"}}
|
|
|
+ >
|
|
|
+ <Container maxWidth="lg">
|
|
|
+ <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 1, sm: 8, md: 12 }}>
|
|
|
+ <Grid
|
|
|
+ item
|
|
|
+ sm={12} md={4}
|
|
|
+ width={matches ? "100%" : "auto"}
|
|
|
+ >
|
|
|
+ {(contact || []).map(item =>
|
|
|
+ <Contact Icon={item.icon} text={item.text} link={item.url}/>
|
|
|
+ )}
|
|
|
+ </Grid>
|
|
|
+ <Grid
|
|
|
+ item
|
|
|
+ sm={12} md={4}
|
|
|
+ display="flex"
|
|
|
+ flexDirection="column"
|
|
|
+ alignItems="center"
|
|
|
+ justifyContent="center"
|
|
|
+ width={matches ? "100%" : "auto"}
|
|
|
+ >
|
|
|
+ <Typography
|
|
|
+ variant="h4"
|
|
|
+ textAlign="center"
|
|
|
+ marginBottom="20px"
|
|
|
+ >
|
|
|
+ <LinkRouter to='/' className="Footer__Logo"> ABRAXAS </LinkRouter>
|
|
|
+ </Typography>
|
|
|
+ <Box>
|
|
|
+ {(linksSocial || []).map(item =>
|
|
|
+ <Social Icon={item.icon} link={item.url}/>
|
|
|
+ )}
|
|
|
+ </Box>
|
|
|
+ </Grid>
|
|
|
+ <Grid
|
|
|
+ item
|
|
|
+ sm={12} md={4}
|
|
|
+ display="flex"
|
|
|
+ justifyContent={matches ? "center" : "end"}
|
|
|
+ width={matches ? "100%" : "auto"}
|
|
|
+ >
|
|
|
+ <Typography
|
|
|
+ variant="body1"
|
|
|
+ textAlign={matches ? "center" : "right"}
|
|
|
+ color="#969696"
|
|
|
+ fontSize="14px"
|
|
|
+ maxWidth="275px"
|
|
|
+ lineHeight="1.7em"
|
|
|
+ >
|
|
|
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, animi consectetur, dicta dolore doloremque eum exercitationem illum incidunt inventore ipsam itaque, modi odio odit quo sed sint suscipit vitae voluptates.
|
|
|
+ </Typography>
|
|
|
+ </Grid>
|
|
|
+ </Grid>
|
|
|
+ <Box
|
|
|
+ display="flex"
|
|
|
+ flexDirection={matches2 ? "column-reverse" : "row"}
|
|
|
+ alignItems="center"
|
|
|
+ justifyContent="space-between"
|
|
|
+ marginTop="30px"
|
|
|
+ >
|
|
|
+ <Typography
|
|
|
+ variant="body2"
|
|
|
+ color="#969696"
|
|
|
+ fontSize="13px"
|
|
|
+ >
|
|
|
+ © 2022 ABRAXAS. All rights reserved.
|
|
|
+ </Typography>
|
|
|
+ <Typography
|
|
|
+ variant="body2"
|
|
|
+ marginBottom={matches2 ? "10px" : "0"}
|
|
|
+ >
|
|
|
+ <LinkRouter to='/privacy-policy' className="Footer__Bottom-link"> PRIVACY POLICY </LinkRouter>
|
|
|
+ <LinkRouter to='/faq' className="Footer__Bottom-link"> FAQ </LinkRouter>
|
|
|
+ </Typography>
|
|
|
+ </Box>
|
|
|
+ </Container>
|
|
|
+ </footer>
|
|
|
+ )
|
|
|
+}
|
|
|
+export default Footer;
|