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) {
|
||||
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
|
||||
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"
|
||||
/>
|
||||
<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}>
|
||||
{"enatega"}
|
||||
</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 clsx from "clsx";
|
||||
import FacebookIcon from "@material-ui/icons/Facebook";
|
||||
import InstagramIcon from "@material-ui/icons/Instagram";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Link,
|
||||
makeStyles,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
import ArrowRightIcon from "@material-ui/icons/ArrowRight";
|
||||
import EnategaLogo from "../../assets/images/enategaFooter.png";
|
||||
import AppleIcon from "../../assets/icons/AppleIcon";
|
||||
import AppleIcon from "@material-ui/icons/Apple";
|
||||
import LogoHorizontal from "../../assets/icons/LogoHorizontal";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
titleStyle: {
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.disabled,
|
||||
footer: {
|
||||
backgroundColor: "black",
|
||||
paddingTop: theme.spacing(4),
|
||||
paddingBottom: theme.spacing(2),
|
||||
color: "white",
|
||||
},
|
||||
copyRightText: {
|
||||
...theme.typography.subtitle2,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
color: theme.palette.primary.light,
|
||||
paddingRight: "1vw",
|
||||
fontSize: "1vw",
|
||||
footerContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
textAlign: "center",
|
||||
},
|
||||
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),
|
||||
button: {
|
||||
backgroundColor: "white",
|
||||
margin: theme.spacing(2, 0),
|
||||
borderRadius: "4vw",
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.text.primary,
|
||||
borderWidth: 2,
|
||||
"&:disabled": {
|
||||
backgroundColor: theme.palette.grey[100],
|
||||
},
|
||||
border: "2px solid white",
|
||||
fontSize: "1rem",
|
||||
padding: theme.spacing(1, 3),
|
||||
textTransform: "none",
|
||||
"&:hover": {
|
||||
opacity: 0.9,
|
||||
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() {
|
||||
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 />
|
||||
<footer className={classes.footer}>
|
||||
<Container maxWidth="xl">
|
||||
<div className={classes.footerContainer}>
|
||||
<LogoHorizontal className={classes.logo} color="red" />
|
||||
<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)}
|
||||
className={classes.button}
|
||||
endIcon={<ArrowRightIcon />}
|
||||
>
|
||||
Start browsing
|
||||
</Typography>
|
||||
</Button>
|
||||
</Box>
|
||||
<Box style={{ display: "flex" }}>
|
||||
<Box>
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
disableElevation
|
||||
className={classes.loginBtn}
|
||||
// style={{display:"inline-block"}}
|
||||
startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
|
||||
className={classes.button}
|
||||
startIcon={<AppleIcon />}
|
||||
>
|
||||
<Typography
|
||||
variant="button"
|
||||
color="textSecondary"
|
||||
align="left"
|
||||
className={clsx(classes.font700, classes.btnText)}
|
||||
>
|
||||
Download for Apple ios
|
||||
</Typography>
|
||||
Download for Apple iOS
|
||||
</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)}
|
||||
className={classes.button}
|
||||
startIcon={<AppleIcon />}
|
||||
>
|
||||
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" /> */}
|
||||
</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>
|
||||
<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
|
||||
<Box className={classes.footerContainer}>
|
||||
<Typography className={classes.copyright}>
|
||||
Enatega © {new Date().getFullYear()} All rights reserved
|
||||
</Typography>
|
||||
<Box style={{ display: "flex" }}>
|
||||
<Typography className={classes.copyRightText}>Privacy Policy</Typography>
|
||||
<Typography className={classes.copyRightText}>Terms&Conditions</Typography>
|
||||
<div>
|
||||
<Typography className={classes.copyright}>Privacy Policy</Typography>
|
||||
<Typography className={classes.copyright}>
|
||||
Terms & Conditions
|
||||
</Typography>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue