Footer and responsiveness

This commit is contained in:
Muhammad Adnan 2023-09-13 16:56:06 +05:00
parent 7e0c6b23ed
commit 2f6cbc635d
2 changed files with 357 additions and 226 deletions

View File

@ -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>

View File

@ -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 ( return (
<> <footer className={classes.footer}>
<Container <Container maxWidth="xl">
maxWidth="xl" <div className={classes.footerContainer}>
style={{ <LogoHorizontal className={classes.logo} color="red" />
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 <Button
variant="outlined" variant="outlined"
disableElevation className={classes.button}
className={classes.btmBtn} endIcon={<ArrowRightIcon />}
// 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 Start browsing
</Typography>
</Button> </Button>
</Box> <div>
<Box style={{ display: "flex" }}>
<Box>
<Button <Button
variant="contained" variant="contained"
disableElevation className={classes.button}
className={classes.loginBtn} startIcon={<AppleIcon />}
// style={{display:"inline-block"}}
startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
> >
<Typography Download for Apple iOS
variant="button"
color="textSecondary"
align="left"
className={clsx(classes.font700, classes.btnText)}
>
Download for Apple ios
</Typography>
</Button> </Button>
<Box style={{ display: "block" }} />
<Button <Button
variant="contained" variant="contained"
disableElevation className={classes.button}
// style={{display:'block'}} startIcon={<AppleIcon />}
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 Download for Android
</Typography>
</Button> </Button>
</Box> </div>
<Box> <div className={classes.socialLinks}>
<Link href="https://www.facebook.com/enatega"> <Link href="https://www.facebook.com/enatega">Facebook</Link>
<Typography <Link href="https://www.linkedin.com/enatega">LinkedIn</Link>
variant="button" <Link href="https://www.instagram.com/enatega">Instagram</Link>
color="textPrimary" <Link href="https://www.youtube.com/enatega">YouTube</Link>
// align="left" </div>
className={clsx(classes.font700, classes.btnText)} </div>
>
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> </Container>
<Box <Box className={classes.footerContainer}>
style={{ <Typography className={classes.copyright}>
width: "100%", Enatega © {new Date().getFullYear()} All rights reserved
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> </Typography>
<Box style={{ display: "flex" }}> <div>
<Typography className={classes.copyRightText}>Privacy Policy</Typography> <Typography className={classes.copyright}>Privacy Policy</Typography>
<Typography className={classes.copyRightText}>Terms&Conditions</Typography> <Typography className={classes.copyright}>
Terms & Conditions
</Typography>
</div>
</Box> </Box>
</Box> </footer>
</Box>
</>
); );
} }