Add course view and update events view

src/Routes.js

@@ -14,6 +14,7 @@ import AlgoPythonView from 'src/views/pages/Courses/AlgoPythonView'
 import WebFullStakView from 'src/views/pages/Courses/WebFullStakView'
 import CompetitiveJavaView from 'src/views/pages/Courses/CompetitiveJavaView'
 import PythonDevelopmentView from 'src/views/pages/Courses/PythonDevelopmentView'
+import CoursesView from 'src/views/pages/CoursesView';
 
 const routesConfig = [
   {
@@ -93,6 +94,20 @@ const routesConfig = [
       }
     ]
   },
+  {
+    path: '/courses',
+    layout: MainLayout,
+    routes: [
+      {
+        exact: true,
+        path: '/courses',
+        component: CoursesView
+      },
+      {
+        component: () => <Redirect to="/404" />
+      }
+    ]
+  },
   {
     path: '/machine-learning-using-python',
     layout: MainLayout,

src/views/pages/CoursesView/Apply.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+import {
+  Box,
+  Grid,
+  Typography,
+  makeStyles,
+  TextField,
+  Button
+} from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    minHeight: '350px',
+    color: '#FFF',
+    padding: '100px 70px',
+    [theme.breakpoints.down('md')]: {
+      paddingLeft: 15,
+      paddingRight: 15
+    }
+  },
+  main: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0px',
+    color: '#FFF'
+  },
+  btn: {
+    backgroundColor: '#A60000',
+    color: '#ffffff',
+    textTransform: 'capitalize',
+    [theme.breakpoints.down('sm')]: {
+      width: '100%'
+    },
+    '&:hover': {
+      backgroundColor: 'rgba(166, 0, 0, 0.8)'
+    }
+  },
+  applyleft: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  textDetails: {
+    '& .MuiOutlinedInput-root': {
+      '& fieldset': {
+        borderColor: 'rgba(255, 255, 255, 0.2)'
+      },
+      '&:hover fieldset': {
+        borderColor: 'rgba(255, 255, 255, 0.4)'
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: 'rgba(255, 255, 255, 0.6)'
+      }
+    }
+  }
+}));
+
+function Apply({ className, ...rest }) {
+  const classes = useStyles();
+
+  return (
+    <div
+      className={clsx(classes.root, className)}
+      style={{
+        backgroundImage: 'url("/static/events/apply.png")',
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat'
+      }}
+      {...rest}
+    >
+      <Grid container maxWidth="lg">
+        <Grid
+          item
+          lg={12}
+          md={12}
+          sm={12}
+          xs={12}
+          className={classes.applyleft}
+        >
+          <div className={classes.main}>
+            <Typography
+              variant="h3"
+              style={{
+                marginBottom: '24px'
+              }}
+            >
+              Tell Us What You Want To Learn Next
+            </Typography>
+            <TextField
+              className={classes.textDetails}
+              multiline
+              variant="outlined"
+              rows={5}
+              style={{
+                minWidth: '500px',
+                background: 'rgba(255, 255, 255, 0.8)',
+                borderRadius: '5px',
+                color: 'white'
+              }}
+            />
+            <Box mt={3}>
+              <Button color="primary" size="large" variant="contained">
+                Submit
+              </Button>
+            </Box>
+          </div>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+Apply.propTypes = {
+  className: PropTypes.string
+};
+
+export default Apply;

src/views/pages/CoursesView/CTA.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+import {
+  Box,
+  Grid,
+  Container,
+  Typography,
+  makeStyles,
+  Button,
+  Hidden
+} from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: theme.palette.background.LIGHT,
+    paddingLeft: 70,
+    paddingRight: 70,
+    //write css for small screen
+    [theme.breakpoints.down('md')]: {
+      paddingLeft: 15,
+      paddingRight: 15
+    }
+  },
+  cardGrid: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(8)
+  },
+  extraMargin: {
+    marginTop: theme.spacing(6)
+  },
+  extraMarginTop: {
+    marginTop: theme.spacing(2)
+  },
+  extraPadding: {
+    padding: '32px !important'
+  },
+  flex: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4)
+  },
+  Button: {
+    textTransform: 'capitalize',
+    fontSize: '16px',
+    padding: '8px 32px',
+    [theme.breakpoints.down('sm')]: {
+      width: '100%'
+    }
+  },
+  primeBtn: {
+    backgroundColor: '#A60000',
+    color: '#ffffff',
+    '&:hover': {
+      backgroundColor: '#A60000',
+      opacity: '0.8'
+    }
+  },
+  secondaryBtn: {
+    borderColor: '#A60000',
+    color: '#A60000'
+  }
+}));
+
+function CTA({ className, ...rest }) {
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.root, className)} {...rest}>
+      <Container className={classes.cardGrid} maxWidth="lg">
+        <Grid container spacing={2} className={classes.extraMargin}>
+          <Grid item xs={12} sm={6} md={4}>
+            <Box className={classes.flex} display="flex" flexDirection="column">
+              <Hidden mdUp>
+                <Typography
+                  color="textPrimary"
+                  variant="h4"
+                  style={{ lineHeight: '1.5' }}
+                >
+                  Want Us to conduct a Workshop
+                </Typography>
+              </Hidden>
+
+              <Hidden smDown>
+                <Typography
+                  color="textPrimary"
+                  variant="h4"
+                  style={{ lineHeight: '1.5' }}
+                >
+                  Want Us to conduct a <br /> Workshop
+                </Typography>
+              </Hidden>
+
+              <Box className={classes.flex}>
+                <Grid container xs={12} sm={12}>
+                  <Grid item xs={12} sm={12}>
+                    <Button
+                      className={classes.Button + ' ' + classes.primeBtn}
+                      component="a"
+                      href="https://codecau.se/ws"
+                      target="_blank"
+                      size="large"
+                      variant="contained"
+                    >
+                      Register
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} sm={6} md={4}>
+            <Box className={classes.flex} display="flex" flexDirection="column">
+              <Hidden mdUp>
+                <Typography
+                  color="textPrimary"
+                  variant="h4"
+                  style={{ lineHeight: '1.5' }}
+                >
+                  Join Us or Submit a YouTube Video
+                </Typography>
+              </Hidden>
+
+              <Hidden smDown>
+                <Typography
+                  color="textPrimary"
+                  variant="h4"
+                  style={{ lineHeight: '1.5' }}
+                >
+                  Join Us or Submit a <br /> YouTube Video
+                </Typography>
+              </Hidden>
+
+              <Box className={classes.flex}>
+                <Grid container xs={12} sm={12}>
+                  <Grid item xs={12} sm={12}>
+                    <Button
+                      className={classes.Button + ' ' + classes.secondaryBtn}
+                      component="a"
+                      href="https://codecau.se/sv"
+                      target="_blank"
+                      size="large"
+                      variant="outlined"
+                    >
+                      Know More
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} sm={12} md={4}>
+            <Box className={classes.flex} display="flex" flexDirection="column">
+              <Hidden mdUp>
+                <Typography
+                  color="textPrimary"
+                  variant="h4"
+                  style={{ lineHeight: '1.5' }}
+                >
+                  Get Updates About Our Initiatives
+                </Typography>
+              </Hidden>
+
+              <Hidden smDown>
+                <Typography
+                  color="textPrimary"
+                  variant="h4"
+                  style={{ lineHeight: '1.5' }}
+                >
+                  Get Updates About Our <br /> Initiatives
+                </Typography>
+              </Hidden>
+
+              <Box className={classes.flex}>
+                <Grid container xs={12} sm={12}>
+                  <Grid item xs={12} sm={12}>
+                    <Button
+                      className={classes.Button + ' ' + classes.secondaryBtn}
+                      component="a"
+                      href="https://cdn.forms-content.sg-form.com/34a5f5b6-c515-11ea-ae40-26ea0c9b1f0c"
+                      target="_blank"
+                      size="large"
+                      variant="outlined"
+                    >
+                      Enroll Now
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Box>
+          </Grid>
+        </Grid>
+      </Container>
+    </div>
+  );
+}
+
+CTA.propTypes = {
+  className: PropTypes.string
+};
+
+export default CTA;