Footer and responsiveness
This commit is contained in:
Muhammad Adnan
parent
7e0c6b23ed
commit
2f6cbc635d
|
|
@ -2,12 +2,24 @@ import * as React from "react";
|
||||||
|
|
||||||
function LogoHorizontal(props) {
|
function LogoHorizontal(props) {
|
||||||
return (
|
return (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 175.496 41.29" {...props}>
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1em"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 175.496 41.29"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
fill={props.color || "#febb2c"}
|
fill={props.color || "#febb2c"}
|
||||||
d="M21.928 41.291a49.48 49.48 0 01-2.1-.063C9.102 40.694.396 32.181.011 21.847a21.267 21.267 0 014.8-14.488A21 21 0 0118.188.119a16.847 16.847 0 012.315-.114h.141q4.89-.005 9.78 0h9.3a2.7 2.7 0 012.319 1.3 2.689 2.689 0 01.1 2.649l-1.129 2.183-1.786 3.441c-2.262 4.356-4.6 8.86-6.866 13.305a3.63 3.63 0 01-3.555 2.228h-.074c-2.91-.031-6.011-.046-10.054-.046q-2.649 0-5.3.005H9.791a15.76 15.76 0 001.361 2.475 11.264 11.264 0 009.4 4.859c.867.018 1.784.026 2.888.026h1.407a1.607 1.607 0 011.37.767 1.608 1.608 0 01.058 1.575l-2.909 5.647a1.607 1.607 0 01-1.428.871zm-7.491-25.1c3.589 0 7.438-.005 11.328-.047a1.444 1.444 0 00.156-.227c1.028-1.89 2.03-3.841 3-5.727l.678-1.318-1.329-.008c-1.24-.008-2.461-.015-3.671-.015-1.878 0-3.416.018-4.837.06a10.716 10.716 0 00-6.841 2.834 11.175 11.175 0 00-3.171 4.446z"
|
d="M21.928 41.291a49.48 49.48 0 01-2.1-.063C9.102 40.694.396 32.181.011 21.847a21.267 21.267 0 014.8-14.488A21 21 0 0118.188.119a16.847 16.847 0 012.315-.114h.141q4.89-.005 9.78 0h9.3a2.7 2.7 0 012.319 1.3 2.689 2.689 0 01.1 2.649l-1.129 2.183-1.786 3.441c-2.262 4.356-4.6 8.86-6.866 13.305a3.63 3.63 0 01-3.555 2.228h-.074c-2.91-.031-6.011-.046-10.054-.046q-2.649 0-5.3.005H9.791a15.76 15.76 0 001.361 2.475 11.264 11.264 0 009.4 4.859c.867.018 1.784.026 2.888.026h1.407a1.607 1.607 0 011.37.767 1.608 1.608 0 01.058 1.575l-2.909 5.647a1.607 1.607 0 01-1.428.871zm-7.491-25.1c3.589 0 7.438-.005 11.328-.047a1.444 1.444 0 00.156-.227c1.028-1.89 2.03-3.841 3-5.727l.678-1.318-1.329-.008c-1.24-.008-2.461-.015-3.671-.015-1.878 0-3.416.018-4.837.06a10.716 10.716 0 00-6.841 2.834 11.175 11.175 0 00-3.171 4.446z"
|
||||||
/>
|
/>
|
||||||
<text fill="#0b0b0b" fontSize={32} fontStyle="italic" fontWeight={700} transform="translate(50.496 32)">
|
<text
|
||||||
|
fill="#0b0b0b"
|
||||||
|
fontSize={32}
|
||||||
|
fontStyle="italic"
|
||||||
|
fontWeight={700}
|
||||||
|
transform="translate(50.496 32)"
|
||||||
|
>
|
||||||
<tspan x={0} y={0}>
|
<tspan x={0} y={0}>
|
||||||
{"enatega"}
|
{"enatega"}
|
||||||
</tspan>
|
</tspan>
|
||||||
|
|
|
||||||
|
|
@ -1,247 +1,366 @@
|
||||||
import { Box, Container, Button, Divider, Link, Grid, makeStyles, Typography } from "@material-ui/core";
|
// import { Box, Container, Button, Divider, Link, Grid, makeStyles, Typography } from "@material-ui/core";
|
||||||
|
// import React from "react";
|
||||||
|
// import clsx from "clsx";
|
||||||
|
// import FacebookIcon from "@material-ui/icons/Facebook";
|
||||||
|
// import InstagramIcon from "@material-ui/icons/Instagram";
|
||||||
|
// import ArrowRightIcon from "@material-ui/icons/ArrowRight";
|
||||||
|
// import EnategaLogo from "../../assets/images/enategaFooter.png";
|
||||||
|
// import AppleIcon from "../../assets/icons/AppleIcon";
|
||||||
|
// import LogoHorizontal from "../../assets/icons/LogoHorizontal";
|
||||||
|
|
||||||
|
// const useStyles = makeStyles((theme) => ({
|
||||||
|
// titleStyle: {
|
||||||
|
// ...theme.typography.subtitle2,
|
||||||
|
// color: theme.palette.text.disabled,
|
||||||
|
// },
|
||||||
|
// copyRightText: {
|
||||||
|
// ...theme.typography.subtitle2,
|
||||||
|
// fontWeight: theme.typography.fontWeightRegular,
|
||||||
|
// color: theme.palette.primary.light,
|
||||||
|
// paddingRight: "1vw",
|
||||||
|
// fontSize: "1vw",
|
||||||
|
// },
|
||||||
|
// footerText: {
|
||||||
|
// ...theme.typography.caption,
|
||||||
|
// color: theme.palette.text.disabled,
|
||||||
|
// margin: "0px 10px",
|
||||||
|
// "&:hover": {
|
||||||
|
// color: theme.palette.primary.main,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// iconStyles: {
|
||||||
|
// color: theme.palette.text.disabled,
|
||||||
|
// "&:hover": {
|
||||||
|
// color: theme.palette.primary.main,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// font700: {
|
||||||
|
// fontWeight: theme.typography.fontWeightMedium,
|
||||||
|
// },
|
||||||
|
// btnText: {
|
||||||
|
// width: "inherit",
|
||||||
|
// fontSize: "1vw",
|
||||||
|
// textTransform: "inherit",
|
||||||
|
// padding: theme.spacing(0, 1),
|
||||||
|
// },
|
||||||
|
// marginB: {
|
||||||
|
// marginBottom: theme.spacing(2),
|
||||||
|
// },
|
||||||
|
// loginBtn: {
|
||||||
|
// marginBottom: theme.spacing(2),
|
||||||
|
// padding: theme.spacing(1, 1, 1, 2),
|
||||||
|
// borderRadius: 20,
|
||||||
|
// backgroundColor: theme.palette.grey[100],
|
||||||
|
// "&:disabled": {
|
||||||
|
// backgroundColor: theme.palette.grey[100],
|
||||||
|
// },
|
||||||
|
// "&:hover": {
|
||||||
|
// opacity: 0.9,
|
||||||
|
// backgroundColor: theme.palette.grey[50],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// btmBtn: {
|
||||||
|
// marginTop: theme.spacing(5),
|
||||||
|
// padding: theme.spacing(1, 3, 1, 3),
|
||||||
|
// borderRadius: "4vw",
|
||||||
|
// borderStyle: "solid",
|
||||||
|
// borderColor: theme.palette.text.primary,
|
||||||
|
// borderWidth: 2,
|
||||||
|
// "&:disabled": {
|
||||||
|
// backgroundColor: theme.palette.grey[100],
|
||||||
|
// },
|
||||||
|
// "&:hover": {
|
||||||
|
// opacity: 0.9,
|
||||||
|
// backgroundColor: theme.palette.grey[50],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// }));
|
||||||
|
|
||||||
|
// function Footer() {
|
||||||
|
// const classes = useStyles();
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <Container
|
||||||
|
// maxWidth="xl"
|
||||||
|
// style={{
|
||||||
|
// marginTop: "5vw",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Box
|
||||||
|
// style={{
|
||||||
|
// display: "flex",
|
||||||
|
// justifyContent: "space-between",
|
||||||
|
// margin: "20px 0px",
|
||||||
|
// paddingLeft: "17vw",
|
||||||
|
// paddingRight: "17vw",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Box>
|
||||||
|
// <LogoHorizontal width={"10vw"} height={"3vw"} color={"#000"} />
|
||||||
|
// {/* <img style={{ width: "10vw", height: "3vw" }} src={EnategaLogo} /> */}
|
||||||
|
// <Box />
|
||||||
|
// <Button
|
||||||
|
// variant="outlined"
|
||||||
|
// disableElevation
|
||||||
|
// className={classes.btmBtn}
|
||||||
|
// // style={{display:"inline-block"}}
|
||||||
|
// endIcon={<ArrowRightIcon style={{ width: "3vw", height: "3vw" }} />}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="h1"
|
||||||
|
// color="textPrimary"
|
||||||
|
// align="left"
|
||||||
|
// className={clsx(classes.font700, classes.btnText)}
|
||||||
|
// >
|
||||||
|
// Start browsing
|
||||||
|
// </Typography>
|
||||||
|
// </Button>
|
||||||
|
// </Box>
|
||||||
|
// <Box style={{ display: "flex" }}>
|
||||||
|
// <Box>
|
||||||
|
// <Button
|
||||||
|
// variant="contained"
|
||||||
|
// disableElevation
|
||||||
|
// className={classes.loginBtn}
|
||||||
|
// // style={{display:"inline-block"}}
|
||||||
|
// startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="button"
|
||||||
|
// color="textSecondary"
|
||||||
|
// align="left"
|
||||||
|
// className={clsx(classes.font700, classes.btnText)}
|
||||||
|
// >
|
||||||
|
// Download for Apple ios
|
||||||
|
// </Typography>
|
||||||
|
// </Button>
|
||||||
|
// <Box style={{ display: "block" }} />
|
||||||
|
// <Button
|
||||||
|
// variant="contained"
|
||||||
|
// disableElevation
|
||||||
|
// // style={{display:'block'}}
|
||||||
|
// className={classes.loginBtn}
|
||||||
|
// startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="button"
|
||||||
|
// color="textSecondary"
|
||||||
|
// align="left"
|
||||||
|
// className={clsx(classes.font700, classes.btnText)}
|
||||||
|
// >
|
||||||
|
// Download for Android
|
||||||
|
// </Typography>
|
||||||
|
// </Button>
|
||||||
|
// </Box>
|
||||||
|
// <Box>
|
||||||
|
// <Link href="https://www.facebook.com/enatega">
|
||||||
|
// <Typography
|
||||||
|
// variant="button"
|
||||||
|
// color="textPrimary"
|
||||||
|
// // align="left"
|
||||||
|
// className={clsx(classes.font700, classes.btnText)}
|
||||||
|
// >
|
||||||
|
// Facebook
|
||||||
|
// </Typography>
|
||||||
|
// </Link>
|
||||||
|
// <Box className={classes.marginB} />
|
||||||
|
// <Link href="https://www.facebook.com/enatega">
|
||||||
|
// <Typography
|
||||||
|
// variant="button"
|
||||||
|
// color="textPrimary"
|
||||||
|
// // align="left"
|
||||||
|
// className={clsx(classes.font700, classes.btnText)}
|
||||||
|
// >
|
||||||
|
// LinkedIn
|
||||||
|
// </Typography>
|
||||||
|
// </Link>
|
||||||
|
// <Box className={classes.marginB} />
|
||||||
|
// <Link href="https://www.facebook.com/enatega">
|
||||||
|
// <Typography
|
||||||
|
// variant="button"
|
||||||
|
// color="textPrimary"
|
||||||
|
// // align="left"
|
||||||
|
// className={clsx(classes.font700, classes.btnText)}
|
||||||
|
// >
|
||||||
|
// Instagram
|
||||||
|
// </Typography>
|
||||||
|
// </Link>
|
||||||
|
// <Box className={classes.marginB} />
|
||||||
|
// <Link href="https://www.facebook.com/enatega">
|
||||||
|
// <Typography
|
||||||
|
// variant="button"
|
||||||
|
// color="textPrimary"
|
||||||
|
// // align="left"
|
||||||
|
// className={clsx(classes.font700, classes.btnText)}
|
||||||
|
// >
|
||||||
|
// Youtube
|
||||||
|
// </Typography>
|
||||||
|
// </Link>
|
||||||
|
// </Box>
|
||||||
|
// {/* <Link href="https://www.facebook.com/enatega">
|
||||||
|
// <FacebookIcon className={classes.iconStyles} fontSize="large" />
|
||||||
|
// </Link>
|
||||||
|
// <Link href="https://www.instagram.com/enatega.nb/">
|
||||||
|
// <InstagramIcon style={{ marginLeft: "20px" }} className={classes.iconStyles} fontSize="large" />
|
||||||
|
// </Link> */}
|
||||||
|
// </Box>
|
||||||
|
// </Box>
|
||||||
|
// {/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
|
||||||
|
|
||||||
|
// {/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
|
||||||
|
// </Container>
|
||||||
|
// <Box
|
||||||
|
// style={{
|
||||||
|
// width: "100%",
|
||||||
|
// height: "5vw",
|
||||||
|
// borderTopLeftRadius: 30,
|
||||||
|
// borderTopRightRadius: 30,
|
||||||
|
// backgroundColor: "black",
|
||||||
|
// marginTop: "30px",
|
||||||
|
// textAlign: "center",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Box
|
||||||
|
// style={{
|
||||||
|
// display: "flex",
|
||||||
|
// textAlign: "center",
|
||||||
|
// margin: "auto",
|
||||||
|
// alignItems: "center",
|
||||||
|
// height: "100%",
|
||||||
|
// justifyContent: "space-between",
|
||||||
|
// alignItems: "center",
|
||||||
|
// width: "70%",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography className={classes.copyRightText}>
|
||||||
|
// Enatega {" "}© {new Date().getFullYear()} All right reserved
|
||||||
|
// </Typography>
|
||||||
|
// <Box style={{ display: "flex" }}>
|
||||||
|
// <Typography className={classes.copyRightText}>Privacy Policy</Typography>
|
||||||
|
// <Typography className={classes.copyRightText}>Terms&Conditions</Typography>
|
||||||
|
// </Box>
|
||||||
|
// </Box>
|
||||||
|
// </Box>
|
||||||
|
// </>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export default Footer;
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import clsx from "clsx";
|
import {
|
||||||
import FacebookIcon from "@material-ui/icons/Facebook";
|
Box,
|
||||||
import InstagramIcon from "@material-ui/icons/Instagram";
|
Button,
|
||||||
|
Container,
|
||||||
|
Link,
|
||||||
|
makeStyles,
|
||||||
|
Typography,
|
||||||
|
} from "@material-ui/core";
|
||||||
import ArrowRightIcon from "@material-ui/icons/ArrowRight";
|
import ArrowRightIcon from "@material-ui/icons/ArrowRight";
|
||||||
import EnategaLogo from "../../assets/images/enategaFooter.png";
|
import AppleIcon from "@material-ui/icons/Apple";
|
||||||
import AppleIcon from "../../assets/icons/AppleIcon";
|
|
||||||
import LogoHorizontal from "../../assets/icons/LogoHorizontal";
|
import LogoHorizontal from "../../assets/icons/LogoHorizontal";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
titleStyle: {
|
footer: {
|
||||||
...theme.typography.subtitle2,
|
backgroundColor: "black",
|
||||||
color: theme.palette.text.disabled,
|
paddingTop: theme.spacing(4),
|
||||||
|
paddingBottom: theme.spacing(2),
|
||||||
|
color: "white",
|
||||||
},
|
},
|
||||||
copyRightText: {
|
footerContainer: {
|
||||||
...theme.typography.subtitle2,
|
display: "flex",
|
||||||
fontWeight: theme.typography.fontWeightRegular,
|
flexDirection: "column",
|
||||||
color: theme.palette.primary.light,
|
alignItems: "center",
|
||||||
paddingRight: "1vw",
|
textAlign: "center",
|
||||||
fontSize: "1vw",
|
|
||||||
},
|
},
|
||||||
footerText: {
|
button: {
|
||||||
...theme.typography.caption,
|
backgroundColor: "white",
|
||||||
color: theme.palette.text.disabled,
|
margin: theme.spacing(2, 0),
|
||||||
margin: "0px 10px",
|
|
||||||
"&:hover": {
|
|
||||||
color: theme.palette.primary.main,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
iconStyles: {
|
|
||||||
color: theme.palette.text.disabled,
|
|
||||||
"&:hover": {
|
|
||||||
color: theme.palette.primary.main,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
font700: {
|
|
||||||
fontWeight: theme.typography.fontWeightMedium,
|
|
||||||
},
|
|
||||||
btnText: {
|
|
||||||
width: "inherit",
|
|
||||||
fontSize: "1vw",
|
|
||||||
textTransform: "inherit",
|
|
||||||
padding: theme.spacing(0, 1),
|
|
||||||
},
|
|
||||||
marginB: {
|
|
||||||
marginBottom: theme.spacing(2),
|
|
||||||
},
|
|
||||||
loginBtn: {
|
|
||||||
marginBottom: theme.spacing(2),
|
|
||||||
padding: theme.spacing(1, 1, 1, 2),
|
|
||||||
borderRadius: 20,
|
|
||||||
backgroundColor: theme.palette.grey[100],
|
|
||||||
"&:disabled": {
|
|
||||||
backgroundColor: theme.palette.grey[100],
|
|
||||||
},
|
|
||||||
"&:hover": {
|
|
||||||
opacity: 0.9,
|
|
||||||
backgroundColor: theme.palette.grey[50],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
btmBtn: {
|
|
||||||
marginTop: theme.spacing(5),
|
|
||||||
padding: theme.spacing(1, 3, 1, 3),
|
|
||||||
borderRadius: "4vw",
|
borderRadius: "4vw",
|
||||||
borderStyle: "solid",
|
border: "2px solid white",
|
||||||
borderColor: theme.palette.text.primary,
|
fontSize: "1rem",
|
||||||
borderWidth: 2,
|
padding: theme.spacing(1, 3),
|
||||||
"&:disabled": {
|
textTransform: "none",
|
||||||
backgroundColor: theme.palette.grey[100],
|
|
||||||
},
|
|
||||||
"&:hover": {
|
"&:hover": {
|
||||||
opacity: 0.9,
|
|
||||||
backgroundColor: theme.palette.grey[50],
|
backgroundColor: theme.palette.grey[50],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
logo: {
|
||||||
|
width: "15%",
|
||||||
|
marginBottom: theme.spacing(2),
|
||||||
|
},
|
||||||
|
socialLinks: {
|
||||||
|
marginTop: theme.spacing(2),
|
||||||
|
"& a": {
|
||||||
|
color: "white",
|
||||||
|
margin: theme.spacing(0, 2),
|
||||||
|
textDecoration: "none",
|
||||||
|
"&:hover": {
|
||||||
|
color: theme.palette.primary.main,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
copyright: {
|
||||||
|
marginTop: theme.spacing(2),
|
||||||
|
"& p": {
|
||||||
|
color: "white",
|
||||||
|
margin: theme.spacing(0, 1),
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
},
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
function Footer() {
|
function Footer() {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Container
|
|
||||||
maxWidth="xl"
|
|
||||||
style={{
|
|
||||||
marginTop: "5vw",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
margin: "20px 0px",
|
|
||||||
paddingLeft: "17vw",
|
|
||||||
paddingRight: "17vw",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box>
|
|
||||||
<LogoHorizontal width={"10vw"} height={"3vw"} color={"#000"} />
|
|
||||||
{/* <img style={{ width: "10vw", height: "3vw" }} src={EnategaLogo} /> */}
|
|
||||||
<Box />
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
disableElevation
|
|
||||||
className={classes.btmBtn}
|
|
||||||
// style={{display:"inline-block"}}
|
|
||||||
endIcon={<ArrowRightIcon style={{ width: "3vw", height: "3vw" }} />}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="h1"
|
|
||||||
color="textPrimary"
|
|
||||||
align="left"
|
|
||||||
className={clsx(classes.font700, classes.btnText)}
|
|
||||||
>
|
|
||||||
Start browsing
|
|
||||||
</Typography>
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
<Box style={{ display: "flex" }}>
|
|
||||||
<Box>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
disableElevation
|
|
||||||
className={classes.loginBtn}
|
|
||||||
// style={{display:"inline-block"}}
|
|
||||||
startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="button"
|
|
||||||
color="textSecondary"
|
|
||||||
align="left"
|
|
||||||
className={clsx(classes.font700, classes.btnText)}
|
|
||||||
>
|
|
||||||
Download for Apple ios
|
|
||||||
</Typography>
|
|
||||||
</Button>
|
|
||||||
<Box style={{ display: "block" }} />
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
disableElevation
|
|
||||||
// style={{display:'block'}}
|
|
||||||
className={classes.loginBtn}
|
|
||||||
startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="button"
|
|
||||||
color="textSecondary"
|
|
||||||
align="left"
|
|
||||||
className={clsx(classes.font700, classes.btnText)}
|
|
||||||
>
|
|
||||||
Download for Android
|
|
||||||
</Typography>
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Link href="https://www.facebook.com/enatega">
|
|
||||||
<Typography
|
|
||||||
variant="button"
|
|
||||||
color="textPrimary"
|
|
||||||
// align="left"
|
|
||||||
className={clsx(classes.font700, classes.btnText)}
|
|
||||||
>
|
|
||||||
Facebook
|
|
||||||
</Typography>
|
|
||||||
</Link>
|
|
||||||
<Box className={classes.marginB} />
|
|
||||||
<Link href="https://www.facebook.com/enatega">
|
|
||||||
<Typography
|
|
||||||
variant="button"
|
|
||||||
color="textPrimary"
|
|
||||||
// align="left"
|
|
||||||
className={clsx(classes.font700, classes.btnText)}
|
|
||||||
>
|
|
||||||
LinkedIn
|
|
||||||
</Typography>
|
|
||||||
</Link>
|
|
||||||
<Box className={classes.marginB} />
|
|
||||||
<Link href="https://www.facebook.com/enatega">
|
|
||||||
<Typography
|
|
||||||
variant="button"
|
|
||||||
color="textPrimary"
|
|
||||||
// align="left"
|
|
||||||
className={clsx(classes.font700, classes.btnText)}
|
|
||||||
>
|
|
||||||
Instagram
|
|
||||||
</Typography>
|
|
||||||
</Link>
|
|
||||||
<Box className={classes.marginB} />
|
|
||||||
<Link href="https://www.facebook.com/enatega">
|
|
||||||
<Typography
|
|
||||||
variant="button"
|
|
||||||
color="textPrimary"
|
|
||||||
// align="left"
|
|
||||||
className={clsx(classes.font700, classes.btnText)}
|
|
||||||
>
|
|
||||||
Youtube
|
|
||||||
</Typography>
|
|
||||||
</Link>
|
|
||||||
</Box>
|
|
||||||
{/* <Link href="https://www.facebook.com/enatega">
|
|
||||||
<FacebookIcon className={classes.iconStyles} fontSize="large" />
|
|
||||||
</Link>
|
|
||||||
<Link href="https://www.instagram.com/enatega.nb/">
|
|
||||||
<InstagramIcon style={{ marginLeft: "20px" }} className={classes.iconStyles} fontSize="large" />
|
|
||||||
</Link> */}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
{/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
|
|
||||||
|
|
||||||
{/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
|
return (
|
||||||
|
<footer className={classes.footer}>
|
||||||
|
<Container maxWidth="xl">
|
||||||
|
<div className={classes.footerContainer}>
|
||||||
|
<LogoHorizontal className={classes.logo} color="red" />
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
className={classes.button}
|
||||||
|
endIcon={<ArrowRightIcon />}
|
||||||
|
>
|
||||||
|
Start browsing
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
className={classes.button}
|
||||||
|
startIcon={<AppleIcon />}
|
||||||
|
>
|
||||||
|
Download for Apple iOS
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
className={classes.button}
|
||||||
|
startIcon={<AppleIcon />}
|
||||||
|
>
|
||||||
|
Download for Android
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className={classes.socialLinks}>
|
||||||
|
<Link href="https://www.facebook.com/enatega">Facebook</Link>
|
||||||
|
<Link href="https://www.linkedin.com/enatega">LinkedIn</Link>
|
||||||
|
<Link href="https://www.instagram.com/enatega">Instagram</Link>
|
||||||
|
<Link href="https://www.youtube.com/enatega">YouTube</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
<Box
|
<Box className={classes.footerContainer}>
|
||||||
style={{
|
<Typography className={classes.copyright}>
|
||||||
width: "100%",
|
Enatega © {new Date().getFullYear()} All rights reserved
|
||||||
height: "5vw",
|
</Typography>
|
||||||
borderTopLeftRadius: 30,
|
<div>
|
||||||
borderTopRightRadius: 30,
|
<Typography className={classes.copyright}>Privacy Policy</Typography>
|
||||||
backgroundColor: "black",
|
<Typography className={classes.copyright}>
|
||||||
marginTop: "30px",
|
Terms & Conditions
|
||||||
textAlign: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
textAlign: "center",
|
|
||||||
margin: "auto",
|
|
||||||
alignItems: "center",
|
|
||||||
height: "100%",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: "center",
|
|
||||||
width: "70%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography className={classes.copyRightText}>
|
|
||||||
Enatega {" "}© {new Date().getFullYear()} All right reserved
|
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box style={{ display: "flex" }}>
|
</div>
|
||||||
<Typography className={classes.copyRightText}>Privacy Policy</Typography>
|
|
||||||
<Typography className={classes.copyRightText}>Terms&Conditions</Typography>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
</>
|
</footer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue