123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- 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"
- import Social from "./SocialLink";
- 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 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;
|